@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Header/Header.tsx

@@ -1,83 +1,70 @@
 'use client';
-import cx from 'classnames';
-import { useState } from 'react';
-import { Backdrop, DrawerBase, DropdownBase } from '../Dropdown';
+import { useEscapeKey } from '../../hooks';
+import { DrawerBase, DropdownBase } from '../Dropdown';
 import { GlobalMenu, type GlobalMenuProps } from '../GlobalMenu';
+import { useRootContext } from '../RootProvider';
+import { Searchbar, type SearchbarProps } from '../Searchbar';
 import { HeaderBase } from './HeaderBase';
 import { HeaderButton } from './HeaderButton';
 import { HeaderLogo } from './HeaderLogo';
 import { HeaderMenu } from './HeaderMenu';
-import { HeaderSearch, type HeaderSearchProps } from './HeaderSearch';
 import styles from './header.module.css';
 
-export type HeaderExpandedType = 'search' | 'menu' | null;
-
 export interface HeaderProps {
   menu: GlobalMenuProps;
-  search?: HeaderSearchProps;
+  search?: SearchbarProps;
 }
 
 export const Header = ({ search, menu }: HeaderProps) => {
-  const [expandedType, setExpandedType] = useState<HeaderExpandedType | null>(null);
-  const selectedAccount = menu?.accounts?.find((account) => account.selected);
+  const { currentId, toggleId, openId, closeAll } = useRootContext();
+  const selectedAccount = menu.accounts?.find((account) => account.selected);
   const selectedAvatar = selectedAccount && {
     type: selectedAccount.type,
     name: selectedAccount.name,
   };
 
-  const onToggle = (type: HeaderExpandedType) => {
-    if (expandedType === type) {
-      setExpandedType(null);
-    } else {
-      setExpandedType(type);
-    }
-  };
+  useEscapeKey(closeAll);
 
   const onSearchFocus = () => {
-    setExpandedType('search');
+    openId('search');
+  };
+
+  const onSearchClose = () => {
+    toggleId('search');
   };
 
-  const onSearchBlur = () => {
-    setExpandedType(null);
+  const onToggleMenu = () => {
+    toggleId('menu');
   };
 
   return (
-    <HeaderBase
-      className={cx(
-        styles.header,
-        expandedType === 'menu' && styles.menuExpanded,
-        expandedType === 'search' && styles.searchExpanded,
-      )}
-      expanded={(expandedType && true) || false}
-    >
-      <Backdrop className={styles.backdrop} />
+    <HeaderBase currentId={currentId} open={currentId === 'search' || currentId === 'menu'} onClose={closeAll}>
       <HeaderLogo className={styles.logo} />
       <HeaderMenu className={styles.menu}>
         <HeaderButton
           avatar={selectedAvatar}
-          onClick={() => onToggle('menu')}
-          expanded={expandedType === 'menu'}
+          onClick={onToggleMenu}
+          expanded={currentId === 'menu'}
           label={menu?.menuLabel}
         />
         {menu && (
-          <DropdownBase expanded={expandedType === 'menu'} className={styles.dropdown}>
-            <GlobalMenu {...menu} variant="dropdown" />
+          <DropdownBase padding={false} placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
+            <GlobalMenu {...menu} currentEndUser={selectedAccount} />
           </DropdownBase>
         )}
       </HeaderMenu>
-
       {search && (
-        <HeaderSearch
+        <Searchbar
           {...search}
           className={styles.search}
-          expanded={expandedType === 'search'}
-          onBlur={onSearchBlur}
+          expanded={currentId === 'search'}
+          onClose={onSearchClose}
           onFocus={onSearchFocus}
         />
       )}
       {menu && (
-        <DrawerBase expanded={expandedType === 'menu'} className={styles.drawer}>
-          <GlobalMenu {...menu} variant="drawer" expanded={expandedType === 'menu'} />
+        <DrawerBase expanded={currentId === 'menu'} className={styles.drawer}>
+          <GlobalMenu {...menu} currentEndUser={selectedAccount} expanded={currentId === 'menu'} />
         </DrawerBase>
       )}
     </HeaderBase>

package/lib/components/Header/HeaderBase.tsx

@@ -1,16 +1,20 @@
 import cx from 'classnames';
 import type { ReactNode } from 'react';
+import { Backdrop } from '../';
 import styles from './headerBase.module.css';
 
 export interface HeaderBaseProps {
-  expanded?: boolean;
+  currentId?: string;
   className?: string;
   children?: ReactNode;
+  open?: boolean;
+  onClose?: () => void;
 }
 
-export const HeaderBase = ({ expanded, className, children }: HeaderBaseProps) => {
+export const HeaderBase = ({ currentId, className, children, open, onClose }: HeaderBaseProps) => {
   return (
-    <header className={cx(styles.header, className)} aria-expanded={expanded}>
+    <header className={cx(styles.header, className)} data-current-id={currentId}>
+      {open && <Backdrop className={styles.backdrop} onClick={onClose} />}
       {children}
     </header>
   );

package/lib/components/Header/header.module.css

@@ -1,35 +1,26 @@
-.backdrop {
-  display: none;
-  z-index: 2;
-}
-
-.header .drawer[aria-expanded="true"] {
+.drawer[aria-expanded="true"] {
   display: block;
 }
 
-.header .dropdown[aria-expanded="true"] {
+.dropdown[aria-expanded="true"] {
   width: 320px;
   display: none;
 }
 
-/* menu */
-
-.header.menuExpanded {
-  background-color: white;
+@media (min-width: 1024px) {
+  .dropdown[aria-expanded="true"] {
+    display: block;
+  }
 }
 
 @media (min-width: 1024px) {
-  .header.menuExpanded {
-    background-color: transparent;
+  .drawer[aria-expanded="true"] {
+    display: none;
   }
 
-  .header.menuExpanded .backdrop {
+  .dropdown[aria-expanded="true"] {
     display: block;
   }
-
-  .header.menuExpanded .menu {
-    z-index: 2;
-  }
 }
 
 /* search */
@@ -38,31 +29,7 @@
   width: 100%;
 }
 
-.header.searchExpanded {
-  margin-top: -72px;
-}
-
-.header.searchExpanded .search {
-  z-index: 2;
-}
-
-.header.searchExpanded .backdrop {
-  display: block;
-}
-
 @media (min-width: 1024px) {
-  .header.searchExpanded {
-    margin-top: 0;
-  }
-
-  .header .drawer[aria-expanded="true"] {
-    display: none;
-  }
-
-  .header .dropdown[aria-expanded="true"] {
-    display: block;
-  }
-
   .search {
     position: absolute;
     left: 0;
@@ -72,6 +39,7 @@
   }
 
   .search[aria-expanded="true"] {
+    z-index: 2;
     max-width: 640px;
   }
 }

package/lib/components/Header/headerBase.module.css

@@ -1,4 +1,5 @@
 .header {
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -6,3 +7,45 @@
   gap: 1rem;
   padding: 1rem;
 }
+
+.backdrop {
+  display: none;
+}
+
+/* menu */
+
+.header[data-current-id="menu"] {
+  background-color: white;
+}
+
+@media (min-width: 1024px) {
+  .header[data-current-id="menu"] {
+    background-color: transparent;
+  }
+
+  .header[data-current-id="menu"] .backdrop {
+    display: block;
+  }
+}
+
+/* search */
+
+.header {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: .15s;
+}
+
+.header[data-current-id="search"] {
+  margin-top: -72px;
+}
+
+.header[data-current-id="search"] .backdrop {
+  display: block;
+}
+
+@media (min-width: 1024px) {
+  .header[data-current-id="search"] {
+    margin-top: 0;
+  }
+}

package/lib/components/Header/headerButton.module.css

@@ -1,5 +1,6 @@
 .button {
   position: relative;
+  z-index: 2;
   display: inline-flex;
   align-items: center;
   column-gap: 0.625rem;

package/lib/components/Layout/Layout.stories.tsx

@@ -53,7 +53,7 @@ const menu: MenuProps = {
   items: [
     {
       id: '1',
-      group: 1,
+      groupId: 1,
       size: 'lg',
       icon: 'inbox',
       title: 'Innboks',
@@ -61,7 +61,7 @@ const menu: MenuProps = {
     },
     {
       id: '2',
-      group: 2,
+      groupId: 2,
       icon: 'doc-pencil',
       title: 'Utkast',
     },
@@ -74,19 +74,19 @@ const menu: MenuProps = {
     },
     {
       id: '4',
-      group: 3,
+      groupId: 3,
       icon: 'bookmark',
       title: 'Lagrede søk',
     },
     {
       id: '5',
-      group: 4,
+      groupId: 4,
       icon: 'archive',
       title: 'Arkivert',
     },
     {
       id: '6',
-      group: 4,
+      groupId: 4,
       disabled: true,
       icon: 'trash',
       title: 'Papirkurv',
@@ -102,6 +102,7 @@ const meta = {
     layout: 'fullscreen',
   },
   args: {
+    theme: 'person',
     header,
     footer,
     sidebar: {
@@ -117,44 +118,82 @@ export const Default: Story = {
   args: {},
 };
 
-export const GlobalCompany: Story = {
-  args: {
-    sidebar: {
-      menu: {
-        ...menu,
-        defaultItemColor: 'company',
-      },
-    },
-  },
-};
+export const ControlledStateSearch = (args) => {
+  const [q, setQ] = useState<string>('');
+  const onChange = (event) => {
+    setQ(event.target.value);
+  };
 
-export const GlobalPerson: Story = {
-  args: {
-    sidebar: {
-      menu: {
-        ...menu,
-        defaultItemColor: 'person',
-      },
+  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',
+    },
+  ];
 
-export const Neutral: Story = {
-  args: {
-    theme: 'neutral',
-  },
-};
+  const suggestions = q
+    ? [
+        {
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2024',
+        },
+        {
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2025',
+        },
+      ].filter((item) => item.label.toLowerCase().includes((q ?? '').toLowerCase()))
+    : [];
 
-export const Company: Story = {
-  args: {
-    theme: 'company',
-  },
-};
+  const autocomplete = {
+    groups: {
+      2: {
+        title: `${suggestions.length} treff i innboksen`,
+      },
+    },
+    items: [...scopes, ...suggestions],
+  };
 
-export const Person: Story = {
-  args: {
-    theme: 'person',
-  },
+  return (
+    <Layout
+      {...args}
+      header={{
+        ...args.header,
+        search: {
+          ...args.header.search,
+          value: q,
+          onChange,
+          onClear: () => setQ(''),
+          autocomplete,
+        },
+      }}
+    />
+  );
 };
 
 export const InboxBulkMode = (args) => {

package/lib/components/Layout/Layout.tsx

@@ -3,6 +3,7 @@ import { LayoutBase, LayoutBody, LayoutContent, LayoutSidebar, type LayoutTheme
 import { Footer, type FooterProps } from '../Footer';
 import { Header, type HeaderProps } from '../Header';
 import { Menu, type MenuProps } from '../Menu';
+import { useRootContext } from '../RootProvider';
 
 interface SidebarProps {
   theme?: LayoutTheme;
@@ -19,15 +20,16 @@ export interface LayoutProps {
   theme?: LayoutTheme;
   header?: HeaderProps;
   footer?: FooterProps;
-  sidebar: SidebarProps;
-  content: ContentProps;
+  sidebar?: SidebarProps;
+  content?: ContentProps;
   children: ReactNode;
 }
 
 export const Layout = ({ theme = 'global', header, footer, sidebar = {}, content = {}, children }: LayoutProps) => {
+  const { currentId } = useRootContext();
   const { menu, ...sideRestProps } = sidebar;
   return (
-    <LayoutBase theme={theme}>
+    <LayoutBase theme={theme} currentId={currentId}>
       {header && <Header {...header} />}
       <LayoutBody>
         {sidebar && (

package/lib/components/Layout/LayoutBase.tsx

@@ -5,6 +5,7 @@ export type LayoutTheme = 'global' | 'global-dark' | 'neutral' | 'company' | 'pe
 
 export interface LayoutBaseProps {
   theme?: LayoutTheme;
+  currentId?: string;
   children?: ReactNode;
 }
 
@@ -21,9 +22,9 @@ export interface LayoutBaseProps {
  *  - Footer
  *
  */
-export const LayoutBase = ({ theme, children }: LayoutBaseProps) => {
+export const LayoutBase = ({ currentId, theme, children }: LayoutBaseProps) => {
   return (
-    <div className={styles.base} data-theme={theme}>
+    <div className={styles.base} data-theme={theme} data-current-id={currentId}>
       {children}
     </div>
   );

package/lib/components/Layout/layoutBase.module.css

@@ -9,3 +9,14 @@
 .base[data-theme] {
   background-color: var(--theme-background-subtle);
 }
+
+.base[data-current-id="menu"] {
+  background-color: var(--theme-background-default);
+}
+
+@media (max-width: 1024px) {
+  .base[data-current-id="menu"] header + *,
+  .base[data-current-id="menu"] footer {
+    display: none;
+  }
+}

package/lib/components/Layout/layoutBody.module.css

@@ -3,6 +3,7 @@
   width: 100%;
   max-width: 1280px;
   margin: 0 auto;
+  padding: 0 1rem;
   display: flex;
   column-gap: 2em;
 }

package/lib/components/LayoutAction/ActionHeader.tsx

@@ -13,7 +13,7 @@ export const ActionHeader = ({ hidden = false, title, dismissable = true, onDism
   return (
     <header className={styles.header} aria-hidden={hidden} data-theme="global-dark">
       <h2 className={styles.title}>{title}</h2>
-      {dismissable && <IconButton icon="x-mark" onClick={onDismiss} className={styles.dismiss} />}
+      {dismissable && <IconButton icon="x-mark" variant="outline" onClick={onDismiss} className={styles.dismiss} />}
     </header>
   );
 };

package/lib/components/LayoutAction/ActionMenu.tsx

@@ -1,10 +1,8 @@
-import { MenuBase, MenuItem, type MenuItemProps } from '../Menu';
+import { MenuBase, MenuItem, type MenuItemProps, type MenuTheme } from '../Menu';
 import styles from './actionMenu.module.css';
 
-type ActionMenuTheme = 'inherit' | 'global-dark';
-
 export interface ActionMenuProps {
-  theme?: ActionMenuTheme;
+  theme?: MenuTheme;
   items?: MenuItemProps[];
 }
 

package/lib/components/LayoutAction/actionMenu.module.css

@@ -14,6 +14,9 @@
 .list {
   display: flex;
   flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
 @media (min-width: 1024px) {

package/lib/components/List/List.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, useState } from 'react';
+
+import { MetaItem } from '../Meta';
+import { List, ListBase, ListItem } from './';
+
+const sizes = ['lg', 'md', 'sm', 'xs'];
+
+const meta = {
+  title: 'List/List',
+  component: List,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    items: [
+      {
+        id: '1',
+        title: 'Title',
+        description: 'Description',
+        href: '#',
+      },
+      {
+        id: '2',
+        title: 'Title',
+        description: 'Description',
+        href: '#',
+      },
+      {
+        id: '3',
+        title: 'Title',
+        description: 'Description',
+        href: '#',
+      },
+    ],
+  },
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/List/List.tsx

@@ -1,18 +1,18 @@
-import type { LayoutTheme } from '../Layout';
-import { ListBase } from '../List';
+import { ListBase, type ListSpacing, type ListTheme } from '../List';
 import { ListItem, type ListItemProps } from './ListItem';
 import type { ListItemSize } from './ListItemBase';
 
 export interface ListProps {
   size?: ListItemSize;
-  theme?: LayoutTheme;
+  spacing?: ListSpacing;
+  theme?: ListTheme;
   items?: ListItemProps[];
 }
 
-export const List = ({ theme, size = 'md', items }: ListProps) => {
+export const List = ({ theme, size = 'md', spacing = 'md', items = [] }: ListProps) => {
   return (
-    <ListBase theme={theme} size={size}>
-      {items?.map((item, index) => {
+    <ListBase theme={theme} spacing={spacing}>
+      {items.map((item, index) => {
         return <ListItem {...item} size={size} key={'item' + index} />;
       })}
     </ListBase>

package/lib/components/List/ListBase.tsx

@@ -1,18 +1,18 @@
 import type { ReactNode } from 'react';
 import styles from './listBase.module.css';
 
-import type { LayoutTheme } from '../Layout';
-import type { ListItemSize } from './ListItemBase';
+export type ListTheme = 'inherit' | 'global' | 'neutral' | 'person' | 'company';
+export type ListSpacing = 'none' | 'sm' | 'md' | 'lg';
 
 export interface ListBaseProps {
-  size?: ListItemSize;
-  theme?: LayoutTheme;
+  theme?: ListTheme;
+  spacing?: ListSpacing;
   children?: ReactNode;
 }
 
-export const ListBase = ({ size = 'md', theme, children }: ListBaseProps) => {
+export const ListBase = ({ theme = 'inherit', spacing = 'md', children }: ListBaseProps) => {
   return (
-    <div className={styles.list} data-theme={theme} data-size={size}>
+    <div className={styles.list} data-theme={theme} data-spacing={spacing}>
       {children}
     </div>
   );

package/lib/components/List/ListItem.tsx

@@ -13,7 +13,10 @@ export interface ListItemProps {
   as?: ElementType;
   color?: ListItemColor;
   href?: string;
-  onClick?: () => void;
+  onClick?(): void;
+  /** Item is active */
+  active?: boolean;
+  /** Item should be hidden from view */
   hidden?: boolean;
   /** Collapsible item, sets linkIcon to "chevron down" */
   collapsible?: boolean;