Add Text and Heading components (#785)

user-interviews · Dec 8, 2022 · eb8e00a · eb8e00a
1 parent 1795741
commit eb8e00a
Show file tree

Hide file tree

Showing 14 changed files with 803 additions and 0 deletions.
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -7343,6 +7343,190 @@ exports[`Storyshots Components/Form Elements/RadioButtonGroup Row 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Heading Alignment 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": "left",
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": "center",
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": "right",
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+</div>
+`;
+
+exports[`Storyshots Components/Heading Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+</div>
+`;
+
+exports[`Storyshots Components/Heading Levels 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h1>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+  <h3
+    className="Heading Heading--xl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h3>
+  <h4
+    className="Heading Heading--lg Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h4>
+  <h5
+    className="Heading Heading--md Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h5>
+  <h6
+    className="Heading Heading--sm Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h6>
+  <h6
+    className="Heading Heading--xs Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h6>
+</div>
+`;
+
+exports[`Storyshots Components/Heading Weights 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+  <h2
+    className="Heading Heading--xxl Heading--medium"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+  <h2
+    className="Heading Heading--xxl Heading--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    The fastest way to recruit research participants
+  </h2>
+</div>
+`;
+
 exports[`Storyshots Components/IconCell Default 1`] = `
 <div
   style={
@@ -20504,6 +20688,150 @@ exports[`Storyshots Components/Tabs Uncontrolled 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Text Alignment 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": "left",
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": "center",
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": "right",
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Components/Text Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Components/Text Sizes 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <p
+    className="Text Text--lg Text--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--sm Text--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+</div>
+`;
+
+exports[`Storyshots Components/Text Weight 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <p
+    className="Text Text--md Text--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--md Text--medium"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+  <p
+    className="Text Text--md Text--regular"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Source from a pool of more than 2.1 million participants to reach nearly any target audience.
+  </p>
+</div>
+`;
+
 exports[`Storyshots Components/Toast Manual Dismiss Toast 1`] = `
 <div
   style={

diff --git a/src/Heading/Heading.jsx b/src/Heading/Heading.jsx
@@ -0,0 +1,49 @@
+import { createElement } from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+
+import { HEADING_PROPS } from './Heading.types';
+import './Heading.scss';
+
+const Heading = ({
+  children,
+  className,
+  level,
+  size,
+  textAlign,
+  weight,
+  ...props
+}) => createElement(
+    `h${level}`,
+    {
+      style: { textAlign },
+      className: classNames(
+        className,
+        'Heading',
+        {
+          [`Heading--${size}`]: !!size,
+          [`Heading--${weight}`]: !!weight,
+        },
+      ),
+      ...props,
+    }, children,
+);
+
+Heading.propTypes = {
+  className: PropTypes.string,
+  level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+  size: PropTypes.string,
+  textAlign: PropTypes.string,
+  weight: PropTypes.string,
+};
+
+Heading.defaultProps = {
+  className: undefined,
+  level: 2,
+  size: 'xxl',
+  textAlign: undefined,
+  weight: HEADING_PROPS.weight.bold,
+};
+
+export default Heading;