@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/LayoutAction/ActionFooter.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Snackbar } from '../Snackbar';
-import { ActionFooter } from './ActionFooter';
-import { ActionMenu } from './ActionMenu';
-
-const menu = {
-  items: [
-    {
-      id: '1',
-      icon: 'arrow-redo',
-      title: 'Del og gi tilgang',
-    },
-    {
-      id: '2',
-      icon: 'eye',
-      title: 'Marker som lest',
-    },
-    {
-      id: '3',
-      icon: 'archive',
-      title: 'Flytt til arkiv',
-    },
-    {
-      id: '4',
-      icon: 'trash',
-      title: 'Flytt til papirkurv',
-    },
-  ],
-};
-
-const meta = {
-  title: 'LayoutAction/ActionFooter',
-  component: ActionFooter,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof ActionFooter>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Menu: Story = {
-  args: {
-    children: <ActionMenu {...menu} />,
-  },
-};
-
-export const Snackbars: Story = {
-  args: {
-    children: (
-      <>
-        <Snackbar message="A message" />
-        <Snackbar message="Some other message" />
-        <Snackbar message="Another message" />
-      </>
-    ),
-  },
-};
-
-export const MenuAndSnackbar: Story = {
-  args: {
-    children: (
-      <>
-        <Snackbar message="Snack 1" />
-        <ActionMenu {...menu} theme="global-dark" />
-      </>
-    ),
-  },
-};

package/lib/components/LayoutAction/ActionFooter.tsx

@@ -1,15 +0,0 @@
-import type { ReactElement } from 'react';
-import styles from './actionFooter.module.css';
-
-export interface ActionFooterProps {
-  hidden: boolean;
-  children?: ReactElement;
-}
-
-export const ActionFooter = ({ hidden = false, children }: ActionFooterProps) => {
-  return (
-    <footer className={styles.footer} aria-hidden={hidden}>
-      {children}
-    </footer>
-  );
-};

package/lib/components/LayoutAction/ActionHeader.stories.ts

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ActionHeader } from './ActionHeader';
-
-const meta = {
-  title: 'LayoutAction/ActionHeader',
-  component: ActionHeader,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {},
-} satisfies Meta<typeof ActionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    title: 'Title',
-  },
-};

package/lib/components/LayoutAction/ActionHeader.tsx

@@ -1,19 +0,0 @@
-import styles from './actionHeader.module.css';
-
-import { IconButton } from '../Button';
-
-export interface ActionHeaderProps {
-  title: string;
-  hidden?: boolean;
-  dismissable?: boolean;
-  onDismiss?: () => void;
-}
-
-export const ActionHeader = ({ hidden = false, title, dismissable = true, onDismiss }: ActionHeaderProps) => {
-  return (
-    <header className={styles.header} aria-hidden={hidden} data-theme="global-dark">
-      <h2 className={styles.title}>{title}</h2>
-      {dismissable && <IconButton icon="x-mark" variant="outline" onClick={onDismiss} className={styles.dismiss} />}
-    </header>
-  );
-};

package/lib/components/LayoutAction/ActionMenu.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ActionMenu } from './ActionMenu';
-
-const meta = {
-  title: 'LayoutAction/ActionMenu',
-  component: ActionMenu,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    theme: 'global-dark',
-    items: [
-      {
-        id: '1',
-        icon: 'arrow-redo',
-        title: 'Del og gi tilgang',
-      },
-      {
-        id: '2',
-        icon: 'eye',
-        title: 'Marker som lest',
-      },
-      {
-        id: '3',
-        icon: 'archive',
-        title: 'Flytt til arkiv',
-      },
-      {
-        id: '4',
-        icon: 'trash',
-        title: 'Flytt til papirkurv',
-      },
-    ],
-  },
-} satisfies Meta<typeof ActionMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/lib/components/LayoutAction/ActionMenu.tsx

