@fortanix/baklava 1.0.0-beta-20241114

package/src/layouts/AppLayout/AppLayout.module.scss

@@ -0,0 +1,110 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* stylelint-disable no-duplicate-selectors */
+
+@use '../../styling/defs.scss' as bk;
+
+@layer baklava.base {
+  :root {
+    /* Height of the header needs to be known at root level so we can use it for things like `scroll-padding-top` */
+    --bk-app-layout-header-height: var(--bk-sizing-5);
+  }
+}
+
+@layer baklava.components {
+  .bk-app-layout {
+    @include bk.component-base(bk-app-layout);
+    container-type: inline-size;
+    
+    --bk-app-layout-sidebar-width-open: 220px;
+    --bk-app-layout-sidebar-width: var(--bk-app-layout-sidebar-width-open);
+
+    /* Note: do not use vw/vh, because we may want to show the layout in a container (e.g. story) */
+    min-width: 100cqw;
+    min-height: 100cqh;
+    
+    display: grid;
+    // Note: use `minmax(0, 1fr)` to prevent blowout: https://css-tricks.com/preventing-a-grid-blowout
+    grid:
+      'header  header' var(--bk-app-layout-header-height)
+      'sidebar content' 1fr
+      'sidebar footer' max-content
+      / var(--bk-app-layout-sidebar-width) minmax(0, 1fr);
+    
+    > [slot='header'] { grid-area: header; }
+    > [slot='sidebar'] { grid-area: sidebar; }
+    > [slot='content'] { grid-area: content; }
+    > [slot='footer'] { grid-area: footer; }
+    
+    > [slot='header'] {
+      container: bk-app-layout__header / inline-size;
+      overflow: hidden;
+      
+      background: bk.$theme-header-background-default;
+      
+      position: sticky;
+      top: 0;
+      z-index: 1; /* Higher than content */
+      
+      display: grid;
+      grid:
+        'logo account-actions user-actions' 1fr
+        / var(--bk-app-layout-sidebar-width-open) max-content 1fr;
+      
+      > [slot='logo'] { grid-area: logo; }
+      > [slot='actions'] { grid-column: account-actions-start / user-actions-end; }
+      
+      > [slot='logo'] {
+        &:focus-visible {
+          @include bk.focus-inset;
+        }
+      }
+    }
+    
+    > [slot='sidebar'] {
+      container: bk-app-layout__sidebar / inline-size;
+      
+      background: bk.$theme-side-nav-background-default;
+      
+      > aside {
+        position: sticky;
+        top: var(--bk-app-layout-header-height);
+        /*
+        Note: if the sidebar itself overflows (in height), then we might want to make this scrollable, but this is hard:
+          - https://stackoverflow.com/questions/16094785/fixed-position-div-that-needs-to-scroll-if-content-overflows
+        However, the user can still scroll the fixed sidebar by just scrolling to the bottom of the content.
+        */
+      }
+    }
+    
+    > [slot='content'] {
+      container: bk-app-layout__content / inline-size;
+      padding: var(--bk-sizing-4);
+    }
+    
+    > [slot='footer'] {
+      container: bk-app-layout__footer / inline-size;
+      
+      // overflow: clip;
+      padding: var(--bk-sizing-2) var(--bk-sizing-4);
+      
+      display: flex;
+      font-size: 0.8rem;
+    }
+    
+    @container (width <= 768px) { /* Tablet size */
+      grid:
+        'header' max-content
+        'sidebar' max-content
+        'content' 1fr
+        'footer' max-content
+        / 1fr;
+    }
+
+    //&:has([slot='sidebar']:hover) { --bk-app-layout-sidebar-width: 80px; } // TEST
+    @media (prefers-reduced-motion: no-preference) {
+      transition: grid 300ms;
+    }
+  }
+}

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -0,0 +1,112 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import cx, { type Argument as ClassNameArgument } from 'classnames';
+import * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { OverflowTester } from '../../util/storybook/OverflowTester.tsx';
+import { Header } from './Header/Header.tsx';
+import { Sidebar } from './Sidebar/Sidebar.tsx';
+import { Logo } from './Logo/Logo.tsx';
+import { Nav } from './Nav/Nav.tsx';
+
+import { Button } from '../../components/actions/Button/Button.tsx';
+import { Link } from '../../components/actions/Link/Link.tsx';
+import { Panel } from '../../components/containers/Panel/Panel.tsx';
+import { Modal } from '../../components/overlays/Modal/Modal.tsx';
+import { UserMenu } from './Header/UserMenu.tsx';
+
+import { AppLayout } from './AppLayout.tsx';
+import { SolutionSelector } from './Header/SolutionSelector.tsx';
+import { AccountSelector } from './Header/AccountSelector.tsx';
+import { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.tsx';
+
+
+type AppLayoutArgs = React.ComponentProps<typeof AppLayout>;
+type Story = StoryObj<AppLayoutArgs>;
+
+export default {
+  component: AppLayout,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  render: args => <AppLayout {...args}/>,
+} satisfies Meta<AppLayoutArgs>;
+
+
+type ModalWithTriggerProps = Omit<React.ComponentProps<typeof Modal>, 'active' | 'onClose'> & {
+  triggerLabel?: string,
+  content?: React.ComponentProps<typeof Modal>['children'],
+};
+const ModalWithTrigger = ({ triggerLabel = 'Open modal', content, ...modalProps }: ModalWithTriggerProps) => {
+  const [active, setActive] = React.useState(false);
+  const onClose = React.useCallback(() => { setActive(false); }, [setActive]);
+  return (
+    <>
+      <Button variant="primary" onPress={() => { setActive(true); }}>{triggerLabel}</Button>
+      <Modal children={content} {...modalProps} active={active} onClose={onClose}/>
+    </>
+  );
+};
+
+export const Standard: Story = {
+  args: {
+    children: (
+      <>
+        <header slot="header" className="bk-theme--dark">
+          <Link unstyled href="#" slot="logo">
+            <Logo/>
+          </Link>
+          <Header slot="actions">
+            <UserMenu userName="Anand Kashyap"/>
+            {/* <UserMenu userName="Anand Kashyap – Very Long Name That Will Overflow"/> */}
+            <AccountSelector className="select-action"/>
+            <SolutionSelector className="select-action"/>
+          </Header>
+        </header>
+        {/* Container around the sidebar that grows to full height, allowing the sidebar to be sticky */}
+        <div slot="sidebar" className="bk-theme--dark">
+          <Sidebar className="bk-app-layout__sidebar">
+            <Nav>
+              <Nav.NavItem active icon="dashboard" label="Dashboard" href="#"/>
+              <Nav.NavItem icon="dashboard" label="Groups" href="#"/>
+            </Nav>
+            <OverflowTester lines={45}/>
+          </Sidebar>
+        </div>
+        <main slot="content">
+          <Breadcrumbs
+            items={[
+              {
+                title: 'Data Security Manager',
+                href: '#',
+              },
+              {
+                title: 'Dashboard',
+                href: '#',
+              }
+            ]}
+          />
+          <Panel>
+            <Panel.Heading>Panel</Panel.Heading>
+            
+            <ModalWithTrigger>
+              <ModalWithTrigger/>
+            </ModalWithTrigger>
+          </Panel>
+          <OverflowTester/>
+        </main>
+        <footer slot="footer">
+          <span className="version">Version: 4.24.2343</span>
+        </footer>
+      </>
+    ),
+  },
+};

package/src/layouts/AppLayout/AppLayout.tsx

@@ -0,0 +1,31 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './AppLayout.module.scss';
+
+
+type AppLayoutProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+
+/**
+ * AppLayout component.
+ */
+export const AppLayout = (props: AppLayoutProps) => {
+  const { unstyled = false, ...propsRest } = props;
+  return (
+    <div
+      {...propsRest}
+      className={cx(
+        'bk',
+        { [cl['bk-app-layout']]: !unstyled },
+        propsRest.className,
+      )}
+    />
+  );
+};

package/src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,47 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-breadcrumbs {
+    @include bk.component-base(bk-breadcrumbs);
+    
+    .bk-breadcrumb {
+      display: flex;
+      flex-wrap: wrap;
+      gap: bk.$spacing-1;
+    }
+    
+    .bk-breadcrumb-item {
+      @include bk.font(bk.$font-family-display, bk.$font-weight-regular, bk.$font-size-s);
+      color: bk.$theme-breadcrumb-text-default;
+      
+      &:last-child:not(.bk-breadcrumb-item--with-trailing-slash) {
+        &::after {
+          content: '';
+          margin-left: 0;
+        }
+      }
+      
+      &::after {
+        content: '/';
+        font-size: bk.$font-size-s;
+        margin-left: bk.$spacing-1;
+      }
+      
+      .bk-breadcrumb-link {
+        font-size: bk.$font-size-s;
+        text-decoration: none;
+        color: bk.$theme-breadcrumb-text-link;
+      }
+      
+      :is(.bk-breadcrumb-link:focus-visible, :global(.pseudo-focus-visible) .bk-breadcrumb-link) {
+        --bk-focus-outline-color: #{bk.$theme-breadcrumb-border-focus};
+        @include bk.focus-outline-close;
+        border-radius: 2px;
+      }
+    }
+  }
+}

