Experimental version of new slash inputs

.github/ISSUE_TEMPLATE/2-look&feel_bug_report.md

@@ -2,7 +2,7 @@
 name: Look&Feel Bug report
 about: Create a report to help us improve Look&Feel Design System
 title: ''
-labels: ['bug', "look'n feel (Espace Client)"]
+labels: ['bug', "[Client] (look'n feel Espace Client)"]
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/3-apollo_bug_report.md

@@ -2,7 +2,7 @@
 name: Apollo Bug report
 about: Create a report to help us improve Apollo Design System
 title: ''
-labels: ['bug', 'Apollo AXA.fr']
+labels: ['bug', '[Prospect] (Apollo AXA.fr)']
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/5-look&feel_accessibility_issue.md

@@ -2,7 +2,7 @@
 name: Look&Feel Accessibility report
 about: Create an accessibility report to help us improve Look&Feel Design System
 title: "[a11y] "
-labels: ['bug', 'accessibility', "look'n feel (Espace Client)"]
+labels: ['bug', 'accessibility', "[Client] (look'n feel Espace Client)"]
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/6-apollo_accessibility_issue.md

@@ -2,7 +2,7 @@
 name: Apollo Accessibility report
 about: Create an accessibility report to help us improve Apollo Design System
 title: "[a11y] "
-labels: ['bug', 'accessibility', 'Apollo AXA.fr']
+labels: ['bug', 'accessibility', '[Prospect] (Apollo AXA.fr)']
 assignees: ''
 
 ---

.github/action/setup-node/action.yaml

@@ -9,12 +9,24 @@ inputs:
 runs:
   using: composite
   steps:
-    - name: Use Node.js
-      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+    - name: Get Node.js version from volta
+      shell: bash
+      run: echo "NODE_VERSION=$(jq -r .volta.node package.json)" >> $GITHUB_ENV
+
+    - name: Get npm version from volta
+      shell: bash
+      run: echo "NPM_VERSION=$(jq -r .volta.npm package.json)" >> $GITHUB_ENV
+
+    - name: Setup Node.js
+      uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6
       with:
-        node-version: "*" # Use the LTS Node.js version
-        cache: "npm"
         registry-url: "https://registry.npmjs.org"
+        node-version: ${{ env.NODE_VERSION || 'lts/*' }}
+
+    - name: Setup npm version
+      if: ${{ env.NPM_VERSION }}
+      shell: bash
+      run: npm install -g npm@${{ env.NPM_VERSION }}
 
     - name: Check package
       if: inputs.check-package

apps/apollo-stories/src/components/InputText/InputText.stories.tsx

