🎨 Implement new design for TopBar

.storybook/preview.js

@@ -0,0 +1,26 @@
+import { tokens } from '@equinor/eds-tokens';
+
+const { colors } = tokens;
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  backgrounds: {
+    default: 'white',
+    values: [
+      {
+        name: 'white',
+        value: '#ffffff',
+      },
+      {
+        name: 'Equinor off-white',
+        value: colors.ui.background__light.hex,
+      },
+    ],
+  },
+};

src/api/models/AccessRole.ts

@@ -0,0 +1,4 @@
+export type AccessRoles = {
+  role: string;
+  description: string;
+};

src/api/models/Applications.ts

@@ -0,0 +1,18 @@
+import { AccessRoles } from './AccessRole';
+
+export type AmplifyApplication = {
+  id: string;
+  name: string;
+  adGroups: Array<string>;
+  url: string;
+  accessRoles: Array<AccessRoles>;
+  description: string;
+  longDescription: string;
+  category: string;
+  version: string;
+  applicationInsightAPI: string;
+  apI_Id: string;
+  apiurl: string;
+  monitored: boolean;
+  productOwners: Array<string>;
+};

src/api/services/PortalService.ts

@@ -6,6 +6,7 @@ import { request as __request, FeatureToggleDto } from '../';
 
 import { OpenAPI_Portal, OpenAPI_Portal_Prod } from '../core/OpenAPI';
 import { ServiceNowIncidentResponse } from 'src/api/models/ServiceNowIncidentResponse';
+import { AmplifyApplication } from '../models/Applications';
 
 export class PortalService {
   // ConfigurationItem: string;
@@ -84,4 +85,16 @@ export class PortalService {
       },
     });
   }
+  public static userApplications(): CancelablePromise<
+    Array<AmplifyApplication>
+  > {
+    return __request(OpenAPI_Portal, {
+      method: 'GET',
+      url: '/api/v1/AmplifyApplication/userapplications',
+      errors: {
+        400: `Bad Request`,
+        500: `Server Error`,
+      },
+    });
+  }
 }

src/components/Feedback/AnimatedCheckmark.tsx

@@ -17,12 +17,19 @@ const animateCheckmark = keyframes`
   }
 `;
 
-const Container = styled.div`
+interface ContainerProps {
+  $isApplication?: boolean;
+}
+
+const Container = styled.div<ContainerProps>`
   height: fit-content;
   width: fit-content;
