@altinn/altinn-components 0.6.0 → 0.6.1

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

@@ -1,64 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,19 +0,0 @@
-.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

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

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

@@ -1,12 +0,0 @@
-.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

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

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

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

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

@@ -1,28 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-.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;
-}