@fortanix/baklava 1.0.0-beta-20241114

package/src/components/forms/fields/CheckboxField/CheckboxField.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-checkbox-field {
+    @include bk.component-base(bk-checkbox-field);
+
+    .bk-checkbox-field__title {
+      color: bk.$theme-text-label-default;
+      font-weight: bk.$font-weight-semibold;
+      margin-bottom: bk.$spacing-1;
+
+      .bk-checkbox-field__title__icon {
+        font-size: 18px;
+        margin-left: bk.$spacing-1;
+      }
+
+      .bk-checkbox-field__title__optional {
+        font-size: bk.$font-size-xs;
+        font-weight: bk.$font-weight-regular;
+        margin-left: bk.$spacing-1;
+      }
+    }
+
+    .bk-checkbox-field__label {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .bk-checkbox-field__label__content {
+      color: bk.$theme-text-label-default;
+      cursor: pointer;
+      position: relative;
+      margin-left: bk.$spacing-2;
+      top: -2px;
+    }
+
+    .bk-checkbox-field__sublabel {
+      font-size: bk.$font-size-xs;
+      padding-left: 26px;
+    }
+  }
+}

package/src/components/forms/fields/CheckboxField/CheckboxField.stories.tsx

@@ -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/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { CheckboxField } from './CheckboxField.tsx';
+
+
+type CheckboxFieldArgs = React.ComponentProps<typeof CheckboxField>;
+type Story = StoryObj<CheckboxFieldArgs>;
+
+export default {
+  component: CheckboxField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {},
+  decorators: [
+    Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
+  ],
+  render: (args) => <CheckboxField {...args}/>,
+} satisfies Meta<CheckboxFieldArgs>;
+
+
+export const CheckboxFieldWithLabel: Story = {
+  args: {
+    label: 'Label',
+  },
+};
+
+export const CheckboxFieldWithLabelAndTitle: Story = {
+  args: {
+    title: 'Title',
+    label: 'Label',
+  },
+};
+
+export const CheckboxFieldWithLabelWithTitleWithTooltip: Story = {
+  args: {
+    title: 'Title',
+    label: 'Label',
+    titleTooltip: 'This is a tooltip',
+  }
+};
+
+export const CheckboxFieldWithLabelWithTitleWithOptional: Story = {
+  args: {
+    title: 'Title',
+    label: 'Label',
+    titleOptional: true,
+  },
+};
+
+export const CheckboxFieldWithLabelWithTitleWithTooltipWithOptional: Story = {
+  args: {
+    title: 'Title',
+    label: 'Label',
+    titleTooltip: 'This is a tooltip',
+    titleOptional: true,
+  },
+};
+
+export const CheckboxFieldWithLabelAndSublabel: Story = {
+  args: {
+    label: 'Label',
+    sublabel: 'Supporting copy',
+  },
+};

