From 73204bd5e4baae6df8c53f98a0f4fa7f5460a495 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Wed, 25 Feb 2026 10:04:26 +0200 Subject: [PATCH 1/2] chore: move grid stories under Layout folder #526 --- .../docs/scale-layout/development.mdx | 12 -- .../components/layout/grid/col.stories.tsx | 59 +++++++++ .../components/layout/grid/grid.stories.tsx | 120 ------------------ .../components/layout/grid/row.stories.tsx | 59 +++++++++ .../docs/scale-layout/breaking-points.tsx | 4 +- .../docs/scale-layout/grid.mdx | 2 +- .../docs/scale-layout/grid.tsx | 8 +- .../docs/scale-layout/spacing.mdx | 2 +- .../docs/scale-layout/spacing.tsx | 10 +- 9 files changed, 131 insertions(+), 145 deletions(-) delete mode 100644 src/community/docs/scale-layout/development.mdx create mode 100644 src/tedi/components/layout/grid/col.stories.tsx delete mode 100644 src/tedi/components/layout/grid/grid.stories.tsx create mode 100644 src/tedi/components/layout/grid/row.stories.tsx rename src/{community => tedi}/docs/scale-layout/breaking-points.tsx (96%) rename src/{community => tedi}/docs/scale-layout/grid.mdx (59%) rename src/{community => tedi}/docs/scale-layout/grid.tsx (92%) rename src/{community => tedi}/docs/scale-layout/spacing.mdx (60%) rename src/{community => tedi}/docs/scale-layout/spacing.tsx (88%) diff --git a/src/community/docs/scale-layout/development.mdx b/src/community/docs/scale-layout/development.mdx deleted file mode 100644 index a413dfb5c..000000000 --- a/src/community/docs/scale-layout/development.mdx +++ /dev/null @@ -1,12 +0,0 @@ -import { Meta, Title, Subtitle, Unstyled } from '@storybook/blocks'; - - - -# Grid in development - -Every layout in design is makeable with `` and `` components.
-All examples of Grid usage are under [Grid docs](/docs/components-grid--docs) - -To create vertical spacing between elements use `` [component](/docs/components-vertical-spacing--docs). - -{/* TODO: Need more information how to use Row, Col, VerticalSpacing and Card correctly */} diff --git a/src/tedi/components/layout/grid/col.stories.tsx b/src/tedi/components/layout/grid/col.stories.tsx new file mode 100644 index 000000000..2390b5834 --- /dev/null +++ b/src/tedi/components/layout/grid/col.stories.tsx @@ -0,0 +1,59 @@ +import { Meta, StoryFn, StoryObj } from '@storybook/react'; + +import { Heading } from '../../base/typography/heading/heading'; +import { VerticalSpacing } from '../vertical-spacing'; +import { Col } from './col'; +import { Row } from './row'; + +/** + * Zeroheight ↗
+ * Boostrap docs ↗
+ * Row and Col components are inspired by Bootstrap V5 Grid System.
You can use different Bootstrap grid classes + * through component props. + */ + +const meta: Meta = { + title: 'Tedi-Ready/Layout/Grid/Col', + component: Col, + subcomponents: { Row } as never, + parameters: { + status: { type: 'devComponent' }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: StoryFn = () => ( + + + Label/Value pairs + + +
+ + + Label + + Value + + + + Label + + Value + +
+ + + + + + Lists + + Item 1 + Item 2 + + + +); diff --git a/src/tedi/components/layout/grid/grid.stories.tsx b/src/tedi/components/layout/grid/grid.stories.tsx deleted file mode 100644 index 78ec8ed9d..000000000 --- a/src/tedi/components/layout/grid/grid.stories.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { Meta, StoryFn, StoryObj } from '@storybook/react'; - -import { Heading } from '../../base/typography/heading/heading'; -import { VerticalSpacing } from '../vertical-spacing'; -import { Col } from './col'; -import { Row, RowProps } from './row'; - -/** - * Zeroheight ↗
- * Boostrap docs ↗
- * Row and Col components are inspired by Bootstrap V5 Grid System.
You can use different Bootstrap grid classes - * through component props. - */ -const meta: Meta = { - title: 'Tedi-Ready/Components/Helpers/Grid', - component: Row, - subcomponents: { Col: Col } as never, - parameters: { - status: { - type: 'devComponent', - }, - }, -}; - -export default meta; -type Story = StoryObj; - -const Template: StoryFn = (args) => ( -
- - Col-1 - Col-2 - Col-3 - - - - Col-1 - - - Col-2 - - - Col-3 - - - - - Col-1 - - - Col-2 - - - Col-3 - - - - Col-1 - Col-2 - Col-3 - -
-); - -export const Default: Story = { - render: Template, -}; - -export const CustomTags: StoryFn = () => ( - - - Label/Value pairs - - - {/* Grouped rows */} -
- - - Label - - Value - - - - Label - - Value - -
- - - {/* Non grouped rows */} - - - - Label - - - Value - - - Label - - - Value - - - - - - - - Lists - - Item 1 - Item 2 - - - -); diff --git a/src/tedi/components/layout/grid/row.stories.tsx b/src/tedi/components/layout/grid/row.stories.tsx new file mode 100644 index 000000000..c5345a6d6 --- /dev/null +++ b/src/tedi/components/layout/grid/row.stories.tsx @@ -0,0 +1,59 @@ +import { Meta, StoryFn, StoryObj } from '@storybook/react'; + +import { Col } from './col'; +import { Row, RowProps } from './row'; + +/** + * Zeroheight ↗
+ * Boostrap docs ↗
+ * Row and Col components are inspired by Bootstrap V5 Grid System.
You can use different Bootstrap grid classes + * through component props. + */ + +const meta: Meta = { + title: 'Tedi-Ready/Layout/Grid/Row', + component: Row, + subcomponents: { Col } as never, + parameters: { + status: { type: 'devComponent' }, + }, +}; + +export default meta; +type Story = StoryObj; + +const Template: StoryFn = (args) => ( +
+ + Col-1 + Col-2 + Col-3 + + + + + Col-1 + + + Col-2 + + + Col-3 + + + + + + Col-1 + + + Col-2 + + + Col-3 + + +
+); + +export const Default: Story = { render: Template }; diff --git a/src/community/docs/scale-layout/breaking-points.tsx b/src/tedi/docs/scale-layout/breaking-points.tsx similarity index 96% rename from src/community/docs/scale-layout/breaking-points.tsx rename to src/tedi/docs/scale-layout/breaking-points.tsx index 174567782..ccb5c4244 100644 --- a/src/community/docs/scale-layout/breaking-points.tsx +++ b/src/tedi/docs/scale-layout/breaking-points.tsx @@ -1,7 +1,7 @@ import { ColumnDef, createColumnHelper } from '@tanstack/react-table'; -import { Text } from '../../../tedi/components/base/typography/text/text'; -import { Breakpoint, CustomizeTableCell, getBackgroundColorClass, Table } from '../../index'; +import { Breakpoint, CustomizeTableCell, getBackgroundColorClass, Table } from '../../../community/index'; +import { Text } from '../../components/base/typography/text/text'; interface BreakpointRow { type: 'mobile' | 'tablet' | 'desktop'; diff --git a/src/community/docs/scale-layout/grid.mdx b/src/tedi/docs/scale-layout/grid.mdx similarity index 59% rename from src/community/docs/scale-layout/grid.mdx rename to src/tedi/docs/scale-layout/grid.mdx index 907fc622f..6d4bb22fd 100644 --- a/src/community/docs/scale-layout/grid.mdx +++ b/src/tedi/docs/scale-layout/grid.mdx @@ -1,7 +1,7 @@ import { Meta, Title, Subtitle, Unstyled } from '@storybook/blocks'; import Grid from './grid.tsx'; - + diff --git a/src/community/docs/scale-layout/grid.tsx b/src/tedi/docs/scale-layout/grid.tsx similarity index 92% rename from src/community/docs/scale-layout/grid.tsx rename to src/tedi/docs/scale-layout/grid.tsx index e89db1d09..04998c322 100644 --- a/src/community/docs/scale-layout/grid.tsx +++ b/src/tedi/docs/scale-layout/grid.tsx @@ -1,9 +1,9 @@ import { Title } from '@storybook/blocks'; -import { Heading } from '../../../tedi/components/base/typography/heading/heading'; -import { Col, Row } from '../../../tedi/components/layout/grid'; -import { VerticalSpacing } from '../../../tedi/components/layout/vertical-spacing'; -import { Separator } from '../../../tedi/components/misc/separator/separator'; +import { Heading } from '../../components/base/typography/heading/heading'; +import { Col, Row } from '../../components/layout/grid'; +import { VerticalSpacing } from '../../components/layout/vertical-spacing'; +import { Separator } from '../../components/misc/separator/separator'; import BreakingpointsTable from './breaking-points'; const Grid = () => { diff --git a/src/community/docs/scale-layout/spacing.mdx b/src/tedi/docs/scale-layout/spacing.mdx similarity index 60% rename from src/community/docs/scale-layout/spacing.mdx rename to src/tedi/docs/scale-layout/spacing.mdx index 547603667..4dd24520b 100644 --- a/src/community/docs/scale-layout/spacing.mdx +++ b/src/tedi/docs/scale-layout/spacing.mdx @@ -2,7 +2,7 @@ import { Meta, Unstyled } from '@storybook/blocks'; import Spacing from './spacing.tsx'; - + diff --git a/src/community/docs/scale-layout/spacing.tsx b/src/tedi/docs/scale-layout/spacing.tsx similarity index 88% rename from src/community/docs/scale-layout/spacing.tsx rename to src/tedi/docs/scale-layout/spacing.tsx index f22458635..03fe96afa 100644 --- a/src/community/docs/scale-layout/spacing.tsx +++ b/src/tedi/docs/scale-layout/spacing.tsx @@ -1,11 +1,11 @@ import { Title } from '@storybook/blocks'; import { ColumnDef, createColumnHelper } from '@tanstack/react-table'; -import { Heading } from '../../../tedi/components/base/typography/heading/heading'; -import { Col, Row } from '../../../tedi/components/layout/grid'; -import { VerticalSpacing } from '../../../tedi/components/layout/vertical-spacing'; -import { Separator } from '../../../tedi/components/misc/separator/separator'; -import { Table } from '../../index'; +import { Table } from '../../../community/index'; +import { Heading } from '../../components/base/typography/heading/heading'; +import { Col, Row } from '../../components/layout/grid'; +import { VerticalSpacing } from '../../components/layout/vertical-spacing'; +import { Separator } from '../../components/misc/separator/separator'; const Spacing = () => { return ( From b373735d507d094b0cade3d19312b092895fa8e9 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Wed, 25 Feb 2026 10:36:41 +0200 Subject: [PATCH 2/2] chore: move VerticalSpacing story to Layout as well #526 --- .../layout/vertical-spacing/vertical-spacing.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tedi/components/layout/vertical-spacing/vertical-spacing.stories.tsx b/src/tedi/components/layout/vertical-spacing/vertical-spacing.stories.tsx index 4af447580..a3fcaffe9 100644 --- a/src/tedi/components/layout/vertical-spacing/vertical-spacing.stories.tsx +++ b/src/tedi/components/layout/vertical-spacing/vertical-spacing.stories.tsx @@ -11,7 +11,7 @@ import { VerticalSpacing, VerticalSpacingProps } from './vertical-spacing'; const meta: Meta = { component: VerticalSpacing, - title: 'Tedi-Ready/Components/Helpers/VerticalSpacing', + title: 'Tedi-Ready/Layout/VerticalSpacing', subcomponents: { 'VerticalSpacing.Item': VerticalSpacing.Item, } as never,