Docs(web-react): Add Icons demo #DS-900

- Add Components and Icons tabs
- Create demo page for icons

packages/web-react/config/vite/app.ts

@@ -9,6 +9,9 @@ export default defineConfig({
   plugins: [
     react(),
     handlebars({
+      helpers: {
+        eq: (variable, value) => variable === value,
+      },
       partialDirectory: resolve(__dirname, '../../partials'),
       runtimeOptions: {
         data: {
@@ -18,6 +21,9 @@ export default defineConfig({
               .filter((item) => item.isDirectory())
               .map((item) => item.name),
           ],
+          icons: [
+            ...readdirSync('../../../icons/src/svg', { withFileTypes: true }).map((item) => item.name.slice(0, -4)),
+          ],
         },
       },
     }),

packages/web-react/index.html

@@ -1,4 +1,4 @@
-{{#> layout/default }}
+{{#> layout/default page="components" }}
 
   <section class="docs-Section">
 

packages/web-react/partials/icons.hbs

@@ -0,0 +1,12 @@
+{{#> layout/default page="icons"}}
+
+<section class="docs-Section">
+
+    <h2 class="typography-heading-medium-text text-secondary-disabled mb-700 mb-tablet-900">Icons</h2>
+
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+
+</section>
+
+{{/layout/default }}

packages/web-react/partials/layout/default.hbs

@@ -5,6 +5,8 @@
   <main class="py-900 py-tablet-1200">
     <div class="Container">
 
+      {{> tabs }}
+
       {{> @partial-block }}
 
     </div>

packages/web-react/partials/tabs.hbs

@@ -0,0 +1,8 @@
+<ul class="Tabs mb-1100" role="tablist">
+  <li class="Tabs__item">
+    <a href="/" class="Tabs__link{{#if (eq page 'components')}} is-selected" aria-selected="true{{/if}}">Components</a>
+  </li>
+  <li class="Tabs__item">
+    <a href="/src/icons/" class="Tabs__link{{#if (eq page 'icons')}} is-selected" aria-selected="true{{/if}}">Icons</a>
+  </li>
+</ul>

packages/web-react/src/icons/demo/icons.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Grid, Text, Icon } from '../../components';
+
+const Icons = () => {
+  // TODO: Get this list from folder like in other demos?
+  const icons = [
+    'add',
+    'check-plain',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'close',
+    'download',
+    'edit',
+    'file',
+    'hamburger',
+    'help',
+    'info',
+    'link',
+    'more',
+    'profile',
+    'reload',
+    'search',
+    'spinner',
+    'upload',
+    'visibility-off',
+    'visibility-on',
+    'warning',
+  ];
+
+  return (
+    <Grid cols={2} tablet={4} desktop={6} UNSAFE_className="text-center my-1000">
+      {icons.map((icon) => (
+        <div key={icon} className="mb-600">
+          <Icon name={icon} />
+          {/* TODO: emphsasis="bold" made it too much 'bold' */}
+          <Text UNSAFE_className="mt-500" UNSAFE_style={{ fontWeight: 'bold' }}>
+            {icon}
+          </Text>
+        </div>
+      ))}
+    </Grid>
+  );
+};
+
+export default Icons;

packages/web-react/src/icons/index.html

@@ -0,0 +1 @@
+{{> icons }}

packages/web-react/src/icons/index.tsx

@@ -0,0 +1,17 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
+import { IconsProvider } from '../context';
+import Icons from './demo/icons';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <IconsProvider value={icons}>
+      <Icons />
+    </IconsProvider>
+  </React.StrictMode>,
+);