docs: add ColorPicker, SelectionList, Switch

apps/docs/src/components/code/Live.tsx

@@ -47,7 +47,7 @@ const generateScope = (hvComponents: string[], hvIcons: string[]) => {
 };
 
 export const Live = ({ children }: LiveProps) => {
-  const [initialCode] = useState(children.trimEnd());
+  const [initialCode] = useState(children?.trimEnd());
   const [code, setCode] = useState(initialCode);
   const [isExpanded, setIsExpanded] = useState(false);
   const editorTheme = useEditorTheme();

apps/docs/src/pages/components/color-picker.mdx

@@ -0,0 +1,90 @@
+import {
+  colorPickerClasses,
+  HvColorPicker,
+} from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+  const meta = await getComponentData(
+    "ColorPicker",
+    "core",
+    colorPickerClasses,
+  );
+  return { props: { ssg: { meta } } };
+};
+
+<Description />
+
+<Page>
+
+<Playground
+  Component={HvColorPicker}
+  componentName="HvColorPicker"
+  controls={{
+    label: { type: "text", defaultValue: "Color" },
+    iconOnly: { type: "check", defaultValue: false },
+    showCustomColors: { type: "check", defaultValue: true },
+    showSavedColors: { type: "check", defaultValue: true },
+  }}
+  componentProps={{
+    placeholder: "Select color",
+  }}
+/>
+
+### Region customization
+
+You can configure the following Color Picker regions:
+
+- The _recommended colors_ region, via the `recommendedColors` array and `recommendedColorsPosition`;
+- The _custom colors_ picker visibility, via `showCustomColors`;
+- The _saved colors_ region, via the `showSavedColors` and `savedColorsValue` or `defaultSavedColorsValue` (uncontrolled).
+
+```tsx live
+<HvColorPicker
+  defaultValue="#F6941E"
+  showCustomColors
+  showSavedColors
+  defaultSavedColorsValue={["#95A", "#E95", "#8BA", "#759"]}
+  recommendedColors={["#F00", "#0F0", "#00F", "#FF0", "#0FF", "#F0F"]}
+  recommendedColorsPosition="top"
+/>
+```
+
+### Controlled
+
+The value of the Color Picker can be controlled via the `value`/`onChange` props.
+The value can also be read from `onChangeComplete`, for a throttled value.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [color, setColor] = useState("#95AFE8");
+  const [finalColor, setFinalColor] = useState("#95AFE8");
+
+  return (
+    <div
+      className="flex justify-center font-bold size-240px p-md"
+      style={{ backgroundColor: finalColor }}
+    >
+      <HvColorPicker
+        aria-label="Color"
+        showSavedColors={false}
+        value={color}
+        onChange={setColor}
+        onChangeComplete={setFinalColor}
+      />
+    </div>
+  );
+}
+```
+
+### Related components
+
+- [`HvFormElement`](/components/form-element)
+
+</Page>

apps/docs/src/pages/components/select.mdx

@@ -2,7 +2,6 @@ import {
   HvOption,
   HvSelect,
   selectClasses,
-  theme,
 } from "@hitachivantara/uikit-react-core";
 
 import Playground from "@docs/components/code/Playground";
@@ -26,9 +25,9 @@ export const getStaticProps = async ({ params }) => {
     label: { type: "text", defaultValue: "Country" },
     description: { type: "text", defaultValue: "Please select a country" },
     multiple: { type: "check", defaultValue: false },
-    required: { defaultValue: false },
-    readOnly: { defaultValue: false },
-    disabled: { defaultValue: false },
+    required: { type: "check", defaultValue: false },
+    readOnly: { type: "check", defaultValue: false },
+    disabled: { type: "check", defaultValue: false },
   }}
   componentProps={{
     placeholder: "Select a value",

apps/docs/src/pages/components/selection-list.mdx

@@ -0,0 +1,95 @@
+import { Callout } from "nextra/components";
+import {
+  HvListItem,
+  HvSelectionList,
+  selectionListClasses,
+} from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+  const meta = await getComponentData(
+    "SelectionList",
+    "core",
+    selectionListClasses,
+  );
+  return { props: { ssg: { meta } } };
+};
+
+<Description />
+
+<Page>
+
+<Playground
+  Component={HvSelectionList}
+  componentName="HvSelectionList"
+  controls={{
+    required: { defaultValue: false },
+    disabled: { defaultValue: false },
+    readOnly: { defaultValue: false },
+    multiple: { defaultValue: true },
+    singleSelectionToggle: { defaultValue: false },
+    orientation: { type: "radio", defaultValue: "vertical" },
+  }}
+  componentProps={{
+    label: "Favourite fruits",
+    description: "Choose your favourite fruits",
+  }}
+>
+  <HvListItem value="avocado">🥑 Avocado</HvListItem>
+  <HvListItem value="banana">🍌 Banana</HvListItem>
+  <HvListItem value="carrot">🥕 Carrot</HvListItem>
+  <HvListItem value="dragonfruit">🐉 Dragonfruit</HvListItem>
+  <HvListItem value="eggplant">🍆 Eggplant</HvListItem>
+</Playground>
+
+<Callout type="info">
+  If you need single selection, consider using
+  [`HvRadioGroup`](/components/radio-group) or [`HvSelect`](/components/select)
+  instead.
+</Callout>
+
+### Controlled
+
+The value of `HvSelectionList` can be controlled by using the `value`/`onChange`. Status is controlled via the `status` and `statusMessage` props.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [value, setValue] = useState(["2"]);
+  const [status, setStatus] = useState<HvFormStatus>("standBy");
+
+  return (
+    <HvSelectionList
+      multiple
+      label="Choose the best fruits"
+      value={value}
+      onChange={(evt, newValue) => {
+        setValue(newValue);
+        setStatus(newValue?.includes("dragon") ? "invalid" : "valid");
+      }}
+      status={status}
+      statusMessage="Dragon is not a fruit!"
+    >
+      <HvListItem value="avocado">🥑 Avocado</HvListItem>
+      <HvListItem value="banana">🍌 Banana</HvListItem>
+      <HvListItem value="carrot">🥕 Carrot</HvListItem>
+      <HvListItem value="dragon">🐉 Dragon</HvListItem>
+      <HvListItem value="eggplant">🍆 Eggplant</HvListItem>
+    </HvSelectionList>
+  );
+}
+```
+
+### Related components
+
+- [`HvFormElement`](/components/form-element)
+- [`HvSelect`](/components/select)
+- [`HvListContainer`](/components/list-container)
+- [`HvRadioGroup`](/components/radio-group)
+
+</Page>

