From 9a84b295861538e2ff08e81cf1ae4d51722b94e4 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Mon, 28 Jul 2025 12:36:42 +0200
Subject: [PATCH 1/2] First draft for a button

---
 .storybook/main.js                            |  4 --
 .storybook/preview.js                         |  1 -
 .../ButtonPlayground.stories.js               | 44 +++++++++++++++++++
 stories/create-stories-from-doc.js            |  1 +
 4 files changed, 45 insertions(+), 5 deletions(-)
 create mode 100644 stories/components-playground/ButtonPlayground.stories.js

diff --git a/.storybook/main.js b/.storybook/main.js
index 2317524d87..2c3ee5eb93 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -15,10 +15,6 @@ const config = {
     options: {},
   },
 
-  docs: {
-    defaultName: 'Docs'
-  },
-
   features: {
     measure: false
   }
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2342b64454..c1de799ae4 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -23,7 +23,6 @@ const preview = {
     },
     viewport: { viewports: INITIAL_VIEWPORTS },
   },
-  tags: ['autodocs'],
 };
 
 export default preview;
diff --git a/stories/components-playground/ButtonPlayground.stories.js b/stories/components-playground/ButtonPlayground.stories.js
new file mode 100644
index 0000000000..073564da1c
--- /dev/null
+++ b/stories/components-playground/ButtonPlayground.stories.js
@@ -0,0 +1,44 @@
+// Playground for Button
+
+export default {
+  title: 'Playground/Button',
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'strong', 'minimal', 'negative'],
+    },
+    layout: {
+      control: 'select',
+      options: ['Text only', 'Text + Icon', 'Icon only'],
+    },
+    state: {
+      control: 'select',
+      options: ['enabled', 'disabled', 'loading'],
+    },
+    icon: {
+      control: 'text',
+    }
+  }
+}
+
+export const PlaygroundButton = {
+  render: ({ label, variant, layout, state, icon, ...args }) => {
+    return `<button class="btn btn-${variant}${layout === 'Icon only' ? ' btn-icon' : ''}${state === 'loading' ? ' loading-indeterminate' : ''}"${state === 'disabled' ? ' disabled' : ''}>
+    ${layout.includes('Icon') ? `<svg ${layout.includes('Text') ? 'aria-hidden="true"' : ''} fill="currentColor" viewBox="0 0 1000 1000">${icon}</svg>` : ''}
+    ${!layout.startsWith('Icon') ? label : ''}
+    <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
+      <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
+    </svg>
+  </button>`
+  },
+  args: {
+    label: 'Label 3',
+    variant: 'default',
+    layout: 'Text + Icon',
+    state: 'enabled',
+    icon: '<path d="M851.8 172.224C754.746 75.18 597.77 74.613 500 170.492c-97.77-95.879-254.746-95.312-351.795 1.732-96.042 96.038-97.605 250.77-4.7 348.724L500 914v-.006.006l356.5-393.05c92.9-97.956 91.338-252.688-4.7-348.726Zm-65.476 277.332L500 766.694 213.677 449.557l-.145-.162a150.005 150.005 0 0 1 217.526-206.464q.222.222.45.438l43.788 41.64L500 308.784l24.7-23.77 43.794-41.645q.226-.216.449-.438A149.05 149.05 0 0 1 675.018 199a150 150 0 0 1 111.451 250.4Z" style="fill-rule:evenodd"/>'
+  },
+}
diff --git a/stories/create-stories-from-doc.js b/stories/create-stories-from-doc.js
index ba3a5a4f52..659d6d58c7 100644
--- a/stories/create-stories-from-doc.js
+++ b/stories/create-stories-from-doc.js
@@ -31,6 +31,7 @@ function createTemplate(component) {
         toc: true \n\
       }\n\
     },\n\
