@altinn/altinn-components 0.0.1

package/lib/components/Menu/menuSearch.module.css

@@ -0,0 +1,29 @@
+.input {
+  width: 100%;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-weight: normal;
+  padding: 9px;
+  border-radius: 2px;
+  border: 1px solid;
+  border-color: var(--theme-border-default);
+}
+
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
+
+.close {
+  padding: 6px 0;
+}
+
+.icon {
+  border-left: 1px solid;
+  border-color: var(--theme-background-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  padding: 0 6px;
+}

package/lib/components/Menu/useClickOutside.ts

@@ -0,0 +1,21 @@
+import { type RefObject, useEffect } from 'react';
+
+export const useClickOutside = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    };
+
+    document.addEventListener('mouseup', handleClickOutside);
+    document.addEventListener('touchend', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mouseup', handleClickOutside);
+      document.removeEventListener('touchend', handleClickOutside);
+    };
+  }, [callback, ref]);
+
+  return ref;
+};

package/lib/components/Menu/useEscapeKey.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+export const useEscapeKey = (onEscape: () => void): void => {
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onEscape();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [onEscape]);
+};

package/lib/components/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { type FilterState, Toolbar } from './Toolbar';
+
+const meta = {
+  title: 'Toolbar/Toolbar',
+  component: Toolbar,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    menu: {
+      label: 'Ola Nordmann',
+      value: 'ola',
+      items: [
+        {
+          avatar: {
+            name: 'Ola Nordmann',
+          },
+          label: 'Ola Nordmann',
+        },
+        {
+          avatar: {
+            name: 'Kari Nordmann',
+          },
+          label: 'Kari Nordmann',
+        },
+      ],
+    },
+    filters: [
+      {
+        removable: true,
+        name: 'from',
+        optionType: 'checkbox',
+        label: 'Velg avsender',
+        options: [
+          {
+            value: 'skatt',
+            label: 'Skatteetaten',
+          },
+          {
+            value: 'brreg',
+            label: 'Brønnøysund',
+          },
+          {
+            value: 'nav',
+            label: 'NAV',
+          },
+          {
+            value: 'oslo',
+            label: 'Oslo kommune',
+          },
+        ],
+      },
+      {
+        removable: true,
+        name: 'to',
+        optionType: 'radio',
+        label: 'Velg mottaker',
+        options: [
+          {
+            value: 'ola',
+            label: 'Ola Nordmann',
+          },
+          {
+            value: 'kari',
+            label: 'Kari Nordmann',
+          },
+        ],
+      },
+      {
+        removable: true,
+        name: 'status',
+        optionType: 'radio',
+        label: 'Velg status',
+        options: [
+          {
+            group: '1',
+            value: 'draft',
+            label: 'Utkast',
+          },
+          {
+            group: '1',
+            value: 'sent',
+            label: 'Sendt',
+          },
+          {
+            group: '2',
+            value: 'in-progress',
+            label: 'Under arbeid',
+          },
+          {
+            group: '2',
+            value: 'requires-attention',
+            label: 'Krever handling',
+          },
+          {
+            group: '2',
+            value: 'completed',
+            label: 'Avsluttet',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const CustomFilterLabel: Story = {
+  args: {
+    ...Default.args,
+    getFilterLabel: (name, value) => {
+      return Array.isArray(value) && value.length > 1 ? `${value.length} selected` : value;
+    },
+  },
+};
+
+export const NoFilters: Story = {
+  args: {
+    ...Default.args,
+    filters: [],
+  },
+};
+
+export const StaticFilters: Story = {
+  args: {
+    filters: Default?.args?.filters?.map((item) => {
+      return {
+        ...item,
+        removable: false,
+      };
+    }),
+  },
+};
+
+export const ControlledStateFilters = () => {
+  const [filterState, setFilterState] = React.useState<FilterState>({
+    from: ['skatt', 'brreg'],
+  });
+  return <Toolbar filters={Default.args!.filters} filterState={filterState} onFilterStateChange={setFilterState} />;
+};
+
+export const FilterAndSearch: Story = {
+  args: {
+    search: {
+      placeholder: 'Søk etter filter',
+    },
+    filters: [
+      {
+        name: 'status',
+        optionType: 'checkbox',
+        label: 'Velg status',
+        options: [
+          {
+            group: '1',
+            value: 'draft',
+            label: 'Utkast',
+          },
+          {
+            group: '1',
+            value: 'sent',
+            label: 'Sendt',
+          },
+          {
+            group: '2',
+            value: 'in-progress',
+            label: 'Under arbeid',
+          },
+          {
+            group: '2',
+            value: 'requires-attention',
+            label: 'Krever handling',
+          },
+          {
+            group: '2',
+            value: 'completed',
+            label: 'Avsluttet',
+          },
+        ],
+      },
+    ],
+  },
+};

package/lib/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,138 @@
+'use client';
+import { useMemo, useState } from 'react';
+import { ToolbarAdd } from './ToolbarAdd';
+import { ToolbarBase } from './ToolbarBase';
+import { ToolbarFilter, type ToolbarFilterProps } from './ToolbarFilter.tsx';
+import { ToolbarMenu, type ToolbarMenuProps } from './ToolbarMenu.tsx';
+import type { ToolbarOptionType } from './ToolbarOptions.tsx';
+import { ToolbarSearch, type ToolbarSearchProps } from './ToolbarSearch.tsx';
+
+export type FilterState = Record<string, ToolbarFilterProps['value']>;
+type ExpandedItemType = 'filter' | 'menu' | 'add-filter';
+
+type ExpandedItem = {
+  name: string;
+  type: ExpandedItemType;
+} | null;
+
+export interface ToolbarProps {
+  filters?: ToolbarFilterProps[];
+  search?: ToolbarSearchProps;
+  menu?: ToolbarMenuProps;
+  filterState?: FilterState;
+  getFilterLabel?: (name: string, value: ToolbarFilterProps['value']) => string;
+  onFilterStateChange?: (state: FilterState) => void;
+}
+
+export const Toolbar = ({
+  filters = [],
+  filterState,
+  onFilterStateChange,
+  search,
+  menu,
+  getFilterLabel,
+}: ToolbarProps) => {
+  const [expandedItem, setExpandedItem] = useState<ExpandedItem>(null);
+  const [localFilterState, setLocalFilterState] = useState<Record<string, ToolbarFilterProps['value']>>(
+    filterState ?? {},
+  );
+  const changeFilterState = typeof onFilterStateChange === 'function' ? onFilterStateChange : setLocalFilterState;
+  const applicableFilterState = filterState || localFilterState;
+  const [hiddenFilterNames, setHiddenFilterNames] = useState<string[]>(
+    filters
+      ?.filter((item) => item.removable && typeof applicableFilterState[item.name] === 'undefined')
+      .map((item) => item.name) ?? [],
+  );
+
+  const visibleFilters = useMemo(
+    () => filters.filter((item) => !hiddenFilterNames.includes(item.name)),
+    [filters, hiddenFilterNames],
+  );
+  const hiddenFilters = useMemo(
+    () => filters.filter((item) => hiddenFilterNames.includes(item.name)),
+    [filters, hiddenFilterNames],
+  );
+
+  const onToggle = (type: ExpandedItemType, name: string) => {
+    if (expandedItem?.name === name && expandedItem.type === type) {
+      setExpandedItem(null);
+    } else {
+      setExpandedItem({ name, type });
+    }
+  };
+
+  const onFilterChange = (name: string, value: ToolbarFilterProps['value'], optionType: ToolbarOptionType) => {
+    if (optionType === 'radio') {
+      changeFilterState({
+        ...applicableFilterState,
+        [name]: value,
+      });
+      onToggle('filter', name);
+    } else {
+      changeFilterState({
+        ...applicableFilterState,
+        [name]: applicableFilterState[name]
+          ? applicableFilterState[name].some((v) => value?.includes(v))
+            ? applicableFilterState[name].filter((v) => !(value || []).includes(v))
+            : [...applicableFilterState[name], ...(value || [])]
+          : value,
+      });
+    }
+  };
+
+  const onFilterRemove = (name: string) => {
+    setHiddenFilterNames((prevState) => [...prevState, name]);
+    changeFilterState({
+      ...applicableFilterState,
+      [name]: undefined,
+    });
+  };
+
+  const onFilterAdd = (name: string) => {
+    onToggle('filter', name);
+    setHiddenFilterNames((prevState) => prevState.filter((prevName) => prevName !== name));
+  };
+
+  return (
+    <ToolbarBase onClose={() => setExpandedItem(null)}>
+      {menu && <ToolbarMenu onToggle={() => onToggle('menu', '')} expanded={expandedItem?.type === 'menu'} {...menu} />}
+      {visibleFilters.map((item) => {
+        return (
+          <ToolbarFilter
+            key={item.name}
+            onToggle={() => onToggle('filter', item.name)}
+            expanded={item.name === expandedItem?.name && expandedItem?.type === 'filter'}
+            onRemove={() => {
+              onFilterRemove(item.name);
+            }}
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+              onFilterChange(item.name, [event.target.value], item.optionType);
+            }}
+            name={item.name}
+            options={item.options}
+            label={item.label}
+            value={applicableFilterState[item.name]}
+            optionType={item.optionType}
+            removable={item.removable}
+            getSelectedLabel={getFilterLabel}
+          />
+        );
+      })}
+      {hiddenFilters?.length > 0 && (
+        <ToolbarAdd
+          expanded={expandedItem?.type === 'add-filter'}
+          onToggle={() => onToggle('add-filter', '')}
+          items={hiddenFilters.map((item) => ({
+            id: item.name,
+            label: item.label,
+            name: item.name,
+            onClick: () => {
+              onFilterAdd(item.name);
+            },
+          }))}
+        />
+      )}
+      {search && <ToolbarSearch {...search} />}
+    </ToolbarBase>
+  );
+};

package/lib/components/Toolbar/ToolbarAdd.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { ToolbarAdd } from './ToolbarAdd';
+
+const meta = {
+  title: 'Toolbar/ToolbarAdd',
+  component: ToolbarAdd,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof ToolbarAdd>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        label: 'Velg dato',
+      },
+    ],
+  },
+};

