@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Dialog/dialogSelect.module.css

@@ -0,0 +1,34 @@
+.label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  padding: .75rem;
+  border-radius: 50%;
+  border: 0;
+}
+
+.label:hover {
+  background-color: var(--theme-surface-default);
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+}
+
+.icon {
+  font-size: 1.25rem;
+}
+
+.icon {
+  color: var(--theme-base-default);
+}
+
+.icon [data-hover="true"] {
+  opacity: 0;
+}
+
+.label:hover [data-hover="true"] {
+  opacity: 1;
+}

package/lib/components/Dialog/dialogTitle.module.css

@@ -0,0 +1,47 @@
+.title {
+  font-weight: 600;
+  margin: 0;
+  padding-right: 1.25rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title[data-size="xs"] {
+  font-size: 1rem;
+}
+
+.title[data-size="sm"] {
+  font-size: 1rem;
+}
+
+.title[data-size="md"] {
+  font-size: 1.125rem;
+  line-height: 1.2;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.25rem;
+  line-height: 1.2;
+}
+
+.title[data-size="xl"] {
+  font-size: 1.5rem;
+  line-height: 1.25;
+}
+
+.title[data-seen="true"] {
+  font-weight: 400;
+}
+
+.title[data-variant="archive"] {
+  font-weight: 400;
+}
+
+.title[data-variant="bin"] {
+  font-weight: 400;
+  text-decoration: line-through;
+}

package/lib/components/Dropdown/Backdrop.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { MouseEventHandler } from 'react';
+import styles from './backdrop.module.css';
+
+export interface BackdropProps {
+  className?: string;
+  onClick?: MouseEventHandler;
+}
+
+export const Backdrop = ({ className, onClick }: BackdropProps) => {
+  return <div className={cx(styles.backdrop, className)} onMouseDown={onClick} />;
+};

package/lib/components/Dropdown/DrawerBase.tsx

@@ -0,0 +1,20 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './drawerBase.module.css';
+
+export type DrawerPlacement = 'inline' | 'bottom';
+
+export interface DrawerBaseProps {
+  placement?: DrawerPlacement;
+  expanded?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DrawerBase = ({ placement = 'inline', expanded = false, className, children }: DrawerBaseProps) => {
+  return (
+    <div className={cx(styles.drawer, className)} data-placement={placement} aria-expanded={expanded}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Dropdown/DrawerBody.tsx

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

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} padding={true} 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

@@ -0,0 +1,32 @@
+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 = ({
+  placement = 'left',
+  padding = true,
+  expanded = false,
+  className,
+  children,
+}: DropdownBaseProps) => {
+  return (
+    <div
+      className={cx(styles.dropdown, className)}
+      data-placement={placement}
+      data-padding={padding}
+      aria-expanded={expanded}
+    >
+      {children}
+    </div>
+  );
+};

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

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

@@ -0,0 +1,17 @@
+.drawer {
+  display: none;
+}
+
+.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

@@ -0,0 +1,35 @@
+.dropdown {
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  z-index: 2;
+}
+
+.dropdown[data-placement="left"] {
+  left: 0;
+}
+
+.dropdown[data-placement="right"] {
+  right: 0;
+}
+
+.dropdown[data-padding="true"] {
+  padding: 0 0.5rem;
+}
+
+.dropdown {
+  min-width: 14rem;
+  max-width: 20rem;
+  margin-top: 0.5rem;
+  background-color: var(--neutral-background-default);
+  border-radius: 0.375rem;
+  box-shadow: var(--ds-shadow-md);
+  overflow: hidden;
+}
+
+.drawer .button {
+  border-radius: 50%;
+}

package/{dist/components/Dropdown/index.d.ts → lib/components/Dropdown/index.ts}

@@ -1,5 +1,6 @@
 export * from './DropdownBase';
 export * from './Backdrop';
+
 export * from './DrawerBase';
 export * from './DrawerHeader';
 export * from './DrawerFooter';

package/lib/components/Footer/Footer.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+
+const meta = {
+  title: 'Footer/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    address: 'Postboks 1382 Vika, 0114 Oslo.',
+    menu: {
+      items: [
+        {
+          id: '1',
+          title: 'Om Altinn',
+        },
+        {
+          id: '2',
+          title: 'Driftsmeldinger',
+        },
+        {
+          id: '3',
+          title: 'Personvern',
+        },
+        {
+          id: '4',
+          title: 'Tilgjengelighet',
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { FooterAddress } from './FooterAddress';
+import { FooterBase } from './FooterBase';
+import { FooterLogo } from './FooterLogo';
+import { FooterMenu, type FooterMenuProps } from './FooterMenu';
+
+export interface FooterProps {
+  address: string;
+  menu: FooterMenuProps;
+}
+
+export const Footer = ({ address, menu }: FooterProps) => {
+  return (
+    <FooterBase>
+      <FooterAddress>
+        <FooterLogo />
+        {address}
+      </FooterAddress>
+      <FooterMenu {...menu} />
+    </FooterBase>
+  );
+};

package/lib/components/Footer/FooterAddress.tsx

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

package/lib/components/Footer/FooterBase.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerBase.module.css';
+
+export interface FooterBaseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterBase = ({ className, children }: FooterBaseProps) => {
+  return (
+    <footer className={cx(styles.footer, className)}>
+      <div className={styles.grid}>{children} </div>
+    </footer>
+  );
+};

package/lib/components/Footer/FooterLogo.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import { DigdirLogomark } from '../Header/DigdirLogomark.tsx';
+import styles from './footerLogo.module.css';
+
+export interface FooterLogoProps {
+  className?: string;
+  title?: string;
+}
+
+export const FooterLogo = ({ className, title = 'Digdir' }: FooterLogoProps) => {
+  return (
+    <div className={cx(styles.logo, className)}>
+      <DigdirLogomark className={styles.symbol} />
+      <span>{title}</span>
+    </div>
+  );
+};

package/lib/components/Footer/FooterMenu.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+import { MenuBase } from '../Menu/';
+import styles from './footerMenu.module.css';
+
+export interface FooterMenuProps {
+  className?: string;
+  items: FooterLinkProps[];
+}
+
+export interface FooterLinkProps {
+  id: string;
+  as?: ElementType;
+  href?: string;
+  title?: string;
+  className?: string;
+}
+
+export const FooterLink = ({ as, className, title, ...rest }: FooterLinkProps) => {
+  const Component = as || 'a';
+
+  return (
+    <Component className={cx(styles.link, className)} {...rest}>
+      {title}
+    </Component>
+  );
+};
+
+export const FooterMenu = ({ className, items = [] }: FooterMenuProps) => {
+  return (
+    <MenuBase className={cx(styles.menu, className)}>
+      <ul className={styles.list}>
+        {items.map((item) => {
+          return (
+            <li key={item.id}>
+              <FooterLink {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </MenuBase>
+  );
+};

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

@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  font-style: normal;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

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

@@ -0,0 +1,28 @@
+.footer {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+
+  padding: 1rem 0;
+  margin: 2rem 1rem;
+}
+
+.grid {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    padding: 0 1rem;
+    flex-direction: row;
+  }
+}

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

@@ -0,0 +1,12 @@
+.logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5em;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.symbol {
+  width: 1rem;
+  height: 1rem;
+}

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

@@ -0,0 +1,35 @@
+.menu {
+  position: relative;
+  font-size: .875rem;
+  line-height: 1.5;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-indent: 0;
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .list {
+    flex-direction: row;
+    align-items: center;
+    justify-content: start;
+    column-gap: .5rem;
+    width: auto;
+  }
+}
+
+.list .item:hover {
+  background-color: var(--global-base-hover);
+}
+
+.link {
+  color: inherit;
+  text-decoration: underline;
+}

package/lib/components/GlobalMenu/AccountButton.tsx

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