@nypl/design-system-react-components 0.25.8 → 0.25.11

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

@@ -0,0 +1,545 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Select Renders the UI snapshot correctly 1`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 2`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={true}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+      data-disabled=""
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 3`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-invalid={true}
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="polite"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Tom doesn't count as a sibling :(.",
+        }
+      }
+      data-isinvalid={true}
+      id="select-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 4`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-describedby="select-helperText"
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={false}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+  <div
+    aria-disabled={false}
+    className="css-0"
+  >
+    <div
+      aria-atomic={true}
+      aria-live="off"
+      className=" css-0"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Remember, Logan will judge you no matter who you pick.",
+        }
+      }
+      data-isinvalid={false}
+      id="select-helperText"
+    />
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 5`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Required
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      aria-required={true}
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onFocus={[Function]}
+      required={true}
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-0"
+>
+  <label
+    className="css-0"
+    htmlFor="select"
+    id="select-label"
+  >
+    Which Succession sibling are you?
+    <div
+      className="css-0"
+    >
+      Optional
+    </div>
+  </label>
+  <div
+    className="chakra-select__wrapper css-42b2qy"
+  >
+    <select
+      className="chakra-select css-1ik61og"
+      disabled={false}
+      id="select"
+      name="succession-sibling"
+      onBlur={[Function]}
+      onChange={[MockFunction]}
+      onFocus={[Function]}
+      required={false}
+      value=""
+    >
+      <option>
+        Kendall
+      </option>
+      <option>
+        Shiv
+      </option>
+      <option>
+        Connor
+      </option>
+      <option>
+        Roman
+      </option>
+      <option>
+        Tom
+      </option>
+    </select>
+    <div
+      className="chakra-select__icon-wrapper css-162mkon"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon chakra-select__icon css-onkibi"
+        focusable={false}
+        id="select-icon"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </div>
+  </div>
+</div>
+`;

package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx

@@ -1,20 +1,30 @@
+import { action } from "@storybook/addon-actions";
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
-import { action } from "@storybook/addon-actions";
 
-import { getCategory } from "../../utils/componentCategories";
+import SimpleGrid from "../Grid/SimpleGrid";
 import SkeletonLoader from "./SkeletonLoader";
 import {
-  SkeletonLoaderLayouts,
   SkeletonLoaderImageRatios,
+  SkeletonLoaderLayouts,
 } from "./SkeletonLoaderTypes";
-import SimpleGrid from "../Grid/SimpleGrid";
+import { getCategory } from "../../utils/componentCategories";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const imageRatiosEnumValues = getStorybookEnumValues(
+  SkeletonLoaderImageRatios,
+  "SkeletonLoaderImageRatios"
+);
+export const layoutsEnumValues = getStorybookEnumValues(
+  SkeletonLoaderLayouts,
+  "SkeletonLoaderLayouts"
+);
 
 <Meta
   title={getCategory("SkeletonLoader")}
@@ -23,17 +33,25 @@ import SimpleGrid from "../Grid/SimpleGrid";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17219%3A7",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=17219%3A7",
     },
     jest: ["SkeletonLoader.test.tsx"],
   }}
   argTypes={{
-    className: { table: { disable: true } },
+    className: { control: false },
     contentSize: { table: { defaultValue: { summary: "3" } } },
     headingSize: { table: { defaultValue: { summary: "1" } } },
-    imageAspectRatio: { table: { defaultValue: { summary: "square" } } },
-    layout: { table: { defaultValue: { summary: "column" } } },
+    imageAspectRatio: {
+      control: { type: "select" },
+      table: {
+        defaultValue: { summary: "SkeletonLoaderImageRatios.Square" },
+      },
+      options: imageRatiosEnumValues.options,
+    },
+    layout: {
+      table: { defaultValue: { summary: "SkeletonLoaderLayouts.Column" } },
+      options: layoutsEnumValues.options,
+    },
     showButton: { table: { defaultValue: { summary: "false" } } },
     showContent: { table: { defaultValue: { summary: "true" } } },
     showHeading: { table: { defaultValue: { summary: "true" } } },
@@ -58,16 +76,32 @@ to better view the example. The default value is `100%`.
 
 <Canvas withToolbar>
   <Story
-    name="Basic with Props"
+    name="SkeletonLoader with Controls"
     args={{
+      border: false,
+      className: undefined,
+      contentSize: 3,
+      headingSize: 1,
+      imageAspectRatio: "SkeletonLoaderImageRatios.Square",
+      layout: "SkeletonLoaderLayouts.Column",
+      showButton: false,
+      showContent: true,
+      showHeading: true,
+      showImage: true,
       width: "300px",
     }}
   >
-    {(args) => <SkeletonLoader {...args} />}
+    {(args) => (
+      <SkeletonLoader
+        {...args}
+        imageAspectRatio={imageRatiosEnumValues.getValue(args.imageAspectRatio)}
+        layout={layoutsEnumValues.getValue(args.layout)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with Props" />
+<ArgsTable story="SkeletonLoader with Controls" />
 
 # Card Placeholders in a Grid
 

package/src/components/SkeletonLoader/SkeletonLoader.tsx

@@ -15,13 +15,17 @@ export interface SkeletonLoaderProps {
   border?: boolean;
   /** Additional class name for the Skeleton component. */
   className?: string;
-  /** Optional numeric value to control the number of lines for content placeholder; default value is `3`. */
+  /** Optional numeric value to control the number of lines for content
+   * placeholder; default value is `3`. */
   contentSize?: number;
-  /** Optional numeric value to control the number of lines for heading placeholder; default value is `1`. */
+  /** Optional numeric value to control the number of lines for heading
+   * placeholder; default value is `1`. */
   headingSize?: number;
-  /** Optional value to control the aspect ratio of the image placeholder; default value is `square`. */
+  /** Optional value to control the aspect ratio of the image placeholder;
+   * default value is `SkeletonLoaderImageRatios.Square`. */
   imageAspectRatio?: SkeletonLoaderImageRatios;
-  /** Optional value to control the position of the image placeholder; default value is `column`. */
+  /** Optional value to control the position of the image placeholder;
+   * default value is `SkeletonLoaderLayouts.Column`. */
   layout?: SkeletonLoaderLayouts;
   /** Optional boolean value to control visibility of button placeholder. */
   showButton?: boolean;