Core/dp 20309 overview documentation (#1284)

* Updated the structure of links and content and the layout of Introduction * Re-ordered brand pillars to top of principles * Update packages/core/stories/principles/Accessibility.stories.mdx Co-authored-by: Minghua Sun <[email protected]> * Moved sandbox style to end * Added imports to resolve conflict * Reverted preview js * Create _place-holder.scss -to resolve conflict with core/storybook-integration * Reverted meta.json -moved this work to navigation pr * Fixed wrap of li * Implemented LinkTo * Updated the structure of links and content and the layout of Introduction * Re-ordered brand pillars to top of principles * Update packages/core/stories/principles/Accessibility.stories.mdx Co-authored-by: Minghua Sun <[email protected]> * Moved sandbox style to end * Reverted preview js * Reverted meta.json -moved this work to navigation pr * Fixed wrap of li * Implemented LinkTo * DP-20568-storybook-navigation-update (#1290) * Added navigation update * Update meta.json * Re-organize links * Deleted some test files * Updated links Co-authored-by: Minghua Sun <[email protected]> * refactor introduction menu story links to use SectionLink component * update intro * fix and reorder * remove unused styles; Co-authored-by: Minghua Sun <[email protected]>
massgov · Dec 8, 2020 · 7f8e391 · 7f8e391
1 parent 80299b3
commit 7f8e391
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 83 deletions.
diff --git a/packages/core/.storybook/manager.js b/packages/core/.storybook/manager.js
@@ -4,5 +4,5 @@ import mayflowerTheme from './mayflowerTheme';
 addons.setConfig({
     theme: mayflowerTheme,
     showNav: true,
-    showPanel: true, // show the code panel by default,
-});
+    showPanel: true // show the code panel by default,
+});
diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
@@ -1,19 +1,31 @@
 import mayflowerTheme from './mayflowerTheme';
 
