@altinn/altinn-components 0.6.0 → 0.6.1

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

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { AccountMenu } from './AccountMenu';
-
-const meta = {
-  title: 'GlobalMenu/AccountMenu',
-  component: AccountMenu,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    accountGroups: {
-      primary: {
-        title: 'Deg selv og favoritter',
-      },
-      secondary: {
-        title: 'Andre kontoer',
-      },
-    },
-    accounts: [
-      {
-        groupId: 'primary',
-        type: 'person',
-        name: 'Aurora Mikalsen',
-        selected: true,
-      },
-      {
-        groupId: 'favourites',
-        type: 'company',
-        name: 'Bergen Bar',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Keeperhansker AS',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Stadion drift AS',
-        selected: false,
-      },
-      {
-        groupId: 'favourites',
-        type: 'company',
-        name: 'Sportsklubben Brann',
-        selected: false,
-      },
-      {
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Landslaget',
-        selected: false,
-      },
-    ],
-  },
-} satisfies Meta<typeof AccountMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/components/GlobalMenu/AccountMenu.tsx

@@ -1,82 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { Menu, type MenuItemGroups, type MenuItemProps, type MenuSearchProps } from '../Menu';
-
-export interface AccountSearch extends MenuSearchProps {
-  getResultsLabel?: (hits: number) => string;
-  hidden?: boolean;
-}
-
-export interface AccountMenuItem {
-  type: 'person' | 'company';
-  name: string;
-  id: string;
-  groupId?: string;
-  selected?: boolean;
-}
-
-export interface AccountMenuProps {
-  accounts?: AccountMenuItem[];
-  accountGroups?: MenuItemGroups;
-  accountSearch?: AccountSearch;
-  currentAccount?: AccountMenuItem;
-  onSelectAccount?: (id: string) => void;
-}
-
-const defaultResultLabel = (hits: number) => `${hits} hits`;
-
-export const AccountMenu = ({
-  accounts = [],
-  accountGroups = {},
-  accountSearch,
-  onSelectAccount,
-  currentAccount,
-}: AccountMenuProps) => {
-  const accountMenu: MenuItemProps[] = accounts.map((account) => ({
-    id: account.id || account.name,
-    groupId: account.groupId || 'search',
-    selected: account.selected ?? currentAccount?.id === account.id,
-    title: account.name,
-    avatar: {
-      type: account.type,
-      name: account.name,
-    },
-    onClick: () => onSelectAccount?.(account.id || account.name),
-  }));
-
-  const [filterString, setFilterString] = useState<string>('');
-
-  const filteredAccountMenu = filterString
-    ? accountMenu
-        .filter((item) => item?.title?.toLowerCase().includes(filterString.toLowerCase()))
-        .map((item) => {
-          return {
-            ...item,
-            groupId: 'search',
-          };
-        })
-    : accountMenu;
-
-  const filterAccountGroups = filterString
-    ? {
-        search: {
-          title:
-            accountSearch?.getResultsLabel?.(filteredAccountMenu.length) ??
-            defaultResultLabel(filteredAccountMenu.length),
-        },
-      }
-    : accountGroups;
-
-  const accountSearchItem: MenuSearchProps = {
-    name: 'account-search',
-    value: filterString,
-    placeholder: accountSearch?.placeholder ?? 'Find account',
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => setFilterString(event.target.value),
-  };
-
-  const accountSwitcher: MenuItemProps[] = [
-    ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', groupId: 'search', hidden: true }]),
-  ];
-
-  return <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />;
-};

package/lib/components/GlobalMenu/BackButton.tsx

@@ -1,10 +0,0 @@
-import { MenuItem } from '../Menu';
-
-export interface BackButtonProps {
-  label: string;
-  onClick?: () => void;
-}
-
-export const BackButton = ({ label, onClick }: BackButtonProps) => {
-  return <MenuItem id="back" icon="arrow-left" title={label} onClick={onClick} />;
-};

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

