@altinn/altinn-components 0.6.1 → 0.6.2

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+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,
+  },
+};

package/lib/components/Toolbar/ToolbarFilter.tsx

@@ -0,0 +1,82 @@
+import type { ChangeEventHandler, MouseEventHandler } from 'react';
+import { DrawerOrDropdown } from '../';
+import type { MenuOptionProps } from '../Menu';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarFilterBase } from './ToolbarFilterBase';
+import { type OptionGroup, ToolbarOptions } from './ToolbarOptions';
+
+type ToolbarFilterValue = (string | number)[];
+export interface ToolbarFilterProps {
+  name: string;
+  options: MenuOptionProps[];
+  optionGroups?: { [key: string]: OptionGroup };
+  label: string;
+  value?: ToolbarFilterValue;
+  optionType: 'checkbox' | 'radio';
+  expanded?: boolean;
+  removable?: boolean;
+  getSelectedLabel?: (name: string, value?: ToolbarFilterValue) => string;
+  className?: string;
+  onChange?: ChangeEventHandler;
+  onToggle?: MouseEventHandler;
+  onRemove?: MouseEventHandler;
+}
+
+const defaultGetSelectedLabel = (_: string, value?: ToolbarFilterValue) => {
+  if (Array.isArray(value)) {
+    return value.join(', ');
+  }
+  return value;
+};
+
+export const ToolbarFilter = ({
+  expanded = false,
+  removable,
+  label,
+  name,
+  value,
+  options,
+  optionGroups,
+  onToggle,
+  onChange,
+  onRemove,
+  getSelectedLabel,
+  optionType,
+}: ToolbarFilterProps) => {
+  const filterOptions = (options ?? []).map(
+    (item): MenuOptionProps => ({
+      ...item,
+      name,
+      checked: Array.isArray(value) ? value.includes(item.value) : item.value === value,
+    }),
+  );
+
+  const valueLabel = getSelectedLabel?.(name, value) ?? defaultGetSelectedLabel(name, value);
+
+  return (
+    <ToolbarFilterBase expanded={expanded}>
+      <ToolbarButton
+        type="select"
+        removable={removable}
+        active={Array.isArray(value) ? value.length > 0 : typeof value !== 'undefined'}
+        onToggle={onToggle}
+        onRemove={onRemove}
+      >
+        {valueLabel || label}
+      </ToolbarButton>
+      <DrawerOrDropdown
+        expanded={expanded}
+        title={label}
+        onClose={onToggle}
+        button={{ onClick: onToggle, label: 'Vis X treff' }}
+      >
+        <ToolbarOptions
+          options={filterOptions}
+          optionGroups={optionGroups}
+          onChange={onChange}
+          optionType={optionType}
+        />
+      </DrawerOrDropdown>
+    </ToolbarFilterBase>
+  );
+};

