chore(sb): update introduction

cb17d621 · Bastien DUMONT · e89fb082 · cb17d621 · cb17d621 · cb17d621
Commit cb17d621 authored 1 year ago by Bastien DUMONT
--- a/src/stories/Introduction.mdx
+++ b/src/stories/Introduction.mdx
@@ -2,13 +2,15 @@ import { Meta } from '@storybook/blocks';
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';
+import Composants from './assets/composants.svg';
 import Direction from './assets/direction.svg';
 import Flow from './assets/flow.svg';
+import Maquettes from './assets/maquettes.svg';
 import Plugin from './assets/plugin.svg';
 import Repo from './assets/repo.svg';
 import StackAlt from './assets/stackalt.svg';

-<Meta title="Example/Introduction" />
+<Meta title="Introdution/DesignSystem" />

 <style>
  {`
@@ -59,7 +61,7 @@ import StackAlt from './assets/stackalt.svg';
    }

    .link-item:hover {
-      border-color: #1EA7FD50;
+      border-color: #DA363550;
      transform: translate3d(0, -3px, 0);
      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
    }
@@ -116,45 +118,66 @@ import StackAlt from './assets/stackalt.svg';
  `}
 </style>

-# Welcome to Storybook
+# Welcome to Rés’in's Design System

-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+### Règles générales

