From 3ead09c10f3b343593295ba9469c577dc8b5c3e6 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 13:37:45 +0600 Subject: [PATCH 01/13] Add line height and letter spacing to the config --- src/theme/default-config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/theme/default-config.js b/src/theme/default-config.js index 77003f82..4092f6d4 100644 --- a/src/theme/default-config.js +++ b/src/theme/default-config.js @@ -204,6 +204,14 @@ const defaultTheme = { fontSize: { tiny: '0.625rem', }, + lineHeight: { + 11: '2.75rem', // 44px + 9.5: '2.375rem', // 38px + 7.5: '1.875rem', // 30px + }, + letterSpacing: { + 2: '0.125em', // 2px + }, size: { 3.25: '0.8125rem', // 13px }, From eeca8384bf9391a3872899bbe76ae1956be7f410 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 13:38:14 +0600 Subject: [PATCH 02/13] wip: Create Text component --- src/components/index.ts | 1 + src/components/text/index.ts | 1 + src/components/text/styles.ts | 64 ++++++++++++++++++++++++++ src/components/text/text.stories.tsx | 17 +++++++ src/components/text/text.tsx | 67 ++++++++++++++++++++++++++++ 5 files changed, 150 insertions(+) create mode 100644 src/components/text/index.ts create mode 100644 src/components/text/styles.ts create mode 100644 src/components/text/text.stories.tsx create mode 100644 src/components/text/text.tsx diff --git a/src/components/index.ts b/src/components/index.ts index 43ff2878..9a302428 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -41,3 +41,4 @@ export { default as AreaChart } from './area-chart'; export { default as Dropzone } from './dropzone'; export { default as Table } from './table'; export { default as FilePreview } from './file-preview'; +export { default as Text } from './text'; diff --git a/src/components/text/index.ts b/src/components/text/index.ts new file mode 100644 index 00000000..2178acad --- /dev/null +++ b/src/components/text/index.ts @@ -0,0 +1 @@ +export { default } from './text'; diff --git a/src/components/text/styles.ts b/src/components/text/styles.ts new file mode 100644 index 00000000..b59a9a3d --- /dev/null +++ b/src/components/text/styles.ts @@ -0,0 +1,64 @@ + +/** + * The class names for the font weight. + */ +export const fontWeightClassNames = { + 400: 'font-normal', + 500: 'font-medium', + 600: 'font-semibold', + 700: 'font-bold', +}; + +/** + * The class names for the font size. + */ +export const fontSizeClassNames = { + 36: 'text-4xl', + 30: 'text-3xl', + 24: 'text-2xl', + 20: 'text-xl', + 18: 'text-lg', + 16: 'text-base', + 14: 'text-sm', + 12: 'text-xs', +}; + +/** + * Line height class names. + */ +export const lineHeightClassNames = { + 44: 'leading-11', + 38: 'leading-9.5', + 32: 'leading-8', + 30: 'leading-7.5', + 28: 'leading-7', + 24: 'leading-6', + 20: 'leading-5', + 16: 'leading-4', +}; + +/** + * Letter spacing class names. + */ +export const letterSpacingClassNames = { + 2: 'tracking-2', // 2px +}; + +/** + * Font color class names. + */ +export const fontColorClassNames = { + brand600: 'text-brand-primary-600', + link: 'text-link-primary', + primary: 'text-text-primary', + secondary: 'text-text-secondary', + tertiary: 'text-text-tertiary', + disabled: 'text-text-disabled', + help: 'text-field-helper', + label: 'text-field-label', + info: 'text-support-info', + success: 'text-support-success', + warning: 'text-support-warning', + error: 'text-support-error', + inverse: 'text-text-on-color', +}; diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx new file mode 100644 index 00000000..59fee1bc --- /dev/null +++ b/src/components/text/text.stories.tsx @@ -0,0 +1,17 @@ +import { Meta, StoryFn } from '@storybook/react'; +import Text from './text'; + +export default { + title: 'Atoms/Text', + component: Text, + tags: [ 'autodocs' ], +} satisfies Meta; + +type Story = StoryFn; + +const Template: Story = ( args ) => ; + +export const Default: Story = Template.bind( {} ); +Default.args = { + children: 'The quick brown fox jumps over the lazy dog', +}; diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx new file mode 100644 index 00000000..c759621d --- /dev/null +++ b/src/components/text/text.tsx @@ -0,0 +1,67 @@ +import { cn } from '@/utilities/functions'; +import { fontColorClassNames, fontSizeClassNames, fontWeightClassNames, letterSpacingClassNames, lineHeightClassNames } from './styles'; +import { forwardRef } from 'react'; + +export interface TextProps { + /** + * The content of the text. + */ + children: React.ReactNode; + /** + * The element to render the text as. + * + * @default 'div' + */ + as?: React.ElementType; + /** + * The font weight of the text. + * + * @default 'undefined' + */ + fontWeight?: keyof typeof fontWeightClassNames; + /** + * The font size of the text. + * + * @default 'undefined' + */ + fontSize?: keyof typeof fontSizeClassNames; + /** + * The line height of the text. + * + * @default 'undefined' + */ + lineHeight?: keyof typeof lineHeightClassNames; + /** + * The letter spacing of the text. + * + * @default 'undefined' + */ + letterSpacing?: keyof typeof letterSpacingClassNames; + /** + * The font color of the text. + * + * @default 'undefined' + */ + fontColor?: keyof typeof fontColorClassNames; +} + +export const Text = forwardRef( ( { children, fontWeight, fontSize, lineHeight, letterSpacing, fontColor, as: Component = 'div', ...props }: TextProps & T, ref: React.Ref ) => { + return ( + + { children } + + ); +} ); + +// Extend component default props type +export default Text as ( props: TextProps & T, ref: React.Ref ) => React.ReactNode; From bd2115f76b4c8d756e559ab7c7cfeb1980f5ed0d Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 21:11:51 +0600 Subject: [PATCH 03/13] Create Text component --- src/components/text/text.stories.tsx | 2 +- src/components/text/text.tsx | 103 ++++++++++++++++++--------- 2 files changed, 71 insertions(+), 34 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index 59fee1bc..91edfa5c 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -9,7 +9,7 @@ export default { type Story = StoryFn; -const Template: Story = ( args ) => ; +const Template: Story = ( args ) => ; export const Default: Story = Template.bind( {} ); Default.args = { diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index c759621d..da207ada 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -1,67 +1,104 @@ import { cn } from '@/utilities/functions'; -import { fontColorClassNames, fontSizeClassNames, fontWeightClassNames, letterSpacingClassNames, lineHeightClassNames } from './styles'; -import { forwardRef } from 'react'; +import { + fontColorClassNames, + fontSizeClassNames, + fontWeightClassNames, + letterSpacingClassNames, + lineHeightClassNames, +} from './styles'; +import { + forwardRef, + type ElementType, + type ComponentPropsWithRef, + type ReactNode, +} from 'react'; -export interface TextProps { +// Base props for the Text component +interface BaseTextProps { /** * The content of the text. */ - children: React.ReactNode; - /** - * The element to render the text as. - * - * @default 'div' - */ - as?: React.ElementType; + children: ReactNode; /** * The font weight of the text. - * - * @default 'undefined' */ - fontWeight?: keyof typeof fontWeightClassNames; + weight?: keyof typeof fontWeightClassNames; /** * The font size of the text. - * - * @default 'undefined' */ - fontSize?: keyof typeof fontSizeClassNames; + size?: keyof typeof fontSizeClassNames; /** * The line height of the text. - * - * @default 'undefined' */ lineHeight?: keyof typeof lineHeightClassNames; /** * The letter spacing of the text. - * - * @default 'undefined' */ letterSpacing?: keyof typeof letterSpacingClassNames; /** * The font color of the text. - * - * @default 'undefined' */ - fontColor?: keyof typeof fontColorClassNames; + color?: keyof typeof fontColorClassNames; + /** + * Additional class names to apply + */ + className?: string; } -export const Text = forwardRef( ( { children, fontWeight, fontSize, lineHeight, letterSpacing, fontColor, as: Component = 'div', ...props }: TextProps & T, ref: React.Ref ) => { +// Component props with the "as" prop +export type TextProps = BaseTextProps & { + /** + * The element to render the text as. + * + * @default 'p' + */ + as?: E; +} & Omit, keyof BaseTextProps | 'as'>; + +const TextWithoutRef = < + E extends ElementType, +>( + { + children, + weight, + size, + lineHeight, + letterSpacing, + color, + as, + className, + ...rest + }: TextProps, + ref: React.Ref + ) => { + const Component = as || 'p'; + return ( { children } ); -} ); +}; + +// We use forwardRef and cast to our TextComponent type +const Text = forwardRef( + TextWithoutRef +) as ( + props: TextProps, + ref: React.Ref +) => ReturnType; + +export { Text }; -// Extend component default props type -export default Text as ( props: TextProps & T, ref: React.Ref ) => React.ReactNode; +export default Text; From f1c13cc04324337e722b505c8505a566bd6f6e97 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 22:18:19 +0600 Subject: [PATCH 04/13] fix: Component type and Story --- src/components/text/text.stories.tsx | 92 +++++++++++++++++++++++- src/components/text/text.tsx | 102 +++++++++++++++++---------- 2 files changed, 156 insertions(+), 38 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index 91edfa5c..ad9b074e 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -1,17 +1,105 @@ import { Meta, StoryFn } from '@storybook/react'; import Text from './text'; +import { type ElementType } from 'react'; +import { + fontWeightClassNames, + fontSizeClassNames, + lineHeightClassNames, + letterSpacingClassNames, + fontColorClassNames, +} from './styles'; + +// Define a simplified interface for Storybook docs +interface TextStoryProps { + children: React.ReactNode; + weight?: keyof typeof fontWeightClassNames; + size?: keyof typeof fontSizeClassNames; + lineHeight?: keyof typeof lineHeightClassNames; + letterSpacing?: keyof typeof letterSpacingClassNames; + color?: keyof typeof fontColorClassNames; + className?: string; + as?: ElementType; +} export default { title: 'Atoms/Text', component: Text, tags: [ 'autodocs' ], -} satisfies Meta; + argTypes: { + weight: { + control: 'select', + options: Object.keys( fontWeightClassNames ).map( Number ), + description: 'The font weight of the text', + }, + size: { + control: 'select', + options: Object.keys( fontSizeClassNames ).map( Number ), + description: 'The font size of the text', + }, + lineHeight: { + control: 'select', + options: Object.keys( lineHeightClassNames ).map( Number ), + description: 'The line height of the text', + }, + letterSpacing: { + control: 'select', + options: Object.keys( letterSpacingClassNames ).map( Number ), + description: 'The letter spacing of the text', + }, + color: { + control: 'select', + options: Object.keys( fontColorClassNames ), + description: 'The font color of the text', + }, + as: { + control: 'select', + options: [ 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div' ], + description: 'The element to render the text as', + }, + children: { + control: 'text', + description: 'The content of the text', + }, + className: { + control: 'text', + description: 'Additional class names to apply', + }, + }, +} satisfies Meta; -type Story = StoryFn; +// Create our story type +type Story = StoryFn; +// Main template for all stories const Template: Story = ( args ) => ; +// Default story export const Default: Story = Template.bind( {} ); Default.args = { children: 'The quick brown fox jumps over the lazy dog', + as: 'p', + size: 16, + weight: 400, + color: 'label', +}; + +// Heading example +export const Heading: Story = Template.bind( {} ); +Heading.args = { + children: 'This is a heading', + as: 'h1', + size: 36, + weight: 700, + color: 'primary', +}; + +// Paragraph example +export const Paragraph: Story = Template.bind( {} ); +Paragraph.args = { + children: 'This is a paragraph with some longer text to demonstrate how the component handles multi-line content. The Text component is designed to be flexible and work with various HTML elements.', + as: 'p', + size: 16, + weight: 400, + lineHeight: 24, + color: 'help', }; diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index da207ada..ed1b31b0 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -9,12 +9,51 @@ import { import { forwardRef, type ElementType, - type ComponentPropsWithRef, type ReactNode, + type ComponentType, + type PropsWithoutRef, } from 'react'; +// Polymorphic component type utilities +export type PropsOf< + C extends keyof JSX.IntrinsicElements | ComponentType +> = JSX.LibraryManagedAttributes>; + +type AsProp = { + /** + * The element to render the text as. + * + * @default 'p' + */ + as?: C; +}; + +export type ExtendableProps< + ExtendedProps = object, + OverrideProps = object +> = OverrideProps & Omit; + +export type InheritableElementProps< + C extends ElementType, + Props = object +> = ExtendableProps, Props>; + +export type PolymorphicComponentProps< + C extends ElementType, + Props = object +> = InheritableElementProps>; + +export type PolymorphicRef< + C extends ElementType +> = React.ComponentPropsWithRef['ref']; + +export type PolymorphicComponentPropsWithRef< + C extends ElementType, + Props = object +> = PolymorphicComponentProps & { ref?: PolymorphicRef }; + // Base props for the Text component -interface BaseTextProps { +export interface TextBaseProps { /** * The content of the text. */ @@ -45,32 +84,31 @@ interface BaseTextProps { className?: string; } -// Component props with the "as" prop -export type TextProps = BaseTextProps & { - /** - * The element to render the text as. - * - * @default 'p' - */ - as?: E; -} & Omit, keyof BaseTextProps | 'as'>; +export type TextProps = PolymorphicComponentPropsWithRef< + C, + TextBaseProps +>; + +// Type definition for Text component with proper forwarded ref +export type TextComponent = ( + props: TextProps +) => JSX.Element; -const TextWithoutRef = < - E extends ElementType, ->( - { - children, - weight, - size, - lineHeight, - letterSpacing, - color, - as, - className, - ...rest - }: TextProps, - ref: React.Ref - ) => { +// Create component with properly typed forwardRef +const Text = forwardRef( function Text( + { + as, + children, + weight, + size, + lineHeight, + letterSpacing, + color, + className, + ...rest + }: PropsWithoutRef>, + ref: PolymorphicRef +) { const Component = as || 'p'; return ( @@ -89,15 +127,7 @@ const TextWithoutRef = < { children } ); -}; - -// We use forwardRef and cast to our TextComponent type -const Text = forwardRef( - TextWithoutRef -) as ( - props: TextProps, - ref: React.Ref -) => ReturnType; +} ) as TextComponent; export { Text }; From d1ca670a8cf73441a6da2854c17dbb2f27fa6aac Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 22:40:30 +0600 Subject: [PATCH 05/13] Removed unused codes --- src/components/text/text.stories.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index ad9b074e..cc9e7aa1 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -1,6 +1,5 @@ import { Meta, StoryFn } from '@storybook/react'; import Text from './text'; -import { type ElementType } from 'react'; import { fontWeightClassNames, fontSizeClassNames, @@ -9,18 +8,6 @@ import { fontColorClassNames, } from './styles'; -// Define a simplified interface for Storybook docs -interface TextStoryProps { - children: React.ReactNode; - weight?: keyof typeof fontWeightClassNames; - size?: keyof typeof fontSizeClassNames; - lineHeight?: keyof typeof lineHeightClassNames; - letterSpacing?: keyof typeof letterSpacingClassNames; - color?: keyof typeof fontColorClassNames; - className?: string; - as?: ElementType; -} - export default { title: 'Atoms/Text', component: Text, @@ -65,10 +52,10 @@ export default { description: 'Additional class names to apply', }, }, -} satisfies Meta; +} satisfies Meta; // Create our story type -type Story = StoryFn; +type Story = StoryFn; // Main template for all stories const Template: Story = ( args ) => ; From 1b6f40263ecc3fd21cbad7723e91cc8d036b9c86 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 22:45:01 +0600 Subject: [PATCH 06/13] Update the default story --- src/components/text/text.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index cc9e7aa1..f62189bc 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -65,9 +65,6 @@ export const Default: Story = Template.bind( {} ); Default.args = { children: 'The quick brown fox jumps over the lazy dog', as: 'p', - size: 16, - weight: 400, - color: 'label', }; // Heading example From 9ce08f3e1bdcab4ce86f270f58645f0a82140547 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 22:53:18 +0600 Subject: [PATCH 07/13] Update default value --- src/components/text/text.stories.tsx | 3 +++ src/components/text/text.tsx | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index f62189bc..54866d66 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -65,6 +65,9 @@ export const Default: Story = Template.bind( {} ); Default.args = { children: 'The quick brown fox jumps over the lazy dog', as: 'p', + color: 'primary', + weight: 400, + size: 16, }; // Heading example diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index ed1b31b0..064a0922 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -99,11 +99,11 @@ const Text = forwardRef( function Text( { as, children, - weight, - size, + weight = 400, + size = 16, lineHeight, letterSpacing, - color, + color = 'primary', className, ...rest }: PropsWithoutRef>, From 63ebc13f0843253297792e25a2a7ad00f19c6ea0 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 23:00:27 +0600 Subject: [PATCH 08/13] Reset margin and padding and remove default value --- src/components/text/text.stories.tsx | 2 -- src/components/text/text.tsx | 5 +++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index 54866d66..5bddc1a3 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -66,8 +66,6 @@ Default.args = { children: 'The quick brown fox jumps over the lazy dog', as: 'p', color: 'primary', - weight: 400, - size: 16, }; // Heading example diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index 064a0922..66360960 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -99,8 +99,8 @@ const Text = forwardRef( function Text( { as, children, - weight = 400, - size = 16, + weight, + size, lineHeight, letterSpacing, color = 'primary', @@ -115,6 +115,7 @@ const Text = forwardRef( function Text( Date: Thu, 27 Mar 2025 23:00:32 +0600 Subject: [PATCH 09/13] Update changelog.txt --- changelog.txt | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/changelog.txt b/changelog.txt index f935851c..6d68ed2d 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,3 +1,7 @@ +Version 1.6.0 - xth x, 2025 +- New - Introduced a versatile Text component that supports multiple HTML elements and customizable styles for enhanced typography flexibility. + + Version 1.5.1 - xth x, 2025 - Improvement - Introduced the `areaChartWrapper` prop in the AreaChart component to allow for better customization options. - Improvement - Removed the group selector from the Tabs component to simplify style overrides. From 022e191d163354fb55d105c2c683c719670d6e25 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 23:01:33 +0600 Subject: [PATCH 10/13] chore: Lint --- src/components/text/styles.ts | 1 - src/components/text/text.stories.tsx | 3 ++- src/components/text/text.tsx | 21 +++++++++------------ 3 files changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/text/styles.ts b/src/components/text/styles.ts index b59a9a3d..3a4e0b37 100644 --- a/src/components/text/styles.ts +++ b/src/components/text/styles.ts @@ -1,4 +1,3 @@ - /** * The class names for the font weight. */ diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index 5bddc1a3..87c02262 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -81,7 +81,8 @@ Heading.args = { // Paragraph example export const Paragraph: Story = Template.bind( {} ); Paragraph.args = { - children: 'This is a paragraph with some longer text to demonstrate how the component handles multi-line content. The Text component is designed to be flexible and work with various HTML elements.', + children: + 'This is a paragraph with some longer text to demonstrate how the component handles multi-line content. The Text component is designed to be flexible and work with various HTML elements.', as: 'p', size: 16, weight: 400, diff --git a/src/components/text/text.tsx b/src/components/text/text.tsx index 66360960..b1190f86 100644 --- a/src/components/text/text.tsx +++ b/src/components/text/text.tsx @@ -16,7 +16,7 @@ import { // Polymorphic component type utilities export type PropsOf< - C extends keyof JSX.IntrinsicElements | ComponentType + C extends keyof JSX.IntrinsicElements | ComponentType, > = JSX.LibraryManagedAttributes>; type AsProp = { @@ -30,26 +30,25 @@ type AsProp = { export type ExtendableProps< ExtendedProps = object, - OverrideProps = object + OverrideProps = object, > = OverrideProps & Omit; export type InheritableElementProps< C extends ElementType, - Props = object + Props = object, > = ExtendableProps, Props>; export type PolymorphicComponentProps< C extends ElementType, - Props = object + Props = object, > = InheritableElementProps>; -export type PolymorphicRef< - C extends ElementType -> = React.ComponentPropsWithRef['ref']; +export type PolymorphicRef = + React.ComponentPropsWithRef['ref']; export type PolymorphicComponentPropsWithRef< C extends ElementType, - Props = object + Props = object, > = PolymorphicComponentProps & { ref?: PolymorphicRef }; // Base props for the Text component @@ -84,10 +83,8 @@ export interface TextBaseProps { className?: string; } -export type TextProps = PolymorphicComponentPropsWithRef< - C, - TextBaseProps ->; +export type TextProps = + PolymorphicComponentPropsWithRef; // Type definition for Text component with proper forwarded ref export type TextComponent = ( From 597d79ad5062236dfe39c93486f3ae267e1be084 Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Thu, 27 Mar 2025 23:02:35 +0600 Subject: [PATCH 11/13] Update text.stories.tsx --- src/components/text/text.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index 87c02262..abe2a60b 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -74,7 +74,7 @@ Heading.args = { children: 'This is a heading', as: 'h1', size: 36, - weight: 700, + weight: 600, color: 'primary', }; From 177c883fb37b231b00d23632860175b996857bcd Mon Sep 17 00:00:00 2001 From: jaieds <87969327+jaieds@users.noreply.github.com> Date: Fri, 28 Mar 2025 15:52:54 +0600 Subject: [PATCH 12/13] Included label in the story option --- src/components/text/text.stories.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index abe2a60b..cac7510b 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -40,7 +40,18 @@ export default { }, as: { control: 'select', - options: [ 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div' ], + options: [ + 'p', + 'label', + 'span', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'div', + ], description: 'The element to render the text as', }, children: { From 431d5d3d1e883a5b1c2d46f3b423d3008f975755 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Fri, 28 Mar 2025 15:22:56 +0530 Subject: [PATCH 13/13] Update src/components/text/text.stories.tsx --- src/components/text/text.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/text/text.stories.tsx b/src/components/text/text.stories.tsx index abe2a60b..0478df81 100644 --- a/src/components/text/text.stories.tsx +++ b/src/components/text/text.stories.tsx @@ -41,7 +41,7 @@ export default { as: { control: 'select', options: [ 'p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div' ], - description: 'The element to render the text as', + description: 'The element to render the text as. Any HTML element can be added here.', }, children: { control: 'text',