Merge pull request #503 from equinor/fix/guidelines

Update guidelines story and fix hover effect for settings
equinor · Mar 19, 2024 · 6ce9666 · 6ce9666
2 parents 6380fa1 + 963b89e
commit 6ce9666
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 118 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.styles.ts b/src/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.styles.ts
@@ -20,6 +20,9 @@ export const MenuSection = styled.div`
 export const ApplicationName = styled.div`
   display: flex;
   align-items: flex-start;
+  > p {
+    text-align: center;
+  }
 `;
 
 export const ApplicationContent = styled.div`

diff --git a/src/components/Navigation/TopBar/Guidelines/Guidelines.stories.tsx b/src/components/Navigation/TopBar/Guidelines/Guidelines.stories.tsx
@@ -1,10 +1,13 @@
-import { Icon } from '@equinor/eds-core-react';
 import {
-  assignment,
-  check,
+  account_circle,
+  dashboard,
   info_circle,
-  minimize,
-  notifications,
+  list,
+  platform,
+  settings,
+  star_outlined,
+  time,
+  view_module,
 } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 import { Meta, StoryFn } from '@storybook/react';
@@ -13,59 +16,76 @@ import Guidelines from './index';
 
 const { colors } = tokens;
 
-const Wrapper = styled.div`
-  height: 35rem;
-  > div {
-    top: 0;
-    height: 100%;
-  }
-`;
-
 export default {
   title: 'Navigation/TopBar/Guidelines',
   component: Guidelines,
 } as Meta;
 
-import { actions } from '@storybook/addon-actions';
+import { GuidelineSections } from './Guidelines';
 
