@altinn/altinn-components 0.6.2 → 0.6.3

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/Bookmarks/BookmarksList.tsx

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

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

package/lib/components/Bookmarks/BookmarksListItem.tsx

@@ -1,32 +0,0 @@
-import type { ElementType } from 'react';
-import { ListItemBase, ListItemLabel, ListItemMedia, type ListItemSize } from '..';
-import { type QueryItemProps, QueryLabel } from './QueryLabel';
-
-export interface BookmarksListItemProps {
-  id: string;
-  /** Element type to render */
-  as?: ElementType;
-  /** ELement link */
-  href?: string;
-  /** Optional onClick */
-  onClick?(): void;
-  /** Size of list item */
-  size?: ListItemSize;
-  /** Optional title */
-  title?: string;
-  /** Optional description */
-  description?: string;
-  /** Query params */
-  params?: QueryItemProps[];
-}
-
-export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
-  return (
-    <ListItemBase size={size} linkIcon="chevron-right" {...rest}>
-      <ListItemMedia size={size} icon={'magnifying-glass'} />
-      <ListItemLabel title={title} size={size}>
-        {!title && <QueryLabel params={params} />}
-      </ListItemLabel>
-    </ListItemBase>
-  );
-};

package/lib/components/Bookmarks/QueryLabel.tsx

@@ -1,33 +0,0 @@
-import styles from './queryLabel.module.css';
-export type QueryItemType = 'search' | 'filter';
-
-export interface QueryItemProps {
-  type?: QueryItemType;
-  value?: string;
-  label?: string;
-}
-
-export const QueryItem = ({ type = 'search', label }: QueryItemProps) => {
-  return (
-    <mark className={styles.item} data-type={type}>
-      {label}
-    </mark>
-  );
-};
-
-export interface QueryLabelProps {
-  params?: QueryItemProps[];
-}
-
-export const QueryLabel = ({ params = [] }: QueryLabelProps) => {
-  return (
-    <div className={styles.label}>
-      {params.map((item, index) => (
-        <div className={styles.group} key={index}>
-          <QueryItem {...item} />
-          {params[index + 1] && <span className={styles.plus}>+</span>}
-        </div>
-      ))}
-    </div>
-  );
-};

package/lib/components/Bookmarks/queryLabel.module.css

@@ -1,45 +0,0 @@
-.label {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 0.25rem;
-  row-gap: 0.25rem;
-}
-
-.group {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.25rem;
-}
-
-.plus {
-  color: var(--theme-text-subtle);
-}
-
-.item {
-  font-size: 0.875em;
-}
-
-.item[data-type="search"] {
-  background-color: transparent;
-  font-weight: 500;
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.25em;
-}
-
-.item[data-type="search"]:before {
-  content: "«";
-}
-
-.item[data-type="search"]:after {
-  content: "»";
-}
-
-.item[data-type="filter"] {
-  background-color: transparent;
-  border: 1px solid;
-  font-weight: 500;
-  padding: 0.25em 0.5em;
-  border-radius: 2px;
-}

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,
-  },
-};

package/lib/components/Button/Button.tsx

@@ -1,60 +0,0 @@
-import cx from 'classnames';
-import type { IconName } from '../Icon';
-import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
-import { ButtonIcon } from './ButtonIcon';
-import { ButtonLabel } from './ButtonLabel';
-import styles from './button.module.css';
-
-export interface ButtonProps extends Partial<ButtonBaseProps> {
-  icon?: IconName;
-  reverse?: boolean;
-  loading?: boolean;
-}
-
-export const Button = ({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
-  reverse = false,
-  selected = false,
-  icon,
-  href,
-  children,
-  className,
-  loading,
-  ...rest
-}: ButtonProps) => {
-  if (loading) {
-    return (
-      <ButtonBase
-        variant={variant}
-        color={color}
-        size={size}
-        selected={selected}
-        href={href}
-        className={cx(styles.button, { [styles.reverse]: reverse }, className)}
-        {...rest}
-        disabled
-      >
-        <span className={styles.label} data-size={size}>
-          <span className={styles.loading}>Loading....</span>
-        </span>
-      </ButtonBase>
-    );
-  }
-
-  return (
-    <ButtonBase
-      variant={variant}
-      color={color}
-      size={size}
-      selected={selected}
-      href={href}
-      className={cx(styles.button, { [styles.reverse]: reverse })}
-      {...rest}
-    >
-      <ButtonLabel size={size}>{children}</ButtonLabel>
-      {icon && <ButtonIcon size={size} icon={icon} />}
-    </ButtonBase>
-  );
-};

package/lib/components/Button/ButtonBase.tsx

@@ -1,54 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
-
-import styles from './buttonBase.module.css';
-
-export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
-export type ButtonSize = 'sm' | 'md' | 'lg' | 'custom';
-export type ButtonColor = 'primary' | 'secondary';
-
-export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
-   * @default false
-   */
-  as?: ElementType;
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  selected?: boolean;
-  disabled?: boolean;
-  href?: string;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const ButtonBase = ({
-  as,
-  color,
-  className,
-  children,
-  disabled = false,
-  size,
-  selected,
-  variant,
-  tabIndex = 0,
-  ...rest
-}: ButtonBaseProps) => {
-  const Component = as || 'button';
-  return (
-    <Component
-      tabIndex={tabIndex}
-      data-size={size}
-      data-variant={variant}
-      data-color={color}
-      aria-selected={selected}
-      aria-disabled={disabled}
-      disabled={disabled}
-      className={cx(styles.button, className)}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-};

package/lib/components/Button/ButtonIcon.tsx

@@ -1,16 +0,0 @@
-import { Icon, type IconName } from '../Icon';
-import type { ButtonSize } from './ButtonBase';
-import styles from './buttonIcon.module.css';
-
-export interface ButtonIconProps {
-  icon: IconName;
-  size: ButtonSize;
-}
-
-export const ButtonIcon = ({ size, icon }: ButtonIconProps) => {
-  return (
-    <span className={styles.icon} data-size={size}>
-      <Icon name={icon} />
-    </span>
-  );
-};

package/lib/components/Button/ButtonLabel.tsx

@@ -1,18 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import type { ButtonSize } from './ButtonBase';
-import styles from './buttonLabel.module.css';
-
-export interface ButtonLabelProps {
-  size: ButtonSize;
-  className?: string;
-  children: ReactNode;
-}
-
-export const ButtonLabel = ({ className, size, children }: ButtonLabelProps) => {
-  return (
-    <span className={cx(styles.label, className)} data-size={size}>
-      {children}
-    </span>
-  );
-};