Slash Grid and breakpoint

package.json

@@ -46,6 +46,7 @@
     "@storybook/addon-mdx-gfm": "^8.5.0",
     "@storybook/addon-onboarding": "^8.5.0",
     "@storybook/addon-storysource": "^8.5.0",
+    "@storybook/addon-viewport": "^8.5.0",
     "@storybook/blocks": "^8.5.0",
     "@storybook/html": "^8.5.0",
     "@storybook/html-vite": "^8.5.0",
@@ -117,4 +118,4 @@
     "node": "22.13.0",
     "npm": "11.0.0"
   }
-}
+}

slash/css/.storybook/main.js

@@ -15,6 +15,7 @@ const config = {
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-viewport"),
     getAbsolutePath("@chromatic-com/storybook"),
   ],
   framework: {

slash/css/.storybook/preview.js

@@ -1,16 +1,27 @@
 import "../src/common/icons.scss";
+// eslint-disable-next-line import/no-unresolved
+import { viewPorts } from "./viewPorts";
 
 /** @type { import('@storybook/html').Preview } */
 const preview = {
   parameters: {
+    viewport: {
+      viewports: viewPorts,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ["Fondations", "Components"],
+      },
+    },
   },
   tags: ["autodocs"],
 };
 
+// eslint-disable-next-line import/no-default-export
 export default preview;

slash/css/.storybook/viewPorts.js

