✨(react) add the possibility to hide select label

Based on recent feedbacks this feature was needed. It is important for
the label to still be accessible to screen readers, that's why we
introduced the offscreen class.

Resolve #60

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

@@ -93,6 +93,16 @@ You can disable some options by using the `disabled` props on the `Option` objec
   <Story id="components-forms-select-mono--disabled-options"/>
 </Canvas>
 
+## Hide label
+
+For some reasons you might want to hide the label of the select. You can do that by using the `hideLabel` props.
+
+> It is important for accessibility to always have a label for your inputs. Keep in mind that setting `hideLabel` to `true`, will only hide the label visually, but it will still be available for screen readers in the DOM.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-select-mono--hidden-label"/>
+</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.scss

@@ -86,6 +86,15 @@
     }
   }
 
+  .labelled-box--no-label {
+    .c__select__inner {
+      align-items: center;
+      &__actions {
+        top: 0;
+      }
+    }
+  }
+
   &__menu {
     position: absolute;
     overflow: auto;

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

@@ -1133,5 +1133,37 @@ describe("<Select/>", () => {
       expectMenuToBeClosed(menu);
       expect(valueRendered).toHaveTextContent("Tokyo");
     });
+
+    it("is accessible if the the label is not shown", async () => {
+      render(
+        <CunninghamProvider>
+          <Select
+            label="City"
+            options={[
+              {
+                label: "Paris",
+              },
+              {
+                label: "London",
+              },
+              {
+                label: "New York",
+                disabled: true,
+              },
+              {
+                label: "Tokyo",
+              },
+            ]}
+            hideLabel={true}
+          />
+        </CunninghamProvider>
+      );
+      // Make sure the input is accessible.
+      screen.getByRole("combobox", {
+        name: "City",
+      });
+      const label = screen.getByText("City");
+      expect(Array.from(label.classList)).toContain("offscreen");
+    });
   });
 });

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

@@ -26,6 +26,7 @@ interface Option {
 type Props = PropsWithChildren &
   FieldProps & {
     label: string;
+    hideLabel?: boolean;
     options: Option[];
     searchable?: boolean;
     name?: string;
@@ -93,6 +94,7 @@ const SelectAux = ({
   options,
   name,
   label,
+  hideLabel,
   labelAsPlaceholder,
   downshiftProps,
   downshiftReturn,
@@ -142,8 +144,10 @@ const SelectAux = ({
               value={optionToValue(downshiftReturn.selectedItem)}
             />
           )}
+
           <LabelledBox
             label={label}
+            hideLabel={hideLabel}
             labelAsPlaceholder={labelAsPlaceholder}
             htmlFor={labelProps.htmlFor}
             labelId={labelProps.id}

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

@@ -56,6 +56,17 @@ export const WithText = {
   },
 };
 
+export const HiddenLabel = {
+  render: Template,
+
+  args: {
+    label: "Select a city",
+    hideLabel: true,
+    options: OPTIONS,
+    defaultValue: OPTIONS[4].value,
+  },
+};
+
 export const Controlled = () => {
   const [value, setValue] = useState(OPTIONS[8].value);
   return (