@altinn/altinn-components 0.4.1 → 0.5.0

package/lib/components/Searchbar/Searchbar.stories.tsx

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Searchbar } from './Searchbar';
+
+const meta = {
+  title: 'Header/Searchbar',
+  component: Searchbar,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    placeholder: 'Search',
+    name: 'search',
+    expanded: false,
+  },
+} satisfies Meta<typeof Searchbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Query: Story = {
+  args: {
+    value: 'query',
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    placeholder: 'Søk i innboks',
+    expanded: true,
+    autocomplete: {
+      groups: {
+        2: {
+          title: '2 treff i innboks',
+        },
+      },
+      items: [
+        {
+          id: '1a',
+          groupId: '1',
+          href: '#',
+          label: 'Alt i innboks',
+        },
+        {
+          id: '1b',
+          groupId: '1',
+          href: '#',
+          label: 'Alt i hele Altinn',
+        },
+        {
+          id: '2a',
+          groupId: '2',
+          href: '#',
+          label: 'Skattemelding 2024',
+        },
+        {
+          id: '2b',
+          groupId: '2',
+          href: '#',
+          label: 'Skattemelding 2025',
+        },
+      ],
+    },
+  },
+};
+
+export const ControlledState = (args) => {
+  const [expanded, setExpanded] = useState(false);
+  const [q, setQ] = useState<string>('');
+  const onChange = (event) => {
+    setQ(event.target.value);
+  };
+
+  const onFocus = () => {
+    setExpanded(true);
+  };
+
+  const scopes = [
+    {
+      groupId: '1',
+      id: 'inbox',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i innboksen
+              </span>
+            );
+          }
+        : 'Alt i innboksen',
+    },
+    {
+      groupId: '1',
+      id: 'global',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i hele Altinn
+              </span>
+            );
+          }
+        : 'Alt i hele Altinn',
+    },
+  ];
+
+  const suggestions = q
+    ? [
+        {
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2024',
+        },
+        {
+          groupId: '2',
+          onClick: () => {
+            alert('Skattemelding 2025 ble trykket på');
+          },
+          label: 'Skattemelding 2025',
+        },
+      ].filter((item) => item.label.toLowerCase().includes((q ?? '').toLowerCase()))
+    : [];
+
+  const autocomplete = {
+    groups: {
+      2: {
+        title: `${suggestions.length} treff i innboksen`,
+      },
+    },
+    items: [...scopes, ...suggestions],
+  };
+
+  return (
+    <Searchbar
+      {...args}
+      autocomplete={autocomplete}
+      expanded={expanded}
+      value={q}
+      onChange={onChange}
+      onFocus={onFocus}
+      onEnter={() => {
+        alert(`Søk etter ${q}`);
+      }}
+    />
+  );
+};

package/lib/components/Searchbar/Searchbar.tsx

@@ -0,0 +1,18 @@
+import { Autocomplete, type AutocompleteProps } from './Autocomplete';
+import { SearchField, type SearchFieldProps } from './SearchField';
+import { SearchbarBase } from './SearchbarBase';
+
+export interface SearchbarProps extends SearchFieldProps {
+  className?: string;
+  autocomplete?: AutocompleteProps;
+  expanded: boolean;
+}
+
+export const Searchbar = ({ className, autocomplete, expanded = false, onClose, ...search }: SearchbarProps) => {
+  return (
+    <SearchbarBase className={className} expanded={expanded} autocomplete={!!autocomplete}>
+      <SearchField {...search} expanded={expanded} onClose={onClose} />
+      {autocomplete && <Autocomplete {...autocomplete} expanded={expanded} />}
+    </SearchbarBase>
+  );
+};

package/lib/components/Searchbar/SearchbarBase.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './searchbarBase.module.css';
+
+export interface SearchbarBaseProps {
+  className?: string;
+  children: ReactNode;
+  expanded?: boolean;
+  autocomplete?: boolean;
+}
+
+export const SearchbarBase = ({ className, children, expanded = false, autocomplete = false }: SearchbarBaseProps) => {
+  return (
+    <div
+      className={cx(styles.searchbar, className)}
+      aria-expanded={expanded}
+      data-autocomplete={autocomplete}
+      data-theme="neutral"
+    >
+      {children}
+    </div>
+  );
+};

package/lib/components/Searchbar/autocompleteBase.module.css