package/lib/components/Toolbar/ToolbarAdd.tsx

@@ -0,0 +1,25 @@
+import type { MouseEventHandler } from 'react';
+import { Menu, type MenuItemProps } from '../Menu';
+import { ToolbarButton } from './ToolbarButton';
+import styles from './toolbar.module.css';
+
+export interface ToolbarAddProps {
+  items: MenuItemProps[];
+  expanded: boolean;
+  onToggle?: MouseEventHandler;
+  label?: string;
+  className?: string;
+}
+
+export const ToolbarAdd = ({ expanded = false, onToggle, label = 'Legg til', items }: ToolbarAddProps) => {
+  return (
+    <div className={styles.toggle}>
+      <ToolbarButton as="div" type="add" onToggle={onToggle}>
+        {label}
+      </ToolbarButton>
+      <div aria-expanded={expanded} className={styles?.dropdown}>
+        <Menu theme="global" items={items} />
+      </div>
+    </div>
+  );
+};

package/lib/components/Toolbar/ToolbarBase.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { type ReactNode, useRef } from 'react';
+import { useClickOutside } from '../Menu/useClickOutside.ts';
+import { useEscapeKey } from '../Menu/useEscapeKey.ts';
+import styles from './toolbar.module.css';
+export interface ToolbarBaseProps {
+  children?: ReactNode;
+  onClose?: () => void;
+}
+
+export const ToolbarBase = ({ children, onClose }: ToolbarBaseProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useClickOutside(ref, () => {
+    onClose?.();
+  });
+
+  useEscapeKey(() => {
+    onClose?.();
+  });
+
+  return (
+    <div className={styles.toolbar} ref={ref}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Toolbar/ToolbarButton.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ToolbarButton } from './ToolbarButton';
+
+const meta = {
+  title: 'Toolbar/ToolbarButton',
+  component: ToolbarButton,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    children: 'Label',
+  },
+} satisfies Meta<typeof ToolbarButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Add: Story = {
+  args: {
+    type: 'add',
+  },
+};
+
+export const Removable: Story = {
+  args: {
+    removable: true,
+  },
+};

