@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/Header/Header.stories.tsx

@@ -1,188 +0,0 @@
-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: {
-    layout: 'fullscreen',
-  },
-  args: {
-    expanded: true,
-    search: {
-      placeholder: 'Søk i Altinn',
-    },
-    menu: {
-      accountGroups: {
-        primary: {
-          title: 'Deg selv og favoritter',
-        },
-        secondary: {
-          title: 'Andre kontoer',
-        },
-      },
-      accounts: [
-        {
-          id: 'party:aurora',
-          groupId: 'primary',
-          type: 'person',
-          name: 'Aurora Mikalsen',
-        },
-        {
-          id: 'party:rakel',
-          groupId: 'favourites',
-          type: 'person',
-          name: 'Rakel Engelsvik',
-        },
-        {
-          id: 'party:auroraskeeperskole',
-          groupId: 'favourites',
-          type: 'company',
-          name: 'Auroras keeperskole',
-        },
-        {
-          id: 'party:aurorashandsker',
-          groupId: 'secondary',
-          type: 'company',
-          name: 'Keeperhansker AS',
-        },
-        {
-          id: 'party:aurorasfotballskole',
-          groupId: 'secondary',
-          type: 'company',
-          name: 'Stadion drift AS',
-        },
-        {
-          id: 'party:aurorasfotballskole',
-          groupId: 'secondary',
-          type: 'company',
-          name: 'Sportsklubben Brann',
-        },
-        {
-          id: 'party:aurorasfotballskole',
-          groupId: 'secondary',
-          type: 'company',
-          name: 'Landslaget',
-        },
-      ],
-      items: [
-        {
-          id: '1',
-          icon: 'airplane',
-          size: 'lg',
-          label: 'Section 1',
-        },
-        {
-          id: '2',
-          icon: 'briefcase',
-          size: 'lg',
-          label: 'Section 2',
-        },
-        {
-          id: '3',
-          size: 'lg',
-          label: 'Section 3',
-          icon: 'camera',
-        },
-      ],
-    },
-  },
-} satisfies Meta<typeof Header>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    currentAccount: {
-      id: 'party:aurora',
-      type: 'person',
-      name: 'Aurora Mikalsen',
-    },
-  },
-};
-
-export const ControlledState = (args) => {
-  const [q, setQ] = useState<string>('');
-  const currentEndUserId = 'party:aurora';
-  const [selectedAccountId, setSelectedAccountId] = useState<string>(currentEndUserId);
-  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
-    ? [
-        {
-          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()))
-    : [];
-
-  const autocomplete = {
-    groups: {
-      2: {
-        title: `${suggestions.length} treff i innboksen`,
-      },
-    },
-    items: [...scopes, ...suggestions],
-  };
-
-  return (
-    <Header
-      {...args}
-      currentAccount={args.menu.accounts.find((account) => account.id === selectedAccountId)}
-      menu={{
-        ...args.menu,
-        ...args.menu.accounts,
-        changeCurrentAccount: setSelectedAccountId,
-      }}
-      search={{
-        ...args.search,
-        value: q,
-        onChange,
-        onClear: () => setQ(''),
-        autocomplete,
-      }}
-    />
-  );
-};

package/lib/components/Header/Header.tsx

