@altinn/altinn-components 0.5.2 → 0.6.1

package/lib/components/Dialog/DialogSeenBy.stories.tsx

@@ -1,56 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogSeenBy } from './DialogSeenBy';
-
-const meta = {
-  title: 'Dialog/Atoms/DialogSeenBy',
-  component: DialogSeenBy,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 2,
-    label: '',
-  },
-} satisfies Meta<typeof DialogSeenBy>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Unseen: Story = {
-  args: {
-    seenByEndUser: false,
-    seenByOthersCount: 0,
-  },
-};
-
-export const seenByEndUser: Story = {
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 0,
-  },
-};
-
-export const seenByEndUserAndOthers: Story = {
-  args: {
-    seenByEndUser: true,
-    seenByOthersCount: 10,
-  },
-};
-
-export const ExampleLabel = ({
-  seenByEndUser,
-  seenByOthersCount,
-}: { seenByEndUser: boolean; seenByOthersCount: number }) => {
-  const seenByLabel = [];
-
-  if (seenByEndUser) {
-    seenByLabel.push('deg');
-  }
-
-  if (seenByOthersCount) {
-    seenByLabel.push(seenByOthersCount);
-  }
-
-  const label = 'Sett av ' + seenByLabel.join('+');
-  return <DialogSeenBy seenByEndUser={seenByEndUser} seenByOthersCount={seenByOthersCount} label={label} />;
-};

package/lib/components/Dialog/DialogSeenBy.tsx

@@ -1,36 +0,0 @@
-import type { ElementType, MouseEventHandler } from 'react';
-import { MetaItem, type MetaItemSize } from '../Meta';
-
-export interface DialogSeenByProps {
-  size?: MetaItemSize;
-  /** Dialog has been seen by current end user */
-  seenByEndUser?: boolean;
-  /** Dialog has been seen by other people */
-  seenByOthersCount?: number;
-  /** A label explaining that the dialog have been seen and by whom. */
-  label: string;
-  /** Render element as a link or button to display more informastion */
-  as?: ElementType;
-  onClick?: MouseEventHandler;
-  href?: string;
-}
-
-/**
- * Dialog seen by. Used to indicate if the dialog has been seen by end user or other users.
- */
-
-export const DialogSeenBy = ({
-  size = 'xs',
-  label = 'Seen by label',
-  seenByEndUser = false,
-  seenByOthersCount = 0,
-  ...rest
-}: DialogSeenByProps) => {
-  const seen = seenByEndUser || seenByOthersCount > 0;
-  const iconName = seen ? 'eye' : 'eye-closed';
-  return (
-    <MetaItem size={size} icon={iconName} {...rest}>
-      {label}
-    </MetaItem>
-  );
-};

package/lib/components/Dialog/DialogSelect.tsx

@@ -1,23 +0,0 @@
-import cx from 'classnames';
-import type { ChangeEventHandler } from 'react';
-import { CheckboxIcon } from '../Icon/';
-import styles from './dialogSelect.module.css';
-
-export type DialogSelectProps = {
-  checked?: boolean;
-  onChange?: ChangeEventHandler;
-  className?: string;
-};
-
-/**
- * Dialog checkbox
- */
-
-export const DialogSelect = ({ checked = false, onChange, className }: DialogSelectProps) => {
-  return (
-    <label className={cx(styles.label, className)}>
-      <input type="checkbox" checked={checked} onChange={onChange} className={styles.input} tabIndex={-1} />
-      <CheckboxIcon hover={true} checked={checked} className={styles.icon} />
-    </label>
-  );
-};

