qpp-style 1.8.2-rm.0 → 1.8.3-rm.0

package/.eslintrc.js

@@ -1,31 +1,31 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
-  parser: '@babel/eslint-parser',
-  parserOptions: {
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    parser: 'babel-eslint',
+    parserOptions: {
+        sourceType: 'module',
+        ecmaFeatures: {
+            jsx: true
+        }
     },
-  },
-  env: {
-    es6: true,
-    node: true,
-    browser: true,
-    jquery: true,
-    mocha: true,
-  },
-  rules: {
-    'no-unused-vars': [
-      'error',
-      {
-        args: 'none',
-      },
-    ],
-    'linebreak-style': ['error', 'unix'],
-    'no-console': 0,
-    'no-prototype-builtins': [0],
-  },
-  settings: {
-    react: { version: 'detect' },
-  },
+    env: {
+        es6: true,
+        node: true,
+        browser: true,
+        jquery: true,
+        mocha: true
+    },
+    rules: {
+        'no-unused-vars': [
+            'error',
+            {
+                args: 'none'
+            }
+        ],
+        'linebreak-style': ['error', 'unix'],
+        'no-console': 0,
+        'no-prototype-builtins': [0]
+    },
+    settings: {
+        react: { version: 'detect' }
+    }
 };

package/.storybook/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-react", "@babel/preset-env"],
+    "plugins": ["transform-class-properties"]
+}

package/.storybook/main.js

