♻️(react) create a generic LabelledBox

This component is responsible to display the label as placeholder for forms
input. It was tied inside Input but now we will need to have the same ui
for Select field, by extracting it in a dedicated component we make it
reusable quickly.

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

@@ -0,0 +1,31 @@
+.labelled-box {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+
+  %text-style {
+    font-size: var(--c--components--forms-input--font-size);
+    font-weight: var(--c--components--forms-input--font-weight);
+  }
+
+  label {
+    position: absolute;
+    font-size: var(--c--theme--font--sizes--s);
+    left: 0;
+    top: 0.5rem;
+    transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    color: var(--c--theme--colors--greyscale-900);
+    opacity: 0.8;
+
+    &.placeholder {
+      @extend %text-style;
+      top: 16px;
+    }
+  }
+
+  &__children {
+    padding: 1.5rem 0 0 0;
+    display: flex;
+  }
+}

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

@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import { LabelledBox } from ":/components/Forms/LabelledBox/index";
+
+export default {
+  title: "Components/Forms/LabelledBox",
+  component: LabelledBox,
+} as ComponentMeta<typeof LabelledBox>;
+
+const Template: ComponentStory<typeof LabelledBox> = (args) => (
+  <div style={{ height: "3.5rem" }}>
+    <LabelledBox {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Your label here",
+  children: <span className="clr-greyscale-800">Hello world</span>,
+};

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

@@ -0,0 +1,31 @@
+import React, { PropsWithChildren } from "react";
+
+export interface Props extends PropsWithChildren {
+  label?: string;
+  labelAsPlaceholder?: boolean;
+  htmlFor?: string;
+  labelId?: string;
+}
+
+export const LabelledBox = ({
+  children,
+  label,
+  labelAsPlaceholder,
+  htmlFor,
+  labelId,
+}: Props) => {
+  return (
+    <div className="labelled-box">
+      {label && (
+        <label
+          className={labelAsPlaceholder ? "placeholder" : ""}
+          htmlFor={htmlFor}
+          id={labelId}
+        >
+          {label}
+        </label>
+      )}
+      <div className="labelled-box__children">{children}</div>
+    </div>
+  );
+};

packages/react/src/index.scss

@@ -7,6 +7,7 @@
 @import './components/Forms/Field';
 @import './components/Forms/Radio';
 @import './components/Forms/Input';
+@import './components/Forms/LabelledBox';
 @import './components/Loader';
 @import './components/Pagination';