From 685d4b81270cad6d0948bace4bf5a2edb05631b7 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 11:21:57 +0100
Subject: [PATCH 1/9] add button documentation
---
src/app/shared/components/button/button.mdx | 24 +++++++++++++++++++++
1 file changed, 24 insertions(+)
create mode 100644 src/app/shared/components/button/button.mdx
diff --git a/src/app/shared/components/button/button.mdx b/src/app/shared/components/button/button.mdx
new file mode 100644
index 000000000..1ee1215c3
--- /dev/null
+++ b/src/app/shared/components/button/button.mdx
@@ -0,0 +1,24 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Il existe deux tailles de boutons en largeur :
+
+- 250px
+- 150px
+
+Il existe trois tailles de boutons en hauteur :
+
+- 32px
+- 40px
+- 48px
+
+<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.PrimaryBlack} />
+<Canvas of={ButtonStories.Secondary} />
+<Canvas of={ButtonStories.SecondaryDelete} />
+<Canvas of={ButtonStories.SecondarySuccess} />
--
GitLab
From f3521ee85b8e05f39bce6047ec0aaf2c641182a2 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 11:22:45 +0100
Subject: [PATCH 2/9] fix typo
---
src/stories/Introduction.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/stories/Introduction.mdx b/src/stories/Introduction.mdx
index 3460dfd25..8d5091c18 100644
--- a/src/stories/Introduction.mdx
+++ b/src/stories/Introduction.mdx
@@ -10,7 +10,7 @@ import Plugin from './assets/plugin.svg';
import Repo from './assets/repo.svg';
import StackAlt from './assets/stackalt.svg';
-<Meta title="Introdution/DesignSystem" />
+<Meta title="Introduction/DesignSystem" />
<style>
{`
--
GitLab
From c47800cf70cd7c5b8ce724230bbe82c5a1b8a1e8 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 11:23:26 +0100
Subject: [PATCH 3/9] add color block
---
.../color-block/color-block.component.ts | 22 ++++++++
.../color-block/color-block.stories.ts | 55 +++++++++++++++++++
.../shared/components/color-block/colors.mdx | 42 ++++++++++++++
src/styles.scss | 5 ++
4 files changed, 124 insertions(+)
create mode 100644 src/app/shared/components/color-block/color-block.component.ts
create mode 100644 src/app/shared/components/color-block/color-block.stories.ts
create mode 100644 src/app/shared/components/color-block/colors.mdx
diff --git a/src/app/shared/components/color-block/color-block.component.ts b/src/app/shared/components/color-block/color-block.component.ts
new file mode 100644
index 000000000..2faee864f
--- /dev/null
+++ b/src/app/shared/components/color-block/color-block.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-color-block',
+ standalone: true,
+ imports: [],
+ template: `<div style="display: flex; align-items: center; gap: 16px;">
+ <div style="margin-right: 10px; height: 40px; width: 80px; border-radius: 4px;" [style.background]="hexCode"></div>
+ <div style="width: 120px;">{{ name }}</div>
+ <button type="button" style="width:70px" (click)="copyToClipboard()">{{ hexCode }}</button>
+ </div>`,
+})
+/** Component used only for storybook */
+export class ColorBlockComponent {
+ @Input() name: string;
+ @Input() hexCode: string;
+
+ copyToClipboard(): void {
+ console.log('Color copied to clipboard !');
+ navigator.clipboard.writeText(this.hexCode);
+ }
+}
diff --git a/src/app/shared/components/color-block/color-block.stories.ts b/src/app/shared/components/color-block/color-block.stories.ts
new file mode 100644
index 000000000..1de5e32c2
--- /dev/null
+++ b/src/app/shared/components/color-block/color-block.stories.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../svg-icon/svg-icon.component';
+import { ColorBlockComponent } from './color-block.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ColorBlockComponent> = {
+ title: 'Introduction/Colors',
+ component: ColorBlockComponent,
+ // tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent],
+ imports: [CommonModule],
+ }),
+ ],
+ parameters: {
+ layout: 'fullscreen',
+ },
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ColorBlockComponent>;
+
+/* GREYS */
+export const Grey0: Story = {
+ args: { name: 'grey-0', hexCode: '#00000' },
+};
+export const Grey1: Story = { args: { name: 'grey-1', hexCode: '#333333' } };
+export const Grey2: Story = { args: { name: 'grey-2', hexCode: '#4c4d53' } };
+export const Grey3: Story = { args: { name: 'grey-3', hexCode: '#696969' } };
+export const Grey4: Story = { args: { name: 'grey-4', hexCode: '#949494' } };
+export const Grey5: Story = { args: { name: 'grey-5', hexCode: '#bdbdbd' } };
+export const Grey6: Story = { args: { name: 'grey-6', hexCode: '#dedede' } };
+export const Grey7: Story = { args: { name: 'grey-7', hexCode: '#e9e9e9' } };
+export const Grey8: Story = { args: { name: 'grey-8', hexCode: '#f4f4f4' } };
+export const Grey9: Story = { args: { name: 'grey-9', hexCode: '#f8f8f8' } };
+export const Grey10: Story = { args: { name: 'grey-10', hexCode: '#ffffff' } };
+/* GREY Accessibility Ratio 4,5:1 */
+export const Grey451: Story = { args: { name: 'grey-4-5-1', hexCode: '#767676' } };
+
+/* RED */
+export const RedDarker: Story = { args: { name: 'red-darker', hexCode: '#a50f0e' } };
+export const RedDark: Story = { args: { name: 'red-dark', hexCode: '#cd2524' } };
+export const RedMain: Story = { args: { name: 'red', hexCode: '#da3635' } };
+export const RedLight: Story = { args: { name: 'red-light', hexCode: '#ff5d5c' } };
+export const RedLighter: Story = { args: { name: 'red-lighter', hexCode: '#ffe5e4' } };
+
+/* INFO */
+export const InfoSuccess: Story = { args: { name: 'info/success', hexCode: '#1d8844' } };
+export const InfoWarning: Story = { args: { name: 'info/warning', hexCode: '#cf4b00' } };
+export const InfoInformation: Story = { args: { name: 'info/information', hexCode: '#0073e9' } };
+export const InfoError: Story = { args: { name: 'info/error', hexCode: '#da3635' } };
diff --git a/src/app/shared/components/color-block/colors.mdx b/src/app/shared/components/color-block/colors.mdx
new file mode 100644
index 000000000..bd0c188c1
--- /dev/null
+++ b/src/app/shared/components/color-block/colors.mdx
@@ -0,0 +1,42 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ColorStories from './color-block.stories.ts';
+
+<Meta title="Introduction/Colors" />
+
+# Colors
+
+ðŸ–±ï¸ Clickez sur un bouton pour copier le code hexa
+
+## GREYSCALE
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey0} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey1} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey2} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey3} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey4} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey5} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey6} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey7} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey8} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey9} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey10} />
+<hr />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey451} />
+
+Ce gris est utilisé pour les textes secondaires mais assurer un contraste RGAA friendly fond blanc.
+
+## RED
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedDarker} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedDark} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedMain} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedLight} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.RedLighter} />
+
+## INFO
+
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoSuccess} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoWarning} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoInformation} />
+<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.InfoError} />
diff --git a/src/styles.scss b/src/styles.scss
index 35fff78d8..536a871b0 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -361,3 +361,8 @@ div.inline {
flex-wrap: wrap;
gap: 12px 8px;
}
+
+/* STORYBOOK */
+.sb-colorRow {
+ margin-block: 12px !important;
+}
--
GitLab
From f806f45373efd2a0d1406d010f2f6572f37eb412 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 15:41:30 +0100
Subject: [PATCH 4/9] remove comment
---
.storybook/theme.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 7f91e2ee5..f6bd5cb1a 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -6,5 +6,4 @@ export default create({
brandTitle: "Res'in Design system",
brandUrl: 'https://resin.grandlyon.com',
brandImage: sbResin,
- // brandImage: 'https://forge.grandlyon.com/uploads/-/system/project/avatar/466/favicon.ico?width=64',
});
--
GitLab
From 2a4148164daf1741e10d928acf7c23b8bb0f5a9d Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 15:48:02 +0100
Subject: [PATCH 5/9] put introduction first
---
.storybook/preview.ts | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index d82b5659e..22907d95c 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -12,6 +12,11 @@ const preview: Preview = {
date: /Date$/,
},
},
+ options: {
+ storySort: {
+ order: ['Introduction', ['DesignSystem', 'Colors'], 'UI', 'Components'],
+ },
+ },
backgrounds: {
values: [
// Overrides storybook off-white to mockups white
--
GitLab
From 439818bd2ed4091caa7d6097f7f29aa601ef8eaa Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 17:43:52 +0100
Subject: [PATCH 6/9] add favicon
---
.storybook/main.ts | 2 +-
.storybook/public/favicon.svg | 9 +++++++++
{src/assets => .storybook/public}/sb-header.png | Bin
.storybook/theme.ts | 3 +--
4 files changed, 11 insertions(+), 3 deletions(-)
create mode 100644 .storybook/public/favicon.svg
rename {src/assets => .storybook/public}/sb-header.png (100%)
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 4c3985d43..355290c89 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,6 +11,6 @@ const config: StorybookConfig = {
docs: {
autodocs: 'tag',
},
- staticDirs: [{ from: '../src/assets', to: 'assets' }],
+ staticDirs: [{ from: '../src/assets', to: 'assets' }, './public'],
};
export default config;
diff --git a/.storybook/public/favicon.svg b/.storybook/public/favicon.svg
new file mode 100644
index 000000000..0d9b5a172
--- /dev/null
+++ b/.storybook/public/favicon.svg
@@ -0,0 +1,9 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="144" height="144" rx="10" fill="#E30613" />
+ <path
+ d="M81.2088 32.163C81.1364 32.045 81.0639 31.8984 81.0218 31.7788C79.185 28.1087 76.7754 25.0066 73.8955 22.5531C70.9163 20.1267 67.6809 18.263 64.031 16.9571C60.3844 15.6664 56.6654 15.0496 52.9498 15.0024C49.2308 14.9586 45.6112 15.5029 41.8922 16.6942C38.1732 17.9142 34.9344 19.697 32.0984 22.0594C31.2138 22.7655 30.4066 23.5591 29.6399 24.3831C27.916 22.8463 25.9967 21.4612 23.8347 20.2918C23.7269 20.2413 23.5853 20.1654 23.4623 20.0896C17.8088 17.2452 11.1409 21.4646 11.0145 27.7768L11.001 28.8283C10.9454 32.259 13.1175 35.1826 16.24 36.5929C17.7448 37.2602 18.9749 38.251 19.9169 39.5216C21.2987 41.2336 22.1311 43.2219 22.4968 45.4041L22.6349 99.1166C22.6349 99.2346 22.6113 110.482 22.6113 118.921C22.6113 123.942 26.6522 128 31.6923 128C36.7139 128 40.7699 123.926 40.7699 118.901L40.6284 43.9836C40.6014 39.8653 41.8197 36.7867 44.2985 34.9012C46.7807 33.019 49.6369 31.9894 52.97 32.0164C56.3048 32.0602 59.2858 33.0375 61.6685 35.0899C62.8986 36.0655 63.8608 37.3293 64.4792 38.8509C65.7885 42.0205 68.6498 44.2886 72.0824 44.3324L73.1322 44.3593C79.4445 44.4352 83.878 37.9056 81.2088 32.163Z"
+ fill="white" />
+ <path
+ d="M132 29.5008C132 21.5004 125.503 15 117.5 15C109.503 15 103 21.5004 103 29.5008V44H117.715V43.973C125.628 43.8564 132 37.4321 132 29.5008Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/sb-header.png b/.storybook/public/sb-header.png
similarity index 100%
rename from src/assets/sb-header.png
rename to .storybook/public/sb-header.png
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index f6bd5cb1a..45a984ed2 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -1,9 +1,8 @@
import { create } from '@storybook/theming';
-import sbResin from '../src/assets/sb-header.png';
export default create({
base: 'light',
brandTitle: "Res'in Design system",
brandUrl: 'https://resin.grandlyon.com',
- brandImage: sbResin,
+ brandImage: './sb-header.png',
});
--
GitLab
From a767041645ff2d42adaf6717f79b0305786237eb Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Wed, 28 Feb 2024 18:01:52 +0100
Subject: [PATCH 7/9] add toc
---
.storybook/preview.ts | 3 +++
1 file changed, 3 insertions(+)
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 22907d95c..b44aa48e9 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -6,6 +6,9 @@ setCompodocJson(docJson);
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
+ docs: {
+ toc: true,
+ },
controls: {
matchers: {
color: /(background|color)$/i,
--
GitLab
From ec16603d61795a27ed3e5ae1e304f792a2ffa1ff Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 29 Feb 2024 08:54:46 +0100
Subject: [PATCH 8/9] add layout
---
.../shared/components/color-block/colors.mdx | 4 ++
src/stories/Layout.mdx | 43 +++++++++++++++++++
2 files changed, 47 insertions(+)
create mode 100644 src/stories/Layout.mdx
diff --git a/src/app/shared/components/color-block/colors.mdx b/src/app/shared/components/color-block/colors.mdx
index bd0c188c1..5cfd4fed3 100644
--- a/src/app/shared/components/color-block/colors.mdx
+++ b/src/app/shared/components/color-block/colors.mdx
@@ -8,6 +8,10 @@ import * as ColorStories from './color-block.stories.ts';
ðŸ–±ï¸ Clickez sur un bouton pour copier le code hexa
+## Avant de commencer
+
+Rés’in n’utilise pas de noir, sa couleur principale est le Grey/1.
+
## GREYSCALE
<Canvas sourceState="none" className="sb-colorRow" of={ColorStories.Grey0} />
diff --git a/src/stories/Layout.mdx b/src/stories/Layout.mdx
new file mode 100644
index 000000000..67c547720
--- /dev/null
+++ b/src/stories/Layout.mdx
@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction/Layout" />
+
+# Layout
+
+## Marges
+
+Des marges sont présentes à gauche et à droite de l’écran
+Les marges peuvent avoir trois tailles :
+
+- MAJORITÉ : 96px
+- CAS EXCEPTIONNELS :
+ - 48px (96/2) -> _Cartographie_
+ - 192px (96x2) -> _Mon compte_
+
+## Règle de 8
+
+- Les espacements, tailles et border radius sont des multiples de 4 et 8
+- Après 50px il est possible d’utiliser des multiples de 10 ou 5
+
+## Border radius
+
+- Privilégier les border radius de 4px
+- Les plus gros éléments utilisent un border radius de 8px
+
+## Pop-in & Pop-up
+
+- Pop-in & Filtres: largeur fixée à 400px
+- Pop-in & Pop-up : texte centré
+
+## Forms (tunnel)
+
+- Taille maximum de 600px centré horizontalement sur la page
+- Le contenu est centré sur la gauche de cette colonne
+
+## Actualités
+
+Taille maximum de 1080px centré horizontalement sur la page
+
+## Autres
+
+Taille maximum de 980px centré horizontalement sur la page
--
GitLab
From 0f9b2cabf7d13e4c273b87707e0c2aaae403cf6b Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 29 Feb 2024 09:48:13 +0100
Subject: [PATCH 9/9] add scrollbar rules
---
src/app/shared/components/button/button.mdx | 2 ++
.../shared/components/scrollbar/Scrollbar.mdx | 16 ++++++++++++++++
2 files changed, 18 insertions(+)
create mode 100644 src/app/shared/components/scrollbar/Scrollbar.mdx
diff --git a/src/app/shared/components/button/button.mdx b/src/app/shared/components/button/button.mdx
index 1ee1215c3..982fd8115 100644
--- a/src/app/shared/components/button/button.mdx
+++ b/src/app/shared/components/button/button.mdx
@@ -17,6 +17,8 @@ Il existe trois tailles de boutons en hauteur :
- 40px
- 48px
+## Exemples
+
<Canvas of={ButtonStories.Primary} />
<Canvas of={ButtonStories.PrimaryBlack} />
<Canvas of={ButtonStories.Secondary} />
diff --git a/src/app/shared/components/scrollbar/Scrollbar.mdx b/src/app/shared/components/scrollbar/Scrollbar.mdx
new file mode 100644
index 000000000..5e341fa50
--- /dev/null
+++ b/src/app/shared/components/scrollbar/Scrollbar.mdx
@@ -0,0 +1,16 @@
+import { Canvas, Donts, Dos, Meta } from '@storybook/blocks';
+
+import * as ScrollbarStories from './scrollbar.stories';
+
+<Meta of={ScrollbarStories} />
+
+# Scrollbar
+
+- La scrollbar prend tout l’écran
+- Elle se trouve sur le côté droit de l’écran
+- Pareil pour les éléments types sections ou filtres
+
+## Exemples
+
+<Canvas of={ScrollbarStories.Vertical} />
+<Canvas of={ScrollbarStories.Horizontal} />
--
GitLab