package/lib/components/Dialog/DialogStatus.stories.ts

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { DialogStatus, DialogStatusEnum } from './DialogStatus';
-
-const meta = {
-  title: 'Dialog/DialogStatus',
-  component: DialogStatus,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    value: {
-      options: Object.keys(DialogStatusEnum),
-    },
-  },
-  args: {},
-} satisfies Meta<typeof DialogStatus>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Draft: Story = {
-  args: {
-    value: 'draft',
-    label: 'Utkast',
-  },
-};
-
-export const Sent: Story = {
-  args: {
-    value: 'sent',
-    label: 'Sendt',
-  },
-};
-
-export const RequiresAttention: Story = {
-  args: {
-    value: 'requires-attention',
-    label: 'Krever handling',
-  },
-};
-
-export const InProgress: Story = {
-  args: {
-    value: 'in-progress',
-    label: 'Under arbeid',
-  },
-};
-
-export const Completed: Story = {
-  args: {
-    value: 'completed',
-    label: 'Avsluttet',
-  },
-};

package/lib/components/Dialog/DialogStatus.tsx

@@ -1,61 +0,0 @@
-import { MetaItem, type MetaItemSize, MetaProgress } from '../Meta';
-
-export enum DialogStatusEnum {
-  /** Used to indicate user-initiated dialogs not yet sent. */
-  draft = 'DRAFT',
-  /** Sent by the service owner. In a serial process, this is used after a submission is made. */
-  sent = 'SENT',
-  /** The dialogue is considered new. Typically used for simple messages that do not require any interaction, or as an initial step for dialogues. This is the default. */
-  new = 'NEW',
-  /** The dialogue was completed. This typically means that the dialogue is moved to a GUI archive or similar. */
-  completed = 'COMPLETED',
-  /** Started. In a serial process, this is used to indicate that, for example, a form filling is ongoing. */
-  'in-progress' = 'IN_PROGRESS',
-  /** Used to indicate that the dialogue is in progress/under work, but is in a state where the user must do something - for example, correct an error, or other conditions that hinder further processing. */
-  'requires-attention' = 'REQUIRES_ATTENTION',
-}
-
-export type DialogStatusValue = keyof typeof DialogStatusEnum;
-
-export interface DialogStatusProps {
-  size?: MetaItemSize;
-  value?: DialogStatusValue;
-  label?: string;
-}
-
-/**
- * Dialog status.
- */
-
-export const DialogStatus = ({ size = 'xs', value = 'new', label }: DialogStatusProps) => {
-  switch (value) {
-    case 'new':
-      return null;
-    case 'draft':
-      return (
-        <MetaItem size={size} variant="dotted">
-          {label || value}
-        </MetaItem>
-      );
-    case 'requires-attention':
-      return <MetaItem variant="solid">{label || value}</MetaItem>;
-    case 'in-progress':
-      return (
-        <MetaProgress size={size} variant="outline" progress={75}>
-          {label || value}
-        </MetaProgress>
-      );
-    case 'completed':
-      return (
-        <MetaProgress size={size} variant="outline" progress={100}>
-          {label || value}
-        </MetaProgress>
-      );
-    default:
-      return (
-        <MetaItem size={size} variant="outline">
-          {label || value}
-        </MetaItem>
-      );
-  }
-};

package/lib/components/Dialog/DialogTitle.stories.ts

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogTitle } from './DialogTitle';
-
-const meta = {
-  title: 'Dialog/DialogTitle',
-  component: DialogTitle,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'Title',
-  },
-} satisfies Meta<typeof DialogTitle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Seen: Story = {
-  args: {
-    variant: 'seen',
-  },
-};
-
-export const Trash: Story = {
-  args: {
-    variant: 'trash',
-  },
-};