+    tags: ['autodocs'],
   }\n\
   \n\
 `

From 4d1508ccffed85f741da4c44d7fa1f796a6c8904 Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 9 Jun 2026 15:51:39 +0200
Subject: [PATCH 2/2] Update Button with AI to last update

---
 .../ButtonPlayground.stories.js               | 103 ++++++++++++++++--
 1 file changed, 91 insertions(+), 12 deletions(-)

diff --git a/stories/components-playground/ButtonPlayground.stories.js b/stories/components-playground/ButtonPlayground.stories.js
index 073564da1c..fa18ad39ba 100644
--- a/stories/components-playground/ButtonPlayground.stories.js
+++ b/stories/components-playground/ButtonPlayground.stories.js
@@ -1,5 +1,60 @@
 // Playground for Button
 
+const buttonVariants = ['default', 'strong', 'brand', 'minimal', 'negative']
+const layouts = ['Text only', 'Text + Icon', 'Icon only']
+const states = ['enabled', 'disabled', 'loading']
+const roundedOptions = [false, true]
+
+const defaultIcon = '<path d="M851.8 172.224C754.746 75.18 597.77 74.613 500 170.492c-97.77-95.879-254.746-95.312-351.795 1.732-96.042 96.038-97.605 250.77-4.7 348.724L500 914v-.006.006l356.5-393.05c92.9-97.956 91.338-252.688-4.7-348.726Zm-65.476 277.332L500 766.694 213.677 449.557l-.145-.162a150.005 150.005 0 0 1 217.526-206.464q.222.222.45.438l43.788 41.64L500 308.784l24.7-23.77 43.794-41.645q.226-.216.449-.438A149.05 149.05 0 0 1 675.018 199a150 150 0 0 1 111.451 250.4Z" style="fill-rule:evenodd"/>'
+
+const loadingLoader = `<svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
+  <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
+</svg>`
+
+const renderIcon = (icon, hidden = false) => {
+  if (!icon) {
+    return ''
+  }
+
+  return `<svg ${hidden ? 'aria-hidden="true"' : ''} fill="currentColor" viewBox="0 0 1000 1000">${icon}</svg>`
+}
+
+const renderButton = ({ label, variant, layout, state, icon, rounded }) => {
+  const isIconOnly = layout === 'Icon only'
+  const shouldRenderIcon = layout !== 'Text only'
+  const isLoading = state === 'loading'
+  const isDisabled = state === 'disabled'
+  const classes = ['btn']
+
+  classes.push(`btn-${variant}`)
+
+  if (isIconOnly) {
+    classes.push('btn-icon')
+  }
+
+  if (isLoading) {
+    classes.push('loading-indeterminate')
+  }
+
+  const iconMarkup = renderIcon(icon || defaultIcon, true)
+  const loadingMarkup = isLoading
+    ? `${loadingLoader}
+    <span role="status" class="visually-hidden">Loading ${label}</span>`
+    : ''
+
+  const buttonMarkup = `<button type="button" class="${classes.join(' ')}"${isDisabled || isLoading ? ' disabled' : ''}>
+    ${shouldRenderIcon ? iconMarkup : ''}
+    ${isIconOnly ? `<span class="visually-hidden">${label}</span>` : label}
+    ${loadingMarkup}
+  </button>`
+
+  if (rounded) {
+    return `<div class="use-rounded-corner-buttons">${buttonMarkup}</div>`
+  }
+
+  return buttonMarkup
+}
+
 export default {
   title: 'Playground/Button',
   argTypes: {
@@ -8,15 +63,18 @@ export default {
     },
     variant: {
       control: 'select',
-      options: ['default', 'strong', 'minimal', 'negative'],
+      options: buttonVariants,
     },
     layout: {
       control: 'select',
-      options: ['Text only', 'Text + Icon', 'Icon only'],
+      options: layouts,
     },
     state: {
       control: 'select',
-      options: ['enabled', 'disabled', 'loading'],
+      options: states,
+    },
+    rounded: {
+      control: 'boolean',
     },
     icon: {
       control: 'text',
@@ -25,20 +83,41 @@ export default {
 }
 
 export const PlaygroundButton = {
-  render: ({ label, variant, layout, state, icon, ...args }) => {
-    return `<button class="btn btn-${variant}${layout === 'Icon only' ? ' btn-icon' : ''}${state === 'loading' ? ' loading-indeterminate' : ''}"${state === 'disabled' ? ' disabled' : ''}>
-    ${layout.includes('Icon') ? `<svg ${layout.includes('Text') ? 'aria-hidden="true"' : ''} fill="currentColor" viewBox="0 0 1000 1000">${icon}</svg>` : ''}
-    ${!layout.startsWith('Icon') ? label : ''}
-    <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
-      <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
-    </svg>
-  </button>`
+  parameters: {
+    docs: {
+      codePanel: true,
+      source: {
+        transform: (_src, context) => {
+          const { label, variant, layout, state, icon, rounded } = context.args
+
+          return renderButton({
+            label,
+            variant: buttonVariants.includes(variant) ? variant : 'default',
+            layout,
+            state,
+            icon,
+            rounded,
+          })
+        },
+      },
+    },
+  },
+  render: ({ label, variant, layout, state, icon, rounded }) => {
+    return renderButton({
+      label,
+      variant: buttonVariants.includes(variant) ? variant : 'default',
+      layout,
+      state,
+      icon,
+      rounded,
+    })
   },
   args: {
-    label: 'Label 3',
+    label: 'Label',
     variant: 'default',
     layout: 'Text + Icon',
     state: 'enabled',
+    rounded: false,
     icon: '<path d="M851.8 172.224C754.746 75.18 597.77 74.613 500 170.492c-97.77-95.879-254.746-95.312-351.795 1.732-96.042 96.038-97.605 250.77-4.7 348.724L500 914v-.006.006l356.5-393.05c92.9-97.956 91.338-252.688-4.7-348.726Zm-65.476 277.332L500 766.694 213.677 449.557l-.145-.162a150.005 150.005 0 0 1 217.526-206.464q.222.222.45.438l43.788 41.64L500 308.784l24.7-23.77 43.794-41.645q.226-.216.449-.438A149.05 149.05 0 0 1 675.018 199a150 150 0 0 1 111.451 250.4Z" style="fill-rule:evenodd"/>'
   },
 }