@@ -1,71 +0,0 @@
-'use client';
-import { useEscapeKey } from '../../hooks';
-import { DrawerBase, DropdownBase } from '../Dropdown';
-import { GlobalMenu, type GlobalMenuProps } from '../GlobalMenu';
-import type { Account } from '../GlobalMenu/AccountButton.tsx';
-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 } from './HeaderSearch';
-import styles from './header.module.css';
-
-export interface HeaderProps {
-  menu: GlobalMenuProps;
-  search?: SearchbarProps;
-  currentAccount?: Account;
-}
-
-export const Header = ({ search, menu, currentAccount }: HeaderProps) => {
-  const { currentId, toggleId, openId, closeAll } = useRootContext();
-
-  useEscapeKey(closeAll);
-
-  const onSearchFocus = () => {
-    openId('search');
-  };
-
-  const onSearchClose = () => {
-    toggleId('search');
-  };
-
-  const onToggleMenu = () => {
-    toggleId('menu');
-  };
-
-  return (
-    <HeaderBase currentId={currentId} open={currentId === 'search' || currentId === 'menu'} onClose={closeAll}>
-      <HeaderLogo className={styles.logo} />
-      <HeaderMenu className={styles.menu}>
-        <HeaderButton
-          avatar={
-            currentAccount && {
-              type: currentAccount.type,
-              name: currentAccount.name,
-            }
-          }
-          onClick={onToggleMenu}
-          expanded={currentId === 'menu'}
-          label={menu?.menuLabel}
-        />
-        {menu && (
-          <DropdownBase padding={false} placement="right" expanded={currentId === 'menu'} className={styles.dropdown}>
-            <GlobalMenu {...menu} currentAccount={currentAccount} />
-          </DropdownBase>
-        )}
-      </HeaderMenu>
-      {search && (
-        <HeaderSearch expanded={currentId === 'search'}>
-          <Searchbar {...search} expanded={currentId === 'search'} onClose={onSearchClose} onFocus={onSearchFocus} />
-        </HeaderSearch>
-      )}
-      {menu && (
-        <DrawerBase expanded={currentId === 'menu'} className={styles.drawer}>
-          <GlobalMenu {...menu} currentAccount={currentAccount} />
-        </DrawerBase>
-      )}
-    </HeaderBase>
-  );
-};

package/lib/components/Header/HeaderBase.tsx

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

package/lib/components/Header/HeaderButton.stories.ts

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { HeaderButton } from './HeaderButton';
-
-const meta = {
-  title: 'Header/HeaderButton',
-  component: HeaderButton,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  args: {},
-} satisfies Meta<typeof HeaderButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Icon: Story = {
-  args: {
-    icon: 'inbox',
-  },
-};
-
-export const Person: Story = {
-  args: {
-    avatar: {
-      type: 'person',
-      name: 'Aurora Mikalsen',
-    },
-  },
-};
-
-export const Company: Story = {
-  args: {
-    avatar: {
-      type: 'company',
-      name: 'Bergen bar',
-    },
-  },
-};
-
-export const CompanyGroup: Story = {
-  args: {
-    avatarGroup: {
-      defaultType: 'company',
-      items: [
-        {
-          name: 'Bergen bar',
-        },
-        {
-          name: 'Sportsklubben Brann',
-        },
-      ],
-    },
-  },
-};
-
-export const Expanded: Story = {
-  args: {
-    expanded: true,
-    avatar: {
-      type: 'company',
-      name: 'Bergen bar',
-    },
-  },
-};

package/lib/components/Header/HeaderButton.tsx

@@ -1,68 +0,0 @@
-import cx from 'classnames';
-import type { ElementType } from 'react';
-import { Avatar, type AvatarProps } from '../Avatar';
-import { AvatarGroup, type AvatarGroupProps } from '../Avatar';
-import { ButtonBase, type ButtonProps } from '../Button';
-import { Icon, type IconName } from '../Icon';
-
-import styles from './headerButton.module.css';
-
-export interface HeaderButtonProps extends ButtonProps {
-  label?: string;
-  avatar?: AvatarProps;
-  avatarGroup?: AvatarGroupProps;
-  as?: ElementType;
-  className?: string;
-  expanded?: boolean;
-  icon?: IconName;
-  tabIndex?: number;
-}
-
-export const HeaderButton = ({
-  className,
-  as = 'button',
-  avatar,
-  avatarGroup,
-  icon = 'padlock-locked',
-  expanded,
-  label = 'Menu',
-  ...buttonProps
-}: HeaderButtonProps) => {
-  if (expanded) {
-    return (
-      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
-        <span className={styles.label}>{label}</span>
-        <span className={cx(styles.icon, styles.closeIcon)}>
-          <Icon name={'x-mark'} />
-        </span>
-      </ButtonBase>
-    );
-  }
-
-  if (avatarGroup) {
-    return (
-      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
-        <span className={styles.label}>{label}</span>
-        <AvatarGroup {...avatarGroup} size="sm" />
-      </ButtonBase>
-    );
-  }
-
-  if (avatar) {
-    return (
-      <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
-        <span className={styles.label}>{label}</span>
-        <Avatar type={avatar?.type} name={avatar?.name} size="lg" />
-      </ButtonBase>
-    );
-  }
-
-  return (
-    <ButtonBase {...buttonProps} as={as} className={cx(styles.button, className)}>
-      <span className={styles.label}>{label}</span>
-      <span className={cx(styles.icon, styles.loginIcon)}>
-        <Icon name={icon} />
-      </span>
-    </ButtonBase>
-  );
-};

