Slash Grid and breakpoint

apps/slash-stories-css/.storybook/main.ts

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

apps/slash-stories-css/.storybook/preview.ts

@@ -1,16 +1,26 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import type { Preview } from "@storybook/html";
+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"],
+      },
+    },
   },
   tags: ["autodocs"],
 };
 
+// eslint-disable-next-line import/no-default-export
 export default preview;

apps/slash-stories-css/.storybook/viewPorts.ts

@@ -0,0 +1,52 @@
+import type { ViewportMap } from "@storybook/addon-viewport";
+
+export const viewPorts: ViewportMap = {
+  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",
+  },
+};

apps/slash-stories-css/package.json

@@ -20,6 +20,7 @@
     "@chromatic-com/storybook": "^3.2.4",
     "@storybook/addon-essentials": "^8.5.5",
     "@storybook/addon-interactions": "^8.5.5",
+    "@storybook/addon-viewport": "^8.5.5",
     "@storybook/blocks": "^8.5.5",
     "@storybook/html": "^8.5.5",
     "@storybook/html-vite": "^8.5.5",

apps/slash-stories-css/src/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>

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import "@axa-fr/design-system-slash-css/dist/Grid/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",
+  },
+};

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

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/html";
 import "./icons.stories.css";
 
 const meta: Meta = {
-  title: "icons",
+  title: "Fondations/icons",
 };
 
 export default meta;

apps/slash-stories/.storybook/main.ts

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

apps/slash-stories/.storybook/preview.ts

@@ -1,15 +1,24 @@
 import "@axa-fr/design-system-slash-css/dist/common/icons.scss";
 import "@fontsource/source-sans-pro";
 import type { Preview } from "@storybook/react";
+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"],
+      },
+    },
   },
   tags: ["autodocs"],
 };

apps/slash-stories/.storybook/viewPorts.ts

@@ -0,0 +1,52 @@
+import type { ViewportMap } from "@storybook/addon-viewport";
+
+export const viewPorts: ViewportMap = {
+  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",
+  },
+};

apps/slash-stories/package.json

@@ -21,6 +21,7 @@
     "@storybook/addon-essentials": "^8.5.5",
     "@storybook/addon-interactions": "^8.5.5",
     "@storybook/addon-onboarding": "^8.5.5",
+    "@storybook/addon-viewport": "^8.5.5",
     "@storybook/blocks": "^8.5.5",
     "@storybook/react": "^8.5.5",
     "@storybook/react-vite": "^8.5.5",

apps/slash-stories/src/Grid.mdx

@@ -0,0 +1,57 @@
+import { Meta, Markdown } from "@storybook/addon-docs";
+import * as GridStories from "./Grid.stories";
+
+<Meta
+  of={GridStories}
+  parameters={{ viewport: { defaultViewport: "tabletPortrait" } }}
+/>
+
+## Grid
+
+### Import
+
+```tsx
+import { Grid } from "@axa-fr/design-system-slash-react";
+```
+
+### Use
+
+#### Grid Example:
+
+```tsx
+export const Main = () => <Grid>Content</Grid>;
+```
+
+### 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>
+
+### Customize root element of Grid
+
+The `component` prop overrides the root element, which is by default an `div` tag, and all associated props.
+
+```tsx
+import { Grid } from "@axa-fr/design-system-slash-react";
+
+export const Main = () => <Grid component="main">Content</Grid>;
+```
+
+```tsx
+import { Grid } from "@axa-fr/design-system-slash-react";
+import { MainComponent } from "./MainComponent";
+
+export const Main = () => <Grid component={MainComponent}>Content</Grid>;
+```

apps/slash-stories/src/Grid.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "@axa-fr/design-system-slash-react";
+
+const meta: Meta<typeof Grid> = {
+  title: "Fondations/Breakpoints/Grid",
+  component: Grid,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+export const GridStory: StoryObj<typeof Grid> = {
+  name: "Grid",
+  render: ({ ...props }) => {
+    return (
+      <div style={{ backgroundColor: "orange", opacity: 0.4 }}>
+        <Grid {...props}>
+          <div
+            style={{
+              height: 200,
+              width: "100%",
+              backgroundColor: "red",
+              opacity: 0.5,
+            }}
+          />
+        </Grid>
+      </div>
+    );
+  },
+  argTypes: {
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    component: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};