) => {
+ setTransform(event.currentTarget.value);
+ };
+
+ return (
+ <>
+
+
+ {icons
+ .filter(iconName => iconName && iconName.includes(query))
+ .map(
+ iconName =>
+ iconName &&
+ children({ name: iconName, size, transform, useCurrentColor, border, filter }),
+ )}
+
+
+ );
+};
+
+export const AllIconsDocs = () => {
+ return (
+
+
+ {({ name, size, transform, border, filter, useCurrentColor }) => (
+
+
+
+ )}
+
+
+ );
+};
diff --git a/packages/design-system/src/stories/icons/SizedIcon.mdx b/packages/design-system/src/stories/icons/SizedIcon.mdx
index 2310c58c5cb..83360d9bb30 100644
--- a/packages/design-system/src/stories/icons/SizedIcon.mdx
+++ b/packages/design-system/src/stories/icons/SizedIcon.mdx
@@ -1,4 +1,4 @@
-import { ArgTypes, Canvas, Meta, Story } from '@storybook/blocks';
+import { Controls, Canvas, Meta, Story } from '@storybook/blocks';
import { SizedIcon } from '../../';
import * as Stories from './SizedIcon.stories';
@@ -31,7 +31,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
-
+
#### Size S
@@ -39,7 +39,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
-
+
#### Size M
@@ -47,7 +47,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
-
+
#### Size L
@@ -55,7 +55,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
-
+
## States
@@ -71,7 +71,7 @@ NA
## Usage
-Icons are illustrative elements, not interactive. If you need a clickable icon, check out [the ButtonIcon docs here.](/docs/components-clickable-buttons-buttonicon--variations)
+Icons are illustrative elements, not interactive. If you need a clickable icon, check out [the ButtonIcon docs here.](/docs/clickable-buttonicon--docs)
## Accessibility
diff --git a/packages/design-system/src/stories/icons/SizedIcon.stories.tsx b/packages/design-system/src/stories/icons/SizedIcon.stories.tsx
index fe183ec09ee..2c5820aaceb 100644
--- a/packages/design-system/src/stories/icons/SizedIcon.stories.tsx
+++ b/packages/design-system/src/stories/icons/SizedIcon.stories.tsx
@@ -30,7 +30,16 @@ const colorOptions = {
tokens.coralColorNeutralIcon,
tokens.coralColorWarningIcon,
],
- control: { type: 'select' },
+ control: {
+ type: 'select',
+ labels: {
+ [tokens.coralColorSuccessIcon]: 'Success',
+ [tokens.coralColorAccentIcon]: 'Accent',
+ [tokens.coralColorDangerIcon]: 'Danger',
+ [tokens.coralColorNeutralIcon]: 'Neutral',
+ [tokens.coralColorWarningIcon]: 'Warning',
+ },
+ },
};
const defaultColor = tokens.coralColorNeutralIcon;
const defaultName = 'pencil';
@@ -45,6 +54,11 @@ IconXS.argTypes = {
control: { type: 'select' },
},
color: colorOptions,
+ size: {
+ table: {
+ disable: true,
+ },
+ },
};
IconXS.args = defaultArgs;
@@ -54,6 +68,11 @@ IconS.argTypes = {
control: { type: 'select' },
},
color: colorOptions,
+ size: {
+ table: {
+ disable: true,
+ },
+ },
};
IconS.args = defaultArgs;
@@ -63,6 +82,11 @@ IconM.argTypes = {
control: { type: 'select' },
},
color: colorOptions,
+ size: {
+ table: {
+ disable: true,
+ },
+ },
};
IconM.args = defaultArgs;
@@ -72,6 +96,11 @@ IconL.argTypes = {
control: { type: 'select' },
},
color: colorOptions,
+ size: {
+ table: {
+ disable: true,
+ },
+ },
};
IconL.args = defaultArgs;
diff --git a/packages/design-system/src/stories/messaging/InlineMessage.mdx b/packages/design-system/src/stories/messaging/InlineMessage.mdx
index 083baa5b188..84f0ed6678d 100644
--- a/packages/design-system/src/stories/messaging/InlineMessage.mdx
+++ b/packages/design-system/src/stories/messaging/InlineMessage.mdx
@@ -47,7 +47,7 @@ The text should adapt to the surrounding layout. Depending on the context, if th
Inline messages are non-clickable, except if there is a link. In that case, only the link will be clickable.
-Please refer to the [Link guidelines](/docs/components-link--default) for more information.
+Please refer to the [Link guidelines](/docs/clickable-link--docs) for more information.
## Content
diff --git a/packages/storybook/src/docs/Icons.tsx b/packages/storybook/src/docs/Icons.tsx
deleted file mode 100644
index 62f09705674..00000000000
--- a/packages/storybook/src/docs/Icons.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { useState, useEffect } from 'react';
-import type { ChangeEvent, FormEvent } from 'react';
-import { IconGallery, IconItem } from '@storybook/blocks';
-
-import { Form, Icon, IconsProvider, ThemeProvider } from '@talend/design-system';
-
-export const Icons = () => {
- const [icons, setIds] = useState<(string | null)[]>([]);
- const [query, setQuery] = useState('');
- const [size, setSize] = useState(2);
- const [filter, setFilter] = useState();
- const [transform, setTransform] = useState('');
- const [useCurrentColor, setUseCurrentColor] = useState();
- const [currentColor, setCurrentColor] = useState();
- const [border, setBorder] = useState();
-
- useEffect(() => {
- IconsProvider.getAllIconIds().then((ids: (string | null)[]) => {
- const cleanIds = ids.filter(id => id && !id.includes(':'));
- setIds(cleanIds);
- });
- }, []);
-
- const onChangeQuery = (event: ChangeEvent) => {
- setQuery(event.currentTarget.value);
- };
-
- const onChangeSize = (event: ChangeEvent) => {
- setSize(parseFloat(event.currentTarget.value));
- };
-
- const onChangeTransform = (event: ChangeEvent) => {
- setTransform(event.currentTarget.value);
- };
-
- return (
- <>
- {/*
- // Temporary fix, will be removed with CSS Modules conversion
- // @ts-ignore */}
-
-
-
-
-
- {icons
- .filter(iconName => iconName && iconName.includes(query))
- .map(
- (iconName, index) =>
- iconName && (
-
-
-
- ),
- )}
-
-
-
- );
-};