@fortanix/baklava 1.0.0-beta-20241114

package/src/components/containers/Banner/Banner.stories.tsx

@@ -0,0 +1,198 @@
+/* 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 { Banner, BannerAction } from './Banner.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+
+
+type BannerArgs = React.ComponentProps<typeof Banner>;
+type Story = StoryObj<BannerArgs>;
+
+export default {
+  component: Banner,
+  parameters: {
+    layout: 'padded', // centered, padded, or fullscreen
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  render: (args) => <Banner {...args}/>,
+} satisfies Meta<BannerArgs>;
+
+
+export const BannerInformational: Story = {
+  name: 'Informational',
+  args: {
+    title: 'Banner title',
+    closeButton: true,
+    variant: 'informational',
+  }
+};
+
+export const BannerInformationalWithNoCloseButton: Story = {
+  name: 'Informational with no close button',
+  args: {
+    title: 'Banner title',
+    closeButton: false,
+    variant: 'informational',
+  }
+};
+
+export const BannerInformationalWithSubtitle: Story = {
+  name: 'Informational with subtitle',
+  args: {
+    title: 'Banner title',
+    subtitle: 'Subtitle',
+    closeButton: true,
+    variant: 'informational',
+  }
+};
+
+export const BannerInformationalWithButton: Story = {
+  name: 'Informational with button',
+  args: {
+    title: 'Banner tasdasdadsadsitle',
+    subtitle: 'Subtitle text gasdasd',
+    closeButton: true,
+    variant: 'informational',
+    actions: (
+      <BannerAction>
+        <Button variant="tertiary" onClick={() => alert('clicked')}>Button</Button>
+      </BannerAction>
+    ),
+  }
+};
+
+export const BannerSuccess: Story = {
+  name: 'Success',
+  args: {
+    title: 'Banner title',
+    closeButton: true,
+    variant: 'success',
+  }
+};
+
+export const BannerSuccessWithNoCloseButton: Story = {
+  name: 'Success with no close button',
+  args: {
+    title: 'Banner title',
+    closeButton: false,
+    variant: 'success',
+  }
+};
+
+export const BannerSuccessWithSubtitle: Story = {
+  name: 'Success with subtitle',
+  args: {
+    title: 'Banner title',
+    subtitle: 'Subtitle',
+    closeButton: true,
+    variant: 'success',
+  }
+};
+
+export const BannerSuccessWithButton: Story = {
+  name: 'Success with button',
+  args: {
+    title: 'Banner tasdasdadsadsitle',
+    subtitle: 'Subtitle text gasdasd',
+    closeButton: true,
+    variant: 'success',
+    actions: (
+      <BannerAction>
+        <Button variant="tertiary" onClick={() => alert('clicked')}>Button</Button>
+      </BannerAction>
+    ),
+  }
+};
+
+export const BannerWarning: Story = {
+  name: 'Warning',
+  args: {
+    title: 'Banner title',
+    closeButton: true,
+    variant: 'warning',
+  }
+};
+
+export const BannerWarningWithNoCloseButton: Story = {
+  name: 'Warning with no close button',
+  args: {
+    title: 'Banner title',
+    closeButton: false,
+    variant: 'warning',
+  }
+};
+
+export const BannerWarningWithSubtitle: Story = {
+  name: 'Warning with subtitle',
+  args: {
+    title: 'Banner title',
+    subtitle: 'Subtitle',
+    closeButton: true,
+    variant: 'warning',
+  }
+};
+
+export const BannerWarningWithButton: Story = {
+  name: 'Warning with button',
+  args: {
+    title: 'Banner tasdasdadsadsitle',
+    subtitle: 'Subtitle text gasdasd',
+    closeButton: true,
+    variant: 'warning',
+    actions: (
+      <BannerAction>
+        <Button variant="tertiary" onClick={() => alert('clicked')}>Button</Button>
+      </BannerAction>
+    ),
+  }
+};
+
+export const BannerAlert: Story = {
+  name: 'Alert',
+  args: {
+    title: 'Banner title',
+    closeButton: true,
+    variant: 'alert',
+  }
+};
+
+export const BannerAlertWithNoCloseButton: Story = {
+  name: 'Alert with no close button',
+  args: {
+    title: 'Banner title',
+    closeButton: false,
+    variant: 'alert',
+  }
+};
+
+export const BannerAlertWithSubtitle: Story = {
+  name: 'Alert with subtitle',
+  args: {
+    title: 'Banner title',
+    subtitle: 'Subtitle',
+    closeButton: true,
+    variant: 'alert',
+  }
+};
+
+export const BannerAlertWithButton: Story = {
+  name: 'Alert with button',
+  args: {
+    title: 'Banner tasdasdadsadsitle',
+    subtitle: 'Subtitle text gasdasd',
+    closeButton: true,
+    variant: 'alert',
+    actions: (
+      <BannerAction>
+        <Button variant="tertiary" onClick={() => alert('clicked')}>Button</Button>
+      </BannerAction>
+    ),
+  }
+};

package/src/components/containers/Banner/Banner.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 './Banner.module.scss';
+import { Icon } from '../../graphics/Icon/Icon.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+
+
+export { cl as BannerClassNames };
+
+type BannerIconProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  variant: 'informational' | 'success' | 'warning' | 'alert',
+}>;
+const BannerIcon = (props: BannerIconProps) => {
+  const { variant } = props;
+  let icon = variant;
+  if (icon === 'informational') {
+    icon = 'warning';
+  }
+  return (<Icon icon={icon} />);
+};
+
+export type BannerProps = React.PropsWithChildren<ComponentProps<'div'> & {
+  /**
+   * Whether the component should include the default styling. Defaults to false.
+   */
+  unstyled?: undefined | boolean,
+
+  /**
+   * Which variant to display, which changes the color and left icon. Defaults to "informational".
+   */
+  variant?: undefined | 'informational' | 'success' | 'warning' | 'alert',
+
+  /**
+   * The message to displayed on the banner. Mandatory.
+   */
+  title: string,
+
+  /**
+   * A sub message to be displayed next to the title. Optional.
+   */
+  subtitle?: undefined | string,
+  
+  /**
+   * Whether the banner can be closed. Optional. Defaults to false.
+   */
+  closeButton?: boolean,
+  
+  /**
+   * Any additional actions to be shown in the banner, such as a button.
+   */
+  actions?: undefined | React.ReactNode,
+}>;
+
+/**
+ * A banner component, similar to a toast.
+ */
+export const Banner = (props: BannerProps) => {
+  const {
+    unstyled = false,
+    variant = 'informational',
+    title = '',
+    subtitle = '',
+    closeButton = false,
+    actions = null,
+    ...propsRest
+  } = props;
+
+  const [isClosed, setIsClosed] = React.useState(false);
+
+  if (isClosed) {
+    return null;
+  }
+
+  return (
+    <div
+      role="presentation"
+      {...propsRest}
+      className={cx({
+        bk: true,
+        [cl['bk-banner']]: !unstyled,
+        [cl[`bk-banner--${variant}`]]: variant,
+      }, propsRest.className)}
+    >
+      <span className={cl['bk-banner__icon']}>
+        <BannerIcon variant={variant} />
+      </span>
+      <strong className={cl['bk-banner__title']}>{title}</strong>
+      {subtitle && (
+        <span className={cl['bk-banner__subtitle']}>{subtitle}</span>
+      )}
+      
+      {actions}
+      {closeButton && (
+        <Button
+          className={cl['bk-banner__close-button']}
+          onClick={() => setIsClosed(true)}
+        >
+          <Icon icon="cross" />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export type BannerActionProps = 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 BannerAction = (props: BannerActionProps) => {
+  return (
+    <div className={cl['bk-banner__action']}>
+      {props.children}
+    </div>
+  );
+};

package/src/components/containers/Card/Card.module.scss

@@ -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/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@mixin bk-card($name: bk-card) {
+  --bk-card-background-color: #{bk.$theme-card-background-default};
+  --bk-card-border-color: #{bk.$theme-card-border-default};
+  
+  overflow: hidden;
+  
+  min-height: bk.$spacing-16;
+  padding: bk.$spacing-4;
+  
+  background: var(--bk-card-background-color);
+  border: bk.$size-1 solid var(--bk-card-border-color);
+  border-radius: bk.$radius-m;
+  
+  .#{$name}__heading {
+    margin-bottom: bk.$spacing-5;
+    text-wrap: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+@layer baklava.components {
+  .bk-card {
+    @include bk.component-base(bk-card);
+    @include bk-card;
+  }
+}

package/src/components/containers/Card/Card.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 { Alert } from '../Alert/Alert.tsx';
+
+import { Card } from './Card.tsx';
+
+
+type CardArgs = React.ComponentProps<typeof Card>;
+type Story = StoryObj<typeof Card>;
+
+const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+  dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+
+export default {
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    design: { type: 'figma', url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FnOF5w9LfPiJabQD5yPzCEp%2F2024-Design-System-UX%3Fnode-id%3D41%253A4484%26t%3DaJEqUzt6fUeABwmK-1' },
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    unstyled: false,
+    children: <><Card.Heading>Card</Card.Heading>{lorem}</>,
+  },
+  render: (args) => <Card {...args}/>,
+} satisfies Meta<CardArgs>;
+
+
+export const Standard: Story = {
+  decorators: [
+    Story => <div style={{ width: '30vw' }}><Story/></div>
+  ],
+};
+
+/** Multiple cards in a grid. */
+export const Multiple: Story = {
+  render: (args) => (
+    <div style={{
+      display: 'grid',
+      gap: '1.2rem',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(min(30vw, 100%), 1fr))',
+    }}>
+      <Card {...args}><Card.Heading>Card 1</Card.Heading>Card content.</Card>
+      <Card {...args}><Card.Heading>Card 2</Card.Heading>{lorem}</Card>
+      <Card {...args}><Card.Heading>Card 3</Card.Heading>Card content.</Card>
+    </div>
+  ),
+  decorators: [
+    Story => (
+      <div style={{ width: '70vw', display: 'flex', flexFlow: 'column', gap: '1.2rem' }}>
+        <Alert kind="info">
+          Cards have no margin by default. Use a flex/grid container to space the cards.
+        </Alert>
+        <Story/>
+      </div>
+    ),
+  ],
+};

package/src/components/containers/Card/Card.tsx

@@ -0,0 +1,48 @@
+/* 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 { H5 } from '../../../typography/Heading/Heading.tsx';
+
+import cl from './Card.module.scss';
+
+
+export { cl as CardClassNames };
+
+
+export type CardHeadingProps = React.PropsWithChildren<ComponentProps<typeof H5>>;
+export const CardHeading = (props: CardHeadingProps) => {
+  return <H5 {...props} className={cx(cl['bk-card__heading'], props.className)}/>;
+};
+
+export type CardProps = React.PropsWithChildren<ComponentProps<'section'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * Card component, a container similar to a panel but smaller and usually used in a list or grid.
+ */
+export const Card = Object.assign(
+  (props: CardProps) => {
+    const { children, unstyled = false, ...propsRest } = props;
+    
+    return (
+      <section
+        {...propsRest}
+        className={cx(
+          'bk',
+          { [cl['bk-card']]: !unstyled },
+          propsRest.className,
+        )}
+      >
+        {children}
+      </section>
+    );
+  },
+  {
+    Heading: CardHeading,
+  },
+);

package/src/components/containers/Dialog/Dialog.module.scss

@@ -0,0 +1,166 @@
+/* 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;
+@use '../../containers/Panel/Panel.module.scss' as Panel;
+
+@layer baklava.components {
+  .bk-dialog {
+    @include bk.component-base(bk-dialog);
+    @include Panel.bk-panel;
+    
+    /* --bk-dialog-background-color: color-mix(in srgb, var(--bk-panel-background-color) 80%, transparent); */
+    --bk-dialog-background-color:  var(--bk-panel-background-color);
+    
+    --bk-dialog-inset: calc(var(--bk-sizing-3) + var(--bk-sizing-2));
+    
+    position: static;
+    
+    margin: auto;
+    padding: 0;
+    width: var(--bk-sizing-9);
+    max-width: calc(100% - 6px - 2em);
+    height: fit-content;
+    min-height: 60%;
+    max-height: calc(100% - 6px - 2em);
+    
+    box-shadow: 0 8px 10px 1px rgba(0 0 0 / 14%), 0 3px 14px 2px rgba(0 0 0 / 12%), 0 5px 5px -3px rgba(0 0 0 / 3%);
+    background-color: var(--bk-dialog-background-color);
+    border-radius: var(--bk-sizing-2);
+    
+    display: flex;
+    flex-direction: column;
+    
+    .bk-dialog__header {
+      position: sticky;
+      top: 0;
+      padding: var(--bk-sizing-2) var(--bk-dialog-inset);
+      
+      background: var(--bk-dialog-background-color);
+      
+      --header-shadow-size: calc(var(--bk-sizing-1) / 2);
+      box-shadow: 0 var(--header-shadow-size) 0 0 rgba(0 0 0 / 12%);
+      /* Clip everything except the bottom shadow (-1px for weird clipping behavior with scroll) */
+      clip-path: inset(-1px -1px calc(-1 * var(--header-shadow-size)) -1px);
+      
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      
+      h1 {
+        font-size: 1.4rem;
+        font-weight: 300;
+        text-transform: uppercase;
+      }
+      
+      :nth-child(1 of :global(.action)) {
+        margin-left: auto;
+      }
+      :global(.action) {
+        align-self: center;
+      }
+    }
+    
+    .bk-dialog__content {
+      flex: 1; /* Make sure we cover all available space */
+      padding: var(--bk-dialog-inset);
+      padding-top: var(--bk-sizing-3);
+    }
+    
+    .bk-dialog__actions {
+      padding: var(--bk-dialog-inset);
+      padding-top: 0;
+      
+      display: flex;
+      flex-direction: row;
+      gap: 0.8rem;
+    }
+    
+    
+    /* Variant: slide out */
+    --dialog-slide-out-inset: var(--bk-sizing-3);
+    &:is(.bk-dialog--slide-out-left, .bk-dialog--slide-out-right) {
+      position: fixed;
+      inset: 0;
+      margin: 0;
+      width: 60vw;
+      height: auto;
+      max-height: 100%;
+      
+      &.bk-dialog--slide-out-left {
+        right: auto;
+        transform-origin: center left;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &.bk-dialog--slide-out-right {
+        left: auto;
+        transform-origin: center right;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      
+      opacity: 1;
+      transform: scaleX(0);
+      &:modal {
+        transform: scaleX(1);
+        
+        @starting-style {
+          opacity: 1;
+          transform: scaleX(0);
+        }
+      }
+      
+      .bk-dialog__content {
+        overflow: auto;
+      }
+    }
+    
+    
+    /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#animating_dialogs */
+    
+    &:not([open]) {
+      opacity: 0;
+      scale: 0.98 0.98;
+      transition:
+        opacity 1ms ease-out,
+        scale 1ms ease-out,
+        overlay 1ms ease-out allow-discrete,
+        display 1ms ease-out allow-discrete;
+      transition-duration: 200ms; /* Exit transition duration */
+    }
+    
+    &:modal {
+      display: flex;
+      opacity: 1;
+      scale: 1 1;
+      transition-duration: 120ms; /* Enter transition duration */
+      transition-timing-function: ease-in;
+      
+      @starting-style {
+        opacity: 0;
+        scale: 1.05 1.05;
+      }
+    }
+  }
+  
+  /* Note: `::backdrop` cannot be nested/scoped (at least in Chrome v120) */
+  .bk-dialog::backdrop {
+    --transition-time: 200ms;
+    background-color: rgb(0 0 0 / 0%);
+    transition:
+      display var(--transition-time) allow-discrete,
+      overlay var(--transition-time) allow-discrete,
+      background-color var(--transition-time);
+  }
+  .bk-dialog:modal::backdrop {
+    background-color: rgb(0 0 0 / 20%);
+    backdrop-filter: blur(5px); /* Should be in px, not rem (blur effect should be constant) */
+  }
+  @starting-style {
+    .bk-dialog:modal::backdrop {
+      background-color: rgb(0 0 0 / 0%);
+    }
+  }
+}

package/src/components/containers/Dialog/Dialog.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 { OverflowTester } from '../../../util/storybook/OverflowTester.tsx';
+import { Button } from '../../actions/Button/Button.tsx';
+import { Dialog } from './Dialog.tsx';
+
+
+type ButtonArgs = React.ComponentProps<typeof Dialog>;
+type Story = StoryObj<ButtonArgs>;
+
+export default {
+  component: Dialog,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+} satisfies Meta<ButtonArgs>;
+
+
+export const Standard: Story = {
+  args: {
+    children: <>Dialog content</>,
+  },
+};