@@ -0,0 +1,86 @@
+const path = require('path');
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  stories: [
+    '../components/**/*.stories.@(js|jsx|mdx)',
+    '../lib/**/*.stories.@(js|jsx|mdx)',
+  ],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-backgrounds',
+    '@storybook/addon-viewport',
+    '@storybook/addon-postcss',
+  ],
+  webpackFinal: async (config) => {
+    // do mutation to the config
+    config.plugins.push(
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'fonts/'),
+            to: 'fonts/',
+          },
+          {
+            from: path.join(__dirname, '..', '..', 'shared', 'images/'),
+            to: 'images/',
+            force: true,
+          },
+        ],
+      })
+    );
+    config.module.rules.push({
+      test: /\.scss$/,
+      resolve: {
+        extensions: ['.scss', '.sass'],
+      },
+      use: [
+        {
+          loader: 'style-loader',
+        },
+        {
+          loader: 'css-loader',
+          options: {
+            sourceMap: true,
+            importLoaders: 1,
+          },
+        },
+        {
+          loader: 'sass-loader',
+          options: {
+            sourceMap: true,
+          },
+        },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: ['@svgr/webpack'],
+    });
+
+    const staticAssetLoader = config.module.rules.find((rule) => {
+      const regExp = rule.test;
+      const isRegExp = regExp && typeof regExp.test === 'function';
+      return isRegExp && regExp.test('.svg');
+    });
+
+    if (staticAssetLoader) {
+      // remove svg matching from storybook's default static asset loader
+      staticAssetLoader.test =
+        /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
+    }
+
+    return config;
+  },
+  core: {
+    builder: 'webpack5',
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!--
+  Boottrap navbar and dropdowns used by <Header> component require jQuery
+  TODO: <Header> should be refactored to no longer rely on bootstrap.
+-->
+<script
+  src="https://code.jquery.com/jquery-3.5.1.min.js"
+  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+  crossorigin="anonymous"
+></script>

package/.storybook/preview.js

@@ -0,0 +1,5 @@
+import '../../shared/styles/_main.scss';
+
+export const parameters = {
+  layout: 'fullscreen',
+};

package/README.md

@@ -2,10 +2,11 @@
 
 This directory contains react implementations of the components for QPP.
 
-## Github Branch and Pull Request process
+A storybook with examples is published at [https://cmsgov.github.io/qpp-style](https://cmsgov.github.io/qpp-style)
 
+## Github Branch and Pull Request process
 1. Create branch off main and create a Pull Request into main for the feature.
-   > Example Branch Name: feature/QPPXX-XXXX_make_icon_better
+>Example Branch Name: feature/QPPXX-XXXX_make_icon_better
 2. Once merged into main, create release branch from main.
 3. Name the new branch release/x.xx.x
 4. Run the version bump:
@@ -16,15 +17,13 @@ npm version --no-git-tag-version patch
 ```
 
 Example Commit Message:
-
 > x.xx.x release
 
 5. Create a pull request against main with the PR Title: x.xx.x release [Example PR](https://github.com/CMSgov/qpp-style/pull/1065)
 6. Enter the change in the description of the pull request i.e.:
-   > Added new svg for Icon Name
+> Added new svg for Icon Name
 
 ## Generate an NPM token with Publish permissions
-
 1. If you do not already have an access token, sign in to npmjs.com and navigate to access tokens.
 2. Click generate new token.
 3. Select publish under type.
@@ -35,11 +34,9 @@ export NPM_TOKEN={npm_token}
 ```
 
 ## Publish the react qpp-style npm package (used by both react and angular)
-
 ```bash
 cd qpp-style/react
 npm i
 npm publish
 ```
-
 7. Once published successfully, merge into main.

package/components/Breadcrumb/Breadcrumb.stories.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Breadcrumb from './index';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Breadcrumb',
+  component: Breadcrumb,
+  decorators: [withKnobs],
+};
+
+export const ExampleLightBreadcrumb = () => (
+  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
+    <Breadcrumb
+      newBreadcrumb={boolean('newBreadcrumb', true)}
+      crumbs={[
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Home',
+          title: 'Home',
+        },
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Mips Overview',
+          title: 'Mips Overview',
+        },
+      ]}
+    />
+  </div>
+);
+
+ExampleLightBreadcrumb.storyName = 'Light';
+
+export const ExampleScreenreaderOnlyBreadcrumb = () => (
+  <div className="qppds qpp-u-padding--16 qpp-u-fill--blue-80">
+    <Breadcrumb
+      newBreadcrumb={boolean('newBreadcrumb', true)}
+      crumbs={[
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Home',
+          title: 'Home',
+        },
+        'Mips Overview',
+      ]}
+    />
+  </div>
+);
+ExampleScreenreaderOnlyBreadcrumb.storyName = 'SR Only Breadcrumb';
+
+export const ExampleDarkBreadcrumb = () => (
+  <div className="qppds qpp-u-padding--16">
+    <Breadcrumb
+      newBreadcrumb={boolean('newBreadcrumb', true)}
+      dark
+      crumbs={[
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Home',
+          title: 'Home',
+        },
+        {
+          url: '/',
+          category: 'MainContent',
+          label: 'Mips Overview',
+          title: 'Mips Overview',
+        },
+      ]}
+    />
+  </div>
+);
+
+ExampleDarkBreadcrumb.storyName = 'Dark';

