Merge pull request #81 from MetroStar/CSG-771

CSG-771: Add Welcome Page and Style Guide to Comet Storybook

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     '../packages/comet-uswds/src/**/*.stories.@(tsx|mdx)',
     '../packages/comet-data-viz/src/**/*.stories.@(tsx|mdx)',
     '../packages/comet-extras/src/**/*.stories.@(tsx|mdx)',
+    '../packages/comet-uswds/src/**/*.mdx',
   ],
   addons: [
     getAbsolutePath('@storybook/addon-links'),

.storybook/preview.js

@@ -8,4 +8,16 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  options: {
+    storySort: {
+      order: [
+        'Welcome',
+        'Style Guide',
+        ['Colors', 'Typography', 'Icons'],
+        'USWDS',
+        'Extras',
+        'Data Viz',
+      ],
+    },
+  },
 };

packages/comet-uswds/src/style-guide/Colors.mdx

@@ -0,0 +1,25 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+
+<Meta title="Style Guide/Colors" />
+
+# Colors
+
+<ColorPalette>
+  <ColorItem title="theme-color-primary" subtitle="Primary" colors={{ primary: '#005ea2' }} />
+  <ColorItem title="theme-color-secondary" subtitle="Secondary" colors={{ secondary: '#d83933' }} />
+  <ColorItem
+    title="theme-color-base"
+    subtitle="Base"
+    colors={{
+      white: '#ffffff',
+      'base-lightest': '#f0f0f0',
+      'base-lighter': '#dfe1e2',
+      'base-light': '#a9aeb1',
+      base: '#71767a',
+      'base-dark': '#565c65',
+      'base-darker': '#3d4551',
+      'base-darkest': '#1b1b1b',
+      Black: '#000000',
+    }}
+  />
+</ColorPalette>

packages/comet-uswds/src/style-guide/Icons.mdx

@@ -0,0 +1,7 @@
+import { Meta, Title } from '@storybook/blocks';
+
+<Meta title="Style Guide/Icons" />
+
+# Icons
+
+Comet provides USWDS icons as a React component. Examples can be found <a href="/?path=/docs/uswds-icon--docs">here</a>.

packages/comet-uswds/src/style-guide/Typography.mdx

@@ -0,0 +1,50 @@
+import { Meta, Typeset } from '@storybook/blocks';
+
+<Meta title="Style Guide/Typography" />
+
+export const typography = {
+  type: {
+    primary: "'Source Sans Pro','Helvetica Neue', 'Helvetica', 'Roboto', 'Arial', sans-serif",
+  },
+  weight: {
+    light: '300',
+    normal: '400',
+    bold: '700',
+  },
+  size: {
+    '3xs': 12,
+    '2xs': 14,
+    xs: 16,
+    sm: 17,
+    md: 18,
+    lg: 24,
+    xl: 32,
+    '2xl': 40,
+    '3xl': 56,
+  },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typography
+
+**Font:** Source Sans Pro
+
+**Weights:** 300(light), 400(normal), 700(bold)
+
+<Typeset
+  fontSizes={[
+    Number(typography.size['3xs']),
+    Number(typography.size['2xs']),
+    Number(typography.size.xs),
+    Number(typography.size.sm),
+    Number(typography.size.md),
+    Number(typography.size.lg),
+    Number(typography.size.xl),
+    Number(typography.size['2xl']),
+    Number(typography.size['3xl']),
+  ]}
+  fontWeight={typography.weight.normal}
+  sampleText={SampleText}
+  fontFamily={typography.type.primary}
+/>

packages/comet-uswds/src/style-guide/Welcome.mdx

@@ -0,0 +1,92 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Welcome" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Welcome to Comet!
+
+    Comet is a React with TypeScript Component Library based on USWDS.
+
+    Comet was built with a primary focus on USWDS, however it has become more of a framework for React Apps that require USWDS, as well as other functionality (charts, custom components, etc). In the end, we hope to provide a set of modular tools to accelerate developer productivity and simplify the use of Design Systems, particularly USWDS.
+
+  </div>
+  <div className="sb-section">
+    <div className="sb-section-item">
+      <h4 className="sb-section-item-heading">USWDS</h4>
+      <p className="sb-section-item-paragraph">The base USWDS component library is implemented in React with TypeScript.</p>
+    </div>
+    <div className="sb-section-item">
+      <h4 className="sb-section-item-heading">Extras</h4>
+      <p className="sb-section-item-paragraph">A set of custom components, intended to fill in the gaps where USWDS does not provide an implementation.</p>
+    </div>
+    <div className="sb-section-item">
+      <div>
+        <h4 className="sb-section-item-heading">Data Viz</h4>
+        <p className="sb-section-item-paragraph">A set of Victory Chart components is provided as a Comet wrapper.</p>
+      </div>
+    </div>
+  </div>
+   <div className="sb-section">
+    <div className="sb-section-item">
+      <h3 className="sb-section-item-heading">Getting Started</h3>
+      <p className="sb-section-item-paragraph">
+        Please review the following repo for details on getting started:
+        <a href="https://github.com/MetroStar/comet" target="_blank">Comet Component Library</a>
+      </p>
+    </div>
+  </div>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  @media screen and (max-width: 800px) {
+
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+  }
+  `}
+</style>