@nypl/design-system-react-components 0.25.0 → 0.25.1

package/src/components/Button/Button.stories.mdx

@@ -10,7 +10,12 @@ import { withDesign } from "storybook-addon-designs";
 import Button, { ButtonGroup } from "./Button";
 import { ButtonTypes } from "./ButtonTypes";
 import Icon from "../Icons/Icon";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
+import {
+  IconNames,
+  IconRotationTypes,
+  IconAlign,
+  IconSizes,
+} from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
@@ -83,7 +88,7 @@ Controls for this Story section to preview a `Button` with the selected icon.
     args={{
       displayLeft: true,
       buttonText: "Button Text",
-      iconType: IconNames.search,
+      iconType: IconNames.Search,
     }}
     argTypes={{
       iconType: {
@@ -99,16 +104,16 @@ Controls for this Story section to preview a `Button` with the selected icon.
         {args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-left"]}
+            align={IconAlign.Left}
+            size={IconSizes.Small}
           />
         )}
         {args.buttonText}
         {!args.displayLeft && (
           <Icon
             name={args.iconType}
-            decorative={true}
-            modifiers={["small", "icon-right"]}
+            align={IconAlign.Right}
+            size={IconSizes.Small}
           />
         )}
       </Button>
@@ -123,20 +128,20 @@ The icon can be placed to the left or the right of the button text.
     <ButtonGroup>
       <Button buttonType={ButtonTypes.Secondary}>
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate90}
-          modifiers={["small", "icon-left"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
         />
         Previous
       </Button>
       <Button buttonType={ButtonTypes.Secondary}>
         Next
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate270}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
         />
       </Button>
     </ButtonGroup>
@@ -157,10 +162,9 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         }}
       >
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate90}
-          modifiers={["small"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          size={IconSizes.Small}
         />
       </Button>
       <Button
@@ -170,10 +174,9 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
         }}
       >
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate270}
-          modifiers={["small"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          size={IconSizes.Small}
         />
       </Button>
       <Button
@@ -182,7 +185,7 @@ is an `aria-label` passed to the `Button` component through the `attributes` pro
           "aria-label": "Close",
         }}
       >
-        <Icon name={IconNames.close} decorative={true} modifiers={["small"]} />
+        <Icon name={IconNames.Close} size={IconSizes.Small} />
       </Button>
     </ButtonGroup>
   </DSProvider>
@@ -201,10 +204,11 @@ must include an up arrow icon on the right side.
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
-          name={IconNames.arrow}
-          decorative={true}
-          iconRotation={IconRotationTypes.rotate180}
-          modifiers={["small", "icon-right"]}
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate180}
+          size={IconSizes.Small}
+          className="right"
+          align={IconAlign.Right}
         />
       </Button>
     </ButtonGroup>

package/src/components/Button/Button.test.tsx

@@ -6,7 +6,7 @@ import renderer from "react-test-renderer";
 
 import Button from "./Button";
 import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import { IconAlign, IconNames, IconSizes } from "../Icons/IconTypes";
 import { ButtonTypes } from "./ButtonTypes";
 
 describe("Button Accessibility", () => {
@@ -94,13 +94,13 @@ describe("padding for icon only button", () => {
     const { container } = render(
       <Button id="button" onClick={onClick} type="button">
         <Icon
-          name={IconNames.check}
-          decorative={true}
-          modifiers={["small", "icon-left"]}
+          align={IconAlign.Left}
+          name={IconNames.Check}
+          size={IconSizes.Small}
         />
       </Button>
     );
-    expect(container.querySelector(".button .icon")).toBeInTheDocument();
+    expect(container.querySelector(".button svg")).toBeInTheDocument();
   });
 });
 
@@ -149,11 +149,23 @@ describe("Button Snapshot", () => {
         </Button>
       )
       .toJSON();
+    const searchBar = renderer
+      .create(
+        <Button
+          id="button"
+          onClick={jest.fn()}
+          buttonType={ButtonTypes.SearchBar}
+        >
+          SearchBar
+        </Button>
+      )
+      .toJSON();
 
     expect(primary).toMatchSnapshot();
     expect(secondary).toMatchSnapshot();
     expect(callout).toMatchSnapshot();
     expect(pill).toMatchSnapshot();
     expect(link).toMatchSnapshot();
+    expect(searchBar).toMatchSnapshot();
   });
 });

package/src/components/Button/ButtonTypes.tsx

@@ -4,4 +4,5 @@ export enum ButtonTypes {
   Callout = "callout",
   Pill = "pill",
   Link = "link",
+  SearchBar = "searchBar",
 }

package/src/components/Button/_Button.scss

@@ -13,7 +13,7 @@
   @include button-base;
 
   background-color: var(--ui-white);