@@ -1,23 +0,0 @@
-import { MenuBase, MenuItem, type MenuItemProps, type MenuTheme } from '../Menu';
-import styles from './actionMenu.module.css';
-
-export interface ActionMenuProps {
-  theme?: MenuTheme;
-  items?: MenuItemProps[];
-}
-
-export const ActionMenu = ({ theme = 'inherit', items = [] }: ActionMenuProps) => {
-  return (
-    <MenuBase theme={theme} className={styles.menu}>
-      <ul className={styles.list}>
-        {items.map((item) => {
-          return (
-            <li key={item.id}>
-              <MenuItem {...item} className={styles.item} />
-            </li>
-          );
-        })}
-      </ul>
-    </MenuBase>
-  );
-};

package/lib/components/LayoutAction/actionFooter.module.css

@@ -1,28 +0,0 @@
-.footer {
-  position: fixed;
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  row-gap: .5rem;
-  padding: 1rem;
-}
-
-.footer {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: .15s;
-  transform: translateY(0);
-}
-
-.footer[aria-hidden="true"] {
-  transform: translateY(100%);
-}
-
-@media (min-width: 1024px) {
-  .footer {
-    align-items: center;
-  }
-}

package/lib/components/LayoutAction/actionHeader.module.css

@@ -1,55 +0,0 @@
-.header {
-  position: fixed;
-  z-index: 10;
-  top: 0;
-  right: 0;
-  bottom: auto;
-  left: 0;
-}
-
-.header {
-  background-color: var(--global-base-default);
-  color: white;
-  height: 76px;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-}
-
-.header {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: .15s;
-  transform: translateY(0);
-}
-
-.header[aria-hidden="true"] {
-  transform: translateY(-100%);
-}
-
-.title {
-  font-size: 1rem;
-  font-weight: normal;
-}
-
-.button {
-  border: 1px solid #fff;
-  width: 2.75rem;
-  height: 2.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-}
-
-.button:hover {
-  background-color: var(--global-base-hover);
-}
-
-.icon {
-  font-size: 1.5rem;
-}

package/lib/components/LayoutAction/actionMenu.module.css

@@ -1,30 +0,0 @@
-.menu {
-  padding: 0 .5rem;
-  border-radius: 0.375rem;
-}
-
-.menu[data-theme] {
-  background-color: var(--theme-background-subtle);
-}
-
-.menu[data-theme="inherit"] {
-  background-color: inherit;
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-@media (min-width: 1024px) {
-  .list {
-    flex-direction: row;
-    align-items: center;
-    justify-content: start;
-    column-gap: .5rem;
-    width: auto;
-  }
-}

package/lib/components/List/List.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment, useState } from 'react';
-
-import { MetaItem } from '../Meta';
-import { List, ListBase, ListItem } from './';
-
-const sizes = ['lg', 'md', 'sm', 'xs'];
-
-const meta = {
-  title: 'List/List',
-  component: List,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    items: [
-      {
-        id: '1',
-        title: 'Title',
-        description: 'Description',
-        href: '#',
-      },
-      {
-        id: '2',
-        title: 'Title',
-        description: 'Description',
-        href: '#',
-      },
-      {
-        id: '3',
-        title: 'Title',
-        description: 'Description',
-        href: '#',
-      },
-    ],
-  },
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};

package/lib/components/List/List.tsx

@@ -1,20 +0,0 @@
-import { ListBase, type ListSpacing, type ListTheme } from '../List';
-import { ListItem, type ListItemProps } from './ListItem';
-import type { ListItemSize } from './ListItemBase';
-
-export interface ListProps {
-  size?: ListItemSize;
-  spacing?: ListSpacing;
-  theme?: ListTheme;
-  items?: ListItemProps[];
-}
-
-export const List = ({ theme, size = 'md', spacing = 'md', items = [] }: ListProps) => {
-  return (
-    <ListBase theme={theme} spacing={spacing}>
-      {items.map((item, index) => {
-        return <ListItem {...item} size={size} key={'item' + index} />;
-      })}
-    </ListBase>
-  );
-};