package/components/Button/Button.stories.js

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withKnobs } from '@storybook/addon-knobs';
+import FeatherIcon from 'feather-icons-react';
+
+import Button, { TextButton } from './index';
+
+export default {
+  title: 'Button',
+  component: Button,
+  decorators: [withKnobs],
+};
+
+const Container = ({ className = '', children }) => (
+  <div className={`qppds qpp-u-padding--16 ${className}`}>{children}</div>
+);
+Container.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+export const Primary = () => (
+  <Container>
+    <Button>Button</Button>
+  </Container>
+);
+
+export const Secondary = () => (
+  <Container>
+    <Button variant="secondary">Button</Button>
+  </Container>
+);
+
+export const Danger = () => (
+  <Container>
+    <Button variant="danger">Button</Button>
+  </Container>
+);
+
+export const Outline = () => (
+  <Container className="qpp-u-fill--blue-80">
+    <Button variant="outline">Button</Button>
+  </Container>
+);
+
+export const White = () => (
+  <Container className="qpp-u-fill--blue-80">
+    <Button variant="white">Button</Button>
+  </Container>
+);
+
+export const Icon = () => (
+  <Container>
+    <Button>
+      Icon Button <FeatherIcon icon="chevron-right" />
+    </Button>
+    <hr />
+    <Button variant="secondary">
+      <FeatherIcon icon="download" /> Icon Button
+    </Button>
+    <hr />
+    <Button variant="danger">
+      Icon Button <FeatherIcon icon="chevron-right" />
+    </Button>
+    <hr />
+    <Button variant="white">
+      Icon Button <FeatherIcon icon="chevron-right" />
+    </Button>
+  </Container>
+);
+
+export const Big = () => (
+  <Container>
+    <Button size="big">Big Primary Button</Button>
+    <hr />
+    <Button size="big" variant="secondary">
+      Big Secondary Button
+    </Button>
+  </Container>
+);
+
+export const Link = () => (
+  <Container>
+    <Button href="https://qpp.cms.gov/">Link Button</Button>
+    <hr />
+    <Button href="https://qpp.cms.gov/" variant="secondary">
+      SecondaryLink Button
+    </Button>
+    <hr />
+    <Button href="https://qpp.cms.gov/" variant="danger">
+      Danger Link Button
+    </Button>
+    <hr />
+    <div className="qpp-u-fill--gray-60 qpp-u-padding--8">
+      <Button href="https://qpp.cms.gov/" variant="white">
+        White Link Button
+      </Button>
+    </div>
+  </Container>
+);
+
+export const TextButtonStory = () => (
+  <Container>
+    <TextButton>Button</TextButton>
+    <hr />
+    <TextButton variant="danger">Button</TextButton>
+    <hr />
+    <div className="qpp-u-fill--gray-60 qpp-u-padding--8">
+      <TextButton variant="white">Button</TextButton>
+    </div>
+    <hr />
+    <TextButton>
+      <FeatherIcon icon="download" /> Icon Button
+    </TextButton>
+    <hr />
+    <TextButton>
+      Icon Button <FeatherIcon icon="chevron-right" />
+    </TextButton>
+  </Container>
+);
+TextButtonStory.storyName = 'Text Button';

package/components/CalloutBox/CalloutBox.stories.js

