@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Dropdown/DrawerButton.tsx

@@ -0,0 +1,17 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import { ButtonBase, ButtonLabel } from '../';
+import styles from './drawerButton.module.css';
+
+export interface DrawerButtonProps {
+  label?: string;
+  children?: ReactNode;
+  onClick?: MouseEventHandler;
+}
+
+export const DrawerButton = ({ label, children, onClick }: DrawerButtonProps) => {
+  return (
+    <ButtonBase variant="solid" size="md" className={styles.button} onClick={onClick}>
+      <ButtonLabel size="md">{children || label}</ButtonLabel>
+    </ButtonBase>
+  );
+};

package/lib/components/Dropdown/DrawerFooter.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './drawerFooter.module.css';
+
+export interface DrawerFooterProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DrawerFooter = ({ className, children }: DrawerFooterProps) => {
+  return <footer className={cx(styles.footer, className)}>{children}</footer>;
+};

package/lib/components/Dropdown/DrawerHeader.tsx

@@ -0,0 +1,19 @@
+import cx from 'classnames';
+import type { MouseEventHandler } from 'react';
+import { IconButton } from '../Button';
+import styles from './drawerHeader.module.css';
+
+export interface DrawerHeaderProps {
+  className?: string;
+  title?: string;
+  onClose?: MouseEventHandler;
+}
+
+export const DrawerHeader = ({ className, title, onClose }: DrawerHeaderProps) => {
+  return (
+    <header className={cx(styles.header, className)}>
+      <h2 className={styles.title}>{title}</h2>
+      <IconButton size="sm" icon="x-mark" variant="outline" onClick={onClose} className={styles.close} />
+    </header>
+  );
+};

package/lib/components/Dropdown/DrawerOrDropdown.tsx

@@ -0,0 +1,29 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import { DrawerBase, DrawerBody, DrawerButton, DrawerFooter, DrawerHeader, DropdownBase } from '../';
+import type { DrawerButtonProps } from '../';
+import { Backdrop } from './Backdrop';
+import styles from './drawerOrDropdown.module.css';
+
+export interface DrawerOrDropdownProps {
+  title: string;
+  children: ReactNode;
+  expanded?: boolean;
+  onClose?: MouseEventHandler;
+  button?: DrawerButtonProps;
+}
+
+export const DrawerOrDropdown = ({ expanded = false, title, onClose, button, children }: DrawerOrDropdownProps) => {
+  return (
+    <>
+      {expanded && <Backdrop onClick={onClose} />}
+      <DropdownBase className={styles.dropdown} expanded={expanded}>
+        {children}
+      </DropdownBase>
+      <DrawerBase className={styles.drawer} placement="bottom" expanded={expanded}>
+        <DrawerHeader title={title} onClose={onClose} />
+        <DrawerBody>{children}</DrawerBody>
+        <DrawerFooter>{button && <DrawerButton onClick={button?.onClick}>{button?.label}</DrawerButton>}</DrawerFooter>
+      </DrawerBase>
+    </>
+  );
+};

package/lib/components/Dropdown/DropdownBase.tsx

@@ -2,15 +2,30 @@ import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './dropdownBase.module.css';
 
+export type DropdownPlacement = 'left' | 'right';
+
 export interface DropdownBaseProps {
+  placement?: DropdownPlacement;
+  padding?: boolean;
   expanded?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-export const DropdownBase = ({ expanded = false, className, children }: DropdownBaseProps) => {
+export const DropdownBase = ({
+  placement = 'left',
+  padding = true,
+  expanded = false,
+  className,
+  children,
+}: DropdownBaseProps) => {
   return (
-    <div className={cx(styles.dropdown, className)} aria-expanded={expanded}>
+    <div
+      className={cx(styles.dropdown, className)}
+      data-placement={placement}
+      data-padding={padding}
+      aria-expanded={expanded}
+    >
       {children}
     </div>
   );

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,30 @@
 .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[data-padding="trur"] {
+  padding: 0 0.5rem;
+}
+
 .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);
+  overflow: hidden;
+}
+
+.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/AccountButton.tsx

@@ -0,0 +1,29 @@
+import { MenuItemBase, MenuItemLabel, MenuItemMedia } from '../Menu';
+
+type Account = {
+  type: 'person' | 'company';
+  name: string;
+  description?: string;
+};
+
+export type AccountButtonProps = {
+  account: Account;
+  description?: string;
+  linkText?: string;
+  onClick?: () => void;
+};
+
+export const AccountButton = ({ account, linkText, onClick }: AccountButtonProps) => {
+  return (
+    <MenuItemBase size="lg" onClick={onClick} linkText={linkText} linkIcon="arrow-right">
+      <MenuItemMedia
+        size="lg"
+        avatar={{
+          name: account.name,
+          type: account.type,
+        }}
+      />
+      <MenuItemLabel size="lg" title={account?.name} description={account?.description} />
+    </MenuItemBase>
+  );
+};

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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,73 @@
+'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;
+}
+
+const defaultResultLabel = (hits: number) => `${hits} hits`;
+
+export const AccountMenu = ({ accounts = [], accountGroups = {}, accountSearch }: AccountMenuProps) => {
+  const accountMenu: MenuItemProps[] = accounts.map((account) => ({
+    id: account.name,
+    groupId: account.groupId || 'search',
+    selected: account.selected,
+    title: account.name,
+    avatar: {
+      type: account.type,
+      name: 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

@@ -0,0 +1,10 @@
+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} />;
+};