@@ -0,0 +1,51 @@
+/** @type { import('@storybook/addon-viewport').ViewportMap } */
+export const viewPorts = {
+  tabletPortrait: {
+    name: "Tablet Portrait ",
+    styles: {
+      width: "772px",
+      height: "100%",
+    },
+    type: "tablet",
+  },
+  tabletLandscape: {
+    name: "Tablet Landscape",
+    styles: {
+      width: "1016px",
+      height: "100%",
+    },
+    type: "tablet",
+  },
+  desktopS: {
+    name: "Desktop S",
+    styles: {
+      width: "1272px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopM: {
+    name: "Desktop M",
+    styles: {
+      width: "1432px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopL: {
+    name: "Desktop L",
+    styles: {
+      width: "1672px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopXL: {
+    name: "Desktop XL",
+    styles: {
+      width: "1912px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+};

slash/css/src/Grid/Grid.mdx

@@ -0,0 +1,45 @@
+import { Meta, Markdown } from "@storybook/addon-docs";
+import * as GridStories from "./Grid.stories";
+
+<Meta of={GridStories} />
+
+## Grid
+
+### Import
+
+#### Grid only
+
+```js
+import "@axa-fr/design-system-slash-react/dist/Grid/Grid.scss"; // or
+import "@axa-fr/design-system-slash-react/dist/Grid/Grid.css";
+```
+
+#### Global
+
+```tsx
+import "@axa-fr/design-system-slash-react/dist/slash.scss"; // or
+import "@axa-fr/design-system-slash-react/dist/slash.css";
+```
+
+### Use
+
+```html
+<main class="af-grid">Content</main>
+```
+
+### Breakpoints and Margins
+
+> ⚠ To handle the rounded edges implemented by Edge, we are forced to reduce each of the breakpoints by 8px
+
+<Markdown>
+  {`
+| Breakpoint                          | columns | body    | margin           | comment             |
+|-------------------------------------|---------|---------|------------------|---------------------|
+| Portrait Tablet (772px to 1015px)   | 1       | 700 px  | Scale - 36px min |                     |
+| Landscape Tablet (1016px to 1271px) | 1       | 936 px  | Scale - 40px min |                     |
+| S Desktop (1272px to 1431px)        | 1       | 1160 px | Scale - 56px min | 150% - Laptop       |
+| M Desktop (1432px to 1671px)        | 1       | 1320 px | Scale - 56px min | 125% - Laptop       |
+| L Desktop (1672px to 1911px)        | 1       | 1560 px | Scale - 56px min | 100% - Laptop       |
+| XL Desktop (1912 to ∞ px)           | 1       | 1800 px | Scale - 56px min | 100% - Large screen |
+`}
+</Markdown>

slash/css/src/Grid/Grid.scss

@@ -0,0 +1,45 @@
+@use "../common/common" as common;
+@use "../common/breakpoint" as breakpoint;
+
+.af-grid {
+  --grid-body-width: var(--body-width-tablet-portrait);
+
+  width: var(--grid-body-width);
+  margin-inline: auto;
+}
+
+@include breakpoint.media-less-than-width(tablet-portrait) {
+  .af-grid {
+    margin-inline: common.px-to-rem(36);
+  }
+}
+
+@include breakpoint.media-exceeds-width(tablet-landscape) {
+  .af-grid {
+    --grid-body-width: var(--body-width-tablet-landscape);
+  }
+}
+
+@include breakpoint.media-exceeds-width(desktop-s) {
+  .af-grid {
+    --grid-body-width: var(--body-width-desktop-s);
+  }
+}
+
+@include breakpoint.media-exceeds-width(desktop-m) {
+  .af-grid {
+    --grid-body-width: var(--body-width-desktop-m);
+  }
+}
+
+@include breakpoint.media-exceeds-width(desktop-l) {
+  .af-grid {
+    --grid-body-width: var(--body-width-desktop-l);
+  }
+}
+
+@include breakpoint.media-exceeds-width(desktop-xl) {
+  .af-grid {
+    --grid-body-width: var(--body-width-desktop-xl);
+  }
+}

slash/css/src/Grid/Grid.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import "./Grid.scss";
+
+const meta: Meta = {
+  title: "Fondations/Breakpoints/✅ Grid",
+};
+
+export default meta;
+
+export const Grid: StoryObj = {
+  render: () => {
+    const div = document.createElement("div");
+    div.innerHTML = `<div class="af-grid">
+<div style="height: 200px;width: 100%;background-color: red;opacity: 0.5"></div>
+</div>`;
+
+    div.style.backgroundColor = "orange";
+    div.style.opacity = "0.4";
+
+    return div;
+  },
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};

slash/css/src/common/breakpoint.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "./common" as common;
+
+:root {
+  --body-width-tablet-portrait: #{common.px-to-rem(700)};
+  --body-width-tablet-landscape: #{common.px-to-rem(936)};
+  --body-width-desktop-s: #{common.px-to-rem(1160)};
+  --body-width-desktop-m: #{common.px-to-rem(1320)};
+  --body-width-desktop-l: #{common.px-to-rem(1560)};
+  --body-width-desktop-xl: #{common.px-to-rem(1800)};
+}
+
+$breakpoints: (
+  tablet-portrait: common.px-to-rem(772),
+  tablet-landscape: common.px-to-rem(1016),
+  desktop-s: common.px-to-rem(1272),
+  desktop-m: common.px-to-rem(1432),
+  desktop-l: common.px-to-rem(1672),
+  desktop-xl: common.px-to-rem(1912),
+) !default;
+
+@mixin media-exceeds-width($name) {
+  $value: map.get($breakpoints, $name);
+
+  @media (width >= $value) {
+    @content;
+  }
+}
+
+@mixin media-less-than-width($name) {
+  $value: map.get($breakpoints, $name);
+
+  @media (width < $value) {
+    @content;
+  }
+}

slash/css/src/icons/icons.stories.ts

@@ -3,7 +3,7 @@ import "../common/icons.scss";
 import "./icons.stories.css";
 
 const meta: Meta = {
-  title: "icons",
+  title: "Fondations/icons",
 };
 
 export default meta;

slash/css/src/slash.scss

@@ -31,3 +31,4 @@
 @use "./Link/Link";
 @use "./Popover/Popover";
 @use "./Loader/Loader";
+@use "./Grid/Grid";

slash/react/.storybook/main.ts

@@ -16,6 +16,7 @@ const config: StorybookConfig = {
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-viewport"),
     getAbsolutePath("@chromatic-com/storybook"),
   ],
   framework: {

slash/react/.storybook/preview.ts

@@ -1,16 +1,25 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@fontsource/source-sans-pro";
-
 import type { Preview } from "@storybook/react";
+// eslint-disable-next-line import/no-unresolved
+import { viewPorts } from "./viewPorts";
 
 const preview: Preview = {
   parameters: {
+    viewport: {
+      viewports: viewPorts,
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    options: {
+      storySort: {
+        order: ["Fondations", "Components"],
+      },
+    },
   },
 };
 

slash/react/.storybook/viewPorts.js

@@ -0,0 +1,51 @@
+/** @type { import('@storybook/addon-viewport').ViewportMap } */
+export const viewPorts = {
+  tabletPortrait: {
+    name: "Tablet Portrait ",
+    styles: {
+      width: "772px",
+      height: "100%",
+    },
+    type: "tablet",
+  },
+  tabletLandscape: {
+    name: "Tablet Landscape",
+    styles: {
+      width: "1016px",
+      height: "100%",
+    },
+    type: "tablet",
+  },
+  desktopS: {
+    name: "Desktop S",
+    styles: {
+      width: "1272px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopM: {
+    name: "Desktop M",
+    styles: {
+      width: "1432px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopL: {
+    name: "Desktop L",
+    styles: {
+      width: "1672px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+  desktopXL: {
+    name: "Desktop XL",
+    styles: {
+      width: "1912px",
+      height: "100%",
+    },
+    type: "desktop",
+  },
+};