@orchestrator-ui/orchestrator-ui-components 0.2.1 → 0.2.2

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "license": "MIT",
     "scripts": {
         "test": "jest",
         "build": "tsup src/index.ts --format esm --dts",
         "tsc": "tsc --noEmit",
         "lint": "eslint \"src/**/*.ts*\"",
-        "dev": "yarn build -- --watch"
+        "dev": "yarn build -- --watch",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@graphql-typed-document-node/core": "3.2.0",
@@ -26,8 +28,16 @@
         "react-query": "3.39.3"
     },
     "devDependencies": {
-        "tsup": "^7.1.0",
         "@orchestrator-ui/eslint-config-custom": "*",
+        "@orchestrator-ui/jest-config": "*",
+        "@storybook/addon-essentials": "^7.2.1",
+        "@storybook/addon-interactions": "^7.2.1",
+        "@storybook/addon-links": "^7.2.1",
+        "@storybook/addon-onboarding": "^1.0.8",
+        "@storybook/blocks": "^7.2.1",
+        "@storybook/nextjs": "^7.2.1",
+        "@storybook/react": "^7.2.1",
+        "@storybook/testing-library": "^0.2.0",
         "@testing-library/jest-dom": "^5.16.1",
         "@testing-library/react": "^14.0.0",
         "@testing-library/react-hooks": "^8.0.1",
@@ -37,9 +47,13 @@
         "esbuild-jest": "^0.5.0",
         "jest": "^27.4.7",
         "jest-watch-typeahead": "^1.0.0",
-        "@orchestrator-ui/jest-config": "*"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "storybook": "^7.2.1",
+        "tsup": "^7.1.0"
     },
     "type": "module",
     "main": "./dist/index.js",
+    "browser": "./dist/index.js",
     "types": "./dist/index.d.ts"
 }

package/src/components/{Badges/Badge/Badge.stories.tsx → WFOBadges/WFOBadge/WFOBadge.stories.tsx}

@@ -1,9 +1,9 @@
 import type { Meta } from '@storybook/react';
-import { Badge } from './Badge';
+import { WFOBadge } from './WFOBadge';
 