package/lib/components/Dialog/DialogTitle.tsx

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon, type IconName } from '../Icon';
-import type { DialogListItemVariant } from './DialogListItemBase';
-import styles from './dialogTitle.module.css';
-
-export type DialogTitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type DialogTitleProps = {
-  /** Variant */
-  variant: DialogListItemVariant;
-  /** Size */
-  size?: DialogTitleSize;
-  /** Variant */
-  seen?: boolean;
-  /** Display an icon next to title */
-  icon?: IconName;
-  /** Dialog title */
-  children?: ReactNode;
-};
-
-/**
- * Dialog title
- */
-export const DialogTitle = ({ size = 'sm', seen = false, variant, icon, children }: DialogTitleProps) => {
-  return (
-    <h2 className={styles.title} data-seen={seen} data-size={size} data-variant={variant}>
-      <span>{children}</span>
-      {icon && <Icon name={icon} className={styles.icon} />}
-    </h2>
-  );
-};

package/lib/components/Dialog/DialogTouchedBy.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DialogTouchedBy } from './DialogTouchedBy';
-
-const meta = {
-  title: 'Dialog/Atoms/DialogTouchedBy',
-  component: DialogTouchedBy,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    touchedBy: [
-      {
-        name: 'Donald Duck',
-      },
-      {
-        name: 'Pelle Khan',
-      },
-      {
-        name: 'Langbein',
-      },
-    ],
-  },
-} satisfies Meta<typeof DialogTouchedBy>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/lib/components/Dialog/DialogTouchedBy.tsx

@@ -1,19 +0,0 @@
-import { AvatarGroup, type AvatarSize } from '../Avatar';
-
-export interface DialogTouchedByActor {
-  name: string;
-}
-
-export interface DialogTouchedByProps {
-  size?: AvatarSize;
-  touchedBy?: DialogTouchedByActor[];
-  className?: string;
-}
-
-export const DialogTouchedBy = ({ size = 'sm', touchedBy = [], className }: DialogTouchedByProps) => {
-  if (!touchedBy?.length) {
-    return null;
-  }
-
-  return <AvatarGroup defaultType="person" items={touchedBy} size={size} className={className} />;
-};

package/lib/components/Dialog/dialog.module.css

@@ -1,21 +0,0 @@
-.dialog {
-  background-color: var(--theme-background-default);
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-  margin-bottom: 1.5rem;
-}

package/lib/components/Dialog/dialogAction.module.css

@@ -1,26 +0,0 @@
-.action {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.comboButton {
-  position: relative;
-}
-
-.dropdown {
-  margin-top: 0.5rem;
-  padding: 0 0.5rem;
-  background-color: var(--neutral-background-default);
-  border-radius: 2px;
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  display: none;
-}
-
-.dropdown[aria-expanded="true"] {
-  display: block;
-  position: absolute;
-  min-width: 256px;
-  left: 0;
-  z-index: 2;
-}

package/lib/components/Dialog/dialogArticleBase.module.css

@@ -1,5 +0,0 @@
-.article {
-  display: flex;
-  flex-direction: column;
-  padding: 0 1.5rem;
-}

package/lib/components/Dialog/dialogBodyBase.module.css

@@ -1,13 +0,0 @@
-.border {
-  padding-left: 1.5rem;
-  padding-top: 0;
-  margin-left: 1rem;
-  row-gap: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-}

package/lib/components/Dialog/dialogBorder.module.css

@@ -1,42 +0,0 @@
-.border {
-  border-left: 0.25rem solid;
-  border-color: var(--theme-surface-active);
-  /*
-  padding-left: 1rem;
-  display: flex;
-  flex-direction: column;
-  */
-}
-
-.border[data-seen="true"] {
-  border-color: var(--neutral-surface-default);
-}
-
-/*
-
-.border[data-size="sm"][data-status="draft"] {
-  border-color: transparent;
-  padding-left: 0;
-}
-
-.border[data-size="sm"] {
-  row-gap: 1rem;
-}
-
-.border[data-size="lg"] {
-  font-size: 18px;
-  padding-left: 1.5rem;
-  padding-top: 0;
-  padding-bottom: 1.5rem;
-  margin-left: 1rem;
-  row-gap: 1.5rem;
-}
-
-.border[data-size="lg"][data-status="draft"] {
-  border: 1px dashed;
-  border-color: var(--theme-text-subtle);
-  padding: 1.5rem;
-  margin-left: 0;
-}
-
-*/

package/lib/components/Dialog/dialogGroup.module.css

@@ -1,35 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.5rem;
-  margin: 0.5rem 0;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin: 0.5rem 0;
-}
-
-.title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-  margin: 0.375rem 0;
-}
-
-.title {
-  padding: 0 1rem;
-}
-
-@media (min-width: 1024px) {
-  .title {
-    padding: 0;
-  }
-}
-
-.list {
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.5rem;
-}

