public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout Story (#7116) 

* Flex component + spacing story

* Add Flex Story

* Remove flex component
feat/radix-popover-select
sean-brydon 2023-02-15 19:12:10 +00:00 committed by GitHub
parent 1fa5e296af
commit 78656f2116
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 85 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
packages/ui/components/layout/spacing.stories.mdx Normal file
View File

@ -0,0 +1,85 @@
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
VariantsTable,
VariantColumn,
RowTitles,
CustomArgsTable,
} from "@calcom/storybook/components";
import { Tooltip } from "../tooltip";
import { FiPlus, FiX } from "../icon";
import { Flex } from "./Flex";
<Meta title="Layout/Spacing" />
<Title title="Spacing" suffix="Brief" subtitle="Version 2.0 — Last Update: 15 Feb 2023" />
## Definition
Defines the spacing guide used in Cal.coms design system
## Structure
<Examples title="Spacing">
<TooltipPrimitive.Provider>
<>
<Example title="0"></Example>
<Example title="px">
<Tooltip content="1px">
<div className="h-4 w-px bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="0.5">
<Tooltip content="2px">
<div className="h-4 w-0.5 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="1">
<Tooltip content="4px">
<div className="h-4 w-1 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="2">
<Tooltip content="8px">
<div className="h-4 w-2 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="3">
<Tooltip content="12px">
<div className="h-4 w-3 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="4">
<Tooltip content="16px">
<div className="h-4 w-4 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="5">
<Tooltip content="20px">
<div className="h-4 w-5 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="6">
<Tooltip content="24px">
<div className="h-4 w-6 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="8">
<Tooltip content="32px">
<div className="h-4 w-8 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
<Example title="10">
<Tooltip content="48px">
<div className="h-4 w-10 bg-gray-900 rounded-sm"> </div>
</Tooltip>
</Example>
</>
</TooltipPrimitive.Provider>
</Examples>