From df57fb8a5734144f602e6db83feb1a73eae92fe1 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 5 May 2023 16:03:31 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20create=20a=20generi?=
 =?UTF-8?q?c=20LabelledBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/Forms/LabelledBox/index.scss   | 31 +++++++++++++++++++
 .../Forms/LabelledBox/index.stories.tsx       | 20 ++++++++++++
 .../components/Forms/LabelledBox/index.tsx    | 31 +++++++++++++++++++
 packages/react/src/index.scss                 |  1 +
 4 files changed, 83 insertions(+)
 create mode 100644 packages/react/src/components/Forms/LabelledBox/index.scss
 create mode 100644 packages/react/src/components/Forms/LabelledBox/index.stories.tsx
 create mode 100644 packages/react/src/components/Forms/LabelledBox/index.tsx

diff --git a/packages/react/src/components/Forms/LabelledBox/index.scss b/packages/react/src/components/Forms/LabelledBox/index.scss
new file mode 100644
index 0000000..4d94d19
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/react/src/components/Forms/LabelledBox/index.stories.tsx b/packages/react/src/components/Forms/LabelledBox/index.stories.tsx
new file mode 100644
index 0000000..bf07006
--- /dev/null
+++ b/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>,
+};
diff --git a/packages/react/src/components/Forms/LabelledBox/index.tsx b/packages/react/src/components/Forms/LabelledBox/index.tsx
new file mode 100644
index 0000000..5079ee9
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index e58fc1e..154b440 100644
--- a/packages/react/src/index.scss
+++ b/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';