Docs(web-react): Add Header demo #DS-898

Header demo in web-react is now same as demo in web and web-twig
lmc-eu · Sep 8, 2023 · 7e99b36 · 7e99b36
1 parent 53fc021
commit 7e99b36
Show file tree

Hide file tree

Showing 7 changed files with 152 additions and 47 deletions.
diff --git a/packages/web-react/src/components/Header/demo/HeaderExperimentalRTL.tsx b/packages/web-react/src/components/Header/demo/HeaderExperimentalRTL.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Checkbox } from '../../Checkbox';
+
+const HeaderExperimentalRTL = () => {
+  const toggleRtl = () => {
+    const htmlElement = document.querySelector('html');
+
+    if (htmlElement?.hasAttribute('dir')) {
+      htmlElement?.removeAttribute('dir');
+    } else {
+      htmlElement?.setAttribute('dir', 'rtl');
+    }
+  };
+
+  return <Checkbox id="rtl" label="Switch writing mode to RTL" onChange={toggleRtl} />;
+};
+
+export default HeaderExperimentalRTL;
diff --git a/.../components/Header/demo/HeaderActions.tsx → ...Header/demo/HeaderInvertedWithActions.tsx b/.../components/Header/demo/HeaderActions.tsx → ...Header/demo/HeaderInvertedWithActions.tsx
@@ -1,22 +1,23 @@
 import React, { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
-import { Link } from '../../Link';
 import { Button } from '../../Button';
+import { Link } from '../../Link';
+import {
+  Header,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '..';
 import SpiritLogo from './SpiritLogo';
-import Header from '../Header';
-import HeaderMobileActions from '../HeaderMobileActions';
-import HeaderDesktopActions from '../HeaderDesktopActions';
-import HeaderNav from '../HeaderNav';
-import HeaderNavItem from '../HeaderNavItem';
-import HeaderLink from '../HeaderLink';
-import HeaderDialog from '../HeaderDialog';
-import HeaderDialogCloseButton from '../HeaderDialogCloseButton';
-import HeaderDialogActions from '../HeaderDialogActions';
-import HeaderDialogNav from '../HeaderDialogNav';
-import HeaderDialogNavItem from '../HeaderDialogNavItem';
-import HeaderDialogLink from '../HeaderDialogLink';
 
-const Story: ComponentStory<typeof Header> = () => {
+const HeaderInvertedWithActions = () => {
   const [isOpen, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -83,4 +84,4 @@ const Story: ComponentStory<typeof Header> = () => {
   );
 };
 
-export default Story;
+export default HeaderInvertedWithActions;
diff --git a/...der/demo/HeaderActionsAndHeaderDialog.tsx → ...mo/HeaderInvertedWithActionsAndDialog.tsx b/...der/demo/HeaderActionsAndHeaderDialog.tsx → ...mo/HeaderInvertedWithActionsAndDialog.tsx
@@ -1,23 +1,25 @@
 import React, { useState } from 'react';
-import { ComponentStory } from '@storybook/react';
 import { Link } from '../../Link';
+import {
+  Header,
+  HeaderButton,
+  HeaderDesktopActions,
+  HeaderDialog,
+  HeaderDialogActions,
+  HeaderDialogButton,
+  HeaderDialogCloseButton,
+  HeaderDialogLink,
+  HeaderDialogNav,
+  HeaderDialogNavItem,
+  HeaderDialogText,
+  HeaderLink,
+  HeaderMobileActions,
+  HeaderNav,
+  HeaderNavItem,
+} from '..';
 import SpiritLogo from './SpiritLogo';
-import Header from '../Header';
-import HeaderMobileActions from '../HeaderMobileActions';
-import HeaderDesktopActions from '../HeaderDesktopActions';
-import HeaderNav from '../HeaderNav';
-import HeaderNavItem from '../HeaderNavItem';
-import HeaderLink from '../HeaderLink';
-import HeaderDialog from '../HeaderDialog';
-import HeaderDialogCloseButton from '../HeaderDialogCloseButton';
-import HeaderDialogActions from '../HeaderDialogActions';
-import HeaderDialogNav from '../HeaderDialogNav';
-import HeaderDialogNavItem from '../HeaderDialogNavItem';
-import HeaderDialogLink from '../HeaderDialogLink';
-import HeaderDialogText from '../HeaderDialogText';
-import HeaderDialogButton from '../HeaderDialogButton';
 
-const Story: ComponentStory<typeof Header> = () => {
+const HeaderInvertedWithActionsAndDialog = () => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [isUserMenuOpen, setUserMenuOpen] = useState(false);
 
@@ -57,13 +59,13 @@ const Story: ComponentStory<typeof Header> = () => {
         <HeaderDesktopActions color="secondary" aria-label="User area">
           <HeaderNav>
             <HeaderNavItem>
-              <HeaderDialogButton
+              <HeaderButton
                 onClick={handleUserMenuOpen}
                 aria-controls="header_dialog_example_2"
                 aria-expanded={isUserMenuOpen}
               >
                 Marian
-              </HeaderDialogButton>
+              </HeaderButton>
             </HeaderNavItem>
           </HeaderNav>
         </HeaderDesktopActions>
@@ -143,4 +145,4 @@ const Story: ComponentStory<typeof Header> = () => {
   );
 };
 
-export default Story;
+export default HeaderInvertedWithActionsAndDialog;
diff --git a/packages/web-react/src/components/Header/demo/HeaderMinimalInverted.tsx b/packages/web-react/src/components/Header/demo/HeaderMinimalInverted.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from '../../Link';
+import { Header } from '..';
+import SpiritLogo from './SpiritLogo';
+
+const HeaderMinimalInverted = () => {
+  return (
+    <Header color="inverted">
+      <Link href="/">
+        <SpiritLogo />
+      </Link>
+    </Header>
+  );
+};
+
+export default HeaderMinimalInverted;
diff --git a/packages/web-react/src/components/Header/demo/HeaderSimpleInverted.tsx b/packages/web-react/src/components/Header/demo/HeaderSimpleInverted.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from '../../Link';
+import { Header } from '..';
+import SpiritLogo from './SpiritLogo';
+
+const HeaderSimpleInverted = () => {
+  return (
+    <Header color="inverted" isSimple>
+      <Link href="/">
+        <SpiritLogo />
+      </Link>
+    </Header>
+  );
+};
+
+export default HeaderSimpleInverted;
diff --git a/packages/web-react/src/components/Header/demo/HeaderSimpleTransparent.tsx b/packages/web-react/src/components/Header/demo/HeaderSimpleTransparent.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Heading } from '../../Heading';
+import { Link } from '../../Link';
+import { Header } from '..';
+import SpiritLogo from './SpiritLogo';
+
+const HeaderSimpleTransparent = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        height: '300px',
+        color: 'white',
+        background: 'linear-gradient(121.59deg, #073256 0%, #185C95 100%)',
+      }}
+    >
+      <Header isSimple>
+        <Link href="/">
+          <SpiritLogo />
+        </Link>
+      </Header>
+
+      <Heading elementType="div" size="large" UNSAFE_className="text-center mb-1200">
+        Example Cover
+      </Heading>
+    </div>
+  );
+};
+
+export default HeaderSimpleTransparent;
diff --git a/packages/web-react/src/components/Header/demo/index.tsx b/packages/web-react/src/components/Header/demo/index.tsx
@@ -1,20 +1,40 @@
+// Because there is no `dist` directory during the CI run
+/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
+// @ts-ignore: No declaration file
+import icons from '@lmc-eu/spirit-icons/dist/icons';
 import DocsSection from '../../../../docs/DocsSections';