-  border: 1px solid var(--ui-gray-light);
+  border: 1px solid var(--ui-gray-light-cool);
   color: inherit;
 
   &:visited {
@@ -21,36 +21,12 @@
   }
 
   &:hover {
-    background-color: var(--ui-gray-xxlight);
+    background-color: var(--ui-gray-xx-light-cool);
   }
 
   &:disabled {
-    background-color: var(--ui-gray-light);
+    background-color: var(--ui-gray-light-cool);
     color: var(--ui-gray-dark);
     pointer-events: none;
   }
 }
-
-.button {
-  // These `icon` rules are a better fit for the Icon
-  // component but we'll keep them here for now.
-  .icon {
-    @include icon;
-
-    fill: currentColor;
-
-    &--small,
-    &--icon-left,
-    &--icon-right {
-      margin-top: var(--space-xxs);
-    }
-
-    &--icon-left {
-      margin-right: var(--space-xs);
-    }
-
-    &--icon-right {
-      margin-left: var(--space-xs);
-    }
-  }
-}

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -54,3 +54,14 @@ exports[`Button Snapshot Renders the UI snapshot correctly 5`] = `
   Link
 </button>
 `;
+
+exports[`Button Snapshot Renders the UI snapshot correctly 6`] = `
+<button
+  className="chakra-button button  css-0"
+  id="button"
+  onClick={[MockFunction]}
+  type="button"
+>
+  SearchBar
+</button>
+`;

package/src/components/Card/Card.stories.mdx

@@ -19,7 +19,6 @@ import HorizontalRule from "../HorizontalRule/HorizontalRule";
 import { LinkTypes } from "../Link/LinkTypes";
 import { HeadingDisplaySizes, HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
 import Image from "../Image/Image";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -81,7 +80,7 @@ The `CardContent` component should be used to display all content other than hea
     name="Card Props"
     args={{
       id: "custom-card",
-      layout: CardLayouts.Horizontal,
+      layout: CardLayouts.Row,
       imageSrc: "https://placeimg.com/400/300/animals",
       imageAspectRatio: CardImageRatios.ThreeByFour,
       imageAlt: "Alt text",
@@ -132,9 +131,12 @@ The `CardContent` component should be used to display all content other than hea
 
 ## Image Position
 
-By default, the image is always the first element within a `Card`. This means the image is at the top of a vertical `Card` and on the left size of a horizontal `Card`. However, you can use the `imageAtEnd` prop to override the default placement and move the image to the last element within a `Card`.
+By default, the image is always the first element within a `Card`. This means
+the image is at the top of a `Card` with a column layout and on the left side of
+a `Card` with a row layout. However, you can use the `imageAtEnd` prop to override
+the default placement and move the image to the last element within a `Card`.
 
-### Vertical Cards
+### Column Cards
 
 <Preview>
   <Story name="Card Image Position">
@@ -176,7 +178,7 @@ By default, the image is always the first element within a `Card`. This means th
   </Story>
 </Preview>
 
-### Horizontal Cards
+### Row Cards
 
 <Preview>
   <div
@@ -187,7 +189,7 @@ By default, the image is always the first element within a `Card`. This means th
     }}
   >
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/400/200/animals"
       imageAlt="Alt text"
@@ -203,7 +205,7 @@ By default, the image is always the first element within a `Card`. This means th
       </CardContent>
     </Card>
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/410/210/animals"
       imageAlt="Alt text"
@@ -224,9 +226,11 @@ By default, the image is always the first element within a `Card`. This means th
 
 ## Image Size
 
-By default, the image width is `100%` for a vertical `Card` and `225px` for a horizontal `Card`. However, you can use the `imageSize` prop to override the default width.
+By default, the image width is `100%` for a `Card` with a column layout and
+`225px` for a `Card` with a row layout. However, you can use the `imageSize`
+prop to override the default width.
 
-### Vertical Cards
+### Column Cards
 
 <Preview>
   <Story name="Card Image Size">
@@ -313,7 +317,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
   </Story>
 </Preview>
 
-### Horizontal Cards
+### Row Cards
 
 <Preview>
   <div
@@ -324,7 +328,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
     }}
   >
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/400/200/animals"
       imageAlt="Alt text"
@@ -342,7 +346,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       </CardContent>
     </Card>
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/410/210/animals"
       imageAlt="Alt text"
@@ -361,7 +365,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       </CardContent>
     </Card>
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/400/250/animals"
       imageAlt="Alt text"
@@ -381,7 +385,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       </CardContent>
     </Card>
     <Card
-      layout={CardLayouts.Horizontal}
+      layout={CardLayouts.Row}
       center
       imageSrc="https://placeimg.com/450/250/animals"
       imageAlt="Alt text"
@@ -507,7 +511,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
       }}
     >
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/400/200/animals"
         imageAlt="Alt text"
@@ -523,7 +527,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/410/210/animals"
         imageAlt="Alt text"
@@ -539,7 +543,7 @@ By default, the image width is `100%` for a vertical `Card` and `225px` for a ho
         </CardContent>
       </Card>
       <Card
-        layout={CardLayouts.Horizontal}
+        layout={CardLayouts.Row}
         center
         imageSrc="https://placeimg.com/420/220/animals"
         imageAlt="Alt text"
