@altinn/altinn-components 0.1.0 → 0.2.0

package/lib/components/Icon/checkboxIcon.module.css

@@ -1,3 +1,4 @@
+/*
 .checkbox {
   font-size: 1rem;
   border: 2px solid;
@@ -19,3 +20,4 @@
 .checkbox > svg {
   stroke: currentColor;
 }
+  */

package/lib/components/Icon/index.ts

@@ -2,4 +2,5 @@ export * from './Icon';
 export * from './SvgIcon';
 export * from './CheckboxIcon';
 export * from './RadioIcon';
+export * from './ProgressIcon';
 export * from './iconsMap';

package/lib/components/Icon/progressIcon.module.css

@@ -0,0 +1,29 @@
+.progress {
+  --size: 16px;
+  width: var(--size);
+  height: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: conic-gradient(var(--theme-border-strong) var(--progress, 0), var(--theme-surface-default) 0);
+  display: grid;
+  place-content: center;
+  transform: scaleX(-1);
+}
+
+.progress:after {
+  width: calc(var(--size) * 0.5);
+  height: calc(var(--size) * 0.5);
+  aspect-ratio: 1;
+  content: attr(data-value);
+  display: grid;
+  background: #fff;
+  border-radius: 50%;
+  font-size: 0;
+  place-content: center;
+}
+
+.complete {
+  width: var(--size);
+  height: var(--size);
+  color: var(--theme-border-strong);
+}

package/lib/components/Layout/Layout.stories.ts

