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

package/src/components/Input/Input.stories.tsx

@@ -6,8 +6,6 @@ import Label from "../Label/Label";
 import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import HelperErrorText from "../HelperErrorText/HelperErrorText";
-// eslint-disable-next-line id-blacklist
-import { text, boolean, select, number } from "@storybook/addon-knobs";
 import { action } from "@storybook/addon-actions";
 import { getCategory } from "../../utils/componentCategories";
 
@@ -16,47 +14,24 @@ export default {
   component: Input,
 };
 
-let showLabel, showHelperText;
-
 export const input = () => (
   <>
-    {boolean("Show Label", true) ? (showLabel = true) : (showLabel = false)}
-    {showLabel && (
-      <Label
-        htmlFor="inputID"
-        optReqFlag={select(
-          "Optional/Required Flag",
-          ["Required", "Optional", ""],
-          "Required"
-        )}
-        id={"label"}
-      >
-        {text("Input Label", "Choose your islander name: ")}
-      </Label>
-    )}
+    <Label htmlFor="inputID" optReqFlag="Required" id={"label"}>
+      Choose your islander name:
+    </Label>
     <Input
       id="inputID"
       ariaLabel="Input Label"
       ariaLabelledBy={"helperText"}
-      required={boolean("Input Required", false)}
-      placeholder={text("Input Placeholder", "CoolPerson99")}
-      type={select("Input Type", InputTypes, InputTypes.text)}
-      disabled={boolean("Disabled", false)}
+      required={false}
+      placeholder="CoolPerson99"
+      type={InputTypes.text}
+      disabled={false}
     ></Input>
-    {boolean("Show Helper Text", true)
-      ? (showHelperText = true)
-      : (showHelperText = false)}
-    {showHelperText && (
-      <HelperErrorText
-        isError={boolean("Helper Text Errored", false)}
-        id={"helperText"}
-      >
-        {text(
-          "Helper Text Content",
-          "Once you pick a name for your islander it cannot be changed, so choose wisely!"
-        )}
-      </HelperErrorText>
-    )}
+    <HelperErrorText isInvalid={false} id={"helperText"}>
+      Once you pick a name for your islander it cannot be changed, so choose
+      wisely!
+    </HelperErrorText>
   </>
 );
 
