Merge release/2.4.0 into main branch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "dependencies": {
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",

spec/__snapshots__/Storyshots.test.js.snap

@@ -9054,16 +9054,16 @@ Array [
 `;
 
 exports[`Storyshots Components/Heading Default 1`] = `
-<h2
-  className="Heading Heading--xxl Heading--bold"
+<h1
+  className="Heading Heading--xxxl Heading--bold"
   style={
     Object {
       "textAlign": undefined,
     }
   }
 >
   The fastest way to recruit research participants
-</h2>
+</h1>
 `;
 
 exports[`Storyshots Components/Heading Levels 1`] = `
@@ -9128,16 +9128,81 @@ Array [
   >
     The fastest way to recruit research participants
   </h6>,
-  <h6
+]
+`;
+
+exports[`Storyshots Components/Heading Sizes 1`] = `
+Array [
+  <h2
+    className="Heading Heading--xxxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xxxl"
+  </h2>,
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xxl"
+  </h2>,
+  <h2
+    className="Heading Heading--xl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="xl"
+  </h2>,
+  <h2
+    className="Heading Heading--lg Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="lg"
+  </h2>,
+  <h2
+    className="Heading Heading--md Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="md"
+  </h2>,
+  <h2
+    className="Heading Heading--sm Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    This is a heading level 2 with size="sm"
+  </h2>,
+  <h2
     className="Heading Heading--xs Heading--bold"
     style={
       Object {
         "textAlign": undefined,
       }
     }
   >
-    The fastest way to recruit research participants
-  </h6>,
+    This is a heading level 2 with size="xs"
+  </h2>,
 ]
 `;
 
@@ -10425,11 +10490,11 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
     onKeyUp={[Function]}
     placeholder="Please enter a number"
     type="text"
-    value="$1,250.99"
+    value="$ 1,250.99"
   />
   <br />
-  <h2
-    className="Heading Heading--xxl Heading--bold"
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
     style={
       Object {
         "textAlign": undefined,
@@ -10438,7 +10503,95 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
   >
     Value: 
     1250.99
-  </h2>
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Components/MoneyInput Prefix 1`] = `
+<div
+  className="FormGroup"
+>
+  <label
+    className="InputLabel"
+    htmlFor="money-input-3"
+  >
+    Incentive amount
+  </label>
+  <div
+    className="FormGroup__helper-text"
+  >
+    Change the prefix
+  </div>
+  <input
+    className="MoneyInput form-control"
+    disabled={false}
+    id="money-input-3"
+    inputMode="decimal"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    placeholder="Please enter a number"
+    type="text"
+    value="USD$ 500"
+  />
+  <br />
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Value: 
+    500
+  </h1>
+</div>
+`;
+
+exports[`Storyshots Components/MoneyInput Step 1`] = `
+<div
+  className="FormGroup"
+>
+  <label
+    className="InputLabel"
+    htmlFor="money-input-2"
+  >
+    Incentive amount
+  </label>
+  <div
+    className="FormGroup__helper-text"
+  >
+    Use the Up Arrow (↑) or Down Arrow (↓) to adjust the incremental value change
+  </div>
+  <input
+    className="MoneyInput form-control"
+    disabled={false}
+    id="money-input-2"
+    inputMode="decimal"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    placeholder="Please enter a number"
+    type="text"
+    value="$ 200"
+  />
+  <br />
+  <h1
+    className="Heading Heading--xxxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Value: 
+    200
+  </h1>
 </div>
 `;
 

src/Dropdown/DropdownItem.jsx

@@ -6,11 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { Dropdown as RBDropdown } from 'react-bootstrap';
 
-import './DropdownItem.scss';
-
-const DropdownItemVariants = {
-  DANGER: 'danger',
-};
+import styles from './DropdownItem.module.scss';
 
 const DropdownItem = ({
   active,
@@ -22,7 +18,6 @@ const DropdownItem = ({
   href,
   leadingIcon,
   onClick,
-  variant,
   bsPrefix,
   ...props
 }) => (
@@ -33,15 +28,15 @@ const DropdownItem = ({
     className={classNames(
       className,
       'DropdownItem',
-      variant && `DropdownItem--${variant}`,
+      styles.DropdownItem,
     )}
     disabled={disabled}
     eventKey={eventKey}
     href={href}
     onClick={onClick}
     {...props}
   >
-    { leadingIcon && <FontAwesomeIcon className="icon-left fa-fw" icon={leadingIcon} /> }
+    { leadingIcon && <FontAwesomeIcon className={classNames(styles.DropdownItemIcon, 'icon-left', 'fa-fw')} icon={leadingIcon} /> }
     { children }
   </RBDropdown.Item>
   );
@@ -74,10 +69,6 @@ DropdownItem.propTypes = {
    */
   href: PropTypes.string,
   leadingIcon: PropTypes.object,
-  /**
-    Optional variant for controlling color and hover states (e.g. destructive actions)
-   */
-  variant: PropTypes.oneOf(Object.values(DropdownItemVariants)),
   /**
     Callback fired when the menu item is clicked.
    */
@@ -93,7 +84,6 @@ DropdownItem.defaultProps = {
   eventKey: undefined,
   href: undefined,
   leadingIcon: undefined,
-  variant: undefined,
   onClick: undefined,
 };
 

src/Dropdown/DropdownItem.module.scss

@@ -0,0 +1,20 @@
+@import '../../scss/theme';
+
+.DropdownItem {
+  @include synth-font-type-30;
+  color: $ux-gray-900;
+
+  &:hover {
+    background-color: $synth-hover-state;
+    text-decoration: none;
+  }
+
+  &:focus {
+    background-color: $synth-selected-state-green;
+    color: $ux-gray-900;
+  }
+}
+
+.DropdownItemIcon {
+  margin-right: $ux-spacing-20;
+}

src/Heading/Heading.stories.tsx

@@ -24,6 +24,7 @@ type Story = StoryObj<typeof Heading>;
 export const Default: Story = {
   args: {
     children: 'The fastest way to recruit research participants',
+    level: 1,
   },
 };
 
@@ -61,13 +62,30 @@ export const Default: Story = {
 export const Levels: Story = {
   render: () => (
     <>
-      <Heading level={1} size="xxxl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={2} size="xxl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={3} size="xl" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={4} size="lg" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={5} size="md" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={6} size="sm" weight="bold">The fastest way to recruit research participants</Heading>
-      <Heading level={6} size="xs" weight="bold">The fastest way to recruit research participants</Heading>
+      <Heading level={1} size="xxxl">The fastest way to recruit research participants</Heading>
+      <Heading level={2} size="xxl">The fastest way to recruit research participants</Heading>
+      <Heading level={3} size="xl">The fastest way to recruit research participants</Heading>
+      <Heading level={4} size="lg">The fastest way to recruit research participants</Heading>
+      <Heading level={5} size="md">The fastest way to recruit research participants</Heading>
+      <Heading level={6} size="sm">The fastest way to recruit research participants</Heading>
+    </>
+  ),
+};
+
+/**
+  Headings come with default sizes based on their level, but you are able to
+  adjust its size based on visual hierarchy needs.
+*/
+export const Sizes: Story = {
+  render: () => (
+    <>
+      <Heading level={2} size="xxxl">This is a heading level 2 with size="xxxl"</Heading>
+      <Heading level={2} size="xxl">This is a heading level 2 with size="xxl"</Heading>
+      <Heading level={2} size="xl">This is a heading level 2 with size="xl"</Heading>
+      <Heading level={2} size="lg">This is a heading level 2 with size="lg"</Heading>
+      <Heading level={2} size="md">This is a heading level 2 with size="md"</Heading>
+      <Heading level={2} size="sm">This is a heading level 2 with size="sm"</Heading>
+      <Heading level={2} size="xs">This is a heading level 2 with size="xs"</Heading>
     </>
   ),
 };