@altinn/altinn-components 0.0.1 → 0.2.0

package/lib/components/Icon/ProgressIcon.tsx

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+import type { CSSProperties } from 'react';
+import styles from './progressIcon.module.css';
+export interface ProgressIconProps {
+  value?: number;
+  total?: number;
+  className?: string;
+}
+
+interface CustomCSSProperties extends CSSProperties {
+  '--progress'?: string;
+}
+export const ProgressIcon = ({ value = 0, total = 100, className }: ProgressIconProps) => {
+  const percentage = Math.round((value / total) * 100);
+
+  if (value === total) {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={styles.complete}
+      >
+        <title>
+          Progress {value} of {total}
+        </title>
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.1751 5.11246C11.3892 4.87167 11.7579 4.84998 11.9987 5.06402C12.2395 5.27805 12.2612 5.64676 12.0471 5.88755L7.60268 10.8876C7.49595 11.0076 7.34442 11.0784 7.18383 11.0831C7.02324 11.0878 6.86782 11.0261 6.75421 10.9125L3.97644 8.13471C3.74863 7.9069 3.74863 7.53756 3.97644 7.30975C4.20424 7.08194 4.57359 7.08194 4.80139 7.30975L7.14172 9.65007L11.1751 5.11246Z"
+        />
+      </svg>
+    );
+  }
+
+  const progressStyle: CustomCSSProperties = {
+    '--progress': `${percentage}%`,
+  };
+
+  return <div className={cx(styles.progress, className)} style={progressStyle} data-value={`${percentage}%`} />;
+};

package/lib/components/Icon/RadioCheckedIcon.tsx

@@ -0,0 +1,29 @@
+export type RadioCheckedIconProps = {
+  title?: string;
+  className?: string;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioCheckedIcon = ({ title = 'Radio', className }: RadioCheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z"
+        fill="black"
+      />
+    </svg>
+  );
+};

package/lib/components/Icon/RadioIcon.stories.ts

@@ -18,6 +18,13 @@ export const Default: Story = {
   },
 };
 
+export const Hover: Story = {
+  args: {
+    checked: false,
+    hover: true,
+  },
+};
+
 export const Checked: Story = {
   args: {
     checked: true,

package/lib/components/Icon/RadioIcon.tsx

@@ -1,29 +1,17 @@
-import cx from 'classnames';
-import styles from './radioIcon.module.css';
+import { RadioCheckedIcon } from './RadioCheckedIcon';
+import { RadioUncheckedIcon } from './RadioUncheckedIcon';
 
 export type RadioIconProps = {
   checked: boolean;
+  hover?: boolean;
   title?: string;
   className?: string;
 };
 
 /**
- * Radio icon for lists and list items
+ * Radio for lists and list items
  */
-export const RadioIcon = ({ checked, title, className }: RadioIconProps) => {
-  return (
-    <div data-checked={checked} className={cx(styles.radio, className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth={2.5}
-        stroke="currentColor"
-        className={styles.icon}
-      >
-        <title>{title}</title>
-        <circle cx="12" cy="12" r="6" fill="currentColor" />
-      </svg>
-    </div>
-  );
+export const RadioIcon = ({ checked, title = 'Radio', hover = false, className }: RadioIconProps) => {
+  const iconProps = { title, className };
+  return checked ? <RadioCheckedIcon {...iconProps} /> : <RadioUncheckedIcon {...iconProps} hover={hover} />;
 };

package/lib/components/Icon/RadioUncheckedIcon.tsx

@@ -0,0 +1,30 @@
+export type RadioUncheckedIconProps = {
+  title?: string;
+  className?: string;
+  hover?: boolean;
+};
+
+/**
+ * Radio for lists and list items
+ */
+export const RadioUncheckedIcon = ({ title = 'Radio', className, hover = false }: RadioUncheckedIconProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+        fill="black"
+      />
+      {hover && <circle data-hover={true} cx="12" cy="12" r="5" fill="black" />}
+    </svg>
+  );
+};

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>
+  );
+};