@nypl/design-system-react-components 0.25.9 → 0.25.12

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/Slider/Slider.stories.mdx

@@ -76,7 +76,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.4`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 <Description of={Slider} />
 

package/src/components/Slider/Slider.tsx

@@ -120,8 +120,8 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
   const styles = useMultiStyleConfig("CustomSlider", {
     isDisabled,
     isInvalid: finalIsInvalid,
-    isRangeSlider,
     showBoxes,
+    showValues,
   });
   // Props that the `Slider` and `RangeSlider` Chakra
   // components both use.
@@ -138,6 +138,9 @@ export default function Slider(props: React.PropsWithChildren<SliderProps>) {
     // *final* value once a user stops dragging the slider.
     onChangeEnd: (val) => onChange && onChange(val),
     step,
+    // Additional margins so slider thumbs don't overflow past the
+    // edge when the value boxes or min/max values are hidden.
+    sx: styles.sliderContainer,
   };
   // Props that the two `TextInput` components use.
   const textInputSharedProps = {

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

@@ -61,6 +61,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-defaultRangeSlider"
         style={
           Object {
@@ -242,6 +243,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-errored"
         style={
           Object {
@@ -424,6 +426,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-required"
         style={
           Object {
@@ -607,6 +610,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       <div
         className="chakra-slider__track css-0"
         data-disabled=""
+        data-testid="chakra-range-slider-track"
         id="slider-track-disabled"
         style={
           Object {
@@ -775,6 +779,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noLabels"
         style={
           Object {
@@ -915,6 +920,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-noVisibleValues"
         style={
           Object {
@@ -1035,6 +1041,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
     >
       <div
         className="chakra-slider__track css-0"
+        data-testid="chakra-range-slider-track"
         id="slider-track-onlySlider"
         style={
           Object {

package/src/components/StructuredContent/StructuredContent.stories.mdx

@@ -68,7 +68,7 @@ export const imageSizeEnumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.11`  |
 
 <Description of={StructuredContent} />
 

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -51,11 +51,11 @@ implementation is `dir="rtl"`.
 
 The placement of this attribute can be added at the root `<html>` element but can
 also be placed in specific DOM elements within a page to target specific page sections.
-For example, if you only want to target NYPL DS components within the `nypl-ds` class,
-the `dir` attribute can be added to that element:
+For example, if you only want to target NYPL DS components within your top-level
+`app` class, the `dir` attribute can be added to that element:
 
 ```jsx
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   ...
 </div>
 ```
@@ -66,7 +66,7 @@ do the following:
 
 ```jsx
 // don't do this
-<div className="app nypl-ds" dir="rtl">
+<div className="app" dir="rtl">
   <div dir="rtl">
     <p dir="rtl">
       Some text <button dir="rtl">Button</button>