feat(SideNavigation): Initial Component Implementation (#132)

SAP · Sep 20, 2019 · da53e3e · da53e3e
1 parent 7b57087
commit da53e3e
Show file tree

Hide file tree

Showing 15 changed files with 1,336 additions and 0 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,19 @@
+# Settings in the [build] context are global and are applied to all contexts
+# unless otherwise overridden by more specific contexts.
+[build]
+  # Directory to change to before starting a build.
+  # This is where we will look for package.json/.nvmrc/etc.
+  base = "./"
+
+  # Directory (relative to root of your repo) that contains the deploy-ready
+  # HTML files and assets generated by the build. If a base directory has
+  # been specified, include it in the publish directory path.
+  publish = ".out/"
+
+  # Default build command.
+  command = "npm run build:storybook"
+
+# Deploy Preview context: all deploys generated from a pull/merge request will
+# inherit these settings.
+[context.deploy-preview]
+  SKIP_DOC_GENERATION=true
diff --git a/packages/main/src/components/SideNavigation/SideNavigation.jss.ts b/packages/main/src/components/SideNavigation/SideNavigation.jss.ts
@@ -0,0 +1,35 @@
+import { JSSTheme } from '../../interfaces/JSSTheme';
+
+export const sideNavigationStyles = ({ parameters }: JSSTheme) => ({
+  sideNavigation: {
+    height: '100%',
+    borderRight: `0.0625rem solid ${parameters.sapUiGroupContentBorderColor}`,
+    backgroundColor: parameters.sapUiListBackground,
+    display: 'flex',
+    flexDirection: 'column',
+    transition: 'width 500ms'
+  },
+
+  expanded: {
+    width: '15rem'
+  },
+
+  condensed: {
+    width: '2.75rem',
+    '& $footerItemsSeparator': {
+      marginLeft: '0.5rem',
+      marginRight: '0.5rem'
+    }
+  },
+
+  collapsed: {
+    width: '15rem',
+    marginLeft: '-15.0625rem'
+  },
+
+  footerItemsSeparator: {
+    margin: '0.25rem 0.875rem',
+    height: '0.125rem',
+    backgroundColor: parameters.sapUiListBorderColor
+  }
+});
diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx
@@ -0,0 +1,103 @@
+import { mountThemedComponent } from '@shared/tests/utils';
+import { SideNavigation } from '@ui5/webcomponents-react/lib/SideNavigation';
+import { SideNavigationListItem } from '@ui5/webcomponents-react/lib/SideNavigationListItem';
+import { SideNavigationOpenState } from '@ui5/webcomponents-react/lib/SideNavigationOpenState';
+import React from 'react';
+
+describe('SideNavigation', () => {
+  test('Expanded', () => {
+    const wrapper = mountThemedComponent(
+      <SideNavigation
+        openState={SideNavigationOpenState.Expandend}
+        selectedId={'sales-leads'}
+        footerItems={[
+          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+        ]}
+      >
+        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+        <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
+        <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
+        <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
+          <SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
+          <SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
+          <SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
+        </SideNavigationListItem>
+        <SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
+      </SideNavigation>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('Expanded without Icons', () => {
+    const wrapper = mountThemedComponent(
+      <SideNavigation
+        openState={SideNavigationOpenState.Expandend}
+        selectedId={'sales-leads'}
+        noIcons
+        footerItems={[
+          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+        ]}
+      >
+        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+        <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
+        <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
+        <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
+          <SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
+          <SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
+          <SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
+        </SideNavigationListItem>
+        <SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
+      </SideNavigation>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
+  test('Condensed', () => {
+    const wrapper = mountThemedComponent(
+      <SideNavigation
+        openState={SideNavigationOpenState.Condensed}
+        selectedId={'sales-leads'}
+        footerItems={[
+          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+        ]}
+      >
+        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+        <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
+        <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
+        <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
+          <SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
+          <SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
+          <SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
+        </SideNavigationListItem>
+        <SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
+      </SideNavigation>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+  test('Collapsed', () => {
+    const wrapper = mountThemedComponent(
+      <SideNavigation
+        openState={SideNavigationOpenState.Collapsed}
+        selectedId={'sales-leads'}
+        footerItems={[
+          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+        ]}
+      >
+        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+        <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
+        <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
+        <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
+          <SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
+          <SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
+          <SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
+        </SideNavigationListItem>
+        <SideNavigationListItem text="Deliveries" icon="sap-icon://add-product" id="delivieries" />
+      </SideNavigation>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});