@altinn/altinn-components 0.4.0 → 0.5.0

package/lib/components/Dropdown/backdrop.module.css

@@ -1,8 +1,11 @@
 .backdrop {
+  z-index: 1;
   background-color: rgba(17, 29, 70, 0.25);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+  width: 100%;
+  height: 100%;
 }

package/lib/components/Dropdown/drawerBase.module.css

@@ -3,6 +3,15 @@
 }
 
 .drawer[aria-expanded="true"] {
+  background-color: var(--theme-background-default);
   display: block;
   width: 100%;
 }
+
+.drawer[data-placement="bottom"] {
+  position: fixed;
+  top: 5.5rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}

package/lib/components/Dropdown/drawerBody.module.css

@@ -0,0 +1,5 @@
+.body {
+  width: 100%;
+  padding: 0 .5em;
+  overflow-y: scroll;
+}

package/lib/components/Dropdown/drawerButton.module.css

@@ -0,0 +1,6 @@
+.button {
+  height: 3.5rem; /* lg 56 */
+  border-radius: 1.75rem;
+  padding: 0 1rem;
+  margin: 1rem auto;
+}

package/lib/components/Dropdown/drawerFooter.module.css

@@ -0,0 +1,13 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer > * {
+  margin: 1rem auto;
+}

package/lib/components/Dropdown/drawerHeader.module.css

@@ -0,0 +1,17 @@
+.header {
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--theme-border-subtle);
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin: 0;
+}

package/lib/components/Dropdown/drawerOrDropdown.module.css

@@ -0,0 +1,19 @@
+.dropdown[aria-expanded="true"] {
+  display: none;
+}
+
+.drawer[aria-expanded="true"] {
+  display: block;
+  z-index: 2;
+}
+
+@media (min-width: 1024px) {
+  .drawer[aria-expanded="true"] {
+    display: none;
+  }
+
+  .dropdown[aria-expanded="true"] {
+    display: block;
+    z-index: 2;
+  }
+}

package/lib/components/Dropdown/dropdownBase.module.css

@@ -5,14 +5,26 @@
 .dropdown[aria-expanded="true"] {
   display: block;
   position: absolute;
-  right: 0;
   z-index: 2;
 }
 
+.dropdown[data-placement="left"] {
+  left: 0;
+}
+
+.dropdown[data-placement="right"] {
+  right: 0;
+}
+
 .dropdown {
+  min-width: 14rem;
   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);
+  border-radius: 0.375rem;
+  box-shadow: var(--ds-shadow-md);
+}
+
+.drawer .button {
+  border-radius: 50%;
 }

package/lib/components/Dropdown/index.ts

@@ -1,3 +1,9 @@
-export * from './DrawerBase';
 export * from './DropdownBase';
 export * from './Backdrop';
+
+export * from './DrawerBase';
+export * from './DrawerHeader';
+export * from './DrawerFooter';
+export * from './DrawerButton';
+export * from './DrawerBody';
+export * from './DrawerOrDropdown';

package/lib/components/Footer/footerMenu.module.css

@@ -5,6 +5,11 @@
 }
 
 .list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+
   display: flex;
   flex-direction: column;
   row-gap: 1rem;

package/lib/components/GlobalMenu/GlobalMenu.stories.tsx