apps/docs/src/pages/components/switch.mdx

@@ -0,0 +1,120 @@
+import { HvSwitch, switchClasses } from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+  const meta = await getComponentData("Switch", "core", switchClasses);
+  return { props: { ssg: { meta } } };
+};
+
+<Description />
+
+<Page>
+
+<Playground
+  Component={HvSwitch}
+  componentName="HvSwitch"
+  controls={{
+    label: { type: "text", defaultValue: "Switch" },
+    required: { type: "check", defaultValue: false },
+    readOnly: { type: "check", defaultValue: false },
+    disabled: { type: "check", defaultValue: false },
+  }}
+/>
+
+### Controlled
+
+The selection state can be controlled by using the `checked`/`onChange` props.
+The `value` prop represents the underlying submission value of the switch when it is checked.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <HvButton variant="subtle" onClick={() => setChecked((prev) => !prev)}>
+        Toggle
+      </HvButton>
+      <HvSwitch
+        value="on"
+        checked={checked}
+        aria-label="Switch"
+        onChange={(_evt, newChecked) => setChecked(newChecked)}
+      />
+      <div>The switch is {checked ? "On" : "Off"}</div>
+    </>
+  );
+}
+```
+
+### Custom colors
+
+You can use the `color` prop to style the color of the switch.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <HvSwitch
+      checked={checked}
+      aria-label="Engine Control"
+      onChange={(_evt, newChecked) => setChecked(newChecked)}
+      color={checked ? "positive" : "negative"}
+    />
+  );
+}
+```
+
+### Custom switch
+
+A custom switch can be built by using the underlying form components, such as `HvLabel` and `HvInfoMessage`.
+See [`HvFormElement`](/components/form-element) for more information.
+
+```tsx live
+import { useRef } from "react";
+
+export default function Demo() {
+  const inputRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <div>
+      <div className="flex items-start">
+        <HvLabel label="Engine Control" htmlFor="switch-input" />
+        <HvInfoMessage id="switch-description">
+          This is a custom description
+        </HvInfoMessage>
+      </div>
+      <div className="flex items-center gap-xs">
+        <div aria-hidden onClick={() => inputRef.current?.click()}>
+          Off
+        </div>
+        <HvBaseSwitch
+          id="switch-input"
+          aria-describedby="switch-description"
+          inputRef={inputRef}
+          defaultChecked
+        />
+        <div aria-hidden onClick={() => inputRef.current?.click()}>
+          On
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+### Related components
+
+- [`HvFormElement`](/components/form-element)
+- [`HvRadio`](/components/radio)
+
+</Page>