diff --git a/packages/docs/src/stories/Box.stories.tsx b/packages/docs/src/stories/Box.stories.tsx index a3ec07d..e5e9405 100644 --- a/packages/docs/src/stories/Box.stories.tsx +++ b/packages/docs/src/stories/Box.stories.tsx @@ -1,4 +1,4 @@ -import { Box, BoxProps } from '@ignite-ui/react'; +import { Box, BoxProps, Text } from '@ignite-ui/react'; import { StoryObj, Meta } from '@storybook/react'; export default { @@ -7,7 +7,7 @@ export default { args: { children: ( <> - Box component children + Box component children ), }, diff --git a/packages/docs/src/stories/Heading.stories.tsx b/packages/docs/src/stories/Heading.stories.tsx new file mode 100644 index 0000000..289a71c --- /dev/null +++ b/packages/docs/src/stories/Heading.stories.tsx @@ -0,0 +1,28 @@ +import { Heading, HeadingProps } from '@ignite-ui/react'; +import { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'Typography/Heading', + component: Heading, + args: { + children: + 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, nisi suscipit. Placeat sapiente, amet, laborum facere sed at illo explicabo obcaecati necessitatibus cumque similique voluptate fuga quod nemo perspiciatis eveniet?', + }, +} as Meta; + +export const Primary: StoryObj = {}; + +export const CustomTag: StoryObj = { + args: { + children: 'H1 Heading', + as: 'h1', + }, + parameters: { + docs: { + description: { + story: + 'By default, the Heading component is an h2, but it can be used as any other heading tag by passing the desired heading tag to the as props', + }, + }, + }, +}; diff --git a/packages/docs/src/stories/Text.stories.tsx b/packages/docs/src/stories/Text.stories.tsx new file mode 100644 index 0000000..5dacd23 --- /dev/null +++ b/packages/docs/src/stories/Text.stories.tsx @@ -0,0 +1,20 @@ +import { Text, TextProps } from '@ignite-ui/react'; +import { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'Typography/Text', + component: Text, + args: { + children: + 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, nisi suscipit. Placeat sapiente, amet, laborum facere sed at illo explicabo obcaecati necessitatibus cumque similique voluptate fuga quod nemo perspiciatis eveniet?', + }, +} as Meta; + +export const Primary: StoryObj = {}; + +export const CustomTag: StoryObj = { + args: { + children: 'Strong text', + as: 'strong', + }, +}; diff --git a/packages/react/dist/index.d.ts b/packages/react/dist/index.d.ts index f20d927..d8a3b83 100644 --- a/packages/react/dist/index.d.ts +++ b/packages/react/dist/index.d.ts @@ -1,6 +1,6 @@ import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component'; import * as _stitches_react_types_css_util from '@stitches/react/types/css-util'; -import { ComponentProps } from 'react'; +import { ComponentProps, ElementType } from 'react'; declare const Box: _stitches_react_types_styled_component.StyledComponent<"div", {}, {}, _stitches_react_types_css_util.CSS<{}, { colors: { @@ -29,8 +29,8 @@ declare const Box: _stitches_react_types_styled_component.StyledComponent<"div", bold: string; }; fontSizes: { - xxs: string; xs: string; + xxs: string; sm: string; md: string; lg: string; @@ -205,6 +205,423 @@ declare const Box: _stitches_react_types_styled_component.StyledComponent<"div", zIndex: "zIndices"; }, {}>>; interface BoxProps extends ComponentProps { + as?: ElementType; +} + +declare const Text: _stitches_react_types_styled_component.StyledComponent<"p", { + size?: "xs" | "xxs" | "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined; +}, {}, _stitches_react_types_css_util.CSS<{}, { + colors: { + white: string; + black: string; + gray100: string; + gray200: string; + gray400: string; + gray500: string; + gray600: string; + gray700: string; + gray800: string; + gray900: string; + ignite300: string; + ignite500: string; + ignite700: string; + ignite900: string; + }; + fonts: { + default: string; + code: string; + }; + fontWeights: { + regular: string; + medium: string; + bold: string; + }; + fontSizes: { + xs: string; + xxs: string; + sm: string; + md: string; + lg: string; + xl: string; + '2xl': string; + '4xl': string; + '5xl': string; + '6xl': string; + '7xl': string; + '8xl': string; + '9xl': string; + }; + lineHeights: { + shorter: string; + short: string; + base: string; + tall: string; + }; + radii: { + px: string; + xs: string; + sm: string; + md: string; + lg: string; + full: string; + }; + space: { + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + 6: string; + 7: string; + 8: string; + 10: string; + 12: string; + 16: string; + 20: string; + 40: string; + 64: string; + 80: string; + }; +}, { + width: "space"; + height: "space"; + gap: "space"; + gridGap: "space"; + columnGap: "space"; + gridColumnGap: "space"; + rowGap: "space"; + gridRowGap: "space"; + inset: "space"; + insetBlock: "space"; + insetBlockEnd: "space"; + insetBlockStart: "space"; + insetInline: "space"; + insetInlineEnd: "space"; + insetInlineStart: "space"; + margin: "space"; + marginTop: "space"; + marginRight: "space"; + marginBottom: "space"; + marginLeft: "space"; + marginBlock: "space"; + marginBlockEnd: "space"; + marginBlockStart: "space"; + marginInline: "space"; + marginInlineEnd: "space"; + marginInlineStart: "space"; + padding: "space"; + paddingTop: "space"; + paddingRight: "space"; + paddingBottom: "space"; + paddingLeft: "space"; + paddingBlock: "space"; + paddingBlockEnd: "space"; + paddingBlockStart: "space"; + paddingInline: "space"; + paddingInlineEnd: "space"; + paddingInlineStart: "space"; + scrollMargin: "space"; + scrollMarginTop: "space"; + scrollMarginRight: "space"; + scrollMarginBottom: "space"; + scrollMarginLeft: "space"; + scrollMarginBlock: "space"; + scrollMarginBlockEnd: "space"; + scrollMarginBlockStart: "space"; + scrollMarginInline: "space"; + scrollMarginInlineEnd: "space"; + scrollMarginInlineStart: "space"; + scrollPadding: "space"; + scrollPaddingTop: "space"; + scrollPaddingRight: "space"; + scrollPaddingBottom: "space"; + scrollPaddingLeft: "space"; + scrollPaddingBlock: "space"; + scrollPaddingBlockEnd: "space"; + scrollPaddingBlockStart: "space"; + scrollPaddingInline: "space"; + scrollPaddingInlineEnd: "space"; + scrollPaddingInlineStart: "space"; + top: "space"; + right: "space"; + bottom: "space"; + left: "space"; + fontSize: "fontSizes"; + background: "colors"; + backgroundColor: "colors"; + backgroundImage: "colors"; + borderImage: "colors"; + border: "colors"; + borderBlock: "colors"; + borderBlockEnd: "colors"; + borderBlockStart: "colors"; + borderBottom: "colors"; + borderBottomColor: "colors"; + borderColor: "colors"; + borderInline: "colors"; + borderInlineEnd: "colors"; + borderInlineStart: "colors"; + borderLeft: "colors"; + borderLeftColor: "colors"; + borderRight: "colors"; + borderRightColor: "colors"; + borderTop: "colors"; + borderTopColor: "colors"; + caretColor: "colors"; + color: "colors"; + columnRuleColor: "colors"; + outline: "colors"; + outlineColor: "colors"; + fill: "colors"; + stroke: "colors"; + textDecorationColor: "colors"; + fontFamily: "fonts"; + fontWeight: "fontWeights"; + lineHeight: "lineHeights"; + letterSpacing: "letterSpacings"; + blockSize: "sizes"; + minBlockSize: "sizes"; + maxBlockSize: "sizes"; + inlineSize: "sizes"; + minInlineSize: "sizes"; + maxInlineSize: "sizes"; + minWidth: "sizes"; + maxWidth: "sizes"; + minHeight: "sizes"; + maxHeight: "sizes"; + flexBasis: "sizes"; + gridTemplateColumns: "sizes"; + gridTemplateRows: "sizes"; + borderWidth: "borderWidths"; + borderTopWidth: "borderWidths"; + borderLeftWidth: "borderWidths"; + borderRightWidth: "borderWidths"; + borderBottomWidth: "borderWidths"; + borderStyle: "borderStyles"; + borderTopStyle: "borderStyles"; + borderLeftStyle: "borderStyles"; + borderRightStyle: "borderStyles"; + borderBottomStyle: "borderStyles"; + borderRadius: "radii"; + borderTopLeftRadius: "radii"; + borderTopRightRadius: "radii"; + borderBottomRightRadius: "radii"; + borderBottomLeftRadius: "radii"; + boxShadow: "shadows"; + textShadow: "shadows"; + transition: "transitions"; + zIndex: "zIndices"; +}, {}>>; +interface TextProps extends ComponentProps { + as?: ElementType; +} + +declare const Heading: _stitches_react_types_styled_component.StyledComponent<"h2", { + size?: "sm" | "md" | "lg" | "xl" | "2xl" | "4xl" | "5xl" | "6xl" | "3xl" | undefined; +}, {}, _stitches_react_types_css_util.CSS<{}, { + colors: { + white: string; + black: string; + gray100: string; + gray200: string; + gray400: string; + gray500: string; + gray600: string; + gray700: string; + gray800: string; + gray900: string; + ignite300: string; + ignite500: string; + ignite700: string; + ignite900: string; + }; + fonts: { + default: string; + code: string; + }; + fontWeights: { + regular: string; + medium: string; + bold: string; + }; + fontSizes: { + xs: string; + xxs: string; + sm: string; + md: string; + lg: string; + xl: string; + '2xl': string; + '4xl': string; + '5xl': string; + '6xl': string; + '7xl': string; + '8xl': string; + '9xl': string; + }; + lineHeights: { + shorter: string; + short: string; + base: string; + tall: string; + }; + radii: { + px: string; + xs: string; + sm: string; + md: string; + lg: string; + full: string; + }; + space: { + 1: string; + 2: string; + 3: string; + 4: string; + 5: string; + 6: string; + 7: string; + 8: string; + 10: string; + 12: string; + 16: string; + 20: string; + 40: string; + 64: string; + 80: string; + }; +}, { + width: "space"; + height: "space"; + gap: "space"; + gridGap: "space"; + columnGap: "space"; + gridColumnGap: "space"; + rowGap: "space"; + gridRowGap: "space"; + inset: "space"; + insetBlock: "space"; + insetBlockEnd: "space"; + insetBlockStart: "space"; + insetInline: "space"; + insetInlineEnd: "space"; + insetInlineStart: "space"; + margin: "space"; + marginTop: "space"; + marginRight: "space"; + marginBottom: "space"; + marginLeft: "space"; + marginBlock: "space"; + marginBlockEnd: "space"; + marginBlockStart: "space"; + marginInline: "space"; + marginInlineEnd: "space"; + marginInlineStart: "space"; + padding: "space"; + paddingTop: "space"; + paddingRight: "space"; + paddingBottom: "space"; + paddingLeft: "space"; + paddingBlock: "space"; + paddingBlockEnd: "space"; + paddingBlockStart: "space"; + paddingInline: "space"; + paddingInlineEnd: "space"; + paddingInlineStart: "space"; + scrollMargin: "space"; + scrollMarginTop: "space"; + scrollMarginRight: "space"; + scrollMarginBottom: "space"; + scrollMarginLeft: "space"; + scrollMarginBlock: "space"; + scrollMarginBlockEnd: "space"; + scrollMarginBlockStart: "space"; + scrollMarginInline: "space"; + scrollMarginInlineEnd: "space"; + scrollMarginInlineStart: "space"; + scrollPadding: "space"; + scrollPaddingTop: "space"; + scrollPaddingRight: "space"; + scrollPaddingBottom: "space"; + scrollPaddingLeft: "space"; + scrollPaddingBlock: "space"; + scrollPaddingBlockEnd: "space"; + scrollPaddingBlockStart: "space"; + scrollPaddingInline: "space"; + scrollPaddingInlineEnd: "space"; + scrollPaddingInlineStart: "space"; + top: "space"; + right: "space"; + bottom: "space"; + left: "space"; + fontSize: "fontSizes"; + background: "colors"; + backgroundColor: "colors"; + backgroundImage: "colors"; + borderImage: "colors"; + border: "colors"; + borderBlock: "colors"; + borderBlockEnd: "colors"; + borderBlockStart: "colors"; + borderBottom: "colors"; + borderBottomColor: "colors"; + borderColor: "colors"; + borderInline: "colors"; + borderInlineEnd: "colors"; + borderInlineStart: "colors"; + borderLeft: "colors"; + borderLeftColor: "colors"; + borderRight: "colors"; + borderRightColor: "colors"; + borderTop: "colors"; + borderTopColor: "colors"; + caretColor: "colors"; + color: "colors"; + columnRuleColor: "colors"; + outline: "colors"; + outlineColor: "colors"; + fill: "colors"; + stroke: "colors"; + textDecorationColor: "colors"; + fontFamily: "fonts"; + fontWeight: "fontWeights"; + lineHeight: "lineHeights"; + letterSpacing: "letterSpacings"; + blockSize: "sizes"; + minBlockSize: "sizes"; + maxBlockSize: "sizes"; + inlineSize: "sizes"; + minInlineSize: "sizes"; + maxInlineSize: "sizes"; + minWidth: "sizes"; + maxWidth: "sizes"; + minHeight: "sizes"; + maxHeight: "sizes"; + flexBasis: "sizes"; + gridTemplateColumns: "sizes"; + gridTemplateRows: "sizes"; + borderWidth: "borderWidths"; + borderTopWidth: "borderWidths"; + borderLeftWidth: "borderWidths"; + borderRightWidth: "borderWidths"; + borderBottomWidth: "borderWidths"; + borderStyle: "borderStyles"; + borderTopStyle: "borderStyles"; + borderLeftStyle: "borderStyles"; + borderRightStyle: "borderStyles"; + borderBottomStyle: "borderStyles"; + borderRadius: "radii"; + borderTopLeftRadius: "radii"; + borderTopRightRadius: "radii"; + borderBottomRightRadius: "radii"; + borderBottomLeftRadius: "radii"; + boxShadow: "shadows"; + textShadow: "shadows"; + transition: "transitions"; + zIndex: "zIndices"; +}, {}>>; +interface HeadingProps extends ComponentProps { + as?: ElementType; } -export { Box, BoxProps }; +export { Box, BoxProps, Heading, HeadingProps, Text, TextProps }; diff --git a/packages/react/dist/index.js b/packages/react/dist/index.js index 58ba471..117d012 100644 --- a/packages/react/dist/index.js +++ b/packages/react/dist/index.js @@ -37,7 +37,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru // src/index.tsx var src_exports = {}; __export(src_exports, { - Box: () => Box + Box: () => Box, + Heading: () => Heading, + Text: () => Text }); module.exports = __toCommonJS(src_exports); @@ -63,8 +65,8 @@ var fonts = { code: "monospace" }; var fontSizes = { - xxs: "0.625rem", xs: "0.75rem", + xxs: "0.625rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", @@ -145,7 +147,61 @@ var Box = styled("div", { backgroundColor: "$gray800", border: "1px solid $gray600" }); + +// src/components/Text.tsx +var Text = styled("p", { + fontFamily: "$default", + lineHeight: "$base", + margin: 0, + color: "$gray100", + variants: { + size: { + xxs: { fontSize: "xxs" }, + xs: { fontSize: "xs" }, + sm: { fontSize: "sm" }, + md: { fontSize: "md" }, + lg: { fontSize: "lg" }, + xl: { fontSize: "xl" }, + "2xl": { fontSize: "2xl" }, + "4xl": { fontSize: "4xl" }, + "5xl": { fontSize: "5xl" }, + "6xl": { fontSize: "6xl" }, + "7xl": { fontSize: "7xl" }, + "8xl": { fontSize: "8xl" }, + "9xl": { fontSize: "9xl" } + } + }, + defaultVariants: { + size: "md" + } +}); + +// src/components/Heading.tsx +var Heading = styled("h2", { + fontFamily: "$default", + lineHeight: "$shorter", + margin: 0, + color: "$gray100", + variants: { + size: { + sm: { fontSize: "sm" }, + md: { fontSize: "md" }, + lg: { fontSize: "lg" }, + xl: { fontSize: "xl" }, + "2xl": { fontSize: "5xl" }, + "3xl": { fontSize: "6xl" }, + "4xl": { fontSize: "7xl" }, + "5xl": { fontSize: "8xl" }, + "6xl": { fontSize: "9xl" } + } + }, + defaultVariants: { + size: "md" + } +}); // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { - Box + Box, + Heading, + Text }); diff --git a/packages/react/dist/index.mjs b/packages/react/dist/index.mjs index aedc927..50ff3f2 100644 --- a/packages/react/dist/index.mjs +++ b/packages/react/dist/index.mjs @@ -40,8 +40,8 @@ var fonts = { code: "monospace" }; var fontSizes = { - xxs: "0.625rem", xs: "0.75rem", + xxs: "0.625rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", @@ -122,6 +122,60 @@ var Box = styled("div", { backgroundColor: "$gray800", border: "1px solid $gray600" }); + +// src/components/Text.tsx +var Text = styled("p", { + fontFamily: "$default", + lineHeight: "$base", + margin: 0, + color: "$gray100", + variants: { + size: { + xxs: { fontSize: "xxs" }, + xs: { fontSize: "xs" }, + sm: { fontSize: "sm" }, + md: { fontSize: "md" }, + lg: { fontSize: "lg" }, + xl: { fontSize: "xl" }, + "2xl": { fontSize: "2xl" }, + "4xl": { fontSize: "4xl" }, + "5xl": { fontSize: "5xl" }, + "6xl": { fontSize: "6xl" }, + "7xl": { fontSize: "7xl" }, + "8xl": { fontSize: "8xl" }, + "9xl": { fontSize: "9xl" } + } + }, + defaultVariants: { + size: "md" + } +}); + +// src/components/Heading.tsx +var Heading = styled("h2", { + fontFamily: "$default", + lineHeight: "$shorter", + margin: 0, + color: "$gray100", + variants: { + size: { + sm: { fontSize: "sm" }, + md: { fontSize: "md" }, + lg: { fontSize: "lg" }, + xl: { fontSize: "xl" }, + "2xl": { fontSize: "5xl" }, + "3xl": { fontSize: "6xl" }, + "4xl": { fontSize: "7xl" }, + "5xl": { fontSize: "8xl" }, + "6xl": { fontSize: "9xl" } + } + }, + defaultVariants: { + size: "md" + } +}); export { - Box + Box, + Heading, + Text }; diff --git a/packages/react/src/components/Box.tsx b/packages/react/src/components/Box.tsx index 967917b..ce6cee2 100644 --- a/packages/react/src/components/Box.tsx +++ b/packages/react/src/components/Box.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from 'react'; +import { ComponentProps, ElementType } from 'react'; import { styled } from '../styles'; export const Box = styled('div', { @@ -8,4 +8,6 @@ export const Box = styled('div', { border: '1px solid $gray600', }); -export interface BoxProps extends ComponentProps {} +export interface BoxProps extends ComponentProps { + as?: ElementType; +} diff --git a/packages/react/src/components/Heading.tsx b/packages/react/src/components/Heading.tsx new file mode 100644 index 0000000..a54dfc0 --- /dev/null +++ b/packages/react/src/components/Heading.tsx @@ -0,0 +1,31 @@ +import { ComponentProps, ElementType } from 'react'; +import { styled } from '../styles'; + +export const Heading = styled('h2', { + fontFamily: '$default', + lineHeight: '$shorter', + margin: 0, + color: '$gray100', + + variants: { + size: { + sm: { fontSize: 'sm' }, + md: { fontSize: 'md' }, + lg: { fontSize: 'lg' }, + xl: { fontSize: 'xl' }, + '2xl': { fontSize: '5xl' }, + '3xl': { fontSize: '6xl' }, + '4xl': { fontSize: '7xl' }, + '5xl': { fontSize: '8xl' }, + '6xl': { fontSize: '9xl' }, + }, + }, + + defaultVariants: { + size: 'md', + }, +}); + +export interface HeadingProps extends ComponentProps { + as?: ElementType; +} diff --git a/packages/react/src/components/Text.tsx b/packages/react/src/components/Text.tsx new file mode 100644 index 0000000..e2ecde2 --- /dev/null +++ b/packages/react/src/components/Text.tsx @@ -0,0 +1,34 @@ +import { ComponentProps, ElementType } from 'react'; +import { styled } from '../styles'; + +export const Text = styled('p', { + fontFamily: '$default', + lineHeight: '$base', + margin: 0, + color: '$gray100', + variants: { + size: { + xxs: { fontSize: 'xxs' }, + xs: { fontSize: 'xs' }, + sm: { fontSize: 'sm' }, + md: { fontSize: 'md' }, + lg: { fontSize: 'lg' }, + xl: { fontSize: 'xl' }, + '2xl': { fontSize: '2xl' }, + '4xl': { fontSize: '4xl' }, + '5xl': { fontSize: '5xl' }, + '6xl': { fontSize: '6xl' }, + '7xl': { fontSize: '7xl' }, + '8xl': { fontSize: '8xl' }, + '9xl': { fontSize: '9xl' }, + }, + }, + + defaultVariants: { + size: 'md', + }, +}); + +export interface TextProps extends ComponentProps { + as?: ElementType; +} diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index e915d38..179fccf 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -1 +1,3 @@ export * from './components/Box'; +export * from './components/Text'; +export * from './components/Heading'; diff --git a/packages/tokens/dist/index.d.ts b/packages/tokens/dist/index.d.ts index 262399f..f4ee3d5 100644 --- a/packages/tokens/dist/index.d.ts +++ b/packages/tokens/dist/index.d.ts @@ -21,8 +21,8 @@ declare const fonts: { }; declare const fontSizes: { - xxs: string; xs: string; + xxs: string; sm: string; md: string; lg: string; diff --git a/packages/tokens/dist/index.js b/packages/tokens/dist/index.js index 60bc84f..1b876d5 100644 --- a/packages/tokens/dist/index.js +++ b/packages/tokens/dist/index.js @@ -56,8 +56,8 @@ var fonts = { // src/font-sizes.ts var fontSizes = { - xxs: "0.625rem", xs: "0.75rem", + xxs: "0.625rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", diff --git a/packages/tokens/dist/index.mjs b/packages/tokens/dist/index.mjs index 981e4db..1a57f05 100644 --- a/packages/tokens/dist/index.mjs +++ b/packages/tokens/dist/index.mjs @@ -24,8 +24,8 @@ var fonts = { // src/font-sizes.ts var fontSizes = { - xxs: "0.625rem", xs: "0.75rem", + xxs: "0.625rem", sm: "0.875rem", md: "1rem", lg: "1.125rem", diff --git a/packages/tokens/src/font-sizes.ts b/packages/tokens/src/font-sizes.ts index 4a296d7..4d08965 100644 --- a/packages/tokens/src/font-sizes.ts +++ b/packages/tokens/src/font-sizes.ts @@ -1,6 +1,6 @@ export const fontSizes = { - xxs: '0.625rem', xs: '0.75rem', + xxs: '0.625rem', sm: '0.875rem', md: '1rem', lg: '1.125rem', @@ -12,6 +12,6 @@ export const fontSizes = { '7xl': '4rem', '8xl': '4.5rem', '9xl': '6rem', -} +}; // 1rem -> 16px