package/lib/components/Toolbar/ToolbarFilterBase.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import styles from './toolbarFilterBase.module.css';
+
+export interface ToolbarFilterBaseProps {
+  children?: ReactNode;
+  expanded?: boolean;
+}
+
+export const ToolbarFilterBase = ({ expanded = false, children }: ToolbarFilterBaseProps) => {
+  return (
+    <div className={styles.base} aria-expanded={expanded}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { ToolbarMenu } from './ToolbarMenu';
+
+const meta = {
+  title: 'Toolbar/ToolbarMenu',
+  component: ToolbarMenu,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Skattetetaten',
+    value: 'skatt',
+    items: [
+      {
+        title: 'Skatteetaten',
+      },
+      {
+        title: 'Digdir',
+      },
+      {
+        title: 'Helstilsynet',
+      },
+    ],
+  },
+} satisfies Meta<typeof ToolbarMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Expanded: Story = {
+  args: {
+    expanded: true,
+  },
+};

package/lib/components/Toolbar/ToolbarMenu.tsx

@@ -0,0 +1,29 @@
+import type { MouseEventHandler } from 'react';
+import { DrawerOrDropdown } from '../';
+import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarFilterBase } from './ToolbarFilterBase';
+
+export interface ToolbarMenuProps {
+  onToggle?: MouseEventHandler;
+  label: string;
+  value: string | number;
+  items: MenuItemProps[];
+  groups?: MenuItemGroups;
+  search?: MenuSearchProps;
+  expanded?: boolean;
+  className?: string;
+}
+
+export const ToolbarMenu = ({ expanded = false, onToggle, label, value, groups, search, items }: ToolbarMenuProps) => {
+  return (
+    <ToolbarFilterBase expanded={expanded}>
+      <ToolbarButton type="switch" onToggle={onToggle} active={!!value}>
+        {label}
+      </ToolbarButton>
+      <DrawerOrDropdown expanded={expanded} title="Endre konto" onClose={onToggle}>
+        <Menu theme="global" defaultItemColor="subtle" groups={groups} search={search} items={items} />
+      </DrawerOrDropdown>
+    </ToolbarFilterBase>
+  );
+};

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

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToolbarOptions } from './ToolbarOptions';
+
+const meta = {
+  title: 'Toolbar/ToolbarOptions',
+  component: ToolbarOptions,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta<typeof ToolbarOptions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Checkboxes: Story = {
+  args: {
+    optionType: 'checkbox',
+    options: [
+      {
+        type: 'checkbox',
+        label: 'Skatteetaten',
+        value: '1',
+      },
+      {
+        type: 'checkbox',
+        label: 'Digdir',
+        value: '2',
+      },
+      {
+        type: 'checkbox',
+        checked: true,
+        label: 'Helstilsynet',
+        value: '3',
+      },
+    ],
+  },
+};
+
+export const Radio: Story = {
+  args: {
+    optionType: 'radio',
+    options: [
+      {
+        type: 'radio',
+        label: 'Skatteetaten',
+        value: '1',
+      },
+      {
+        type: 'radio',
+        label: 'Digdir',
+        value: '2',
+      },
+      {
+        type: 'radio',
+        checked: true,
+        label: 'Helstilsynet',
+        value: '3',
+      },
+    ],
+  },
+};
+
+export const RadioCheckbox: Story = {
+  args: {
+    optionGroups: {
+      a: {
+        title: 'Velg skadedyr',
+        optionType: 'radio',
+      },
+      b: {
+        title: 'Velg straff',
+        optionType: 'checkbox',
+      },
+    },
+    options: [
+      {
+        groupId: 'a',
+        name: 'animal',
+        label: 'Katt',
+        value: 'cat',
+        checked: true,
+      },
+      {
+        groupId: 'a',
+        name: 'animal',
+        label: 'Mus',
+        value: 'mouse',
+      },
+      {
+        groupId: 'a',
+        name: 'animal',
+        label: 'Veggdyr',
+        value: 'spider',
+      },
+      {
+        groupId: 'b',
+        label: 'Husarrest',
+        value: 'digdir',
+      },
+      {
+        groupId: 'b',
+        checked: true,
+        label: 'Piskeslag',
+        value: 'helse',
+      },
+    ],
+  },
+};

package/lib/components/Toolbar/ToolbarOptions.tsx

@@ -0,0 +1,74 @@
+import { type ChangeEventHandler, Fragment } from 'react';
+import {
+  MenuBase,
+  MenuHeader,
+  MenuList,
+  MenuListItem,
+  MenuOption,
+  type MenuOptionProps,
+  MenuSearch,
+  type MenuSearchProps,
+} from '../Menu';
+
+export type ToolbarOptionType = 'checkbox' | 'radio';
+
+export interface OptionGroup {
+  title?: string;
+  divider?: boolean;
+  optionType?: ToolbarOptionType;
+}
+
+export interface ToolbarOptionsProps {
+  options: MenuOptionProps[];
+  onChange?: ChangeEventHandler;
+  search?: MenuSearchProps;
+  optionType: ToolbarOptionType;
+  optionGroups?: { [key: string]: OptionGroup };
+}
+
+export const ToolbarOptions = ({ search, optionGroups = {}, options, onChange, optionType }: ToolbarOptionsProps) => {
+  const sections = options.reduce(
+    (acc, option) => {
+      const group = option.groupId || '';
+      acc[group] = acc[group] || [];
+      acc[group].push(option);
+      return acc;
+    },
+    {} as Record<string, MenuOptionProps[]>,
+  );
+
+  return (
+    <MenuBase theme="global">
+      {search && <MenuSearch {...search} />}
+      <MenuList>
+        {Object.keys(sections)?.map((key, groupIndex) => {
+          const groupProps = optionGroups[key] || {};
+          const { title, divider = true } = groupProps;
+          return (
+            <Fragment key={key}>
+              {groupIndex && divider ? <MenuListItem role="separator" /> : ''}
+
+              {title && (
+                <MenuListItem>
+                  <MenuHeader title={title} />
+                </MenuListItem>
+              )}
+              {sections[key]?.map((item) => (
+                <MenuListItem key={item.value}>
+                  <MenuOption
+                    onChange={onChange}
+                    label={item.label}
+                    badge={item.badge}
+                    type={item.type || optionGroups?.[key]?.optionType || optionType}
+                    value={item.value}
+                    checked={item.checked}
+                  />
+                </MenuListItem>
+              ))}
+            </Fragment>
+          );
+        })}
+      </MenuList>
+    </MenuBase>
+  );
+};

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

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

package/lib/components/Toolbar/ToolbarSearch.tsx

@@ -0,0 +1,24 @@
+import type { ChangeEventHandler } from 'react';
+import styles from './toolbarSearch.module.css';
+
+export interface ToolbarSearchProps {
+  placeholder?: string;
+  name: string;
+  value: string;
+  onChange: ChangeEventHandler;
+}
+
+export const ToolbarSearch = ({ value, name, placeholder = 'Søk', onChange }: ToolbarSearchProps) => {
+  return (
+    <div className={styles.field}>
+      <input
+        type="search"
+        value={value}
+        name={name}
+        placeholder={placeholder}
+        className={styles.input}
+        onChange={onChange}
+      />
+    </div>
+  );
+};

package/lib/components/Toolbar/toolbarBase.module.css

@@ -0,0 +1,19 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0.5rem;
+  /*  padding: 0 1rem; */
+}
+
+@media (min-width: 1024px) {
+  .toolbar {
+    padding: 0;
+    /*    margin: 1.125rem 0; */
+  }
+
+  .toolbar > * {
+    width: auto;
+  }
+}

