@altinn/altinn-components 0.0.1

package/lib/components/Toolbar/ToolbarFilter.tsx

@@ -0,0 +1,70 @@
+import type { ChangeEventHandler, MouseEventHandler } from 'react';
+import type { MenuOptionProps } from '../Menu';
+import { ToolbarButton } from './ToolbarButton';
+import { ToolbarOptions } from './ToolbarOptions';
+import styles from './toolbar.module.css';
+
+type ToolbarFilterValue = (string | number)[];
+export interface ToolbarFilterProps {
+  name: string;
+  options: MenuOptionProps[];
+  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,
+  removable,
+  label,
+  name,
+  value,
+  options,
+  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 (
+    <div className={styles.toggle}>
+      <ToolbarButton
+        as="div"
+        type="select"
+        removable={removable}
+        active={Array.isArray(value) ? value.length > 0 : typeof value !== 'undefined'}
+        onToggle={onToggle}
+        onRemove={onRemove}
+      >
+        {valueLabel || label}
+      </ToolbarButton>
+      <div className={styles.dropdown} aria-expanded={expanded}>
+        <ToolbarOptions options={filterOptions} onChange={onChange} optionType={optionType} />
+      </div>
+    </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,28 @@
+import type { MouseEventHandler } from 'react';
+import { Menu, type MenuGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
+import { ToolbarButton } from './ToolbarButton';
+import styles from './toolbar.module.css';
+
+export interface ToolbarMenuProps {
+  onToggle?: MouseEventHandler;
+  label: string;
+  value: string | number;
+  items: MenuItemProps[];
+  groups?: MenuGroups;
+  search?: MenuSearchProps;
+  expanded?: boolean;
+  className?: string;
+}
+
+export const ToolbarMenu = ({ expanded = false, onToggle, label, value, groups, search, items }: ToolbarMenuProps) => {
+  return (
+    <div className={styles.toggle}>
+      <ToolbarButton as="div" type="switch" onToggle={onToggle} active={!!value}>
+        {label}
+      </ToolbarButton>
+      <div className={styles.dropdown} aria-expanded={expanded}>
+        <Menu theme="global" defaultItemColor="subtle" groups={groups} search={search} items={items} />
+      </div>
+    </div>
+  );
+};

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: [
+      {
+        group: 'a',
+        name: 'animal',
+        label: 'Katt',
+        value: 'cat',
+        checked: true,
+      },
+      {
+        group: 'a',
+        name: 'animal',
+        label: 'Mus',
+        value: 'mouse',
+      },
+      {
+        group: 'a',
+        name: 'animal',
+        label: 'Veggdyr',
+        value: 'spider',
+      },
+      {
+        group: 'b',
+        label: 'Husarrest',
+        value: 'digdir',
+      },
+      {
+        group: 'b',
+        checked: true,
+        label: 'Piskeslag',
+        value: 'helse',
+      },
+    ],
+  },
+};

package/lib/components/Toolbar/ToolbarOptions.tsx

@@ -0,0 +1,61 @@
+import type { ChangeEventHandler } from 'react';
+import {
+  MenuBase,
+  MenuGroup,
+  MenuHeader,
+  MenuOption,
+  type MenuOptionProps,
+  MenuSearch,
+  type MenuSearchProps,
+} from '../Menu';
+
+export type ToolbarOptionType = 'checkbox' | 'radio';
+
+export interface OptionGroup {
+  title?: string;
+  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.group || '';
+      acc[group] = acc[group] || [];
+      acc[group].push(option);
+      return acc;
+    },
+    {} as Record<string, MenuOptionProps[]>,
+  );
+
+  return (
+    <MenuBase theme="global">
+      {search && <MenuSearch {...search} />}
+      {Object.keys(sections)?.map((key) => {
+        const headerTitle = optionGroups?.[key]?.title;
+        return (
+          <MenuGroup key={key}>
+            {headerTitle && <MenuHeader title={headerTitle} />}
+            {sections[key]?.map((item) => (
+              <MenuOption
+                key={item.value}
+                onChange={onChange}
+                label={item.label}
+                type={optionGroups?.[key]?.optionType || optionType}
+                value={item.value}
+                checked={item.checked}
+              />
+            ))}
+          </MenuGroup>
+        );
+      })}
+    </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/index.js

@@ -0,0 +1,3 @@
+export * from './ToolbarBase';
+export * from './ToolbarButton';
+export * from './Toolbar';

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

@@ -0,0 +1,43 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  margin: 1.125rem 0;
+}
+
+@media (min-width: 1024px) {
+  .toolbar {
+    padding: 0;
+  }
+}
+
+/* TIDI; move styles below */
+
+.button {
+  display: inline-block;
+}
+
+.remove-button > button:hover + * + * {
+  text-decoration: line-through;
+}
+
+.dropdown {
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  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);
+}

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

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

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/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/lib/css/colors.css