-import Header from './Header';
-import HeaderActions from './HeaderActions';
-import HeaderActionsAndHeaderDialog from './HeaderActionsAndHeaderDialog';
+import { IconsProvider } from '../../../context';
+import HeaderMinimalInverted from './HeaderMinimalInverted';
+import HeaderInvertedWithActions from './HeaderInvertedWithActions';
+import HeaderInvertedWithActionsAndDialog from './HeaderInvertedWithActionsAndDialog';
+import HeaderSimpleInverted from './HeaderSimpleInverted';
+import HeaderSimpleTransparent from './HeaderSimpleTransparent';
+import HeaderExperimentalRTL from './HeaderExperimentalRTL';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <DocsSection title="Default">
-      <Header {...Header.args} color="inverted" />
-    </DocsSection>
-    <DocsSection title="Actions">
-      <HeaderActions />
-    </DocsSection>
-    <DocsSection title="Actions And Header Dialog">
-      <HeaderActionsAndHeaderDialog />
-    </DocsSection>
+    <IconsProvider value={icons}>
+      <DocsSection title="Minimal Inverted Header">
+        <HeaderMinimalInverted />
+      </DocsSection>
+      <DocsSection title="Inverted Header with Actions">
+        <HeaderInvertedWithActions />
+      </DocsSection>
+      <DocsSection title="Inverted Header with Actions and Header Dialog">
+        <HeaderInvertedWithActionsAndDialog />
+      </DocsSection>
+      <DocsSection title="Simple Inverted Header">
+        <HeaderSimpleInverted />
+      </DocsSection>
+      <DocsSection title="Simple Transparent Header">
+        <HeaderSimpleTransparent />
+      </DocsSection>
+      <DocsSection title="Experimental RTL Support">
+        <HeaderExperimentalRTL />
+      </DocsSection>
+    </IconsProvider>
   </React.StrictMode>,
 );