@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Attachment/attachmentLink.module.css

@@ -0,0 +1,20 @@
+.link {
+  display: inline-flex;
+  align-items: start;
+  column-gap: 0.25em;
+  color: var(--theme-base-default);
+}
+
+.link:hover {
+  color: var(--theme-base-hover);
+}
+
+.label {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.icon {
+  font-size: 1.5em;
+}

package/lib/components/Attachment/attachmentList.module.css

@@ -0,0 +1,12 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  padding: 0;
+  margin: 0;
+}

package/lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,83 @@
+'use client';
+import cx from 'classnames';
+import { useState } from 'react';
+import styles from './avatar.module.css';
+import { fromStringToColor } from './color';
+
+export type AvatarType = 'company' | 'person' | 'custom';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+type AvatarVariant = 'square' | 'circle';
+type AvatarColor = 'dark' | 'light';
+
+/**
+ * Props for the Avatar component.
+ */
+export interface AvatarProps {
+  /** The name to display in the avatar. */
+  name: string;
+  /** The type of avatar. */
+  type?: AvatarType;
+  /** The size of the avatar. */
+  size?: AvatarSize;
+  /** Additional class names to apply to the avatar. */
+  className?: string;
+  /** URL of the image to display in the avatar. */
+  imageUrl?: string;
+  /** Alt text for the image. */
+  imageUrlAlt?: string;
+  /** Whether to display an outline around the avatar. */
+  outline?: boolean;
+  /** Custom label to display inside the avatar. */
+  customLabel?: string;
+}
+
+/**
+ * Avatar component to display user or company avatars with various customization options.
+ */
+export const Avatar = ({
+  type = 'person',
+  size = 'sm',
+  name = 'Avatar',
+  outline = false,
+  imageUrl,
+  imageUrlAlt,
+  customLabel,
+  className,
+}: AvatarProps): JSX.Element => {
+  const [hasImageError, setHasImageError] = useState<boolean>(false);
+  const variant: AvatarVariant = type === 'person' ? 'circle' : 'square';
+  const color: AvatarColor = type === 'person' ? 'light' : 'dark';
+
+  const { backgroundColor, foregroundColor } = fromStringToColor(name, color);
+  const initials = (name[0] ?? '').toUpperCase();
+  const usingImageUrl = imageUrl && !hasImageError;
+
+  const inlineStyles = !usingImageUrl
+    ? {
+        backgroundColor,
+        color: foregroundColor,
+      }
+    : undefined;
+
+  return (
+    <div
+      className={cx(styles.avatar, styles[variant], styles[size], { [styles.outline]: outline }, className)}
+      style={inlineStyles}
+      aria-hidden
+    >
+      {usingImageUrl ? (
+        <img
+          src={imageUrl}
+          className={styles.image}
+          alt={imageUrlAlt || imageUrl}
+          onError={() => {
+            setHasImageError(true);
+          }}
+        />
+      ) : (
+        <span>{customLabel || initials}</span>
+      )}
+    </div>
+  );
+};

package/lib/components/Avatar/AvatarGroup.stories.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AvatarGroup } from './AvatarGroup';
+
+const meta = {
+  title: 'Avatar/AvatarGroup',
+  component: AvatarGroup,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs', 'stable'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    //    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const People: Story = {
+  args: {
+    defaultType: 'person',
+    items: [
+      {
+        name: 'Albert Åberg',
+      },
+      {
+        name: 'Birger Meling',
+      },
+      {
+        name: 'Celine Dion',
+      },
+    ],
+  },
+};
+
+export const Companies: Story = {
+  args: {
+    defaultType: 'company',
+    items: [
+      {
+        name: 'Albert Åberg',
+      },
+      {
+        name: 'Birger Meling',
+      },
+      {
+        name: 'Celine Dion',
+      },
+    ],
+  },
+};
+
+export const CompanyAndPerson: Story = {
+  args: {
+    items: [
+      {
+        type: 'company',
+        name: 'Albert Åberg',
+      },
+      {
+        type: 'person',
+        name: 'Birger Meling',
+      },
+    ],
+  },
+};