@@ -19,7 +19,13 @@ const meta: Meta<typeof InputText> = {
     disabled: false,
     required: false,
     unit: <Svg src={euroSymbolIcon} aria-label="en euros" />,
-    description: "Description",
+    description: (
+      <>
+        une description
+        <br />
+        sur 2 lignes
+      </>
+    ),
     buttonLabel: "En savoir plus",
     sideButtonLabel: "Modifier",
     error: "Error Message",

apps/apollo-stories/src/components/ItemLabel/ItemLabel.mdx

@@ -30,3 +30,33 @@ const MyComponent = () => (
 <Canvas of={ItemLabelStories.Default} />
 
 <Controls of={ItemLabelStories.Default} />
+
+```tsx
+import { ItemLabel } from "@axa-fr/design-system-apollo-react";
+
+const MyComponent = () => (
+  <ItemLabel
+    label="Label Text"
+    description={
+      <>
+        une description
+        <br />
+        sur 2 lignes
+      </>
+    }
+    required
+    inputId="input-id"
+    idLabel="label-id"
+    sideButtonLabel="Side Button"
+    onSideButtonClick={handleClickSideButton}
+    buttonLabel="ButtonLabel"
+    onButtonClick={handleClickButton}
+  />
+);
+```
+
+## DescriptionMultiline
+
+<Canvas of={ItemLabelStories.DescriptionMultiline} />
+
+<Controls of={ItemLabelStories.DescriptionMultiline} />

apps/apollo-stories/src/components/ItemLabel/ItemLabel.stories.tsx

@@ -22,3 +22,20 @@ export const Default: StoryObj<typeof ItemLabel> = {
     buttonLabel: "ButtonLabel",
   },
 };
+
+export const DescriptionMultiline: StoryObj<typeof ItemLabel> = {
+  args: {
+    label: "Label Text",
+    description: (
+      <>
+        une description
+        <br />
+        sur 2 lignes
+      </>
+    ),
+    required: false,
+    inputId: "input-id",
+    sideButtonLabel: "Side Button",
+    buttonLabel: "ButtonLabel",
+  },
+};

apps/apollo-stories/src/components/ItemTabBar/ItemTabBar.stories.tsx

@@ -1,7 +1,4 @@
-import {
-  ItemTabBar,
-  itemTabBarVariants,
-} from "@axa-fr/design-system-apollo-react";
+import { ItemTabBar } from "@axa-fr/design-system-apollo-react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof ItemTabBar> = {
@@ -21,10 +18,6 @@ export const Default: Story = {
     title: "Mes contrats",
   },
   argTypes: {
-    variant: {
-      options: Object.values(itemTabBarVariants),
-      control: { type: "select" },
-    },
     isActive: {
       control: { type: "boolean" },
     },

apps/apollo-stories/src/components/TabBar/TabBar.mdx

@@ -0,0 +1,70 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks";
+import * as TabBarStories from "./TabBar.stories";
+
+<Meta of={TabBarStories} name="TabBar" />
+
+# TabBar
+
+## How to use
+
+To use the tabbar component import it like that:
+
+```tsx
+import { TabBar } from "@axa-fr/design-system-apollo-react";
+
+const MyComponent = () => (
+  <TabBar
+    items={[
+      { title: "Tab 1", content: "Content 1" },
+      { title: "Tab 2", content: "Content 2" },
+      { title: "Tab 3", content: "Content 3" },
+    ]}
+  />
+);
+```
+
+You can define the default selected tab with the `preSelectedTabIndex` prop.
+
+```tsx
+import { TabBar } from "@axa-fr/design-system-apollo-react";
+
+const MyComponent = () => (
+  <TabBar
+    items={[
+      { title: "Tab 1", content: "Content 1" },
+      { title: "Tab 2", content: "Content 2" },
+      { title: "Tab 3", content: "Content 3" },
+    ]}
+    preSelectedTabIndex={1}
+  />
+);
+```
+
+You can also customize the alignment of the tabs with the `direction` prop.
+
+```tsx
+import { TabBar, tabBarDirection } from "@axa-fr/design-system-apollo-react";
+
+const MyComponent = () => (
+  <TabBar
+    items={[
+      { title: "Tab 1", content: "Content 1" },
+      { title: "Tab 2", content: "Content 2" },
+      { title: "Tab 3", content: "Content 3" },
+    ]}
+    direction={tabBarDirection.center}
+  />
+);
+```
+
+## With text content
+
+<Canvas of={TabBarStories.TabBarStory} />
+
+<Controls of={TabBarStories.TabBarStory} />
+
+## With ReactNode content
+
+<Canvas of={TabBarStories.TabBarWithReactNodeStory} />
+
+<Controls of={TabBarStories.TabBarWithReactNodeStory} />

apps/apollo-stories/src/components/TabBar/TabBar.stories.tsx

@@ -0,0 +1,78 @@
+import { TabBar, tabBarDirection } from "@axa-fr/design-system-apollo-react";
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+
+const meta: Meta<typeof TabBar> = {
+  component: TabBar,
+  title: "Components/TabBar",
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+
+type StoryProps = ComponentProps<typeof TabBar>;
+
+export const TabBarStory: StoryObj<StoryProps> = {
+  name: "TabBar",
+  render: (args) => <TabBar {...args} />,
+  args: {
+    items: [
+      { title: "Mes contrats", content: "Mon numéro de contrat, lorem ipsum " },
+      { title: "Mes informations", content: "Mes informations, lorem ipsum" },
+      { title: "Mes paramètres", content: "Mes paramètres, lorem ipsum" },
+    ],
+    preSelectedTabIndex: 0,
+  },
+  argTypes: {
+    items: {
+      control: { type: "object" },
+    },
+    preSelectedTabIndex: {
+      control: { type: "number" },
+    },
+    direction: {
+      control: "select",
+      options: ["default", "center"],
+    },
+  },
+};
+
+export const TabBarWithReactNodeStory: StoryObj<typeof TabBar> = {
+  name: "TabBarWithReactNode",
+  render: (args) => <TabBar {...args} />,
+  args: {
+    items: [
+      {
+        title: "ReactNode tab 1",
+        content: (
+          <>
+            <h2>Titre 1</h2>
+            <p>Content 1</p>
+          </>
+        ),
+      },
+      {
+        title: "ReactNode tab 2",
+        content: (
+          <>
+            <h2>Titre 2</h2>
+            <p>Content 2</p>
+          </>
+        ),
+      },
+      {
+        title: "ReactNode tab 3",
+        content: (
+          <>
+            <h2>Titre 3</h2>
+            <p>Content 3</p>
+          </>
+        ),
+      },
+    ],
+    direction: tabBarDirection.center,
+    preSelectedTabIndex: 0,
+  },
+};

apps/look-and-feel-stories/src/ItemTabBar.stories.tsx

@@ -1,7 +1,4 @@
-import {
-  ItemTabBar,
-  itemTabBarVariants,
-} from "@axa-fr/design-system-apollo-react/lf";
+import { ItemTabBar } from "@axa-fr/design-system-apollo-react/lf";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof ItemTabBar> = {
@@ -21,10 +18,6 @@ export const Default: Story = {
     title: "Mes contrats",
   },
   argTypes: {
-    variant: {
-      options: Object.values(itemTabBarVariants),
-      control: { type: "select" },
-    },
     isActive: {
       control: { type: "boolean" },
     },

apps/look-and-feel-stories/src/Stepper/Stepper.mdx

@@ -8,7 +8,7 @@ import * as StepperStories from "./Stepper.stories";
 To use the header import it like that:
 
 ```tsx
-import { Stepper } from "@axa-fr/design-system-look-and-feel-react";
+import { Stepper } from "@axa-fr/design-system-apollo-react/lf";
 
 const MyComponent = () => <Stepper />;
 ```

apps/look-and-feel-stories/src/Stepper/Stepper.stories.tsx

@@ -1,4 +1,4 @@
-import { Stepper } from "@axa-fr/design-system-look-and-feel-react";
+import { Stepper } from "@axa-fr/design-system-apollo-react/lf";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ComponentProps } from "react";
 
@@ -31,6 +31,6 @@ export const Playground: Story = {
     helper: "Sauf mention du contraire, tous les champs sont obligatoires.",
   },
   argTypes: {
-    messageType: { control: 'select', options: ['error', 'success'] },
-  }
+    messageType: { control: "select", options: ["error", "success"] },
+  },
 };