Merge release/1.29.0 into main branch (#569)

* add CardList to DS (#567)

Adds a CardList layout component to wrap around existing design system Cards.

* update Pill color and border (#568)

Updates Pills colors, removes Pill border, and introduces a Pills layout component to wrap around a collection of Pill components.

* Prepare release 1.29.0

Co-authored-by: Jason Basuil <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

cypress/integration/pill_spec.js

@@ -3,6 +3,10 @@ const pills = [
     name: 'Default',
     path: 'components-pill--default',
   },
+  {
+    name: 'With Container',
+    path: 'components-pill--with-container',
+  },
   {
     name: 'With Leading Icon',
     path: 'components-pill--with-leading-icon',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",

spec/__snapshots__/Storyshots.test.js.snap

@@ -2739,6 +2739,108 @@ exports[`Storyshots Components/Card Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/CardList Default 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="CardList CardList__alignItems--center"
+  >
+    <section
+      className="Card Card--sm"
+    >
+      <div
+        className="Card__header"
+      >
+        <h2
+          className="Card__title"
+        >
+          Card 1
+        </h2>
+      </div>
+      <h3
+        className="Card__subtitle"
+      >
+        The fastest way to recruit research participants. Source from a pool of more than 850,000 participants to reach nearly any target audience.
+      </h3>
+      <ul>
+        <li>
+          500,000+ sessions completed
+        </li>
+        <li>
+          $19 million+ incentives distributed
+        </li>
+        <li>
+          3 hours median time to 1st matched participant
+        </li>
+      </ul>
+    </section>
+    <section
+      className="Card Card--sm"
+    >
+      <div
+        className="Card__header"
+      >
+        <h2
+          className="Card__title"
+        >
+          Card 2
+        </h2>
+      </div>
+      <h3
+        className="Card__subtitle"
+      >
+        The fastest way to recruit research participants. Source from a pool of more than 850,000 participants to reach nearly any target audience.
+      </h3>
+      <ul>
+        <li>
+          500,000+ sessions completed
+        </li>
+        <li>
+          $19 million+ incentives distributed
+        </li>
+        <li>
+          3 hours median time to 1st matched participant
+        </li>
+      </ul>
+    </section>
+    <section
+      className="Card Card--sm"
+    >
+      <div
+        className="Card__header"
+      >
+        <h2
+          className="Card__title"
+        >
+          Card 3
+        </h2>
+      </div>
+      <h3
+        className="Card__subtitle"
+      >
+        The fastest way to recruit research participants. Source from a pool of more than 850,000 participants to reach nearly any target audience.
+      </h3>
+      <ul>
+        <li>
+          500,000+ sessions completed
+        </li>
+        <li>
+          $19 million+ incentives distributed
+        </li>
+        <li>
+          3 hours median time to 1st matched participant
+        </li>
+      </ul>
+    </section>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/CheckboxButton Default 1`] = `
 <div
   style={
@@ -6101,7 +6203,7 @@ exports[`Storyshots Components/Pill With Close 1`] = `
   }
 >
   <span
-    className="Pill Pill--blue"
+    className="Pill Pill--blue Pill--closeable"
   >
     Text
     <button
@@ -6131,6 +6233,109 @@ exports[`Storyshots Components/Pill With Close 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Pill With Container 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <div
+    className="Pills"
+  >
+    <span
+      className="Pill Pill--gray"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-microphone fa-w-11 Pill__icon--lead"
+        data-icon="microphone"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 352 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+      1-on-1 Interview
+    </span>
+    <span
+      className="Pill Pill--gray"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-globe fa-w-16 Pill__icon--lead"
+        data-icon="globe"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 496 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+      Online
+    </span>
+    <span
+      className="Pill Pill--gray"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-gift-card fa-w-18 Pill__icon--lead"
+        data-icon="gift-card"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 576 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M528 128h-58.07c6.22-12.06 10.07-25.52 10.07-40 0-48.52-39.48-88-88-88-41.6 0-68.51 21.34-103.04 68.33C254.44 21.33 227.53 0 185.93 0c-48.52 0-88 39.48-88 88 0 14.48 3.85 27.94 10.07 40H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h480c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48zM392 48c22.06 0 40 17.94 40 40 0 22.05-17.94 40-40 40h-86.07c51.36-76.47 65.72-80 86.07-80zM145.93 88c0-22.06 17.94-40 40-40 19.94 0 34.58 3.27 86.07 80h-86.07c-22.06 0-40-17.95-40-40zm60.13 104l-35.72 35.72c-6.25 6.25-6.25 16.38 0 22.63l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0L273.94 192h28.13l69.65 69.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L369.94 192H512v128H64V192h142.06zM64 448v-64h448v64H64z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+      $120 choice of dozens of digital gift cards
+    </span>
+    <span
+      className="Pill Pill--gray"
+    >
+      <svg
+        aria-hidden="true"
+        className="svg-inline--fa fa-clock fa-w-16 Pill__icon--lead"
+        data-icon="clock"
+        data-prefix="fas"
+        focusable="false"
+        role="img"
+        style={Object {}}
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256,8C119,8,8,119,8,256S119,504,256,504,504,393,504,256,393,8,256,8Zm92.49,313h0l-20,25a16,16,0,0,1-22.49,2.5h0l-67-49.72a40,40,0,0,1-15-31.23V112a16,16,0,0,1,16-16h32a16,16,0,0,1,16,16V256l58,42.5A16,16,0,0,1,348.49,321Z"
+          fill="currentColor"
+          style={Object {}}
+        />
+      </svg>
+      1 hour
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/Pill With Leading Icon 1`] = `
 <div
   style={

src/CardList/CardList.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import './CardList.scss';
+
+export const CardListAlignItemsOptions = ['center', 'flex-start', 'flex-end'];
+
+const CardList = ({
+  alignItems,
+  className,
+  children,
+  ...props
+}) => (
+  <div
+    className={classNames(
+      'CardList',
+      className,
+      {
+        [`CardList__alignItems--${alignItems}`]: !!alignItems,
+      },
+      )}
+    {...props}
+  >
+    {children}
+  </div>
+  );
+
+CardList.propTypes = {
+  alignItems: PropTypes.oneOf(CardListAlignItemsOptions),
+  className: PropTypes.string,
+};
+
+CardList.defaultProps = {
+  alignItems: 'center',
+  className: undefined,
+};
+
+export default CardList;

src/CardList/CardList.mdx

@@ -0,0 +1,35 @@
+import { ArgsTable, Story, Canvas } from '@storybook/addon-docs/blocks';
+import CardList from './CardList';
+
+# CardList
+
+##
+
+<h4>
+	A simple layout container for positioning Cards.
+</h4>
+
+<Canvas>
+  <Story id="components-cardlist--default" />
+</Canvas>
+
+### When to use 
+- Use `CardList` to wrap one or more `Card` components.
+- `CardList` centers `Card` components by default and should handle the most common page layouts that use `Card`.
+
+## Props
+
+<ArgsTable of={CardList} />
+
+## Stories
+
+### Default 
+
+<Canvas>
+  <Story id="components-cardlist--default" />
+</Canvas>
+
+## Formatting
+
+### Alignment
+- `Card`s within `CardList` are centered by default

src/CardList/CardList.scss

@@ -0,0 +1,29 @@
+@import '../../scss/theme';
+
+$card-list-spacing: 1.5rem;
+$card-list-child-card-spacing: 0.75rem;
+
+.CardList {
+  display: flex;
+  flex-direction: column;
+
+  margin: $card-list-spacing 0;
+  
+  .Card {
+    margin: $card-list-child-card-spacing;
+  }
+
+  &__alignItems {
+    &--center {
+      align-items: center;
+    }
+
+    &--flex-start {
+      align-items: flex-start;
+    }
+
+    &--flex-end {
+      align-items: flex-end;
+    }
+  }
+}