-const storyKindOrder = [
-  'Get Started',
-  ['Introduction', 'Install Mayflower', 'Examples'],
-  'Design Principles',
-  ['Brand Pillars'],
-  'Design Tokens',
-  'Branding Components',
-  'Base Elements'
-];
-
 export const parameters = {
-  options: {
+	options: {
     storySort: {
-      order: storyKindOrder
+      order: [
+				'Overview', [
+					'Introduction',
+					'Get Started',
+          			'Examples'
+				],
+				'Principles', [
+					'Brand Pillars',
+					'Accessibility'
+				],
+				'Foundation', [
+					'Logo',
+					'Color',
+					'Typography',
+					'Iconography'
+				],
+				'Elements',
+				'Components', [
+					'Header',
+					'Footer',
+          'Template'
+				]
+			]
     },
   },
   actions: { argTypesRegex: "^on[A-Z].*" },

diff --git a/packages/core/stories/about/Introduction.stories.mdx b/packages/core/stories/about/Introduction.stories.mdx
@@ -1,64 +1,66 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import {
-  SectionLinks, DecorativeLink, CalloutLink
+  SectionLinks, DecorativeLink, CalloutLink, IconArrow
 } from '@massds/mayflower-react';
-
+import LinkTo from '@storybook/addon-links/react';
 import '../styles/index.scss';
 
-
-import generateTitle from '../util/generateTitle';
+import generateTitle, { StoryLink } from '../util/generateTitle';
+import meta from '../meta.json';
 
 <Meta title={generateTitle('Introduction')} />
 
 # Welcome to Mayflower
 
-Mayflower is a living styleguide for the Massachusetts state government — providing guidance and tools for Massachusetts state agencies to create a cohesive government identity and trustworthy look and feel across Commonwealth digital ecosystem.
-
-The goal for Mayflower styleguide is to to help Massachusetts state organizations to easily and quickly apply the Commonwealth branding, follow to best practices, and create a consistent and delightly digital experience regardless of the technology stacks. Refer to the following three areas to "Mayflowerize" your product:
-
-- **Design principles** are the guiding theories and rationales for the Mayflower brand and other implementation ground rules, where all the system-wide design decisions and best practices are rooted in.
+Mayflower is the design system for the government of the state of Massachusetts. It's a tool state agencies can use to develop and maintain digital experiences that provide a consistent and trustworthy look and feel across our digital ecosystem.
 
-- **Design tokens** are assets and variables referenced and propagated throughout the design system.
+<p>
+  Read more below for in-depth information about the stystem or go to
+  {' '}
+  <StoryLink metaID="Usage" inline />
+  to dive right in and start using Mayflower.
+  {' '}
+</p>
 
-- **Branding components** are the templating components, such as Headers and Footers, and other base elements, such as Heading, Links, Buttons, that are frequently used in all web products.
 
 <div className="row ma__row--three-up">
   <div className="col-md">
     <SectionLinks
       title={{
-        text: 'Design Principles'
+        text: 'Principles'
       }}
-      description="Follow these high-level guides when making decisions on design and development of any digital or print products, and when adopting or contributing to Mayflower."
+      description="The design thinking behind the Mayflower system and its implementation. Use this when starting design and development of any new project or when contributing to Mayflower."
       index={0}
     >
-      <DecorativeLink text="Brand Pillars" href="" />
-      <DecorativeLink text="Design Guidelines" href="" />
+    <StoryLink metaID="BrandPillars"/>
+    <StoryLink metaID="Accessibility" />
     </SectionLinks>
   </div>
   <div className="col-md">
     <SectionLinks
       title={{
-        text: 'Design Tokens'
+        text: 'Foundation'
       }}
-      description="Apply these basic design vocabulary and assets to achieve a cohesive visual brand across various mediums and tech stacks. "
+      description="The raw materials of the Mayflower system. In general you don't need to 'do' anything to appy these since they are baked into all elements and components, but they are helpful if you need to alter, extend or contribute back to the project."
       index={1}
       >
-      <DecorativeLink text="Colors" href="" />
-      <DecorativeLink text="Typography" href="" />
-      <DecorativeLink text="Logo" href="" />
-      <DecorativeLink text="Icons" href="" />
+        <StoryLink metaID="Logo"/>
+        <StoryLink metaID="Colors" />
+        <StoryLink metaID="Typography" />
+        <StoryLink metaID="Icon" />
     </SectionLinks>
   </div>
   <div className="col-md">
     <SectionLinks
       title={{
-        text: 'Brand Touch Points'
+        text: 'UI Components'
       }}
-      description="Learn about how to implement these components quickly to achieve a consistent look and feel with the other Commonwealth digital products by reusing the design and code."
+      description="The building blocks, in both design and code, for everything from buttons and links to complex components like our responsive headers and a starter template, along with helpful instructions on how to use them."
       index={2}
       >
-      <DecorativeLink text="Branding Components" href="" />
-      <DecorativeLink text="Base Elements" href="" />
+      <StoryLink metaID="Button" text="Elements" />
+      <StoryLink metaID="Header" text="Components" />
+      <StoryLink metaID="Template" text="Template" />
     </SectionLinks>
   </div>
 </div>
diff --git a/packages/core/stories/meta.json b/packages/core/stories/meta.json
@@ -1,74 +1,74 @@
 {
   "Introduction": {
-    "group": "Get Started",
-    "title": "Introduction"
-  },
-  "Usage": {
-    "group": "Get Started",
-    "title": "Install Mayflower"
+    "kind": "Overview",
+    "story": "Introduction"
   },
   "Examples": {
-    "group": "Get Started",
-    "title": "Examples"
+    "kind": "Overview",
+    "story": "Examples"
+  },
+	"Usage": {
+    "kind": "Overview",
+    "story": "Get Started"
   },
   "BrandPillars": {
-    "group": "Design Principles",
-    "title": "Brand Pillars"
+    "kind": "Principles",
+    "story": "Brand Pillars"
   },
   "DesignGuidelines": {
-    "group": "Design Principles",
-    "title": "Guidelines"
+    "kind": "Principles",
+    "story": "Guidelines"
   },
   "Accessibility": {
-    "group": "Design Principles",
-    "title": "Accessibility"
+    "kind": "Principles",
+    "story": "Accessibility"
   },
   "Colors": {
-    "group": "Design Tokens",
-    "title": "Colors"
+    "kind": "Foundation",
+    "story": "Color"
   },
-  "Icons": {
-    "group": "Design Tokens",
-    "title": "Icons"
+  "Icon": {
+    "kind": "Foundation",
+    "story": "Iconography"
   },
   "Logo": {
-    "group": "Design Tokens",
-    "title": "Logo"
+    "kind": "Foundation",
+    "story": "Logo"
   },
   "Typography": {
-    "group": "Design Tokens",
-    "title": "Typeface"
+    "kind": "Foundation",
+    "story": "Typography"
   },
   "Button": {
-    "group": "Base Elements",
-    "title": "Buttons"
+    "kind": "Elements",
+    "story": "Buttons"
   },
   "Heading": {
-    "group": "Base Elements",
-    "title": "Heading"
+    "kind": "Elements",
+    "story": "Heading"
   },
   "Link": {
-    "group": "Base Elements",
-    "title": "Link"
+    "kind": "Elements",
+    "story": "Link"
   },
   "Headings": {
-    "group": "Base Elements",
-    "title": "Headings"
+    "kind": "Elements",
+    "story": "Headings"
   },
   "Links": {
-    "group": "Base Elements",
-    "title": "Links"
+    "kind": "Elements",
+    "story": "Links"
   },
   "Header": {
-    "group": "Brand Components",
-    "title": "Header"
+    "kind": "Components",
+    "story": "Header"
   },
   "Footer": {
-    "group": "Brand Components",
-    "title": "Footer"
+    "kind": "Components",
+    "story": "Footer"
   },
   "Template": {
-    "group": "Brand Components",
-    "title": "Template"
+    "kind": "Components",
+    "story": "Template"
   }
 }
diff --git a/packages/core/stories/principles/Accessibility.stories.mdx b/packages/core/stories/principles/Accessibility.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import generateTitle from '../util/generateTitle';
 
-<Meta title="Design Principles/Guidelines/Accessibility" />
+<Meta title={generateTitle('Accessibility')} />
 
 # Accessibility
 

diff --git a/packages/core/stories/styles/index.scss b/packages/core/stories/styles/index.scss
@@ -77,7 +77,7 @@ small {
 .ma__section-links {
   height: 100%;
   &__title {
-    margin-bottom: 0;
+    /*margin-bottom: 0;*/
   }
 }
 
@@ -146,4 +146,4 @@ p.lang-label {
 	line-height: 1.5;
 	margin-block-start: 0;
   margin-block-end: 0;
-}
+}
diff --git a/packages/core/stories/tokens/icons/Icon.stories.js b/packages/core/stories/tokens/icons/Icon.stories.js
@@ -36,6 +36,6 @@ Icons.argTypes = {
 
 
 export default {
-  title: generateTitle('Icons'),
+  title: generateTitle('Icon'),
   component: Icons
 };
diff --git a/packages/core/stories/util/generateTitle.js b/packages/core/stories/util/generateTitle.js
@@ -1,3 +1,10 @@
+import { IconArrow } from '@massds/mayflower-react';
+import LinkTo from '@storybook/addon-links/react';
+
 import meta from '../meta.json';
 
-export default (title) => `${meta.[title].group}/${meta.[title].title}`;
+export default (title) => `${meta.[title].kind}/${meta.[title].story}`;
+
+export const StoryLink = ({ metaID, text, inline }) => (
+  <LinkTo {...meta[metaID]} target='_blank'>{text || meta[metaID].story} {!inline && <IconArrow fill="#8AAAC7" height={11} width={11} />}</LinkTo>
+)