@fortanix/baklava 1.0.0-beta-20241114

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

@@ -0,0 +1,76 @@
+/* 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-placeholder-empty {
+    @include bk.component-base(bk-placeholder-empty);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+  
+    &.bk-placeholder-empty--large {
+      gap: bk.$spacing-6;
+      
+      .bk-placeholder-empty__icon {
+        --bk-icon-size: 6rem;
+        max-height: 5rem;
+      }
+      
+      .bk-placeholder-empty__content {
+        gap: bk.$spacing-4;
+      }
+      
+      .bk-placeholder-empty__content__title {
+        font-size: 20px;
+        line-height: 20px;
+      }
+    }
+    
+    &.bk-placeholder-empty--small {
+      gap: bk.$spacing-4;
+            
+      .bk-placeholder-empty__icon {
+        --bk-icon-size: 4rem;
+        max-height: 3rem;
+      }
+      
+      .bk-placeholder-empty__content {
+        gap: bk.$spacing-2;
+      }
+      
+      .bk-placeholder-empty__content__title {
+        font-size: 14px;
+        line-height: 14px;
+      }
+    }
+  
+    .bk-placeholder-empty__icon {
+      color: bk.$theme-empty-state-stoke-default;
+    }
+    
+    .bk-placeholder-empty__content {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+    }
+    
+    .bk-placeholder-empty__content__title {
+      color: bk.$theme-text-heading-default;
+      font-family: bk.$font-family-display;
+    }
+    
+    .bk-placeholder-empty__content__subtitle {
+      max-width: 50%;
+      text-align: center;
+    }
+    
+    .bk-placeholder-empty__content__action {
+      display: flex;
+      align-items: center;
+      gap: bk.$spacing-4;
+    }
+  }
+} 

package/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.stories.tsx

@@ -0,0 +1,101 @@
+/* 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 { PlaceholderEmpty, PlaceholderEmptyAction } from './PlaceholderEmpty.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Link } from '../../actions/Link/Link.tsx';
+
+
+type PlaceholderEmptyArgs = React.ComponentProps<typeof PlaceholderEmpty>;
+type Story = StoryObj<PlaceholderEmptyArgs>;
+
+export default {
+  component: PlaceholderEmpty,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    title: 'No data to display',
+  },
+  render: (args) => <PlaceholderEmpty {...args}/>,
+} satisfies Meta<PlaceholderEmptyArgs>;
+
+const actions = (
+  <PlaceholderEmptyAction>
+    <Button variant="secondary">Button</Button>
+    <Button variant="primary">Button</Button>
+  </PlaceholderEmptyAction>
+);
+
+const subtitle = (
+  <>
+    In case there is a secondary text to be added withIn case 
+    there is a secondary text to be added with <Link>Link</Link>
+  </>
+);
+
+export const Standard: Story = {
+  name: 'Standard',
+  args: {},
+};
+
+export const StandardWithSubtitle: Story = {
+  name: 'Standard with subtitle',
+  args: {
+    subtitle,
+  },
+};
+
+export const StandardWithButtons: Story = {
+  name: 'Standard with buttons',
+  args: {
+    actions,
+  },
+};
+
+export const StandardWithSubtitleAndButtons: Story = {
+  name: 'Standard with subtitle and buttons',
+  args: {
+    subtitle,
+    actions,
+  },
+};
+
+export const Small: Story = {
+  name: 'Small',
+  args: {
+    size: 'small',
+  },
+};
+
+export const SmallWithFolderIcon: Story = {
+  name: 'Small with folder icon',
+  args: {
+    size: 'small',
+    icon: 'folder',
+  },
+};
+
+export const SmallWithFileIcon: Story = {
+  name: 'Small with file icon',
+  args: {
+    size: 'small',
+    icon: 'file',
+  },
+};
+
+export const SmallWithFileErrorIcon: Story = {
+  name: 'Small with file error icon',
+  args: {
+    size: 'small',
+    icon: 'file-error',
+  },
+};

package/src/components/graphics/PlaceholderEmpty/PlaceholderEmpty.tsx

@@ -0,0 +1,91 @@
+
+/* 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 { Icon, type IconName } from '../Icon/Icon.tsx';
+
+import cl from './PlaceholderEmpty.module.scss';
+
+export { cl as PlaceholderEmptyClassNames };
+
+export type PlaceholderEmptySize = 'large' | 'small';
+
+export type PlaceholderEmptyProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** A size of this component. Defaults to "large". */
+  size?: undefined | PlaceholderEmptySize,
+
+  /** An icon type of this component. Defaults to "graph". */
+  icon?: undefined | IconName,
+  
+  /** A custom icon of this component. */
+  customIcon?: undefined | React.ReactNode,
+
+  /** A title of this component. Mandatory. */
+  title: string,
+  
+  /** A sub message to be displayed next to the title. */
+  subtitle?: undefined | string | React.ReactNode,
+  
+  /** Any additional actions to be shown in this component, such as a button. */
+  actions?: undefined | React.ReactNode,
+}>;
+/**
+ * A way to display the absence of data.
+ */
+export const PlaceholderEmpty = (props: PlaceholderEmptyProps) => {
+  const {
+    unstyled = false,
+    size = 'large',
+    icon = 'graph',
+    customIcon = null,
+    title = '',
+    subtitle = '',
+    actions = null,
+    children,
+    ...propsRest
+  } = props;
+  
+  return (
+    <div
+      {...propsRest}
+      className={cx({
+        bk: true,
+        [cl['bk-placeholder-empty']]: !unstyled,
+        [cl['bk-placeholder-empty--large']]: size === 'large',
+        [cl['bk-placeholder-empty--small']]: size === 'small',
+      }, propsRest.className)}
+    >
+      {customIcon || <Icon className={cl['bk-placeholder-empty__icon']} icon={icon} />}
+      
+      <div className={cl['bk-placeholder-empty__content']}>
+        {title && (
+          <span className={cl['bk-placeholder-empty__content__title']}>{title}</span>
+        )}
+        {subtitle && (
+          <span className={cl['bk-placeholder-empty__content__subtitle']}>{subtitle}</span>
+        )}
+        {actions}
+      </div>
+    </div>
+  );
+};
+
+export type PlaceholderEmptyActionProps = React.PropsWithChildren<ComponentProps<'div'>>;
+/**
+ * A wrapper component, intended to easily add some styling to children's `<Button/>`'s. 
+ * UX expects that such buttons are `<Button variant="tertiary"/>`.
+ */
+export const PlaceholderEmptyAction = (props: PlaceholderEmptyActionProps) => {
+  return (
+    <div className={cl['bk-placeholder-empty__content__action']}>
+      {props.children}
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+/* 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-progress-bar {
+    @include bk.component-base(bk-progress-bar);
+
+    appearance: none; // undo default browser appearance
+
+    background: bk.$theme-progress-bar-track;
+    border: none;
+    border-radius: bk.$border-radius-m;
+    width: 100%;
+    height: 10px; // sizing not present on bk variables
+  }
+  // for now <progress> needs to be styled with browser-prefixes on Blink and Webkit
+  .bk-progress-bar::-moz-progress-bar {
+    background: bk.$theme-progress-bar-fill;
+    border-radius: bk.$border-radius-m;
+  }
+  .bk-progress-bar::-webkit-progress-bar {
+    background: bk.$theme-progress-bar-track;
+    border-radius: bk.$border-radius-m;
+  }
+  .bk-progress-bar::-webkit-progress-value {
+    background: bk.$theme-progress-bar-fill;
+    border-radius: bk.$border-radius-m;
+  }
+
+  .bk-progress-bar__label {
+    font-size: bk.$font-size-m;
+    font-weight: bk.$font-weight-semibold;
+    margin-bottom: bk.$sizing-2;
+  }
+
+  .bk-progress-bar__hint-text {
+    font-size: bk.$font-size-s;
+    margin-top: -1 * bk.$sizing-1;
+  }
+}

package/src/components/graphics/ProgressBar/ProgressBar.stories.tsx

@@ -0,0 +1,70 @@
+/* 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 { ProgressBar } from './ProgressBar.tsx';
+
+
+type ProgressBarArgs = React.ComponentProps<typeof ProgressBar>;
+type Story = StoryObj<ProgressBarArgs>;
+
+export default {
+  component: ProgressBar,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {},
+  render: (args) => <ProgressBar {...args}/>,
+} satisfies Meta<ProgressBarArgs>;
+
+
+export const ProgressBarWithOptionalAttributes = {
+  name: 'Progress Bar with optional attributes',
+  args: {
+    progress: 50,
+    label: 'Label',
+    hintText: 'Hint text',
+  }
+}
+
+export const ProgressBar0: Story = {
+  name: 'Progress Bar on 0%',
+  args: {
+    progress: 0,
+  }
+};
+
+export const ProgressBar25: Story = {
+  name: 'Progress Bar on 25%',
+  args: {
+    progress: 25,
+  }
+};
+
+export const ProgressBar50: Story = {
+  name: 'Progress Bar on 50%',
+  args: {
+    progress: 50,
+  }
+};
+
+export const ProgressBar75: Story = {
+  name: 'Progress Bar on 75%',
+  args: {
+    progress: 75,
+  }
+};
+
+export const ProgressBar100: Story = {
+  name: 'Progress Bar on 100%',
+  args: {
+    progress: 100,
+  }
+};

package/src/components/graphics/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,58 @@
+/* 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 './ProgressBar.module.scss';
+
+
+export { cl as ProgressBarClassNames };
+
+export type ProgressBarProps = React.PropsWithChildren<ComponentProps<'progress'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** The progress it should be displaying as in percent, ranging from 0 to 100. */
+  progress: number,
+
+  /** An optional label, displayed as the progress bar title. */
+  label?: undefined | string,
+
+  /** An optional hint text, displayed after the progress bar. */
+  hintText?: undefined | string,
+}>;
+/**
+ * A way to display progress to complete a task or the time remaining.
+ */
+export const ProgressBar = (props: ProgressBarProps) => {
+  const {
+    unstyled = false,
+    progress = 0,
+    label = undefined,
+    hintText = undefined,
+    ...propsRest
+  } = props;
+  return (
+    <div>
+      {label && (
+        <div className={cl['bk-progress-bar__label']}>{label}</div>
+      )}
+      <progress
+        {...propsRest}
+        className={cx({
+          bk: true,
+          [cl['bk-progress-bar']]: !unstyled,
+        }, propsRest.className)}
+        max="100"
+        value={progress}
+      >
+        {progress}%
+      </progress>
+      {hintText && (
+        <div className={cl['bk-progress-bar__hint-text']}>{hintText}</div>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,61 @@
+/* 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 {
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  
+  .bk-spinner {
+    @include bk.component-base(bk-spinner);
+
+    --bk-spinner-large-size: 88px;
+    --bk-spinner-large-thickness: 6px;
+
+    --bk-spinner-medium-size: 55px;
+    --bk-spinner-medium-thickness: 4px;
+
+    --bk-spinner-small-size: 18px;
+    --bk-spinner-small-thickness: 2px;
+
+    --antialias: 1px;
+    --progress: 0.6turn;
+    
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: conic-gradient(bk.$theme-spinner-fill var(--progress), bk.$theme-spinner-track var(--progress));
+    
+    // Note: for spinners the animation should be included even if `prefers-reduced-motion` is set
+    animation: spin 1s linear infinite;
+
+    &.bk-spinner--large {
+      width: var(--bk-spinner-large-size);
+      --mask-radius: calc(70% - calc(var(--bk-spinner-large-thickness)*1.5) / 100 * 70);
+      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
+    }
+
+    &.bk-spinner--medium {
+      width: var(--bk-spinner-medium-size);
+      --mask-radius: calc(70% - calc(var(--bk-spinner-medium-thickness)*1.5) / 100 * 70);
+      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
+    }
+
+    &.bk-spinner--small {
+      width: var(--bk-spinner-small-size);
+      --mask-radius: calc(70% - calc(var(--bk-spinner-small-thickness)*2) / 100 * 70);
+      mask-image: radial-gradient(transparent 0 var(--mask-radius), black calc(var(--mask-radius) + var(--antialias)));
+    }
+    
+    &.bk-spinner--inline {
+      display: inline-block;
+    }
+  }
+}

package/src/components/graphics/Spinner/Spinner.stories.tsx

@@ -0,0 +1,56 @@
+/* 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 { Spinner } from './Spinner.tsx';
+
+
+type SpinnerArgs = React.ComponentProps<typeof Spinner>;
+type Story = StoryObj<typeof Spinner>;
+
+export default {
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+    //design: { type: 'figma', url: '' },
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+  render: args => (
+    <Spinner {...args}/>
+  ),
+} satisfies Meta<SpinnerArgs>;
+
+
+export const SpinnerSmall: Story = {
+  name: 'Spinner Small',
+  args: {
+    size: 'small',
+  },
+};
+
+export const SpinnerMedium: Story = {
+  name: 'Spinner Medium',
+  args: {
+    size: 'medium',
+  },
+};
+
+export const SpinnerLarge: Story = {
+  name: 'Spinner Large',
+  args: {
+    size: 'large',
+  },
+};
+
+export const SpinnerInline: Story = {
+  name: 'Spinner Inline',
+  render: () => (
+    <p>Lorem ipsum sit dolor amet...<Spinner inline={true}/></p>
+  ),
+}

package/src/components/graphics/Spinner/Spinner.tsx

@@ -0,0 +1,41 @@
+/* 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 './Spinner.module.scss';
+
+
+export type SpinnerName = keyof typeof icons;
+export { cl as SpinnerClassNames };
+
+export type SpinnerProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /**
+   * If the spinner should be inline. Optional parameter. Defaults to false.
+   */
+  inline?: undefined | boolean,
+  /**
+   * The size of spinner. Optional parameter. Can be "small", "medium" or "large". Defaults to "small".
+   */
+  size?: undefined | 'large' | 'medium' | 'small',
+}>;
+export const Spinner = ({
+  inline,
+  size = 'small',
+  ...props
+}: SpinnerProps) => {
+  return (
+    <div
+      {...props}
+      className={cx({
+        bk: true,
+        [cl['bk-spinner']]: true,
+        [cl[`bk-spinner--${size}`]]: true,
+        [cl['bk-spinner--inline']]: inline,
+      }, props.className)}
+    />
+  );
+};

package/src/components/lists/PropertyList/PropertyList.module.scss

@@ -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/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-property-list {
+    @include bk.component-base(bk-property-list);
+    
+    margin: bk.$sizing-0;
+    display: flex;
+    flex-flow: row wrap;
+    gap: bk.$sizing-xl bk.$sizing-l;
+    
+    .bk-property-list__property {
+      > :is(dt, dd) {
+        font-size: bk.$font-size-m;
+      }
+      dt {
+        margin-top: bk.$sizing-4;
+        margin-bottom: bk.$sizing-2;
+        @include bk.font($family: bk.$font-family-display, $weight: bk.$font-weight-semibold);
+        
+        //color: bk.$color-neutral-3;
+        //line-height: bk.$line-height-6;
+      }
+      dd {
+        margin-left: bk.$sizing-0;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/* 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 { PropertyList } from './PropertyList.tsx';
+
+
+type PropertyListArgs = React.ComponentProps<typeof PropertyList>;
+type Story = StoryObj<typeof PropertyList>;
+
+export default {
+  component: PropertyList,
+  parameters: {
+    layout: 'padded',
+    //design: { type: 'figma', url: '' },
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    unstyled: false,
+  },
+  render: (args) => <PropertyList {...args}/>,
+} satisfies Meta<PropertyListArgs>;
+
+
+export const Standard: Story = {
+  args: {
+    children: (
+      <>
+        <PropertyList.Property
+          label="Key 1"
+          value="Value 1"
+        />
+        <PropertyList.Property
+          label="Key 2"
+          value="Value 2"
+        />
+      </>
+    ),
+  },
+};