@@ -0,0 +1,17 @@
+.autocomplete {
+  width: 100%;
+  border: 2px solid;
+  border-radius: 0.25rem;
+  background-color: var(--theme-background-default);
+}
+
+.autocomplete ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.autocomplete li {
+  padding: 0;
+  margin: 0.5rem 0;
+}

package/lib/components/Searchbar/autocompleteGroup.module.css

@@ -0,0 +1,3 @@
+.group + .group {
+  border-top: 1px solid var(--theme-border-subtle);
+}

package/lib/components/Searchbar/autocompleteItem.module.css

@@ -0,0 +1,19 @@
+.item {
+  box-shadow: none;
+}
+
+.item mark {
+  background-color: transparent;
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+}
+
+.item mark:before {
+  content: "«";
+}
+
+.item mark:after {
+  content: "»";
+}

package/lib/components/Searchbar/index.ts

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

package/lib/components/Searchbar/searchField.module.css

@@ -0,0 +1,54 @@
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 1.125rem;
+  background-color: transparent;
+  color: currentColor;
+}
+
+.icon {
+  position: absolute;
+  left: 0;
+  font-size: 1.5rem;
+  margin: 0 1rem;
+}
+
+.input {
+  height: 3.5rem; /* 56px */
+  background-color: transparent;
+  font-size: inherit;
+  flex-grow: 1;
+  padding-left: 3rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border: 2px solid;
+  border-radius: 0.25rem;
+  outline: none;
+}
+
+.input[type="search"]::-webkit-search-decoration,
+.input[type="search"]::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.input:focus,
+.input[value] {
+  background-color: var(--theme-background-default);
+}
+
+.dismiss {
+  position: absolute;
+  right: 0;
+  margin: 0.375rem;
+}
+
+.clear {
+  position: absolute;
+  right: 0;
+  margin: 1rem;
+  border-radius: 100%;
+  width: 1.5rem;
+  height: 1.5rem;
+}

package/lib/components/Searchbar/searchbarBase.module.css