package/lib/components/List/ListBase.tsx

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './listBase.module.css';
-
-export type ListTheme = 'inherit' | 'global' | 'neutral' | 'person' | 'company';
-export type ListSpacing = 'none' | 'sm' | 'md' | 'lg';
-
-export interface ListBaseProps {
-  theme?: ListTheme;
-  spacing?: ListSpacing;
-  children?: ReactNode;
-}
-
-export const ListBase = ({ theme = 'inherit', spacing = 'md', children }: ListBaseProps) => {
-  return (
-    <div className={styles.list} data-theme={theme} data-spacing={spacing}>
-      {children}
-    </div>
-  );
-};

package/lib/components/List/ListItem.stories.tsx

@@ -1,208 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment, useState } from 'react';
-
-import { MetaItem } from '../Meta';
-import { List, ListBase, ListItem } from './';
-
-const sizes = ['lg', 'md', 'sm', 'xs'];
-
-const meta = {
-  title: 'List/ListItem',
-  component: ListItem,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    id: 'id',
-    title: 'Title',
-    description: 'Description',
-    size: 'md',
-    href: '#',
-  },
-} satisfies Meta<typeof ListItem>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Icon: Story = {
-  args: {
-    icon: 'teddy-bear',
-  },
-};
-
-export const IconAccent: Story = {
-  args: {
-    color: 'accent',
-    icon: 'teddy-bear',
-  },
-};
-
-export const Person: Story = {
-  args: {
-    avatar: {
-      type: 'person',
-      name: 'Erik Huseklepp',
-    },
-  },
-};
-
-export const Company: Story = {
-  args: {
-    avatar: {
-      type: 'company',
-      name: 'Sportsklubben Brann',
-    },
-  },
-};
-
-export const Logo: Story = {
-  args: {
-    avatar: {
-      type: 'company',
-      name: 'Politiets sikkerhetstjeneste',
-      imageUrl:
-        'https://media.licdn.com/dms/image/v2/D4D0BAQH7Yv86kmHN5g/company-logo_200_200/company-logo_200_200/0/1688735908848?e=1738195200&v=beta&t=f-Mkzd03bqzdQN4IT0h89VQ9_Jri1iJ6XphYYnjsgEo',
-    },
-  },
-};
-
-export const PeopleGroup: Story = {
-  args: {
-    avatarGroup: {
-      items: [
-        {
-          type: 'person',
-          name: 'Albert Åberg',
-        },
-        {
-          type: 'person',
-          name: 'Birger Meling',
-        },
-        {
-          type: 'person',
-          name: 'Celine Dion',
-        },
-      ],
-    },
-  },
-};
-
-export const CompanyGroup: Story = {
-  args: {
-    avatarGroup: {
-      items: [
-        {
-          type: 'company',
-          name: 'Albert Åberg',
-        },
-        {
-          type: 'company',
-          name: 'Birger Meling',
-        },
-        {
-          type: 'company',
-          name: 'Celine Dion',
-        },
-      ],
-    },
-  },
-};
-
-export const LongTitle: Story = {
-  args: {
-    avatar: {
-      type: 'company',
-      name: 'Direktoratet for samfunnssikkerhet og beredskap',
-      imageUrl:
-        'https://media.licdn.com/dms/image/v2/C510BAQHlQiOWI4f45w/company-logo_200_200/company-logo_200_200/0/1631389121726?e=1738195200&v=beta&t=Q1P8kOwpgLvoqHBxyrHCaYd2upNkPQVi2zSSxJzbdCA',
-    },
-    title:
-      'Samtykke for å reparere elektrisk utstyr hvis bruk er forbundet med særlig risiko, herunder elektromedisinsk utstyr',
-    description: 'Direktoratet for samfunnssikkerhet og beredskap',
-  },
-};
-
-export const Sizes = (args) => {
-  return (
-    <ListBase>
-      {sizes?.map((size) => {
-        return (
-          <Fragment key={size}>
-            <ListItem {...args} size={size} selected={size === args?.size} />
-            <MetaItem>{size}</MetaItem>
-          </Fragment>
-        );
-      })}
-    </ListBase>
-  );
-};
-
-export const Collapsible = (args) => {
-  const [expanded, setExpanded] = useState(false);
-
-  const onToggle = () => {
-    setExpanded((prevState) => !prevState);
-  };
-
-  const people = [
-    {
-      name: 'Per Ove Ludvigsen',
-      role: 'Sportlig leder',
-      rights: 'Admin',
-    },
-    {
-      name: 'Eirik Horneland',
-      role: 'Trener',
-      rights: 'Admin',
-    },
-    {
-      name: 'Erik Huseklepp',
-      role: 'Assistenttrener',
-      rights: 'Lese og skrive',
-    },
-    {
-      name: 'Hassan El Fakiri',
-      role: 'Toppspillerutvikler',
-      rights: 'Ingen rettigheter',
-    },
-  ];
-
-  const items = people?.map((item) => {
-    return {
-      avatar: {
-        ...item,
-        type: 'person',
-      },
-      title: item?.name,
-      description: item?.role,
-      badge: { label: item?.rights },
-      linkIcon: 'menu-elipsis-horizontal',
-    };
-  });
-
-  const avatarGroup = {
-    items: people?.map((item) => {
-      return {
-        name: item?.name,
-        type: 'person',
-      };
-    }),
-  };
-
-  return (
-    <Fragment>
-      <ListItem
-        {...args}
-        avatarGroup={avatarGroup}
-        collapsible={true}
-        expanded={expanded}
-        onClick={onToggle}
-        as="button"
-      />
-      {expanded && <List size="xs" items={items} />}
-    </Fragment>
-  );
-};

