Merge release/1.36.1 into main branch (#757)

* change width to max-width on Card (#756)

Author: github-actions[bot]

package.json

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

spec/__snapshots__/Storyshots.test.js.snap

@@ -4336,15 +4336,15 @@ exports[`Storyshots Components/Card Default 1`] = `
   }
 >
   <section
-    className="Card Card--lg"
+    className="Card"
   >
     <div
       className="Card__header"
     >
       <h2
         className="Card__title"
       >
-        Large card with title
+        Default card title
       </h2>
       <span
         className="Card__helper-text"
@@ -4355,7 +4355,7 @@ exports[`Storyshots Components/Card Default 1`] = `
     <h3
       className="Card__subtitle"
     >
-      And a subtitle
+      Subtitle
     </h3>
     <div>
       Use knobs to try out the different card sizes
@@ -4364,6 +4364,95 @@ exports[`Storyshots Components/Card Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/Card Sizes 1`] = `
+<div
+  style={
+    Object {
+      "padding": "1rem",
+    }
+  }
+>
+  <section
+    className="Card Card--xs"
+  >
+    <div
+      className="Card__header"
+    >
+      <h2
+        className="Card__title"
+      >
+        xs
+      </h2>
+    </div>
+    <code>
+      CardSizes.EXTRA_SMALL
+    </code>
+  </section>
+  <section
+    className="Card Card--sm"
+  >
+    <div
+      className="Card__header"
+    >
+      <h2
+        className="Card__title"
+      >
+        sm
+      </h2>
+    </div>
+    <code>
+      CardSizes.SMALL
+    </code>
+  </section>
+  <section
+    className="Card Card--md"
+  >
+    <div
+      className="Card__header"
+    >
+      <h2
+        className="Card__title"
+      >
+        md
+      </h2>
+    </div>
+    <code>
+      CardSizes.MEDIUM
+    </code>
+  </section>
+  <section
+    className="Card Card--lg"
+  >
+    <div
+      className="Card__header"
+    >
+      <h2
+        className="Card__title"
+      >
+        lg
+      </h2>
+    </div>
+    <code>
+      CardSizes.LARGE
+    </code>
+  </section>
+  <section
+    className="Card"
+  >
+    <div
+      className="Card__header"
+    >
+      <h2
+        className="Card__title"
+      >
+        default
+      </h2>
+    </div>
+    When no size is given, the Card takes up the full width of its parent container.
+  </section>
+</div>
+`;
+
 exports[`Storyshots Components/CardContainer Default 1`] = `
 <div
   style={

src/Card/Card.mdx

@@ -13,13 +13,6 @@ import Card from './Card';
   <Story id="components-card--default" />
 </Canvas>
 
-### When to use
-- Reason 1
-- Reason 2
-
-### When to not use
-- Reason 1
-- Reason 2
 
 ## Props
 
@@ -29,10 +22,18 @@ import Card from './Card';
 
 ### Default
 
+`Card` will take up the full width of its parent container by default.
+
 <Canvas>
   <Story id="components-card--default" />
 </Canvas>
 
+### Sizes
+
+<Canvas>
+  <Story id="components-card--sizes" />
+</Canvas>
+
 ## Formatting
 
 ### States

src/Card/Card.scss

@@ -8,7 +8,7 @@
   outline-color: $ux-green-500;
   padding: $card-spacing;
 
-  width: 100%;
+  max-width: 100%;
 
   &__divider {
     border-top: 1px solid rgba(0,0,0,.1);

src/Card/Card.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  withKnobs, text, radios, boolean,
+  withKnobs, text, select, boolean,
 } from '@storybook/addon-knobs';
 
 import Card, { CardSizes } from 'src/Card';
@@ -19,15 +19,49 @@ export default {
 
 export const Default = () => (
   <Card
-    divided={boolean('With divider', false)}
-    helperText={text('Helper text', '(helper text)')}
-    noPadding={boolean('Without padding', false)}
-    size={radios('Message Type', CardSizes, CardSizes.LARGE)}
-    subTitle={text('Subtitle', 'And a subtitle')}
-    title={text('Title', 'Large card with title')}
+    divided={boolean('divided', false)}
+    helperText={text('helperText', '(helper text)')}
+    noPadding={boolean('noPadding', false)}
+    size={select('size', CardSizes, undefined)}
+    subTitle={text('subTitle', 'Subtitle')}
+    title={text('title', 'Default card title')}
   >
     <div>
       Use knobs to try out the different card sizes
     </div>
   </Card>
 );
+
+export const Sizes = () => (
+  <>
+    <Card
+      size={CardSizes.EXTRA_SMALL}
+      title="xs"
+    >
+      <code>CardSizes.EXTRA_SMALL</code>
+    </Card>
+    <Card
+      size={CardSizes.SMALL}
+      title="sm"
+    >
+      <code>CardSizes.SMALL</code>
+    </Card>
+    <Card
+      size={CardSizes.MEDIUM}
+      title="md"
+    >
+      <code>CardSizes.MEDIUM</code>
+    </Card>
+    <Card
+      size={CardSizes.LARGE}
+      title="lg"
+    >
+      <code>CardSizes.LARGE</code>
+    </Card>
+    <Card
+      title="default"
+    >
+      When no size is given, the Card takes up the full width of its parent container.
+    </Card>
+  </>
+);