package/src/components/forms/fields/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,118 @@
+/* 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, type ClassNameArgument } from '../../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { Checkbox } from '../../controls/Checkbox/Checkbox.tsx';
+import { Icon } from '../../../graphics/Icon/Icon.tsx';
+import { TooltipProvider } from '../../../overlays/Tooltip/TooltipProvider.tsx';
+
+import cl from './CheckboxField.module.scss';
+
+
+export { cl as CheckboxFieldClassNames };
+
+export type CheckboxFieldTitleProps = React.PropsWithChildren<{
+  className?: ClassNameArgument;
+
+  /** Whether to display the optional observation on title. */
+  titleOptional?: undefined | boolean,
+
+  /** An optional tooltip to be displayed on an info icon next to the title. */
+  titleTooltip?: undefined | string,
+}>;
+
+export const CheckboxFieldTitle = ({ className, children, titleOptional, titleTooltip }: CheckboxFieldTitleProps) => (
+  <h1 className={cx(
+    'bk',
+    cl['bk-checkbox-field__title'],
+    className,
+  )}>
+    {children}
+    {titleTooltip && (
+      <TooltipProvider tooltip={titleTooltip}>
+        <Icon icon="info" className={cl['bk-checkbox-field__title__icon']}/>
+      </TooltipProvider>
+    )}
+    {titleOptional && (
+      <small className={cl['bk-checkbox-field__title__optional']}>(Optional)</small>
+    )}
+  </h1>
+);
+
+export type CheckboxFieldProps = ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+
+  /** A label to be displayed after the checkbox. */
+  label: string,
+
+  /** An optional supporting copy to be displayed under the label. */
+  sublabel?: undefined | string,
+
+  /** An optional title. */
+  title?: undefined | string,
+
+  /** An optional tooltip to be displayed on an info icon next to the title. */
+  titleTooltip?: undefined | string,
+
+  /** Whether to display the optional observation on title. */
+  titleOptional?: undefined | boolean,
+
+  /** Whether the checkbox is checked by default. Passed down to Checkbox component. */
+  defaultChecked?: undefined | boolean,
+
+  /** Whether the checkbox is checked. Passed down to Checkbox component. */
+  checked?: undefined | boolean,
+
+  /** Whether the checkbox is disabled. Passed down to Checkbox component. */
+  disabled?: undefined | boolean,
+};
+
+/**
+ * A full-fledged Checkbox field, with optional label, title, icon etc.
+ */
+export const CheckboxField = (props: CheckboxFieldProps) => {
+  const {
+    unstyled = false,
+    label = '',
+    sublabel,
+    title,
+    titleOptional,
+    titleTooltip,
+    className,
+  } = props;
+
+  return (
+    <div className={cx(
+      'bk',
+      { [cl['bk-checkbox-field']]: !unstyled },
+      className,
+    )}>
+      {title && (
+        <CheckboxFieldTitle
+          titleOptional={titleOptional}
+          titleTooltip={titleTooltip}
+        >
+          {title}
+        </CheckboxFieldTitle>
+      )}
+      {/* biome ignore lint/a11y/noLabelWithoutControl: the `<Checkbox>` will resolve to an `<input>` */}
+      <label className={cl['bk-checkbox-field__label']}>
+        <Checkbox
+          checked={props.checked}
+          defaultChecked={props.defaultChecked}
+          disabled={props.disabled}
+        />
+        <span className={cl['bk-checkbox-field__label__content']}>
+          {label}
+        </span>
+      </label>
+      {sublabel && (
+        <div className={cl['bk-checkbox-field__sublabel']}>{sublabel}</div>
+      )}
+    </div>
+  );
+};

package/src/components/forms/fields/CheckboxGroup/CheckboxGroup.module.scss

@@ -0,0 +1,22 @@
+/* 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-checkbox-group {
+    @include bk.component-base(bk-checkbox-group);
+    display: flex;
+
+    &.bk-checkbox-group--vertical {
+      flex-direction: column;
+      row-gap: 20px;
+    }
+  
+    &.bk-checkbox-group--horizontal {
+      flex-direction: row;
+      column-gap: bk.$spacing-7;
+    }
+  }
+}

package/src/components/forms/fields/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,36 @@
+/* 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 { CheckboxGroup } from './CheckboxGroup.tsx';
+
+
+type CheckboxGroupArgs = React.ComponentProps<typeof CheckboxGroup>;
+type Story = StoryObj<CheckboxGroupArgs>;
+
+export default {
+  component: CheckboxGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  render: (args) => <CheckboxGroup {...args}>
+    <CheckboxGroup.CheckboxField label='Label'/>
+    <CheckboxGroup.CheckboxField label='Label'/>
+    <CheckboxGroup.CheckboxField label='Label'/>
+  </CheckboxGroup>,
+} satisfies Meta<CheckboxGroupArgs>;
+
+export const CheckboxGroupVertical: Story = {};
+
+export const CheckboxGroupHorizontal: Story = {
+  args: {
+    direction: 'horizontal',
+  },
+};

package/src/components/forms/fields/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,37 @@
+/* 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 } from '../../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import cl from './CheckboxGroup.module.scss';
+
+import { CheckboxField } from '../CheckboxField/CheckboxField.tsx';
+
+
+export { cl as CheckboxGroupClassNames };
+
+export type CheckboxGroupProps = React.PropsWithChildren<{
+  direction?: undefined | "vertical" | "horizontal";
+}>;
+
+/**
+ * Checkbox group component, wrapping multiple CheckboxField components vertically or horizontally.
+ */
+export const CheckboxGroup = Object.assign(
+  (props: CheckboxGroupProps) => {
+    const { children, direction = 'vertical' } = props;
+    return (
+      <div className={cx(
+        'bk',
+        cl['bk-checkbox-group'],
+        { [cl['bk-checkbox-group--horizontal']]: direction === 'horizontal' },
+        { [cl['bk-checkbox-group--vertical']]: direction === 'vertical' },
+      )}>
+        {children}
+      </div>
+    );
+  },
+  { CheckboxField },
+);

