From 78656f2116192de5045855e13b0a49acc82a6e49 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Wed, 15 Feb 2023 19:12:10 +0000 Subject: [PATCH] Layout Story (#7116) * Flex component + spacing story * Add Flex Story * Remove flex component --- .../ui/components/layout/spacing.stories.mdx | 85 +++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 packages/ui/components/layout/spacing.stories.mdx diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx new file mode 100644 index 0000000000..8d8d63ed1b --- /dev/null +++ b/packages/ui/components/layout/spacing.stories.mdx @@ -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"; + + + + + +## 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>