@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Breadcrumb/index.js

@@ -1,83 +1,92 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 const Breadcrumb = ({
-  breadcrumbClass,
-  crumbs,
-  dark,
-  RouterLink,
-  routerExcludedLinks,
+    breadcrumbClass,
+    crumbs,
+    dark,
+    RouterLink,
+    routerExcludedLinks,
 }) => {
-  return (
-    <nav
-      className={`qpp-c-breadcrumbs ${
-        !dark ? 'qpp-c-breadcrumbs--light' : ''
-      } ${breadcrumbClass}`}
-      aria-label="Breadcrumbs"
-    >
-      <ol className="qpp-c-breadcrumbs__list">
-        {crumbs.map((crumb, i) => {
-          if (crumb.url) {
-            if (RouterLink && !routerExcludedLinks.includes(crumb.url)) {
-              return (
-                <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
-                  <RouterLink
-                    className="qpp-c-breadcrumbs__link"
-                    to={crumb.url}
-                    data-track-category={crumb.category}
-                    data-track-action="Click"
-                    data-track-label={crumb.label}
-                  >
-                    <span>{crumb.title}</span>
-                  </RouterLink>
-                </li>
-              );
-            }
-            return (
-              <li className="qpp-c-breadcrumbs__list-item" key={crumb.title}>
-                <a
-                  className="qpp-c-breadcrumbs__link"
-                  href={crumb.url}
-                  data-track-category={crumb.category}
-                  data-track-action="Click"
-                  data-track-label={crumb.label}
-                >
-                  <span>{crumb.title}</span>
-                </a>
-              </li>
-            );
-          } else {
-            return (
-              <li
-                key={crumb}
-                className={`${
-                  i === crumbs.length - 1 ? 'sr-only' : ''
-                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
-                aria-current="page"
-              >
-                <span>{crumb}</span>
-              </li>
-            );
-          }
-        })}
-      </ol>
-    </nav>
-  );
+    return (
+        <nav
+            className={`qpp-c-breadcrumbs ${
+                !dark ? "qpp-c-breadcrumbs--light" : ""
+            } ${breadcrumbClass}`}
+            aria-label="Breadcrumbs"
+        >
+            <ol className="qpp-c-breadcrumbs__list">
+                {crumbs.map((crumb, i) => {
+                    if (crumb.url) {
+                        if (
+                            RouterLink &&
+                            !routerExcludedLinks.includes(crumb.url)
+                        ) {
+                            return (
+                                <li
+                                    className="qpp-c-breadcrumbs__list-item"
+                                    key={crumb.title}
+                                >
+                                    <RouterLink
+                                        className="qpp-c-breadcrumbs__link"
+                                        to={crumb.url}
+                                        data-track-category={crumb.category}
+                                        data-track-action="Click"
+                                        data-track-label={crumb.label}
+                                    >
+                                        <span>{crumb.title}</span>
+                                    </RouterLink>
+                                </li>
+                            );
+                        }
+                        return (
+                            <li
+                                className="qpp-c-breadcrumbs__list-item"
+                                key={crumb.title}
+                            >
+                                <a
+                                    className="qpp-c-breadcrumbs__link"
+                                    href={crumb.url}
+                                    data-track-category={crumb.category}
+                                    data-track-action="Click"
+                                    data-track-label={crumb.label}
+                                >
+                                    <span>{crumb.title}</span>
+                                </a>
+                            </li>
+                        );
+                    } else {
+                        return (
+                            <li
+                                key={crumb}
+                                className={`${
+                                    i === crumbs.length - 1 ? "sr-only" : ""
+                                } qpp-c-breadcrumbs__list-itemqpp-c-breadcrumbs__list-item--current`}
+                                aria-current="page"
+                            >
+                                <span>{crumb}</span>
+                            </li>
+                        );
+                    }
+                })}
+            </ol>
+        </nav>
+    );
 };
 
 Breadcrumb.propTypes = {
-  breadcrumbClass: PropTypes.string,
-  crumbs: PropTypes.array.isRequired,
-  dark: PropTypes.bool,
-  RouterLink: PropTypes.func,
-  routerExcludedLinks: PropTypes.array,
+    breadcrumbClass: PropTypes.string,
+    crumbs: PropTypes.array.isRequired,
+    dark: PropTypes.bool,
+    RouterLink: PropTypes.func,
+    routerExcludedLinks: PropTypes.array,
 };
 
 Breadcrumb.defaultProps = {
-  breadcrumbClass: '',
-  dark: false,
-  RouterLink: null,
-  routerExcludedLinks: [],
+    breadcrumbClass: "",
+    dark: false,
+    RouterLink: null,
+    routerExcludedLinks: [],
 };
 
 export default Breadcrumb;

package/components/Button/Button.stories.js

@@ -1,121 +1,127 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withKnobs } from '@storybook/addon-knobs';
-import FeatherIcon from 'feather-icons-react';
+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';
+import Button, { TextButton } from "./index";
 
 export default {
-  title: 'Button',
-  component: Button,
-  decorators: [withKnobs],
+    title: "Button",
+    component: Button,
+    decorators: [withKnobs],
 };
 
-const Container = ({ className = '', children }) => (
-  <div className={`qppds qpp-u-padding--16 ${className}`}>{children}</div>
+const Container = ({ className = "", children }) => (
+    <div className={`qppds qpp-u-padding--16 ${className}`}>{children}</div>
 );
 Container.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
+    className: PropTypes.string,
+    children: PropTypes.node,
 };
 
 export const Primary = () => (
-  <Container>
-    <Button>Button</Button>
-  </Container>
+    <Container>
+        <Button>Button</Button>
+    </Container>
+);
+
+export const Cyan = () => (
+    <Container>
+        <Button className="qpp-c-button--cyan">Button</Button>
+    </Container>
 );
 
 export const Secondary = () => (
-  <Container>
-    <Button variant="secondary">Button</Button>
-  </Container>
+    <Container>
+        <Button variant="secondary">Button</Button>
+    </Container>
 );
 
 export const Danger = () => (
-  <Container>
-    <Button variant="danger">Button</Button>
-  </Container>
+    <Container>
+        <Button variant="danger">Button</Button>
+    </Container>
 );
 
 export const Outline = () => (
-  <Container className="qpp-u-fill--blue-80">
-    <Button variant="outline">Button</Button>
-  </Container>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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';
+TextButtonStory.storyName = "Text Button";

package/components/Button/index.js

@@ -1,90 +1,90 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
-const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
-const SIZES = ['big'];
+const VARIANTS = ["secondary", "outline", "danger", "white"];
+const SIZES = ["big"];
 
 const Button = ({
-  children,
-  className,
-  href,
-  loading,
-  onClick,
-  size,
-  variant,
-  type,
-  ...rest
+    children,
+    className,
+    href,
+    loading,
+    onClick,
+    size,
+    variant,
+    type,
+    ...rest
 }) => {
-  let btnClass = 'qpp-c-button';
+    let btnClass = "qpp-c-button";
 
-  if (VARIANTS.includes(variant)) {
-    btnClass = btnClass.concat(' ', `qpp-c-button--${variant}`);
-  }
-  if (SIZES.includes(size)) {
-    btnClass = btnClass.concat(' ', `qpp-c-button--${size}`);
-  }
-  if (className) {
-    btnClass = btnClass.concat(' ', className);
-  }
+    if (VARIANTS.includes(variant)) {
+        btnClass = btnClass.concat(" ", `qpp-c-button--${variant}`);
+    }
+    if (SIZES.includes(size)) {
+        btnClass = btnClass.concat(" ", `qpp-c-button--${size}`);
+    }
+    if (className) {
+        btnClass = btnClass.concat(" ", className);
+    }
 
-  if (href) {
+    if (href) {
+        return (
+            <a
+                href={href}
+                data-testid="ds-btn"
+                className={btnClass || ""}
+                onClick={onClick}
+            >
+                {children}
+            </a>
+        );
+    }
     return (
-      <a
-        href={href}
-        data-testid="ds-btn"
-        className={btnClass || ''}
-        onClick={onClick}
-      >
-        {children}
-      </a>
+        <button
+            data-testid="ds-btn"
+            className={btnClass || ""}
+            onClick={onClick}
+            disabled={loading}
+            type={type}
+            {...rest}
+        >
+            {children}
+        </button>
     );
-  }
-  return (
-    <button
-      data-testid="ds-btn"
-      className={btnClass || ''}
-      onClick={onClick}
-      disabled={loading}
-      type={type}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
 };
 
 Button.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  href: PropTypes.string,
-  loading: PropTypes.bool,
-  onClick: PropTypes.func,
-  size: PropTypes.oneOf(SIZES),
-  type: PropTypes.string,
-  variant: PropTypes.oneOf(VARIANTS),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+    loading: PropTypes.bool,
+    onClick: PropTypes.func,
+    size: PropTypes.oneOf(SIZES),
+    type: PropTypes.string,
+    variant: PropTypes.oneOf(VARIANTS),
 };
 
 Button.defaultProps = {
-  children: false,
-  className: '',
-  href: '',
-  loading: false,
-  onClick: () => null,
-  size: null,
-  type: 'button',
-  variant: null,
+    children: false,
+    className: "",
+    href: "",
+    loading: false,
+    onClick: () => null,
+    size: null,
+    type: "button",
+    variant: null,
 };
 
-export const TextButton = ({ className = '', ...props }) => (
-  <Button className={`qpp-c-button--text ${className}`} {...props} />
+export const TextButton = ({ className = "", ...props }) => (
+    <Button className={`qpp-c-button--text ${className}`} {...props} />
 );
 
 TextButton.propTypes = {
-  className: PropTypes.string,
+    className: PropTypes.string,
 };
 
 TextButton.defaultProps = {
-  className: '',
+    className: "",
 };
 
 export default Button;