[FRNT-457]: add category to menu (#15)

* add category to menu

* Update gatsby-theme-woly/src/components/components-menu.js

Co-authored-by: Sergey Sova <5620073+sergeysova@users.noreply.github.com>

Author: tatinacher

example/src/woly/molecules/input-password/example.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const InputPassword = () => <input type="password" />;

example/src/woly/molecules/input-password/usage.mdx

@@ -0,0 +1,21 @@
+---
+name: input-password
+category: molecules
+package: 'woly'
+---
+
+import { InputPassword } from './example';
+
+Hello! It is InputPassword
+
+<InputPassword />
+
+### Props
+
+| Name    | Type                     | Default  | Description                                                |
+| ------- | ------------------------ | -------- | ---------------------------------------------------------- | ---------- | ----------------------- |
+| `text`  | `React.ReactNode`        |          | Text appeared on the button                                |
+| `left`  | `React.ReactNode`        | `null`   | Component to show on the left side of the text (ex.: Icon) |
+| `right` | `React.ReactNode`        | `null`   | Component on the right side of the text                    |
+| `type`  | `'button'                | 'submit' | 'reset'`                                                   | `'button'` | HTML type of the button |
+| `...`   | `HTMLButtonElementProps` | `{}`     | Other props is inherited from `HTMLButtonElement`          |

gatsby-theme-woly/src/components/components-menu.js

@@ -21,7 +21,6 @@ export const ComponentsMenu = ({ menu, isVisible, buttonClicked }) => {
     <>
       <BurgerButton buttonClicked={buttonClicked} />
       <Block isVisible={isVisible}>
-        <h3>Components</h3>
         {menu.map((group) => (
           <Group key={group.name} group={group} activeMenu={activeMenu} />
         ))}
@@ -34,15 +33,28 @@ const Group = ({ group, activeMenu }) => (
   <div>
     <MenuHeader>{group.name}</MenuHeader>
     <MenuItems>
-      {group.components.map((com) => (
-        <MenuItem key={com.id} active={com.name === activeMenu ? true : false}>
-          <Link to={com.path}>{com.name}</Link>
-        </MenuItem>
+      {Object.keys(group.components).map((key) => (
+        <GroupItems
+          name={key}
+          groupItems={group.components[key]}
+          activeMenu={activeMenu}
+        />
       ))}
     </MenuItems>
   </div>
 );
 
+export const GroupItems = ({ name, groupItems, activeMenu }) => (
+  <>
+    <CategoryHead>{name}</CategoryHead>
+    {groupItems.map((com) => (
+      <MenuItem key={com.id} active={com.name === activeMenu}>
+        <Link to={com.path}>{com.name}</Link>
+      </MenuItem>
+    ))}
+  </>
+);
+
 export const Burger = styled.div`
   display: block;
   position: fixed;
@@ -129,11 +141,17 @@ const Block = styled.nav`
   }
 `;
 
-export const MenuHeader = styled.h4`
+export const MenuHeader = styled.h3`
   text-transform: capitalize;
   font-weight: 300;
   border-bottom: 1px solid var(--base);
-  padding: 20px 0 10px 0.3rem;
+  padding: 0 0 10px 0;
+  margin-bottom: 0px;
+  margin-top: 20px;
+`;
+
+export const CategoryHead = styled.h4`
+  padding: 0.5rem 5rem 0.5rem 0.5rem;
   margin-bottom: 0px;
 `;
 

gatsby-theme-woly/src/components/layout.js

@@ -49,12 +49,17 @@ function createMapping(data) {
   const packages = {};
   for (const component of data.mdx.components) {
     if (!packages[component.meta.package]) {
-      packages[component.meta.package] = [];
+      packages[component.meta.package] = {};
     }
+
+    if (!packages[component.meta.package][component.meta.category]) {
+      packages[component.meta.package][component.meta.category] = [];
+    }
+
     const prefix = data.pathPrefix || '';
 
     if (!isHiddenCategory(component.meta.category)) {
-      packages[component.meta.package].push({
+      packages[component.meta.package][component.meta.category].push({
         ...component.meta,
         path: prefix + paths.componentUsage(component.meta),
         id: component.id,