Add new icon, and used in header component (#639)

* Add new icon, and used in header component

* fix storybook

* change title and id of icon

Author: wouterhhuisman

packages/orchestrator-ui-components/src/components/WfoPageTemplate/WfoPageHeader/WfoPageHeader.tsx

@@ -17,7 +17,7 @@ import {
 import { WfoAppLogo } from '@/components/WfoPageTemplate/WfoPageHeader/WfoAppLogo';
 import { getWfoPageHeaderStyles } from '@/components/WfoPageTemplate/WfoPageHeader/styles';
 import { useOrchestratorTheme, useWithOrchestratorTheme } from '@/hooks';
-import { WfoLogoutIcon } from '@/icons';
+import { WfoLogoutIcon, WfoSideMenu } from '@/icons';
 
 export interface WfoPageHeaderProps {
     // todo: should be part of theme!
@@ -51,10 +51,10 @@ export const WfoPageHeader: FC<WfoPageHeaderProps> = ({
                 </EuiHeaderSectionItem>
 
                 <EuiButtonIcon
-                    aria-label="Logout"
+                    aria-label="Show/Hide side menu"
                     display="empty"
                     iconType={() => (
-                        <WfoLogoutIcon color={theme.colors.emptyShade} />
+                        <WfoSideMenu color={theme.colors.emptyShade} />
                     )}
                     css={{ width: 48, height: 48, marginLeft: 10 }}
                     onClick={handleSideMenuClick}

packages/orchestrator-ui-components/src/icons/WfoSideMenu.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoSideMenu } from './WfoSidemenu';
+
+const Story: Meta<typeof WfoSideMenu> = {
+    component: WfoSideMenu,
+    title: 'Icons/WfoSideMenu',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

packages/orchestrator-ui-components/src/icons/WfoSideMenu.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoSideMenu: FC<WfoIconProps> = ({
+    width = 20,
+    height = 20,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 60 60"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/sidemenu</title>
+        <g id="Symbols" stroke="none" strokeWidth="6" fill="none">
+            <g
+                id="icon/sidemenu"
+                stroke={color}
+                transform="translate(-1.4305115e-6,0.00126457)"
+            >
+                <path
+                    d="M 20.638709,3.2354373 20.962452,56.561712"
+                    id="path1"
+                ></path>
+                <rect
+                    id="rect1"
+                    width="53.322857"
+                    height="53.326275"
+                    x="3.3385715"
+                    y="3.3373055"
+                    ry="11.207431"
+                ></rect>
+            </g>
+        </g>
+    </svg>
+);

packages/orchestrator-ui-components/src/icons/index.ts

@@ -15,6 +15,7 @@ export * from './WfoMinusCircleFill';
 export * from './WfoSearchStrikethrough';
 export * from './WfoSortAsc';
 export * from './WfoSortDesc';
+export * from './WfoSideMenu';
 export * from './WfoPlayFill';
 export * from './WfoCode';
 export * from './WfoEyeFill';