From eefc23ee35400362f4b4b0cc26a14a2eb51cb9ca Mon Sep 17 00:00:00 2001 From: crssstha Date: Tue, 10 Feb 2026 16:18:46 +0545 Subject: [PATCH 1/4] feat(layout): added new layout and view --- .../src/stories/BlockView.stories.tsx | 59 ++++++++++ .../go-ui-storybook/src/stories/BlockView.tsx | 12 ++ .../src/stories/ButtonLayout.stories.ts | 93 +++++++++++++++ .../src/stories/ButtonLayout.tsx | 12 ++ .../src/stories/InlineView.stories.tsx | 36 ++++++ .../src/stories/InlineView.tsx | 12 ++ .../src/stories/ListView.stories.tsx | 106 ++++++++++++++++++ .../go-ui-storybook/src/stories/ListView.tsx | 12 ++ .../src/stories/inlineLayout.stories.tsx | 39 +++++++ .../src/stories/inlineLayout.tsx | 12 ++ 10 files changed, 393 insertions(+) create mode 100644 packages/go-ui-storybook/src/stories/BlockView.stories.tsx create mode 100644 packages/go-ui-storybook/src/stories/BlockView.tsx create mode 100644 packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts create mode 100644 packages/go-ui-storybook/src/stories/ButtonLayout.tsx create mode 100644 packages/go-ui-storybook/src/stories/InlineView.stories.tsx create mode 100644 packages/go-ui-storybook/src/stories/InlineView.tsx create mode 100644 packages/go-ui-storybook/src/stories/ListView.stories.tsx create mode 100644 packages/go-ui-storybook/src/stories/ListView.tsx create mode 100644 packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx create mode 100644 packages/go-ui-storybook/src/stories/inlineLayout.tsx diff --git a/packages/go-ui-storybook/src/stories/BlockView.stories.tsx b/packages/go-ui-storybook/src/stories/BlockView.stories.tsx new file mode 100644 index 0000000000..2e759ff386 --- /dev/null +++ b/packages/go-ui-storybook/src/stories/BlockView.stories.tsx @@ -0,0 +1,59 @@ +import { BlockViewProps } from '@ifrc-go/ui'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import BlockView from './BlockView'; + +type Story = StoryObj; + +const meta: Meta = { + title: 'Views/BlockView', + component: BlockView, + parameters: { + layout: 'centered', + }, + args: { + spacing: 'md', + withPadding: true, + before:
Header
, + after:
Footer
, + children: ( +
+
+ Content +
+
), + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], +}; + +export default meta; + +export const Default: Story = {}; + +export const WithSpacing: Story = { + args: { + spacing: 'xl', + }, +}; + +export const WithoutPadding: Story = { + args: { + withPadding: false, + }, +}; + +export const WithSeparators: Story = { + args: { + withBeforeSeparator: true, + withAfterSeparator: true, + }, +}; diff --git a/packages/go-ui-storybook/src/stories/BlockView.tsx b/packages/go-ui-storybook/src/stories/BlockView.tsx new file mode 100644 index 0000000000..5fab41e90c --- /dev/null +++ b/packages/go-ui-storybook/src/stories/BlockView.tsx @@ -0,0 +1,12 @@ +import { + BlockView as PureBlockView, + BlockViewProps, +} from '@ifrc-go/ui'; + +function BlockView(props: BlockViewProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default BlockView; diff --git a/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts new file mode 100644 index 0000000000..855c1bfafd --- /dev/null +++ b/packages/go-ui-storybook/src/stories/ButtonLayout.stories.ts @@ -0,0 +1,93 @@ +import { ButtonLayoutProps } from '@ifrc-go/ui'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import ButtonLayout from './ButtonLayout'; + +const meta: Meta = { + title: 'Layouts/ButtonLayout', + component: ButtonLayout, + parameters: { + layout: 'centered', + }, + argTypes: {}, + +}; + +export default meta; +type Story = StoryObj; + +export const PrimaryFilled: Story = { + args: { + colorVariant: 'primary', + styleVariant: 'filled', + children: 'Primary Button', + }, +}; + +export const Outline: Story = { + args: { + styleVariant: 'outline', + children: 'Outline Button', + }, +}; + +export const Action: Story = { + args: { + styleVariant: 'action', + children: 'Action Button', + }, +}; + +export const Success: Story = { + args: { + colorVariant: 'success', + styleVariant: 'filled', + children: 'Success', + }, +}; + +export const Danger: Story = { + args: { + colorVariant: 'danger', + styleVariant: 'filled', + children: 'Danger', + }, +}; + +export const Disabled: Story = { + args: { + disabled: true, + children: 'Disabled', + }, +}; + +export const FullWidth: Story = { + args: { + withFullWidth: true, + children: 'Full Width Button', + }, +}; + +export const WithoutPadding: Story = { + args: { + withoutPadding: true, + children: 'No Padding', + }, +}; + +export const SmallText: Story = { + args: { + textSize: 'sm', + children: 'Small Text', + }, +}; + +export const LargeText: Story = { + args: { + textSize: 'lg', + children: 'Large Text', + }, +}; diff --git a/packages/go-ui-storybook/src/stories/ButtonLayout.tsx b/packages/go-ui-storybook/src/stories/ButtonLayout.tsx new file mode 100644 index 0000000000..5df7a0d506 --- /dev/null +++ b/packages/go-ui-storybook/src/stories/ButtonLayout.tsx @@ -0,0 +1,12 @@ +import { + ButtonLayout as PureButtonLayout, + ButtonLayoutProps, +} from '@ifrc-go/ui'; + +function ButtonLayout(props: ButtonLayoutProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default ButtonLayout; diff --git a/packages/go-ui-storybook/src/stories/InlineView.stories.tsx b/packages/go-ui-storybook/src/stories/InlineView.stories.tsx new file mode 100644 index 0000000000..e390991c4d --- /dev/null +++ b/packages/go-ui-storybook/src/stories/InlineView.stories.tsx @@ -0,0 +1,36 @@ +import { InlineViewProps } from '@ifrc-go/ui'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import InlineView from './InlineView'; + +const meta: Meta = { + title: 'Views/InlineView', + component: InlineView, + parameters: { layout: 'centered' }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + wrapBreakpoint: 'none', + spacing: 'sm', + withPadding: true, + before:
Before Content
, + after:
After Content
, + children:
Content
, + }, +}; diff --git a/packages/go-ui-storybook/src/stories/InlineView.tsx b/packages/go-ui-storybook/src/stories/InlineView.tsx new file mode 100644 index 0000000000..41e0c2e2ae --- /dev/null +++ b/packages/go-ui-storybook/src/stories/InlineView.tsx @@ -0,0 +1,12 @@ +import { + InlineView as PureInlineView, + InlineViewProps, +} from '@ifrc-go/ui'; + +function InlineView(props: InlineViewProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default InlineView; diff --git a/packages/go-ui-storybook/src/stories/ListView.stories.tsx b/packages/go-ui-storybook/src/stories/ListView.stories.tsx new file mode 100644 index 0000000000..18823afc7d --- /dev/null +++ b/packages/go-ui-storybook/src/stories/ListView.stories.tsx @@ -0,0 +1,106 @@ +import { ListViewProps } from '@ifrc-go/ui'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import ListView from './ListView'; + +const meta: Meta = { + title: 'Views/ListView', + component: ListView, + tags: ['autodocs'], + decorators: [ + (Story) => ( +
+ +
+ ), + ], + +}; + +export default meta; + +type Story = StoryObj; + +const SampleItems = ( + <> + {Array.from({ length: 6 }, (_, i) => ( +
+ {`Item ${i + 1}`} +
+ ))} + +); + +export const InlineLayout: Story = { + args: { + layout: 'inline', + withWrap: true, + withSpaceBetweenContents: true, + withCenteredContents: false, + withPadding: true, + children: SampleItems, + }, +}; + +export const BlockLayout: Story = { + args: { + layout: 'block', + withCenteredContents: true, + withPadding: true, + children: SampleItems, + }, +}; + +export const GridLayout: Story = { + args: { + layout: 'grid', + numPreferredGridColumns: 3, + minGridColumnSize: '150px', + gridContentClassName: '', + withPadding: true, + children: SampleItems, + }, +}; + +export const GridLayoutWithSidebar: Story = { + args: { + layout: 'grid', + withSidebar: true, + sidebarPosition: 'start', + withPadding: true, + }, + render: (args: ListViewProps) => { + const children = args.sidebarPosition === 'end' ? ( + <> + + {SampleItems} + +
+ Sidebar +
+ + ) : ( + <> +
+ Sidebar +
+ + {SampleItems} + + + ); + + return ( + // eslint-disable-next-line react/jsx-props-no-spreading + + {children} + + ); + }, +}; diff --git a/packages/go-ui-storybook/src/stories/ListView.tsx b/packages/go-ui-storybook/src/stories/ListView.tsx new file mode 100644 index 0000000000..240e87a219 --- /dev/null +++ b/packages/go-ui-storybook/src/stories/ListView.tsx @@ -0,0 +1,12 @@ +import { + ListView as PureListView, + ListViewProps, +} from '@ifrc-go/ui'; + +function ListView(props: ListViewProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default ListView; diff --git a/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx b/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx new file mode 100644 index 0000000000..3d89eed198 --- /dev/null +++ b/packages/go-ui-storybook/src/stories/inlineLayout.stories.tsx @@ -0,0 +1,39 @@ +import { InlineLayoutProps } from '@ifrc-go/ui'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import InlineLayout from './inlineLayout'; + +const meta: Meta = { + title: 'Layouts/InlineLayout', + component: InlineLayout, + parameters: { + layout: 'centered', + }, + args: { + before:
Before Content
, + after:
After Content
, + children:
Content
, + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + spacing: 'sm', + withPadding: true, + }, +}; diff --git a/packages/go-ui-storybook/src/stories/inlineLayout.tsx b/packages/go-ui-storybook/src/stories/inlineLayout.tsx new file mode 100644 index 0000000000..04b15227ee --- /dev/null +++ b/packages/go-ui-storybook/src/stories/inlineLayout.tsx @@ -0,0 +1,12 @@ +import { + InlineLayout as PureInlineLayout, + InlineLayoutProps, +} from '@ifrc-go/ui'; + +function InlineLayout(props: InlineLayoutProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default InlineLayout; From fb465451e1c15141d9e5c8f710a8ed017d22107e Mon Sep 17 00:00:00 2001 From: crssstha Date: Tue, 10 Feb 2026 16:23:45 +0545 Subject: [PATCH 2/4] fix(component): revamp UI component update --- .../src/stories/Button.stories.ts | 49 ++++-- .../src/stories/ConfirmButton.stories.tsx | 11 +- .../src/stories/Container.stories.tsx | 162 ++++++------------ .../src/stories/IconButton.stories.tsx | 2 +- .../src/stories/Modal.stories.tsx | 4 +- .../src/stories/NavigationTabList.stories.tsx | 16 +- .../src/stories/Progressbar.stories.ts | 34 +++- .../src/stories/RawFileInput.stories.tsx | 10 +- .../src/stories/Tabs.stories.tsx | 27 ++- .../go-ui-storybook/src/stories/index.css | 29 +++- 10 files changed, 176 insertions(+), 168 deletions(-) diff --git a/packages/go-ui-storybook/src/stories/Button.stories.ts b/packages/go-ui-storybook/src/stories/Button.stories.ts index 6cfac7a631..1c96744908 100644 --- a/packages/go-ui-storybook/src/stories/Button.stories.ts +++ b/packages/go-ui-storybook/src/stories/Button.stories.ts @@ -7,7 +7,7 @@ import { fn } from '@storybook/test'; import Button from './Button'; const meta = { - title: 'Components/Button', + title: 'Action/Button', component: Button, parameters: { layout: 'centered', @@ -30,8 +30,10 @@ type Story = StoryObj; export const Primary: Story = { args: { name: 'button', - variant: 'primary', + styleVariant: 'filled', + colorVariant: 'primary', children: 'Primary Button', + textSize: 'md', }, parameters: { design: { @@ -45,8 +47,9 @@ export const Primary: Story = { export const Secondary: Story = { args: { name: 'button', - variant: 'secondary', children: 'Secondary Button', + colorVariant: 'primary', + styleVariant: 'outline', }, parameters: { design: { @@ -57,11 +60,13 @@ export const Secondary: Story = { }, }; -export const Tertiary: Story = { +export const Action: Story = { args: { name: 'button', - variant: 'tertiary', - children: 'Tertiary Button', + children: 'Action Button', + colorVariant: 'primary', + styleVariant: 'action', + textSize: 'md', }, parameters: { design: { @@ -72,23 +77,35 @@ export const Tertiary: Story = { }, }; -export const TertiaryOnDark: Story = { +export const Disabled: Story = { args: { name: 'button', - variant: 'tertiary-on-dark', - children: 'Tertiary on Dark Button', + children: 'Disabled Button', + colorVariant: 'primary', + styleVariant: 'filled', + textSize: 'md', + disabled: true, }, - parameters: { - backgrounds: { - default: 'dark', - }, +}; + +export const FullWidth: Story = { + args: { + name: 'button', + children: 'Full Width Button', + colorVariant: 'primary', + styleVariant: 'filled', + withFullWidth: true, + textSize: 'md', }, }; -export const DropdownItem: Story = { +export const WithoutPadding: Story = { args: { name: 'button', - variant: 'dropdown-item', - children: 'Dropdown Item', + children: 'No Padding Button', + colorVariant: 'primary', + styleVariant: 'filled', + withoutPadding: true, + textSize: 'md', }, }; diff --git a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx index bef54b6b1f..4923c746e4 100644 --- a/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx +++ b/packages/go-ui-storybook/src/stories/ConfirmButton.stories.tsx @@ -11,7 +11,7 @@ import ConfirmButton from './ConfirmButton'; type Story = StoryObj; const meta: Meta = { - title: 'Components/ConfirmButton', + title: 'Action/ConfirmButton', component: ConfirmButton, parameters: { layout: 'centered', @@ -56,19 +56,22 @@ function Template(args:Args) { export const Primary: Story = { render: Template, + args: { + styleVariant: 'filled', + }, }; export const Secondary: Story = { render: Template, args: { - variant: 'secondary', + styleVariant: 'outline', }, }; -export const Tertiary: Story = { +export const Translucent: Story = { render: Template, args: { - variant: 'tertiary', + styleVariant: 'translucent', }, }; diff --git a/packages/go-ui-storybook/src/stories/Container.stories.tsx b/packages/go-ui-storybook/src/stories/Container.stories.tsx index ccfb2a1e18..ac7aec6f04 100644 --- a/packages/go-ui-storybook/src/stories/Container.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Container.stories.tsx @@ -11,7 +11,7 @@ import type { import Container from './Container'; const meta = { - title: 'Components/Container', + title: 'Container/Container', component: Container, parameters: { layout: 'centered', @@ -30,31 +30,20 @@ export const Default: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', }, }; -export const ContentViewType: Story = { - args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'default', - }, -}; - export const EllipsizeHeading: Story = { args: { - heading: 'Container Heading', + heading: 'This extremely long container heading is intentionally written to test how the Container component behave', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', - ellipsizeHeading: true, + withEllipsizedHeading: true, }, }; @@ -62,156 +51,113 @@ export const FooterAction: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', - footerActions: [ - , - ], + footerActions: ( + + ), }, }; + export const WithFooterIcons: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', footerIcons: , }, }; -export const WithGridViewAndPadding: Story = { +export const WithHeadingLevel: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', - contentViewType: 'grid', - spacing: 'default', - numPreferredGridContentColumns: 2, + headingLevel: 1, }, }; -export const ContainerElementRef: Story = { +export const WithCenteredContent: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', + withCenteredContent: true, }, }; -export const WithHeadingLevel: Story = { +export const WithHeaderBorder: Story = { args: { heading: 'Container Heading', headerDescription: 'This is a description for the header', - footerContent: 'Footer content', + footer: 'Footer content', filters: 'Filter content', children: 'Container content', - contentViewType: 'default', - spacing: 'default', - headingLevel: 1, - numPreferredGridContentColumns: 2, + withHeaderBorder: true, }, }; -export const WithIcons: Story = { +export const WithBackground: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'default', - spacing: 'default', - icons: , + heading: 'Container with Background', + headerDescription: 'This container has a background', + children: 'Content goes here', + withBackground: true, + withPadding: true, }, }; -export const NumPreferredGridContentColumns: Story = { - args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'default', - spacing: 'default', - numPreferredGridContentColumns: 2, - }, -}; -export const WithSpacing: Story = { +export const WithShadow: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'default', - spacing: 'none', - numPreferredGridContentColumns: 2, + heading: 'Container with Shadow', + children: 'Content with shadow', + withShadow: true, + withPadding: true, }, }; -export const WithGridViewInFilter: Story = { +export const WithPadding: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'default', - spacing: 'default', - numPreferredGridContentColumns: 2, + heading: 'Container with Padding', + children: 'Content with internal padding', + withPadding: true, + withBackground: true, + }, }; -export const WithHeaderBorder: Story = { +export const PendingState: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'grid', - spacing: 'default', - numPreferredGridContentColumns: 2, - withHeaderBorder: true, + heading: 'Pending Container', + children: 'Waiting for data...', + pending: true, + pendingMessage: 'Loading data, please wait...', }, }; -export const WithInternalPadding: Story = { +export const ErrorState: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'grid', - spacing: 'default', - numPreferredGridContentColumns: 2, - withInternalPadding: true, + heading: 'Errored Container', + children: 'Data failed to load', + errored: true, + errorMessage: 'Something went wrong!', }, }; -export const WithoutWrapInHeading: Story = { +export const EmptyState: Story = { args: { - heading: 'Container Heading', - headerDescription: 'This is a description for the header', - footerContent: 'Footer content', - filters: 'Filter content', - children: 'Container content', - contentViewType: 'grid', - spacing: 'default', - numPreferredGridContentColumns: 2, - withoutWrapInHeading: true, + heading: 'Empty Container', + children: null, + empty: true, + emptyMessage: 'No content available.', }, }; diff --git a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx index 3fc891131b..589c530134 100644 --- a/packages/go-ui-storybook/src/stories/IconButton.stories.tsx +++ b/packages/go-ui-storybook/src/stories/IconButton.stories.tsx @@ -12,7 +12,7 @@ type IconButtonSpecificProps = IconButtonProps; type Story = StoryObj; const meta: Meta = { - title: 'Components/IconButton', + title: 'Action/IconButton', component: IconButton, parameters: { layout: 'centered', diff --git a/packages/go-ui-storybook/src/stories/Modal.stories.tsx b/packages/go-ui-storybook/src/stories/Modal.stories.tsx index 99e3fee06f..e7c5e95957 100644 --- a/packages/go-ui-storybook/src/stories/Modal.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Modal.stories.tsx @@ -69,6 +69,8 @@ function Template(args:Args) { // eslint-disable-next-line react/jsx-props-no-spreading {...args} onClose={handleClose} + // eslint-disable-next-line react/no-children-prop + children={undefined} /> )} @@ -113,6 +115,6 @@ export const Default: Story = { closeOnEscape: false, withoutCloseButton: false, closeOnClickOutside: true, - size: 'md', + size: 'sm', }, }; diff --git a/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx b/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx index 1cfade0309..112433b91a 100644 --- a/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx +++ b/packages/go-ui-storybook/src/stories/NavigationTabList.stories.tsx @@ -33,41 +33,45 @@ export const Default: Story = {
Services
,
Contact
, ], - variant: 'primary', + styleVariant: 'nav', + colorVariant: 'primary', + }, }; export const Primary: Story = { args: { ...Default.args, - variant: 'primary', + styleVariant: 'nav', + colorVariant: 'primary', }, }; export const Secondary: Story = { args: { ...Default.args, - variant: 'secondary', + styleVariant: 'nav', + colorVariant: 'secondary', }, }; export const Tertiary: Story = { args: { ...Default.args, - variant: 'tertiary', + styleVariant: 'pill', }, }; export const Step: Story = { args: { ...Default.args, - variant: 'step', + styleVariant: 'step', }, }; export const Vertical: Story = { args: { ...Default.args, - variant: 'vertical', + styleVariant: 'vertical', }, }; diff --git a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts index c150323002..6ea63b7169 100644 --- a/packages/go-ui-storybook/src/stories/Progressbar.stories.ts +++ b/packages/go-ui-storybook/src/stories/Progressbar.stories.ts @@ -7,7 +7,7 @@ import type { import ProgressBar from './ProgressBar'; const meta = { - title: 'Components/ProgressBar', + title: 'Visualization/ProgressBar', component: ProgressBar, parameters: { layout: 'centered', @@ -28,8 +28,9 @@ export const Default: Story = { args: { className: 'progress-bar', value: 75, - title: 'Total Projects Completed', + title: 'Total Projects Completed ', totalValue: 150, + colorVariant: 'primary', }, }; @@ -46,3 +47,32 @@ export const WithDescription: Story = { description: 'Number of projects completed successfully this year.', }, }; + +export const Success: Story = { + args: { + value: 40, + totalValue: 100, + title: 'Successful Projects', + colorVariant: 'success', + }, +}; + +export const Danger: Story = { + args: { + value: 20, + totalValue: 100, + title: 'Failed Projects', + colorVariant: 'danger', + }, +}; + +export const CustomColor: Story = { + args: { + value: 50, + totalValue: 100, + title: 'Custom Color Progress', + colorVariant: 'custom', + color: '#FF5733', + showPercentageInTitle: true, + }, +}; diff --git a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx index a2e12ef01c..0b7c6e8956 100644 --- a/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx +++ b/packages/go-ui-storybook/src/stories/RawFileInput.stories.tsx @@ -12,7 +12,7 @@ type RawFileInputSpecificProps = RawFileInputProps; type Story = StoryObj; const meta: Meta = { - title: 'Components/RawFileInput', + title: 'Inputs/RawFileInput', component: RawFileInput, parameters: { layout: 'centered', @@ -30,7 +30,6 @@ export const Default: Story = { args: { name: 'RawFileInput', children: 'Upload File', - multiple: false, onChange: fn(), }, }; @@ -39,8 +38,8 @@ export const Multiple: Story = { args: { name: 'RawFileInput', children: 'Upload Files', - variant: 'secondary', - multiple: true, + styleVariant: 'outline', + colorVariant: 'primary', onChange: fn(), }, }; @@ -50,7 +49,6 @@ export const WithAccept: Story = { name: 'RawFileInput', accept: 'image/png,image/jpeg', children: 'Upload Image', - multiple: false, onChange: fn(), }, }; @@ -59,7 +57,6 @@ export const Disabled: Story = { args: { name: 'RawFileInput', children: 'Export', - multiple: false, onChange: fn(), disabled: true, }, @@ -70,7 +67,6 @@ export const ReadOnly: Story = { name: 'RawFileInput', children: 'Export', readOnly: true, - multiple: false, onChange: fn(), }, }; diff --git a/packages/go-ui-storybook/src/stories/Tabs.stories.tsx b/packages/go-ui-storybook/src/stories/Tabs.stories.tsx index 3bbaa2f324..e5fa882248 100644 --- a/packages/go-ui-storybook/src/stories/Tabs.stories.tsx +++ b/packages/go-ui-storybook/src/stories/Tabs.stories.tsx @@ -80,47 +80,40 @@ function Template(args:Args) { export const Default: Story = { render: Template, -}; - -export const Primary: Story = { - render: Template, - args: { - variant: 'primary', - }, -}; - -export const Secondary: Story = { - render: Template, args: { - variant: 'secondary', + styleVariant: 'tab', }, }; -export const Tertiary: Story = { +export const Pill: Story = { render: Template, args: { - variant: 'tertiary', + styleVariant: 'pill', + colorVariant: 'primary', }, }; export const Step: Story = { render: Template, args: { - variant: 'step', + styleVariant: 'step', + colorVariant: 'primary', }, }; export const Vertical: Story = { render: Template, args: { - variant: 'vertical', + styleVariant: 'vertical', + colorVariant: 'primary', }, }; export const VerticalCompact: Story = { render: Template, args: { - variant: 'vertical-compact', + styleVariant: 'vertical-compact', + colorVariant: 'primary', }, }; diff --git a/packages/go-ui-storybook/src/stories/index.css b/packages/go-ui-storybook/src/stories/index.css index 6a876bbf65..25c3ea3c2f 100644 --- a/packages/go-ui-storybook/src/stories/index.css +++ b/packages/go-ui-storybook/src/stories/index.css @@ -45,7 +45,7 @@ margin-left: var(--go-ui-spacing-md); } -.title > p { +.title>p { font-size: var(--go-ui-font-size-4xl); padding-bottom: var(--go-ui-spacing-2xl); color: var(--go-ui-color-primary-red); @@ -58,13 +58,13 @@ padding-bottom: var(--go-ui-spacing-2xl); } -.overview > p { +.overview>p { padding-top: var(--go-ui-spacing-md); padding-bottom: var(--go-ui-spacing-md); font-size: var(--go-ui-font-size-3xl); } -.text-body > p { +.text-body>p { font-size: var(--go-ui-font-size-lg); } @@ -72,8 +72,8 @@ width: 30rem; } -.progress-bar{ - width:20rem; +.progress-bar { + width: 20rem; } .header-children { @@ -139,7 +139,7 @@ flex-direction: column; width: 40rem; height: 30rem; - align-items: center; + align-items: center; } .page-container-header { @@ -170,3 +170,20 @@ padding-top: var(--go-ui-spacing-md); padding-bottom: var(--go-ui-spacing-md); } + + +.layout-content { + background-color: var(--go-ui-color-gray-30); + padding: var(--go-ui-spacing-md); + margin-bottom: 1px; +} + +.list-view-sidebar { + background-color: var(--go-ui-color-gray-40); + padding: var(--go-ui-spacing-md); +} + +.dash-border { + border: var(--go-ui-spacing-5xs) dashed var(--go-ui-color-gray-40); + background-color: var(--go-ui-color-gray-10); +} \ No newline at end of file From d9b7a783c6e6023a9f002f8d806b3bd4bd55d714 Mon Sep 17 00:00:00 2001 From: crssstha Date: Tue, 10 Feb 2026 16:25:25 +0545 Subject: [PATCH 3/4] fix(grouping): separete components into common groups --- .../src/stories/BarChart.stories.tsx | 2 +- .../src/stories/BooleanInput.stories.tsx | 2 +- .../src/stories/BooleanOutput.stories.tsx | 2 +- .../src/stories/CheckBox.stories.tsx | 2 +- .../src/stories/Checklist.stories.tsx | 2 +- .../src/stories/DateInput.stories.tsx | 2 +- .../src/stories/DateRangeOutput.stories.tsx | 2 +- .../src/stories/HtmlOutput.stories.tsx | 2 +- .../src/stories/Image.stories.tsx | 2 +- .../src/stories/InputContainer.stories.tsx | 16 +++++++++------- ...ure.stories.tsx => KeyFigureView.stories.tsx} | 13 ++++++------- .../stories/{KeyFigure.tsx => KeyFigureView.tsx} | 6 +++--- .../src/stories/MultiSelectInput.stories.tsx | 2 +- .../src/stories/NumberInput.stories.tsx | 2 +- .../src/stories/NumberOutput.stories.tsx | 2 +- .../src/stories/PageContainer.stories.tsx | 2 +- .../src/stories/Pager.stories.tsx | 2 +- .../src/stories/PasswordInput.stories.tsx | 2 +- .../src/stories/PieChart.stories.tsx | 2 +- .../src/stories/RadioInput.stories.tsx | 4 ++-- .../src/stories/RawList.stories.tsx | 2 +- .../stories/SearchMultiSelectInput.stories.tsx | 2 +- .../src/stories/SearchSelectInput.stories.tsx | 2 +- .../src/stories/SegmentInput.stories.tsx | 4 ++-- .../src/stories/SelectInput.stories.tsx | 2 +- .../src/stories/StackedProgressBar.stories.tsx | 2 +- .../src/stories/Switch.stories.tsx | 2 +- .../src/stories/TextArea.stories.tsx | 2 +- .../src/stories/TextInput.stories.tsx | 2 +- .../src/stories/TimeSeriesChart.stories.tsx | 2 +- 30 files changed, 47 insertions(+), 46 deletions(-) rename packages/go-ui-storybook/src/stories/{KeyFigure.stories.tsx => KeyFigureView.stories.tsx} (79%) rename packages/go-ui-storybook/src/stories/{KeyFigure.tsx => KeyFigureView.tsx} (61%) diff --git a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx index e02522294f..ad5fef3406 100644 --- a/packages/go-ui-storybook/src/stories/BarChart.stories.tsx +++ b/packages/go-ui-storybook/src/stories/BarChart.stories.tsx @@ -27,7 +27,7 @@ const maxValue = Math.max(...data.map(valueSelector)); type BarChartSpecificProps = BarChartProps