@madie/madie-design-system 1.0.2 → 1.0.3

package/components/CalloutBox/CalloutBox.stories.js

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

@@ -1,109 +1,109 @@
-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";
 
-import Button from '../Button';
+import Button from "../Button";
 
 const getCtaButton = (button) => {
-  if (button) {
-    if (React.isValidElement(button)) {
-      return 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>
+        );
     }
-    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;
+    return null;
 };
 
 const CalloutBox = ({
-  title,
-  description,
-  button,
-  input,
-  children,
-  headerLevel,
+    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>
-  );
+    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]),
+    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,
+    title: null,
+    description: null,
+    button: null,
+    input: null,
+    children: null,
+    headerLevel: 2,
 };
 
 export default CalloutBox;