package/lib/components/Toolbar/ToolbarButton.tsx

@@ -0,0 +1,65 @@
+import type { ElementType, MouseEventHandler, ReactNode } from 'react';
+import { Button, ComboButton } from '../Button';
+import styles from './toolbarButton.module.css';
+
+export type ToolbarButtonType = 'add' | 'select' | 'switch';
+
+export interface ToolbarButtonProps {
+  as?: ElementType;
+  type?: ToolbarButtonType;
+  removable?: boolean;
+  selected?: boolean;
+  icon?: string;
+  active?: boolean;
+  children?: ReactNode;
+  onToggle?: MouseEventHandler;
+  onRemove?: MouseEventHandler;
+}
+
+export const ToolbarButton = ({
+  type = 'select',
+  selected = false,
+  removable = false,
+  active,
+  children,
+  onToggle,
+  onRemove,
+}: ToolbarButtonProps) => {
+  if (removable) {
+    return (
+      <ComboButton
+        className={styles.remove}
+        variant={active ? 'solid' : 'outline'}
+        color="primary"
+        size="sm"
+        icon="x-mark"
+        selected={selected}
+        onLabelClick={onToggle}
+        onIconClick={onRemove}
+      >
+        {children}
+      </ComboButton>
+    );
+  }
+
+  if (type === 'add') {
+    return (
+      <Button reverse variant="dotted" color="primary" size="sm" icon="plus" selected={selected} onClick={onToggle}>
+        {children}
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      variant={active ? 'solid' : 'outline'}
+      color="primary"
+      size="sm"
+      icon="chevron-up-down"
+      selected={selected}
+      onClick={onToggle}
+    >
+      {children}
+    </Button>
+  );
+};

package/lib/components/Toolbar/ToolbarFilter.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { ToolbarFilter } from './ToolbarFilter';
+
+const meta = {
+  title: 'Toolbar/ToolbarFilter',
+  component: ToolbarFilter,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Velg avsender',
+    options: [
+      {
+        label: 'Skatteetaten',
+        value: 'skatt',
+      },
+      {
+        label: 'Digdir',
+        value: 'digdir',
+      },
+      {
+        label: 'Helstilsynet',
+        value: 'helse',
+      },
+    ],
+  },
+} satisfies Meta<typeof ToolbarFilter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  args: {
+    optionType: 'radio',
+  },
+};
+
+export const SingleExpanded: Story = {
+  args: {
+    ...Single.args,
+    expanded: true,
+  },
+};
+
+export const SingleValue: Story = {
+  args: {
+    optionType: 'radio',
+    value: 'helse',
+  },
+};
+
+export const Multiple: Story = {
+  args: {
+    optionType: 'checkbox',
+    value: ['skatt', 'digdir'],
+  },
+};
+
+export const MultipleExpanded: Story = {
+  args: {
+    optionType: 'checkbox',
+    value: ['skatt', 'digdir'],
+    expanded: true,
+  },
+};