@madie/madie-design-system 1.0.2 → 1.0.3

package/components/Card/Card.stories.js

@@ -1,163 +1,163 @@
-import React from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import React from "react";
+import { withKnobs } from "@storybook/addon-knobs";
 
-import Card from './index';
+import Card from "./index";
 
 export default {
-  title: 'Card',
-  component: Card,
-  decorators: [withKnobs],
+    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>
-  );
+    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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
 );

package/components/Card/index.js

@@ -1,137 +1,144 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import FeatherIcon from 'feather-icons-react';
+import React from "react";
+import PropTypes from "prop-types";
+import FeatherIcon from "feather-icons-react";
 
 const Card = ({
-  children,
-  className,
-  cta,
-  description,
-  eyebrow,
-  img,
-  parentTag,
-  responsive,
-  routerComponent,
-  size,
-  title,
-  variant,
-}) => {
-  const classes = [
-    'qppds',
-    'qpp-c-card',
-    size && `qpp-c-card--${size}`,
-    img && 'qpp-c-card--image',
-    variant === 'flag' && responsive && 'qpp-c-xs-card--flag',
-    variant === 'flag' && !responsive && 'qpp-c-card--flag',
+    children,
     className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+    cta,
+    description,
+    eyebrow,
+    img,
+    parentTag,
+    responsive,
+    routerComponent,
+    size,
+    title,
+    variant,
+}) => {
+    const classes = [
+        "qppds",
+        "qpp-c-card",
+        size && `qpp-c-card--${size}`,
+        img && "qpp-c-card--image",
+        variant === "flag" && responsive && "qpp-c-xs-card--flag",
+        variant === "flag" && !responsive && "qpp-c-card--flag",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
 
-  const Container = parentTag || 'div';
-  const HeadingComponent = title?.headingLevel || 'h3';
-  const LinkComponent = routerComponent || 'a';
+    const Container = parentTag || "div";
+    const HeadingComponent = title?.headingLevel || "h3";
+    const LinkComponent = routerComponent || "a";
 
-  return (
-    <Container className={classes}>
-      <div className="qpp-c-card__content">
-        <div className="qpp-c-card__header">
-          {title && (
-            <HeadingComponent className="h3 qpp-c-card__title">
-              {typeof title === 'object' ? title.text : title}
-            </HeadingComponent>
-          )}
-          {eyebrow && <span className="l2 qpp-c-card__eyebrow">{eyebrow}</span>}
-        </div>
-        {description && (
-          <div className="qpp-c-card__body">
-            <p className="p1">{description}</p>
-          </div>
-        )}
-        {children && <div className="qpp-c-card__body">{children}</div>}
-        {cta && (
-          <div className="qpp-c-card__cta">
-            {React.isValidElement(cta) ? (
-              cta
-            ) : (
-              <LinkComponent
-                href={cta.href}
-                className="qpp-c-button qpp-c-button--text qpp-c-button--icon-after"
-                {...cta}
-              >
-                {cta.text} <FeatherIcon icon={cta.icon || 'chevron-right'} />
-              </LinkComponent>
-            )}
-          </div>
-        )}
-      </div>
-      {img &&
-        (() => {
-          const { useBgImage, url, alt, ...restImg } = img;
-          return (
-            <div className="qpp-c-card__media">
-              {useBgImage ? (
-                <div
-                  role="img"
-                  style={{ backgroundImage: `url(${url})` }}
-                  aria-label={alt}
-                  {...restImg}
-                />
-              ) : (
-                <img src={url} alt={alt} {...restImg} />
-              )}
+    return (
+        <Container className={classes}>
+            <div className="qpp-c-card__content">
+                <div className="qpp-c-card__header">
+                    {title && (
+                        <HeadingComponent className="h3 qpp-c-card__title">
+                            {typeof title === "object" ? title.text : title}
+                        </HeadingComponent>
+                    )}
+                    {eyebrow && (
+                        <span className="l2 qpp-c-card__eyebrow">
+                            {eyebrow}
+                        </span>
+                    )}
+                </div>
+                {description && (
+                    <div className="qpp-c-card__body">
+                        <p className="p1">{description}</p>
+                    </div>
+                )}
+                {children && <div className="qpp-c-card__body">{children}</div>}
+                {cta && (
+                    <div className="qpp-c-card__cta">
+                        {React.isValidElement(cta) ? (
+                            cta
+                        ) : (
+                            <LinkComponent
+                                href={cta.href}
+                                className="qpp-c-button qpp-c-button--text qpp-c-button--icon-after"
+                                {...cta}
+                            >
+                                {cta.text}{" "}
+                                <FeatherIcon
+                                    icon={cta.icon || "chevron-right"}
+                                />
+                            </LinkComponent>
+                        )}
+                    </div>
+                )}
             </div>
-          );
-        })()}
-    </Container>
-  );
+            {img &&
+                (() => {
+                    const { useBgImage, url, alt, ...restImg } = img;
+                    return (
+                        <div className="qpp-c-card__media">
+                            {useBgImage ? (
+                                <div
+                                    role="img"
+                                    style={{ backgroundImage: `url(${url})` }}
+                                    aria-label={alt}
+                                    {...restImg}
+                                />
+                            ) : (
+                                <img src={url} alt={alt} {...restImg} />
+                            )}
+                        </div>
+                    );
+                })()}
+        </Container>
+    );
 };
 
 Card.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  cta: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.shape({
-      href: PropTypes.string,
-      text: PropTypes.string,
-      icon: PropTypes.string,
-    }),
-  ]),
-  description: PropTypes.string,
-  eyebrow: PropTypes.string,
-  img: PropTypes.shape({
-    url: PropTypes.string,
-    alt: PropTypes.string,
-    useBgImage: PropTypes.bool,
-  }),
-  parentTag: PropTypes.string,
-  responsive: PropTypes.bool,
-  routerComponent: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({
-      text: PropTypes.string,
-      headingLevel: PropTypes.string,
+    children: PropTypes.node,
+    className: PropTypes.string,
+    cta: PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.shape({
+            href: PropTypes.string,
+            text: PropTypes.string,
+            icon: PropTypes.string,
+        }),
+    ]),
+    description: PropTypes.string,
+    eyebrow: PropTypes.string,
+    img: PropTypes.shape({
+        url: PropTypes.string,
+        alt: PropTypes.string,
+        useBgImage: PropTypes.bool,
     }),
-  ]),
-  variant: PropTypes.oneOf(['default', 'flag']),
+    parentTag: PropTypes.string,
+    responsive: PropTypes.bool,
+    routerComponent: PropTypes.func,
+    size: PropTypes.oneOf(["small", "medium", "large"]),
+    title: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.shape({
+            text: PropTypes.string,
+            headingLevel: PropTypes.string,
+        }),
+    ]),
+    variant: PropTypes.oneOf(["default", "flag"]),
 };
 
 Card.defaultProps = {
-  children: null,
-  className: null,
-  cta: null,
-  description: null,
-  eyebrow: null,
-  img: null,
-  parentTag: null,
-  responsive: false,
-  routerComponent: null,
-  size: null,
-  title: null,
-  variant: 'default',
+    children: null,
+    className: null,
+    cta: null,
+    description: null,
+    eyebrow: null,
+    img: null,
+    parentTag: null,
+    responsive: false,
+    routerComponent: null,
+    size: null,
+    title: null,
+    variant: "default",
 };
 
 export default Card;