-const Story: Meta<typeof Badge> = {
-    component: Badge,
-    title: 'Badges/Badge',
+const Story: Meta<typeof WFOBadge> = {
+    component: WFOBadge,
+    title: 'Badges/WFOBadge',
 };
 export default Story;
 

package/src/components/{Badges/Badge/Badge.tsx → WFOBadges/WFOBadge/WFOBadge.tsx}

@@ -3,12 +3,12 @@ import { EuiBadge, EuiBadgeProps, EuiText } from '@elastic/eui';
 import { FC, ReactNode } from 'react';
 import { TextColor } from '@elastic/eui/src/components/text/text_color';
 
-export type BadgeProps = EuiBadgeProps & {
+export type WFOBadgeProps = EuiBadgeProps & {
     textColor: TextColor | string;
     children: ReactNode;
 };
 
-export const Badge: FC<BadgeProps> = ({
+export const WFOBadge: FC<WFOBadgeProps> = ({
     textColor,
     children,
     ...restProps

package/src/components/WFOBadges/WFOBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOBadge';

package/src/components/{Badges/EngineStatusBadge/EngineStatusBadge.stories.tsx → WFOBadges/WFOEngineStatusBadge/WFOEngineStatusBadge.stories.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
-import { EngineStatusBadge } from './EngineStatusBadge';
+import { WFOEngineStatusBadge } from './WFOEngineStatusBadge';
 
-const Story: Meta<typeof EngineStatusBadge> = {
+const Story: Meta<typeof WFOEngineStatusBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <EngineStatusBadge {...args} />
+            <WFOEngineStatusBadge {...args} />
         </div>
     ),
-    title: 'Badges/EngineStatusBadge',
+    title: 'Badges/WFOEngineStatusBadge',
     parameters: {
         mockData: [
             {

package/src/components/{Badges/EngineStatusBadge/EngineStatusBadge.tsx → WFOBadges/WFOEngineStatusBadge/WFOEngineStatusBadge.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { HeaderBadge } from '../HeaderBadge';
+import { WFOHeaderBadge } from '../WFOHeaderBadge';
 import { useEngineStatusQuery } from '../../../hooks/useEngineStatusQuery';
-import { StatusDotIcon } from '../../../icons/StatusDotIcon';
+import { WFOStatusDotIcon } from '../../../icons/WFOStatusDotIcon';
 
-export const EngineStatusBadge = () => {
+export const WFOEngineStatusBadge = () => {
     const { theme } = useOrchestratorTheme();
     const { data: engineStatus } = useEngineStatusQuery();
 
@@ -13,12 +13,12 @@ export const EngineStatusBadge = () => {
         : 'Engine status is unavailable';
 
     return (
-        <HeaderBadge
+        <WFOHeaderBadge
             color={theme.colors.emptyShade}
             textColor={theme.colors.shadow}
-            iconType={() => <StatusDotIcon color={theme.colors.success} />}
+            iconType={() => <WFOStatusDotIcon color={theme.colors.success} />}
         >
             {engineStatusText}
-        </HeaderBadge>
+        </WFOHeaderBadge>
     );
 };

package/src/components/WFOBadges/WFOEngineStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOEngineStatusBadge';

package/src/components/{Badges/EnvironmentBadge/EnvironmentBadge.stories.tsx → WFOBadges/WFOEnvironmentBadge/WFOEnvironmentBadge.stories.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
-import { EnvironmentBadge } from './EnvironmentBadge';
+import { WFOEnvironmentBadge } from './WFOEnvironmentBadge';
 
-const Story: Meta<typeof EnvironmentBadge> = {
+const Story: Meta<typeof WFOEnvironmentBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <EnvironmentBadge {...args} />
+            <WFOEnvironmentBadge {...args} />
         </div>
     ),
-    title: 'Badges/EnvironmentBadge',
+    title: 'Badges/WFOEnvironmentBadge',
 };
 export default Story;
 

package/src/components/{Badges/EnvironmentBadge/EnvironmentBadge.tsx → WFOBadges/WFOEnvironmentBadge/WFOEnvironmentBadge.tsx}

@@ -1,27 +1,27 @@
 import React, { useContext } from 'react';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { HeaderBadge } from '../HeaderBadge/HeaderBadge';
+import { WFOHeaderBadge } from '../WFOHeaderBadge/WFOHeaderBadge';
 import { OrchestratorConfigContext } from '../../../contexts/OrchestratorConfigContext';
 import { Environment } from '../../../hooks/useOrchestratorConfig';
 
-export const EnvironmentBadge = () => {
+export const WFOEnvironmentBadge = () => {
     const { environmentName } = useContext(OrchestratorConfigContext);
     const { theme, toSecondaryColor } = useOrchestratorTheme();
 
     if (environmentName !== Environment.PRODUCTION) {
         return (
-            <HeaderBadge color="warning" textColor={theme.colors.shadow}>
+            <WFOHeaderBadge color="warning" textColor={theme.colors.shadow}>
                 {environmentName}
-            </HeaderBadge>
+            </WFOHeaderBadge>
         );
     }
 
     return (
-        <HeaderBadge
+        <WFOHeaderBadge
             color={toSecondaryColor(theme.colors.primary)}
             textColor={theme.colors.primary}
         >
             {environmentName}
-        </HeaderBadge>
+        </WFOHeaderBadge>
     );
 };

package/src/components/WFOBadges/WFOEnvironmentBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOEnvironmentBadge';

package/src/components/WFOBadges/WFOFailedTasksBadge/WFOFailedTasksBadge.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import { WFOFailedTasksBadge } from './WFOFailedTasksBadge';
+
+const Story: Meta<typeof WFOFailedTasksBadge> = {
+    component: WFOFailedTasksBadge,
+    title: 'Badges/WFOFailedTasksBadge',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/components/{Badges/FailedTasksBadge/FailedTasksBadge.tsx → WFOBadges/WFOFailedTasksBadge/WFOFailedTasksBadge.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { HeaderBadge } from '../HeaderBadge';
-import { XCircleFill } from '../../../icons/XCircleFill';
+import { WFOHeaderBadge } from '../WFOHeaderBadge';
+import { WFOXCircleFill } from '../../../icons/WFOXCircleFill';
 import {
     ProcessStatusCounts,
     useProcessStatusCountsQuery,
@@ -31,7 +31,7 @@ const getTaskCountsSummary = (
     };
 };
 
-export const FailedTasksBadge = () => {
+export const WFOFailedTasksBadge = () => {
     const { theme } = useOrchestratorTheme();
     const { data: processStatusCounts } = useProcessStatusCountsQuery();
     const taskCountsSummary = getTaskCountsSummary(processStatusCounts);
@@ -51,13 +51,13 @@ export const FailedTasksBadge = () => {
                 </>
             }
         >
-            <HeaderBadge
+            <WFOHeaderBadge
                 color={theme.colors.emptyShade}
                 textColor={theme.colors.shadow}
-                iconType={() => <XCircleFill color={theme.colors.danger} />}
+                iconType={() => <WFOXCircleFill color={theme.colors.danger} />}
             >
                 {taskCountsSummary.total}
-            </HeaderBadge>
+            </WFOHeaderBadge>
         </EuiToolTip>
     );
 };

package/src/components/WFOBadges/WFOFailedTasksBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOFailedTasksBadge';

package/src/components/{Badges/HeaderBadge/HeaderBadge.stories.tsx → WFOBadges/WFOHeaderBadge/WFOHeaderBadge.stories.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
-import { HeaderBadge } from './HeaderBadge';
+import { WFOHeaderBadge } from './WFOHeaderBadge';
 
-const Story: Meta<typeof HeaderBadge> = {
+const Story: Meta<typeof WFOHeaderBadge> = {
     component: (args) => (
         <div style={{ display: 'flex' }}>
-            <HeaderBadge {...args} />
+            <WFOHeaderBadge {...args} />
         </div>
     ),
-    title: 'Badges/HeaderBadge',
+    title: 'Badges/WFOHeaderBadge',
 };
 export default Story;
 

package/src/components/{Badges/HeaderBadge/HeaderBadge.tsx → WFOBadges/WFOHeaderBadge/WFOHeaderBadge.tsx}

@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { EuiBadgeProps } from '@elastic/eui';
-import { Badge } from '../Badge/Badge';
+import { WFOBadge } from '../WFOBadge/WFOBadge';
 import { TextColor } from '@elastic/eui/src/components/text/text_color';
 
 export type HeaderBadgeProps = EuiBadgeProps & {
@@ -8,7 +8,7 @@ export type HeaderBadgeProps = EuiBadgeProps & {
     children: ReactNode;
 };
 
-export const HeaderBadge: FC<HeaderBadgeProps> = ({
+export const WFOHeaderBadge: FC<HeaderBadgeProps> = ({
     children,
     ...restProps
 }) => {
@@ -24,8 +24,8 @@ export const HeaderBadge: FC<HeaderBadgeProps> = ({
           };
 
     return (
-        <Badge {...restProps} css={css}>
+        <WFOBadge {...restProps} css={css}>
             {children}
-        </Badge>
+        </WFOBadge>
     );
 };

package/src/components/WFOBadges/WFOHeaderBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOHeaderBadge';

package/src/components/WFOBadges/WFOProcessStatusBadge/WFOProcessStatusBadge.tsx

@@ -0,0 +1,71 @@
+import React, { FC } from 'react';
+import { ProcessStatus, useOrchestratorTheme } from '../../../hooks';
+import { WFOBadge } from '../WFOBadge';
+
+export type WFOProcessStatusBadgeProps = {
+    processStatus: ProcessStatus;
+};
+
+export const WFOProcessStatusBadge: FC<WFOProcessStatusBadgeProps> = ({
+    processStatus,
+}) => {
+    const { theme, toSecondaryColor } = useOrchestratorTheme();
+
+    const getBadgeColorFromProcessStatus = (status: ProcessStatus) => {
+        const {
+            primary,
+            danger,
+            dangerText,
+            lightShade,
+            primaryText,
+            success,
+            successText,
+            text,
+            warning,
+            warningText,
+        } = theme.colors;
+
+        switch (status.toLowerCase()) {
+            case ProcessStatus.COMPLETED:
+                return {
+                    badgeColor: toSecondaryColor(success),
+                    textColor: successText,
+                };
+            case ProcessStatus.FAILED:
+            case ProcessStatus.ABORTED:
+                return {
+                    badgeColor: toSecondaryColor(danger),
+                    textColor: dangerText,
+                };
+            case ProcessStatus.SUSPENDED:
+                return {
+                    badgeColor: toSecondaryColor(warning),
+                    textColor: warningText,
+                };
+            case ProcessStatus.CREATED:
+                return {
+                    badgeColor: lightShade,
+                    textColor: text,
+                };
+            case ProcessStatus.WAITING:
+            case ProcessStatus.RESUMED:
+            case ProcessStatus.RUNNING:
+            case ProcessStatus.API_UNAVAILABLE:
+            case ProcessStatus.INCONSISTENT_DATA:
+            default:
+                return {
+                    badgeColor: toSecondaryColor(primary),
+                    textColor: primaryText,
+                };
+        }
+    };
+
+    const { badgeColor, textColor } =
+        getBadgeColorFromProcessStatus(processStatus);
+
+    return (
+        <WFOBadge textColor={textColor} color={badgeColor}>
+            {processStatus.toLowerCase()}
+        </WFOBadge>
+    );
+};

package/src/components/WFOBadges/WFOProcessStatusBadge/index.ts

@@ -0,0 +1 @@
+export * from './WFOProcessStatusBadge';

package/src/components/{Badges → WFOBadges}/WFOProductBlockBadge/WFOProductBlockBadge.stories.tsx

@@ -3,7 +3,7 @@ import { WFOProductBlockBadge } from './WFOProductBlockBadge';
 
 const Story: Meta<typeof WFOProductBlockBadge> = {
     component: WFOProductBlockBadge,
-    title: 'Badges/ProductBlockBadge',
+    title: 'Badges/WFOProductBlockBadge',
 };
 
 export default Story;

package/src/components/{Badges → WFOBadges}/WFOProductBlockBadge/WFOProductBlockBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '../Badge';
+import { WFOBadge } from '../WFOBadge';
 import React, { FC } from 'react';
 import { useOrchestratorTheme } from '../../../hooks';
 
@@ -12,11 +12,11 @@ export const WFOProductBlockBadge: FC<WFOProductBlockBadgeProps> = ({
     const { theme, toSecondaryColor } = useOrchestratorTheme();
 
     return (
-        <Badge
+        <WFOBadge
             textColor={theme.colors.link}
             color={toSecondaryColor(theme.colors.primary)}
         >
             {children}
-        </Badge>
+        </WFOBadge>
     );
 };

package/src/components/{Badges → WFOBadges}/WFOStatusBadge/WFOStatusBadge.stories.tsx

@@ -3,7 +3,7 @@ import { WFOStatusBadge } from './WFOStatusBadge';
 
 const Story: Meta<typeof WFOStatusBadge> = {
     component: WFOStatusBadge,
-    title: 'Badges/StatusBadge',
+    title: 'Badges/WFOStatusBadge',
 };
 export default Story;
 

package/src/components/{Badges → WFOBadges}/WFOStatusBadge/WFOStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '../Badge';
+import { WFOBadge } from '../WFOBadge';
 import React, { FC } from 'react';
 import { useOrchestratorTheme } from '../../../hooks';
 
@@ -42,8 +42,8 @@ export const WFOStatusBadge: FC<WFOStatusBadgeProps> = ({ status }) => {
     const { badgeColor, textColor } = getBadgeColorFromStatus(status);
 
     return (
-        <Badge textColor={textColor} color={badgeColor}>
+        <WFOBadge textColor={textColor} color={badgeColor}>
             {status}
-        </Badge>
+        </WFOBadge>
     );
 };

package/src/components/WFOBadges/index.ts

@@ -0,0 +1,8 @@
+export * from './WFOBadge';
+export * from './WFOStatusBadge';
+export * from './WFOProductBlockBadge';
+export * from './WFOProcessStatusBadge';
+export * from './WFOFailedTasksBadge';
+export * from './WFOEnvironmentBadge';
+export * from './WFOEngineStatusBadge';
+export * from './WFOHeaderBadge';

package/src/components/{Breadcrumbs/Breadcrumbs.tsx → WFOBreadcrumbs/WFOBreadcrumbs.tsx}

@@ -3,7 +3,7 @@ import { EuiBreadcrumb, EuiBreadcrumbs, EuiSpacer } from '@elastic/eui';
 import { useRouter } from 'next/router';
 import { isUuid4, removeSuffix, upperCaseFirstChar } from '../../utils';
 
-export const Breadcrumbs = () => {
+export const WFOBreadcrumbs = () => {
     const router = useRouter();
     // Setup initial breadcrumbs with navigation to home
     const breadcrumbs: EuiBreadcrumb[] = [

package/src/components/WFOBreadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './WFOBreadcrumbs';

package/src/components/WFOFilterTabs/WFOFilterTabs.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { EuiTab, EuiTabs } from '@elastic/eui';
+import { useTranslations } from 'next-intl';
+
+export type FilterQuery<DataType> = {
+    field: keyof DataType;
+    value: string;
+};
+
+export type WFOFilterTab<TabType, DataType> = {
+    id: TabType;
+    translationKey: string;
+    alwaysOnFilters?: FilterQuery<DataType>[];
+};
+
+export type WFOFilterTabsProps<TabType, DataType> = {
+    tabs: WFOFilterTab<TabType, DataType>[];
+    selectedTab: TabType;
+    translationNamespace: string;
+    onChangeTab: (updatedTab: TabType) => void;
+};
+
+export const WFOFilterTabs = <TabType extends string, DataType>({
+    tabs,
+    selectedTab,
+    translationNamespace,
+    onChangeTab,
+}: WFOFilterTabsProps<TabType, DataType>) => {
+    const t = useTranslations(translationNamespace);
+    return (
+        <EuiTabs>
+            {tabs.map(({ id, translationKey: name }) => (
+                <EuiTab
+                    key={id}
+                    isSelected={id === selectedTab}
+                    onClick={() => id !== selectedTab && onChangeTab(id)}
+                >
+                    {t(name)}
+                </EuiTab>
+            ))}
+        </EuiTabs>
+    );
+};

package/src/components/WFOFilterTabs/index.ts

@@ -0,0 +1 @@
+export * from './WFOFilterTabs';

package/src/components/WFOLoading/WFOLoading.tsx

@@ -0,0 +1,2 @@
+import React from 'react';
+export const WFOLoading = () => <h1>Loading...</h1>;

package/src/components/WFOLoading/index.ts

@@ -0,0 +1 @@
+export * from './WFOLoading';

package/src/components/{OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.stories.tsx → WFOPageTemplate/WFOPageHeader/WFOPageHeader.stories.tsx}

@@ -1,27 +1,18 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import type { Meta } from '@storybook/react';
 import React, { ReactElement } from 'react';
-import { OrchestratorPageHeader } from './OrchestratorPageHeader';
-import Logo from '../../../../../.storybook/mockdata/logo-orchestrator.svg';
-import Image from 'next/image';
+import { WFOPageHeader } from './WFOPageHeader';
 
-const Story: Meta<typeof OrchestratorPageHeader> = {
-    component: OrchestratorPageHeader,
-    title: 'PageTemplate/OrchestratorPageHeader',
+const Story: Meta<typeof WFOPageHeader> = {
+    component: WFOPageHeader,
+    title: 'PageTemplate/WFOPageHeader',
 };
 export default Story;
 
 function getAppLogo(navigationLogo: number): ReactElement {
     return (
         <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
-            <EuiFlexItem>
-                <Image
-                    src={Logo}
-                    alt="Orchestrator Logo"
-                    width={134}
-                    height={32}
-                />
-            </EuiFlexItem>
+            <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
         </EuiFlexGroup>
     );
 }

package/src/components/{OrchestratorPageTemplate/OrchestratorPageHeader/OrchestratorPageHeader.tsx → WFOPageTemplate/WFOPageHeader/WFOPageHeader.tsx}

@@ -8,19 +8,19 @@ import {
     EuiHeaderSectionItem,
 } from '@elastic/eui';
 import { useOrchestratorTheme } from '../../../hooks/useOrchestratorTheme';
-import { FailedTasksBadge } from '../../Badges/FailedTasksBadge';
-import { EngineStatusBadge } from '../../Badges/EngineStatusBadge';
-import { EnvironmentBadge } from '../../Badges/EnvironmentBadge';
-import { LogoutIcon } from '../../../icons/LogoutIcon';
+import { WFOFailedTasksBadge } from '../../WFOBadges/WFOFailedTasksBadge';
+import { WFOEngineStatusBadge } from '../../WFOBadges/WFOEngineStatusBadge';
+import { WFOEnvironmentBadge } from '../../WFOBadges/WFOEnvironmentBadge';
+import { WFOLogoutIcon } from '../../../icons/WFOLogoutIcon';
 
-export interface OrchestratorPageHeaderProps {
+export interface WFOPageHeaderProps {
     // todo: should be part of theme!
     navigationHeight: number;
     getAppLogo: (navigationHeight: number) => ReactElement;
     handleLogoutClick: () => void;
 }
 
-export const OrchestratorPageHeader: FC<OrchestratorPageHeaderProps> = ({
+export const WFOPageHeader: FC<WFOPageHeaderProps> = ({
     navigationHeight,
     getAppLogo,
     handleLogoutClick,
@@ -40,22 +40,22 @@ export const OrchestratorPageHeader: FC<OrchestratorPageHeaderProps> = ({
                     />
                 </EuiHeaderSectionItem>
                 <EuiHeaderSectionItem>
-                    <EnvironmentBadge />
+                    <WFOEnvironmentBadge />
                 </EuiHeaderSectionItem>
             </EuiHeaderSection>
 
             <EuiHeaderSection>
                 <EuiHeaderSectionItem>
                     <EuiBadgeGroup css={{ marginRight: multiplyByBaseUnit(2) }}>
-                        <EngineStatusBadge />
-                        <FailedTasksBadge />
+                        <WFOEngineStatusBadge />
+                        <WFOFailedTasksBadge />
                     </EuiBadgeGroup>
 
                     <EuiButtonIcon
                         aria-label="Logout"
                         display="empty"
                         iconType={() => (
-                            <LogoutIcon color={theme.colors.emptyShade} />
+                            <WFOLogoutIcon color={theme.colors.emptyShade} />
                         )}
                         css={{ width: 48, height: 48 }}
                         color="ghost"

package/src/components/WFOPageTemplate/WFOPageHeader/index.ts

@@ -0,0 +1 @@
+export * from './WFOPageHeader';

package/src/components/WFOPageTemplate/WFOPageTemplate/WFOPageTemplate.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react';
+import { WFOPageTemplate } from './WFOPageTemplate';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { ReactElement } from 'react';
+
+const Story: Meta<typeof WFOPageTemplate> = {
+    component: WFOPageTemplate,
+    title: 'PageTemplate/WFOPageTemplate',
+};
+export default Story;
+
+function getAppLogo(navigationLogo: number): ReactElement {
+    return (
+        <EuiFlexGroup alignItems="center" css={{ height: navigationLogo }}>
+            <EuiFlexItem>FLEX ITEM PLACEHOLDER</EuiFlexItem>
+        </EuiFlexGroup>
+    );
+}
+
+export const Default = {
+    args: {
+        getAppLogo,
+    },
+};