docs(Icons): remove Slider

Author: jmfrancois

packages/storybook/src/icons/icons.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import * as Icons from "@qlik/sprout-icons/react";
-import { classNames, Slider, TextField } from "@qlik/sprout-react";
+import { classNames, Select, TextField } from "@qlik/sprout-react";
 import type { Meta } from "@storybook/react";
 import { useState } from "react";
 
@@ -10,38 +10,12 @@ const meta: Meta = {
 
 export default meta;
 
-const SIZES: Record<number, string> = {
-  1: "s",
-  2: "m",
-  3: "l",
-  4: "xl",
-  5: "xxl",
-  6: "2xl",
-  7: "3xl",
-  8: "4xl",
-  9: "5xl",
-  10: "6xl",
-  11: "7xl",
-};
-
-const Marks: Array<{ value: keyof typeof SIZES; label: string }> = [
-  { value: 1, label: "s" },
-  { value: 2, label: "m" },
-  { value: 3, label: "l" },
-  { value: 4, label: "xl" },
-  { value: 5, label: "xxl" },
-  { value: 6, label: "2xl" },
-  { value: 7, label: "3xl" },
-  { value: 8, label: "4xl" },
-  { value: 9, label: "5xl" },
-  { value: 10, label: "6xl" },
-  { value: 11, label: "7xl" },
-];
+const SIZES = ["s", "m", "l", "xl", "xxl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"] as const;
 
 export const AllIcons = {
   render: () => {
     const [search, setSearch] = useState("");
-    const [size, setSize] = useState(5);
+    const [size, setSize] = useState("xxl");
     return (
       <div className={classNames("flex", "flex-col", "gap-l", "flex-wrap")}>
         <div className={classNames("flex-noreset", "w-m", "flex-row", "items-start", "p-s", "gap-s", "justify-start")}>
@@ -53,18 +27,19 @@ export const AllIcons = {
             }}
             aria-label="Search icons"
           />
-          <Slider.Single
-            aria-label="Icon size"
-            min={1}
-            max={11}
-            step={1}
-            marks={Marks}
+          <Select.Select
+            aria-label="Size"
             value={size}
-            valueLabelFormat={(value) => SIZES[value]}
-            onChange={(value) => {
-              setSize(value);
+            onChange={(e) => {
+              setSize(e.target.value || "xxl");
             }}
-          />
+          >
+            {SIZES.map((currentSize) => (
+              <Select.Option key={currentSize} value={currentSize}>
+                {currentSize}
+              </Select.Option>
+            ))}
+          </Select.Select>
         </div>
         <div className={classNames("flex", "flex-row", "flex-wrap", "gap-m", "w-fit")}>
           {Object.entries(Icons)
@@ -77,7 +52,7 @@ export const AllIcons = {
               >
                 <span className={classNames("font-script-s", "text-weak", "break-all")}>{name}</span>
                 <div className={classNames("flex", "items-center", "justify-center", "flex-1", "text-default")}>
-                  <Icon className={classNames(`size-${SIZES[size]}`)} />
+                  <Icon className={classNames(`size-${size}`)} />
                 </div>
               </div>
             ))}