package/src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,66 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { Breadcrumbs, type BreadcrumbItem } from './Breadcrumbs.tsx';
+
+
+type BreadcrumbsArgs = React.ComponentProps<typeof Breadcrumbs>;
+type Story = StoryObj<BreadcrumbsArgs>;
+
+export default {
+  component: Breadcrumbs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <Breadcrumbs {...args}/>,
+} satisfies Meta<BreadcrumbsArgs>;
+
+const defaultBreadcrumbsItems: BreadcrumbItem[] = [1,2,3,4].map(item => { 
+  return {
+    title: `Test${item}`,
+    href: '#',
+  }
+});
+
+const BaseStory: Story = {
+  args: {},
+  render: (args) => <Breadcrumbs {...args}/>,
+};
+
+export const StandardStory: Story = {
+  ...BaseStory,
+  name: 'Standard',
+  args: { items: defaultBreadcrumbsItems },
+};
+
+export const StandardFocus: Story = {
+  ...BaseStory,
+  name: 'Standard [focus]',
+  args: {
+    items: defaultBreadcrumbsItems.map((item, index) => {
+      if (index === 1) {
+        return {
+          ...item,
+          className: 'pseudo-focus-visible',
+        }
+      }
+      return item;
+    }),
+  }
+};
+
+export const StandardTrailingSlash: Story = {
+  ...BaseStory,
+  name: 'Standard [trailing slash]',
+  args: { items: defaultBreadcrumbsItems, hasTrailingSlash: true },
+};

