@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Attachment/AttachmentList.tsx

@@ -1,26 +0,0 @@
-import type { TypographySize } from '../Typography';
-import { AttachmentLink, type AttachmentLinkProps } from './AttachmentLink';
-import styles from './attachmentList.module.css';
-
-export interface AttachmentListProps {
-  items: AttachmentLinkProps[];
-  size?: TypographySize;
-}
-
-export const AttachmentList = ({ size, items }: AttachmentListProps) => {
-  if (!items.length) {
-    return null;
-  }
-
-  return (
-    <ul className={styles.list} data-size={size}>
-      {items.map((item, index) => {
-        return (
-          <li key={index} className={styles.item}>
-            <AttachmentLink {...item} key={'attachment' + index} />
-          </li>
-        );
-      })}
-    </ul>
-  );
-};

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

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

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

package/lib/components/Avatar/Avatar.tsx

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

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

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

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

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

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

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

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

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

@@ -1,27 +0,0 @@
-.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/Button/Button.stories.ts

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta = {
-  title: 'Atoms/Button/Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'Button',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Solid: Story = {
-  args: {
-    variant: 'solid',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};