@@ -16,14 +16,14 @@ const meta = {
     items: [
       {
         id: 'inbox',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'inbox',
         label: 'Innboks',
       },
       {
         id: 'settings',
-        group: 'apps',
+        groupId: 'apps',
         size: 'lg',
         icon: 'cog',
         label: 'Settings',
@@ -144,43 +144,43 @@ export const Accounts: Story = {
     },
     accounts: [
       {
-        group: 'primary',
+        groupId: 'primary',
         type: 'person',
         name: 'Aurora Mikalsen',
         selected: true,
       },
       {
-        group: 'favourites',
+        groupId: 'favourites',
         type: 'person',
         name: 'Rakel Engelsvik',
         selected: false,
       },
       {
-        group: 'favourites',
+        groupId: 'favourites',
         type: 'company',
         name: 'Auroras keeperskole',
         selected: false,
       },
       {
-        group: 'secondary',
+        groupId: 'secondary',
         type: 'company',
         name: 'Keeperhansker AS',
         selected: false,
       },
       {
-        group: 'secondary',
+        groupId: 'secondary',
         type: 'company',
         name: 'Stadion drift AS',
         selected: false,
       },
       {
-        group: 'secondary',
+        groupId: 'secondary',
         type: 'company',
         name: 'Sportsklubben Brann',
         selected: false,
       },
       {
-        group: 'secondary',
+        groupId: 'secondary',
         type: 'company',
         name: 'Landslaget',
         selected: false,

package/lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,7 +1,7 @@
 'use client';
 import { type MouseEventHandler, useState } from 'react';
 import type { AvatarType } from '../Avatar';
-import { Menu, type MenuGroups, MenuItem, type MenuItemProps, type MenuSearchProps } from '../Menu';
+import { Menu, MenuItem, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
 
 export type Account = {
   type: AvatarType;
@@ -22,9 +22,9 @@ export interface GlobalMenuProps {
   expanded: boolean;
   onToggle: MouseEventHandler;
   items: MenuItemProps[];
-  groups?: MenuGroups;
+  groups?: MenuItemGroups;
   accounts?: Account[];
-  accountGroups?: MenuGroups;
+  accountGroups?: MenuItemGroups;
   accountSearch?: AccountSearch;
   menuLabel?: string;
   backLabel?: string;
@@ -76,7 +76,7 @@ export const GlobalMenu = ({
         .map((item) => {
           return {
             ...item,
-            group: 'search',
+            groupId: 'search',
           };
         })
     : accountMenu;
@@ -106,7 +106,7 @@ export const GlobalMenu = ({
   };
 
   const accountSwitcher: MenuItemProps[] = [
-    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', group: 'search', hidden: true }]),
+    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]),
   ];
 
   if (selectAccount) {

package/lib/components/Header/{Header.stories.ts → Header.stories.tsx}

@@ -1,11 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { Header } from './Header';
 
 const meta = {
   title: 'Header/Header',
   component: Header,
   tags: ['autodocs'],
-  parameters: {},
+  parameters: {
+    layout: 'fullscreen',
+  },
   args: {
     expanded: true,
     search: {
@@ -22,43 +25,43 @@ const meta = {
       },
       accounts: [
         {
-          group: 'primary',
+          groupId: 'primary',
           type: 'person',
           name: 'Aurora Mikalsen',
           selected: true,
         },
         {
-          group: 'favourites',
+          groupId: 'favourites',
           type: 'person',
           name: 'Rakel Engelsvik',
           selected: false,
         },
         {
-          group: 'favourites',
+          groupId: 'favourites',
           type: 'company',
           name: 'Auroras keeperskole',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Keeperhansker AS',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Stadion drift AS',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Sportsklubben Brann',
           selected: false,
         },
         {
-          group: 'secondary',
+          groupId: 'secondary',
           type: 'company',
           name: 'Landslaget',
           selected: false,
@@ -93,21 +96,77 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-export const Company: Story = {
-  args: {
-    menu: {
-      ...meta.args?.menu,
-      accounts: [
+export const ControlledState = (args) => {
+  const [q, setQ] = useState<string>('');
+  const onChange = (event) => {
+    setQ(event.target.value);
+  };
+
+  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
+    ? [
         {
-          type: 'company',
-          name: 'Bergen bar',
-          selected: true,
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2024',
         },
         {
-          type: 'person',
-          name: 'Aurora Mikalsen',
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          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 (
+    <Header
+      {...args}
+      search={{
+        ...args.search,
+        value: q,
+        onChange,
+        onClear: () => setQ(''),
+        autocomplete,
+      }}
+    />
+  );
 };

package/lib/components/Header/Header.tsx

@@ -1,88 +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 HeaderAccountProps {
-  type?: string;
-  name?: string;
-}
-
 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 onSearchBlur = () => {
-    setExpandedType(null);
+  const onSearchClose = () => {
+    toggleId('search');
+  };
+
+  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}>
+          <DropdownBase placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
             <GlobalMenu {...menu} variant="dropdown" />
           </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} variant="drawer" 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;
+  }
+}