@fortanix/baklava 1.0.0-beta-20241114

package/src/layouts/AppLayout/Header/SolutionSelector.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-solution-selector {
+    @include bk.component-base(bk-solution-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-solution-selector__icon {
+      --bk-icon-accent-color: #{bk.$theme-header-icon-background-default};
+    }
+  }
+}

package/src/layouts/AppLayout/Header/SolutionSelector.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 { SolutionSelector } from './SolutionSelector.tsx';
+
+
+type SolutionSelectorArgs = React.ComponentProps<typeof SolutionSelector>;
+type Story = StoryObj<SolutionSelectorArgs>;
+
+export default {
+  component: SolutionSelector,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+  },
+  render: (args) => <SolutionSelector {...args}/>,
+} satisfies Meta<SolutionSelectorArgs>;
+
+
+export const Standard: Story = {
+  name: 'SolutionSelector',
+};

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

@@ -0,0 +1,50 @@
+/* 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 './SolutionSelector.module.scss';
+
+
+export { cl as SolutionSelectorClassNames };
+
+export type SolutionSelectorProps = Omit<ComponentProps<typeof Button>, 'label'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+};
+export const SolutionSelector = (props: SolutionSelectorProps) => {
+  const { unstyled = false, children, ...propsRest } = props;
+  
+  return (
+    <DropdownMenuProvider
+      placement="bottom-start"
+      items={
+        <>
+          <DropdownMenuProvider.Option optionKey="iam" icon="user" label="Identity & Access Management"/>
+          <DropdownMenuProvider.Option optionKey="key-insight" icon="key" label="Key Insight"/>
+        </>
+      }
+    >
+      {({ props }) =>
+        <Button unstyled
+          {...props({
+            ...propsRest,
+            className: cx('bk', { [cl['bk-solution-selector']]: !unstyled }, propsRest.className),
+          })}
+        >
+          <Icon icon="solutions" className={cl['bk-solution-selector__icon']}
+            decoration={{ type: 'background-circle' }}
+          />
+          Solutions
+          <Icon icon="caret-down"/>
+        </Button>
+      }
+    </DropdownMenuProvider>
+  );
+};

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

@@ -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/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-user-menu {
+    @include bk.component-base(bk-user-menu);
+    
+    flex-shrink: 1; // Allow the user menu to shrink inside a parent flexbox
+    min-width: 1rem; // Allow it to shrink down to just the icon on small screens
+    max-width: 40ch;
+    margin-inline-start: bk.$spacing-3;
+    
+    display: flex;
+    flex-direction: row;
+    gap: bk.$spacing-3;
+    align-items: center;
+    
+    > .bk-user-menu__user-icon {
+      font-size: 1.2em;
+    }
+    
+    > .bk-user-menu__user-name {
+      overflow: hidden;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+/* 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 { UserMenu } from './UserMenu.tsx';
+
+
+type UserMenuArgs = React.ComponentProps<typeof UserMenu>;
+type Story = StoryObj<UserMenuArgs>;
+
+export default {
+  component: UserMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    userName: 'Anand Kashyap',
+  },
+  render: (args) => <UserMenu {...args}/>,
+} satisfies Meta<UserMenuArgs>;
+
+
+export const Standard: Story = {
+  name: 'UserMenu',
+};

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

@@ -0,0 +1,67 @@
+/* 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 './UserMenu.module.scss';
+
+
+export { cl as UserMenuClassNames };
+
+export type UserMenuProps = Omit<ComponentProps<typeof Button>, 'label'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** The user's name */
+  userName?: undefined | string,
+};
+export const UserMenu = (props: UserMenuProps) => {
+  const { unstyled = false, children, userName, ...propsRest } = props;
+  
+  const renderContent = () => {
+    if (userName) {
+      return (
+        <>
+          <Icon icon="user-profile" className={cx(cl['bk-user-menu__user-icon'])}/>
+          <span className={cx(cl['bk-user-menu__user-name'])}>{userName}</span>
+        </>
+      );
+    }
+    return children;
+  };
+  
+  return (
+    <DropdownMenuProvider
+      placement="bottom-end"
+      items={
+        <>
+          <DropdownMenuProvider.Action itemKey="profile" label="Profile"
+            onActivate={({ close }) => {
+              console.log(`Activated profile`);
+              close();
+            }}
+          />
+          <DropdownMenuProvider.Action itemKey="sign-out" label="Sign out"
+            onActivate={({ close }) => {
+              console.log(`Activated sign out`);
+              close();
+            }}
+          />
+        </>
+      }
+    >
+      <Button unstyled
+        {...propsRest}
+        className={cx('bk', { [cl['bk-user-menu']]: !unstyled }, propsRest.className)}
+      >
+        {renderContent()}
+      </Button>
+    </DropdownMenuProvider>
+  );
+};

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

