@altinn/altinn-components 0.0.1 → 0.2.0

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

@@ -1,36 +1,27 @@
 .badge {
   display: inline-flex;
-  box-sizing: border-box;
-  padding: 4px 8px;
-  justify-content: center;
-  min-height: 24px;
-  min-width: 24px;
-  width: auto;
-  height: 24px;
   align-items: center;
-  flex-shrink: 0;
-  background: var(--black-5, rgba(0, 0, 0, 0.05));
-  color: var(--black-100, #000);
+  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;
-  font-weight: 600;
-  line-height: 1rem;
-  border-radius: 12px;
 }
 
-.strong {
-  font-weight: 700;
-  background: var(--Action-Important, #e02e49);
-  color: #ffffff;
+.badge[data-color="subtle"] {
+  background-color: var(--theme-surface-default);
+  color: var(--theme-text-subtle);
 }
 
-.small {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 4px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+.badge[data-color="alert"] {
+  background-color: #e02e49;
+  color: white;
 }

package/lib/components/Button/Button.stories.ts

@@ -37,6 +37,12 @@ export const Text: Story = {
   },
 };
 
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,

package/lib/components/Button/Button.tsx

@@ -1,12 +1,12 @@
 import cx from 'classnames';
 import { Icon, type IconName } from '../Icon';
 import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
-
 import styles from './button.module.css';
 
 export interface ButtonProps extends Partial<ButtonBaseProps> {
   icon?: IconName;
   reverse?: boolean;
+  loading?: boolean;
 }
 
 export const Button = ({
@@ -16,8 +16,26 @@ export const Button = ({
   icon,
   href,
   children,
+  loading,
   ...rest
 }: ButtonProps) => {
+  if (loading) {
+    return (
+      <ButtonBase
+        size={size}
+        selected={selected}
+        href={href}
+        className={cx(styles.button, { [styles.reverse]: reverse })}
+        {...rest}
+        disabled
+      >
+        <span className={styles.label} data-size={size}>
+          <span className={styles.loading}>Loading....</span>
+        </span>
+      </ButtonBase>
+    );
+  }
+
   return (
     <ButtonBase
       size={size}

package/lib/components/Button/ButtonBase.tsx

@@ -5,7 +5,7 @@ import styles from './buttonBase.module.css';
 
 export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
 export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonColor = 'primary' | 'link';
+export type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**

package/lib/components/Button/button.module.css

@@ -1,31 +1,12 @@
 .button {
   display: inline-flex;
   align-items: center;
-  border: 1px solid;
-  border-color: var(--link-base-default);
-}
-
-.button:focus {
-  border-color: var(--link-base-active);
-}
-
-.button:hover {
-  border-color: var(--link-base-hover);
-}
-
-.button:active {
-  border-color: var(--link-base-active);
 }
 
 .reverse {
   flex-direction: row-reverse;
 }
 
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
 .label {
   line-height: 1rem;
   font-weight: 600;

package/lib/components/Button/buttonBase.module.css

@@ -1,5 +1,6 @@
 .button {
-  border: none;
+  border: 1px solid;
+  border-color: transparent;
   margin: 0;
   padding: 0;
   width: auto;
@@ -32,11 +33,23 @@
   pointer-events: none;
 }
 
+.button:focus {
+  border-color: var(--theme-base-active);
+}
+
+.button:hover {
+  border-color: var(--theme-base-hover);
+}
+
+.button:active {
+  border-color: var(--theme-base-active);
+}
+
 /* solid */
 
 .button[data-variant="solid"] {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
   color: white;
 }
 
@@ -60,18 +73,23 @@
   border-color: transparent;
 }
 
-/* solid + link
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
 
-.button[data-color="link"][data-variant="solid"] {
-  background-color: var(--link-base-default);
-  color: white;
+/* secondary color */
+
+.button[data-color="secondary"] {
+  color: var(--theme-text-subtle);
 }
 
-.button[data-color="link"][data-variant="solid"]:hover {
-  background-color: var(--link-base-hover);
+.button[data-color="secondary"]:hover {
+  border-color: var(--theme-surface-hover);
 }
 
-.button[data-color="link"][data-variant="active"]:hover {
-  background-color: var(--link-base-active);
+.button[data-color="secondary"][data-variant="solid"],
+.button[data-color="secondary"][data-variant="solid"] {
+  border-color: var(--theme-surface-default);
+  background-color: var(--theme-surface-default);
 }
- */

package/lib/components/Button/comboButton.module.css

@@ -6,10 +6,12 @@
   border-radius: 2px;
 }
 
+/*
 .button[aria-selected="true"] {
   background-color: var(--theme-background-subtle);
   color: var(--theme-text-default);
 }
+  */
 
 .label {
   line-height: 1rem;
@@ -40,7 +42,7 @@
 
 .label[data-size="sm"] {
   font-size: 0.875rem;
-  padding: 9px 10px;
+  padding: 8px 10px;
 }
 
 .divider[data-size="sm"] {
@@ -49,7 +51,7 @@
 
 .icon[data-size="sm"] {
   font-size: 1.25rem;
-  padding: 7px 5px;
+  padding: 6px 5px;
 }
 
 /* md 44px */

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,28 @@
+import type { MouseEventHandler } from 'react';
+import { ButtonBase } from '../Button';
+import { Icon } from '../Icon';
+import { Menu, type MenuGroups, type MenuItemProps } from '../Menu';
+import styles from './contextMenu.module.css';
+
+export interface DialogContextMenuProps {
+  onToggle?: MouseEventHandler;
+  label: string;
+  value: string | number;
+  items: MenuItemProps[];
+  groups?: MenuGroups;
+  expanded?: boolean;
+  className?: string;
+}
+
+export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: DialogContextMenuProps) => {
+  return (
+    <div className={styles.toggle}>
+      <ButtonBase className={styles.button} as="button" color="secondary" onClick={onToggle}>
+        <Icon className={styles.icon} name="menu-elipsis-horizontal" />
+      </ButtonBase>
+      <div className={styles.dropdown} aria-expanded={expanded}>
+        <Menu theme="global" defaultItemColor="subtle" groups={groups} items={items} />
+      </div>
+    </div>
+  );
+};

package/lib/components/ContextMenu/contextMenu.module.css

@@ -0,0 +1,35 @@
+.toggle {
+  position: relative;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  padding: 0.625rem;
+  border-radius: 50%;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.dropdown {
+  display: none;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: block;
+  position: absolute;
+  right: 0;
+  z-index: 2;
+}
+
+.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);
+}

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

@@ -0,0 +1,320 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { Dialog } from './Dialog';
+
+const meta = {
+  title: 'Dialog/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  parameters: {},
+  argTypes: { body: { control: 'text' } },
+  args: {
+    updatedAt: '1999-05-26',
+    title: 'Title',
+    summary: 'Summary',
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Body: Story = {
+  args: {
+    body:
+      '## Body\n\n' +
+      'Body will be loaded async.\n\n' +
+      '### Syntax\n\n' +
+      'body supporters basic headings from h2 -> h4 + lists.\n\n' +
+      '- List 1\n' +
+      '- List 2\n' +
+      '- List 3\n',
+  },
+};
+
+export const Attachments: Story = {
+  args: {
+    attachments: {
+      items: [
+        {
+          label: 'Dokument 1.pdf',
+        },
+        {
+          label: 'Dokument 2.pdf',
+        },
+      ],
+    },
+  },
+};
+
+export const Action: Story = {
+  args: {
+    action: [
+      {
+        label: 'Primary',
+      },
+      {
+        label: 'Secondary',
+      },
+    ],
+  },
+};
+
+export const SeenBy: Story = {
+  args: {
+    ...Action.args,
+    seenBy: {
+      as: 'a',
+      href: '#',
+      label: 'Sett av deg + 24',
+      seenByEndUser: true,
+      seenByOthersCount: 24,
+    },
+    activityLog: {
+      as: 'a',
+      href: '#',
+      label: 'Aktivitetslogg',
+    },
+  },
+};
+
+export const Example: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+    recipient: {
+      name: 'Bergen Bar',
+    },
+    title: 'Rapportering av bedriftsdata',
+    summary: 'Du må levere bedriftsdata innen 31. oktober.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
+      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+    action: [
+      {
+        label: 'Rapporter bedriftsdata',
+      },
+    ],
+    attachments: {
+      items: [
+        {
+          label: 'Vedtak om innlevering av bedriftsdata.pdf',
+        },
+      ],
+    },
+  },
+};
+
+export const HistoryContact: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+    recipient: {
+      name: 'Bergen Bar',
+    },
+    title: 'Rapportering av bedriftsdata',
+    summary: 'Innrapporteringen inneholder feil. Se over og lever på nytt.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. ' +
+      'Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+    action: [
+      {
+        label: 'Rapporter bedriftsdata',
+      },
+    ],
+    attachments: {
+      items: [
+        {
+          label: 'Feilliste.pdf',
+        },
+      ],
+    },
+    history: [
+      {
+        createdAt: '2004-01-01 13:34',
+        createdBy: {
+          name: 'Eirik Horneland',
+        },
+        summary: 'Rapportering ble sendt inn.',
+        attachments: [
+          {
+            label: 'Kvittering.pdf',
+          },
+        ],
+      },
+      {
+        createdAt: '2004-01-01 13:34',
+        createdBy: {
+          imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+
+          name: 'Statistisk sentralbyrå',
+        },
+        summary: 'Du må levere bedriftsdata innen 31. oktober.',
+        attachments: [
+          {
+            label: 'Vedtak om innlevering av bedriftsdata.pdf',
+          },
+        ],
+      },
+    ],
+    contactInfo:
+      'Kontakt oss på svar@ssb.no eller ring 62 88 56 08.\n\n' +
+      'Svartjenesten er åpen alle hverdager fra kl. 9-21 og lørdager fra kl. 10-16.',
+  },
+};
+
+export const Signering: Story = {
+  args: {
+    status: { value: 'requires-attention' },
+
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+
+    recipient: {
+      name: 'Bergen Bar',
+    },
+
+    title: 'Registrere enkeltmannsforetak',
+    summary: 'Skjema er klar til signering.',
+    additionalInfo:
+      'Din bedrift er pålagt å rapportere inn bedriftsdata innen **31. oktober**. Vi bruker svarene dine kun til å utarbeide statistikk, og enkeltsvar vil aldri bli offentliggjort. Du kan når som helst kontakte oss og kreve av opplysningene om deg blir slettet.',
+
+    action: [
+      {
+        label: 'Gå til signering',
+      },
+    ],
+
+    attachments: {},
+
+    history: {
+      items: [
+        {
+          updatedAt: '2004-01-01 13:34',
+
+          updatedBy: {
+            name: 'Eirik Horneland',
+          },
+
+          summary: 'Rapportering ble sendt inn.',
+
+          attachments: [
+            {
+              label: 'Kvittering.pdf',
+            },
+          ],
+        },
+        {
+          updatedAt: '2004-01-01 13:34',
+
+          updatedBy: {
+            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+            name: 'Statistisk sentralbyrå',
+          },
+
+          summary: 'Du må levere bedriftsdata innen 31. oktober.',
+
+          attachments: [
+            {
+              label: 'Vedtak om innlevering av bedriftsdata.pdf',
+            },
+          ],
+        },
+      ],
+    },
+
+    contact: {
+      title: 'Ta kontakt',
+      body: 'Ta kontakt for mer informasjon på telefon 99 00 00 00.',
+    },
+  },
+};
+
+export const BrregDraft: Story = {
+  args: {
+    status: { value: 'draft' },
+
+    sender: {
+      name: 'Statistisk sentralbyrå',
+      imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+    },
+
+    recipient: {
+      name: 'Bergen Bar',
+    },
+
+    title: 'Registrere enkeltmannsforetak',
+    summary: 'Skjema er opprettet.',
+
+    action: [
+      {
+        label: 'Gå til skjema',
+      },
+      {
+        label: 'Forkast',
+      },
+    ],
+
+    attachments: {},
+    additionalInfo:
+      'Enkeltpersonforetak må registreres i Enhetsregisteret for å få et organisasjonsnummer. Enkelte må også registreres i Foretaksregisteret.',
+  },
+};
+
+export const BrregSign: Story = {
+  args: {
+    ...BrregDraft.args,
+    status: { value: 'requires-attention' },
+    summary: 'Skjema er klar til signering.',
+
+    action: [
+      {
+        label: 'Til signering',
+      },
+      {
+        label: 'Avslå signering',
+      },
+    ],
+
+    history: {
+      items: [
+        {
+          createdAt: '2004-01-01 13:34',
+          createdBy: {
+            type: 'person',
+            name: 'Eirik Horneland',
+          },
+          summary: 'Rapportering ble sendt inn.',
+          attachments: [
+            {
+              label: 'Kvittering.pdf',
+            },
+          ],
+        },
+        {
+          createdAt: '2004-01-01 13:34',
+          createdBy: {
+            imageUrl: 'https://digdir-proto-proto.vercel.app/_next/static/media/SSB.0ca4474e.png',
+            name: 'Statistisk sentralbyrå',
+          },
+
+          summary: 'Du må levere bedriftsdata innen 31. oktober.',
+
+          attachments: [
+            {
+              label: 'Vedtak om innlevering av bedriftsdata.pdf',
+            },
+          ],
+        },
+      ],
+    },
+  },
+};