feat(look&feel): grid system (#683)

* feat(look&feel): grid system * fix(look&feel): demo form classmodifier
AxaFrance · Dec 20, 2024 · 56ae05e · 56ae05e
1 parent 7d84f95
commit 56ae05e
Show file tree

Hide file tree

Showing 57 changed files with 2,689 additions and 662 deletions.
diff --git a/look-and-feel/css/.storybook/main.js b/look-and-feel/css/.storybook/main.js
@@ -11,6 +11,7 @@ function getAbsolutePath(value) {
 /** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ["../public"],
   addons: [
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),

diff --git a/look-and-feel/css/.storybook/preview.js b/look-and-feel/css/.storybook/preview.js
@@ -5,6 +5,11 @@ import "../src/common/tokens.scss";
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   parameters: {
+    options: {
+      storySort: {
+        order: ["Guidelines", "Components"],
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,

diff --git a/look-and-feel/css/public/grille-look-and-feel.png b/look-and-feel/css/public/grille-look-and-feel.png
diff --git a/look-and-feel/css/public/offsets.png b/look-and-feel/css/public/offsets.png
diff --git a/look-and-feel/css/src/Button/Button.stories.ts b/look-and-feel/css/src/Button/Button.stories.ts
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/html";
+import { render } from "./render";
 import "./Button.scss";
 
 const meta: Meta = {
@@ -17,27 +18,7 @@ const VARIANTS = [
 ];
 
 export const Primary: StoryObj = {
-  render: (args) => {
-    const btn = document.createElement("button");
-    btn.innerHTML = args.label;
-    if (args.iconLeft) {
-      btn.innerHTML = `${args.iconLeft}${btn.innerHTML}`;
-    }
-    if (args.iconRight) {
-      btn.innerHTML = `${btn.innerHTML}${args.iconRight}`;
-    }
-
-    btn.className = [
-      "af-btn-client",
-      args.variant ? `af-btn-client--${args.variant}` : "",
-    ].join(" ");
-
-    if (args.disabled) {
-      btn.setAttribute("disabled", args.disabled);
-    }
-
-    return btn;
-  },
+  render,
   args: {
     label: "Button",
     variant: "",

diff --git a/look-and-feel/css/src/Button/render.ts b/look-and-feel/css/src/Button/render.ts
@@ -0,0 +1,23 @@
+import type { Args } from "@storybook/html";
+
+export const render = (args: Args) => {
+  const btn = document.createElement("button");
+  btn.innerHTML = args.label;
+  if (args.iconLeft) {
+    btn.innerHTML = `${args.iconLeft}${btn.innerHTML}`;
+  }
+  if (args.iconRight) {
+    btn.innerHTML = `${btn.innerHTML}${args.iconRight}`;
+  }
+
+  btn.className = [
+    "af-btn-client",
+    args.variant ? `af-btn-client--${args.variant}` : "",
+  ].join(" ");
+
+  if (args.disabled) {
+    btn.setAttribute("disabled", args.disabled);
+  }
+
+  return btn;
+};
diff --git a/look-and-feel/css/src/Form/Text/Text.scss b/look-and-feel/css/src/Form/Text/Text.scss
@@ -2,9 +2,20 @@
 
 .af-form {
   &__input-container {
+    --row-gap: calc(8 / var(--font-size-base) * 1rem);
+
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    row-gap: var(--row-gap);
+  }
+
+  &__label-container {
+    --row-gap: calc(4 / var(--font-size-base) * 1rem);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--row-gap);
   }
 
   &__input-label {
@@ -32,7 +43,6 @@
   }
 
   &__input-helper {
-    margin-top: 0.2rem;
     font-size: common.rem(14);
     line-height: common.rem(18);
     color: var(--color-gray-700);
@@ -44,6 +54,7 @@
   }
 
   &__input-more {
+    width: fit-content;
     fill: var(--color-axa);
 
     svg {
@@ -53,7 +64,6 @@
   }
 
   &__input-text {
-    margin-top: 0.5rem;
     padding: 1rem 2.5rem 1rem 1rem;
     border: 1px solid var(--color-gray);
     border-radius: var(--default-border-radius);

diff --git a/look-and-feel/css/src/Form/Text/Text.stories.ts b/look-and-feel/css/src/Form/Text/Text.stories.ts
@@ -1,4 +1,5 @@
-import type { Args, Meta, StoryObj } from "@storybook/html";
+import type { Meta, StoryObj } from "@storybook/html";
+import { render } from "./render";
 import "../../Button/Button.scss";
 import "../InputError/InputError.scss";
 import "./Text.scss";
@@ -10,7 +11,7 @@ const meta: Meta = {
     placeholder: "Your name",
     disabled: false,
     required: true,
-    isOnError: false,
+    helper: "Do you need help ?",
   },
   argTypes: {
     label: {
@@ -22,150 +23,43 @@ const meta: Meta = {
 
 export default meta;
 
-const getContainer = () => {
-  const container = document.createElement("div");
-  container.className = "af-form__input-container";
-
-  return container;
-};
-
-const getInput = (args: Args) => {
-  const input = document.createElement("input");
-  input.id = "nameid";
-  input.name = "name";
-  input.className = "af-form__input-text";
-  if (args.isOnError) input.className += " af-form__input-text--error";
-  input.placeholder = args.placeholder;
-  input.type = args.type;
-  input.value = args.value;
-  input.disabled = args.disabled;
-  input.required = args.required;
-
-  return input;
-};
-
-const getLabel = (args: Args) => {
-  const label = document.createElement("label");
-  label.htmlFor = "nameid";
-  label.className = "af-form__input-label";
-  label.textContent = args.label;
-
-  if (args.required) {
-    const required = document.createElement("span");
-    required.textContent = " *";
-    label.appendChild(required);
-  }
-
-  return label;
-};
-
-const getDescription = (args: Args) => {
-  const description = document.createElement("span");
-  description.className = "af-form__input-description";
-  description.textContent = args.description;
-
-  return description;
-};
-
-const getError = (args: Args) => {
-  const alert = document.createElement("div");
-  alert.className = `af-input-error`;
-  alert.innerHTML = `
-        <svg class="af-input-error__icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ErrorOutlineIcon"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8"></path></svg>
-        ${
-          args.title &&
-          `<span class="af-input-error__message">${args.title}</span>`
-        }
-    `;
-
-  return alert;
-};
-
-const getKnowMore = () => {
-  const knowMore = document.createElement("button");
-  knowMore.className = "af-btn-client af-btn-client--ghost af-form__input-more";
-  knowMore.innerHTML = `<svg focusable="false" aria-hidden="true" viewBox="0 -960 960 960">
-    <path d="M453-280h60v-240h-60v240Zm26.98-314q14.02 0 23.52-9.2T513-626q0-14.45-9.48-24.22-9.48-9.78-23.5-9.78t-23.52 9.78Q447-640.45 447-626q0 13.6 9.48 22.8 9.48 9.2 23.5 9.2Zm.29 514q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm.23-60Q622-140 721-239.5t99-241Q820-622 721.19-721T480-820q-141 0-240.5 98.81T140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"></path>
-  </svg>
-  En savoir plus`;
-
-  return knowMore;
-};
-
 export const TextStory: StoryObj = {
   name: "Text",
-  render: (args) => {
-    const container = getContainer();
-    const input = getInput(args);
-    const label = getLabel(args);
-
-    container.appendChild(label);
-    container.appendChild(input);
-
-    return container;
-  },
+  render,
 };
 
 export const TextWithDescriptionStory: StoryObj = {
   name: "Text with description",
-  render: (args) => {
-    const container = getContainer();
-    const input = getInput(args);
-    const label = getLabel(args);
-    const description = getDescription(args);
-
-    container.appendChild(label);
-    container.appendChild(description);
-    container.appendChild(input);
-
-    return container;
-  },
+  render,
   args: {
     description: "Description",
   },
 };
 
 export const TextOnErrorStory: StoryObj = {
   name: "Text on error",
-  render: (args) => {
-    const container = getContainer();
-    const input = getInput(args);
-    const label = getLabel(args);
-
-    const description = getDescription(args);
-    const error = getError(args);
-
-    container.appendChild(label);
-    container.appendChild(description);
-    container.appendChild(input);
-    container.appendChild(error);
-
-    return container;
-  },
+  render,
   args: {
-    isOnError: true,
     description: "Description",
-    title: "Error Message",
+    error: "Error Message",
   },
 };
 
 export const TextWithKnowMore: StoryObj = {
   name: "Text with know more",
-  render: (args) => {
-    const container = getContainer();
-    const input = getInput(args);
-    const label = getLabel(args);
-    const description = getDescription(args);
-    const knowMore = getKnowMore();
-
-    container.appendChild(label);
-    container.appendChild(description);
-    container.appendChild(knowMore);
-    container.appendChild(input);
-
-    return container;
+  render,
+  args: {
+    description: "Description",
+    buttonLabel: "En savoir plus",
   },
+};
+
+export const TextWithFull: StoryObj = {
+  name: "Text Full",
+  render,
   args: {
     description: "Description",
+    buttonLabel: "En savoir plus",
+    error: "Error Message",
   },
 };