From afc69ef78f80b72f04312ca04ec92f9a6470f46f Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 3 Oct 2023 11:14:47 +0530 Subject: [PATCH 1/4] feat: Box component added --- packages/design-system/package.json | 6 +- .../plop-templates/stories.tsx.hbs | 14 +- .../design-system/src/Box/Box.constants.ts | 3 + .../design-system/src/Box/Box.stories.tsx | 836 ++++++++++++++++++ packages/design-system/src/Box/Box.styles.tsx | 36 + packages/design-system/src/Box/Box.tsx | 20 + packages/design-system/src/Box/Box.types.ts | 42 + packages/design-system/src/Box/index.ts | 2 + .../design-system/src/__config__/utils.ts | 11 + yarn.lock | 34 +- 10 files changed, 990 insertions(+), 14 deletions(-) create mode 100644 packages/design-system/src/Box/Box.constants.ts create mode 100644 packages/design-system/src/Box/Box.stories.tsx create mode 100644 packages/design-system/src/Box/Box.styles.tsx create mode 100644 packages/design-system/src/Box/Box.tsx create mode 100644 packages/design-system/src/Box/Box.types.ts create mode 100644 packages/design-system/src/Box/index.ts create mode 100644 packages/design-system/src/__config__/utils.ts diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 7e926bcd6..13fac0db7 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -46,8 +46,8 @@ "@testing-library/react": "12.1.2", "@testing-library/react-hooks": "^7.0.2", "@testing-library/user-event": "13.5.0", - "@types/loadable__component": "^5.13.4", "@types/jest": "^27.4.1", + "@types/loadable__component": "^5.13.4", "@types/react": "^17.0.2", "@types/react-datepicker": "^4.10.0", "@types/react-router-dom": "^5.3.3", @@ -93,8 +93,8 @@ "storybook": "^7.0.24", "storybook-zeplin": "^2.0.1", "styled-components": "^5.3.6", - "tsconfig-paths-webpack-plugin": "^3.5.2", "ts-jest": "27.0.0", + "tsconfig-paths-webpack-plugin": "^3.5.2", "typescript": "4.9.5", "webpack": "^5.88.1" }, @@ -132,6 +132,8 @@ "@react-aria/textfield": "^3.8.1", "@react-stately/radio": "^3.6.2", "@react-stately/toggle": "^3.4.4", + "@xstyled/styled-components": "^3.8.0", + "csstype": "^3.1.2", "date-fns": "^2.29.3", "loglevel": "^1.8.1", "rc-select": "^14.4.3", diff --git a/packages/design-system/plop-templates/stories.tsx.hbs b/packages/design-system/plop-templates/stories.tsx.hbs index 95ab6d55b..cfce0102e 100644 --- a/packages/design-system/plop-templates/stories.tsx.hbs +++ b/packages/design-system/plop-templates/stories.tsx.hbs @@ -1,20 +1,14 @@ import React from "react"; -import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { Meta } from "@storybook/react"; import { {{capitalize name}} } from "./{{capitalize name}}"; export default { title: "Design System/{{capitalize name}}", component: {{capitalize name}}, -} as ComponentMeta; +} as Meta; // eslint-disable-next-line react/function-component-definition -const Template: ComponentStory = (args) => { - return <{{capitalize name}} {...args} />; -}; +const Story = StoryObj; -export const {{capitalize name}}Story = Template.bind({}); -{{capitalize name}}Story.storyName = "{{capitalize name}}"; -{{capitalize name}}Story.args = { - //add arguments here -}; +export const {{capitalize name}}Story: Story = {}; diff --git a/packages/design-system/src/Box/Box.constants.ts b/packages/design-system/src/Box/Box.constants.ts new file mode 100644 index 000000000..f66540ead --- /dev/null +++ b/packages/design-system/src/Box/Box.constants.ts @@ -0,0 +1,3 @@ +import { CLASS_NAME_PREFIX } from "__config__/constants"; + +export const BoxClassName = `${CLASS_NAME_PREFIX}-box`; diff --git a/packages/design-system/src/Box/Box.stories.tsx b/packages/design-system/src/Box/Box.stories.tsx new file mode 100644 index 000000000..f6595bb28 --- /dev/null +++ b/packages/design-system/src/Box/Box.stories.tsx @@ -0,0 +1,836 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { Box } from "./Box"; +import { Text } from "../Text"; + +export default { + title: "Design System/Box", + component: Box, + argTypes: { + width: { + control: { + type: "text", + }, + description: "Width of the box", + }, + height: { + control: { + type: "text", + }, + description: "Height of the box", + }, + m: { + control: { + type: "text", + }, + description: "Margin on top, left, bottom and right", + }, + margin: { + control: { + type: "text", + }, + description: "Margin on top, left, bottom and right", + }, + mt: { + control: { + type: "text", + }, + description: "Margin on top", + }, + marginTop: { + control: { + type: "text", + }, + description: "Margin on top", + }, + mr: { + control: { + type: "text", + }, + description: "Margin on right", + }, + marginRight: { + control: { + type: "text", + }, + description: "Margin on right", + }, + mb: { + control: { + type: "text", + }, + description: "Margin on bottom", + }, + marginBottom: { + control: { + type: "text", + }, + description: "Margin on bottom", + }, + ml: { + control: { + type: "text", + }, + description: "Margin on left", + }, + marginLeft: { + control: { + type: "text", + }, + description: "Margin on left", + }, + mx: { + control: { + type: "text", + }, + description: "Margin on left and right", + }, + marginX: { + control: { + type: "text", + }, + description: "Margin on left and right", + }, + my: { + control: { + type: "text", + }, + description: "Margin on top and bottom", + }, + marginY: { + control: { + type: "text", + }, + description: "Margin on top and bottom", + }, + p: { + control: { + type: "text", + }, + description: "Padding on top, left, bottom and right", + }, + padding: { + control: { + type: "text", + }, + description: "Padding on top, left, bottom and right", + }, + pt: { + control: { + type: "text", + }, + description: "Padding on top", + }, + paddingTop: { + control: { + type: "text", + }, + description: "Padding on top", + }, + pr: { + control: { + type: "text", + }, + description: "Padding on right", + }, + paddingRight: { + control: { + type: "text", + }, + description: "Padding on right", + }, + pb: { + control: { + type: "text", + }, + description: "Padding on bottom", + }, + paddingBottom: { + control: { + type: "text", + }, + description: "Padding on bottom", + }, + pl: { + control: { + type: "text", + }, + description: "Padding on left", + }, + paddingLeft: { + control: { + type: "text", + }, + description: "Padding on left", + }, + px: { + control: { + type: "text", + }, + description: "Padding on left and right", + }, + paddingX: { + control: { + type: "text", + }, + description: "Padding on left and right", + }, + py: { + control: { + type: "text", + }, + description: "Padding on top and bottom", + }, + paddingY: { + control: { + type: "text", + }, + description: "Padding on top and bottom", + }, + display: { + control: { + type: "select", + }, + options: [ + "block", + "inline-block", + "inline", + "flex", + "inline-flex", + "grid", + "inline-grid", + "flow", + "flow-root", + "contents", + "table", + "table-row", + "table-cell", + "table-caption", + "none", + "inherit", + "initial", + "unset", + ], + table: { + type: { + summary: + "block | inline-block | inline | flex | inline-flex | grid | inline-grid | flow | flow-root | contents | table | table-row | table-cell | table-caption | none | inherit | initial | unset", + }, + defaultValue: { summary: "block" }, + }, + description: "Display of the box", + }, + alignItems: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Align items of the box", + }, + alignContent: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Align content of the box", + }, + justifyContent: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Justify content of the box", + }, + justifyItems: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Justify items of the box", + }, + flexWrap: { + control: { + type: "select", + }, + options: ["nowrap", "wrap", "wrap-reverse"], + table: { + type: { + summary: "nowrap | wrap | wrap-reverse", + }, + defaultValue: { summary: "nowrap" }, + }, + description: "Flex wrap of the box", + }, + flexGrow: { + control: { + type: "text", + }, + description: "Flex grow of the box", + }, + flexShrink: { + control: { + type: "text", + }, + description: "Flex shrink of the box", + }, + flexBasis: { + control: { + type: "text", + }, + description: "Flex basis of the box", + }, + flexDirection: { + control: { + type: "select", + }, + options: ["row", "row-reverse", "column", "column-reverse"], + table: { + type: { + summary: "row | row-reverse | column | column-reverse", + }, + defaultValue: { summary: "row" }, + }, + description: "Flex direction of the box", + }, + flex: { + control: { + type: "text", + }, + description: "Flex of the box", + }, + justifySelf: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Justify self of the box", + }, + alignSelf: { + control: { + type: "select", + }, + options: [ + "normal", + "stretch", + "center", + "start", + "end", + "flex-start", + "flex-end", + "self-start", + "self-end", + "baseline", + ], + table: { + type: { + summary: + "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", + }, + defaultValue: { summary: "normal" }, + }, + description: "Align self of the box", + }, + order: { + control: { + type: "text", + }, + description: "Order of the box", + }, + row: { + control: { + type: "text", + }, + description: "Row of the box", + }, + col: { + control: { + type: "text", + }, + description: "Column of the box", + }, + gap: { + control: { + type: "text", + }, + description: "Gap of the box", + }, + columnGap: { + control: { + type: "text", + }, + description: "Column gap of the box", + }, + rowGap: { + control: { + type: "text", + }, + description: "Row gap of the box", + }, + gridColumn: { + control: { + type: "text", + }, + description: "Grid column of the box", + }, + gridRow: { + control: { + type: "text", + }, + description: "Grid row of the box", + }, + gridAutoFlow: { + control: { + type: "text", + }, + description: "Grid auto flow of the box", + }, + gridAutoColumns: { + control: { + type: "text", + }, + description: "Grid auto columns of the box", + }, + gridAutoRows: { + control: { + type: "text", + }, + description: "Grid auto rows of the box", + }, + gridTemplateColumns: { + control: { + type: "text", + }, + description: "Grid template columns of the box", + }, + gridTemplateRows: { + control: { + type: "text", + }, + description: "Grid template rows of the box", + }, + gridTemplateAreas: { + control: { + type: "text", + }, + description: "Grid template areas of the box", + }, + gridArea: { + control: { + type: "text", + }, + description: "Grid area of the box", + }, + minWidth: { + control: { + type: "text", + }, + description: "Minimum width of the box", + }, + maxWidth: { + control: { + type: "text", + }, + description: "Maximum width of the box", + }, + minHeight: { + control: { + type: "text", + }, + description: "Minimum height of the box", + }, + maxHeight: { + control: { + type: "text", + }, + description: "Maximum height of the box", + }, + size: { + control: { + type: "text", + }, + description: "Size of the box. Sets width and height", + }, + id: { + control: { + type: "text", + }, + description: "Id of the box", + }, + className: { + control: { + type: "text", + }, + description: "Classname of the box", + }, + verticalAlign: { + control: { + type: "select", + }, + options: [ + "baseline", + "top", + "middle", + "bottom", + "text-top", + "text-bottom", + "initial", + "inherit", + "unset", + "revert", + "sub", + "super", + ], + description: "Vertical align of the box", + }, + overflow: { + control: { + type: "text", + }, + description: "Overflow of the box", + }, + overflowX: { + control: { + type: "text", + }, + description: "Overflow of the box on the x axis", + }, + overflowY: { + control: { + type: "text", + }, + description: "Overflow of the box on the y axis", + }, + bg: { + control: { + type: "color", + }, + description: "Background color of the box", + }, + backgroundColor: { + control: { + type: "color", + }, + description: "Background color of the box", + }, + opacity: { + control: { + type: "text", + }, + description: "Opacity of the box", + }, + border: { + control: { + type: "text", + }, + description: "Border of the box", + }, + borderWidth: { + control: { + type: "text", + }, + description: "Border width of the box", + }, + borderStyle: { + control: { + type: "text", + }, + description: "Border style of the box", + }, + borderColor: { + control: { + type: "color", + }, + description: "Border color of the box", + }, + borderRadius: { + control: { + type: "text", + }, + description: "Border radius of the box", + }, + borderTop: { + control: { + type: "text", + }, + description: "Border top of the box", + }, + borderTopWidth: { + control: { + type: "text", + }, + description: "Border top width of the box", + }, + borderTopStyle: { + control: { + type: "text", + }, + description: "Border top style of the box", + }, + borderTopColor: { + control: { + type: "color", + }, + description: "Border top color of the box", + }, + borderTopLeftRadius: { + control: { + type: "text", + }, + description: "Border top left radius of the box", + }, + borderTopRightRadius: { + control: { + type: "text", + }, + description: "Border top right radius of the box", + }, + borderRight: { + control: { + type: "text", + }, + description: "Border right of the box", + }, + borderRightWidth: { + control: { + type: "text", + }, + description: "Border right width of the box", + }, + borderRightStyle: { + control: { + type: "text", + }, + description: "Border right style of the box", + }, + borderRightColor: { + control: { + type: "color", + }, + description: "Border right color of the box", + }, + borderBottom: { + control: { + type: "text", + }, + description: "Border bottom of the box", + }, + borderBottomWidth: { + control: { + type: "text", + }, + description: "Border bottom width of the box", + }, + borderBottomStyle: { + control: { + type: "text", + }, + description: "Border bottom style of the box", + }, + borderBottomColor: { + control: { + type: "color", + }, + description: "Border bottom color of the box", + }, + borderBottomLeftRadius: { + control: { + type: "text", + }, + description: "Border bottom left radius of the box", + }, + borderBottomRightRadius: { + control: { + type: "text", + }, + description: "Border bottom right radius of the box", + }, + borderLeft: { + control: { + type: "text", + }, + description: "Border left of the box", + }, + borderLeftWidth: { + control: { + type: "text", + }, + description: "Border left width of the box", + }, + borderLeftStyle: { + control: { + type: "text", + }, + description: "Border left style of the box", + }, + borderLeftColor: { + control: { + type: "color", + }, + description: "Border left color of the box", + }, + borderX: { + control: { + type: "text", + }, + description: "Border left and right of the box", + }, + borderY: { + control: { + type: "text", + }, + description: "Border top and bottom of the box", + }, + position: { + control: { + type: "text", + }, + description: "Position of the box", + }, + zIndex: { + control: { + type: "text", + }, + description: "Z-index of the box", + }, + top: { + control: { + type: "text", + }, + description: "Top of the box", + }, + right: { + control: { + type: "text", + }, + description: "Right of the box", + }, + bottom: { + control: { + type: "text", + }, + description: "Bottom of the box", + }, + left: { + control: { + type: "text", + }, + description: "Left of the box", + }, + boxShadow: { + control: { + type: "text", + }, + description: "Box shadow of the box", + }, + }, +} as Meta; + +type Story = StoryObj; + +export const BoxStory: Story = { + name: "Box", + args: { + bg: "var(--ads-v2-color-bg-brand)", + width: "100px", + height: "100px", + display: "flex", + justifyContent: "center", + alignItems: "center", + }, + render: (args) => ( + + Box + + ), +}; diff --git a/packages/design-system/src/Box/Box.styles.tsx b/packages/design-system/src/Box/Box.styles.tsx new file mode 100644 index 000000000..4bf8a9d6f --- /dev/null +++ b/packages/design-system/src/Box/Box.styles.tsx @@ -0,0 +1,36 @@ +import styled from "styled-components"; +import { + compose, + backgrounds, + borders, + effects, + interactivity, + layout, + sizing, + space, + transforms, + flexboxes, + flexboxGrids, + grids, +} from "@xstyled/system"; +import { width, height } from "__config__/utils"; + +const customSystem = compose( + backgrounds, + borders, + effects, + interactivity, + layout, + sizing, + space, + transforms, + width, + height, + flexboxes, + flexboxGrids, + grids, +); + +export const StyledBox = styled.div` + ${customSystem} +`; diff --git a/packages/design-system/src/Box/Box.tsx b/packages/design-system/src/Box/Box.tsx new file mode 100644 index 000000000..e1966842b --- /dev/null +++ b/packages/design-system/src/Box/Box.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import clsx from "classnames"; + +import { BoxProps } from "./Box.types"; +import { BoxClassName } from "./Box.constants"; +import { StyledBox } from "./Box.styles"; + +function Box({ children, className, ...rest }: BoxProps) { + return ( + + {children} + + ); +} + +Box.displayName = "Box"; + +Box.defaultProps = {}; + +export { Box }; diff --git a/packages/design-system/src/Box/Box.types.ts b/packages/design-system/src/Box/Box.types.ts new file mode 100644 index 000000000..f8d924d05 --- /dev/null +++ b/packages/design-system/src/Box/Box.types.ts @@ -0,0 +1,42 @@ +import React from "react"; +import { + BackgroundsProps as BackgroundProps, + BordersProps as BorderProps, + EffectsProps, + ITheme, + InteractivityProps, + LayoutProps, + Size, + SizingProps, + SpaceProps, + SystemProp, + Theme, + TransformsProps, + FlexboxesProps, + FlexboxGridsProps, + GridsProps, +} from "@xstyled/styled-components"; +import * as CSS from "csstype"; + +interface WidthProps { + width?: SystemProp | CSS.Property.Width, T>; +} + +interface HeightProps { + height?: SystemProp | CSS.Property.Height, T>; +} + +export type BoxProps = WidthProps & + HeightProps & + SpaceProps & + LayoutProps & + SizingProps & + BackgroundProps & + BorderProps & + InteractivityProps & + EffectsProps & + TransformsProps & + FlexboxesProps & + FlexboxGridsProps & + GridsProps & + React.HTMLAttributes; diff --git a/packages/design-system/src/Box/index.ts b/packages/design-system/src/Box/index.ts new file mode 100644 index 000000000..19351180e --- /dev/null +++ b/packages/design-system/src/Box/index.ts @@ -0,0 +1,2 @@ +export * from "./Box"; +export * from "./Box.types"; diff --git a/packages/design-system/src/__config__/utils.ts b/packages/design-system/src/__config__/utils.ts new file mode 100644 index 000000000..e24015c77 --- /dev/null +++ b/packages/design-system/src/__config__/utils.ts @@ -0,0 +1,11 @@ +import { style } from "@xstyled/styled-components"; + +export const width = style({ + prop: ["width", "w"], + css: "width", +}); + +export const height = style({ + prop: ["height", "h"], + css: "height", +}); diff --git a/yarn.lock b/yarn.lock index d2c5bfd9d..0411df37a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7092,6 +7092,36 @@ "@webassemblyjs/wast-parser" "1.9.0" "@xtuc/long" "4.2.2" +"@xstyled/core@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@xstyled/core/-/core-3.8.0.tgz#9f33314976e0ae1ae3cc8ce74b1cc70253085c0b" + integrity sha512-DkRtg1841+xJBW4azIEW6bQGPudnRYGDusXhTTT7W0xhMrSEvIyv02Ivhh6KkHtTYmmUalGJ+dRPHyOqrVpMUA== + dependencies: + "@xstyled/system" "^3.8.0" + "@xstyled/util" "^3.7.0" + +"@xstyled/styled-components@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@xstyled/styled-components/-/styled-components-3.8.0.tgz#dc6cce97b74cec79b3fda4a6a186a7fddd5b5eab" + integrity sha512-TCOByj56DxdF2CM71sdEZSu4cA4s74/+C6n6etY21b0HxqU8Pm1KpMwhCZY0kV3Zb/y2VQsBAhWj5Nspv69Msg== + dependencies: + "@xstyled/core" "^3.8.0" + "@xstyled/system" "^3.8.0" + "@xstyled/util" "^3.7.0" + +"@xstyled/system@^3.8.0": + version "3.8.0" + resolved "https://registry.yarnpkg.com/@xstyled/system/-/system-3.8.0.tgz#0d5959eab770f668561ff9ff7b5866a0f5ac0967" + integrity sha512-XDYihj8UHtA64lcKklUYu/ZN3SCB7ciqb6JBl6uFmaMIr8lgre8chJONqAyIX0s6MLjvcQdseSf0a7X2hTntOw== + dependencies: + "@xstyled/util" "^3.7.0" + csstype "^3.1.1" + +"@xstyled/util@^3.7.0": + version "3.7.0" + resolved "https://registry.yarnpkg.com/@xstyled/util/-/util-3.7.0.tgz#513c045dda0847d43b39612b6d36cc38b507e82d" + integrity sha512-rYtXRcNh+pgRxGnciP0Mas21mpyOzcCTVy7w9uIByQk3EytwBQjDiN6wCasXibkw49Urfti5efsklRbCl5QZww== + "@xtuc/ieee754@^1.2.0": version "1.2.0" resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz" @@ -9546,9 +9576,9 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" -csstype@^3.0.2, csstype@^3.1.0: +csstype@^3.0.2, csstype@^3.1.0, csstype@^3.1.1, csstype@^3.1.2: version "3.1.2" - resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== csv-generate@^3.4.3: From 8fa9867de933a56decfc79ee6b4216665b5a495f Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Thu, 5 Oct 2023 10:36:07 +0530 Subject: [PATCH 2/4] fix:removed default props --- packages/design-system/src/Box/Box.tsx | 2 -- packages/design-system/src/index.ts | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/design-system/src/Box/Box.tsx b/packages/design-system/src/Box/Box.tsx index e1966842b..8d1668807 100644 --- a/packages/design-system/src/Box/Box.tsx +++ b/packages/design-system/src/Box/Box.tsx @@ -15,6 +15,4 @@ function Box({ children, className, ...rest }: BoxProps) { Box.displayName = "Box"; -Box.defaultProps = {}; - export { Box }; diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index cd609baa5..86d4d191b 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -2,6 +2,7 @@ import "./__theme__/default/index.css"; export * from "./Avatar"; export * from "./Button"; +export * from "./Box"; export * from "./Callout"; export * from "./Checkbox"; export * from "./Collapsible"; From e114d8ae8354c7288f5868ff0314feedc6f7e4cf Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 11 Oct 2023 11:46:57 +0530 Subject: [PATCH 3/4] fixes in spaces prop --- .../design-system/src/Box/Box.constants.ts | 27 + .../design-system/src/Box/Box.stories.tsx | 727 +++++++++++++++++- packages/design-system/src/Box/Box.tsx | 15 +- packages/design-system/src/Box/Box.types.ts | 33 +- .../design-system/src/__config__/constants.ts | 1 + .../design-system/src/__config__/types.ts | 17 + 6 files changed, 787 insertions(+), 33 deletions(-) diff --git a/packages/design-system/src/Box/Box.constants.ts b/packages/design-system/src/Box/Box.constants.ts index f66540ead..bc7518159 100644 --- a/packages/design-system/src/Box/Box.constants.ts +++ b/packages/design-system/src/Box/Box.constants.ts @@ -1,3 +1,30 @@ import { CLASS_NAME_PREFIX } from "__config__/constants"; export const BoxClassName = `${CLASS_NAME_PREFIX}-box`; +export const PropsToBeCssPrefixPrepended = [ + "m", + "margin", + "mt", + "marginTop", + "mr", + "marginRight", + "mb", + "marginBottom", + "ml", + "marginLeft", + "mx", + "my", + "p", + "padding", + "pt", + "paddingTop", + "pr", + "paddingRight", + "pb", + "paddingBottom", + "pl", + "paddingLeft", + "px", + "py", + "gap", +]; diff --git a/packages/design-system/src/Box/Box.stories.tsx b/packages/design-system/src/Box/Box.stories.tsx index f6595bb28..1f8b913a8 100644 --- a/packages/design-system/src/Box/Box.stories.tsx +++ b/packages/design-system/src/Box/Box.stories.tsx @@ -22,169 +22,814 @@ export default { }, m: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, + defaultValue: { summary: "spaces-0" }, }, description: "Margin on top, left, bottom and right", }, margin: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on top, left, bottom and right", }, mt: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on top", }, marginTop: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on top", }, mr: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on right", }, marginRight: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on right", }, mb: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on bottom", }, marginBottom: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on bottom", }, ml: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on left", }, marginLeft: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on left", }, mx: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on left and right", }, marginX: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on left and right", }, my: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on top and bottom", }, marginY: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Margin on top and bottom", }, p: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top, left, bottom and right", }, padding: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top, left, bottom and right", }, pt: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top", }, paddingTop: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top", }, pr: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on right", }, paddingRight: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on right", }, pb: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on bottom", }, paddingBottom: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on bottom", }, pl: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on left", }, paddingLeft: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on left", }, px: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on left and right", }, paddingX: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on left and right", }, py: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top and bottom", }, paddingY: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Padding on top and bottom", }, @@ -441,7 +1086,30 @@ export default { }, gap: { control: { - type: "text", + type: "select", + }, + options: [ + "spaces-0", + "spaces-1", + "spaces-2", + "spaces-3", + "spaces-4", + "spaces-5", + "spaces-6", + "spaces-7", + "spaces-8", + "spaces-9", + "spaces-10", + "spaces-11", + "spaces-12", + "spaces-13", + "spaces-14", + ], + table: { + type: { + summary: + "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", + }, }, description: "Gap of the box", }, @@ -827,6 +1495,7 @@ export const BoxStory: Story = { display: "flex", justifyContent: "center", alignItems: "center", + padding: "10px", }, render: (args) => ( diff --git a/packages/design-system/src/Box/Box.tsx b/packages/design-system/src/Box/Box.tsx index 8d1668807..e3b8e2165 100644 --- a/packages/design-system/src/Box/Box.tsx +++ b/packages/design-system/src/Box/Box.tsx @@ -2,12 +2,23 @@ import React from "react"; import clsx from "classnames"; import { BoxProps } from "./Box.types"; -import { BoxClassName } from "./Box.constants"; +import { BoxClassName, PropsToBeCssPrefixPrepended } from "./Box.constants"; import { StyledBox } from "./Box.styles"; +import { CSS_VARIABLE_PREFIX } from "__config__/constants"; function Box({ children, className, ...rest }: BoxProps) { + const transformedRest = Object.entries(rest).reduce((acc, [key, value]) => { + const newValue = PropsToBeCssPrefixPrepended.includes(key) + ? `var(${CSS_VARIABLE_PREFIX}${value})` + : value; + + return { + ...acc, + [key]: newValue, + }; + }, {} as BoxProps); return ( - + {children} ); diff --git a/packages/design-system/src/Box/Box.types.ts b/packages/design-system/src/Box/Box.types.ts index f8d924d05..336df8725 100644 --- a/packages/design-system/src/Box/Box.types.ts +++ b/packages/design-system/src/Box/Box.types.ts @@ -8,7 +8,6 @@ import { LayoutProps, Size, SizingProps, - SpaceProps, SystemProp, Theme, TransformsProps, @@ -18,6 +17,8 @@ import { } from "@xstyled/styled-components"; import * as CSS from "csstype"; +import { Spaces } from "__config__/types"; + interface WidthProps { width?: SystemProp | CSS.Property.Width, T>; } @@ -26,6 +27,34 @@ interface HeightProps { height?: SystemProp | CSS.Property.Height, T>; } +type SpaceProps = { + m?: Spaces; + margin?: Spaces; + mt?: Spaces; + marginTop?: Spaces; + mr?: Spaces; + marginRight?: Spaces; + mb?: Spaces; + marginBottom?: Spaces; + ml?: Spaces; + marginLeft?: Spaces; + mx?: Spaces; + my?: Spaces; + p?: Spaces; + padding?: Spaces; + pt?: Spaces; + paddingTop?: Spaces; + pr?: Spaces; + paddingRight?: Spaces; + pb?: Spaces; + paddingBottom?: Spaces; + pl?: Spaces; + paddingLeft?: Spaces; + px?: Spaces; + py?: Spaces; + gap?: Spaces; +}; + export type BoxProps = WidthProps & HeightProps & SpaceProps & @@ -38,5 +67,5 @@ export type BoxProps = WidthProps & TransformsProps & FlexboxesProps & FlexboxGridsProps & - GridsProps & + Omit & React.HTMLAttributes; diff --git a/packages/design-system/src/__config__/constants.ts b/packages/design-system/src/__config__/constants.ts index 24a1cf092..fbe69f967 100644 --- a/packages/design-system/src/__config__/constants.ts +++ b/packages/design-system/src/__config__/constants.ts @@ -4,3 +4,4 @@ * @see https://en.bem.info/methodology/css/ */ export const CLASS_NAME_PREFIX = "ads-v2"; +export const CSS_VARIABLE_PREFIX = "--ads-v2-"; diff --git a/packages/design-system/src/__config__/types.ts b/packages/design-system/src/__config__/types.ts index 2a2e2e5ed..c2063c47e 100644 --- a/packages/design-system/src/__config__/types.ts +++ b/packages/design-system/src/__config__/types.ts @@ -2,3 +2,20 @@ export type Sizes = "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "xxxxl"; export type Kind = "success" | "error" | "warning" | "info" | undefined; + +export type Spaces = + | "spaces-0" + | "spaces-1" + | "spaces-2" + | "spaces-3" + | "spaces-4" + | "spaces-5" + | "spaces-6" + | "spaces-7" + | "spaces-8" + | "spaces-9" + | "spaces-10" + | "spaces-11" + | "spaces-12" + | "spaces-13" + | "spaces-14"; From e8e1b6746b1e036e26d896dbc6a4d7f881a821ae Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Thu, 12 Oct 2023 14:33:30 +0530 Subject: [PATCH 4/4] removed box story --- .../design-system/src/Box/Box.stories.tsx | 1505 ----------------- 1 file changed, 1505 deletions(-) delete mode 100644 packages/design-system/src/Box/Box.stories.tsx diff --git a/packages/design-system/src/Box/Box.stories.tsx b/packages/design-system/src/Box/Box.stories.tsx deleted file mode 100644 index 1f8b913a8..000000000 --- a/packages/design-system/src/Box/Box.stories.tsx +++ /dev/null @@ -1,1505 +0,0 @@ -import React from "react"; -import { Meta, StoryObj } from "@storybook/react"; - -import { Box } from "./Box"; -import { Text } from "../Text"; - -export default { - title: "Design System/Box", - component: Box, - argTypes: { - width: { - control: { - type: "text", - }, - description: "Width of the box", - }, - height: { - control: { - type: "text", - }, - description: "Height of the box", - }, - m: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - defaultValue: { summary: "spaces-0" }, - }, - description: "Margin on top, left, bottom and right", - }, - margin: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on top, left, bottom and right", - }, - mt: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on top", - }, - marginTop: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on top", - }, - mr: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on right", - }, - marginRight: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on right", - }, - mb: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on bottom", - }, - marginBottom: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on bottom", - }, - ml: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on left", - }, - marginLeft: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on left", - }, - mx: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on left and right", - }, - marginX: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on left and right", - }, - my: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on top and bottom", - }, - marginY: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Margin on top and bottom", - }, - p: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top, left, bottom and right", - }, - padding: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top, left, bottom and right", - }, - pt: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top", - }, - paddingTop: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top", - }, - pr: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on right", - }, - paddingRight: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on right", - }, - pb: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on bottom", - }, - paddingBottom: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on bottom", - }, - pl: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on left", - }, - paddingLeft: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on left", - }, - px: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on left and right", - }, - paddingX: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on left and right", - }, - py: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top and bottom", - }, - paddingY: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Padding on top and bottom", - }, - display: { - control: { - type: "select", - }, - options: [ - "block", - "inline-block", - "inline", - "flex", - "inline-flex", - "grid", - "inline-grid", - "flow", - "flow-root", - "contents", - "table", - "table-row", - "table-cell", - "table-caption", - "none", - "inherit", - "initial", - "unset", - ], - table: { - type: { - summary: - "block | inline-block | inline | flex | inline-flex | grid | inline-grid | flow | flow-root | contents | table | table-row | table-cell | table-caption | none | inherit | initial | unset", - }, - defaultValue: { summary: "block" }, - }, - description: "Display of the box", - }, - alignItems: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Align items of the box", - }, - alignContent: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Align content of the box", - }, - justifyContent: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Justify content of the box", - }, - justifyItems: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Justify items of the box", - }, - flexWrap: { - control: { - type: "select", - }, - options: ["nowrap", "wrap", "wrap-reverse"], - table: { - type: { - summary: "nowrap | wrap | wrap-reverse", - }, - defaultValue: { summary: "nowrap" }, - }, - description: "Flex wrap of the box", - }, - flexGrow: { - control: { - type: "text", - }, - description: "Flex grow of the box", - }, - flexShrink: { - control: { - type: "text", - }, - description: "Flex shrink of the box", - }, - flexBasis: { - control: { - type: "text", - }, - description: "Flex basis of the box", - }, - flexDirection: { - control: { - type: "select", - }, - options: ["row", "row-reverse", "column", "column-reverse"], - table: { - type: { - summary: "row | row-reverse | column | column-reverse", - }, - defaultValue: { summary: "row" }, - }, - description: "Flex direction of the box", - }, - flex: { - control: { - type: "text", - }, - description: "Flex of the box", - }, - justifySelf: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Justify self of the box", - }, - alignSelf: { - control: { - type: "select", - }, - options: [ - "normal", - "stretch", - "center", - "start", - "end", - "flex-start", - "flex-end", - "self-start", - "self-end", - "baseline", - ], - table: { - type: { - summary: - "normal | stretch | center | start | end | flex-start | flex-end | self-start | self-end | baseline", - }, - defaultValue: { summary: "normal" }, - }, - description: "Align self of the box", - }, - order: { - control: { - type: "text", - }, - description: "Order of the box", - }, - row: { - control: { - type: "text", - }, - description: "Row of the box", - }, - col: { - control: { - type: "text", - }, - description: "Column of the box", - }, - gap: { - control: { - type: "select", - }, - options: [ - "spaces-0", - "spaces-1", - "spaces-2", - "spaces-3", - "spaces-4", - "spaces-5", - "spaces-6", - "spaces-7", - "spaces-8", - "spaces-9", - "spaces-10", - "spaces-11", - "spaces-12", - "spaces-13", - "spaces-14", - ], - table: { - type: { - summary: - "spaces-0(0) | spaces-1(2px) | spaces-2(4px) | spaces-3(8px) | spaces-4(12px) | spaces-5(16px) | spaces-6(20px) | spaces-7(24px) | spaces-8(28px) | spaces-9(32px) | spaces-10(36px) | spaces-11(40px) | spaces-12(44px) | spaces-13(48px) | spaces-14(52px)", - }, - }, - description: "Gap of the box", - }, - columnGap: { - control: { - type: "text", - }, - description: "Column gap of the box", - }, - rowGap: { - control: { - type: "text", - }, - description: "Row gap of the box", - }, - gridColumn: { - control: { - type: "text", - }, - description: "Grid column of the box", - }, - gridRow: { - control: { - type: "text", - }, - description: "Grid row of the box", - }, - gridAutoFlow: { - control: { - type: "text", - }, - description: "Grid auto flow of the box", - }, - gridAutoColumns: { - control: { - type: "text", - }, - description: "Grid auto columns of the box", - }, - gridAutoRows: { - control: { - type: "text", - }, - description: "Grid auto rows of the box", - }, - gridTemplateColumns: { - control: { - type: "text", - }, - description: "Grid template columns of the box", - }, - gridTemplateRows: { - control: { - type: "text", - }, - description: "Grid template rows of the box", - }, - gridTemplateAreas: { - control: { - type: "text", - }, - description: "Grid template areas of the box", - }, - gridArea: { - control: { - type: "text", - }, - description: "Grid area of the box", - }, - minWidth: { - control: { - type: "text", - }, - description: "Minimum width of the box", - }, - maxWidth: { - control: { - type: "text", - }, - description: "Maximum width of the box", - }, - minHeight: { - control: { - type: "text", - }, - description: "Minimum height of the box", - }, - maxHeight: { - control: { - type: "text", - }, - description: "Maximum height of the box", - }, - size: { - control: { - type: "text", - }, - description: "Size of the box. Sets width and height", - }, - id: { - control: { - type: "text", - }, - description: "Id of the box", - }, - className: { - control: { - type: "text", - }, - description: "Classname of the box", - }, - verticalAlign: { - control: { - type: "select", - }, - options: [ - "baseline", - "top", - "middle", - "bottom", - "text-top", - "text-bottom", - "initial", - "inherit", - "unset", - "revert", - "sub", - "super", - ], - description: "Vertical align of the box", - }, - overflow: { - control: { - type: "text", - }, - description: "Overflow of the box", - }, - overflowX: { - control: { - type: "text", - }, - description: "Overflow of the box on the x axis", - }, - overflowY: { - control: { - type: "text", - }, - description: "Overflow of the box on the y axis", - }, - bg: { - control: { - type: "color", - }, - description: "Background color of the box", - }, - backgroundColor: { - control: { - type: "color", - }, - description: "Background color of the box", - }, - opacity: { - control: { - type: "text", - }, - description: "Opacity of the box", - }, - border: { - control: { - type: "text", - }, - description: "Border of the box", - }, - borderWidth: { - control: { - type: "text", - }, - description: "Border width of the box", - }, - borderStyle: { - control: { - type: "text", - }, - description: "Border style of the box", - }, - borderColor: { - control: { - type: "color", - }, - description: "Border color of the box", - }, - borderRadius: { - control: { - type: "text", - }, - description: "Border radius of the box", - }, - borderTop: { - control: { - type: "text", - }, - description: "Border top of the box", - }, - borderTopWidth: { - control: { - type: "text", - }, - description: "Border top width of the box", - }, - borderTopStyle: { - control: { - type: "text", - }, - description: "Border top style of the box", - }, - borderTopColor: { - control: { - type: "color", - }, - description: "Border top color of the box", - }, - borderTopLeftRadius: { - control: { - type: "text", - }, - description: "Border top left radius of the box", - }, - borderTopRightRadius: { - control: { - type: "text", - }, - description: "Border top right radius of the box", - }, - borderRight: { - control: { - type: "text", - }, - description: "Border right of the box", - }, - borderRightWidth: { - control: { - type: "text", - }, - description: "Border right width of the box", - }, - borderRightStyle: { - control: { - type: "text", - }, - description: "Border right style of the box", - }, - borderRightColor: { - control: { - type: "color", - }, - description: "Border right color of the box", - }, - borderBottom: { - control: { - type: "text", - }, - description: "Border bottom of the box", - }, - borderBottomWidth: { - control: { - type: "text", - }, - description: "Border bottom width of the box", - }, - borderBottomStyle: { - control: { - type: "text", - }, - description: "Border bottom style of the box", - }, - borderBottomColor: { - control: { - type: "color", - }, - description: "Border bottom color of the box", - }, - borderBottomLeftRadius: { - control: { - type: "text", - }, - description: "Border bottom left radius of the box", - }, - borderBottomRightRadius: { - control: { - type: "text", - }, - description: "Border bottom right radius of the box", - }, - borderLeft: { - control: { - type: "text", - }, - description: "Border left of the box", - }, - borderLeftWidth: { - control: { - type: "text", - }, - description: "Border left width of the box", - }, - borderLeftStyle: { - control: { - type: "text", - }, - description: "Border left style of the box", - }, - borderLeftColor: { - control: { - type: "color", - }, - description: "Border left color of the box", - }, - borderX: { - control: { - type: "text", - }, - description: "Border left and right of the box", - }, - borderY: { - control: { - type: "text", - }, - description: "Border top and bottom of the box", - }, - position: { - control: { - type: "text", - }, - description: "Position of the box", - }, - zIndex: { - control: { - type: "text", - }, - description: "Z-index of the box", - }, - top: { - control: { - type: "text", - }, - description: "Top of the box", - }, - right: { - control: { - type: "text", - }, - description: "Right of the box", - }, - bottom: { - control: { - type: "text", - }, - description: "Bottom of the box", - }, - left: { - control: { - type: "text", - }, - description: "Left of the box", - }, - boxShadow: { - control: { - type: "text", - }, - description: "Box shadow of the box", - }, - }, -} as Meta; - -type Story = StoryObj; - -export const BoxStory: Story = { - name: "Box", - args: { - bg: "var(--ads-v2-color-bg-brand)", - width: "100px", - height: "100px", - display: "flex", - justifyContent: "center", - alignItems: "center", - padding: "10px", - }, - render: (args) => ( - - Box - - ), -};