feat: add dialogs

lib/components/Attachment/AttachmentLink.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { AttachmentLink } from './AttachmentLink';
+
+const meta = {
+  title: 'Attachment/AttachmentLink',
+  component: AttachmentLink,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Document.pdf',
+  },
+} satisfies Meta<typeof AttachmentLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

lib/components/Attachment/AttachmentLink.tsx

@@ -0,0 +1,20 @@
+import { Icon, type IconName } from '../Icon';
+import styles from './attachmentLink.module.css';
+
+export interface AttachmentLinkProps {
+  /** Link url */
+  href: string;
+  /** Label (filename) */
+  label: string;
+  /** Icon */
+  icon?: IconName;
+}
+
+export const AttachmentLink = ({ icon = 'file', href, label }: AttachmentLinkProps) => {
+  return (
+    <a href={href} className={styles.link}>
+      <Icon name={icon} className={styles.icon} />
+      <span className={styles.label}>{label}</span>
+    </a>
+  );
+};

lib/components/Attachment/AttachmentList.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { AttachmentList } from './AttachmentList';
+
+const meta = {
+  title: 'Attachment/AttachmentList',
+  component: AttachmentList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      {
+        label: '1-0 Castro.pdf',
+      },
+      {
+        label: '2-0 Kornvig.pdf',
+      },
+      {
+        label: '3-0 Kartum.pdf',
+      },
+      {
+        label: '3-1 Zinkernagel.pdf',
+      },
+      {
+        label: '4-1 Castro.pdf',
+      },
+    ],
+  },
+} satisfies Meta<typeof AttachmentList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

lib/components/Attachment/AttachmentList.tsx

@@ -0,0 +1,26 @@
+import type { TypographySize } from '../Typography';
+import { AttachmentLink, type AttachmentLinkProps } from './AttachmentLink';
+import styles from './attachmentList.module.css';
+
+export interface AttachmentListProps {
+  items: AttachmentLinkProps[];
+  size?: TypographySize;
+}
+
+export const AttachmentList = ({ size, items }: AttachmentListProps) => {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <ul className={styles.list} data-size={size}>
+      {items.map((item, index) => {
+        return (
+          <li key={index} className={styles.item}>
+            <AttachmentLink {...item} key={'attachment' + index} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

lib/components/Attachment/attachmentLink.module.css

@@ -0,0 +1,20 @@
+.link {
+  display: inline-flex;
+  align-items: start;
+  column-gap: 0.25em;
+  color: var(--theme-base-default);
+}
+
+.link:hover {
+  color: var(--theme-base-hover);
+}
+
+.label {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.icon {
+  font-size: 1.5em;
+}

lib/components/Attachment/attachmentList.module.css

@@ -0,0 +1,12 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  padding: 0;
+  margin: 0;
+}

lib/components/Attachment/index.ts

@@ -0,0 +1,2 @@
+export * from './AttachmentLink';
+export * from './AttachmentList';

lib/components/Button/Button.stories.ts

@@ -37,6 +37,12 @@ export const Text: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,

lib/components/Button/Button.tsx

@@ -1,12 +1,12 @@
 import cx from 'classnames';
 import { Icon, type IconName } from '../Icon';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
-
 import styles from './button.module.css';
 
 export interface ButtonProps extends Partial<ButtonBaseProps> {
   icon?: IconName;
   reverse?: boolean;
+  loading?: boolean;
 }
 
 export const Button = ({
@@ -16,8 +16,26 @@ export const Button = ({
   icon,
   href,
   children,
+  loading,
   ...rest
 }: ButtonProps) => {
+  if (loading) {
+    return (
+      <ButtonBase
+        size={size}
+        selected={selected}
+        href={href}
+        className={cx(styles.button, { [styles.reverse]: reverse })}
+        {...rest}
+        disabled
+      >
+        <span className={styles.label} data-size={size}>
+          <span className={styles.loading}>Loading....</span>
+        </span>
+      </ButtonBase>
+    );
+  }
+
   return (
     <ButtonBase
       size={size}

lib/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,28 @@
+import type { MouseEventHandler } from 'react';
+import { ButtonBase } from '../Button';
+import { Icon } from '../Icon';
+import { Menu, type MenuGroups, type MenuItemProps } from '../Menu';
+import styles from './contextMenu.module.css';
+
+export interface DialogContextMenuProps {
+  onToggle?: MouseEventHandler;
+  label: string;
+  value: string | number;
+  items: MenuItemProps[];
+  groups?: MenuGroups;
+  expanded?: boolean;
+  className?: string;
+}
+
+export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: DialogContextMenuProps) => {
+  return (
+    <div className={styles.toggle}>
+      <ButtonBase className={styles.button} as="button" color="secondary" onClick={onToggle}>
+        <Icon className={styles.icon} name="menu-elipsis-horizontal" />
+      </ButtonBase>
+      <div className={styles.dropdown} aria-expanded={expanded}>
+        <Menu theme="global" defaultItemColor="subtle" groups={groups} items={items} />
+      </div>
+    </div>
+  );
+};

lib/components/ContextMenu/contextMenu.module.css

@@ -0,0 +1,35 @@
+.toggle {
+  position: relative;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  padding: 0.625rem;
+  border-radius: 50%;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.dropdown {
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.dropdown {
+  margin-top: 0.5rem;
+  padding: 0 0.5rem;
+  background-color: var(--neutral-background-default);
+  border-radius: 2px;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+}