package/lib/components/Header/HeaderLogo.stories.ts

@@ -1,17 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { HeaderLogo } from './HeaderLogo';
-
-const meta = {
-  title: 'Header/HeaderLogo',
-  component: HeaderLogo,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof HeaderLogo>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/components/Header/HeaderLogo.tsx

@@ -1,22 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, MouseEventHandler } from 'react';
-import { ButtonBase } from '../Button';
-import { DigdirLogomark } from './DigdirLogomark.tsx';
-import styles from './headerLogo.module.css';
-
-export interface HeaderLogoProps {
-  className?: string;
-  as?: ElementType;
-  href?: string;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  title?: string;
-}
-
-export const HeaderLogo = ({ className, as = 'a', title = 'Altinn', href = '/' }: HeaderLogoProps) => {
-  return (
-    <ButtonBase as={as} className={cx(styles.logo, className)} href={href}>
-      <DigdirLogomark className={styles.symbol} />
-      <span className={styles.text}>{title}</span>
-    </ButtonBase>
-  );
-};

package/lib/components/Header/HeaderMenu.tsx

@@ -1,17 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import styles from './headerMenu.module.css';
-
-export interface HeaderMenuProps {
-  className?: string;
-  expanded?: boolean;
-  children?: ReactNode;
-}
-
-export const HeaderMenu = ({ expanded = false, className, children }: HeaderMenuProps) => {
-  return (
-    <div className={cx(styles.menu, className)} aria-expanded={expanded}>
-      {children}
-    </div>
-  );
-};

package/lib/components/Header/HeaderSearch.tsx

@@ -1,17 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import styles from './headerSearch.module.css';
-
-export interface HeaderSearchProps {
-  className?: string;
-  expanded?: boolean;
-  children?: ReactNode;
-}
-
-export const HeaderSearch = ({ expanded = false, className, children }: HeaderSearchProps) => {
-  return (
-    <div className={cx(styles.search, className)} aria-expanded={expanded}>
-      {children}
-    </div>
-  );
-};

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

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

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

@@ -1,51 +0,0 @@
-.header {
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  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,37 +0,0 @@
-.button {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.625rem;
-  background-color: var(--global-base-default);
-  color: white;
-  padding: 0.625rem;
-  border: none;
-  border-radius: 4px;
-}
-
-.label {
-  font-size: 1.125rem;
-  font-weight: 500;
-  padding: 0.25rem;
-}
-
-.icon {
-  width: 2.25rem;
-  height: 2.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-  font-size: 1.5rem;
-}
-
-.loginIcon {
-  background-color: white;
-  color: black;
-}
-
-.closeIcon {
-  border: 1px solid white;
-}

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

@@ -1,24 +0,0 @@
-.logo {
-  display: flex;
-  align-items: center;
-  color: currentColor;
-  text-decoration: none;
-}
-
-.symbol {
-  width: 2rem;
-  height: 2rem;
-  margin: 6px;
-}
-
-.riksSymbol {
-  width: 2.5rem;
-  height: 2.5rem;
-  margin: 0;
-}
-
-.text {
-  font-size: 1.5rem;
-  font-weight: 500;
-  padding: 4px;
-}

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

@@ -1,3 +0,0 @@
-.menu {
-  position: relative;
-}

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

@@ -1,21 +0,0 @@
-.search {
-  width: 100%;
-}
-
-.search[aria-expanded="true"] {
-  z-index: 2;
-}
-
-@media (min-width: 1024px) {
-  .search {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-    max-width: 320px;
-  }
-
-  .search[aria-expanded="true"] {
-    max-width: 640px;
-  }
-}

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

@@ -1,28 +0,0 @@
-.button {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown {
-  display: none;
-}
-
-.header {
-  margin: 0.5rem 0;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: block;
-  position: absolute;
-  min-width: 256px;
-  right: 0;
-  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);
-}