@altinn/altinn-components 0.6.2 → 0.6.3

package/lib/components/GlobalMenu/globalMenuBase.module.css

@@ -1,39 +0,0 @@
-.nav {
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  padding: 0 0.5rem;
-}
-
-.header {
-  border-bottom: 1px solid var(--theme-border-subtle);
-}
-
-.footer {
-  border-top: 1px solid var(--theme-border-subtle);
-  padding: 1rem 0.5rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.drawer[aria-expanded="true"] {
-  display: block;
-  padding: 0.5rem;
-  z-index: 2;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: none;
-}
-
-@media (min-width: 1024px) {
-  .drawer[aria-expanded="true"] {
-    display: none;
-  }
-
-  .dropdown[aria-expanded="true"] {
-    display: block;
-    z-index: 2;
-  }
-}

package/lib/components/GlobalMenu/logoutButton.module.css

@@ -1,9 +0,0 @@
-.button {
-  justify-content: center;
-}
-
-.label {
-  display: block;
-  width: 100%;
-  text-align: center;
-}

package/lib/components/Header/DigdirLogomark.tsx

@@ -1,23 +0,0 @@
-export interface SymbolProps {
-  className?: string;
-  title?: string;
-}
-
-export const DigdirLogomark = ({ className, title = 'Digdir logomark' }: SymbolProps) => {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <title>{title}</title>
-      <path
-        d="M12.3167 0H0.486059C0.357148 0 0.233518 0.0511029 0.142363 0.142066C0.0512097 0.23303 0 0.356402 0 0.485044V23.515C0 23.6436 0.0512097 23.767 0.142363 23.8579C0.233518 23.9489 0.357148 24 0.486059 24H12.3167C15.4455 23.9112 18.4163 22.6085 20.5979 20.3686C22.7795 18.1288 24 15.1284 24 12.0049C24 8.88133 22.7795 5.88089 20.5979 3.64106C18.4163 1.40122 15.4455 0.0985018 12.3167 0.00970113V0ZM13.4735 20.3815C11.6835 20.689 9.84199 20.4199 8.21543 19.6132C6.58891 18.8066 5.26188 17.5042 4.42651 15.8948C3.59114 14.2853 3.29078 12.4523 3.56892 10.6611C3.84707 8.86999 4.68929 7.2137 5.97362 5.93205C7.25795 4.6504 8.91774 3.80994 10.7126 3.53237C12.5075 3.25481 14.3444 3.55454 15.9572 4.38817C17.57 5.2218 18.875 6.54605 19.6834 8.16918C20.4918 9.79233 20.7614 11.6301 20.4534 13.4163C20.1535 15.1547 19.3216 16.7576 18.0717 18.0049C16.8218 19.2521 15.2155 20.0824 13.4735 20.3815Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

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;
-}