@dxc-technology/halstack-react 0.0.0-ff43881 → 0.0.0-ff5083e

package/select/Select.stories.tsx

@@ -12,8 +12,8 @@ export default {
   title: "Select",
   component: DxcSelect,
 };
-const one_option = [{ label: "Option 01", value: "1" }];
 
+const one_option = [{ label: "Option 01", value: "1" }];
 const single_options = [
   { label: "Option 01", value: "1" },
   { label: "Option 02", value: "2" },
@@ -224,10 +224,12 @@ const optionsWithEllipsisMedium = [
   { label: "Optiond1234567890123456789012345678901234", value: "1" },
   { label: "Optiond12345678901234567890123456789012345", value: "2" },
   { label: "Option 031111111111111111111111111111222", value: "3" },
-  { label: "Option 03111111111111111111111111111122", value: "4" },
+  { label: "Option 03111111111111111111111111111222", value: "4" },
 ];
+
 const Select = () => (
   <>
+    <Title title="States" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
       <DxcSelect label="Hovered" options={single_options} />
@@ -242,99 +244,107 @@ const Select = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled with value" theme="light" level={4} />
-      <DxcSelect label="Disabled with value" disabled options={single_options} value="1" />
+      <DxcSelect label="Disabled with value" disabled options={single_options} defaultValue="1" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="With label" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} />
-      <Title title="Label and placeholder" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} placeholder="Placeholder" />
-      <Title title="Label, placeholder and helper text" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} helperText="Helper text" placeholder="Placeholder" />
       <Title title="Error" theme="light" level={4} />
       <DxcSelect
         label="Label"
         options={single_options}
-        error="Error message"
+        error="Error message."
+        helperText="Helper text"
+        placeholder="Placeholder"
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered error" theme="light" level={4} />
+      <DxcSelect
+        label="Label"
+        options={single_options}
+        error="Error message."
         helperText="Helper text"
         placeholder="Placeholder"
       />
+    </ExampleContainer>
+    <Title title="Anatomy" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Label, placeholder and helper text" theme="light" level={4} />
+      <DxcSelect label="Label" options={single_options} helperText="Helper text" placeholder="Placeholder" />
+    </ExampleContainer>
+    <Title title="Variants" theme="light" level={2} />
+    <ExampleContainer>
       <Title title="Simple selection" theme="light" level={4} />
-      <DxcSelect label="Simple selection" searchable options={single_options} value="2" />
+      <DxcSelect label="Simple selection" searchable options={single_options} defaultValue="2" />
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="Multiple selection" theme="light" level={4} />
-      <DxcSelect label="Multiple select" searchable options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" searchable options={single_options} multiple defaultValue={["1", "2"]} />
     </ExampleContainer>
-
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Multiple clear hovered" theme="light" level={4} />
-      <DxcSelect label="Multiple select" options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" options={single_options} multiple defaultValue={["1", "2"]} />
     </ExampleContainer>
-
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Multiple clear actived" theme="light" level={4} />
-      <DxcSelect label="Multiple select" options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" options={single_options} multiple defaultValue={["1", "2"]} />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small size" theme="light" level={4} />
+      <DxcSelect label="Small" options={single_options} size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcSelect label="Medium" options={single_options} size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcSelect label="Large" options={single_options} size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Fillparent size" theme="light" level={4} />
+      <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="xxsmall margin" theme="light" level={4} />
+      <DxcSelect label="xxSmall" options={single_options} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xsmall margin" theme="light" level={4} />
+      <DxcSelect label="xSmall" options={single_options} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="small margin" theme="light" level={4} />
+      <DxcSelect label="Small" options={single_options} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="medium margin" theme="light" level={4} />
+      <DxcSelect label="Medium" options={single_options} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="large margin" theme="light" level={4} />
+      <DxcSelect label="Large" options={single_options} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xlarge margin" theme="light" level={4} />
+      <DxcSelect label="xLarge" options={single_options} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xxlarge margin" theme="light" level={4} />
+      <DxcSelect label="xxLarge" options={single_options} margin="xxlarge" />
     </ExampleContainer>
-    <>
-      <Title title="Sizes" theme="light" level={2} />
-      <ExampleContainer>
-        <Title title="Small size" theme="light" level={4} />
-        <DxcSelect label="Small" options={single_options} size="small" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Medium size" theme="light" level={4} />
-        <DxcSelect label="Medium" options={single_options} size="medium" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Large size" theme="light" level={4} />
-        <DxcSelect label="Large" options={single_options} size="large" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Fillparent size" theme="light" level={4} />
-        <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
-      </ExampleContainer>
-    </>
-    <>
-      <Title title="Margins" theme="light" level={2} />
-      <ExampleContainer>
-        <Title title="xxsmall margin" theme="light" level={4} />
-        <DxcSelect label="xxSmall" options={single_options} margin="xxsmall" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="xsmall margin" theme="light" level={4} />
-        <DxcSelect label="xSmall" options={single_options} margin="xsmall" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="small margin" theme="light" level={4} />
-        <DxcSelect label="Small" options={single_options} margin="small" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="medium margin" theme="light" level={4} />
-        <DxcSelect label="Medium" options={single_options} margin="medium" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="large margin" theme="light" level={4} />
-        <DxcSelect label="Large" options={single_options} margin="large" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="xlarge margin" theme="light" level={4} />
-        <DxcSelect label="xLarge" options={single_options} margin="xlarge" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="xxlarge margin" theme="light" level={4} />
-        <DxcSelect label="xxLarge" options={single_options} margin="xxlarge" />
-      </ExampleContainer>
-    </>
     <ExampleContainer expanded>
       <Title title="Ellipsis" theme="light" level={2} />
       <Title title="Multiple selection with ellipsis" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} multiple value={["1", "2", "3", "4"]} />