@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import CalloutBox from './index';
+
+export default {
+  title: 'CalloutBox',
+  component: CalloutBox,
+  decorators: [withKnobs],
+};
+
+export const Default = () => {
+  return (
+    <div className="qpp-u-padding--12" style={{ maxWidth: '80ch' }}>
+      <CalloutBox
+        title="Call to Action Heading"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+        button={{
+          text: 'Call to Action',
+          onClick: () => console.log('cta clicked'),
+        }}
+      />
+    </div>
+  );
+};
+
+export const WithHref = () => {
+  return (
+    <div className="qpp-u-padding--12" style={{ maxWidth: '80ch' }}>
+      <CalloutBox
+        title="Call to Action Heading"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+        button={{
+          text: 'Call to Action',
+          href: 'https://example.com',
+        }}
+      />
+    </div>
+  );
+};
+
+export const WithTextInput = () => {
+  const [value, setValue] = useState('');
+  return (
+    <div className="qpp-u-padding--12" style={{ maxWidth: '80ch' }}>
+      <CalloutBox
+        title="Call to Action Heading"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+        input={{
+          placeholder: 'Placeholder',
+          onChange: (e) => setValue(e.target.value),
+          value,
+        }}
+        button={{
+          text: 'Call to Action',
+          onClick: () => {
+            console.log('cta clicked');
+            console.log('input value --- ', value);
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export const WithHeaderLevel = () => {
+  return (
+    <div className="qpp-u-padding--12" style={{ maxWidth: '80ch' }}>
+      <CalloutBox
+        title="H5 Heading"
+        headerLevel={5}
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        button={{
+          text: 'Call to Action',
+          href: 'https://example.com',
+        }}
+      />
+    </div>
+  );
+};
+
+export const WithButtonOverride = () => {
+  const Button = () => <button>My custom button</button>;
+  return (
+    <div className="qpp-u-padding--12" style={{ maxWidth: '80ch' }}>
+      <CalloutBox
+        title="H5 Heading"
+        headerLevel={5}
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        button={<Button />}
+      />
+    </div>
+  );
+};

package/components/Card/Card.stories.js

@@ -0,0 +1,163 @@
+import React from 'react';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import Card from './index';
+
+export default {
+  title: 'Card',
+  component: Card,
+  decorators: [withKnobs],
+};
+
+export const Default = () => {
+  return (
+    <div className="qpp-u-padding--12 qpp-u-width--33">
+      <Card
+        title="Card Heading"
+        eyebrow="Eyebrow"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+        cta={{
+          text: 'Call to Action',
+          href: '#',
+        }}
+      />
+    </div>
+  );
+};
+
+export const CustomButton = () => (
+  <div className="qpp-u-padding--12 qpp-u-width--33">
+    <Card
+      title="Card Heading"
+      eyebrow="Eyebrow"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      cta={
+        <button
+          className="qpp-c-button"
+          onClick={() => console.log("I've been clicked")}
+          style={{
+            padding: '0.75rem 1rem',
+          }}
+        >
+          Click me
+        </button>
+      }
+    />
+  </div>
+);
+
+export const Image = () => (
+  <div className="qpp-u-padding--12 qpp-u-width--33">
+    <Card
+      title="Card Heading"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      eyebrow="Eyebrow"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png',
+        alt: 'Card image alt',
+      }}
+    />
+  </div>
+);
+
+export const SmallImageCard = () => (
+  <div className="qpp-u-padding--12 wrap qpp-u-width--25">
+    <Card
+      title="Card Heading"
+      eyebrow="Eyebrow"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      size="small"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png',
+        alt: 'Card image alt',
+      }}
+    />
+  </div>
+);
+
+export const MediumImageCard = () => (
+  <div className="qpp-u-padding--12 wrap qpp-u-width--33">
+    <Card
+      title="Card Heading"
+      eyebrow="Eyebrow"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      size="medium"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png',
+        alt: 'Card image alt',
+      }}
+    />
+  </div>
+);
+
+export const LargeImageCard = () => (
+  <div className="qpp-u-padding--12 wrap qpp-u-width--100">
+    <Card
+      title="Card Heading"
+      eyebrow="Eyebrow"
+      variant="flag"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      size="large"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png',
+        alt: 'Card image alt',
+      }}
+    />
+  </div>
+);
+
+export const ResponsiveFlagCard = () => (
+  <div className="qpp-u-padding--12 wrap qpp-u-width--100">
+    <Card
+      title="Card Heading"
+      eyebrow="Eyebrow"
+      responsive
+      variant="flag"
+      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet justo et lacus lacinia tristique. Nulla dignissim ipsum sit amet posuere interdum."
+      size="large"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-data-submission-mips.png',
+        alt: 'Card image alt',
+      }}
+    />
+  </div>
+);
+
+export const BackgroundImageCard = () => (
+  <div className="qpp-u-padding--12 wrap qpp-u-width--33">
+    <Card
+      className="qpp-c-card--medium qpp-c-card--image qpp-c-xs-card--flag qpp-c-sm-card--default qpp-u-flex--auto qpp-u-sm-flex--1"
+      title="QPP Access User Guide"
+      description="Download zip file"
+      cta={{
+        text: 'Call to Action',
+        href: '#',
+      }}
+      img={{
+        url: 'https://qpp.cms.gov/images/public/images/resource-pdf.png',
+        alt: 'Card image alt',
+        useBgImage: true,
+      }}
+    />
+  </div>
+);