package/lib/components/List/ListItem.tsx

@@ -1,73 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import type { AvatarGroupProps, AvatarProps } from '../Avatar';
-import type { BadgeProps } from '../Badge';
-import type { IconName } from '../Icon';
-import { ListItemBase, type ListItemColor, type ListItemSize } from './ListItemBase';
-import { ListItemLabel } from './ListItemLabel';
-import { ListItemMedia } from './ListItemMedia';
-
-export interface ListItemProps {
-  id: string;
-  type?: string;
-  /** Element type to render */
-  as?: ElementType;
-  color?: ListItemColor;
-  href?: string;
-  onClick?(): void;
-  /** Item is active */
-  active?: boolean;
-  /** Item should be hidden from view */
-  hidden?: boolean;
-  /** Collapsible item, sets linkIcon to "chevron down" */
-  collapsible?: boolean;
-  /** Item is expanded, sets linkIcon to "chevron up" */
-  expanded?: boolean;
-  /** Item is selected */
-  selected?: boolean;
-  /** Item is disabled, should disable mouse events */
-  disabled?: boolean;
-  /** Display an icon indicating behaviour */
-  linkIcon?: IconName;
-  /** Size of list item */
-  size?: ListItemSize;
-  /** Title */
-  title?: string;
-  /** Optional description */
-  description?: string;
-  /** Optional badge */
-  badge?: BadgeProps;
-  /** List item icon */
-  icon?: IconName;
-  /** List item avatar */
-  avatar?: AvatarProps;
-  /** List item avatarGroup */
-  avatarGroup?: AvatarGroupProps;
-  children?: ReactNode;
-  items?: ListItemProps[];
-  className?: string;
-}
-
-export const ListItem = ({
-  as = 'a',
-  color,
-  children,
-  selected,
-  disabled,
-  size = 'sm',
-  icon,
-  avatar,
-  avatarGroup,
-  badge,
-  title,
-  description,
-  ...rest
-}: ListItemProps) => {
-  return (
-    <ListItemBase as={as} size={size} badge={badge} color={color} selected={selected} {...rest}>
-      <ListItemMedia color={color} size={size} icon={icon} avatar={avatar} avatarGroup={avatarGroup} />
-      <ListItemLabel title={title} description={description} size={size}>
-        {children}
-      </ListItemLabel>
-    </ListItemBase>
-  );
-};