package/src/layouts/AppLayout/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,63 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+
+import cl from './Breadcrumbs.module.scss';
+import { Link } from '../../../components/actions/Link/Link.tsx';
+
+export { cl as BreadcrumbsClassNames };
+
+export type BreadcrumbItem = ComponentProps<'li'> & {
+  title: string,
+  href: string,
+};
+export type BreadcrumbsProps = React.PropsWithChildren<ComponentProps<'nav'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** The routing informations */
+  items: BreadcrumbItem[],
+  
+  /** Whether the last breadcrumb item has slash or not. */
+  hasTrailingSlash?: boolean,
+}>;
+/**
+ * A breadcrumbs component
+ */
+export const Breadcrumbs = (props: BreadcrumbsProps) => {
+  const { children, unstyled = false, items = [], hasTrailingSlash, ...propsRest } = props;
+  return (
+    <nav
+      {...propsRest}
+      aria-label="Breadcrumbs"
+      className={cx({
+        bk: true,
+        [cl['bk-breadcrumbs']]: !unstyled,
+      }, propsRest.className)}
+    >
+      <ol className={cx([cl['bk-breadcrumb']])}>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          return (
+            <li
+              key={index}
+              className={cx({
+                [cl['bk-breadcrumb-item']]: true,
+                [cl['bk-breadcrumb-item--with-trailing-slash']]: hasTrailingSlash,
+              }, item.className)}
+            >
+              {item.href && !isLast
+                ? <Link href={item.href} className={cx([cl['bk-breadcrumb-link']])}>{item.title}</Link>
+                : item.title
+              }
+            </li>
+          );
+        })}
+        {children}
+      </ol>
+    </nav>
+  );
+};

package/src/layouts/AppLayout/Header/AccountSelector.module.scss

@@ -0,0 +1,24 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-account-selector {
+    @include bk.component-base(bk-account-selector);
+    
+    // Allow the element to shrink down to just the icon
+    overflow: hidden;
+    flex-shrink: 4; // Shrink relatively fast (since there is no important information besides the icon)
+    min-width: 3rem;
+    
+    display: flex;
+    gap: bk.$spacing-2;
+    align-items: center;
+    
+    .bk-account-selector__icon {
+      --bk-icon-accent-color: #{bk.$theme-header-icon-background-default};
+    }
+  }
+}

package/src/layouts/AppLayout/Header/AccountSelector.stories.tsx

@@ -0,0 +1,31 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { AccountSelector } from './AccountSelector.tsx';
+
+
+type AccountSelectorArgs = React.ComponentProps<typeof AccountSelector>;
+type Story = StoryObj<AccountSelectorArgs>;
+
+export default {
+  component: AccountSelector,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <AccountSelector {...args}/>,
+} satisfies Meta<AccountSelectorArgs>;
+
+
+export const Standard: Story = {
+  name: 'AccountSelector',
+};

package/src/layouts/AppLayout/Header/AccountSelector.tsx