package/src/components/forms/fields/InputField/InputField.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-input-field {
+    @include bk.component-base(bk-input-field);
+    
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    
+    .bk-input-field__label {
+      @include bk.font(bk.$font-family-body, bk.$font-weight-semibold);
+      cursor: default;
+    }
+    
+    .bk-input-field__control {
+      --empty: ; // Prevent empty class from being removed
+    }
+  }
+}

package/src/components/forms/fields/InputField/InputField.stories.tsx

@@ -0,0 +1,57 @@
+/* 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 { delay } from '../../../../util/time.ts';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, fireEvent, within } from '@storybook/test';
+import * as React from 'react';
+
+import { Form } from '../../context/Form/Form.tsx';
+
+import { InputField } from './InputField.tsx';
+
+
+type InputArgs = React.ComponentProps<typeof InputField>;
+type Story = StoryObj<InputArgs>;
+
+export default {
+  component: InputField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    label: 'Test',
+    placeholder: 'Example',
+  },
+  decorators: [
+    Story => <Form><Story/></Form>,
+  ],
+  render: (args) => <InputField {...args}/>,
+} satisfies Meta<InputArgs>;
+
+
+export const Standard: Story = {
+};
+
+export const InvalidInput: Story = {
+  args: {
+    required: true,
+    pattern: '\d+',
+    placeholder: 'Invalid input',
+    className: 'invalid',
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText('Invalid input');
+    await delay(100);
+    await userEvent.type(input, 'invalid');
+    await delay(100);
+    await userEvent.keyboard('{Enter}');
+    await fireEvent.submit(input.closest('form')!);
+  },  
+};

package/src/components/forms/fields/InputField/InputField.tsx

@@ -0,0 +1,72 @@
+/* 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 { useFormStatus } from 'react-dom';
+
+import { useFormContext } from '../../context/Form/Form.tsx';
+import { Input } from '../../controls/Input/Input.tsx';
+
+import cl from './InputField.module.scss';
+
+
+export { cl as InputFieldClassNames };
+
+export type InputFieldProps = ComponentProps<'input'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Label for the input. */
+  label?: undefined | React.ReactNode,
+  
+  /** Props for the `<label>` element, if `label` is defined. */
+  labelProps?: undefined | ComponentProps<'label'>,
+  
+  /** Props for the wrapper element. */
+  wrapperProps?: undefined | ComponentProps<'div'>,
+};
+/**
+ * Input field.
+ */
+export const InputField = (props: InputFieldProps) => {
+  const {
+    unstyled = false,
+    label,
+    labelProps = {},
+    wrapperProps = {},
+    ...inputProps
+  } = props;
+  
+  const controlId = React.useId();
+  const formContext = useFormContext();
+  //const formStatus = useFormStatus();
+  
+  return (
+    <div
+      {...wrapperProps}
+      className={cx(
+        'bk',
+        { [cl['bk-input-field']]: !unstyled },
+        wrapperProps.className,
+      )}
+    >
+      {label &&
+        <label
+          htmlFor={controlId}
+          {...labelProps}
+          className={cx(cl['bk-input-field__label'], labelProps.className)}
+        >
+          {label}
+        </label>
+      }
+      <Input
+        {...inputProps}
+        id={controlId}
+        form={formContext.formId}
+        className={cx(cl['bk-input-field__control'], inputProps.className)}
+      />
+    </div>
+  );
+};

package/src/components/graphics/Icon/Icon.module.scss

