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

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

packages/web-react/config/tsconfig.prod.json

@@ -12,6 +12,7 @@
     "../src/**/stories/**/*",
     "../src/**/demo/**/*",
     "../src/**/*.demo.*",
-    "../src/**/*.html"
+    "../src/**/*.html",
+    "../src/icons/**/*"
   ]
 }

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

@@ -5,17 +5,23 @@ import handlebars from 'vite-plugin-handlebars';
 import react from '@vitejs/plugin-react';
 import { getNestedDirs } from '../../scripts/build';
 
+const hiddenDemoComponents = ['Field', 'Dialog', 'Icon', 'TextFieldBase', 'VisuallyHidden'];
+
 export default defineConfig({
   plugins: [
     react(),
     handlebars({
+      helpers: {
+        eq: (variable, value) => variable === value,
+      },
       partialDirectory: resolve(__dirname, '../../partials'),
       runtimeOptions: {
         data: {
           // Get the list of components directories and pass their names to the data
           components: [
             ...readdirSync('src/components', { withFileTypes: true })
               .filter((item) => item.isDirectory())
+              .filter((item) => !hiddenDemoComponents.includes(item.name))
               .map((item) => item.name),
           ],
         },

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,16 @@
+{{#> layout/default page="icons"}}
+
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Icons</h2>
+
+    <div class="docs-Stack docs-Stack--start">
+
+        <div id="root"></div>
+        <script type="module" src="./index.tsx"></script>
+
+    </div>
+
+</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,27 @@
+import React, { useContext } from 'react';
+import { Grid, Text, Icon } from '../../components';
+import IconsContext, { IconsContextType } from '../../context/IconsContext';
+
+const Icons = () => {
+  let icons;
+  const iconsContext: IconsContextType = useContext(IconsContext);
+
+  if (iconsContext !== null && iconsContext !== undefined) {
+    icons = Object.keys(iconsContext);
+  }
+
+  return (
+    <Grid elementType="ul" cols={2} tablet={4} desktop={6} UNSAFE_className="text-center my-1000 list-unstyled">
+      {icons?.map((icon) => (
+        <li key={icon} className="mb-600">
+          <Icon name={icon} />
+          <Text UNSAFE_className="mt-500" emphasis="bold">
+            {icon}
+          </Text>
+        </li>
+      ))}
+    </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>,
+);