diff --git a/src/components/DescriptionList/sgds-description-list.ts b/src/components/DescriptionList/sgds-description-list.ts
index 8af6a267..d596235e 100644
--- a/src/components/DescriptionList/sgds-description-list.ts
+++ b/src/components/DescriptionList/sgds-description-list.ts
@@ -7,7 +7,7 @@ let id = 0;
/**
*
- * @summary Description Lists are used with description list group as list components
+ * @summary Description Lists are used with description list group as list components. A description list (often referred to as a “definition list”) is a type of list used in web design and documentation to pair terms with their corresponding descriptions or values.
*
* @slot default - The slot for the label
* @slot data - The slot for the data
diff --git a/stories/templates/DescriptionList/additional.mdx b/stories/templates/DescriptionList/additional.mdx
new file mode 100644
index 00000000..a7919f2b
--- /dev/null
+++ b/stories/templates/DescriptionList/additional.mdx
@@ -0,0 +1,27 @@
+## Title and subtitle slots
+
+Title and subtitle are optional items. They provide more context to the subtitle list as a group
+
+Use `slot=title` and `slot=subtitle` to pass in title and subtitle
+
+
+
+
+## Stacked layout
+
+By default, the layout of description list is inline. Add boolean `stacked` attribute to `SgdsDescriptionListGroup` for a stacked layout
+
+
+
+
+## Bordered
+
+By default, there are no borders to the description list. Add `bordered` attribute to `SgdsDescriptionListGroup` for a bordered description list
+
+
\ No newline at end of file
diff --git a/stories/templates/DescriptionList/additional.stories.js b/stories/templates/DescriptionList/additional.stories.js
new file mode 100644
index 00000000..c674b759
--- /dev/null
+++ b/stories/templates/DescriptionList/additional.stories.js
@@ -0,0 +1,21 @@
+export const OptionalTitleDescription = {
+ render: Template.bind({}),
+ name: "Optional title and subtitle",
+ args: { title: true, subtitle: true },
+ parameters: {},
+ tags: ["!dev"]
+};
+export const Stacked = {
+ render: Template.bind({}),
+ name: "Stacked layout",
+ args: { stacked: true },
+ parameters: {},
+ tags: ["!dev"]
+};
+export const Bordered = {
+ render: Template.bind({}),
+ name: "Bordered",
+ args: { bordered: true },
+ parameters: {},
+ tags: ["!dev"]
+};
diff --git a/stories/templates/DescriptionList/basic.js b/stories/templates/DescriptionList/basic.js
index 386c308f..00e1bd04 100644
--- a/stories/templates/DescriptionList/basic.js
+++ b/stories/templates/DescriptionList/basic.js
@@ -1,6 +1,27 @@
-import { html } from "lit-html";
+import { html, nothing } from "lit-html";
-export const Template = args => html``;
+export const Template = args => html`
+
+ ${args.title ? html` Title` : nothing}
+ ${args.subtitle ? html`Description` : nothing}
+
+ Label 1
+ Value Text Description List 1
+
+
+ Label 2
+ Value Text Description List 2
+
+
+ Label 3
+ Value Text Description List 3
+
+
+ Label 4
+ Value Text Description List 4
+
+
+`;
export const args = {};
diff --git a/stories/templates/DescriptionListGroup/basic.js b/stories/templates/DescriptionListGroup/basic.js
deleted file mode 100644
index 96c7a8c1..00000000
--- a/stories/templates/DescriptionListGroup/basic.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { html } from "lit-html";
-
-export const Template = args => html``;
-
-export const args = {};
-
-export const parameters = {};
diff --git a/stories/templates/Tab/additional.mdx b/stories/templates/Tab/additional.mdx
new file mode 100644
index 00000000..88487552
--- /dev/null
+++ b/stories/templates/Tab/additional.mdx
@@ -0,0 +1,51 @@
+## Variants
+
+The variants of tab is controlled by `SgdsTabGroup`
+The default tab variant is `underlined`. Modify the `variant` prop to achieve solid tabs
+
+### Underlined tabs (default)
+
+
+
+### Solid tabs
+
+
+
+## Density
+
+The density of tabs is controlled by `SgdsTabGroup`. For a more compact tabs, modify `density` prop to `compact`
+
+
+### Compact underlined tabs
+
+
+
+### Compact solid tabs
+
+
+
+## Orientation
+
+Tabs can also be of horizontal or vertical orientation.
+The orientation of tabs is controlled by `SgdsTabGroup`.
+By default, tabs are presented horizontally. Set `orientation` to `vertical` for vertical tabs
+
+### Vertical underlined tabs
+
+
+
+### Vertical solid tabs
+
+
\ No newline at end of file
diff --git a/stories/templates/Tab/additional.stories.js b/stories/templates/Tab/additional.stories.js
new file mode 100644
index 00000000..258a63d6
--- /dev/null
+++ b/stories/templates/Tab/additional.stories.js
@@ -0,0 +1,36 @@
+export const SolidVariant = {
+ render: Template.bind({}),
+ name: "Solid variant",
+ args: { variant: "solid" },
+ parameters: {},
+ tags: ["!dev"]
+};
+export const UnderlinedDensityCompact = {
+ render: Template.bind({}),
+ name: "Compact density for underlined tabs",
+ args: { density: "compact" },
+ parameters: {},
+ tags: ["!dev"]
+};
+export const SolidDensityCompact = {
+ render: Template.bind({}),
+ name: "Compact density for solid tabs",
+ args: { density: "compact", variant: "solid" },
+ parameters: {},
+ tags: ["!dev"]
+};
+
+export const OrientationUnderlined = {
+ render: Template.bind({}),
+ name: "Vertical orientation for underlined tabs",
+ args: { orientation: "vertical" },
+ parameters: {},
+ tags: ["!dev"]
+};
+export const OrientationSolid = {
+ render: Template.bind({}),
+ name: "Vertical orientation for solid tabs",
+ args: { orientation: "vertical", variant: "solid" },
+ parameters: {},
+ tags: ["!dev"]
+};
diff --git a/stories/templates/Tab/basic.js b/stories/templates/Tab/basic.js
index c60068bb..adc97fb3 100644
--- a/stories/templates/Tab/basic.js
+++ b/stories/templates/Tab/basic.js
@@ -1,11 +1,10 @@
import { html } from "lit-html";
import { ifDefined } from "lit/directives/if-defined.js";
-export const Template = ({ disabled }) => html`
-
Default toggle
-
+export const Template = ({ variant, orientation, density }) => html`
+ Home
- Profile
+ ProfileContactLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
@@ -19,82 +18,13 @@ export const Template = ({ disabled }) => html`
>
Contact information
-
-
Basic toggle
-
-
- Home
-
- Profile
- Contact
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
- standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
- type specimen book.
- It is a long established fact that a reader will be distracted by the readable content of a page when looking at
- its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
- opposed to using 'Content here, content here',
- Contact information
-
-
Info toggle
-
-
-
- 1Home
-
- 2Profile
- 100Contact
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
- standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
- a type specimen book.
- It is a long established fact that a reader will be distracted by the readable content of a page when looking
- at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
- opposed to using 'Content here, content here',
- Contact information
-
-
`;
export const args = {
- name: "home",
- panel: "home"
+ // name: "home",
+ // panel: "home"
};
export const parameters = {
- controls: { exclude: ["name", "panel", "active", "variant"] }
+ // controls: { exclude: ["name", "panel", "active", "variant"] }
};