@@ -1,181 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-import { GlobalMenu } from './GlobalMenu';
-
-const meta = {
-  title: 'GlobalMenu/GlobalMenu',
-  component: GlobalMenu,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    accountGroups: {
-      primary: {
-        title: 'Deg selv og favoritter',
-      },
-      secondary: {
-        title: 'Andre kontoer',
-      },
-    },
-    currentAccount: {
-      type: 'person',
-      name: 'Mathias Dyngeland',
-      description: 'Fødselsnr. 07101995 XXXXXX',
-    },
-    accounts: [
-      {
-        id: 'party:mathias',
-        groupId: 'primary',
-        type: 'person',
-        name: 'Mathias Dyngeland',
-      },
-      {
-        id: 'party:bergerbar',
-        groupId: 'favourites',
-        type: 'company',
-        name: 'Bergen bar',
-      },
-      {
-        id: 'party:keeperhansker',
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Keeperhansker AS',
-      },
-      {
-        id: 'party:stadiondrift',
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Stadion drift AS',
-      },
-      {
-        id: 'party:brann',
-        groupId: 'favourites',
-        type: 'company',
-        name: 'Sportsklubben Brann',
-      },
-      {
-        id: 'party:landslaget',
-        groupId: 'secondary',
-        type: 'company',
-        name: 'Landslaget',
-      },
-    ],
-    groups: {
-      apps: {
-        divider: true,
-      },
-    },
-    items: [
-      {
-        id: 'inbox',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'inbox',
-        title: 'Innboks',
-        badge: {
-          color: 'alert',
-          label: '4',
-        },
-      },
-      {
-        id: 'access',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'bookmark',
-        title: 'Tilganger',
-        badge: {
-          color: 'alert',
-          label: '2',
-        },
-      },
-      {
-        id: 'access',
-        groupId: 'apps',
-        size: 'lg',
-        icon: 'menu-grid',
-        title: 'Alle skjema',
-      },
-      {
-        id: 'startup',
-        groupId: 'help',
-        color: 'neutral',
-        size: 'sm',
-        icon: 'buildings2',
-        title: 'Starte og drive bedrift',
-      },
-      {
-        id: 'help',
-        groupId: 'help',
-        size: 'sm',
-        color: 'neutral',
-        icon: 'chat-exclamationmark',
-        title: 'Trenger du hjelp?',
-      },
-    ],
-  },
-} satisfies Meta<typeof GlobalMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Login: Story = {
-  args: {
-    currentAccount: undefined,
-    items: [
-      {
-        id: 'login',
-        groupId: 'login',
-        size: 'lg',
-        color: 'strong',
-        icon: 'padlock-locked',
-        title: 'Logg inn',
-      },
-      {
-        id: 'startup',
-        groupId: 'help',
-        color: 'neutral',
-        size: 'sm',
-        icon: 'buildings2',
-        title: 'Starte og drive bedrift',
-      },
-      {
-        id: 'help',
-        groupId: 'help',
-        color: 'neutral',
-        size: 'sm',
-        icon: 'chat-exclamationmark',
-        title: 'Trenger du hjelp?',
-      },
-    ],
-  },
-};
-
-export const Company: Story = {
-  args: {
-    currentAccount: {
-      type: 'company',
-      name: 'Sportsklubben Brann',
-      description: 'Org. nr. 934908988',
-    },
-  },
-};
-
-export const CustomLabels: Story = {
-  args: {
-    logoutLabel: 'Logg ut',
-    menuLabel: 'Meny',
-    backLabel: 'Tilbake',
-    changeLabel: 'Endre konto',
-    accountSearch: {
-      placeholder: 'Søk etter konto',
-      getResultsLabel: (hits = 0) => {
-        if (hits) {
-          return hits + ' treff';
-        }
-        return 'Ingen treff';
-      },
-      hidden: false,
-    },
-  },
-};

package/lib/components/GlobalMenu/GlobalMenu.tsx

