✨(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/LabelledBox/index.scss

@@ -28,4 +28,14 @@
     padding: 1.5rem 0 0 0;
     display: flex;
   }
+
+  &--no-label {
+    display: flex;
+    align-items: center;
+
+    .labelled-box__children {
+      padding-top: 0;
+      flex-grow: 1;
+    }
+  }
 }

packages/react/src/components/Forms/LabelledBox/index.stories.tsx

@@ -7,17 +7,43 @@ export default {
   component: LabelledBox,
 } as Meta<typeof LabelledBox>;
 
-const Template: StoryFn<typeof LabelledBox> = (args) => (
-  <div style={{ height: "3.5rem" }}>
-    <LabelledBox {...args} />
-  </div>
-);
+const DebugContainer = ({ children }: React.PropsWithChildren<{}>) => {
+  const style: React.CSSProperties = {
+    height: "3.5rem",
+    // A grid background
+    backgroundImage: `linear-gradient(to right, #eee 1px, transparent 1px), linear-gradient(to bottom, #eee 1px, transparent 1px)`,
+    border: "solid #eee",
+    backgroundSize: "1rem 1rem",
+  };
+  return <div style={style}>{children}</div>;
+};
 
+const Template: StoryFn<typeof LabelledBox> = (args) => (
+  <DebugContainer>
+    <LabelledBox {...args} />
+  </DebugContainer>
+);
 export const Default = {
   render: Template,
-
   args: {
     label: "Your label here",
     children: <span className="clr-greyscale-800">Hello world</span>,
   },
 };
+
+export const LabelAsPlaceholder = {
+  render: Template,
+  args: {
+    label: "Your label here",
+    labelAsPlaceholder: true,
+  },
+};
+
+export const NoLabel = {
+  render: Template,
+  args: {
+    label: "Your label here",
+    hideLabel: true,
+    children: <span className="clr-greyscale-800">Hello world</span>,
+  },
+};

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

@@ -1,10 +1,12 @@
 import React, { PropsWithChildren } from "react";
+import classNames from "classnames";
 
 export interface Props extends PropsWithChildren {
   label?: string;
   labelAsPlaceholder?: boolean;
   htmlFor?: string;
   labelId?: string;
+  hideLabel?: boolean;
 }
 
 export const LabelledBox = ({
@@ -13,12 +15,20 @@ export const LabelledBox = ({
   labelAsPlaceholder,
   htmlFor,
   labelId,
+  hideLabel,
 }: Props) => {
   return (
-    <div className="labelled-box">
+    <div
+      className={classNames("labelled-box", {
+        "labelled-box--no-label": hideLabel,
+      })}
+    >
       {label && (
         <label
-          className={labelAsPlaceholder ? "placeholder" : ""}
+          className={classNames("labelled-box__label", {
+            placeholder: labelAsPlaceholder,
+            offscreen: hideLabel,
+          })}
           htmlFor={htmlFor}
           id={labelId}
         >