✨(react) add clearable option to Select

Based on a feedback given from another project, we want to be able
to disable the clear feature on the select.

Resolve #60

.changeset/swift-shoes-tell.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add clearable option to Select

packages/react/src/components/Forms/Select/index.mdx

@@ -75,6 +75,14 @@ By default, the select has a default width, like all inputs. But you can force i
   <Story id="components-forms-select-mono--full-width"/>
 </Canvas>
 
+## Clearable
+
+By default, the select is clearable ( the cross icon on the right is shown ). You can disable it by using the `clearable` props.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-select-mono--not-clearable"/>
+</Canvas>
+
 ## Controlled / Non Controlled
 
 Like a native select, you can use the Select component in a controlled or non controlled way. You can see the example below

packages/react/src/components/Forms/Select/index.spec.tsx

@@ -1028,5 +1028,44 @@ describe("<Select/>", () => {
         city: null,
       });
     });
+
+    it("should not be clearable", async () => {
+      render(
+        <CunninghamProvider>
+          <Select
+            label="City"
+            options={[
+              {
+                label: "Paris",
+              },
+              {
+                label: "London",
+              },
+              {
+                label: "New York",
+              },
+              {
+                label: "Tokyo",
+              },
+            ]}
+            clearable={false}
+            defaultValue="Paris"
+          />
+        </CunninghamProvider>
+      );
+      screen.getByRole("combobox", {
+        name: "City",
+      });
+      const valueRendered = document.querySelector(".c__select__inner__value");
+
+      // Make sure default value is rendered.
+      expect(valueRendered).toHaveTextContent("Paris");
+      // Make sure the clear button is not rendered.
+      expect(
+        screen.queryByRole("button", {
+          name: "Clear selection",
+        })
+      ).not.toBeInTheDocument();
+    });
   });
 });

packages/react/src/components/Forms/Select/index.tsx

@@ -34,6 +34,7 @@ type Props = PropsWithChildren &
       target: { value: string | number | undefined };
     }) => void;
     disabled?: boolean;
+    clearable?: boolean;
   };
 
 function getOptionsFilter(inputValue?: string) {
@@ -96,6 +97,7 @@ const SelectAux = ({
   downshiftReturn,
   value,
   disabled,
+  clearable = true,
 }: SelectAuxProps) => {
   const { t } = useCunningham();
   const labelProps = downshiftReturn.getLabelProps();
@@ -148,7 +150,7 @@ const SelectAux = ({
             <div className="c__select__inner">
               <div className="c__select__inner__value">{children}</div>
               <div className="c__select__inner__actions">
-                {!disabled && downshiftReturn.selectedItem && (
+                {clearable && !disabled && downshiftReturn.selectedItem && (
                   <>
                     <Button
                       color="tertiary"

packages/react/src/components/Forms/Select/mono.stories.tsx

@@ -155,6 +155,16 @@ export const FullWidth = {
   },
 };
 
+export const NotClearable = {
+  render: Template,
+  args: {
+    label: "Select a city",
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+    clearable: false,
+  },
+};
+
 export const Success = {
   render: Template,