@madie/madie-design-system 1.0.0

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/Button/index.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const VARIANTS = ['secondary', 'outline', 'danger', 'white'];
+const SIZES = ['big'];
+
+const Button = ({
+  children,
+  className,
+  href,
+  loading,
+  onClick,
+  size,
+  variant,
+  type,
+  ...rest
+}) => {
+  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 (href) {
+    return (
+      <a
+        href={href}
+        data-testid="ds-btn"
+        className={btnClass || ''}
+        onClick={onClick}
+      >
+        {children}
+      </a>
+    );
+  }
+  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),
+};
+
+Button.defaultProps = {
+  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} />
+);
+
+TextButton.propTypes = {
+  className: PropTypes.string,
+};
+
+TextButton.defaultProps = {
+  className: '',
+};
+
+export default 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/CalloutBox/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FeatherIcon from 'feather-icons-react';
+
+import Button from '../Button';
+
+const getCtaButton = (button) => {
+  if (button) {
+    if (React.isValidElement(button)) {
+      return button;
+    }
+    if (button.href) {
+      const { href, text, ...restLink } = button;
+      return (
+        <a
+          className="qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after"
+          href={href}
+          {...restLink}
+        >
+          {text}
+          <FeatherIcon icon="chevron-right" />
+        </a>
+      );
+    }
+    const { onClick, text, ...restButton } = button;
+    return (
+      <Button
+        variant="secondary"
+        className="qpp-c-button--icon-after"
+        onClick={onClick}
+        {...restButton}
+      >
+        {text}
+        <FeatherIcon icon="chevron-right" />
+      </Button>
+    );
+  }
+  return null;
+};
+
+const CalloutBox = ({
+  title,
+  description,
+  button,
+  input,
+  children,
+  headerLevel,
+}) => {
+  const Header = `h${headerLevel}`;
+  return (
+    <aside className="qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70">
+      {title && (
+        <Header className="qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular">
+          {title}
+        </Header>
+      )}
+      {description && (
+        <p className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {description}
+        </p>
+      )}
+      {children && (
+        <div className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
+          {children}
+        </div>
+      )}
+      {(input || button) && (
+        <div className="qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24">
+          {input && (
+            <input
+              className="qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100"
+              type="text"
+              {...input}
+            />
+          )}
+          {getCtaButton(button)}
+        </div>
+      )}
+    </aside>
+  );
+};
+
+CalloutBox.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  button: PropTypes.shape({
+    text: PropTypes.string,
+    onClick: PropTypes.func,
+    href: PropTypes.string,
+  }),
+  input: PropTypes.shape({
+    value: PropTypes.string,
+    name: PropTypes.string,
+    id: PropTypes.string,
+  }),
+  children: PropTypes.node,
+  headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+};
+
+CalloutBox.defaultProps = {
+  title: null,
+  description: null,
+  button: null,
+  input: null,
+  children: null,
+  headerLevel: 2,
+};
+
+export default CalloutBox;

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>
+);