Merge release/1.29.1 into main branch (#578)

* remove margin from Card (#572)

* rename CardList to CardContainer (#574)

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]

package.json

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

spec/__snapshots__/Storyshots.test.js.snap

@@ -2739,7 +2739,7 @@ exports[`Storyshots Components/Card Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components/CardList Default 1`] = `
+exports[`Storyshots Components/CardContainer Default 1`] = `
 <div
   style={
     Object {
@@ -2748,7 +2748,7 @@ exports[`Storyshots Components/CardList Default 1`] = `
   }
 >
   <div
-    className="CardList CardList__alignItems--center"
+    className="CardContainer CardContainer__alignItems--center"
   >
     <section
       className="Card Card--sm"

src/Card/Card.scss

@@ -13,7 +13,6 @@ $card-width-xs: 15rem;
   border: none;
   border-radius: 0.25rem;
   box-shadow: $ux-elevations-20;
-  margin: $card-spacing auto;
   outline-color: $ux-green-500;
   padding: $card-spacing;
 

src/CardContainer/CardContainer.jsx

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

src/CardContainer/CardContainer.mdx

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

src/CardContainer/CardContainer.scss

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

src/CardContainer/CardContainer.stories.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import Card, { CardSizes } from 'src/Card';
+import CardContainer, { CardContainerAlignItemsOptions } from 'src/CardContainer';
+import { withKnobs, select } from '@storybook/addon-knobs';
+import mdx from './CardContainer.mdx';
+
+export default {
+  title: 'Components/CardContainer',
+  decorators: [withKnobs],
+  component: CardContainer,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Default = () => (
+  <CardContainer alignItems={select('alignItems', CardContainerAlignItemsOptions, 'center')}>
+    <Card
+      size={select('Card Size', Object.values(CardSizes), CardSizes.SMALL)}
+      subTitle="The fastest way to recruit research participants.
+      Source from a pool of more than 850,000 participants to reach nearly any target audience."
+      title="Card 1"
+    >
+      <ul>
+        <li>500,000+ sessions completed</li>
+        <li>$19 million+ incentives distributed</li>
+        <li>3 hours median time to 1st matched participant</li>
+      </ul>
+    </Card>
+    <Card
+      size={select('Card Size', Object.values(CardSizes), CardSizes.SMALL)}
+      subTitle="The fastest way to recruit research participants.
+      Source from a pool of more than 850,000 participants to reach nearly any target audience."
+      title="Card 2"
+    >
+      <ul>
+        <li>500,000+ sessions completed</li>
+        <li>$19 million+ incentives distributed</li>
+        <li>3 hours median time to 1st matched participant</li>
+      </ul>
+    </Card>
+    <Card
+      size={select('Card Size', Object.values(CardSizes), CardSizes.SMALL)}
+      subTitle="The fastest way to recruit research participants.
+      Source from a pool of more than 850,000 participants to reach nearly any target audience."
+      title="Card 3"
+    >
+      <ul>
+        <li>500,000+ sessions completed</li>
+        <li>$19 million+ incentives distributed</li>
+        <li>3 hours median time to 1st matched participant</li>
+      </ul>
+    </Card>
+  </CardContainer>
+);

src/CardContainer/index.js

@@ -0,0 +1,3 @@
+import CardContainer, { CardContainerAlignItemsOptions } from './CardContainer';
+
+export { CardContainer as default, CardContainerAlignItemsOptions };

src/index.js

@@ -2,7 +2,7 @@ import { Alert, MessageTypes } from 'src/Alert';
 import Button from 'src/Button';
 import Avatar from 'src/Avatar';
 import Card, { CardSizes } from 'src/Card';
-import CardList from 'src/CardList';
+import CardContainer from 'src/CardContainer';
 import CheckboxButton, { CHECKED_STATES } from 'src/CheckboxButton';
 import CheckboxButtonGroup from 'src/CheckboxButtonGroup';
 import { ORIENTATIONS as BUTTON_GROUP_ORIENTATIONS } from 'src/ControlButtonGroup';
@@ -75,7 +75,7 @@ export {
   Button,
   BUTTON_GROUP_ORIENTATIONS,
   Card,
-  CardList,
+  CardContainer,
   CardSizes,
   CheckboxButton,
   CheckboxButtonGroup,