docs(icons): add icons documentation (#1217)

packages/gatsby-theme-styleguide/src/gatsby-components/IconsLink/IconsLink.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+
+const IconsLink = (props) => {
+  const { children, ...rest } = props
+  return (
+    <StaticQuery
+      query={graphql`
+        query IconsLstVersion {
+          githubRelease(isCurrent: { eq: true }) {
+            tagName
+          }
+        }
+      `}
+      render={(data) => {
+        return (
+          <a
+            {...rest}
+            href={`https://github.com/adeo/design-system--styleguide/releases/download/${data.githubRelease.tagName}/icons.zip`}
+          >
+            {children}
+          </a>
+        )
+      }}
+    />
+  )
+}
+
+export default IconsLink

packages/gatsby-theme-styleguide/src/gatsby-components/IconsLink/index.js

@@ -0,0 +1 @@
+export { default } from './IconsLink'

packages/gatsby-theme-styleguide/src/gatsby-components/layout.js

@@ -16,6 +16,7 @@ import InlineCode from '../gatsby-components/InlineCode'
 import Highlight from '../gatsby-components/Highlight'
 import SubContents from '../gatsby-components/SubContents'
 import DesignerKitLink from '../gatsby-components/DesignerKitLink'
+import IconsLink from '../gatsby-components/IconsLink'
 
 const shortcodes = {
   Color,
@@ -24,6 +25,7 @@ const shortcodes = {
   HintItem,
   IconViewer,
   DesignerKitLink,
+  IconsLink,
   Highlight,
   pre: ({ children }) => <Code>{children}</Code>,
   inlineCode: InlineCode,

packages/styles/components/_c.modal.scss

@@ -226,9 +226,4 @@
       }
     }
   }
-
-  // Overlay
-  @at-root #{$parent}-overlay {
-    @include set-page-overlay();
-  }
 }

src/docs/Foundations/Icons/catalog.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Monochrome icons'
-order: 2
+order: 3
 ---
 
 <IconViewer type="monochrom" />

src/docs/Foundations/Icons/catalogColor.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'Coloured icons'
-order: 3
+order: 4
 ---
 
 <IconViewer type="color" />

src/docs/Foundations/Icons/code.mdx

@@ -0,0 +1,87 @@
+---
+title: 'Code'
+order: 2
+status:
+  scss: 'ready'
+  figma: 'ready'
+  react: 'ready'
+---
+
+> Icons are considered as static assets. They are available in SVG and PDF, also they can be used as Vue, React and Svelte components.
+
+
+## Import
+
+The icon set can be downloaded using this link: 
+<IconsLink> Download the Icon Kit here </IconsLink>
+
+The icon set can be added to your project dependencies: 
+
+Using NPM: 
+```
+npm install --save-dev @mozaic-ds/icons
+```
+
+Using Yarn: 
+```
+yarn add @mozaic-ds/icons
+```
+
+## Usage 
+All icon components are only wrappers for SVG. It has been done that way to facilitate the integration in your technology. 
+
+### VueJs 
+
+If you are a `@mozaic-ds/vue` or `@mozaic-ds/vue-3` users, you will be able to integrate the MIcon component. 
+To know more about the `MIcon` follow [this documentation](https://adeo.github.io/mozaic-vue/?path=/docs/components-micon--default-story)
+
+### Angular
+
+The icon set doesn't contains Angular components. You must use the svgs icon type. 
+In order to add the svgs to your project you can add the following code to your build: 
+
+```
+{
+  "glob": "**/*",
+  "input": "./node_modules/@mozaic-ds/icons/svg/",
+  "output": "./assets/images"
+}
+```
+
+### React
+
+In order to use the icon set on React, you must install the `@mozaic-ds/icons` package.
+Once the package install you can import the needed icon into your code.
+> To find the icon's name, please refer to the icon catalog page.
+
+```js
+import {FullScreen48} from '@mozaic-ds/icons/react'
+```
+
+### Web components
+
+In order to use the icon set on any technology, you can use our web components version. 
+
+You must install the `mozaic-web-components` package. 
+
+```
+npm install --save-dev @mozaic-ds/mozaic-web-components
+```
+
+You have to add the following to your code in order to import the web component. 
+
+```js
+import ArrowArrowRight16 from '@mozaic-ds/mozaic-web-components/public/icons/ArrowArrowRight16.js';
+
+if (!customElements.get('navigation-arrow-arrow--right-16px')) {
+  customElements.define(
+    'navigation-arrow-arrow--right-16px',
+    ArrowArrowRight16
+  )
+}
+```
+
+In order to use the web component you have to add to your HTML this: 
+```html
+<navigation-arrow-arrow--right-16px></navigation-arrow-arrow--right-16px>
+```

src/docs/Foundations/Icons/index.mdx

@@ -1,10 +1,19 @@
 ---
 title: 'Icons'
 order: 1
+links:
+  vue:
+    link: 'https://adeo.github.io/mozaic-vue/?path=/story/components-micon'
+    status: 'ready'
+  freemarker:
+    status: 'ready'
+    link: 'https://solid-bassoon-011c369c.pages.github.io/pages/2_Foundations/Icons/'
+  webComponent:
+    status: 'ready'
+    link: 'https://ubiquitous-giggle-7b5b6e33.pages.github.io/?path=/story/components-icons'
 status:
   scss: 'ready'
   figma: 'ready'
-  react: 'ready'
 ---
 
 > An icon is a graphic representation of an object, a message or a movement. It's different from an illustration because of its simplistic aspect. An icon must be **recognisable at first sight** so that the user can understand the information or the action it is intended to represent. Icons may be a visual guide to help the user to navigate on leroymerlin.fr faster.