@@ -64,8 +39,7 @@ input.storyName = "Input";
 input.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -74,12 +48,7 @@ let groupErrored;
 
 export const inputGroup = () => (
   <fieldset className="fieldset">
-    {boolean("Input Group Errored", false)
-      ? (groupErrored = true)
-      : (groupErrored = false)}
-    <legend className="legend">
-      {text("Input Group Label", "Construction Time Request Form: ")}
-    </legend>
+    <legend className="legend">Construction Time Request Form:</legend>
     <div className="input-group">
       <div style={{ flex: "1" }}>
         <Label htmlFor="input1" id={"label1"}>
@@ -87,17 +56,13 @@ export const inputGroup = () => (
         </Label>
         <Input
           id="input1"
-          ariaLabelledBy={
-            groupErrored
-              ? "helperText1 sharedHelperText label1"
-              : "helperText1 label1"
-          }
+          ariaLabelledBy="helperText1 sharedHelperText label1"
           errored={groupErrored ? true : false}
           required={true}
           type={InputTypes.text}
         ></Input>
-        <HelperErrorText isError={false} id={"helperText1"}>
-          {text("Input 1 Helper Text", "E.g., 10am")}
+        <HelperErrorText isInvalid={false} id={"helperText1"}>
+          "E.g., 10am"
         </HelperErrorText>
       </div>
 
@@ -112,23 +77,15 @@ export const inputGroup = () => (
               ? "helperText2 sharedHelperText label2"
               : "helperText2 label2"
           }
-          errored={groupErrored ? true : false}
+          errored={false}
           required={true}
           type={InputTypes.text}
         ></Input>
-        <HelperErrorText isError={false} id={"helperText2"}>
-          {text("Input 2 Helper Text", "E.g., 11am")}
+        <HelperErrorText isInvalid={false} id={"helperText2"}>
+          E.g., 11am
         </HelperErrorText>
       </div>
     </div>
-    {groupErrored && (
-      <HelperErrorText isError={true} id={"sharedHelperText"}>
-        {text(
-          "Additional Error Text",
-          "Sorry villager! Those times are not available right now."
-        )}
-      </HelperErrorText>
-    )}
     <Button
       onClick={action("clicked")}
       id="button"
@@ -144,8 +101,7 @@ inputGroup.storyName = "Input Group";
 inputGroup.parameters = {
   design: {
     type: "figma",
-    url:
-      "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+    url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
   },
   jest: ["Input.test.tsx"],
 };
@@ -165,11 +121,11 @@ export const inputAttributes = () => (
       attributes={{
         onBlur: action("onBlur"),
         onChange: action("onChange"),
-        maxLength: number("maxLength", 10),
-        tabIndex: number("tabIndex", 0),
+        maxLength: 10,
+        tabIndex: 0,
       }}
     ></Input>
-    <HelperErrorText isError={false} id="helperText-attrs">
+    <HelperErrorText isInvalid={false} id="helperText-attrs">
       {"Change the max length for 'text' input as an example! And note " +
         "the actions being called for the passed object in the `attributes` props."}
     </HelperErrorText>

package/src/components/Input/Input.test.tsx

@@ -98,7 +98,7 @@ describe("Input with Label", () => {
           placeholder="Input Placeholder"
           type={InputTypes.text}
         />
-        <HelperErrorText isError={false} id="helperText">
+        <HelperErrorText isInvalid={false} id="helperText">
           Helper Text Content
         </HelperErrorText>
       </>
@@ -140,7 +140,7 @@ describe("Input Group", () => {
               required={true}
               type={InputTypes.text}
             ></Input>
-            <HelperErrorText isError={false} id={"helperText1"}>
+            <HelperErrorText isInvalid={false} id={"helperText1"}>
               Input 1 Helper Text
             </HelperErrorText>
           </>
@@ -155,12 +155,12 @@ describe("Input Group", () => {
               required={true}
               type={InputTypes.text}
             ></Input>
-            <HelperErrorText isError={false} id={"helperText2"}>
+            <HelperErrorText isInvalid={false} id={"helperText2"}>
               Input 2 Helper Text
             </HelperErrorText>
           </>
         </>
-        <HelperErrorText isError={true} id={"sharedHelperText"}>
+        <HelperErrorText isInvalid={true} id={"sharedHelperText"}>
           Additional Error Text
         </HelperErrorText>
       </fieldset>

package/src/components/Input/_Input.scss

@@ -1,10 +1,10 @@
 $break-input-mobile: 400px;
 
 .input {
-  @include space-inset-xs;
-  @include space-stack-xs;
+  padding: var(--nypl-space-xs);
+  margin-bottom: var(--nypl-space-xs);
 
-  border: 1px solid var(--ui-gray-medium);
+  border: 1px solid var(--nypl-colors-ui-gray-medium);
 
   &[type="text"],
   &[type="number"],
@@ -17,43 +17,43 @@ $break-input-mobile: 400px;
 
     + .label {
       display: unset;
-      margin-left: var(--space-s);
+      margin-left: var(--nypl-space-s);
     }
   }
 
   &::-webkit-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-moz-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:-ms-input-placeholder {
-    color: var(--ui-gray-dark);
+    color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:hover {
-    border-color: var(--ui-gray-dark);
+    border-color: var(--nypl-colors-ui-gray-dark);
   }
 
   &:disabled {
-    background-color: var(--ui-gray-xx-light-cool);
-    color: var(--ui-gray-xdark);
+    background-color: var(--nypl-colors-ui-gray-xx-light-cool);
+    color: var(--nypl-colors-ui-gray-xdark);
   }
 
   &:active,
   &:focus,
   &:active:hover,
   &:focus:hover {
-    border: 1px solid var(--ui-focus);
+    border: 1px solid var(--nypl-colors-ui-focus);
     box-shadow: 0;
-    outline: 1px solid var(--ui-focus);
+    outline: 1px solid var(--nypl-colors-ui-focus);
     z-index: 9999;
   }
 
   &--error {
-    border: 1px solid var(--ui-error-primary);
+    border: 1px solid var(--nypl-colors-ui-error-primary);
   }
 }
 
@@ -63,7 +63,16 @@ $break-input-mobile: 400px;
     justify-content: space-between;
 
     > *:not(:last-child) {
-      @include space-inline-m;
+      margin-right: var(--nypl-space-m);
     }
   }
 }
+
+// Used in `Input.stories.tsx`
+.fieldset {
+  @include fieldset-reset;
+}
+.legend {
+  border: 0;
+  font-weight: 500;
+}

package/src/components/Link/Link.tsx

@@ -7,6 +7,8 @@ import { IconRotationTypes, IconNames, IconAlign } from "../Icons/IconTypes";
 import generateUUID from "../../helpers/generateUUID";
 
 export interface LinkProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Additional attributes, such as `rel=nofollow`, to pass to the `<a>` tag. */
   attributes?: { [key: string]: any };
   /** Any child node passed to the component. */
@@ -65,6 +67,7 @@ function getWithDirectionIcon(children, type: LinkTypes) {
 const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   (props, ref: any) => {
     const {
+      additionalStyles = {},
       attributes,
       children,
       className,
@@ -130,7 +133,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           className={className}
           ref={ref}
           {...linkProps}
-          __css={style}
+          __css={{ ...style, ...additionalStyles }}
         >
           {newChildren}
         </Box>

package/src/components/List/List.stories.mdx

@@ -3,22 +3,17 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
-import Card from "../Card/Card";
+
 import Heading from "../Heading/Heading";
+import { HeadingLevels } from "../Heading/HeadingTypes";
 import Image from "../Image/Image";
 import Link from "../Link/Link";
 import { LinkTypes } from "../Link/LinkTypes";
 import List from "./List";
 import { ListTypes } from "./ListTypes";
-import {
-  animalCrossingDefinitions,
-  cardsList,
-  listRenderer,
-} from "./List.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -34,16 +29,15 @@ import { getCategory } from "../../utils/componentCategories";
     jest: ["List.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
     children: { table: { disable: true } },
-    definitions: { table: { disable: true } },
-    itemGroups: { table: { disable: true } },
+    className: { table: { disable: true } },
+    id: { table: { disable: true } },
     listItems: { table: { disable: true } },
     type: {
       control: {
         type: "radio",
       },
+      options: Object.keys(ListTypes),
     },
   }}
 />
@@ -53,33 +47,119 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.7.0`    |
-| Latest            | `0.23.2`   |
+| Latest            | `0.25.2`   |
 
 <Description of={List} />
 
-<Preview withToolbar>
+export const animalCrossingDefinitions = [
+  {
+    term: "Mahi-mahi",
+    definition:
+      'The mahi-mahi is an ocean fish known for its wide, somewhat-cute face. It can reach over six feet long. It is known by different names including "dolphinfish," even though it has no relation to dolphins. They live in only in warm, tropical waters...which perhaps explains the relaxed, happy look on their faces.',
+  },
+  {
+    term: "Golden trout",
+    definition:
+      "The golden trout is a beautifully colored fish that can only live in very clean waters. They are difficult to come across since they are found only in high mountain streams. As a side note, I find it much easier to appreciate fish that aren't such prima donnas about everything.",
+  },
+  {
+    term: "Rainbowfish",
+    definition:
+      'The rainbowfish is a tropical fish known for its metallic colors and beautiful fins. There are over 50 different species, each unique and pleasing color. I must say, it does make me wish for feathers of a more exciting hue than "underbaked brownie."',
+  },
+  {
+    term: "Suckerfish",
+    definition:
+      "The suckerfish is a curious fish that likes to attach itself with its sucker mouth to larger marine animals. The benefit to the suckerfish is that it gets to eat smaller parasites and dead skin off the host's body. Amusingly, some people have used suckerfish on cords to catch large turtles with the fish's own suction! I imagine this practice is the cause of some awkward conversations between fish and turtle, eh wot?",
+  },
+];
+export const itemGroups = [
+  "Art",
+  "Bushes",
+  "Clothing",
+  "DIY Recipes",
+  "Flowers",
+  "Fossils",
+  "Fruits",
+  "Furniture",
+  "Materials",
+  "NPC",
+  "Songs",
+  "Tools",
+  "Villagers",
+];
+export const definitions = [
+  {
+    term: "Balrogs",
+    definition:
+      'Demonic creatures of fire and shadow, Balrogs were fallen Maiar, loyal to the first Dark Lord, Morgoth. They participated in the wars of the First Age of Middle-earth but were mostly destroyed during the War of Wrath which ended the Age. By the Third Age, the only remaining Balrog was "Durin\'s Bane," the Balrog of Moria, killed by Gandalf.',
+  },
+  {
+    term: "Dwarves",
+    definition:
+      "The race of Dwarves preferred to live in mountains and caves, settling in places such as Erebor (the Lonely Mountain), the Iron Hills, the Blue Mountains, and Moria (Khazad-dûm) in the Misty Mountains. Aulë the Smith created Dwarves; he also invented the Dwarven language, known as Khuzdul. Dwarves mined and worked precious metals throughout the mountains of Middle-earth. The seven different groups of Dwarf-folk originated in the locations where the Seven Fathers of the Dwarves first awoke before the First Age.",
+  },
+  {
+    term: "Elves",
+    definition:
+      'The Elves, or Firstborn, were the first of Eru\'s Children to awaken. Born under the stars before the ascension of the Moon and the Sun, they retain a special love for light and an inner spirit endowed with unique gifts. They call themselves the Quendi, or "Speakers", for they were the first to utter words; and, even now, no race understands language and song like the Firstborn. Fair and fine featured, brilliant and proud, immortal and strong, tall and agile, they are the most blessed of the Free Peoples. They can see as well under moon or starlight as a man at the height of day. They cannot become sick or scarred, but if an Elf should die, from violence or losing the will to live from grief, their spirit goes to the halls of Mandos, and as they are bound to Arda and cannot leave until the world is broken and remade. Elven skill and agility is legendary: for instance, walking atop freshly fallen snow without leaving a trace of their passing. On a clear day they can see ten miles with perfect clarity and detail up to 100 miles. These gifts come at great cost, though: they are strongly bound to Fate (see Mandos) and hated by Morgoth. No other race has been blessed and cursed more than the Quendi.',
+  },
+  {
+    term: "Ents",
+    definition:
+      "Ents were an ancient race of tree-like creatures, having become like the trees that they shepherd. They were created by Yavanna and given life by Ilúvatar. By the Third Age, they were a dwindling race, having long ago lost their mates, the Entwives.",
+  },
+  {
+    term: "Hobbits",
+    definition:
+      'Hobbits are a race of Middle-earth, also known as "halflings" on account of their short stature, roughly half the size of men. They are characterized by curly hair on their heads and leathery feet that have furry insteps, for which they did not wear shoes. Many hobbits live in the Shire as well as Bree, and they once lived in the vales of the Anduin. They are fond of an unadventurous life of farming, eating, and socializing. There were three types of Hobbits: The Harfoots were the most numerous. The Stoors had an affinity for water, boats and swimming; the Fallohides were an adventurous people. The origin of hobbits is unclear, but of all the races they have the closest affinity to men, and in the Prologue to The Lord of the Rings Tolkien calls them relatives of men.',
+  },
+];
+
+<Canvas withToolbar>
   <Story
     name="List"
     args={{
       id: "nypl-list",
+      noStyling: false,
+      title: "Middle-Earth Peoples",
       type: ListTypes.Unordered,
-      title: "",
     }}
   >
-    {(args) => listRenderer(args)}}
+    {(args) => (
+      <List {...args} type={ListTypes[args.type]}>
+        {ListTypes[args.type] !== ListTypes.Definition
+          ? itemGroups.map((item, i) => <li key={i}>{item}</li>)
+          : definitions.map((item, i) => [
+              <dt key={`dt_${i}`}>{item.term}</dt>,
+              <dd key={`dd_${i}`}>{item.definition}</dd>,
+            ])}
+      </List>
+    )}
   </Story>
-</Preview>
+</Canvas>
 
 <ArgsTable story="List" />
 
 ## Definition List
 
-<Preview withToolbar>
+To render a definition list, pass in `ListTypes.Definition` to the `type` prop.
+The optional `title` prop will now render above the definition list element.
+This type of list renders `dt` and `dd` elements.
+
+```jsx
+<List type={ListTypes.Definition}>
+  <dt>Term</dt>
+  <dd>Definition</dd>
+</List>
+```
+
+<Canvas>
   <Story
     name="Definition List"
     args={{
       id: "nypl-list2",
-      type: ListTypes.Definition,
+      noStyling: false,
       title: "Middle-Earth Peoples",
     }}
     argTypes={{
@@ -93,39 +173,30 @@ import { getCategory } from "../../utils/componentCategories";
       },
     }}
   >
-    {(args) => listRenderer(args)}}
-  </Story>
-</Preview>
-
-## Ordered Card List
-
-<Preview withToolbar>
-  <Story
-    name="Ordered Card List"
-    args={{
-      id: "nypl-list3",
-    }}
-    argTypes={{
-      type: { table: { disable: true } },
-      title: { table: { disable: true } },
-    }}
-  >
-    {(args) => <List type={ListTypes.Ordered}>{cardsList}</List>}
+    {(args) => (
+      <List {...args} type={ListTypes.Definition}>
+        {definitions.map((item, i) => [
+          <dt key={`dt_${i}`}>{item.term}</dt>,
+          <dd key={`dd_${i}`}>{item.definition}</dd>,
+        ])}
+      </List>
+    )}
   </Story>
-</Preview>
+</Canvas>
 
 ## Definition List of Links
 
-<Preview withToolbar>
+An example with HTML elements inside of the `dd` elements.
+
+<Canvas>
   <Story
     name="Definition List of Links"
     args={{
-      type: ListTypes.Definition,
+      noStyling: false,
       title: "Details",
     }}
     argTypes={{
       type: { table: { disable: true } },
-      title: { table: { disable: true } },
     }}
     parameters={{
       design: {
@@ -136,7 +207,7 @@ import { getCategory } from "../../utils/componentCategories";
     }}
   >
     {(args) => (
-      <List title="Details" type={ListTypes.Definition}>
+      <List {...args} type={ListTypes.Definition}>
         <dt>Authors</dt>
         <dd>
           <a href="#">Chirwa, Ephraim Wadonda, author</a>
@@ -175,7 +246,7 @@ import { getCategory } from "../../utils/componentCategories";
       </List>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 ## Lists with Data Props
 
@@ -183,6 +254,8 @@ If `li` or `dt`/`dd` elements cannot be passed as children to the `List` element
 an array with data can be passed into the `listItems` prop. Note: either
 children elements or the `listItems` prop should be passed but not both.
 
+### Unordered and Ordered
+
 For lists of type `ListTypes.Unordered` (ul) or `ListTypes.Ordered` (ol), `li`
 list item elements can be passed as children. If that's not possible but the
 data to render is stored as an array of strings, then that data array can be
@@ -202,6 +275,8 @@ const fishArray = ["Mahi-mahi", "Golden trout", "Rainbowfish", "Suckerfish"];
 <List type={ListTypes.Unordered} listItems={fishArray} />
 ```
 
+### Definition
+
 For lists of type `ListTypes.Definition` (dl), `dt` and `dd` elements can be
 passed as children. If that's not possible but the data to render is stored as
 an array of objects, then that data array can be passed into `listItems`. The
@@ -240,24 +315,24 @@ const fishDefinitions = [
   }
 ];
 <List
-  type={ListTypes.Definition}
-  title="Animal Crossing Fish"
   listItems={fishDefinitions}
+  title="Animal Crossing Fish"
+  type={ListTypes.Definition}
 />
 ```
 
-<Preview>
+<Canvas>
   <Story
     name="List with Data Props"
     args={{
-      type: ListTypes.Definition,
-      title: "Animal Crossing Fish",
       listItems: animalCrossingDefinitions,
+      noStyling: false,
+      title: "Animal Crossing Fish",
     }}
     argTypes={{
       type: { table: { disable: true } },
     }}
   >
-    {(args) => <List {...args} />}
+    {(args) => <List {...args} type={ListTypes.Definition} />}
   </Story>
-</Preview>
+</Canvas>