@@ -0,0 +1,113 @@
+:root {
+  --colors-neutral-1: #ffffff;
+  --colors-neutral-2: #f3f4f5;
+  --colors-neutral-3: #e2e3e5;
+  --colors-neutral-4: #cfd1d4;
+  --colors-neutral-5: #bec1c6;
+  --colors-neutral-6: #b9bcc1;
+  --colors-neutral-7: #7c818b;
+  --colors-neutral-8: #464e5c;
+  --colors-neutral-9: #212b3b;
+  --colors-neutral-10: #333c4a;
+  --colors-neutral-11: #464e5c;
+  --colors-neutral-12: #5d6470;
+  --colors-neutral-13: #232c3c;
+
+  --colors-company-1: #ffffff;
+  --colors-company-2: #e9f5ff;
+  --colors-company-3: #d3eafd;
+  --colors-company-4: #a5d6fb;
+  --colors-company-5: #78c1f9;
+  --colors-company-6: #4badf7;
+  --colors-company-7: #1e98f5;
+  --colors-company-8: #4086d7;
+  --colors-company-9: #111d46;
+  --colors-company-10: #364163;
+  --colors-company-11: #166aac;
+  --colors-company-12: #5a637f;
+  --colors-company-13: #1e2950;
+
+  --colors-person-1: #ffffff;
+  --colors-person-2: #eaf7ef;
+  --colors-person-3: #a8f3d0;
+  --colors-person-4: #6ee7b7;
+  --colors-person-5: #34d399;
+  --colors-person-6: #10b981;
+  --colors-person-7: #079669;
+  --colors-person-8: #347659;
+  --colors-person-9: #084826;
+  --colors-person-10: #076046;
+  --colors-person-11: #3b6d52;
+  --colors-person-12: #3b6d52;
+  --colors-person-13: #06331b;
+
+  /* link **/
+
+  --link-base-default: #2a4dd0;
+  --link-base-hover: #213ca3;
+  --link-base-active: #192d7b;
+
+  /* global */
+
+  --global-background-default: var(--colors-neutral-2);
+  --global-background-subtle: var(--colors-neutral-1);
+  --global-base-default: var(--colors-neutral-9);
+  --global-base-hover: var(--colors-neutral-10);
+  --global-base-active: var(--colors-neutral-11);
+  --global-border-default: var(--colors-neutral-7);
+  --global-border-strong: var(--colors-neutral-8);
+  --global-border-subtle: var(--colors-neutral-6);
+  --global-surface-active: var(--colors-neutral-5);
+  --global-surface-default: var(--colors-neutral-3);
+  --global-surface-hover: var(--colors-neutral-4);
+  --global-text-default: var(--colors-neutral-13);
+  --global-text-subtle: var(--colors-neutral-12);
+
+  /* neutral */
+
+  --neutral-background-default: var(--colors-neutral-1);
+  --neutral-background-subtle: var(--colors-neutral-2);
+  --neutral-base-default: var(--colors-neutral-9);
+  --neutral-base-hover: var(--colors-neutral-10);
+  --neutral-base-active: var(--colors-neutral-11);
+  --neutral-border-default: var(--colors-neutral-7);
+  --neutral-border-strong: var(--colors-neutral-8);
+  --neutral-border-subtle: var(--colors-neutral-6);
+  --neutral-surface-active: var(--colors-neutral-5);
+  --neutral-surface-default: var(--colors-neutral-3);
+  --neutral-surface-hover: var(--colors-neutral-4);
+  --neutral-text-default: var(--colors-neutral-13);
+  --neutral-text-subtle: var(--colors-neutral-12);
+
+  /* company */
+
+  --company-background-default: var(--colors-company-1);
+  --company-background-subtle: var(--colors-company-2);
+  --company-base-default: var(--colors-company-9);
+  --company-base-hover: var(--colors-company-10);
+  --company-base-active: var(--colors-company-11);
+  --company-border-default: var(--colors-company-7);
+  --company-border-strong: var(--colors-company-8);
+  --company-border-subtle: var(--colors-company-6);
+  --company-surface-active: var(--colors-company-5);
+  --company-surface-default: var(--colors-company-3);
+  --company-surface-hover: var(--colors-company-4);
+  --company-text-default: var(--colors-company-13);
+  --company-text-subtle: var(--colors-company-12);
+
+  /* person */
+
+  --person-background-default: var(--colors-person-1);
+  --person-background-subtle: var(--colors-person-2);
+  --person-base-default: var(--colors-person-9);
+  --person-base-hover: var(--colors-person-10);
+  --person-base-active: var(--colors-person-11);
+  --person-border-default: var(--colors-person-7);
+  --person-border-strong: var(--colors-person-8);
+  --person-border-subtle: var(--colors-person-6);
+  --person-surface-active: var(--colors-person-5);
+  --person-surface-default: var(--colors-person-3);
+  --person-surface-hover: var(--colors-person-4);
+  --person-text-default: var(--colors-person-13);
+  --person-text-subtle: var(--colors-person-12);
+}

