@fortanix/baklava 1.0.0-beta-20241114

package/src/components/lists/PropertyList/PropertyList.tsx

@@ -0,0 +1,60 @@
+/* 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 './PropertyList.module.scss';
+
+
+export { cl as PropertyListClassNames };
+
+type PropertyProps = ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** The label of the property */
+  label: React.ReactNode,
+  
+  /** The value of the property */
+  value: React.ReactNode,
+  
+  /** Whether this property should take up all available space */
+  fullWidth?: boolean,
+};
+export const Property = ({ unstyled, label, value, fullWidth = false, ...propsRest }: PropertyProps) => {
+  // Note: HTML allows wrapping dt/dd pairs in a `<div>`:
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#wrapping_name-value_groups_in_div_elements
+  return (
+    <div
+      {...propsRest}
+      className={cx({
+        [cl['bk-property-list__property']]: !unstyled,
+        [cl['bk-property-list__property--full-width']]: fullWidth,
+      }, propsRest.className)}
+    >
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+};
+
+export type PropertyListProps = React.PropsWithChildren<ComponentProps<'dl'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+export const PropertyList = Object.assign(
+  ({ unstyled = false, ...propsRest }: PropertyListProps) => {
+    return (
+      <dl
+        {...propsRest}
+        className={cx({
+          bk: true,
+          [cl['bk-property-list']]: !unstyled,
+        }, propsRest.className)}
+      />
+    );
+  },
+  { Property },
+);

package/src/components/navigations/Stepper/Stepper.module.scss

@@ -0,0 +1,88 @@
+/* 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-stepper {
+    @include bk.component-base(bk-stepper);
+    
+    &.bk-stepper--horizontal {
+      display: flex;
+      gap: bk.$spacing-9;
+    }
+    
+    &.bk-stepper--vertical {
+      .bk-stepper__item {
+        &:not(:first-child):not(:first-child) {
+          margin-top: bk.$spacing-9;
+      
+          .bk-stepper__item__circle {
+            &::before {
+              position: absolute;
+              content: '';
+              width: 0;
+              height: bk.$spacing-9;
+              top: -42px;
+              left: 50%;
+              border: 0.5px solid #{bk.$theme-stepper-border-disabled};
+            }
+          }
+        }
+      }
+    }
+    
+    .bk-stepper__item {
+      display: flex;
+      align-items: center;
+      color: #{bk.$theme-stepper-text-disabled};
+      cursor: pointer;
+      
+      .bk-stepper__item__circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        margin-right: bk.$spacing-3;
+        border: 2px solid #{bk.$theme-stepper-border-disabled};
+        border-radius: 50%;
+        width: 28px;
+        height: 28px;
+        font-weight: bk.$font-weight-bold;
+        font-size: bk.$font-size-m;
+      }
+      
+      .bk-stepper__item__circle__icon {
+        font-size: bk.$font-size-xs;
+      }
+      
+      .bk-stepper__item__title {
+        font-size: bk.$font-size-m;
+      }
+      
+      .bk-stepper__item__optional {
+        margin-left: bk.$spacing-2;
+        font-size: bk.$font-size-xs;
+      }
+             
+      &[aria-selected="true"] {
+        color: #{bk.$theme-stepper-text-selected};
+        
+        .bk-stepper__item__circle {
+          border-color: #{bk.$theme-stepper-border-default};
+          background-color: #{bk.$theme-stepper-background-default};
+          color: #{bk.$theme-stepper-text-selected-number};
+        }
+      }
+      
+      &.bk-stepper__item--checked {
+        color: #{bk.$theme-stepper-text-selected};
+        
+        .bk-stepper__item__circle {
+          border-color: #{bk.$theme-stepper-border-default};
+        }
+      }
+    }
+  }
+}

package/src/components/navigations/Stepper/Stepper.stories.tsx

@@ -0,0 +1,68 @@
+/* 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 { Stepper, Step } from './Stepper.tsx';
+
+
+type StepperArgs = React.ComponentProps<typeof Stepper>;
+type Story = StoryObj<StepperArgs>;
+
+export default {
+  component: Stepper,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {},
+  render: (args) => <Stepper {...args}/>,
+} satisfies Meta<StepperArgs>;
+
+const defaultSteps: Step[] = [1,2,3,4].map(index => { 
+  return {
+    stepKey: `${index}`,
+    title: `Step${index}`,
+    isOptional: index === 4,
+  };
+});
+
+type StepperWithTriggerProps = React.PropsWithChildren<Partial<StepperArgs>>;
+const StepperWithTrigger = (props: StepperWithTriggerProps) => {
+  const { steps = defaultSteps, activeKey, ...stepperContext } = props;
+  const [activeStepKey, setActiveStepKey] = React.useState<string>(activeKey || '1');
+  return (
+    <Stepper
+      onSwitch={setActiveStepKey}
+      activeKey={activeStepKey}
+      steps={steps}
+      {...stepperContext}
+    />
+  );
+};
+
+const BaseStory: Story = {
+  args: {},
+  render: (args) => <StepperWithTrigger {...args} />,
+};
+
+export const Standard: Story = {
+    ...BaseStory,
+  name: 'Standard',
+  args: { ...BaseStory.args },
+};
+
+export const Horizontal: Story = {
+    ...BaseStory,
+  name: 'Horizontal',
+  args: {
+    ...BaseStory.args,
+    direction: 'horizontal',
+  },
+};
+

package/src/components/navigations/Stepper/Stepper.tsx

@@ -0,0 +1,95 @@
+/* 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 ClassNameArgument, type ComponentProps, classNames as cx } from '../../../util/componentUtil.ts';
+
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+
+import cl from './Stepper.module.scss';
+
+export { cl as SteppersClassNames };
+
+export type Step = {
+  stepKey: string,
+  title: React.ReactNode,
+  className?: ClassNameArgument,
+  hide?: boolean,
+  isOptional?: boolean,
+};
+
+export type StepperKey = Step['stepKey'];
+
+export type StepperDirection = 'vertical' | 'horizontal';
+
+export type StepperProps = React.PropsWithChildren<ComponentProps<'ul'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Step items. */
+  steps: Step[],
+  
+  /** Active key of step. */
+  activeKey?: string,
+  
+  /** Whether this component should be displayed vertically or horizontally. */
+  direction?: StepperDirection,
+  
+  /** Callback executed when active step is changed. */
+  onSwitch: (stepKey: StepperKey) => void,
+}>;
+/**
+ * A stepper component
+ */
+export const Stepper = (props: StepperProps) => {
+  const { unstyled = false, steps = [], activeKey, direction = 'vertical', onSwitch, ...propsRest } = props;
+  
+  const handleKeyDown = (event: React.KeyboardEvent, stepKey: Step['stepKey']) => {
+    if (event.key === 'Enter') {
+      onSwitch(stepKey);
+    }
+  };
+  
+  return (
+    <ul
+      {...propsRest}
+      className={cx({
+        bk: true,
+        [cl['bk-stepper']]: !unstyled,
+        [cl['bk-stepper--horizontal']]: direction === 'horizontal',
+        [cl['bk-stepper--vertical']]: direction === 'vertical',
+      }, propsRest.className)}
+    >
+      {steps.map((step, index) => {
+        if (step.hide) return null;
+        const isActive = step.stepKey === activeKey;
+        const isChecked = index < steps.findIndex(step => step.stepKey === activeKey);
+        return (
+          <li
+            role="tab"
+            tabIndex={0}
+            aria-selected={isActive ? 'true': 'false'}
+            data-tab={step.stepKey}
+            key={step.stepKey}
+            className={cx({
+              [cl['bk-stepper__item']]: true,
+              [cl['bk-stepper__item--checked']]: isChecked,
+            }, step.className)}
+            onClick={() => { onSwitch(step.stepKey); }}
+            onKeyDown={(event) => { handleKeyDown(event, step.stepKey); }}
+          >
+            <span className={cx(cl['bk-stepper__item__circle'])}>
+              {isChecked
+                ? <Icon icon="check" className={cx(cl['bk-stepper__item__circle__icon'])}/> 
+                : index + 1
+              }
+            </span>
+            <span className={cx(cl['bk-stepper__item__title'])}>{step.title}</span>
+            {step.isOptional && <span className={cx(cl['bk-stepper__item__optional'])}>(Optional)</span>}
+          </li>
+        )
+      })}
+    </ul>
+  );
+};