@@ -0,0 +1,42 @@
+/* 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-icon {
+    @include bk.component-base(bk-icon);
+    
+    --bk-icon-accent-color: color-mix(in sRGB, currentColor 30%, transparent);
+    --bk-icon-size: 1em; /* TEMP: keep old size for now, until components are properly migrated */
+    
+    box-sizing: content-box; /* Use content-box so that we can set a padding on an icon without it shrinking the width */
+    
+    vertical-align: -25%; /* In inline flow, position the icon on the baseline, shifted downwards by 20% */
+    align-self: center;
+    flex: none; /* Prevent icons from shrinking or growing in flexbox */
+    
+    display: inline-flex;
+    width: var(--bk-icon-size);
+    aspect-ratio: 1 / 1.2;
+    fill: currentColor; /* Use the current font color by default */
+    
+    /* By default, use a stroke width of `0`. Most icons rely on `fill` instead, because apps like IcoMoon rely on
+    `fill` to generate fonts from SVG. If we do have an icon with stroke then we at least want to set the color to
+    current. */
+    stroke: currentColor;
+    stroke-width: 0;
+    
+    &.bk-icon--background-circle {
+      align-items: center;
+      justify-content: center;
+      
+      background: var(--bk-icon-accent-color);
+      padding: 12px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      overflow: visible; /* Prevent the border-radius from cutting off part of the icon */
+    }
+  }
+}

package/src/components/graphics/Icon/Icon.stories.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 * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Icon } from './Icon.tsx';
+
+
+type IconArgs = React.ComponentProps<typeof Icon>;
+type Story = StoryObj<typeof Icon>;
+
+export default {
+  component: Icon,
+  parameters: {
+    layout: 'centered',
+    //design: { type: 'figma', url: '' },
+  },
+  decorators: [
+    Story => (
+      <div style={{ fontSize: '5rem' }}>
+        <Story/>
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    icon: 'dashboard',
+  },
+  render: args => (
+    <Icon {...args}/>
+  ),
+} satisfies Meta<IconArgs>;
+
+
+export const Standard: Story = {
+};
+
+export const Inline: Story = {
+  render: args => (
+    <article
+      style={{
+        maxWidth: '50rem',
+        fontSize: '1.6rem',
+        textAlign: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1lh',
+      }}
+    >
+      <p style={{ color: 'light-dark(#645EC3, #BDB9F3)' }}>
+        Icons <Icon {...args} icon="assessment"/> automatically adjust to the font size and color of the text.
+      </p>
+      <p>
+        Another icon <Icon {...args} icon="integrations" style={{ fontSize: '2em' }}/>, with a large size to
+        demonstrate vertical alignment within the text.
+      </p>
+      <p style={{ fontSize: '1em', display: 'flex', alignItems: 'center', gap: '0.5ch', textAlign: 'start' }}>
+        <Icon {...args} icon="info"/>
+        Use flex layout instead of inline if the icon should be aligned to anything other than baseline.
+      </p>
+    </article>
+  ),
+};

package/src/components/graphics/Icon/Icon.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 { icons } from '../../../assets/icons/_icons.ts';
+import cl from './Icon.module.scss';
+
+
+export type IconName = keyof typeof icons;
+export { cl as IconClassNames };
+
+export type Decoration = (
+  | { type: 'background-circle' }
+);
+
+export type IconProps = React.PropsWithChildren<ComponentProps<'svg'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: boolean,
+  
+  /** The name of the icon to display */
+  icon: IconName,
+  
+  /** The color to apply to the icon */
+  color?: undefined | string,
+  
+  /** Visual decoration to apply */
+  decoration?: undefined | Decoration,
+}>;
+export const Icon = ({ unstyled, icon, color = 'currentColor', decoration, ...props }: IconProps) => {
+  const symbolId = `#baklava-icon-${icon}`;
+  
+  return (
+    <svg
+      role="img"
+      aria-label={`${icon} icon`}
+      aria-hidden // https://stackoverflow.com/questions/61048356/why-do-we-use-aria-hidden-with-icons
+      {...props}
+      className={cx({
+        bk: true,
+        [cl['bk-icon']]: !unstyled,
+        [cl['bk-icon--background-circle']]: decoration?.type === 'background-circle',
+      }, props.className)}
+    >
+      <use href={symbolId} fill={color}/>
+    </svg>
+  );
+};