package/lib/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,60 @@
+'use client';
+import cx from 'classnames';
+import { useMemo } from 'react';
+import { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from '.';
+import styles from './avatarGroup.module.css';
+
+/**
+ * Props for the AvatarGroup components.
+ */
+export interface AvatarGroupProps {
+  /** Array of avatars to display in the group, each specified by AvatarProps. */
+  items?: AvatarProps[];
+  /** Maximum number of avatars to show in the group. Remaining avatars are summarized in a "+X" label. */
+  maxItemsCount?: number;
+  /** Default avatar type to apply if not specified in individual items. This affects the styling. */
+  defaultType?: AvatarType;
+  /** Size of all avatars in the group (e.g., 'sm', 'md', 'lg'). */
+  size?: AvatarSize;
+  /** Additional CSS class for styling the avatar group container. */
+  className?: string;
+}
+
+/**
+ * Avatar group component for displaying multiple avatars as a group.
+ */
+export const AvatarGroup = ({
+  items = [],
+  maxItemsCount = 4,
+  defaultType,
+  size = 'sm',
+  className,
+}: AvatarGroupProps) => {
+  const maxItems = useMemo(() => items.slice(0, maxItemsCount), [items, maxItemsCount]);
+
+  if (items?.length === 0) {
+    return <div className={styles.avatarGroup} />;
+  }
+
+  return (
+    <ul className={cx(styles.reset, styles.group, styles[size], className)} data-count={maxItems?.length}>
+      {maxItems.map((avatar, index) => {
+        const lastLegalAvatarReached = index === maxItemsCount - 1;
+        const customLabel = avatar.customLabel || lastLegalAvatarReached ? items.length.toString() : undefined;
+        return (
+          <li className={cx(styles.reset, styles.item)} key={avatar.name}>
+            <Avatar
+              name={avatar.name}
+              customLabel={customLabel}
+              imageUrl={avatar.imageUrl}
+              imageUrlAlt={avatar.imageUrlAlt}
+              type={avatar?.type || defaultType}
+              size={size}
+              outline
+            />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/lib/components/Avatar/avatar.module.css

@@ -0,0 +1,61 @@
+.avatar {
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  --avatar-font-size-xs: 0.75rem;
+  --avatar-font-size-sm: 0.875rem;
+  --avatar-font-size-md: 1.125rem;
+  --avatar-font-size-lg: 1.25rem;
+  --avatar-font-size-xl: 1.5rem;
+}
+
+.circle {
+  border-radius: 50%;
+}
+
+.square {
+  border-radius: 5%;
+}
+
+.outline {
+  outline: 1px solid #ffffff;
+  box-sizing: border-box;
+}
+
+.xs {
+  font-size: var(--avatar-font-size-xs);
+  width: 20px;
+  height: 20px;
+}
+
+.sm {
+  font-size: var(--avatar-font-size-sm);
+  width: 24px;
+  height: 24px;
+}
+
+.md {
+  font-size: var(--avatar-font-size-md);
+  width: 30px;
+  height: 30px;
+}
+
+.lg {
+  font-size: var(--avatar-font-size-lg);
+  width: 36px;
+  height: 36px;
+}
+
+.xl {
+  font-size: var(--avatar-font-size-xl);
+  width: 44px;
+  height: 44px;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+}

package/lib/components/Avatar/avatar.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './';
+
+const meta = {
+  title: 'Avatar/Avatar',
+  component: Avatar,
+  tags: ['autodocs', 'stable'],
+  parameters: {},
+  args: {
+    name: 'Jane Doe',
+    type: 'person',
+    size: 'xl',
+  },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Person: Story = {
+  args: {
+    type: 'person',
+    name: 'Jane Doe',
+    size: 'xl',
+  },
+};
+
+export const Company: Story = {
+  args: {
+    type: 'company',
+    name: 'Boligeksperten',
+  },
+};
+
+export const Logo: Story = {
+  args: {
+    type: 'company',
+    imageUrl: 'https://avatars.githubusercontent.com/u/1536293?s=200&v=4',
+    size: 'xl',
+  },
+};

package/lib/components/Avatar/avatarGroup.module.css

@@ -0,0 +1,78 @@
+.group {
+  display: flex;
+}
+
+.reset {
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  list-style-type: none;
+}
+
+.item {
+  position: relative;
+}
+
+.xs {
+  width: 32px;
+}
+
+.xs[data-count="2"] * + * {
+  margin-left: -8px;
+}
+
+.xs[data-count="3"] * + * {
+  margin-left: -14px;
+}
+
+.xs[data-count="4"] * + * {
+  margin-left: -16px;
+}
+
+.sm {
+  width: 42px;
+}
+
+.sm[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.sm[data-count="3"] * + * {
+  margin-left: -15px;
+}
+
+.sm[data-count="4"] * + * {
+  margin-left: -18px;
+}
+
+.md {
+  width: 54px;
+}
+
+.md[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.md[data-count="3"] * + * {
+  margin-left: -18px;
+}
+
+.md[data-count="4"] * + * {
+  margin-left: -22px;
+}
+
+.lg {
+  width: 66px;
+}
+
+.lg[data-count="2"] * + * {
+  margin-left: -6px;
+}
+
+.lg[data-count="3"] * + * {
+  margin-left: -21px;
+}
+
+.lg[data-count="4"] * + * {
+  margin-left: -26px;
+}

package/lib/components/Avatar/color.ts

@@ -0,0 +1,71 @@
+type RGB = { r: number; g: number; b: number };
+
+function generateHashCode(str: string): number {
+  return str.split('').reduce((hash, char) => {
+    return char.charCodeAt(0) + ((hash << 5) - hash);
+  }, 0);
+}
+
+function hashCodeToHexColor(hash: number): string {
+  return (hash & 0x00ffffff).toString(16).toUpperCase().padStart(6, '0');
+}
+
+function luminance(hexCode: string): number {
+  const { r, g, b } = hexToRgb(hexCode);
+  const [lR, lG, lB] = [r, g, b].map((v) => {
+    const normalized = v / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+  return lR * 0.2126 + lG * 0.7152 + lB * 0.0722;
+}
+
+function hexToRgb(hex: string): RGB {
+  const bigint = Number.parseInt(hex, 16);
+  return {
+    r: (bigint >> 16) & 255,
+    g: (bigint >> 8) & 255,
+    b: bigint & 255,
+  };
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+}
+
+function adjustToDarkerColor(hexCode: string): string {
+  const { r, g, b } = hexToRgb(hexCode);
+  const rNew = Math.floor(r * 0.5);
+  const gNew = Math.floor(g * 0.5);
+  const bNew = Math.floor(b * 0.5);
+  return rgbToHex(rNew, gNew, bNew);
+}
+
+function adjustToLighterColor(hexCode: string): string {
+  const { r, g, b } = hexToRgb(hexCode);
+  const rNew = Math.min(255, Math.floor(r + (255 - r) * 0.5));
+  const gNew = Math.min(255, Math.floor(g + (255 - g) * 0.5));
+  const bNew = Math.min(255, Math.floor(b + (255 - b) * 0.5));
+  return rgbToHex(rNew, gNew, bNew);
+}
+
+export function fromStringToColor(
+  name: string,
+  profile: 'light' | 'dark',
+): { backgroundColor: string; foregroundColor: string } {
+  const hash = generateHashCode(name);
+  let hexColor = hashCodeToHexColor(hash);
+  const bgLuminance = luminance(hexColor);
+
+  if (profile === 'light' && bgLuminance <= 0.7) {
+    hexColor = adjustToLighterColor(hexColor);
+  }
+
+  if (profile === 'dark' && bgLuminance > 0.1) {
+    hexColor = adjustToDarkerColor(hexColor);
+  }
+
+  return {
+    backgroundColor: `#${hexColor}`,
+    foregroundColor: profile === 'light' ? '#000000' : '#ffffff',
+  };
+}

package/lib/components/Badge/Badge.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Atoms/Badge/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Alert: Story = {
+  args: {
+    color: 'alert',
+  },
+};
+
+export const UnreadCount: Story = {
+  args: {
+    label: '2',
+    color: 'alert',
+  },
+};

package/lib/components/Badge/Badge.tsx

@@ -0,0 +1,22 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './badge.module.css';
+
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+export interface BadgeProps {
+  label?: string | number;
+  color?: BadgeColor;
+  size?: BadgeSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+      <span className={styles.label}>{label || children}</span>
+    </span>
+  );
+};

package/lib/components/Badge/badge.module.css

@@ -0,0 +1,27 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.5em 0.5em;
+
+  min-width: 2em;
+  border-radius: 2em;
+}
+
+.badge[data-size="sm"] {
+  font-size: 0.75rem;
+}
+
+.badge[data-color="subtle"] {
+  background-color: var(--theme-surface-default);
+  color: var(--theme-text-subtle);
+}
+
+.badge[data-color="alert"] {
+  background-color: #e02e49;
+  color: white;
+}

package/lib/components/Bookmarks/BookmarksList.tsx

@@ -0,0 +1,17 @@
+import { ListBase, type ListSpacing } from '../';
+import { BookmarksListItem, type BookmarksListItemProps } from './BookmarksListItem';
+
+export interface BookmarksListProps {
+  items: BookmarksListItemProps[];
+  spacing: ListSpacing;
+}
+
+export const BookmarksList = ({ items, spacing }: BookmarksListProps) => {
+  return (
+    <ListBase spacing={spacing}>
+      {items?.map((item) => (
+        <BookmarksListItem {...item} key={item.id} />
+      ))}
+    </ListBase>
+  );
+};

package/lib/components/Bookmarks/BookmarksListItem.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment, useState } from 'react';
+
+import { ListBase } from '..';
+import { MetaItem } from '../Meta';
+import { BookmarksListItem } from './BookmarksListItem';
+
+const sizes = ['lg', 'md', 'sm', 'xs'];
+
+const meta = {
+  title: 'Bookmarks/BookmarksListItem',
+  component: BookmarksListItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    id: 'id',
+    params: [
+      {
+        type: 'search',
+        label: 'mva',
+      },
+      {
+        type: 'filter',
+        label: 'Skatteetaten',
+      },
+    ],
+    size: 'md',
+    href: '#',
+  },
+} satisfies Meta<typeof BookmarksListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomTitle: Story = {
+  args: {
+    title: 'Mitt lagrede søk',
+  },
+};
+
+export const LotsOfParams: Story = {
+  args: {
+    params: [
+      {
+        label: 'skatt',
+      },
+      {
+        label: 'inkasso',
+      },
+      {
+        type: 'filter',
+        label: 'Namsmannen',
+      },
+      {
+        type: 'filter',
+        label: 'Denne uken',
+      },
+    ],
+  },
+};
+
+export const Sizes = (args) => {
+  return (
+    <ListBase>
+      {sizes?.map((size) => {
+        return (
+          <Fragment key={size}>
+            <BookmarksListItem {...args} size={size} selected={size === args?.size} />
+            <MetaItem>{size}</MetaItem>
+          </Fragment>
+        );
+      })}
+    </ListBase>
+  );
+};