+      <DxcSelect label="Label" options={single_options} multiple defaultValue={["1", "2", "3", "4"]} />
       <Title title="Value with ellipsis" theme="light" level={4} />
-      <DxcSelect label="Label" options={optionsWithEllipsisMedium} value="1" size="medium" />
+      <DxcSelect label="Label" options={optionsWithEllipsisMedium} defaultValue="1" size="medium" />
       <Title title="Option with ellipsis" theme="light" level={4} />
       <DxcSelect
         label="Label"
         placeholder="Choose an option"
-        value="1"
+        defaultValue="1"
         options={optionsWithEllipsisMedium}
         size="medium"
       />
@@ -344,7 +354,7 @@ const Select = () => (
 export const Chromatic = Select.bind({});
 Chromatic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getAllByRole("combobox")[25]);
+  await userEvent.click(canvas.getAllByRole("combobox")[24]);
 };
 const DefaultSelect = () => (
   <ExampleContainer expanded>
@@ -361,7 +371,13 @@ const SearchableSelect = () => (
 const SearchableWithValue = () => (
   <ExampleContainer expanded>
     <Title title="Searchable select with value" theme="light" level={4} />
-    <DxcSelect label="Select Label" searchable value="1" options={single_options} placeholder="Choose an option" />
+    <DxcSelect
+      label="Select Label"
+      searchable
+      defaultValue="1"
+      options={single_options}
+      placeholder="Choose an option"
+    />
   </ExampleContainer>
 );
 
@@ -372,7 +388,7 @@ const MultipleSelect = () => (
       <DxcSelect
         label="Select label"
         options={single_options}
-        value={["1", "4"]}
+        defaultValue={["1", "4"]}
         multiple
         placeholder="Choose an option"
       />
@@ -382,31 +398,37 @@ const MultipleSelect = () => (
 const DefaultGroupedOptionsSelect = () => (
   <ExampleContainer expanded>
     <Title title="Grouped options simple select" theme="light" level={4} />
-    <DxcSelect label="Label" options={group_options} value="9" placeholder="Choose an option" />
+    <DxcSelect label="Label" options={group_options} defaultValue="9" placeholder="Choose an option" />
   </ExampleContainer>
 );
 const MultipleGroupedOptionsSelect = () => (
   <ExampleContainer expanded>
     <Title title="Grouped options multiple select" theme="light" level={4} />
-    <DxcSelect label="Label" options={group_options} value={["0", "2"]} multiple placeholder="Choose an option" />
+    <DxcSelect
+      label="Label"
+      options={group_options}
+      defaultValue={["0", "2"]}
+      multiple
+      placeholder="Choose an option"
+    />
   </ExampleContainer>
 );
 const RescaledIcons = () => (
   <ExampleContainer expanded>
     <Title title="Rescaled icons displayed" theme="light" level={4} />
-    <DxcSelect label="Label" options={url_options} value="facebook" placeholder="Choose an option" />
+    <DxcSelect label="Label" options={url_options} defaultValue="facebook" placeholder="Choose an option" />
   </ExampleContainer>
 );
 const SelectWithIcons = () => (
   <ExampleContainer expanded>
     <Title title="Normal icons displayed" theme="light" level={4} />
-    <DxcSelect label="Label" options={icon_options} value="3" placeholder="Choose an option" />
+    <DxcSelect label="Label" options={icon_options} defaultValue="3" placeholder="Choose an option" />
   </ExampleContainer>
 );
 const SelectMultipleWithIcons = () => (
   <ExampleContainer expanded>
     <Title title="Multiple select with icons" theme="light" level={4} />
-    <DxcSelect label="Label" options={icon_options} multiple value={["1", "3"]} placeholder="Choose an option" />
+    <DxcSelect label="Label" options={icon_options} multiple defaultValue={["1", "3"]} placeholder="Choose an option" />
   </ExampleContainer>
 );
 const MultipleGroupedOptionsSelectWithIcons = () => (
@@ -416,7 +438,7 @@ const MultipleGroupedOptionsSelectWithIcons = () => (
       label="Label"
       options={icon_options_grouped}
       multiple
-      value={["3", "2"]}
+      defaultValue={["3", "2"]}
       placeholder="Choose an option"
     />
   </ExampleContainer>
@@ -442,13 +464,13 @@ const OnlyOneOptionActived = () => (
 const SelectedOptionHovered = () => (
   <ExampleContainer pseudoState="pseudo-hover" expanded>
     <Title title="Hovered Selected Option" theme="light" level={4} />
-    <DxcSelect label="Hovered" value="1" options={one_option} placeholder="Choose an option" />
+    <DxcSelect label="Hovered" defaultValue="1" options={one_option} placeholder="Choose an option" />
   </ExampleContainer>
 );
 const SelectedOptionActived = () => (
   <ExampleContainer pseudoState="pseudo-active" expanded>
     <Title title="Actived Selected Option" theme="light" level={4} />
-    <DxcSelect label="Actived" value="1" options={one_option} placeholder="Choose an option" />
+    <DxcSelect label="Actived" defaultValue="1" options={one_option} placeholder="Choose an option" />
   </ExampleContainer>
 );
 const MultipleSearchable = () => (
@@ -458,7 +480,7 @@ const MultipleSearchable = () => (
       label="Select Label"
       searchable
       multiple
-      value={["1", "4"]}
+      defaultValue={["1", "4"]}
       options={single_options}
       placeholder="Choose an option"
     />