@@ -0,0 +1,51 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { Icon } from '../../../components/graphics/Icon/Icon.tsx';
+import { Button } from '../../../components/actions/Button/Button.tsx';
+import { DropdownMenuProvider } from '../../../components/overlays/DropdownMenu/DropdownMenuProvider.tsx';
+
+import cl from './AccountSelector.module.scss';
+
+
+export { cl as AccountSelectorClassNames };
+
+export type AccountSelectorProps = Omit<ComponentProps<typeof Button>, 'label'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+};
+export const AccountSelector = (props: AccountSelectorProps) => {
+  const { unstyled = false, children, ...propsRest } = props;
+  
+  return (
+    <DropdownMenuProvider
+      placement="bottom-start"
+      items={
+        <>
+          <DropdownMenuProvider.Option optionKey="account-1" icon="accounts" label="Account 1"/>
+          <DropdownMenuProvider.Option optionKey="account-2" icon="accounts" label="Account 2"/>
+          <DropdownMenuProvider.Option optionKey="account-3" icon="accounts" label="Account 3"/>
+        </>
+      }
+    >
+      {({ props, state }) =>
+        <Button unstyled
+          {...props({
+            ...propsRest,
+            className: cx('bk', { [cl['bk-account-selector']]: !unstyled }, propsRest.className),
+          })}
+        >
+          <Icon icon="groups" className={cl['bk-account-selector__icon']}
+            decoration={{ type: 'background-circle' }}
+          />
+          {state.selectedOption === null ? 'Accounts' : state.selectedOption}
+          <Icon icon="caret-down"/>
+        </Button>
+      }
+    </DropdownMenuProvider>
+  );
+};

package/src/layouts/AppLayout/Header/Header.module.scss

@@ -0,0 +1,74 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-app-layout-header {
+    @include bk.component-base(bk-app-layout-header);
+    
+    --header-height: var(--bk-app-layout-header-height, var(--bk-sizing-5));
+    
+    /* Necessary despite the `sticky`, because the page content is a container, which generates a stacking context:
+        https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context */
+    z-index: 1;
+    
+    height: var(--header-height);
+    padding: var(--bk-sizing-2) var(--bk-sizing-3);
+    
+    background: bk.$theme-header-background-default;
+    --header-box-shadow-size: var(--bk-sizing-1);
+    box-shadow: 0 0 var(--header-box-shadow-size) rgba(0 0 0 / 10%);
+    clip-path: inset(0 0 calc(-1 * var(--header-box-shadow-size)) 0); /* Only show shadow at bottom */
+    
+    display: flex;
+    flex-direction: row-reverse;
+    gap: bk.$spacing-3;
+    
+    .user-profile-trigger {
+      cursor: pointer;
+    }
+    
+    .popover-user-profile {
+      position: fixed;
+      top: calc(var(--header-height) + var(--bk-sizing-1));
+      right: var(--bk-sizing-1);
+      
+      width: var(--bk-sizing-7);
+      padding: var(--bk-sizing-3);
+      border-radius: var(--bk-sizing-1);
+      
+      background: bk.$color-grape-300;
+      
+      nav li {
+        cursor: pointer;
+        
+        padding: var(--bk-sizing-3) var(--bk-sizing-3);
+        border-radius: var(--bk-sizing-1);
+        
+        &:hover {
+          background: color-mix(in hsl, bk.$color-grape-300 60%, black);
+        }
+      }
+      
+      transition: all 150ms ease-in-out;
+      transition-property: opacity, transform;
+      transform-origin: 50% 0;
+      &:popover-open {
+        opacity: 1;
+        transform: scaleY(1);
+        
+        @starting-style {
+          opacity: 0;
+          transform: scaleY(0);
+        }
+      }
+    }
+    
+    // Add space between the select actions (on the left) and the rest of the items (on the right)
+    > :nth-child(1 of :global(.select-action)) {
+      margin-inline-end: auto;
+    }
+  }
+}

package/src/layouts/AppLayout/Header/Header.stories.tsx

@@ -0,0 +1,30 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { Header } from './Header.tsx';
+
+
+type HeaderArgs = React.ComponentProps<typeof Header>;
+type Story = StoryObj<HeaderArgs>;
+
+export default {
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<HeaderArgs>;
+
+
+export const Standard: Story = {
+  render: () => <Header>Content</Header>,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+  },
+};

package/src/layouts/AppLayout/Header/Header.tsx

@@ -0,0 +1,31 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './Header.module.scss';
+
+
+export type HeaderProps = React.PropsWithChildren<ComponentProps<'header'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * Header component (for app layout).
+ */
+export const Header = ({ children, unstyled, ...propsRest }: HeaderProps) => {
+  return (
+    <header
+      role="banner"
+      {...propsRest}
+      className={cx(
+        'bk',
+        { [cl['bk-app-layout-header']]: !unstyled },
+      )}
+    >
+      {children}
+    </header>
+  );
+};