@@ -1,86 +0,0 @@
-'use client';
-import { useState } from 'react';
-import { Menu, type MenuItemGroups, type MenuItemProps } from '../Menu';
-import { type Account, AccountButton } from './AccountButton';
-import { AccountMenu, type AccountMenuProps } from './AccountMenu';
-import { BackButton } from './BackButton';
-import { GlobalMenuBase, GlobalMenuFooter, GlobalMenuHeader } from './GlobalMenuBase';
-import { LogoutButton, type LogoutButtonProps } from './LogoutButton';
-
-export interface GlobalMenuProps extends AccountMenuProps {
-  items: MenuItemProps[];
-  groups?: MenuItemGroups;
-  menuLabel?: string;
-  backLabel?: string;
-  logoutButton?: LogoutButtonProps;
-  changeLabel?: string;
-  className?: string;
-  currentAccount?: Account;
-  changeCurrentAccount?: (id: string) => void;
-}
-
-export const GlobalMenu = ({
-  accounts = [],
-  accountGroups = {},
-  accountSearch,
-  items = [],
-  groups,
-  changeLabel = 'Change',
-  backLabel = 'Back',
-  currentAccount,
-  changeCurrentAccount,
-  logoutButton,
-}: GlobalMenuProps) => {
-  const [selectingAccount, setSelectingAccount] = useState<boolean>(false);
-
-  const onToggleAccounts = () => {
-    setSelectingAccount((prevState) => !prevState);
-  };
-
-  const onSelectAccount = (id: string) => {
-    onToggleAccounts();
-    changeCurrentAccount?.(id);
-  };
-
-  if (selectingAccount) {
-    return (
-      <GlobalMenuBase>
-        <BackButton onClick={onToggleAccounts} label={backLabel} />
-        <AccountMenu
-          currentAccount={currentAccount}
-          accounts={accounts}
-          accountGroups={accountGroups}
-          accountSearch={accountSearch}
-          onSelectAccount={onSelectAccount}
-        />
-      </GlobalMenuBase>
-    );
-  }
-
-  if (currentAccount) {
-    return (
-      <GlobalMenuBase>
-        <GlobalMenuHeader>
-          <AccountButton
-            account={currentAccount}
-            linkText={changeLabel}
-            multipleAccounts={accounts.length > 1}
-            onClick={onToggleAccounts}
-          />
-        </GlobalMenuHeader>
-        <Menu groups={groups} items={items} />
-        {logoutButton && (
-          <GlobalMenuFooter>
-            <LogoutButton {...logoutButton} />
-          </GlobalMenuFooter>
-        )}
-      </GlobalMenuBase>
-    );
-  }
-
-  return (
-    <GlobalMenuBase>
-      <Menu groups={groups} items={items} />
-    </GlobalMenuBase>
-  );
-};

package/lib/components/GlobalMenu/GlobalMenuBase.tsx

@@ -1,22 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './globalMenuBase.module.css';
-
-export interface GlobalMenuBaseProps {
-  children: ReactNode;
-}
-
-export const GlobalMenuBase = ({ children }: GlobalMenuBaseProps) => {
-  return (
-    <nav className={styles.nav} data-theme="global">
-      {children}
-    </nav>
-  );
-};
-
-export const GlobalMenuHeader = ({ children }: GlobalMenuBaseProps) => {
-  return <header className={styles.header}>{children}</header>;
-};
-
-export const GlobalMenuFooter = ({ children }: GlobalMenuBaseProps) => {
-  return <footer className={styles.footer}>{children}</footer>;
-};

package/lib/components/GlobalMenu/LogoutButton.tsx

@@ -1,19 +0,0 @@
-import type { MouseEventHandler, ReactNode } from 'react';
-import { ButtonBase, ButtonLabel } from '../Button';
-import styles from './logoutButton.module.css';
-
-export interface LogoutButtonProps {
-  label?: string;
-  children?: ReactNode;
-  onClick?: MouseEventHandler;
-}
-
-export const LogoutButton = ({ label = 'Logout', children, onClick }: LogoutButtonProps) => {
-  return (
-    <ButtonBase className={styles.button} variant="outline" size="lg" onClick={onClick}>
-      <ButtonLabel className={styles.label} size="lg">
-        {children || label}
-      </ButtonLabel>
-    </ButtonBase>
-  );
-};

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