@abyss-project/commons-front-core 13.0.0 → 13.1.0

package/catalog/pages/ToolIcon.tsx

@@ -1,48 +1,48 @@
-import { styled } from '@mui/material/styles';
-import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
-import type { ToolIconSize } from '../../src/components/meaning/ToolIcon/ToolIcon';
-import { px } from '../../src/theme/components/shared';
-import { ToolKind } from '../../src/theme/tokens/domain';
-import { Example, Showcase } from '../frame';
-
-const SIZES: ToolIconSize[] = [16, 20, 24, 32, 44];
-
-const Tile = styled('figure')(({ theme }) => ({
-  margin: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  // Captions on one baseline whatever the icon size.
-  justifyContent: 'flex-end',
-  alignSelf: 'stretch',
-  gap: px(theme.design.space[2]),
-  width: px(theme.design.space[10] + theme.design.space[6]),
-  fontSize: px(theme.design.typeScale.small),
-  color: theme.design.tokens['text.secondary'],
-  '& > figcaption': { fontFamily: theme.design.fonts.mono },
-}));
-
-export const ToolIconPage = () => (
-  <Showcase
-    family="Sens"
-    name="ToolIcon"
-    description="Icône de chaque produit de l'écosystème, en dégradé de marque : un outil se reconnaît à son icône, pas à une couleur."
-  >
-    <Example title="Les vingt et un produits, 32 px" framed>
-      {Object.values(ToolKind).map((tool) => (
-        <Tile key={tool}>
-          <ToolIcon tool={tool} size={32} label={tool} />
-          <figcaption>{tool}</figcaption>
-        </Tile>
-      ))}
-    </Example>
-    <Example title="Les cinq tailles" framed>
-      {SIZES.map((size) => (
-        <Tile key={size}>
-          <ToolIcon tool={ToolKind.Cloud} size={size} label={`Cloud ${size}`} />
-          <figcaption>{size}</figcaption>
-        </Tile>
-      ))}
-    </Example>
-  </Showcase>
-);
+import { styled } from '@mui/material/styles';
+import { ToolIcon } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import type { ToolIconSize } from '../../src/components/meaning/ToolIcon/ToolIcon';
+import { px } from '../../src/theme/components/shared';
+import { ToolKind } from '../../src/theme/tokens/domain';
+import { Example, Showcase } from '../frame';
+
+const SIZES: ToolIconSize[] = [16, 20, 24, 32, 44];
+
+const Tile = styled('figure')(({ theme }) => ({
+  margin: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  // Captions on one baseline whatever the icon size.
+  justifyContent: 'flex-end',
+  alignSelf: 'stretch',
+  gap: px(theme.design.space[2]),
+  width: px(theme.design.space[10] + theme.design.space[6]),
+  fontSize: px(theme.design.typeScale.small),
+  color: theme.design.tokens['text.secondary'],
+  '& > figcaption': { fontFamily: theme.design.fonts.mono },
+}));
+
+export const ToolIconPage = () => (
+  <Showcase
+    family="Sens"
+    name="ToolIcon"
+    description="Icône de chaque produit de l'écosystème, en dégradé de marque : un outil se reconnaît à son icône, pas à une couleur."
+  >
+    <Example title="Les vingt et un produits, 32 px" framed>
+      {Object.values(ToolKind).map((tool) => (
+        <Tile key={tool}>
+          <ToolIcon tool={tool} size={32} label={tool} />
+          <figcaption>{tool}</figcaption>
+        </Tile>
+      ))}
+    </Example>
+    <Example title="Les cinq tailles" framed>
+      {SIZES.map((size) => (
+        <Tile key={size}>
+          <ToolIcon tool={ToolKind.Cloud} size={size} label={`Cloud ${size}`} />
+          <figcaption>{size}</figcaption>
+        </Tile>
+      ))}
+    </Example>
+  </Showcase>
+);