@@ -646,7 +650,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
         "grid-template-columns": "repeat(1, 1fr)",
       }}
     >
-      <Card layout={CardLayouts.Horizontal} border>
+      <Card layout={CardLayouts.Row} border>
         <CardHeading level={HeadingLevels.Three} id="heading1">
           Card Heading
         </CardHeading>
@@ -659,7 +663,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Horizontal} border>
+      <Card layout={CardLayouts.Row} border>
         <CardHeading level={HeadingLevels.Three} id="heading1">
           Card Heading
         </CardHeading>
@@ -672,7 +676,7 @@ Instead of passing a path for the `imageSrc` prop, you can pass a custom image c
           eget metus.
         </CardContent>
       </Card>
-      <Card layout={CardLayouts.Horizontal} border>
+      <Card layout={CardLayouts.Row} border>
         <CardHeading level={HeadingLevels.Three} id="heading1">
           Card Heading
         </CardHeading>

package/src/components/Card/Card.test.tsx

@@ -9,7 +9,7 @@ import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 
 describe("Card Accessibility", () => {
   it("passes axe accessibility test", async () => {
@@ -92,12 +92,10 @@ describe("Card", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -144,12 +142,10 @@ describe("Card", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -175,12 +171,10 @@ describe("Card", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>

package/src/components/Card/Card.tsx

@@ -63,7 +63,7 @@ export interface CardProps {
   imageSize?: CardImageSizes;
   /** The path to the image displayed with the card */
   imageSrc?: string;
-  /** Optional value to control the position of the image placeholder; default value is `vertical` */
+  /** Optional value to control the position of the image placeholder; default value is `column` */
   layout?: CardLayouts;
   /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
   modifiers?: string[];

package/src/components/Card/CardTypes.tsx

@@ -1,6 +1,6 @@
 export enum CardLayouts {
-  Horizontal = "horizontal",
-  Vertical = "vertical",
+  Row = "row",
+  Column = "column",
 }
 
 export enum CardImageRatios {

package/src/components/Card/_Card.scss

@@ -167,7 +167,7 @@
     }
   }
 
-  &.card--horizontal {
+  &.card--row {
     display: flex;
     flex-flow: column nowrap;
     max-width: 100%;

package/src/components/CardEdition/CardEdition.stories.tsx

@@ -9,7 +9,12 @@ import Image from "../Image/Image";
 import Button from "../Button/Button";
 import Link from "../Link/Link";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import {
+  IconRotationTypes,
+  IconNames,
+  IconSizes,
+  IconAlign,
+} from "../Icons/IconTypes";
 import { LinkTypes } from "../Link/LinkTypes";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import { getCategory } from "../../utils/componentCategories";
@@ -122,11 +127,11 @@ export const ExampleCardEdition = () => (
       </div>
       <div className="book__filetype">
         <Icon
-          name={IconNames.headset}
-          decorative={true}
-          modifiers={["left", "small"]}
-          iconRotation={IconRotationTypes.rotate0}
-        ></Icon>
+          name={IconNames.Headset}
+          size={IconSizes.Small}
+          align={IconAlign.Left}
+          iconRotation={IconRotationTypes.Rotate0}
+        />
         Audiobook
       </div>
       <div className="book__description">

package/src/components/CardEdition/CardEdition.test.tsx

@@ -11,7 +11,7 @@ import Image from "../Image/Image";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Icon from "../Icons/Icon";
-import { IconRotationTypes, IconNames } from "../Icons/IconTypes";
+import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 
 describe("CardEdition Accessibility", () => {
   const regularCard = (
@@ -99,12 +99,11 @@ describe("CardEdition", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                // blockName="more-link"
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -164,12 +163,11 @@ describe("CardEdition", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                // blockName="more-link"
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -198,12 +196,10 @@ describe("CardEdition", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -227,12 +223,10 @@ describe("CardEdition", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>
@@ -265,12 +259,10 @@ describe("CardEdition", () => {
           <div className="edition-card__download">
             <Link href="#url" type={LinkTypes.Action}>
               <Icon
-                name={IconNames.download}
-                blockName="more-link"
-                decorative={true}
-                modifiers={["left"]}
-                iconRotation={IconRotationTypes.rotate0}
-              ></Icon>
+                name={IconNames.Download}
+                align={IconAlign.Left}
+                iconRotation={IconRotationTypes.Rotate0}
+              />
               Download
             </Link>
           </div>

package/src/components/CardEdition/_CardEdition.scss

@@ -2,7 +2,7 @@
   @include space-stack-s;
 
   align-items: flex-start;
-  border: 1px solid var(--ui-gray-light);
+  border: 1px solid var(--ui-gray-light-cool);
   border-radius: 5px;
   display: flex;
   flex-flow: column wrap;
@@ -32,7 +32,7 @@
     @include space-stack-s;
 
     align-items: center;
-    background-color: var(--ui-gray-xlight);
+    background-color: var(--ui-gray-x-light-cool);
     display: flex;
     flex: 0 0 150px;
     height: 150px;