Merge pull request #64 from LuisValgoi/issue-57

[ISSUE-57] Base Version of Shell Buttons

Author: lpohren

packages/ui5-webcomponents-react-seed/src/App.js

@@ -11,12 +11,6 @@ import Routes from './routes/Routes';
 import './App.css';
 import CenteredContent from './components/Layout/CenteredContent';
 
-const style = {
-  emptySpace: {
-    paddingTop: '44px',
-  },
-};
-
 function App() {
   const { t } = useTranslation();
 
@@ -25,7 +19,6 @@ function App() {
       <ReactQueryDevtools initialIsOpen={false} />
       <Helmet title={t('helmet.title.app')} />
       <Shell title={t('shell.title')} />
-      <div style={style.emptySpace} />
       <ErrorBoundary>
         <CenteredContent>
           <Routes />

packages/ui5-webcomponents-react-seed/src/components/Popover/Info/PopoverInfo.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Popover } from '@ui5/webcomponents-react/lib/Popover';
+import { PlacementType } from '@ui5/webcomponents-react/lib/PlacementType';
+import { FlexBoxDirection, Title } from '@ui5/webcomponents-react';
+import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
+import { spacing } from '@ui5/webcomponents-react-base';
+
+export default function PopoverInfo({ popoverRef, placementType, title, children }) {
+  return (
+    <Popover ref={popoverRef} placementType={placementType && PlacementType.Bottom}>
+      <FlexBox direction={FlexBoxDirection.Column}>
+        <div className="popover-header">
+          <Title style={spacing.sapUiContentPadding}>{title}</Title>
+        </div>
+        <div className="popover-content">{children}</div>
+      </FlexBox>
+    </Popover>
+  );
+}

packages/ui5-webcomponents-react-seed/src/components/Popover/List/PopoverListItems.js

@@ -0,0 +1,19 @@
+import { List, StandardListItem } from '@ui5/webcomponents-react';
+import React from 'react';
+import PopoverInfo from '../Info/PopoverInfo';
+
+export default function PopoverListItems({ popoverRef, title, items }) {
+  return (
+    <PopoverInfo popoverRef={popoverRef} title={title}>
+      <List>
+        {items.map((item, index) => {
+          return (
+            <StandardListItem key={index} selected={item.selected} info={item.info} icon={item.icon} description={item.description} onClick={item.onClick}>
+              {item.children}
+            </StandardListItem>
+          );
+        })}
+      </List>
+    </PopoverInfo>
+  );
+}

packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js

@@ -1,31 +1,57 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router-dom';
 
 import { ShellBar } from '@ui5/webcomponents-react/lib/ShellBar';
+import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
+import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
+import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import BrowserProvider from '../../util/URL/BrowserProvider';
+import PopoverListItems from '../Popover/List/PopoverListItems';
 
 const style = {
   shell: {
     position: 'fixed',
     width: '100%',
     zIndex: 100,
   },
+  emptySpace: {
+    paddingTop: '44px',
+  },
 };
 
 const Shell = ({ title, ...props }) => {
   const { t } = useTranslation();
   const history = useHistory();
+  const popoverConfigItemsRef = useRef(null);
+  const popoverItemsInterface = [
+    {
+      children: t('shell.button.user.settings.item.languageSwitch'),
+      icon: 'user-settings',
+      onClick: () => alert('activate language switch dialog'),
+    },
+    {
+      children: t('shell.button.user.settings.item.themeSwitch'),
+      icon: 'customize',
+      onClick: () => alert('activate theme switch dialog'),
+    },
+  ];
 
   return (
-    <ShellBar
-      data-testid="shell-wrapper"
-      style={style.shell}
-      onLogoClick={() => history.push(BrowserProvider.HOME)}
-      primaryTitle={title}
-      logo={<img alt={t('shell.logo.alt')} src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg" />}
-      {...props}
-    />
+    <>
+      <ShellBar
+        data-testid="shell-wrapper"
+        primaryTitle={title}
+        style={style.shell}
+        logo={<img alt={t('shell.logo.alt')} src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg" />}
+        onLogoClick={() => history.push(BrowserProvider.HOME)}
+        profile={<Avatar icon="customer" shape={AvatarShape.Circle} size={AvatarSize.S} />}
+        onProfileClick={(e) => popoverConfigItemsRef.current.openBy(e.detail.targetRef)}
+        {...props}
+      />
+      <div style={style.emptySpace} />
+      <PopoverListItems popoverRef={popoverConfigItemsRef} title={t('shell.button.user.settings')} items={popoverItemsInterface} />
+    </>
   );
 };
 

packages/ui5-webcomponents-react-seed/src/components/Shell/__snapshots__/Shell.test.js.snap

@@ -10,5 +10,13 @@ exports[`Shell.js Test Suite should match snapshot 1`] = `
     slot="logo"
     src="https://sap.github.io/ui5-webcomponents/assets/images/sap-logo-svg.svg"
   />
+  <ui5-avatar
+    background-color="Accent6"
+    icon="customer"
+    image-fit-type="Cover"
+    shape="Circle"
+    size="S"
+    slot="profile"
+  />
 </ui5-shellbar>
 `;

packages/ui5-webcomponents-react-seed/src/locales/en/translation.json

@@ -4,6 +4,9 @@
   "helmet.title.notfound": "NotFound - TodoList App",
   "shell.title": "TodoList Application",
   "shell.logo.alt": "SAP Logo",
+  "shell.button.user.settings": "User Settings",
+  "shell.button.user.settings.item.languageSwitch": "Language Switch",
+  "shell.button.user.settings.item.themeSwitch": "Theme Switch",
   "page.error.text": "Ops! There was an error in loading this page",
   "page.error.alt": "Error",
   "page.notfound.text": "Hmmm, we could find this URL",