@@ -0,0 +1,78 @@
+/* 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 */
+/* stylelint-disable selector-class-pattern */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-app-logo {
+    @include bk.component-base(bk-app-logo);
+    container-type: inline-size;
+    width: 200px;
+    aspect-ratio: 1 / 0.2;
+    
+    --icon-size: 0.16fr;
+    
+    place-self: center start;
+    
+    // overflow: clip;
+    // user-select: none;
+    
+    margin: 13px 10px;
+    margin-bottom: 7px;
+    
+    > :global(._logo) {
+      display: grid;
+      grid:
+        'icon title' max-content
+        'icon subtitle' 1fr
+        / var(--icon-size) 1fr;
+      column-gap: 4cqi;
+      
+      > :global(._icon) { grid-area: icon; }
+      > :global(._title) { grid-area: title; }
+      > :global(._subtitle) { grid-area: subtitle; }
+      
+      color: bk.$theme-text-logo-default;
+      
+      > :global(._icon) {
+        align-self: center;
+      }
+      > :global(._title), > :global(._subtitle) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      > :global(._title) {
+        align-self: end;
+        font-size: 9.4cqi;
+      }
+      > :global(._subtitle) {
+        align-self: start;
+        font-size: 7cqi;
+      }
+      
+      
+      /* Fortanix logo styling */
+      > :global(._title) {
+        @include bk.font(bk.$font-family-display, bk.$font-weight-bold);
+        line-height: 1;
+        align-self: start;
+        
+        &::after {
+          display: inline-block;
+          content: '®';
+          margin-left: 0.5ch;
+          
+          vertical-align: 1.8cap;
+          font-size: 0.3em;
+        }
+      }
+      > :global(._subtitle) {
+        @include bk.font(bk.$font-family-display, bk.$font-weight-medium);
+      }
+    }
+  }
+}

package/src/layouts/AppLayout/Logo/Logo.tsx

@@ -0,0 +1,38 @@
+/* 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 logoImage from '../../../assets/images/fortanix_logo_icon.svg';
+import cl from './Logo.module.scss';
+
+
+export type LogoProps = React.PropsWithChildren<ComponentProps<'figure'>>;
+
+/**
+ * Logo component.
+ */
+export const Logo = ({ ...propsRest }: LogoProps) => {
+  const subtitle = 'Data Security Manager';
+  
+  return (
+    <figure
+      {...propsRest}
+      className={cx(
+        'bk',
+        cl['bk-app-logo'],
+        propsRest.className,
+      )}
+    >
+      <div className="_logo">
+        <div className="_icon">
+          <img alt={`Fortanix ${subtitle}`} src={logoImage}/>
+        </div>
+        <span className="_title">Fortanix</span>
+        <span className="_subtitle">{subtitle}</span>
+      </div>
+    </figure>
+  );
+};

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

