@altinn/altinn-components 0.6.0 → 0.6.1

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-.body {
-  width: 100%;
-  padding: 0 .5em;
-  overflow-y: scroll;
-}

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

@@ -1,6 +0,0 @@
-.button {
-  height: 3.5rem; /* lg 56 */
-  border-radius: 1.75rem;
-  padding: 0 1rem;
-  margin: 1rem auto;
-}

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

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

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

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

@@ -1,35 +0,0 @@
-.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/lib/components/Footer/Footer.stories.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,46 +0,0 @@
-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>
-  );
-};