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

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

@@ -2,25 +2,20 @@
 
 exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="defaultRangeSlider-textInput-start"
     id="defaultRangeSlider-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
   >
     <div
-      className="css-oihlfv"
+      className="css-bunm4f"
     >
       <input
         aria-label="Label - start value"
@@ -143,7 +138,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label - end value"
@@ -163,45 +158,36 @@ exports[`Slider Range Slider renders the UI snapshot correctly 1`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="defaultRangeSlider-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="defaultRangeSlider-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="errored-textInput-start"
     id="errored-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
   >
     <div
-      className="css-oihlfv"
+      className="css-bunm4f"
     >
       <input
         aria-invalid={true}
@@ -325,7 +311,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-invalid={true}
@@ -346,45 +332,39 @@ exports[`Slider Range Slider renders the UI snapshot correctly 2`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component error text :(",
-        }
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component error text :(",
       }
-      data-isinvalid={true}
-      id="errored-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={true}
+    id="errored-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="required-textInput-start"
     id="required-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <div
     className="css-0"
   >
     <div
-      className="css-oihlfv"
+      className="css-bunm4f"
     >
       <input
         aria-label="Label - start value"
@@ -508,7 +488,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label - end value"
@@ -529,45 +509,36 @@ exports[`Slider Range Slider renders the UI snapshot correctly 3`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="required-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="required-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="disabled-textInput-start"
     id="disabled-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
   >
     <div
-      className="css-oihlfv"
+      className="css-bunm4f"
     >
       <input
         aria-label="Label - start value"
@@ -692,7 +663,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label - end value"
@@ -712,33 +683,29 @@ exports[`Slider Range Slider renders the UI snapshot correctly 4`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="disabled-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="disabled-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
   >
     <div
-      className="css-oihlfv"
+      className="css-bunm4f"
     >
       <input
         aria-label="Label - start value"
@@ -861,7 +828,7 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label - end value"
@@ -885,19 +852,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 5`] = `
 
 exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor={null}
     id="noVisibleValues-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
@@ -998,27 +960,23 @@ exports[`Slider Range Slider renders the UI snapshot correctly 6`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="noVisibleValues-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="noVisibleValues-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -1123,19 +1081,14 @@ exports[`Slider Range Slider renders the UI snapshot correctly 7`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="defaultSlider-textInput-end"
     id="defaultSlider-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
@@ -1222,7 +1175,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label"
@@ -1242,39 +1195,30 @@ exports[`Slider Single Slider renders the UI snapshot correctly 1`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="defaultSlider-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="defaultSlider-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="errored-textInput-end"
     id="errored-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
@@ -1361,7 +1305,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-invalid={true}
@@ -1382,39 +1326,33 @@ exports[`Slider Single Slider renders the UI snapshot correctly 2`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="polite"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component error text :(",
-        }
+    aria-atomic={true}
+    aria-live="polite"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component error text :(",
       }
-      data-isinvalid={true}
-      id="errored-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={true}
+    id="errored-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="required-textInput-end"
     id="required-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Required
-    </div>
+    <span>
+       (Required)
+    </span>
   </label>
   <div
     className="css-0"
@@ -1501,7 +1439,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label"
@@ -1522,39 +1460,30 @@ exports[`Slider Single Slider renders the UI snapshot correctly 3`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="required-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="required-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor="disabled-textInput-end"
     id="disabled-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
@@ -1643,7 +1572,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label"
@@ -1663,27 +1592,23 @@ exports[`Slider Single Slider renders the UI snapshot correctly 4`] = `
     </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "Component helper text.",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
       }
-      data-isinvalid={false}
-      id="disabled-helperText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="disabled-helperText"
+  />
 </div>
 `;
 
 exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <div
     className="css-0"
@@ -1769,7 +1694,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
       100
     </div>
     <div
-      className="css-1g047oq"
+      className="css-1ebeaqx"
     >
       <input
         aria-label="Label"
@@ -1793,19 +1718,14 @@ exports[`Slider Single Slider renders the UI snapshot correctly 5`] = `
 
 exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
   <label
-    className="css-0"
+    className="css-1xdhyk6"
     htmlFor={null}
     id="noVisibleValues-label"
   >
     Label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </label>
   <div
     className="css-0"
@@ -1882,32 +1802,121 @@ exports[`Slider Single Slider renders the UI snapshot correctly 6`] = `
       />
     </div>
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
+      }
+    }
+    data-isinvalid={false}
+    id="noVisibleValues-helperText"
+  />
+</div>
+`;
+
+exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+>
   <div
     className="css-0"
   >
     <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
+      className="chakra-slider css-0"
+      style={
         Object {
-          "__html": "Component helper text.",
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "outline": 0,
+          "paddingBottom": 0,
+          "paddingTop": 0,
+          "position": "relative",
+          "touchAction": "none",
+          "userSelect": "none",
         }
       }
-      data-isinvalid={false}
-      id="noVisibleValues-helperText"
-    />
+      tabIndex={-1}
+    >
+      <div
+        className="chakra-slider__track css-0"
+        id="slider-track-onlySlider"
+        style={
+          Object {
+            "position": "absolute",
+            "top": "50%",
+            "transform": "translateY(-50%)",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          className="chakra-slider__filled-track css-0"
+          style={
+            Object {
+              "left": "0%",
+              "position": "absolute",
+              "top": "50%",
+              "transform": "translateY(-50%)",
+              "width": "50%",
+            }
+          }
+        />
+      </div>
+      <div
+        aria-label="Label"
+        aria-orientation="horizontal"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="chakra-slider__thumb css-0"
+        id="slider-thumb-onlySlider"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        role="slider"
+        style={
+          Object {
+            "MozUserSelect": "none",
+            "WebkitUserSelect": "none",
+            "left": "calc(50% - 0px)",
+            "msUserSelect": "none",
+            "position": "absolute",
+            "touchAction": "none",
+            "userSelect": "none",
+          }
+        }
+        tabIndex={0}
+      />
+      <input
+        type="hidden"
+        value={50}
+      />
+    </div>
   </div>
 </div>
 `;
 
-exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
+exports[`Slider Single Slider renders the UI snapshot correctly 8`] = `
 <div
-  className="css-0"
+  className="css-kle7zy"
 >
+  <label
+    className="css-1xdhyk6"
+    htmlFor="chakra-textInput-end"
+    id="chakra-label"
+  >
+    Label
+  </label>
   <div
     className="css-0"
   >
+    <div
+      className="css-0"
+    >
+      0
+    </div>
     <div
       className="chakra-slider css-0"
       style={
@@ -1925,7 +1934,7 @@ exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
     >
       <div
         className="chakra-slider__track css-0"
-        id="slider-track-onlySlider"
+        id="slider-track-chakra"
         style={
           Object {
             "position": "absolute",
@@ -1949,13 +1958,145 @@ exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
         />
       </div>
       <div
+        aria-label={null}
+        aria-labelledby="chakra-label"
+        aria-orientation="horizontal"
+        aria-valuemax={100}
+        aria-valuemin={0}
+        aria-valuenow={50}
+        className="chakra-slider__thumb css-0"
+        id="slider-thumb-chakra"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        role="slider"
+        style={
+          Object {
+            "MozUserSelect": "none",
+            "WebkitUserSelect": "none",
+            "left": "calc(50% - 0px)",
+            "msUserSelect": "none",
+            "position": "absolute",
+            "touchAction": "none",
+            "userSelect": "none",
+          }
+        }
+        tabIndex={0}
+      />
+      <input
+        type="hidden"
+        value={50}
+      />
+    </div>
+    <div
+      className="css-0"
+    >
+      100
+    </div>
+    <div
+      className="css-1ebeaqx"
+    >
+      <input
         aria-label="Label"
+        className="chakra-input css-0"
+        disabled={false}
+        id="chakra-textInput-end"
+        max={100}
+        min={0}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        step={1}
+        type="number"
+        value="50"
+      />
+    </div>
+  </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
+      }
+    }
+    data-isinvalid={false}
+    id="chakra-helperText"
+  />
+</div>
+`;
+
+exports[`Slider Single Slider renders the UI snapshot correctly 9`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="props-textInput-end"
+    id="props-label"
+  >
+    Label
+  </label>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      0
+    </div>
+    <div
+      className="chakra-slider css-0"
+      style={
+        Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "outline": 0,
+          "paddingBottom": 0,
+          "paddingTop": 0,
+          "position": "relative",
+          "touchAction": "none",
+          "userSelect": "none",
+        }
+      }
+      tabIndex={-1}
+    >
+      <div
+        className="chakra-slider__track css-0"
+        id="slider-track-props"
+        style={
+          Object {
+            "position": "absolute",
+            "top": "50%",
+            "transform": "translateY(-50%)",
+            "width": "100%",
+          }
+        }
+      >
+        <div
+          className="chakra-slider__filled-track css-0"
+          style={
+            Object {
+              "left": "0%",
+              "position": "absolute",
+              "top": "50%",
+              "transform": "translateY(-50%)",
+              "width": "50%",
+            }
+          }
+        />
+      </div>
+      <div
+        aria-label={null}
+        aria-labelledby="props-label"
         aria-orientation="horizontal"
         aria-valuemax={100}
         aria-valuemin={0}
         aria-valuenow={50}
         className="chakra-slider__thumb css-0"
-        id="slider-thumb-onlySlider"
+        id="slider-thumb-props"
         onBlur={[Function]}
         onFocus={[Function]}
         onKeyDown={[Function]}
@@ -1978,6 +2119,42 @@ exports[`Slider Single Slider renders the UI snapshot correctly 7`] = `
         value={50}
       />
     </div>
+    <div
+      className="css-0"
+    >
+      100
+    </div>
+    <div
+      className="css-1ebeaqx"
+    >
+      <input
+        aria-label="Label"
+        className="chakra-input css-0"
+        disabled={false}
+        id="props-textInput-end"
+        max={100}
+        min={0}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        required={false}
+        step={1}
+        type="number"
+        value="50"
+      />
+    </div>
   </div>
+  <div
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "Component helper text.",
+      }
+    }
+    data-isinvalid={false}
+    id="props-helperText"
+  />
 </div>
 `;