@@ -0,0 +1,73 @@
+/* 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;
+
+// https://ryanmulligan.dev/blog/layout-breakouts/
+// https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
+@mixin grid-breakout($inset-content: bk.$spacing-2) {
+  --gap-content: #{$inset-content};
+  --size-content: calc(100% - var(--gap) * 2);
+  
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--gap-content)
+    [content-start] var(--size-content) [content-end]
+    var(--gap-content) [full-end];
+}
+
+@layer baklava.components {
+  .bk-nav {
+    @include bk.component-base(bk-nav);
+    
+    --bk-nav-inset-content: #{bk.$spacing-3};
+    //padding-block: var(--bk-nav-inset-content);
+    
+    @include grid-breakout($inset-content: var(--bk-nav-inset-content));
+    
+    menu {
+      display: flex;
+      flex-direction: column;
+      //row-gap: var(--bk-sizing-2);
+      
+      .bk-nav__item {
+        @include bk.font(bk.$font-family-display);
+        
+        .bk-nav__item__link {
+          cursor: pointer;
+          
+          /* Focus outline */
+          &:focus-visible {
+            outline: none !important;
+            box-shadow: inset 5px 0 var(--bk-focus-outline-color);
+          }
+          
+          padding-block: bk.$spacing-2;
+          
+          &:hover {
+            background: bk.$theme-side-nav-menu-background-hover;
+          }
+          
+          grid-column: full;
+          
+          display: flex;
+          flex-direction: row;
+          gap: bk.$spacing-2;
+          
+          .bk-nav__item__link__icon {
+            // ignore
+          }
+          .bk-nav__item__link__label {
+            // ignore
+          }
+        }
+        
+        &[aria-current] {
+          border-left-width: 4px;
+          border-left-color: bk.$theme-side-nav-menu-tab-default;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+/* 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 type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { Nav } from './Nav.tsx';
+
+
+type LayoutArgs = React.ComponentProps<typeof Nav>;
+type Story = StoryObj<LayoutArgs>;
+
+export default {
+  component: Nav,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<LayoutArgs>;
+
+
+export const Standard: Story = {
+  render: () => <Nav/>,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+  },
+};

package/src/layouts/AppLayout/Nav/Nav.tsx

@@ -0,0 +1,75 @@
+/* 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 { Link } from '../../../components/actions/Link/Link.tsx';
+import { Icon, type IconName } from '../../../components/graphics/Icon/Icon.tsx';
+
+import cl from './Nav.module.scss';
+
+
+export type NavItemProps = React.PropsWithChildren<ComponentProps<'li'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  href?: undefined | string,
+  icon?: undefined | IconName,
+  label?: undefined | string,
+  
+  active?: undefined | boolean,
+}>;
+export const NavItem = (props: NavItemProps) => {
+  const { unstyled, children, className, href, label, icon, active, ...propsRest } = props;
+  const renderItem = () => {
+    if (label) {
+      return (
+        <Link unstyled href={href} className={cx(cl['bk-nav__item__link'])}>
+          {icon && <Icon className={cx(cl['bk-nav__item__link__icon'])} icon={icon}/>}
+          <span className={cx(cl['bk-nav__item__link__label'])}>{label}</span>
+        </Link>
+      );
+    }
+    return children;
+  };
+  
+  return (
+    <li
+      aria-current={active ? 'page' : undefined}
+      {...propsRest}
+      className={cx(
+        { [cl['bk-nav__item']]: !unstyled },
+      )}
+    >
+      {renderItem()}
+    </li>
+  );
+};
+
+export type NavProps = React.PropsWithChildren<ComponentProps<'nav'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * Nav component.
+ */
+export const Nav = Object.assign(
+  ({ unstyled, children, className, ...propsRest }: NavProps) => {
+    return (
+      <nav
+        {...propsRest}
+        className={cx(
+          'bk',
+          { [cl['bk-nav']]: !unstyled },
+        )}
+      >
+        <menu>
+          {children}
+        </menu>
+      </nav>
+    );
+  },
+  { NavItem },
+);

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

@@ -0,0 +1,46 @@
+/* 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-sidebar {
+    @include bk.component-base(bk-app-layout-sidebar);
+    container-type: inline-size;
+    
+    align-self: start; /* https://ishadeed.com/article/position-sticky-css-grid */
+    
+    display: flex;
+    flex-direction: column;
+    
+    &.bk-app-layout-sidebar--collapsible {
+      //width: calc(var(--bk-sizing-6) * 1.7);
+      
+      transition: all 300ms ease-in-out;
+      transition-property: width, grid-template-columns;
+      
+      &.-collapsed {
+        width: var(--bk-sizing-5);
+      }
+      
+      .bk-app-layout-sidebar__action-collapse {
+        margin: var(--bk-sizing-2);
+        padding: var(--bk-sizing-1) var(--bk-sizing-2);
+        background: var(--bk-panel-color-background);
+        cursor: pointer;
+      }
+      
+      /* Customize some components */
+      .bk-logo-with-text {
+        margin: var(--bk-sizing-3);
+        height: calc(var(--bk-sizing-4) + 18px);
+      }
+    }
+  }
+}
+
+/* FIXME */
+.bk-theme--dark.bk-layout__sidebar {
+  /* background: bk.$color-brand-300; */
+}

package/src/layouts/AppLayout/Sidebar/Sidebar.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 { Sidebar } from './Sidebar.tsx';
+
+
+type SidebarArgs = React.ComponentProps<typeof Sidebar>;
+type Story = StoryObj<SidebarArgs>;
+
+export default {
+  component: Sidebar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<SidebarArgs>;
+
+
+export const Standard: Story = {
+  render: () => <Sidebar>Content</Sidebar>,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+  },
+};

package/src/layouts/AppLayout/Sidebar/Sidebar.tsx

@@ -0,0 +1,33 @@
+/* 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 './Sidebar.module.scss';
+
+
+export type SidebarProps = React.PropsWithChildren<ComponentProps<'aside'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+
+/**
+ * Sidebar component (for app layout).
+ */
+export const Sidebar = ({ children, unstyled, ...propsRest }: SidebarProps) => {
+  return (
+    <aside
+      {...propsRest}
+      className={cx(
+        'bk',
+        { [cl['bk-app-layout-sidebar']]: !unstyled },
+        //{ [cl['bk-app-layout-sidebar--collapsible']]: true },
+        propsRest.className,
+      )}
+    >
+      {children}
+    </aside>
+  );
+};

package/src/layouts/FormLayout/FormLayout.module.scss

@@ -0,0 +1,19 @@
+/* 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-form-layout {
+    @include bk.component-base(bk-form-layout);
+    
+    min-width: 300px;
+    
+    display: flex;
+    flex-direction: column;
+    gap: bk.$sizing-m;
+    
+    padding-block: 1px;
+  }
+}