-Browse example stories now by navigating to them in the sidebar.
-View their code in the `stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+<ul>
+  <li>La V3 utilise un système de contour pour identifier les différents blocs</li>
+  <li>
+    Des ombres portées et contours contrastés permettent de renforcer l’accessibilité sur les statuts Hover et Active
+  </li>
+  <li>
+    La V3 n’utilise que du noir et rouge dans ses blocs mais ouvre rés’in à d’autres couleurs avec ses illustrations
+  </li>
+  <li>Le header et footer ne sont PAS stickys</li>
+</ul>

-<div className="subheading">Configure</div>
+<div className="subheading">Maquettes</div>

 <div className="link-list">
  <a
    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
+    href="https://www.figma.com/file/RYLwEgs0hKkFN0zFoeHWWu/R%C3%A9s'in-%5BComposants%5D-V3?type=design&node-id=8255-41412&mode=design&t=R3ZAhWMJf0K7JSBs-0"
    target="_blank"
  >
-    <img src={Plugin} alt="plugin" />
+    <img src={Composants} alt="composants" />
    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
+      <strong>Composants & styles</strong>
+      Figma Rés’in
    </span>
  </a>
  <a
    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
+    href="https://www.figma.com/file/woO8Hxu3Da5fUIYlob3Tx5/R%C3%A9s'in-%5BRecherches%5D-V3?type=design&mode=design&t=KlT5EYcmv8fkx8ta-0"
    target="_blank"
  >
+    <img src={Maquettes} alt="maquettes" />
+    <span>
+      <strong>Maquettes</strong>
+      Recherches et validés
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
    <img src={StackAlt} alt="Build" />
    <span>
      <strong>Build configuration</strong>
      How to customize webpack and Babel
    </span>
  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
    <img src={Colors} alt="colors" />
    <span>
      <strong>Styling</strong>
@@ -208,6 +231,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>

 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>stories/Introduction.stories.mdx</code>
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
 </div>
--- a/src/stories/assets/composants.svg
+++ b/src/stories/assets/composants.svg
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_8248_41600)">
+    <path opacity="0.8"
+      d="M209 83.743C209 97.086 201.465 104.907 187.693 108.031C178.112 110.198 169.455 110.341 143.308 109.593C135.874 109.344 128.438 109.208 121 109.186C114.51 109.186 108.867 109.296 98.6919 109.593C72.5449 110.341 63.8879 110.198 54.3069 108.031C40.5349 104.907 32.9999 97.086 32.9999 83.743C32.9999 53.493 71.5329 33 121 33C170.467 33 209 53.504 209 83.743ZM32.9669 202.114C32.9669 212.542 39.7209 218.064 51.3809 219.494C58.9929 220.44 63.7229 220.209 87.6369 218.339C101.739 217.228 110.935 216.733 120.967 216.733C130.999 216.733 140.184 217.228 154.297 218.339C178.211 220.209 182.93 220.429 190.542 219.494C202.202 218.064 208.967 212.542 208.967 202.114C208.967 180.477 186.395 176.088 128.722 175.967H113.201C55.5279 176.077 32.9669 180.477 32.9669 202.114ZM41.2939 138.754C40.0458 139.482 38.6665 139.957 37.2349 140.152C35.8032 140.347 34.3471 140.258 32.9497 139.891C31.5524 139.523 30.2412 138.883 29.0909 138.009C27.9407 137.135 26.9739 136.042 26.2459 134.794C25.5178 133.546 25.0427 132.167 24.8477 130.735C24.6527 129.303 24.7416 127.847 25.1093 126.45C25.4771 125.053 26.1164 123.741 26.9909 122.591C27.8653 121.441 28.9578 120.474 30.2059 119.746C37.9807 115.152 46.849 112.735 55.8799 112.75C62.1829 112.75 65.9889 113.85 71.5659 116.49L71.7089 116.556C74.7009 117.964 75.6799 118.25 78.3749 118.25C80.9709 118.25 81.6969 118.03 84.2819 116.71L84.4029 116.644C89.7379 113.916 93.5549 112.75 99.9459 112.75C106.436 112.75 110.275 113.949 115.632 116.765L115.676 116.787C118.118 118.074 118.701 118.25 121 118.25C123.299 118.25 123.86 118.074 126.302 116.787L126.357 116.765C131.703 113.949 135.542 112.75 142.054 112.75C148.478 112.75 152.284 113.916 157.696 116.666C160.402 118.03 161.106 118.25 163.625 118.25C166.155 118.25 166.914 118.03 169.609 116.666L169.675 116.633C175.12 113.905 178.926 112.75 185.328 112.75C194.282 112.75 203.027 115.06 211.442 119.548C214.015 120.925 215.936 123.268 216.782 126.061C217.627 128.854 217.329 131.869 215.952 134.442C214.575 137.015 212.232 138.936 209.439 139.782C206.646 140.627 203.631 140.329 201.058 138.952C196.25 136.253 190.841 134.808 185.328 134.75C182.908 134.75 182.193 134.97 179.542 136.29C173.976 139.084 170.126 140.25 163.625 140.25C157.113 140.25 153.252 139.073 147.796 136.312L147.741 136.279C145.145 134.959 144.463 134.75 142.054 134.75C139.667 134.75 139.062 134.937 136.598 136.235L136.543 136.257C131.23 139.062 127.424 140.25 121 140.25C114.576 140.25 110.77 139.062 105.446 136.257L105.402 136.235C102.927 134.937 102.322 134.75 99.9459 134.75C97.5809 134.75 96.9209 134.948 94.4349 136.224L94.3029 136.29C88.8909 139.062 84.9639 140.25 78.3749 140.25C71.8849 140.25 67.9909 139.128 62.3149 136.444L62.1829 136.389C59.2679 135.014 58.3659 134.75 55.8799 134.75C50.7099 134.75 45.9029 136.07 41.2939 138.754ZM43.9999 167.75C41.0825 167.75 38.2846 166.591 36.2217 164.528C34.1588 162.465 32.9999 159.667 32.9999 156.75C32.9999 153.833 34.1588 151.035 36.2217 148.972C38.2846 146.909 41.0825 145.75 43.9999 145.75H198C200.917 145.75 203.715 146.909 205.778 148.972C207.841 151.035 209 153.833 209 156.75C209 159.667 207.841 162.465 205.778 164.528C203.715 166.591 200.917 167.75 198 167.75H43.9999Z"
+      fill="#FAE1DF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M40.381 200.244C28.721 198.814 21.967 193.292 21.967 182.864C21.967 161.227 44.528 156.838 102.201 156.717H117.722C175.395 156.827 197.967 161.227 197.967 182.864C197.967 193.292 191.202 198.814 179.542 200.244C171.93 201.19 167.211 200.959 143.297 199.089C129.184 197.978 119.999 197.483 109.967 197.483C99.935 197.483 90.739 197.978 76.637 199.089C52.723 200.959 47.993 201.179 40.381 200.244ZM102.223 167.717C53.603 167.816 32.967 171.842 32.967 182.864C32.967 186.835 35.002 188.496 41.734 189.332C48.246 190.135 52.965 189.904 75.779 188.122C90.145 186.989 99.572 186.483 109.967 186.483C120.351 186.483 129.778 186.989 144.155 188.122C166.958 189.904 171.688 190.135 178.2 189.332C184.921 188.496 186.967 186.835 186.967 182.864C186.967 171.842 166.32 167.816 117.7 167.717H102.223ZM176.693 88.77C190.465 85.668 198 77.847 198 64.504C198 34.254 159.467 13.761 110 13.761C60.533 13.761 22 34.254 22 64.493C22 77.836 29.535 85.657 43.307 88.781C52.888 90.948 61.545 91.091 87.692 90.343C95.1255 90.0936 102.562 89.9579 110 89.936C116.49 89.936 122.144 90.046 132.308 90.343C158.455 91.091 167.112 90.948 176.693 88.781V88.77ZM110 24.75C154.198 24.75 187 42.207 187 64.493C187 72.226 183.381 75.977 174.262 78.045C165.99 79.915 157.608 80.058 132.627 79.343C125.087 79.0918 117.544 78.9561 110 78.936C103.378 78.936 97.647 79.046 87.373 79.343C62.392 80.058 54.01 79.926 45.738 78.045C36.608 75.977 33 72.226 33 64.493C33 42.207 65.802 24.75 110 24.75Z"
+      fill="#DA3635" />
+    <path
+      d="M27.522 114.752C26.2617 115.487 24.7609 115.692 23.3499 115.32C21.9389 114.949 20.7331 114.032 19.998 112.772C19.2628 111.512 19.0584 110.011 19.4297 108.6C19.801 107.189 20.7176 105.983 21.978 105.248C28.9115 101.144 36.8231 98.986 44.88 99C50.226 99 53.306 99.891 58.223 102.212L58.355 102.278C62.029 104.005 63.734 104.5 67.375 104.5C70.972 104.5 72.501 104.038 75.779 102.355L75.911 102.289C80.531 99.924 83.556 99 88.946 99C94.413 99 97.438 99.946 102.069 102.377C105.281 104.071 106.667 104.5 110 104.5C113.333 104.5 114.708 104.06 117.865 102.41L117.909 102.377C122.54 99.957 125.576 99 131.054 99C136.466 99 139.502 99.924 144.21 102.311L144.265 102.344C147.609 104.038 149.105 104.5 152.625 104.5C156.145 104.5 157.685 104.038 161.073 102.333L161.139 102.3C165.891 99.913 168.927 99 174.328 99C182.358 99 190.212 101.068 197.846 105.16C199.05 105.89 199.928 107.055 200.299 108.413C200.669 109.772 200.505 111.221 199.84 112.462C199.174 113.703 198.058 114.641 196.721 115.083C195.384 115.526 193.928 115.439 192.654 114.84C186.582 111.606 180.499 110 174.328 110C170.918 110 169.422 110.451 166.078 112.134L166.001 112.167C161.216 114.576 158.136 115.5 152.625 115.5C147.114 115.5 144.045 114.565 139.293 112.156L139.227 112.123C135.927 110.451 134.464 110 131.054 110C127.644 110 126.214 110.44 123.035 112.123L122.98 112.145C118.393 114.565 115.39 115.5 110 115.5C104.61 115.5 101.607 114.565 96.998 112.145L96.954 112.123C93.764 110.44 92.356 110 88.946 110C85.569 110 84.128 110.44 80.927 112.079L80.795 112.145C76.087 114.565 72.963 115.5 67.375 115.5C61.831 115.5 58.674 114.587 53.658 112.222L53.526 112.156C49.951 110.473 48.323 110 44.88 110C38.72 110 32.978 111.573 27.522 114.752ZM33 143C31.5413 143 30.1423 142.421 29.1109 141.389C28.0794 140.358 27.5 138.959 27.5 137.5C27.5 136.041 28.0794 134.642 29.1109 133.611C30.1423 132.579 31.5413 132 33 132H187C188.459 132 189.858 132.579 190.889 133.611C191.921 134.642 192.5 136.041 192.5 137.5C192.5 138.959 191.921 140.358 190.889 141.389C189.858 142.421 188.459 143 187 143H33ZM67.1 57.75C67.1 59.5004 66.4046 61.1791 65.1669 62.4169C63.9291 63.6546 62.2504 64.35 60.5 64.35C58.7495 64.35 57.0708 63.6546 55.8331 62.4169C54.5953 61.1791 53.9 59.5004 53.9 57.75C53.9 55.9995 54.5953 54.3208 55.8331 53.0831C57.0708 51.8453 58.7495 51.15 60.5 51.15C62.2504 51.15 63.9291 51.8453 65.1669 53.0831C66.4046 54.3208 67.1 55.9995 67.1 57.75ZM94.6 46.75C94.6 48.5004 93.9046 50.1791 92.6669 51.4169C91.4291 52.6546 89.7504 53.35 88 53.35C86.2495 53.35 84.5708 52.6546 83.3331 51.4169C82.0953 50.1791 81.4 48.5004 81.4 46.75C81.4 44.9995 82.0953 43.3208 83.3331 42.0831C84.5708 40.8453 86.2495 40.15 88 40.15C89.7504 40.15 91.4291 40.8453 92.6669 42.0831C93.9046 43.3208 94.6 44.9995 94.6 46.75ZM116.6 63.25C116.6 65.0004 115.905 66.6791 114.667 67.9169C113.429 69.1546 111.75 69.85 110 69.85C108.25 69.85 106.571 69.1546 105.333 67.9169C104.095 66.6791 103.4 65.0004 103.4 63.25C103.4 61.4995 104.095 59.8208 105.333 58.5831C106.571 57.3453 108.25 56.65 110 56.65C111.75 56.65 113.429 57.3453 114.667 58.5831C115.905 59.8208 116.6 61.4995 116.6 63.25ZM138.6 46.75C138.6 48.5004 137.905 50.1791 136.667 51.4169C135.429 52.6546 133.75 53.35 132 53.35C130.25 53.35 128.571 52.6546 127.333 51.4169C126.095 50.1791 125.4 48.5004 125.4 46.75C125.4 44.9995 126.095 43.3208 127.333 42.0831C128.571 40.8453 130.25 40.15 132 40.15C133.75 40.15 135.429 40.8453 136.667 42.0831C137.905 43.3208 138.6 44.9995 138.6 46.75ZM166.1 57.75C166.1 59.5004 165.405 61.1791 164.167 62.4169C162.929 63.6546 161.25 64.35 159.5 64.35C157.75 64.35 156.071 63.6546 154.833 62.4169C153.595 61.1791 152.9 59.5004 152.9 57.75C152.9 55.9995 153.595 54.3208 154.833 53.0831C156.071 51.8453 157.75 51.15 159.5 51.15C161.25 51.15 162.929 51.8453 164.167 53.0831C165.405 54.3208 166.1 55.9995 166.1 57.75Z"
+      fill="#DA3635" />
+  </g>
+  <defs>
+    <clipPath id="clip0_8248_41600">
+      <rect width="220" height="220" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
\ No newline at end of file
--- a/src/stories/assets/maquettes.svg
+++ b/src/stories/assets/maquettes.svg
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="218.598" cy="212" r="63" fill="#FCECEA" />
+  <g opacity="0.8">
+    <path
+      d="M136.198 51.4634H89.2256C81.918 51.4634 75.9939 57.3875 75.9939 64.6951V91.1585L81.9155 197.747C82.305 204.758 88.1042 210.244 95.1268 210.244H195.079C202.387 210.244 208.31 204.32 208.31 197.012V137.47V107.179C208.31 105.396 207.592 103.688 206.315 102.443L155.988 53.3438C154.752 52.1382 153.095 51.4634 151.368 51.4634H136.198Z"
+      fill="#FBE7E5" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M62.7621 64.6951C62.7621 50.0798 74.6102 38.2317 89.2256 38.2317H151.368C156.548 38.2317 161.522 40.256 165.228 43.8728L215.555 92.9721C219.384 96.7073 221.542 101.83 221.542 107.179V197.012C221.542 211.628 209.694 223.476 195.079 223.476H95.1268C81.0817 223.476 69.4832 212.504 68.7041 198.48L62.7621 91.5259V64.6951ZM89.2256 64.6951V90.7912L95.1268 197.012H195.079V109.967L148.675 64.6951H89.2256Z"
+      fill="#FBE7E5" />
+    <path
+      d="M129.805 179.722C118.961 198.644 92.0829 203.616 69.7713 190.829C47.4598 178.042 38.1637 152.337 49.0079 133.415C59.8522 114.494 86.7303 109.522 109.042 122.309C131.354 135.096 140.65 160.801 129.805 179.722Z"
+      fill="#FBE7E5" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M102.462 133.788C84.6445 123.577 66.7235 129.115 60.4879 139.995C54.2522 150.875 58.5328 169.137 76.3507 179.349C94.1687 189.561 112.089 184.023 118.326 173.142C124.56 162.263 120.28 144.001 102.462 133.788ZM37.528 126.836C52.9808 99.8735 88.8161 95.466 115.621 110.829C142.426 126.191 156.739 159.339 141.285 186.301C128.073 209.355 99.9609 215.919 75.3322 207.736L53.8661 245.191C50.2324 251.531 42.1469 253.726 35.8067 250.091C29.4664 246.458 27.2725 238.372 30.9062 232.033L52.3722 194.578C32.8622 177.464 24.3157 149.889 37.528 126.836Z"
+      fill="#FBE7E5" />
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M48.2997 51.4634C48.2997 36.8481 60.1477 25 74.7631 25H142.245C143.982 25 145.649 25.6833 146.888 26.9022L205.107 84.2395C206.369 85.4831 207.08 87.1811 207.08 88.9532V183.78C207.08 198.396 195.232 210.244 180.617 210.244H61.5314C57.8776 210.244 54.9155 207.281 54.9155 203.628C54.9155 199.975 57.8776 197.012 61.5314 197.012H180.617C187.924 197.012 193.848 191.088 193.848 183.78V95.5691H155.476C144.515 95.5691 135.629 86.683 135.629 75.7215V38.2317H74.7631C67.4555 38.2317 61.5314 44.1558 61.5314 51.4634V84.5427C61.5314 88.1965 58.5693 91.1585 54.9155 91.1585C51.2617 91.1585 48.2997 88.1965 48.2997 84.5427V51.4634ZM148.86 47.417L184.319 82.3374H155.476C151.823 82.3374 148.86 79.3754 148.86 75.7215V47.417Z"
+    fill="#DA3635" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M81.3563 112.705C66.5699 104.847 48.2126 110.463 40.354 125.249C32.4955 140.035 38.1115 158.393 52.8978 166.251C67.6843 174.109 86.0415 168.494 93.9001 153.707C101.759 138.921 96.1426 120.564 81.3563 112.705ZM28.6699 119.039C39.958 97.8001 66.3268 89.7331 87.5661 101.021C108.805 112.309 116.873 138.678 105.584 159.917C95.3516 179.171 72.727 187.599 52.7645 180.6L31.4592 220.686C29.7443 223.914 25.7387 225.139 22.5123 223.424C19.2859 221.709 18.0603 217.703 19.7752 214.477L41.0803 174.39C24.1093 161.76 18.4374 138.293 28.6699 119.039Z"
+    fill="#DA3635" />
+  <circle cx="211.979" cy="204.564" r="50.4181" fill="white" stroke="#DA3635" stroke-width="10" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M234.917 181.678C237.144 182.916 237.948 185.729 236.713 187.961L213.709 229.539C212.113 232.424 208.329 233.209 205.722 231.195L182.992 213.642C180.975 212.084 180.599 209.183 182.154 207.161C183.708 205.139 186.603 204.763 188.62 206.321L207.811 221.141L228.649 183.479C229.884 181.246 232.69 180.44 234.917 181.678Z"
+    fill="#DA3635" />
+</svg>
\ No newline at end of file