@@ -11,7 +11,6 @@ const menu: MenuProps = {
       size: 'lg',
       icon: 'inbox',
       title: 'Innboks',
-      badge: '4',
     },
     {
       id: '2',
@@ -25,14 +24,12 @@ const menu: MenuProps = {
       icon: 'file-checkmark',
       selected: true,
       title: 'Sendt',
-      badge: '2',
     },
     {
       id: '4',
       group: 3,
       icon: 'bookmark',
       title: 'Lagrede søk',
-      badge: '11',
     },
     {
       id: '5',

package/lib/components/List/List.tsx

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

package/lib/components/List/ListBase.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import styles from './listBase.module.css';
+
+import type { LayoutTheme } from '../Layout';
+import type { ListItemSize } from './ListItemBase';
+
+export interface ListBaseProps {
+  size?: ListItemSize;
+  theme?: LayoutTheme;
+  children?: ReactNode;
+}
+
+export const ListBase = ({ size = 'md', theme, children }: ListBaseProps) => {
+  return (
+    <div className={styles.list} data-theme={theme} data-size={size}>
+      {children}
+    </div>
+  );
+};

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

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

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

package/lib/components/List/ListItemBase.tsx

@@ -0,0 +1,62 @@
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import { Badge, type BadgeProps } from '../Badge';
+import { Icon, type IconName } from '../Icon';
+import styles from './listItemBase.module.css';
+
+export type ListItemColor = 'default' | 'accent';
+export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface ListItemBaseProps {
+  as?: ElementType;
+  size?: ListItemSize;
+  linkIcon?: IconName;
+  color?: ListItemColor;
+  badge?: BadgeProps;
+  href?: string;
+  className?: string;
+  collapsible?: boolean;
+  selected?: boolean;
+  expanded?: boolean;
+  children?: ReactNode;
+}
+
+export const ListItemBase = ({
+  as,
+  children,
+  className,
+  href,
+  size,
+  color,
+  collapsible,
+  selected,
+  expanded,
+  linkIcon,
+  badge,
+  ...rest
+}: ListItemBaseProps) => {
+  const Component = as || 'a';
+
+  const applicableIcon =
+    collapsible && expanded ? 'chevron-up' : collapsible ? 'chevron-down' : href ? 'chevron-right' : linkIcon;
+
+  return (
+    <Component
+      className={cx(styles.item, className)}
+      data-color={color}
+      data-size={size}
+      aria-selected={selected}
+      aria-expanded={expanded}
+      href={href}
+      {...rest}
+    >
+      <div className={styles.content} data-size={size}>
+        {children}
+      </div>
+      <div className={styles.action}>
+        {badge && <Badge {...badge} />}
+        {applicableIcon && <Icon name={applicableIcon} className={styles.linkIcon} />}
+      </div>
+    </Component>
+  );
+};

package/lib/components/List/ListItemLabel.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { ListItemSize } from './ListItemBase';
+import styles from './listItemLabel.module.css';
+
+export interface ListItemLabelProps {
+  size?: ListItemSize;
+  title?: string;
+  description?: string;
+  children?: ReactNode;
+}
+
+export const ListItemLabel = ({ size = 'sm', title, description, children }: ListItemLabelProps) => {
+  return (
+    <span className={styles.label} data-size={size}>
+      {children ? (
+        children
+      ) : (
+        <>
+          <strong className={styles.title} data-size={size}>
+            {title}
+          </strong>
+          <span className={styles.description} data-size={size}>
+            {description}
+          </span>
+        </>
+      )}
+    </span>
+  );
+};

package/lib/components/List/ListItemMedia.tsx

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
+import { Icon, type IconName } from '../Icon';
+import type { ListItemColor, ListItemSize } from './ListItemBase';
+import styles from './listItemMedia.module.css';
+
+interface ListItemMediaProps {
+  color?: ListItemColor;
+  size?: ListItemSize;
+  icon?: IconName;
+  avatar?: AvatarProps;
+  avatarGroup?: AvatarGroupProps;
+  children?: ReactNode;
+}
+
+const sizeMap = {
+  avatar: {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+  },
+  avatarGroup: {
+    xs: 'xs',
+    sm: 'xs',
+    md: 'sm',
+    lg: 'md',
+    xl: 'lg',
+  },
+};
+
+export const ListItemMedia = ({
+  size = 'sm',
+  color = 'default',
+  icon,
+  avatar,
+  avatarGroup,
+  children,
+}: ListItemMediaProps) => {
+  if (!icon && !avatar && !avatarGroup && !children) {
+    return false;
+  }
+
+  return (
+    <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
+      {(icon && <Icon name={icon} variant="outline" className={styles.icon} />) ||
+        (avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} className={styles.avatar} />) ||
+        (avatarGroup && (
+          <AvatarGroup
+            {...avatarGroup}
+            size={sizeMap?.avatarGroup[size] as AvatarSize}
+            className={styles.avatarGroup}
+          />
+        ))}
+      {children}
+    </div>
+  );
+};

package/lib/components/List/index.ts

@@ -0,0 +1,4 @@
+export * from './ListItemBase';
+export * from './ListItem';
+export * from './ListBase';
+export * from './List';

package/lib/components/List/listBase.module.css

@@ -0,0 +1,16 @@
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.list[data-size="sm"] {
+  row-gap: 4px;
+}
+
+.list[data-size="md"] {
+  row-gap: 8px;
+}
+
+.list[data-size="lg"] {
+  row-gap: 16px;
+}

package/lib/components/List/listItemBase.module.css

@@ -0,0 +1,86 @@
+/* reset */
+
+.item {
+  border: none;
+
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+
+  line-height: normal;
+
+  -webkit-font-smoothing: inherit;
+  -moz-osx-font-smoothing: inherit;
+
+  user-select: none;
+  cursor: pointer;
+}
+
+.item {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+
+/* sizes */
+
+.item[data-size="xs"] {
+  min-height: 36px;
+}
+
+.item[data-size="sm"] {
+  min-height: 44px;
+}
+
+.item[data-size="md"] {
+  min-height: 56px;
+}
+
+.item[data-size="lg"] {
+  min-height: 64px;
+}
+
+.item[data-size="xl"] {
+  min-height: 72px;
+}
+
+/* content (icon + header) */
+
+.content {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem;
+}
+
+/* action */
+
+.action {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem;
+}
+
+.linkIcon {
+  font-size: 1.5rem;
+}
+
+/* colors */
+
+.item {
+  background-color: var(--theme-background-default);
+  box-shadow: var(--ds-shadow-xs);
+}
+
+.item[data-color="accent"] {
+  background-color: var(--theme-surface-default);
+}
+
+.item[data-color="accent"]:hover {
+  background-color: var(--theme-surface-hover);
+}

package/lib/components/List/listItemLabel.module.css

@@ -0,0 +1,55 @@
+/* label */
+
+.label {
+  display: flex;
+  justify-content: center;
+}
+
+.label[data-size="xs"] {
+  align-items: center;
+  column-gap: 0.25em;
+  font-size: 0.875rem;
+}
+
+.label[data-size="sm"] {
+  align-items: center;
+  column-gap: 0.25rem;
+}
+
+.label[data-size="md"] {
+  flex-direction: column;
+}
+
+.label[data-size="lg"] {
+  flex-direction: column;
+}
+
+.label[data-size="xl"] {
+  flex-direction: column;
+}
+
+/* title + descr */
+
+.title {
+  font-weight: 600;
+  margin: 0;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.125rem;
+}
+
+.title[data-size="xl"] {
+  font-size: 1.25rem;
+}
+
+.description {
+  color: var(--theme-text-subtle);
+  margin: 0;
+}
+
+.description[data-size="md"],
+.description[data-size="lg"],
+.description[data-size="xl"] {
+  font-size: 0.875em;
+}