package/src/components/navigations/Tabs/Tabs.module.scss

@@ -0,0 +1,71 @@
+/* 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-tabs {
+    @include bk.component-base(bk-tabs);
+    
+    .bk-tabs__switcher {
+      display: flex;
+      list-style: none;
+      border-bottom: 1px solid #{bk.$theme-tab-rule-default};
+      
+      .bk-tabs__switcher__tab {
+        position: relative;
+        user-select: none;
+        padding: bk.$spacing-3 bk.$spacing-8;
+        color: #{bk.$theme-tab-text-default};
+        @include bk.font(bk.$font-family-body, bk.$font-weight-semibold, bk.$font-size-m);
+        text-transform: uppercase;
+        cursor: pointer;
+        white-space: nowrap;
+        
+        // The active tab underline (zero height by default)
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          left: 0;
+          bottom: 0;
+          height: 0;
+          transition: .3s;
+        }
+        
+        &:is(:hover, :global(.pseudo-hover)) {
+          font-weight: bk.$font-weight-bold;
+          
+          &::after {
+            background-color: #{bk.$theme-tab-tabs-hover};
+            height: 5px;
+          }
+        }
+        
+        &:is(:focus-visible, :global(.pseudo-focus-visible)) {
+          font-weight: bk.$font-weight-bold;
+          
+          &::after {
+            background-color: #{bk.$theme-tab-tabs-focused};
+            height: 5px;
+          }
+        }
+        
+        &[aria-selected="true"] {
+          font-weight: bk.$font-weight-bold;
+          
+          &::after {
+            cursor: default;
+            background-color: #{bk.$theme-tab-tabs-focused};
+            height: 5px;
+          }
+        }
+      }
+    }
+    
+    .bk-tabs__tab-content {
+      padding-top: bk.$spacing-7;
+    }
+  }
+}

package/src/components/navigations/Tabs/Tabs.stories.tsx

@@ -0,0 +1,106 @@
+/* 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 { Tabs, Tab } from './Tabs.tsx';
+
+
+type TabsArgs = React.ComponentProps<typeof Tabs>;
+type Story = StoryObj<TabsArgs>;
+
+export default {
+  component: Tabs,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    children: 'Example',
+  },
+  render: (args) => <Tabs {...args}/>,
+} satisfies Meta<TabsArgs>;
+
+type DefaultTabOption = {
+  index: number,
+  className?: string,
+};
+const defaultTabOptions: DefaultTabOption[] = [1,2,3,4].map(index => { 
+  return { index }
+});
+
+type TabWithTriggerProps = React.PropsWithChildren<Partial<TabsArgs>> & {
+  options: DefaultTabOption[],
+  defaultActiveTabKey: string,
+};
+const TabWithTrigger = (props: TabWithTriggerProps) => {
+  const { options = defaultTabOptions, defaultActiveTabKey, ...tabContext } = props;
+  const [activeTabKey, setActiveTabKey] = React.useState<string>(defaultActiveTabKey);
+  return (
+    <Tabs onSwitch={setActiveTabKey} activeKey={activeTabKey} {...tabContext}>
+      {options.map(tab => {
+        return (
+          <Tab
+            key={tab.index}
+            data-label={`tab${tab.index}`}
+            tabKey={`tab${tab.index}`}
+            title={`Tab ${tab.index}`}
+            render={() => <>Tab {tab.index} contents</>}
+            className={tab.className}
+          />
+        )
+      })}
+    </Tabs>
+  );
+};
+
+const BaseStory: Story = {
+  args: {},
+  render: (args) => <TabWithTrigger {...args} />,
+};
+
+export const Standard: Story = {
+    ...BaseStory,
+  name: 'Standard',
+  args: { ...BaseStory.args },
+};
+
+export const StandardHover: Story = {
+    ...BaseStory,
+  name: 'Standard [hover]',
+  args: {
+    ...BaseStory.args,
+    options: defaultTabOptions.map(option => {
+      if (option.index === 1) {
+        return {
+          ...option,
+          className: 'pseudo-hover',
+        }
+      }
+      return option;
+    }),
+  },
+};
+
+export const StandardFocus: Story = {
+    ...BaseStory,
+  name: 'Standard [focus]',
+  args: {
+    ...BaseStory.args,
+    options: defaultTabOptions.map(option => {
+      if (option.index === 1) {
+        return {
+          ...option,
+          className: 'pseudo-focus-visible',
+        };
+      }
+      return option;
+    }),
+    defaultActiveTabKey: 'tab1',
+  },
+};

package/src/components/navigations/Tabs/Tabs.tsx

@@ -0,0 +1,121 @@
+/* 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 './Tabs.module.scss';
+
+
+export { cl as TabsClassNames };
+
+export type TabKey = string;
+
+export type TabProps = ComponentProps<'div'> & {
+  children?: undefined | React.ReactNode,
+  tabKey: string,
+  title: React.ReactNode,
+  hide?: boolean,
+  render?: () => React.ReactNode,
+};
+export const Tab = ({ children }: TabProps): React.ReactElement => {
+  return children as React.ReactElement;
+};
+type TabElement = React.ReactElement<TabProps, React.FunctionComponent<typeof Tab>>;
+
+
+export type TabsProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Active key of tab. */
+  activeKey?: string,
+  
+  /** Callback executed when active tab is changed. */
+  onSwitch: (tabKey: TabKey) => void,
+}>;
+/**
+ * A tab component
+ */
+export const Tabs = (props: TabsProps) => {
+  const { unstyled = false, activeKey, children, onSwitch, ...propsRest } = props;
+  
+  // Select the activeKey tab among the given list of tabs
+  const getActiveTab = (tabs: Array<TabElement>) => {
+    const activeTabs = tabs.filter(child => child.props.tabKey === activeKey);
+    
+    if (activeTabs.length === 0) { return null; }
+    if (activeTabs.length > 1) { throw new TypeError(`Ambiguous active tab`); }
+    
+    return activeTabs[0];
+  };
+  
+  type ActiveTabProps = Omit<TabProps, 'children' | 'tabKey' | 'title' | 'hide' | 'render'>;
+  const getActiveTabProps = (tab: TabElement): ActiveTabProps => {
+    const { children, tabKey, title, hide, render, ...tabProps } = tab.props;
+    return tabProps;
+  };
+  
+  const renderActive = (tab: TabElement) => {
+    let tabElement;
+    if (typeof tab.props.render === 'function') {
+      tabElement = tab.props.render();
+    } else {
+      tabElement = tab.props.children;
+    }
+    
+    return tabElement;
+  };
+  
+  // FIXME: this throws an error in Chromatic, since `child.type` is `undefined`
+  // React.Children.forEach(children, (child: React.ReactNode) => {
+  //   if (!React.isValidElement(child) || child?.type?.name !== 'Tab') {
+  //     throw new TypeError(`Expected only children of type Tab, received ${child}: ${JSON.stringify(child?.type)}`);
+  //   }
+  // });
+  
+  const tabs = React.Children.toArray(children) as Array<TabElement>;
+  const activeTab = getActiveTab(tabs);
+  const activeTabProps: null | ActiveTabProps = (activeTab && getActiveTabProps(activeTab)) ?? null;
+  
+  return (
+    <div
+      {...propsRest}
+      role="tablist"
+      className={cx({
+        bk: true,
+        [cl['bk-tabs']]: !unstyled,
+      }, propsRest.className)}
+    >
+      <ul className={cx(cl['bk-tabs__switcher'])}>
+        {tabs.map(tab => {
+          if (tab.props.hide) return null;
+          const isActive = tab.props.tabKey === activeKey;
+          return (
+            <li
+              role="tab"
+              tabIndex={0}
+              aria-selected={isActive ? 'true': 'false'}
+              data-tab={tab.props.tabKey}
+              key={tab.props.tabKey}
+              className={cx(cl['bk-tabs__switcher__tab'],tab.props.className)}
+              onClick={() => { onSwitch(tab.props.tabKey); }}
+            >
+              {tab.props.title}
+            </li>
+          )
+        })}
+      </ul>
+      
+      {activeTab &&
+        <div
+          {...(activeTabProps ?? {})}
+          className={cx(cl['bk-tabs__tab-content'], activeTabProps?.className)}
+        >
+          {renderActive(activeTab)}
+        </div>
+      }
+    </div>
+  );
+};