package/lib/components/Dialog/dialogHeaderBase.module.css

@@ -1,6 +0,0 @@
-.header {
-  display: flex;
-  flex-direction: column;
-  row-gap: 1.5em;
-  margin-bottom: 1.5rem;
-}

package/lib/components/Dialog/dialogHeadings.module.css

@@ -1,24 +0,0 @@
-.headings {
-  display: flex;
-  column-gap: 0.5em;
-  align-items: center;
-  font-size: 16px;
-}
-
-.headings[data-size="xs"] {
-  font-size: 14px;
-}
-
-.headings[data-size="sm"] {
-  font-size: 14px;
-}
-
-.text {
-  display: inline-flex;
-  color: var(--neutral-text-subtle);
-}
-
-.sender {
-  font-weight: 500;
-  color: var(--neutral-text-default);
-}

package/lib/components/Dialog/dialogHistory.module.css

@@ -1,12 +0,0 @@
-.section {
-  border-color: var(--neutral-surface-active);
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
-}
-
-.title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 1em 0;
-}

package/lib/components/Dialog/dialogListItem.module.css

@@ -1,81 +0,0 @@
-.border {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  text-decoration: none;
-  row-gap: 1rem;
-  padding-left: 1rem;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.25rem;
-}
-
-.summary {
-  font-size: 1rem;
-  line-height: 1.35;
-  margin: 0;
-  font-weight: 400;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--neutral-text-subtle);
-}
-
-.footer {
-  width: 100%;
-}
-
-.touchedBy {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  margin: 8px;
-}
-
-/* medium */
-
-.border[data-size="md"] {
-  padding-left: 0.75rem;
-  row-gap: 0.5rem;
-}
-
-.summary[data-size="md"] {
-  font-size: 1rem;
-}
-
-.summary[data-size="md"] {
-  font-size: 1rem;
-}
-
-/* sizes */
-
-.link[data-size="xs"],
-.link[data-size="sm"] {
-  padding: 0.5rem 0.75rem;
-}
-
-.summary[data-size="xs"],
-.summary[data-size="sm"] {
-  font-size: 0.875rem;
-}
-
-.header[data-size="xs"],
-.header[data-size="sm"] {
-  row-gap: 0;
-}
-
-.footer[data-size="xs"] {
-  display: none;
-}
-
-.border[data-size="xs"],
-.border[data-size="sm"] {
-  padding-left: 0.75rem;
-  row-gap: 0.25rem;
-}

package/lib/components/Dialog/dialogListItemBase.module.css

@@ -1,28 +0,0 @@
-.item {
-  position: relative;
-  background-color: var(--theme-background-default);
-  position: relative;
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.item[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  outline: 2px solid;
-}
-
-.link {
-  display: flex;
-  padding: 1rem;
-}
-
-.item[aria-selected="false"] .link:hover {
-  outline: 2px solid;
-  outline-color: var(--global-base-default);
-}
-
-.select {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0.375rem;
-}

package/lib/components/Dialog/dialogNav.module.css

@@ -1,12 +0,0 @@
-.nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem;
-}
-
-.action {
-  display: flex;
-  align-items: center;
-  column-gap: .5rem;
-}

package/lib/components/Dialog/dialogSectionBase.module.css

@@ -1,11 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem;
-}
-
-.title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 1em 0;
-}