package/lib/components/Toolbar/toolbarButton.module.css

@@ -0,0 +1,3 @@
+.removeButton > button:hover + * + * {
+  text-decoration: line-through;
+}

package/lib/components/Toolbar/toolbarDaterange.module.css

@@ -0,0 +1,12 @@
+.datepicker {
+  border-top: 1px solid var(--theme-border-subtle);
+  padding: 0 0.5rem;
+}
+
+.fields {
+  margin: 0.5rem 0;
+}
+
+.description {
+  font-size: 0.875rem;
+}

package/lib/components/Toolbar/toolbarFilterBase.module.css

@@ -0,0 +1,7 @@
+.base {
+  position: relative;
+}
+
+.base[aria-expanded="true"] {
+  z-index: 2;
+}

package/lib/components/Toolbar/toolbarMenu.module.css

@@ -0,0 +1,7 @@
+.menu {
+  position: relative;
+}
+
+.menu[aria-expanded="true"] {
+  z-index: 2;
+}

package/lib/components/Toolbar/toolbarSearch.module.css

@@ -0,0 +1,28 @@
+.input {
+  font-size: 0.875rem;
+  line-height: 1rem;
+  font-weight: 600;
+  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/Typography/Heading.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './heading.module.css';
+
+export type HeadingSize = 'sm' | 'md' | 'lg';
+export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingProps {
+  as?: HeadingComponent;
+  size?: HeadingSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Heading = ({ as = 'h2', size = 'md', className, children }: HeadingProps) => {
+  const H = as;
+
+  return (
+    <H className={cx(styles.heading, className)} data-size={size}>
+      {children}
+    </H>
+  );
+};

package/lib/components/Typography/Typography.tsx

@@ -0,0 +1,24 @@
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import type { LayoutTheme } from '../Layout';
+import styles from './typography.module.css';
+
+export type TypographySize = 'sm' | 'md' | 'lg';
+
+export interface TypographyProps {
+  as?: ElementType;
+  size?: TypographySize;
+  theme?: LayoutTheme;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Typography = ({ as = 'div', size = 'md', theme, className, children }: TypographyProps) => {
+  const Component = as;
+
+  return (
+    <Component className={cx(styles.typography, className)} data-size={size} data-theme={theme}>
+      {children}
+    </Component>
+  );
+};

package/lib/components/Typography/heading.module.css

@@ -0,0 +1,21 @@
+.heading {
+  margin: 0;
+}
+
+.heading[data-size="sm"] {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.heading[data-size="md"] {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.heading[data-size="lg"] {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}

package/lib/components/Typography/typography.module.css

@@ -0,0 +1,64 @@
+.typography {
+  width: 100%;
+  max-width: 45rem;
+  line-height: 1.5;
+}
+
+.item[data-size="sm"] {
+  font-size: 0.875rem;
+}
+
+.item[data-size="md"] {
+  font-size: 1rem;
+}
+
+.typography[data-size="lg"] {
+  font-size: 1.125rem;
+}
+
+.typography > *:first-child {
+  margin-top: 0;
+}
+
+.typography > *:last-child {
+  margin-bottom: 0;
+}
+
+.typography h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0;
+}
+
+.typography h3 {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 1em 0;
+}
+
+.typography h4 {
+  font-size: 1em;
+  font-weight: 600;
+  margin: 1em 0 0;
+}
+
+.typography p {
+  font-size: 1em;
+  margin: 1em 0;
+}
+
+.typography strong {
+  font-weight: 600;
+}
+
+.typography a {
+  color: var(--link-base-default);
+}
+
+.typography ul:not([class]),
+.typography ol:not([class]) {
+  list-style-position: inside;
+  padding-left: 1rem;
+  margin: 1em 0;
+}