@@ -0,0 +1,20 @@
+.searchbar {
+  position: relative;
+}
+
+.searchbar[data-autocomplete="true"][aria-expanded="true"] input {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.searchbar nav {
+  display: none;
+}
+
+.searchbar[aria-expanded="true"] nav {
+  position: absolute;
+  display: block;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  margin-top: -2px;
+}

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

@@ -81,27 +81,27 @@ export const Default: Story = {
         label: 'Velg status',
         options: [
           {
-            group: '1',
+            groupId: '1',
             value: 'draft',
             label: 'Utkast',
           },
           {
-            group: '1',
+            groupId: '1',
             value: 'sent',
             label: 'Sendt',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'in-progress',
             label: 'Under arbeid',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'requires-attention',
             label: 'Krever handling',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'completed',
             label: 'Avsluttet',
           },
@@ -157,27 +157,27 @@ export const FilterAndSearch: Story = {
         label: 'Velg status',
         options: [
           {
-            group: '1',
+            groupId: '1',
             value: 'draft',
             label: 'Utkast',
           },
           {
-            group: '1',
+            groupId: '1',
             value: 'sent',
             label: 'Sendt',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'in-progress',
             label: 'Under arbeid',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'requires-attention',
             label: 'Krever handling',
           },
           {
-            group: '2',
+            groupId: '2',
             value: 'completed',
             label: 'Avsluttet',
           },

package/lib/components/Toolbar/Toolbar.tsx

@@ -1,5 +1,6 @@
 'use client';
 import { useMemo, useState } from 'react';
+import { useRootContext } from '../RootProvider';
 import { ToolbarAdd } from './ToolbarAdd';
 import { ToolbarBase } from './ToolbarBase';
 import { ToolbarFilter, type ToolbarFilterProps } from './ToolbarFilter.tsx';
@@ -32,35 +33,52 @@ export const Toolbar = ({
   menu,
   getFilterLabel,
 }: ToolbarProps) => {
+  const { currentId, openId, closeAll } = useRootContext();
   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[]>(
+
+  const [visibleFilterNames, setVisibleFilterNames] = useState<string[]>(
     filters
-      ?.filter((item) => item.removable && typeof applicableFilterState[item.name] === 'undefined')
+      ?.filter((item) => !(item.removable && typeof applicableFilterState[item.name] === 'undefined'))
       .map((item) => item.name) ?? [],
   );
 
+  const hiddenFilterNames = filters?.filter((item) => !visibleFilterNames.includes(item.name));
+
   const visibleFilters = useMemo(
-    () => filters.filter((item) => !hiddenFilterNames.includes(item.name)),
-    [filters, hiddenFilterNames],
+    () =>
+      visibleFilterNames
+        .map((name) => {
+          return filters.find((item) => item.name === name);
+        })
+        .filter((item) => typeof item !== 'undefined'),
+    [filters, visibleFilterNames],
   );
+
   const hiddenFilters = useMemo(
-    () => filters.filter((item) => hiddenFilterNames.includes(item.name)),
+    () => filters.filter((item) => hiddenFilterNames.includes(item)),
     [filters, hiddenFilterNames],
   );
 
   const onToggle = (type: ExpandedItemType, name: string) => {
     if (expandedItem?.name === name && expandedItem.type === type) {
+      closeAll();
       setExpandedItem(null);
     } else {
+      openId('toolbar');
       setExpandedItem({ name, type });
     }
   };
 
+  const onClose = () => {
+    setExpandedItem(null);
+    closeAll();
+  };
+
   const onFilterChange = (name: string, value: ToolbarFilterProps['value'], optionType: ToolbarOptionType) => {
     if (optionType === 'radio') {
       changeFilterState({
@@ -81,7 +99,7 @@ export const Toolbar = ({
   };
 
   const onFilterRemove = (name: string) => {
-    setHiddenFilterNames((prevState) => [...prevState, name]);
+    setVisibleFilterNames((prevState) => prevState.filter((prevName) => prevName !== name));
     changeFilterState({
       ...applicableFilterState,
       [name]: undefined,
@@ -89,19 +107,19 @@ export const Toolbar = ({
   };
 
   const onFilterAdd = (name: string) => {
+    setVisibleFilterNames((prevState) => [...prevState, name]);
     onToggle('filter', name);
-    setHiddenFilterNames((prevState) => prevState.filter((prevName) => prevName !== name));
   };
 
   return (
-    <ToolbarBase onClose={() => setExpandedItem(null)}>
+    <ToolbarBase open={currentId === 'toolbar'} onClose={onClose}>
       {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'}
+            expanded={currentId === 'toolbar' && item.name === expandedItem?.name && expandedItem?.type === 'filter'}
             onRemove={() => {
               onFilterRemove(item.name);
             }}
@@ -120,7 +138,7 @@ export const Toolbar = ({
       })}
       {hiddenFilters?.length > 0 && (
         <ToolbarAdd
-          expanded={expandedItem?.type === 'add-filter'}
+          expanded={currentId === 'toolbar' && expandedItem?.type === 'add-filter'}
           onToggle={() => onToggle('add-filter', '')}
           items={hiddenFilters.map((item) => ({
             id: item.name,

package/lib/components/Toolbar/ToolbarAdd.tsx

@@ -1,7 +1,8 @@
 import type { MouseEventHandler } from 'react';
+import { DrawerOrDropdown } from '../';
 import { Menu, type MenuItemProps } from '../Menu';
 import { ToolbarButton } from './ToolbarButton';
-import styles from './toolbar.module.css';
+import styles from './toolbarAdd.module.css';
 
 export interface ToolbarAddProps {
   items: MenuItemProps[];
@@ -13,13 +14,13 @@ export interface ToolbarAddProps {
 
 export const ToolbarAdd = ({ expanded = false, onToggle, label = 'Legg til', items }: ToolbarAddProps) => {
   return (
-    <div className={styles.toggle}>
-      <ToolbarButton as="div" type="add" onToggle={onToggle}>
+    <div className={styles.menu}>
+      <ToolbarButton type="add" onToggle={onToggle}>
         {label}
       </ToolbarButton>
-      <div aria-expanded={expanded} className={styles.dropdown}>
+      <DrawerOrDropdown title={label} onClose={onToggle} expanded={expanded}>
         <Menu theme="global" items={items} />
-      </div>
+      </DrawerOrDropdown>
     </div>
   );
 };

package/lib/components/Toolbar/ToolbarBase.tsx

@@ -1,27 +1,12 @@
 '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';
+import type { ReactNode } from 'react';
+import styles from './toolbarBase.module.css';
 export interface ToolbarBaseProps {
   children?: ReactNode;
+  open?: boolean;
   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>
-  );
+export const ToolbarBase = ({ children }: ToolbarBaseProps) => {
+  return <div className={styles.toolbar}>{children}</div>;
 };

package/lib/components/Toolbar/ToolbarButton.tsx

@@ -28,7 +28,7 @@ export const ToolbarButton = ({
   if (removable) {
     return (
       <ComboButton
-        className={styles.remove}
+        className={styles.removeButton}
         variant={active ? 'solid' : 'outline'}
         color="primary"
         size="sm"

package/lib/components/Toolbar/ToolbarFilter.tsx

@@ -1,8 +1,9 @@
 import type { ChangeEventHandler, MouseEventHandler } from 'react';
+import { DrawerOrDropdown } from '../';
 import type { MenuOptionProps } from '../Menu';
 import { ToolbarButton } from './ToolbarButton';
 import { ToolbarOptions } from './ToolbarOptions';
-import styles from './toolbar.module.css';
+import styles from './toolbarFilter.module.css';
 
 type ToolbarFilterValue = (string | number)[];
 export interface ToolbarFilterProps {
@@ -28,7 +29,7 @@ const defaultGetSelectedLabel = (_: string, value?: ToolbarFilterValue) => {
 };
 
 export const ToolbarFilter = ({
-  expanded,
+  expanded = false,
   removable,
   label,
   name,
@@ -51,9 +52,8 @@ export const ToolbarFilter = ({
   const valueLabel = getSelectedLabel?.(name, value) ?? defaultGetSelectedLabel(name, value);
 
   return (
-    <div className={styles.toggle}>
+    <div className={styles.filter} aria-expanded={expanded}>
       <ToolbarButton
-        as="div"
         type="select"
         removable={removable}
         active={Array.isArray(value) ? value.length > 0 : typeof value !== 'undefined'}
@@ -62,9 +62,14 @@ export const ToolbarFilter = ({
       >
         {valueLabel || label}
       </ToolbarButton>
-      <div className={styles.dropdown} aria-expanded={expanded}>
+      <DrawerOrDropdown
+        expanded={expanded}
+        title={label}
+        onClose={onToggle}
+        button={{ onClick: onToggle, label: 'Vis X treff' }}
+      >
         <ToolbarOptions options={filterOptions} onChange={onChange} optionType={optionType} />
-      </div>
+      </DrawerOrDropdown>
     </div>
   );
 };

package/lib/components/Toolbar/ToolbarMenu.tsx

@@ -1,14 +1,15 @@
 import type { MouseEventHandler } from 'react';
-import { Menu, type MenuGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
+import { DrawerOrDropdown } from '../';
+import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
 import { ToolbarButton } from './ToolbarButton';
-import styles from './toolbar.module.css';
+import styles from './toolbarMenu.module.css';
 
 export interface ToolbarMenuProps {
   onToggle?: MouseEventHandler;
   label: string;
   value: string | number;
   items: MenuItemProps[];
-  groups?: MenuGroups;
+  groups?: MenuItemGroups;
   search?: MenuSearchProps;
   expanded?: boolean;
   className?: string;
@@ -16,13 +17,13 @@ export interface ToolbarMenuProps {
 
 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}>
+    <div className={styles.menu}>
+      <ToolbarButton type="switch" onToggle={onToggle} active={!!value}>
         {label}
       </ToolbarButton>
-      <div className={styles.dropdown} aria-expanded={expanded}>
+      <DrawerOrDropdown expanded={expanded} title="Endre konto" onClose={onToggle}>
         <Menu theme="global" defaultItemColor="subtle" groups={groups} search={search} items={items} />
-      </div>
+      </DrawerOrDropdown>
     </div>
   );
 };

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

@@ -74,31 +74,31 @@ export const RadioCheckbox: Story = {
     },
     options: [
       {
-        group: 'a',
+        groupId: 'a',
         name: 'animal',
         label: 'Katt',
         value: 'cat',
         checked: true,
       },
       {
-        group: 'a',
+        groupId: 'a',
         name: 'animal',
         label: 'Mus',
         value: 'mouse',
       },
       {
-        group: 'a',
+        groupId: 'a',
         name: 'animal',
         label: 'Veggdyr',
         value: 'spider',
       },
       {
-        group: 'b',
+        groupId: 'b',
         label: 'Husarrest',
         value: 'digdir',
       },
       {
-        group: 'b',
+        groupId: 'b',
         checked: true,
         label: 'Piskeslag',
         value: 'helse',