+
+### Style
+
+
+### Type
+
+
+### Examples
+
+
+## Usage
+
+### Full width banner
+
+
+
+### Floating element
+
+
+### Nested element
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/Alert/Alert.stories.tsx b/packages/admin-ui/src/Alert/Alert.stories.tsx
index f2a293cc917..a39cca1ec54 100644
--- a/packages/admin-ui/src/Alert/Alert.stories.tsx
+++ b/packages/admin-ui/src/Alert/Alert.stories.tsx
@@ -5,7 +5,6 @@ import React from "react";
const meta: Meta
+
+### Style
+
+
+### Option
+
+
+### States and Styles
+
+
+### Label Anatomy
+
+
+### Label Properties
+
+
+## Usage
+
+### Used in forms
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
index b8a2ae70fcd..f44ab6b0d24 100644
--- a/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
+++ b/packages/admin-ui/src/AutoComplete/AutoComplete.stories.tsx
@@ -5,7 +5,6 @@ import { AutoComplete } from "./AutoComplete";
const meta: Meta
+
+### Type
+
+
+### Style
+
+
+## Usage
+
+### Header
+
+
+### Table
+
diff --git a/packages/admin-ui/src/Avatar/Avatar.stories.tsx b/packages/admin-ui/src/Avatar/Avatar.stories.tsx
index 18683c652a6..383f13b69b2 100644
--- a/packages/admin-ui/src/Avatar/Avatar.stories.tsx
+++ b/packages/admin-ui/src/Avatar/Avatar.stories.tsx
@@ -6,7 +6,6 @@ import { Avatar } from "./Avatar";
const meta: Meta
+
+### Options
+
+
+### Type
+
+
+### Size
+Regular buttons come in four different sizes: small, medium, large, and xl. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
+
+
+
+Icon-only button come in six different sizes to accommodate for various component needs.
+
+
+
+
+### States
+
+
+## Usage
+
+### Icon Usage
+An icon should only be used in a button when it's benefitial and when it has a meaningful association with the label.
+
+
+
+### Use primary buttons sparingly
+Use primary buttons as the desired action for users. Competing primary buttons may leave the user unsure of next steps in their user journey. As a rule of thumb limit primary buttons to 1 in contained UIs and 3 in full page UIs.
+
+
+
+### Button Group
+When used in groups, buttons should support only maximum of two type variants, with an exception of third variant being ghost extension button (eg. ellipsis). Avoid using random type and icon options within the button groups. Avoid using different sizes within the same group.
+
+
diff --git a/packages/admin-ui/src/Button/Button.stories.tsx b/packages/admin-ui/src/Button/Button.stories.tsx
index 55e5bae5a9c..fb752d98a0e 100644
--- a/packages/admin-ui/src/Button/Button.stories.tsx
+++ b/packages/admin-ui/src/Button/Button.stories.tsx
@@ -8,7 +8,6 @@ const meta: Meta
+
+### Elevation
+
+
+
+### Radius
+Depending on the content type and card usage, there are three basic paddings options to consider. Border radius can vary from 4px - 12px
+
+
+
+### Padding
+
+
+
+## Usage
+
+### Stacked
+
+
+
+
+
diff --git a/packages/admin-ui/src/Card/Card.stories.tsx b/packages/admin-ui/src/Card/Card.stories.tsx
index b984e047b8b..a6172353e03 100644
--- a/packages/admin-ui/src/Card/Card.stories.tsx
+++ b/packages/admin-ui/src/Card/Card.stories.tsx
@@ -8,7 +8,6 @@ import { Icon } from "~/Icon";
const meta: Meta
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.mdx b/packages/admin-ui/src/Checkbox/Checkbox.mdx
new file mode 100644
index 00000000000..274df2dfffb
--- /dev/null
+++ b/packages/admin-ui/src/Checkbox/Checkbox.mdx
@@ -0,0 +1,42 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+
+
+# Checkbox
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+
+
+## Usage
+
+```
+import { Checkbox } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A chackbox input group organizes related checkbox input options together for better clarity and functionality.
+
+
+
+### Checkbox input options
+Checkbox inputs can exist in two different states: Selected and Not Selected.
+
+
+
+### States
+
+
+## Usage
+
+### Text overflow
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+
+
+
+
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
index 318beaf05ed..5d3d3aa4701 100644
--- a/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
@@ -5,7 +5,6 @@ import { Checkbox } from "~/Checkbox";
const meta: Meta = {
title: "Components/Form/Checkbox",
component: Checkbox,
- tags: ["autodocs"],
parameters: {
layout: "padded"
},
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx
new file mode 100644
index 00000000000..3c533806465
--- /dev/null
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxGroupStories from './CheckboxGroup.stories';
+
+
+
+# Checkbox Group
+
+Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. A checkbox group is a grouping of checkboxes that are related to each other.
+
+
+
+## Usage
+
+```
+import { CheckboxGroup } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### General
+Checkbox input enable users to select a single or multiple items from a list of offered choices. A chackbox input group organizes related checkbox input options together for better clarity and functionality.
+
+
+
+
+
+
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
index 3e9c7b22826..9cd8dad5c31 100644
--- a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -5,7 +5,6 @@ import { CheckboxGroup } from "~/CheckboxGroup";
const meta: Meta = {
title: "Components/Form/CheckboxGroup",
component: CheckboxGroup,
- tags: ["autodocs"],
parameters: {
layout: "padded"
},
diff --git a/packages/admin-ui/src/Dialog/Dialog.mdx b/packages/admin-ui/src/Dialog/Dialog.mdx
new file mode 100644
index 00000000000..d8a5b1be2aa
--- /dev/null
+++ b/packages/admin-ui/src/Dialog/Dialog.mdx
@@ -0,0 +1,28 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as DialogStories from './Dialog.stories';
+
+
+
+# Dialog
+
+A Dialog is used to display content or actions in a focused, overlay window that requires user interaction before returning to the main interface. Modals are valuable for drawing attention to important information, capturing user input, and streamlining workflows without navigating away from the current page.
+
+
+
+## Usage
+
+```
+import { Dialog } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Dialog Construction
+
+
+### Overlay and Positioning
+
+
+## Usage
+
diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
index 7ae97403384..5b89b95ca5c 100644
--- a/packages/admin-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -13,7 +13,6 @@ import { Tabs } from "~/Tabs";
const meta: Meta = {
title: "Components/Dialog",
component: Dialog,
- tags: ["autodocs"],
argTypes: {}
};
diff --git a/packages/admin-ui/src/Drawer/Drawer.mdx b/packages/admin-ui/src/Drawer/Drawer.mdx
new file mode 100644
index 00000000000..73120e687a4
--- /dev/null
+++ b/packages/admin-ui/src/Drawer/Drawer.mdx
@@ -0,0 +1,36 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as DrawerStories from './Drawer.stories';
+
+
+
+# Drawer
+
+A Drawer is a UI component used to display additional or expanded content options without leaving the current view. The drawer should slide in from left or right side of the screen, overlaying the main content.
+
+
+
+## Usage
+
+```
+import { Drawer } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Construction
+
+
+### Header
+
+Header needs to support multiple formation options that can be independently enabled or disabled.
+
+
+
+## Usage
+
+### Positioning
+
+Drawers should slide in from either the left or right side, depending on the context. The drawer should overlay the content, and clicking outside of it should close it. There also needs to be an option to use an overlay behind the drawer.
+
+
diff --git a/packages/admin-ui/src/Drawer/Drawer.stories.tsx b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
index 6219b2e01f1..e27534a4beb 100644
--- a/packages/admin-ui/src/Drawer/Drawer.stories.tsx
+++ b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
@@ -9,7 +9,6 @@ import { ReactComponent as DoorbellIcon } from "@material-design-icons/svg/outli
const meta: Meta = {
title: "Components/Drawer",
component: Drawer,
- tags: ["autodocs"],
argTypes: {}
};
diff --git a/packages/admin-ui/src/Grid/Grid.mdx b/packages/admin-ui/src/Grid/Grid.mdx
new file mode 100644
index 00000000000..5a3eedb4a46
--- /dev/null
+++ b/packages/admin-ui/src/Grid/Grid.mdx
@@ -0,0 +1,62 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as GridStories from './Grid.stories';
+
+
+
+# Grid
+
+Grid structures layouts with clarity and consistency, organizing content, maintaining alignment, and ensuring a seamless experience across screen sizes. Settings include column configuration, gutter spacing, and responsive behavior.
+
+
+
+## Usage
+
+```
+import { Grid } from '@webiny/admin-ui';
+```
+
+## Horizontal Grids
+The grids within the Webiny Design System behave as fixed and fluid elements relevant to the elements on the page.
+
+### Grid types
+Webiny Design System use two types of grids: fluid and fixed. Both grid types use breakpoints to determine whether the layout needs to change between viewport sizes.
+
+### Fluid
+The fluid grid stretches across an area to fill all available space within the screen, part of the screen or within the specific element if needed.
+
+
+
+
+
+
+### Fixed
+The fixed grid applies the ideal maximum width to page or page element.
+
+
+
+
+
+## Grid Gutter Sizes
+We considered using two main sizes for grid application, to be used dependent on the content type.
+
+### Comfortable (Default)
+
+
+### Spacious
+
+
+## Breakpoints
+A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
+
+
+
+## Column Spans
+Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
+
+
+
+## Column Offsets
+Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
+
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx
index 7b18e15e864..046a9548201 100644
--- a/packages/admin-ui/src/Grid/Grid.stories.tsx
+++ b/packages/admin-ui/src/Grid/Grid.stories.tsx
@@ -6,8 +6,7 @@ import { StyledColumn } from "./stories/StyledColumn";
const meta: Meta = {
title: "Components/Grid",
- component: Grid,
- tags: ["autodocs"]
+ component: Grid
};
export default meta;
diff --git a/packages/admin-ui/src/Input/Input.mdx b/packages/admin-ui/src/Input/Input.mdx
new file mode 100644
index 00000000000..a8734ffbe58
--- /dev/null
+++ b/packages/admin-ui/src/Input/Input.mdx
@@ -0,0 +1,45 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as InputStories from './Input.stories';
+
+
+
+# Text Input
+
+Text input field component enable users to input, edit, or search text in digital interfaces. It facilitates data collection, user interaction, and communication. Text fields ensure clarity, consistency, and accessibility across applications, supporting tasks like form completion, authentication, and search queries in an intuitive and efficient manner.
+
+
+
+## Usage
+
+```
+import { Input } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Input Anatomy
+
+
+### Styles
+
+
+### Field Size
+
+
+### States and Styles
+
+
+### Label Anatomy
+
+
+### Label Properties
+
+
+### Label Options
+
+
+## Usage
+
+### Used in forms
+
diff --git a/packages/admin-ui/src/Input/Input.stories.tsx b/packages/admin-ui/src/Input/Input.stories.tsx
index 35d063f1010..526824da609 100644
--- a/packages/admin-ui/src/Input/Input.stories.tsx
+++ b/packages/admin-ui/src/Input/Input.stories.tsx
@@ -6,7 +6,6 @@ import { Input } from "~/Input";
const meta: Meta = {
title: "Components/Form/Input",
component: Input,
- tags: ["autodocs"],
argTypes: {
onChange: { action: "onChange" },
type: {
diff --git a/packages/admin-ui/src/Link/Link.mdx b/packages/admin-ui/src/Link/Link.mdx
new file mode 100644
index 00000000000..99b65d12057
--- /dev/null
+++ b/packages/admin-ui/src/Link/Link.mdx
@@ -0,0 +1,35 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as LinkStories from './Link.stories';
+
+
+
+# Link
+
+The purpose of the Link component is to enable seamless navigation by connecting users to other pages, sections, or resources. It provides a consistent, accessible, and visually recognizable way to interact with content, ensuring clarity and usability while maintaining the design system's cohesion.
+
+
+
+## Usage
+
+```
+import { Link } from '@webiny/admin-ui';
+```
+
+## Anatomy
+
+### Primary
+
+
+### Secondary
+
+
+### Sizing
+Links inherit font styles of surrounding text.
+
+
+### State
+
+
+## Usage
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/Link/Link.stories.tsx b/packages/admin-ui/src/Link/Link.stories.tsx
index 86bec7d8e89..9a596ad9af2 100644
--- a/packages/admin-ui/src/Link/Link.stories.tsx
+++ b/packages/admin-ui/src/Link/Link.stories.tsx
@@ -7,7 +7,6 @@ import { Text } from "~/Text";
const meta: Meta = {
title: "Components/Link",
component: Link,
- tags: ["autodocs"],
decorators: [
(Story: React.ComponentType) => (
diff --git a/packages/admin-ui/src/Progress/CircularProgress.mdx b/packages/admin-ui/src/Progress/CircularProgress.mdx
new file mode 100644
index 00000000000..f92c1791cff
--- /dev/null
+++ b/packages/admin-ui/src/Progress/CircularProgress.mdx
@@ -0,0 +1,45 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as CircularProgressStories from './CircularProgress.stories';
+
+
+
+# Circular Progress
+
+The Circular Progress Loader visually represents ongoing processes, such as loading or background tasks, by displaying continuous or determinate progress. It provides users with clear feedback, ensuring a smooth and informed experience while maintaining design consistency.
+
+
+
+### Checkbox input options
+Checkbox inputs can exist in two different states: Selected and Not Selected.
+
+
+
+### States
+
+
+## Usage
+
+### Text overflow
+When the checkbox text content is too long for the horizontal space available, the content should wrap to form another line aligning the text and checkbox on top.
+
+
+
+
+
diff --git a/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
index 318beaf05ed..5d3d3aa4701 100644
--- a/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/admin-ui/src/Checkbox/Checkbox.stories.tsx
@@ -5,7 +5,6 @@ import { Checkbox } from "~/Checkbox";
const meta: Meta
+
+
+
+
diff --git a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
index 3e9c7b22826..9cd8dad5c31 100644
--- a/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
+++ b/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -5,7 +5,6 @@ import { CheckboxGroup } from "~/CheckboxGroup";
const meta: Meta
+
+### Overlay and Positioning
+
+
+## Usage
+
diff --git a/packages/admin-ui/src/Dialog/Dialog.stories.tsx b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
index 7ae97403384..5b89b95ca5c 100644
--- a/packages/admin-ui/src/Dialog/Dialog.stories.tsx
+++ b/packages/admin-ui/src/Dialog/Dialog.stories.tsx
@@ -13,7 +13,6 @@ import { Tabs } from "~/Tabs";
const meta: Meta
+
+### Header
+
+Header needs to support multiple formation options that can be independently enabled or disabled.
+
+
+
+## Usage
+
+### Positioning
+
+Drawers should slide in from either the left or right side, depending on the context. The drawer should overlay the content, and clicking outside of it should close it. There also needs to be an option to use an overlay behind the drawer.
+
+
diff --git a/packages/admin-ui/src/Drawer/Drawer.stories.tsx b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
index 6219b2e01f1..e27534a4beb 100644
--- a/packages/admin-ui/src/Drawer/Drawer.stories.tsx
+++ b/packages/admin-ui/src/Drawer/Drawer.stories.tsx
@@ -9,7 +9,6 @@ import { ReactComponent as DoorbellIcon } from "@material-design-icons/svg/outli
const meta: Meta
+
+
+
+
+### Fixed
+The fixed grid applies the ideal maximum width to page or page element.
+
+
+
+
+
+## Grid Gutter Sizes
+We considered using two main sizes for grid application, to be used dependent on the content type.
+
+### Comfortable (Default)
+
+
+### Spacious
+
+
+## Breakpoints
+A breakpoint marks the point where a website’s layout adapts to provide the best user experience. In responsive design, the range of each breakpoint defines the ideal number of columns for a given viewport size, along with the suggested widths for margins and gutters.
+
+
+
+## Column Spans
+Content should be distributed across a minimum of 3 columns, with the option to extend up to 12 columns. To achieve a range of layouts, vary the number of columns used, allowing for flexible design across different breakpoints.
+
+
+
+## Column Offsets
+Content isn't required to span the full 12 columns. It can cover a smaller number of columns, creating a layout where the content is centered within a 12-column grid.
+
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/Grid/Grid.stories.tsx b/packages/admin-ui/src/Grid/Grid.stories.tsx
index 7b18e15e864..046a9548201 100644
--- a/packages/admin-ui/src/Grid/Grid.stories.tsx
+++ b/packages/admin-ui/src/Grid/Grid.stories.tsx
@@ -6,8 +6,7 @@ import { StyledColumn } from "./stories/StyledColumn";
const meta: Meta
+
+### Styles
+
+
+### Field Size
+
+
+### States and Styles
+
+
+### Label Anatomy
+
+
+### Label Properties
+
+
+### Label Options
+
+
+## Usage
+
+### Used in forms
+
diff --git a/packages/admin-ui/src/Input/Input.stories.tsx b/packages/admin-ui/src/Input/Input.stories.tsx
index 35d063f1010..526824da609 100644
--- a/packages/admin-ui/src/Input/Input.stories.tsx
+++ b/packages/admin-ui/src/Input/Input.stories.tsx
@@ -6,7 +6,6 @@ import { Input } from "~/Input";
const meta: Meta
+
+### Secondary
+
+
+### Sizing
+Links inherit font styles of surrounding text.
+
+
+### State
+
+
+## Usage
+
\ No newline at end of file
diff --git a/packages/admin-ui/src/Link/Link.stories.tsx b/packages/admin-ui/src/Link/Link.stories.tsx
index 86bec7d8e89..9a596ad9af2 100644
--- a/packages/admin-ui/src/Link/Link.stories.tsx
+++ b/packages/admin-ui/src/Link/Link.stories.tsx
@@ -7,7 +7,6 @@ import { Text } from "~/Text";
const meta: Meta