@ilo-org/react 0.0.1 → 0.0.3

package/src/stories/Callout.stories.tsx

@@ -143,12 +143,40 @@ export const WarningCallout = WarningCalloutTemplate.bind({});
 
 // enumerate the props for the Info Callout
 InfoCallout.storyName = "Info Callout";
+InfoCallout.parameters = {
+  docs: {
+    description: {
+      story: "The Info Callout is for",
+    },
+  },
+};
 
 // enumerate the props Error Callout
 ErrorCallout.storyName = "Error Callout";
+ErrorCallout.parameters = {
+  docs: {
+    description: {
+      story: "The Error Callout is for",
+    },
+  },
+};
 
 // enumerate the props Success Callout
 SuccessCallout.storyName = "Success Callout";
+SuccessCallout.parameters = {
+  docs: {
+    description: {
+      story: "The Success Callout is for",
+    },
+  },
+};
 
 // enumerate the props Warning Callout
 WarningCallout.storyName = "Warning Callout";
+WarningCallout.parameters = {
+  docs: {
+    description: {
+      story: "The Warning Callout is for",
+    },
+  },
+};

package/src/stories/ContextMenu.stories.tsx

@@ -36,8 +36,8 @@ export default {
           <Subtitle />
           <Title />
           <Description>
-            The ContextMenu component is used to display information about a
-            person.
+            The ContextMenu component is used to display a list of contextual
+            links.
           </Description>
           <Primary />
           <Subheading>Props</Subheading>
@@ -70,3 +70,11 @@ Basic.storyName = "ContextMenu - Basic";
 
 WithSection.args = contextMenuArgs.withsection;
 WithSection.storyName = "ContextMenu - With A 'Section'";
+WithSection.parameters = {
+  docs: {
+    description: {
+      story:
+        "The Context menu iteams can each be marked, via the `endsection` prop, as a *section*, which display a 100% width bottom border.",
+    },
+  },
+};

package/src/stories/Hero.stories.tsx

@@ -57,6 +57,13 @@ export const HomeHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 HomeHero.args = heroArgs.homeHero;
 HomeHero.storyName = "Home Hero";
+HomeHero.parameters = {
+  docs: {
+    description: {
+      story: "The Home Hero...",
+    },
+  },
+};
 
 /**
  * Article Hero Instance
@@ -67,6 +74,13 @@ export const ArticleHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 ArticleHero.args = heroArgs.articleHero;
 ArticleHero.storyName = "Article Hero";
+ArticleHero.parameters = {
+  docs: {
+    description: {
+      story: "The Article Hero...",
+    },
+  },
+};
 
 /**
  * Article Centered Hero Instance
@@ -77,6 +91,13 @@ export const ArticleCenteredHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 ArticleCenteredHero.args = heroArgs.articleCenteredHero;
 ArticleCenteredHero.storyName = "Article Centered Hero";
+ArticleCenteredHero.parameters = {
+  docs: {
+    description: {
+      story: "The Article Centered Hero...",
+    },
+  },
+};
 
 /**
  * Article No-Image Hero Instance
@@ -87,6 +108,13 @@ export const ArticleNoImageHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 ArticleNoImageHero.args = heroArgs.articleNoImageHero;
 ArticleNoImageHero.storyName = "Article No Image Hero";
+ArticleNoImageHero.parameters = {
+  docs: {
+    description: {
+      story: "The Article No Image Hero...",
+    },
+  },
+};
 
 /**
  * Graphic Hero Instance
@@ -97,6 +125,13 @@ export const GraphicHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 GraphicHero.args = heroArgs.graphicHero;
 GraphicHero.storyName = "Graphic Hero";
+GraphicHero.parameters = {
+  docs: {
+    description: {
+      story: "The Graphic Hero...",
+    },
+  },
+};
 
 /**
  * Portal Hero Instance
@@ -107,6 +142,13 @@ export const PortalHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 PortalHero.args = heroArgs.portalHero;
 PortalHero.storyName = "Portal Hero";
+PortalHero.parameters = {
+  docs: {
+    description: {
+      story: "The Portal Hero...",
+    },
+  },
+};
 
 /**
  * Project Hero Instance
@@ -127,3 +169,10 @@ export const PublicationHero = HeroTemplate.bind({});
 // enumerate the props for the hero only option
 PublicationHero.args = heroArgs.publicationHero;
 PublicationHero.storyName = "Publication Hero";
+PublicationHero.parameters = {
+  docs: {
+    description: {
+      story: "The Publication Hero...",
+    },
+  },
+};

package/src/stories/Loading.stories.tsx

@@ -73,14 +73,10 @@ export const LoadingLarge = LoadingTemplate.bind({});
 
 export const LoadedLarge = LoadingTemplate.bind({});
 
-export const IdleLarge = LoadingTemplate.bind({});
-
 export const LoadingSmall = LoadingTemplate.bind({});
 
 export const LoadedSmall = LoadingTemplate.bind({});
 
-export const IdleSmall = LoadingTemplate.bind({});
-
 BaseLoading.args = loadingArgs.loadinglarge;
 BaseLoading.storyName = "Loading - loading large";
 
@@ -90,14 +86,8 @@ LoadingLarge.storyName = "Loading - loading large";
 LoadedLarge.args = loadingArgs.loadedlarge;
 LoadedLarge.storyName = "Loading - loaded large";
 
-IdleLarge.args = loadingArgs.idlelarge;
-IdleLarge.storyName = "Loading - idle large";
-
 LoadingSmall.args = loadingArgs.loadingsmall;
 LoadingSmall.storyName = "Loading - loading small";
 
 LoadedSmall.args = loadingArgs.loadedsmall;
 LoadedSmall.storyName = "Loading - loaded small";
-
-IdleSmall.args = loadingArgs.idlesmall;
-IdleSmall.storyName = "Loading - idle small";

package/src/stories/Notification.stories.tsx

@@ -22,6 +22,14 @@ By changing the \`type\` prop you can set which icon to use with the Notificatio
 | \`success\` | The Notification alerts user to an operation's success. Border is green with a success icon. |
 | \`warning\` | The Notification alerts user to a warning. Border is yellow with a warning icon. |`;
 
+const placementDoc = `
+By changing the \`placement\` prop you can set whether the Notification is displayed inline in the document flow, or highest in the document z-index as a dialog.
+
+| type   |  Description  |
+|----------|-------------|
+| \`dialog\` | The Notification appears highest in the document z-index, outside the doucment flow. |
+| \`inline\` | The Notification appears in the normal document flow. |`;
+
 /**
  * Notification Story
  *
@@ -38,12 +46,17 @@ export default {
           <Subtitle />
           <Title />
           <Description>
-            The Notification component presents a dismissible alert.
+            The Notification component presents a dismissible alert. It can
+            appear as an inline alert, which appears in the normal flow of the
+            document, or it can appear as a dialog, highest in the document's
+            z-index.
           </Description>
           <Primary />
           <ArgsTable />
           <Subheading>type Prop</Subheading>
           <Description>{typeDoc}</Description>
+          <Subheading>placement Prop</Subheading>
+          <Description>{placementDoc}</Description>
           <Stories title="Examples"></Stories>
         </>
       ),

package/src/stories/TableOfContents.stories.tsx

@@ -15,7 +15,7 @@ import tableOfContentsArgs from "../components/TableOfContents/TableOfContents.a
  *
  */
 export default {
-  title: "Components/TableOfContents",
+  title: "Components/Table Of Contents",
   component: TableOfContents,
   parameters: {
     componentSubtitle: "Component",
@@ -25,8 +25,8 @@ export default {
           <Subtitle />
           <Title />
           <Description>
-            The TableOfContents component displays a list of anchor links to aid
-            users navigating within a page.
+            The Table Of Contents component displays a list of anchor links to
+            aid users navigating within a page.
           </Description>
           <Primary />
           <Stories title="Examples"></Stories>

package/src/stories/Tag.stories.tsx

@@ -184,11 +184,32 @@ export const ButtonTag = ButtonTagTemplate.bind({});
 // enumerate the props for the light tag.
 DisplayTag.args = tagSetArgs.tag;
 DisplayTag.storyName = "Display Tag";
+DisplayTag.parameters = {
+  docs: {
+    description: {
+      story: "Display Tag...",
+    },
+  },
+};
 
 // enumerate the props for the light tag.
 AnchorTag.args = tagSetArgs.tag;
 AnchorTag.storyName = "Anchor Tag";
+AnchorTag.parameters = {
+  docs: {
+    description: {
+      story: "Anchor Tag...",
+    },
+  },
+};
 
 // enumerate the props for the light tag.
 ButtonTag.args = tagSetArgs.buttonTag;
 ButtonTag.storyName = "Button Tag";
+ButtonTag.parameters = {
+  docs: {
+    description: {
+      story: "Button Tag...",
+    },
+  },
+};

package/storybook-static/iframe.html

@@ -324,7 +324,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link href="static/css/main.3d116812.css" rel="stylesheet"><style>#root[hidden],
+  };</script><link href="static/css/main.b43a53aa.css" rel="stylesheet"><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f3168ed5.iframe.bundle.js"></script><script src="29.8e0bc9a8.iframe.bundle.js"></script><script src="main.01e6a863.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f3168ed5.iframe.bundle.js"></script><script src="29.8e0bc9a8.iframe.bundle.js"></script><script src="main.10a8ad63.iframe.bundle.js"></script></body></html>