+
   svg {
-    width: calc(24px * 6);
-    height: calc(24px * 6);
+    width: ${({ $isApplication }) =>
+      $isApplication ? '84px' : 'calc(24px * 6)'};
+    height: ${({ $isApplication }) =>
+      $isApplication ? '84px' : 'calc(24px * 6)'};
   }
   path {
     fill: transparent;
@@ -31,9 +38,11 @@ const Container = styled.div`
     animation: ${animateCheckmark} 1.5s;
   }
 `;
-
-const AnimatedCheckmark: FC = () => (
-  <Container>
+interface AnimatedCheckmarkProps {
+  portal?: boolean;
+}
+const AnimatedCheckmark: FC<AnimatedCheckmarkProps> = ({ portal }) => (
+  <Container $isApplication={portal}>
     <svg
       width="43"
       height="43"

src/components/Icons/AmplifyIcons.stories.tsx

@@ -10,9 +10,11 @@ import {
   amplify_info_small,
   amplify_lwd,
   amplify_sharepoint,
+  amplify_small_portal,
   amplify_snail,
   amplify_sort_small,
   amplify_success,
+  amplify_tutorials,
   amplify_wellbore,
   amplify_wireline_cased_hole,
   amplify_wireline_open_hole,
@@ -28,6 +30,8 @@ const allIcons = {
   amplify_snail: amplify_snail,
   amplify_h1: amplify_h1,
   amplify_h2: amplify_h2,
+  amplify_tutorials: amplify_tutorials,
+  amplify_small_portal: amplify_small_portal,
   amplify_h3: amplify_h3,
   amplify_h4: amplify_h4,
   amplify_sharepoint: amplify_sharepoint,
@@ -66,6 +70,8 @@ export default {
         'amplify_h3',
         'amplify_h4',
         'amplify_sharepoint',
+        'amplify_tutorials',
+        'amplify_small_portal',
         'amplify_sort_small',
         'amplify_info_small',
       ],

src/components/Icons/AmplifyIcons.tsx

@@ -108,6 +108,26 @@ export const amplify_sharepoint: IconData = {
     'M8.84647 16H4.66655C4.29842 16 4 15.7016 4 15.3335V8.66653C4 8.2984 4.29842 7.99998 4.66655 7.99998H6.89935C7.18444 5.32976 9.44458 3.25 12.1905 3.25C14.9532 3.25 17.2243 5.35539 17.4866 8.04926C19.4888 8.68036 20.9405 10.551 20.9405 12.762C20.9405 15.2708 19.0705 17.3428 16.6483 17.6603C16.2407 19.4305 14.6556 20.75 12.7619 20.75C10.5593 20.75 8.7738 18.9645 8.7738 16.7619C8.7738 16.5013 8.79878 16.2466 8.84647 16ZM15.9384 7.82184C15.59 6.07024 14.0444 4.75 12.1905 4.75C10.2742 4.75 8.68729 6.16053 8.41147 7.99998H11.3335C11.7016 7.99998 12 8.2984 12 8.66653V9.86164C12.8867 8.64079 14.3188 7.84163 15.9384 7.82184ZM12 14.3924V15.3335C12 15.7016 11.7016 16 11.3335 16H10.3926C10.3155 16.2402 10.2738 16.4962 10.2738 16.7619C10.2738 18.136 11.3878 19.25 12.7619 19.25C14.0866 19.25 15.17 18.2143 15.2458 16.909C15.2486 16.8604 15.25 16.8114 15.25 16.7619C15.25 15.3878 14.136 14.2738 12.7619 14.2738C12.5318 14.2738 12.3101 14.3048 12.1003 14.3625C12.0666 14.3718 12.0331 14.3818 12 14.3924ZM16.7004 16.1311C16.398 14.2283 14.7498 12.7738 12.7619 12.7738C12.6941 12.7738 12.6266 12.7755 12.5596 12.7789L12.5595 12.762C12.5595 10.8618 14.0999 9.32147 16 9.32147C16.2144 9.32147 16.4236 9.34098 16.626 9.37814C18.2272 9.67206 19.4405 11.0761 19.4405 12.762C19.4405 14.4221 18.2647 15.8076 16.7004 16.1311ZM6.46824 11.4918C6.56753 11.6612 6.70423 11.8057 6.86787 11.9142C7.08025 12.0538 7.306 12.1718 7.54178 12.2666C7.83816 12.3913 8.06255 12.4918 8.21493 12.568C8.347 12.6303 8.46766 12.7144 8.57189 12.8167C8.65569 12.8999 8.70239 13.0133 8.70141 13.1314C8.70519 13.3011 8.6153 13.459 8.4675 13.5424C8.25651 13.6527 8.01935 13.703 7.78178 13.688C7.52508 13.684 7.2703 13.6432 7.0252 13.5668C6.77927 13.4984 6.5472 13.3876 6.33948 13.2392V14.163C6.55679 14.2573 6.78493 14.3244 7.01872 14.3626C7.2956 14.4095 7.576 14.4325 7.85682 14.4312C8.16981 14.436 8.48156 14.3907 8.78026 14.2971C9.03421 14.2185 9.25943 14.067 9.42789 13.8613C9.59689 13.6376 9.68258 13.362 9.67017 13.0819C9.67915 12.8562 9.62647 12.6323 9.51779 12.4342C9.41179 12.2596 9.26581 12.1125 9.09188 12.0053C8.86221 11.8665 8.62107 11.7476 8.37111 11.6499C8.34481 11.6369 8.31755 11.6259 8.28959 11.6171C8.03562 11.5122 7.84514 11.4281 7.71815 11.3649C7.60403 11.3116 7.50072 11.2377 7.41339 11.147C7.33945 11.07 7.29844 10.9673 7.2991 10.8605C7.29944 10.6846 7.4042 10.5256 7.56577 10.4559C7.77503 10.3539 8.00623 10.3049 8.23892 10.3135C8.45957 10.313 8.67947 10.3394 8.89378 10.3919C9.09129 10.4383 9.28027 10.5154 9.45378 10.6205V9.74433C9.05445 9.61434 8.63536 9.55566 8.21568 9.57099C7.89655 9.56756 7.57902 9.61673 7.27586 9.71651C7.00986 9.8005 6.77193 9.9557 6.58786 10.1653C6.41269 10.3746 6.32062 10.641 6.32919 10.9139C6.32409 11.1153 6.37204 11.3146 6.46824 11.4918Z',
 };
 
+
+export const amplify_tutorials: IconData = {
+    name: 'h2',
+    prefix: 'amplify',
+    height: '24',
+    width: '24',
+    svgPathData:
+        'M8 2H20C21.1 2 22 2.9 22 4V16C22 17.1 21.1 18 20 18H8C6.9 18 6 17.1 6 16V4C6 2.9 6.9 2 8 2ZM2 6H4V20H18V22H4C2.9 22 2 21.1 2 20V6ZM20 16H8V4H20V16ZM12 14.5V5.5L18 10L12 14.5Z',
+};
+
+export const amplify_small_portal: IconData = {
+    name: 'h2',
+    prefix: 'amplify',
+    height: '24',
+    width: '24',
+    svgPathData:
+        'M6.49858 7.71843L16.9216 1.7597C17.3639 1.50707 17.9162 1.82349 17.9167 2.33013L17.9164 14.2666C17.9169 14.6203 17.7383 14.947 17.4296 15.1237L7.00638 21.082C6.56424 21.3348 6.00046 21.0184 6 20.5118V8.57533C5.99954 8.22164 6.18985 7.89493 6.49858 7.71843Z',
+};
+
+
 export const amplify_sort_small: IconData = {
   name: 'sort_small',
   prefix: 'amplify',

src/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import ApplicationDrawer from './ApplicationDrawer';
+
+export default {
+  title: 'Navigation/TopBar/ApplicationDrawer',
+  component: ApplicationDrawer,
+} as Meta;
+
+export const Primary: StoryFn = () => {
+  const queryClient = new QueryClient();
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ApplicationDrawer />
+    </QueryClientProvider>
+  );
+};

src/components/Navigation/TopBar/ApplicationDrawer/ApplicationDrawer.styles.ts

@@ -0,0 +1,101 @@
+import { Button } from '@equinor/eds-core-react';
+import { tokens } from '@equinor/eds-tokens';
+
+import styled from 'styled-components';
+
+const { spacings, colors, shape } = tokens;
+
+export const MenuSection = styled.div`
+  border-bottom: 1px solid ${colors.ui.background__light.hex};
+  display: flex;
+  flex-direction: column;
+
+  padding: ${spacings.comfortable.medium} ${spacings.comfortable.large} 0
+    ${spacings.comfortable.large};
+  > p {
+    margin-left: ${spacings.comfortable.small};
+  }
+`;
+
+export const ApplicationName = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+export const ApplicationContent = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding-top: ${spacings.comfortable.small};
+  justify-items: center;
+`;
+
+export const MenuFixedItem = styled.div`
+  > div {
+    display: grid;
+    grid-template-columns: 1fr 24px;
+    justify-content: space-between;
+    width: 100%;
+  }
+  &:hover {
+    background: ${colors.interactive.primary__selected_hover.hex};
+    cursor: pointer;
+  }
+  border-top: 1px solid ${colors.ui.background__light.hex};
+  outline: none !important;
+  padding: ${spacings.comfortable.medium} ${spacings.comfortable.large}
+    ${spacings.comfortable.medium} ${spacings.comfortable.large};
+  svg {
+    align-self: center;
+  }
+`;
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  > h6 {
+    text-transform: capitalize;
+  }
+`;
+
+export const NoApplications = styled.div`
+  display: flex;
+  padding: ${spacings.comfortable.medium};
+`;
+
+export const LoadingApplications = styled.div`
+  display: flex;
+  padding: ${spacings.comfortable.large};
+  align-items: center;
+  grid-column: span 3;
+`;
+
+interface ApplicationBoxProps {
+  $isSelected?: boolean;
+}
+
+export const ApplicationBox = styled.div<ApplicationBoxProps>`
+  display: flex;
+  height: 96px;
+  width: 64px;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 ${spacings.comfortable.medium};
+  gap: ${spacings.comfortable.medium};
+  align-items: center;
+  background: ${({ $isSelected }) =>
+    $isSelected ? colors.interactive.primary__selected_highlight.hex : 'none'};
+  border-radius: ${shape.corners.borderRadius};
+  &:hover {
+    background: ${colors.interactive.primary__hover_alt.hex};
+    border-radius: ${shape.corners.borderRadius};
+  }
+`;
+
+export const ApplicationButton = styled(Button)`
+  height: 96px;
+  width: 64px;
+  > span {
+    display: flex;
+    flex-direction: column;
+  }
+`;