From 3636497141f802fd8f7c07bf6b521cce6e08ce1b Mon Sep 17 00:00:00 2001
From: Guillaume Cornut <guillaume.cornut@lumapps.com>
Date: Thu, 9 Jan 2025 16:32:37 +0100
Subject: [PATCH] docs(button): add danger and warning use cases

---
 .../generated/Button/Demos.stories.tsx        |  2 ++
 .../src/stories/generated/Button/danger.tsx   |  1 +
 .../src/stories/generated/Button/warning.tsx  |  1 +
 .../product/components/button/index.mdx       | 13 ++++++++++
 .../components/button/react/danger.tsx        | 26 +++++++++++++++++++
 .../components/button/react/warning.tsx       | 20 ++++++++++++++
 6 files changed, 63 insertions(+)
 create mode 120000 packages/lumx-react/src/stories/generated/Button/danger.tsx
 create mode 120000 packages/lumx-react/src/stories/generated/Button/warning.tsx
 create mode 100644 packages/site-demo/content/product/components/button/react/danger.tsx
 create mode 100644 packages/site-demo/content/product/components/button/react/warning.tsx

diff --git a/packages/lumx-react/src/stories/generated/Button/Demos.stories.tsx b/packages/lumx-react/src/stories/generated/Button/Demos.stories.tsx
index caf181b5fe..8a2c1292a8 100644
--- a/packages/lumx-react/src/stories/generated/Button/Demos.stories.tsx
+++ b/packages/lumx-react/src/stories/generated/Button/Demos.stories.tsx
@@ -3,9 +3,11 @@
  */
 export default { title: 'LumX components/button/Button Demos' };
 
+export { App as Danger } from './danger';
 export { App as EmphasisHigh } from './emphasis-high';
 export { App as EmphasisLow } from './emphasis-low';
 export { App as EmphasisMedium } from './emphasis-medium';
 export { App as FullWidth } from './full-width';
 export { App as Small } from './small';
 export { App as Toggle } from './toggle';
+export { App as Warning } from './warning';
diff --git a/packages/lumx-react/src/stories/generated/Button/danger.tsx b/packages/lumx-react/src/stories/generated/Button/danger.tsx
new file mode 120000
index 0000000000..464f6db210
--- /dev/null
+++ b/packages/lumx-react/src/stories/generated/Button/danger.tsx
@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/button/react/danger.tsx
\ No newline at end of file
diff --git a/packages/lumx-react/src/stories/generated/Button/warning.tsx b/packages/lumx-react/src/stories/generated/Button/warning.tsx
new file mode 120000
index 0000000000..3d37162b42
--- /dev/null
+++ b/packages/lumx-react/src/stories/generated/Button/warning.tsx
@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/button/react/warning.tsx
\ No newline at end of file
diff --git a/packages/site-demo/content/product/components/button/index.mdx b/packages/site-demo/content/product/components/button/index.mdx
index adc37e5dc5..8a7f0ecb7a 100644
--- a/packages/site-demo/content/product/components/button/index.mdx
+++ b/packages/site-demo/content/product/components/button/index.mdx
@@ -40,6 +40,19 @@ Use full width when you need to get the button full width.
 
 <DemoBlock vAlign="center" demo="full-width" withThemeSwitcher />
 
+## Warning
+
+Use `Warning` buttons to confirm actions that may cause a significant change.
+Low emphasis is currently not supported.
+
+<DemoBlock vAlign="center" demo="warning" withThemeSwitcher />
+
+## Danger
+
+Use `Danger` buttons to confirm a destructive and irreversible action, such as deleting.
+
+<DemoBlock vAlign="center" demo="danger" withThemeSwitcher />
+
 ### Accessibility concerns
 
 #### Button
diff --git a/packages/site-demo/content/product/components/button/react/danger.tsx b/packages/site-demo/content/product/components/button/react/danger.tsx
new file mode 100644
index 0000000000..071fa8eb7e
--- /dev/null
+++ b/packages/site-demo/content/product/components/button/react/danger.tsx
@@ -0,0 +1,26 @@
+import { mdiDelete } from '@lumx/icons';
+import { Button, Emphasis, FlexBox, IconButton, Orientation, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = ({ theme }: any) => (
+    <>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button color="red" theme={theme}>
+                Delete
+            </Button>
+            <IconButton label="Delete" icon={mdiDelete} color="red" theme={theme} />
+        </FlexBox>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.medium} color="red" theme={theme}>
+                Delete
+            </Button>
+            <IconButton label="Delete" icon={mdiDelete} emphasis={Emphasis.medium} color="red" theme={theme} />
+        </FlexBox>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.low} color="red" theme={theme}>
+                Delete
+            </Button>
+            <IconButton label="Delete" icon={mdiDelete} emphasis={Emphasis.low} color="red" theme={theme} />
+        </FlexBox>
+    </>
+);
diff --git a/packages/site-demo/content/product/components/button/react/warning.tsx b/packages/site-demo/content/product/components/button/react/warning.tsx
new file mode 100644
index 0000000000..cc7c0d71ae
--- /dev/null
+++ b/packages/site-demo/content/product/components/button/react/warning.tsx
@@ -0,0 +1,20 @@
+import { mdiClose } from '@lumx/icons';
+import { Button, Emphasis, FlexBox, IconButton, Orientation, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = ({ theme }: any) => (
+    <>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button color="yellow" theme={theme}>
+                Remove
+            </Button>
+            <IconButton label="Remove" icon={mdiClose} color="yellow" theme={theme} />
+        </FlexBox>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.medium} color="yellow" theme={theme}>
+                Remove
+            </Button>
+            <IconButton label="Remove" icon={mdiClose} emphasis={Emphasis.medium} color="yellow" theme={theme} />
+        </FlexBox>
+    </>
+);