docs: add footer with legal information (#2276)

Co-authored-by: Harbarth, Lukas <lukas.harbarth@sap.com>

Author: MarcusNotheis

.storybook/components/DocsHeader.tsx

@@ -0,0 +1,53 @@
+import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
+import React, { useContext } from 'react';
+import { version as chartsVersion } from '../../packages/charts/package.json';
+import { version } from '../../packages/main/package.json';
+import { Import } from '../../.storybook/components/Import';
+import { TableOfContent } from '../../.storybook/components/TableOfContent';
+import { GitHubLogo } from '../../.storybook/components/GitHub-Mark';
+import { FlexBox, FlexBoxAlignItems } from '@ui5/webcomponents-react';
+import { Footer } from '../../.storybook/components/Footer';
+
+const Links = () => {
+  const docsContext = useContext(DocsContext);
+  const isChart = docsContext.id.startsWith('charts-');
+
+  const filePath = docsContext.parameters.fileName.replace(/^\.\//, '');
+  const folderPath = filePath.substr(0, filePath.lastIndexOf('/'));
+
+  const githubUrl = `https://github.com/SAP/ui5-webcomponents-react/tree/main/${folderPath}`;
+
+  return (
+    <>
+      <br />
+      <FlexBox alignItems={FlexBoxAlignItems.Center}>
+        <a title={'View On GitHub'} href={githubUrl}>
+          <GitHubLogo />
+        </a>
+        &nbsp; &nbsp;
+        <a href={`https://www.npmjs.com/package/@ui5/webcomponents-react${isChart ? '-charts' : ''}`}>
+          <img
+            alt="npm badge"
+            src={`https://badgen.net/badge/@ui5%2Fwebcomponents-react${isChart ? '-charts' : ''}/v${
+              isChart ? chartsVersion : version
+            }/blue?icon=npm`}
+          />
+        </a>
+      </FlexBox>
+      <br />
+    </>
+  );
+};
+
+export const DocsHeader = () => {
+  return (
+    <>
+      <Title />
+      <Subtitle />
+      <Import />
+      <Description />
+      <Links />
+      <TableOfContent />
+    </>
+  );
+};

shared/stories/DocsPage.tsx renamed to .storybook/components/DocsPage.tsx

@@ -1,4 +1,5 @@
-import { DocsHeader } from '@shared/stories/DocsHeader';
+import { DocsHeader } from '@docs/DocsHeader';
+import { Footer } from '@docs/Footer';
 import { ArgsTable, Primary, Stories } from '@storybook/addon-docs';
 import React from 'react';
 

.storybook/components/Footer.tsx

@@ -0,0 +1,87 @@
+import {
+  FlexBox,
+  FlexBoxAlignItems,
+  FlexBoxJustifyContent,
+  FlexBoxWrap,
+  Label,
+  Link,
+  Popover,
+  PopoverPlacementType,
+  WrappingType
+} from '@ui5/webcomponents-react';
+import { useResponsiveContentPadding } from '@ui5/webcomponents-react-base/dist/hooks';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/dist/ThemingParameters';
+import React, { useRef } from 'react';
+import BestRunLogo from '../../assets/SAP_Best_R_grad_blk_scrn.png';
+
+export const Footer = () => {
+  const popoverRef = useRef(null);
+  const footerRef = useRef(null);
+  const responsivePaddingClass = useResponsiveContentPadding(footerRef.current);
+
+  const showPrivacyPopover = (e) => {
+    popoverRef.current.showAt(e.target);
+  };
+
+  return (
+    <footer>
+      <div
+        ref={footerRef}
+        className={responsivePaddingClass}
+        style={{
+          minHeight: 'var(--_ui5_bar_base_height)',
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: ThemingParameters.sapPageFooter_Background,
+          borderTop: `0.0625rem solid ${ThemingParameters.sapPageFooter_BorderColor}`,
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          height: 'auto',
+          overflow: 'hidden'
+        }}
+      >
+        <FlexBox
+          justifyContent={FlexBoxJustifyContent.SpaceBetween}
+          alignItems={FlexBoxAlignItems.Center}
+          wrap={FlexBoxWrap.Wrap}
+          style={{ width: '100%' }}
+        >
+          <FlexBox alignItems={FlexBoxAlignItems.Center} wrap={FlexBoxWrap.Wrap}>
+            <img src={BestRunLogo} alt="SAP Logo with Text 'The Best Run'" style={{ height: '1.5rem' }} />
+            <Label wrappingType={WrappingType.Normal}>
+              © Copyright {new Date().getFullYear()}, SAP SE and UI5 Web Components for React Contributors
+            </Label>
+          </FlexBox>
+          <FlexBox alignItems={FlexBoxAlignItems.Center} wrap={FlexBoxWrap.Wrap}>
+            <Link onClick={showPrivacyPopover}>Privacy</Link>
+            &nbsp;
+            <Label>|</Label>
+            &nbsp;
+            <Link href="https://www.sap.com/corporate/en/legal/terms-of-use.html">Terms of Use</Link>
+            &nbsp;
+            <Label>|</Label>
+            &nbsp;
+            <Link href="https://www.sap.com/corporate/en/legal/impressum.html">Legal Disclosure</Link>
+            &nbsp;
+            <Label>|</Label>
+            &nbsp;
+            <Link href="https://www.sap.com/corporate/en/legal/trademark.html">Trademarks</Link>
+          </FlexBox>
+        </FlexBox>
+      </div>
+      <Popover
+        headerText={'Privacy Statement'}
+        ref={popoverRef}
+        placementType={PopoverPlacementType.Top}
+        data-ui5-compact-size
+        style={{ width: '360px', maxWidth: '100%' }}
+      >
+        <Label wrappingType={WrappingType.Normal}>
+          This site is hosted by <Link>GitHub Pages</Link>. Please see the <Link>GitHub Privacy Statement</Link> for any
+          information how GitHub processes your personal data.
+        </Label>
+      </Popover>
+    </footer>
+  );
+};

shared/stories/GitHub-Mark.tsx renamed to .storybook/components/GitHub-Mark.tsx

@@ -13,7 +13,7 @@ module.exports = {
   webpack: async (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      '@shared': path.join(root, 'shared'),
+      '@docs': path.join(root, '.storybook', 'components'),
       '@ui5/webcomponents-react/dist/assets/i18n': path.join(root, 'packages', 'main', 'dist', 'assets', 'i18n'),
       '@ui5/webcomponents-react/dist/Assets': path.join(root, 'packages', 'main', 'dist', 'Assets'),
       '@ui5/webcomponents-react': path.join(root, 'packages', 'main', 'src'),

shared/stories/Import.tsx renamed to .storybook/components/Import.tsx

@@ -14,6 +14,10 @@
     }
   }
 
+  .sbdocs-wrapper {
+      padding-top: 2rem !important;
+  }
+
   .sbdocs-title {
     font-family: var(--sapFontFamily) !important;
   }