-import styled from 'styled-components';
-export const Primary: StoryFn = () => {
-  const handleOnClose = () => {
-    actions('onClose').onClose('Ran on close');
-  };
+const sections: GuidelineSections[] = [
+  {
+    sectionName: 'Top bar',
+    items: [
+      {
+        title: 'Field Selector',
+        icon: platform,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'Guidelines',
+        icon: info_circle,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'Settings',
+        icon: settings,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'Account',
+        icon: account_circle,
+        color: colors.interactive.primary__resting.hex,
+      },
+    ],
+  },
+  {
+    sectionName: 'Data display',
+    items: [
+      {
+        title: 'Grid View',
+        icon: view_module,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'List View',
+        icon: list,
+        color: colors.interactive.primary__resting.hex,
+      },
+    ],
+  },
+  {
+    sectionName: 'Navigation rail',
+    items: [
+      {
+        title: 'Dashboard',
+        icon: dashboard,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'Recently Updated',
+        icon: time,
+        color: colors.interactive.primary__resting.hex,
+      },
+      {
+        title: 'Favourites',
+        icon: star_outlined,
+        color: colors.interactive.primary__resting.hex,
+      },
+    ],
+  },
+];
 
-  return (
-    <Wrapper>
-      <Guidelines open onClose={handleOnClose}>
-        <Guidelines.Section title="Top bar">
-          <Guidelines.Item title="Notifications">
-            <Icon
-              data={notifications}
-              color={colors.interactive.primary__resting.rgba}
-            />
-          </Guidelines.Item>
-          <Guidelines.Item title="Guidelines">
-            <Icon
-              data={info_circle}
-              color={colors.interactive.primary__resting.rgba}
-            />
-          </Guidelines.Item>
-        </Guidelines.Section>
-        <Guidelines.Section title="Status">
-          <Guidelines.Item title="Yes">
-            <Icon data={check} color="#77ff72" />
-          </Guidelines.Item>
-          <Guidelines.Item title="No">
-            <Icon data={minimize} color="#ff8484" />
-          </Guidelines.Item>
-        </Guidelines.Section>
-        <Guidelines.Section title="Navigation rail">
-          <Guidelines.Item title="Report">
-            <Guidelines.Colorbox $color="#ff8484" />
-            <Icon data={assignment} color="#ff8484" />
-          </Guidelines.Item>
-        </Guidelines.Section>
-      </Guidelines>
-    </Wrapper>
-  );
+export const Primary: StoryFn = () => {
+  return <Guidelines sections={sections} />;
 };
diff --git a/src/components/Navigation/TopBar/Guidelines/Guidelines.tsx b/src/components/Navigation/TopBar/Guidelines/Guidelines.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactElement, useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { Icon } from '@equinor/eds-core-react';
 import { info_circle } from '@equinor/eds-icons';
@@ -16,15 +16,11 @@ export interface GuidelineSections {
 }
 
 export interface GuidelineProps {
-  /**
-   * @deprecated Use Guideline.Section and Guideline.Item as children instead.
-   */
   sections: GuidelineSections[];
-  children?: ReactElement | ReactElement[];
 }
 
 export const Guidelines = forwardRef<HTMLDivElement, GuidelineProps>(
-  ({ sections, children }) => {
+  ({ sections }) => {
     const [isOpen, setIsOpen] = useState(false);
 
     const buttonRef = useRef<HTMLDivElement | null>(null);
@@ -57,37 +53,35 @@ export const Guidelines = forwardRef<HTMLDivElement, GuidelineProps>(
           open={isOpen}
           anchorEl={buttonRef.current}
           onClose={onClose}
+          withGap
         >
-          <div>
-            {sections?.map((section, index) => (
-              <Section
-                key={`section-${section.sectionName}`}
-                title={section.sectionName}
-              >
-                {section.items.map((item, itemIndex) => {
-                  if ('element' in item) {
-                    return (
-                      <Item key={`${itemIndex}-${index}`} title={item.title}>
-                        {item.element}
-                      </Item>
-                    );
-                  }
+          {sections.map((section, index) => (
+            <Section
+              key={`section-${section.sectionName}`}
+              title={section.sectionName}
+            >
+              {section.items.map((item, itemIndex) => {
+                if ('element' in item) {
                   return (
                     <Item key={`${itemIndex}-${index}`} title={item.title}>
-                      {item.colorBox && (
-                        <Colorbox
-                          data-testid={`color-box-${item.title}`}
-                          $color={item.color}
-                        />
-                      )}
-                      <Icon data={item.icon} color={item.color} size={24} />
+                      {item.element}
                     </Item>
                   );
-                })}
-              </Section>
-            ))}
-            {children}
-          </div>
+                }
+                return (
+                  <Item key={`${itemIndex}-${index}`} title={item.title}>
+                    {item.colorBox && (
+                      <Colorbox
+                        data-testid={`color-box-${item.title}`}
+                        $color={item.color}
+                      />
+                    )}
+                    <Icon data={item.icon} color={item.color} size={24} />
+                  </Item>
+                );
+              })}
+            </Section>
+          ))}
         </TopBarMenu>
       </>
     );

diff --git a/src/components/Navigation/TopBar/Guidelines/Section.tsx b/src/components/Navigation/TopBar/Guidelines/Section.tsx
@@ -16,7 +16,6 @@ const Container = styled.div`
   > section {
     display: flex;
     flex-direction: column;
-    margin-bottom: ${spacings.large};
     gap: ${spacings.medium};
     margin-left: ${spacings.medium};
     overflow: auto;

diff --git a/src/components/Navigation/TopBar/Guidelines/index.ts b/src/components/Navigation/TopBar/Guidelines/index.ts
@@ -1,19 +1,14 @@
 import Colorbox from './Colorbox';
 import { Guidelines as BaseGuidelines } from './Guidelines';
-import Item from './Item';
-import Section from './Section';
 
 type BaseGuidelinesType = typeof BaseGuidelines;
 
 interface GuidelinesType extends BaseGuidelinesType {
-  Section: typeof Section;
-  Item: typeof Item;
   Colorbox: typeof Colorbox;
 }
 
 const Guidelines = BaseGuidelines as GuidelinesType;
-Guidelines.Section = Section;
-Guidelines.Item = Item;
+
 Guidelines.Colorbox = Colorbox;
 
 export default Guidelines;
diff --git a/src/components/Navigation/TopBar/Resources/ResourceMenuItem.tsx b/src/components/Navigation/TopBar/Resources/ResourceMenuItem.tsx
@@ -23,7 +23,7 @@ const ContentInfo = styled.div`
 const Wrapper = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: ${spacings.medium_small};
+  padding: ${spacings.medium_small} ${spacings.medium};
   text-decoration: none;
   gap: ${spacings.medium};
   cursor: pointer;

diff --git a/src/components/Navigation/TopBar/Resources/Resources.tsx b/src/components/Navigation/TopBar/Resources/Resources.tsx
@@ -5,7 +5,6 @@ import {
   arrow_back,
   file_description,
   lightbulb,
-  placeholder_icon,
   report_bug,
   school,
   youtube_alt,
@@ -14,7 +13,10 @@ import {
 import { TopBarButton } from '../TopBar.styles';
 import Feedback from './Feedback/Feedback';
 import ReleaseNotes from './ReleaseNotesDialog/ReleaseNotes';
-import { amplify_resources } from 'src/components/Icons/AmplifyIcons';
+import {
+  amplify_resources,
+  amplify_small_portal,
+} from 'src/components/Icons/AmplifyIcons';
 import { FeedbackType } from 'src/components/Navigation/TopBar/Resources/Feedback/Feedback.types';
 import ResourceMenuItem from 'src/components/Navigation/TopBar/Resources/ResourceMenuItem';
 import TransferToAppDialog from 'src/components/Navigation/TopBar/Resources/TransferToAppDialog';
@@ -121,7 +123,7 @@ export const Resources: FC<ResourcesProps> = ({
           <>
             <ResourceMenuItem
               text="Open Application portal"
-              icon={placeholder_icon}
+              icon={amplify_small_portal}
               onClick={handleOnOpenPortal}
               isHref
             />

diff --git a/src/components/Navigation/TopBar/Settings.tsx b/src/components/Navigation/TopBar/Settings.tsx
@@ -1,6 +1,6 @@
 import { FC, ReactElement, useRef, useState } from 'react';
 
-import { Icon, Radio as EDSRadio, Typography } from '@equinor/eds-core-react';
+import { Icon, Radio, Typography } from '@equinor/eds-core-react';
 import { settings } from '@equinor/eds-icons';
 import { tokens } from '@equinor/eds-tokens';
 
@@ -17,7 +17,7 @@ const ContentWrapper = styled.div`
   flex-direction: row;
   align-items: center;
   gap: ${spacings.x_small};
-  padding: 0 ${spacings.large};
+  padding: 0 ${spacings.large} 0 ${spacings.small};
   justify-content: space-between;
   > span {
     padding: ${spacings.small} ${spacings.x_small};
@@ -45,15 +45,6 @@ const SettingsItems = styled.div`
   }
 `;
 
-const Radio = styled(EDSRadio)`
-  > span {
-    padding-left: 0 !important;
-    &:hover {
-      padding-left: 0 !important;
-    }
-  }
-`;
-
 export interface ISettingsSections {
   title: string;
   type: string;