package/lib/css/global.css

@@ -0,0 +1,12 @@
+@import "https://altinncdn.no/fonts/inter/inter.css";
+@import "./colors.css";
+@import "./theme-global.css";
+@import "./theme-neutral.css";
+@import "./theme-company.css";
+@import "./theme-person.css";
+@import "./theme.css";
+
+* {
+  font-family: "Inter", sans-serif;
+  box-sizing: border-box;
+}

package/lib/css/theme-company.css

@@ -0,0 +1,15 @@
+[data-theme="company"] {
+  --theme-background-default: var(--company-background-default);
+  --theme-background-subtle: var(--company-background-subtle);
+  --theme-base-active: var(--company-base-active);
+  --theme-base-default: var(--company-base-default);
+  --theme-base-hover: var(--company-base-hover);
+  --theme-border-default: var(--company-border-default);
+  --theme-border-strong: var(--company-border-strong);
+  --theme-border-subtle: var(--company-border-subtle);
+  --theme-surface-active: var(--company-surface-active);
+  --theme-surface-default: var(--company-surface-default);
+  --theme-surface-hover: var(--company-surface-hover);
+  --theme-text-default: var(--company-text-default);
+  --theme-text-subtle: var(--company-text-subtle);
+}

package/lib/css/theme-global.css

@@ -0,0 +1,15 @@
+[data-theme="global"] {
+  --theme-background-default: var(--neutral-background-subtle);
+  --theme-background-subtle: var(--neutral-background-default);
+  --theme-base-active: var(--company-base-active);
+  --theme-base-default: var(--company-base-default);
+  --theme-base-hover: var(--company-base-hover);
+  --theme-border-default: var(--neutral-border-default);
+  --theme-border-strong: var(--neutral-border-strong);
+  --theme-border-subtle: var(--neutral-border-subtle);
+  --theme-surface-active: var(--neutral-surface-active);
+  --theme-surface-default: var(--neutral-surface-default);
+  --theme-surface-hover: var(--neutral-surface-hover);
+  --theme-text-default: var(--neutral-text-default);
+  --theme-text-subtle: var(--neutral-text-subtle);
+}

package/lib/css/theme-neutral.css

@@ -0,0 +1,15 @@
+[data-theme="neutral"] {
+  --theme-background-default: var(--neutral-background-default);
+  --theme-background-subtle: var(--neutral-background-subtle);
+  --theme-base-active: var(--neutral-base-active);
+  --theme-base-default: var(--neutral-base-default);
+  --theme-base-hover: var(--neutral-base-hover);
+  --theme-border-default: var(--neutral-border-default);
+  --theme-border-strong: var(--neutral-border-strong);
+  --theme-border-subtle: var(--neutral-border-subtle);
+  --theme-surface-active: var(--neutral-surface-active);
+  --theme-surface-default: var(--neutral-surface-default);
+  --theme-surface-hover: var(--neutral-surface-hover);
+  --theme-text-default: var(--neutral-text-default);
+  --theme-text-subtle: var(--neutral-text-subtle);
+}

package/lib/css/theme-person.css

@@ -0,0 +1,15 @@
+[data-theme="person"] {
+  --theme-background-default: var(--person-background-default);
+  --theme-background-subtle: var(--person-background-subtle);
+  --theme-base-active: var(--person-base-active);
+  --theme-base-default: var(--person-base-default);
+  --theme-base-hover: var(--person-base-hover);
+  --theme-border-default: var(--person-border-default);
+  --theme-border-strong: var(--person-border-strong);
+  --theme-border-subtle: var(--person-border-subtle);
+  --theme-surface-active: var(--person-surface-active);
+  --theme-surface-default: var(--person-surface-default);
+  --theme-surface-hover: var(--person-surface-hover);
+  --theme-text-default: var(--person-text-default);
+  --theme-text-subtle: var(--person-text-subtle);
+}

package/lib/css/theme.css

@@ -0,0 +1,24 @@
+:root {
+  --theme-background-default: var(--global-background-default);
+  --theme-background-subtle: var(--global-background-subtle);
+  --theme-base-active: var(--global-base-active);
+  --theme-base-default: var(--global-base-default);
+  --theme-base-hover: var(--global-base-hover);
+  --theme-border-default: var(--global-border-default);
+  --theme-border-strong: var(--global-border-strong);
+  --theme-border-subtle: var(--global-border-subtle);
+  --theme-surface-active: var(--global-surface-active);
+  --theme-surface-default: var(--global-surface-default);
+  --theme-surface-hover: var(--global-surface-hover);
+  --theme-text-default: var(--global-text-default);
+  --theme-text-subtle: var(--global-text-subtle);
+}
+
+body {
+  background: var(--neutral-background-default);
+  color: var(--neutral-text-default);
+}
+
+body[data-theme] {
+  background: var(--theme-background-subtle);
+}

package/lib/index.ts

@@ -0,0 +1 @@
+export * from './components';