@scottish-government/designsystem-react 0.10.2 → 0.11.0

package/src/components/SiteNavigation/SiteNavigation.Item.stories.tsx

@@ -6,7 +6,17 @@ import SiteNavigation from './SiteNavigation';
 const meta = {
     title: 'Components/SiteNavigation/SiteNavigation.Item',
     component: SiteNavigation.Item,
+    decorators: [
+        Story => (
+            <nav className="ds_site-navigation">
+                <ul className="ds_site-navigation__list">
+                    <Story />
+                </ul>
+            </nav>
+        )
+    ],
     argTypes: {
+        href: argTypes.href({type: {name: 'string', required: true}}),
         linkComponent: argTypes.linkComponent(),
         children: argTypes.children()
     },

package/src/components/SkipLinks/SkipLinks.Item.stories.tsx

@@ -6,10 +6,20 @@ import SkipLinks from './SkipLinks';
 const meta = {
     title: 'Components/SkipLinks/SkipLinks.Link',
     component: SkipLinks.Link,
+    decorators: [
+        Story => (
+            <ul className="ds_skip-links">
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         fragmentId: {
             description: 'ID of the destination element',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/SummaryCard/SummaryCard.Action.stories.tsx

@@ -6,6 +6,13 @@ import SummaryCard from './SummaryCard';
 const meta = {
     title: 'Components/SummaryCard/SummaryCard.Action',
     component: SummaryCard.Action,
+    decorators: [
+        Story => (
+            <div className="ds_summary-card__header">
+                <Story />
+            </div>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         onClick: argTypes.onClick(),

package/src/components/SummaryCard/SummaryCard.stories.tsx

@@ -9,6 +9,13 @@ const meta = {
     component: SummaryCard,
     argTypes: {
         headingLevel: argTypes.headingLevel(),
+        title: {
+            description: 'The title of the summary card',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {

package/src/components/SummaryList/SummaryList.Item.stories.tsx

@@ -6,10 +6,25 @@ import SummaryList from './SummaryList';
 const meta = {
     title: 'Components/SummaryList/SummaryList.Item',
     component: SummaryList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
+        Title: {
+            description: 'Title of the summary list item.',
+            type: {
+                name: 'string',
+                required: true
+            }
+        },
         children: argTypes.children()
     },
     args: {
+        title: 'Contact details',
         children: [
             <SummaryList.Value name="Email">
                 email@gov.scot

package/src/components/SummaryList/SummaryList.Value.stories.tsx

@@ -8,8 +8,11 @@ const meta = {
     component: SummaryList.Value,
     argTypes: {
         name: {
-            description: 'Title of the summary list item',
-            type: 'string'
+            description: 'Name of the summary value',
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/Tabs/Tabs.Item.stories.tsx

@@ -9,7 +9,10 @@ const meta = {
     argTypes: {
         tabLabel: {
             description: '',
-            type: 'string'
+            type: {
+                name: 'string',
+                required: true
+            }
         },
         children: argTypes.children()
     },

package/src/components/TaskList/TaskList.Group.stories.tsx

@@ -6,6 +6,15 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Group',
     component: TaskList.Group,
+    decorators: [
+        Story => (
+            <div className="ds_task-list">
+                <ul>
+                    <Story />
+                </ul>
+            </div>
+        )
+    ],
     argTypes: {
         headingId: {
             description: 'ID of the task list\'s heading element',

package/src/components/TaskList/TaskList.Item.stories.tsx

@@ -6,6 +6,13 @@ import TaskList from './TaskList';
 const meta = {
     title: 'Components/TaskList/TaskList.Item',
     component: TaskList.Item,
+    decorators: [
+        Story => (
+            <ul>
+                <Story />
+            </ul>
+        )
+    ],
     argTypes: {
         href: argTypes.href(),
         id: {