@altinn/altinn-components 0.2.1 → 0.3.0

package/.github/workflows/ci-cd-main.yml

@@ -1,3 +1,4 @@
+name: CI/CD Main
 on:
     push:
       branches:
@@ -6,10 +7,12 @@ on:
 permissions:
   contents: write
   pull-requests: write
-
-name: release-please
+  pages: write
+  id-token: write
 
 jobs:
+    deploy-documentation:
+      uses: ./.github/workflows/workflow-deploy-storybook.yml
     release-please:
       runs-on: ubuntu-latest
       steps:

package/.github/workflows/workflow-deploy-storybook.yml

@@ -0,0 +1,35 @@
+name: Deploy Storybook to GitHub Pages
+
+on:
+  workflow_dispatch:
+  workflow_call:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup PNPM
+        uses: pnpm/action-setup@v2
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build-storybook
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: "./storybook-static"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/.storybook/StoryDecorator.tsx

@@ -1,5 +1,6 @@
-import { ReactNode } from "react";
+import {ReactNode} from "react";
 import styles from "./storyDecorator.module.css";
+import {RootProvider} from "../lib/components/RootProvider/";
 
 interface StoryDecoratorProps {
   tags: string[];
@@ -16,12 +17,13 @@ export const StoryDecorator = ({
   const state = isStable ? "stable" : "experimental";
 
   return (
-    <div className={styles.preview} data-theme={theme}>
-      <span className={styles.tag} data-tag={state}>
-        {state}
-      </span>
-
-      <div className={styles.component}>{children}</div>
-    </div>
+      <RootProvider>
+          <div className={styles.preview} data-theme={theme}>
+              <div className={styles.component}>{children}</div>
+              <span className={styles.tag} data-tag={state}>
+                  {state}
+              </span>
+          </div>
+      </RootProvider>
   );
 };

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.3.0](https://github.com/Altinn/altinn-components/compare/v0.2.2...v0.3.0) (2024-11-08)
+
+
+### Features
+
+* add snackbar and bulk operation action components ([#38](https://github.com/Altinn/altinn-components/issues/38)) ([a39178d](https://github.com/Altinn/altinn-components/commit/a39178d060819e6943b1d1a5632832529b8f4165))
+
+## [0.2.2](https://github.com/Altinn/altinn-components/compare/v0.2.1...v0.2.2) (2024-11-06)
+
+
+### Bug Fixes
+
+* dialog-props ([#28](https://github.com/Altinn/altinn-components/issues/28)) ([59b6a8f](https://github.com/Altinn/altinn-components/commit/59b6a8fb04abece013218402587f93863c1b9012))
+
 ## [0.2.1](https://github.com/Altinn/altinn-components/compare/v0.2.0...v0.2.1) (2024-11-06)
 
 

package/README.md

@@ -17,7 +17,25 @@ pnpm add @altinn/components
 ```
 Tested with Node.js 20.x <
 
+## Requirements
+
+React `>=18`in your project. 
+
 ## Usage
+Wrap your application in RootProvider to enable shared context across all components. Here’s a basic setup:
+
+```tsx
+import { RootProvider } from '@altinn/components';
+
+function App() {
+  return (
+    <RootProvider>
+      { /* Your application here */ }
+    </RootProvider>
+  );
+}
+```
+
 To use the components in your application, you need to import the components you want to use from the package. For example:
 
 ```tsx
@@ -26,9 +44,9 @@ import { Avatar, type AvatarVariant } from '@altinn/components';
 ```
 and import the css file in your application once:
 ```ts
-import '@altinn/components/dist/index.css';
+import '@altinn/altinn-components/lib/css/global.css';
 ```
 for correct `font-family` and minimal collection of resets.
 
 ## Documentation
-The documentation for the components can be found in the storybook, cf. [TODO ADD Storybook]()
+The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)

package/lib/components/Attachment/AttachmentLink.stories.ts

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { AttachmentLink } from './AttachmentLink';
 
 const meta = {

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

@@ -33,6 +33,7 @@ export const Company: Story = {
 
 export const Logo: Story = {
   args: {
+    type: 'company',
     imageUrl: 'https://avatars.githubusercontent.com/u/1536293?s=200&v=4',
     size: 'xl',
   },

package/lib/components/Button/IconButton.tsx

@@ -0,0 +1,21 @@
+import cx from 'classnames';
+import { ButtonBase, type ButtonColor, type ButtonSize, type ButtonVariant } from '../Button';
+import { Icon, type IconName } from '../Icon';
+import styles from './iconButton.module.css';
+
+interface IconButtonProps {
+  icon: IconName;
+  color?: ButtonColor;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const IconButton = ({ className, variant, color, size, icon, onClick }: IconButtonProps) => {
+  return (
+    <ButtonBase variant={variant} color={color} size={size} className={cx(styles.button, className)} onClick={onClick}>
+      <Icon name={icon} className={styles.icon} />
+    </ButtonBase>
+  );
+};

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

@@ -56,14 +56,12 @@
 /* outline */
 
 .button[data-variant="outline"] {
-  border-color: var(--theme-base-hover);
   border-style: solid;
 }
 
 /* dotted */
 
 .button[data-variant="dotted"] {
-  border-color: var(--theme-base-hover);
   border-style: dotted;
 }
 
@@ -78,6 +76,23 @@
   color: var(--theme-text-default);
 }
 
+/* primary color */
+
+.button[data-color="primary"] {
+  border-color: var(--theme-base-default);
+}
+
+.button[data-color="primary"]:hover {
+  border-color: var(--theme-base-hover);
+}
+
+.button[data-color="primary"][data-variant="solid"],
+.button[data-color="primary"][data-variant="solid"] {
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
+  color: white;
+}
+
 /* secondary color */
 
 .button[data-color="secondary"] {

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

@@ -0,0 +1,14 @@
+.button {
+  border: 1px solid;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+
+.icon {
+  font-size: 1.5rem;
+  margin: 0.625rem;
+}

package/lib/components/Button/index.ts

@@ -1,3 +1,4 @@
 export * from './ButtonBase';
 export * from './Button';
 export * from './ComboButton';
+export * from './IconButton';

package/lib/components/ContextMenu/ContextMenu.tsx

@@ -4,7 +4,7 @@ import { Icon } from '../Icon';
 import { Menu, type MenuGroups, type MenuItemProps } from '../Menu';
 import styles from './contextMenu.module.css';
 
-export interface DialogContextMenuProps {
+export interface ContextMenuProps {
   onToggle?: MouseEventHandler;
   label: string;
   value: string | number;
@@ -14,7 +14,7 @@ export interface DialogContextMenuProps {
   className?: string;
 }
 
-export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: DialogContextMenuProps) => {
+export const ContextMenu = ({ expanded = true, onToggle, groups = {}, items }: ContextMenuProps) => {
   return (
     <div className={styles.toggle}>
       <ButtonBase className={styles.button} as="button" color="secondary" onClick={onToggle}>

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { Dialog } from './Dialog';
 
 const meta = {
@@ -10,7 +8,13 @@ const meta = {
   parameters: {},
   argTypes: { body: { control: 'text' } },
   args: {
+    menu: [
+      {
+        items: [{ label: 'Menu 1' }],
+      },
+    ],
     updatedAt: '1999-05-26',
+    updatedAtLabel: '26. mai 1999',
     title: 'Title',
     summary: 'Summary',
   },

package/lib/components/Dialog/Dialog.tsx

@@ -9,6 +9,8 @@ import { DialogFooter } from './DialogFooter';
 import { DialogHeader } from './DialogHeader';
 import { DialogSeenBy, type DialogSeenByProps } from './DialogSeenBy';
 
+import type { ContextMenuProps } from '../ContextMenu/';
+
 import type { ReactNode } from 'react';
 import { type DialogActionButtonProps, DialogActions } from './DialogActions.tsx';
 import type { DialogRecipientProps, DialogSenderProps } from './DialogHeadings.tsx';
@@ -21,14 +23,18 @@ export interface DialogProps {
   title: string;
   /** Back button */
   backButton?: DialogBackButtonProps;
+  /** Context menu */
+  menu?: ContextMenuProps;
   /** Dialog status */
   status?: DialogStatusProps;
   /** Updated date time */
   updatedAt?: string;
-  /** Latest updated by name */
-  updatedByName?: string;
+  /** Updated label */
+  updatedAtLabel?: string;
   /** Due date */
   dueAt?: string;
+  /** Due at label */
+  dueAtLabel?: string;
   /** Sender */
   sender?: DialogSenderProps;
   /** Recipient  */
@@ -57,9 +63,11 @@ export interface DialogProps {
 
 export const Dialog = ({
   backButton,
+  menu,
   updatedAt,
-  updatedByName,
+  updatedAtLabel,
   dueAt,
+  dueAtLabel,
   status,
   title,
   sender,
@@ -75,7 +83,7 @@ export const Dialog = ({
 }: DialogProps) => {
   return (
     <DialogBase>
-      <DialogNav status={status} dueAt={dueAt} backButton={backButton} />
+      <DialogNav status={status} dueAt={dueAt} dueAtLabel={dueAtLabel} backButton={backButton} menu={menu} />
       <DialogArticleBase>
         <DialogHeader
           title={title}
@@ -85,7 +93,7 @@ export const Dialog = ({
           variant="neutral"
         />
         <DialogBodyBase>
-          <DialogContent updatedAt={updatedAt} updatedByName={updatedByName} summary={summary} body={body} />
+          <DialogContent updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} summary={summary} body={body} />
           {attachments && <DialogAttachments {...attachments} />}
           {actions?.length > 0 && <DialogActions items={actions} />}
           <MetaBase>

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogAttachments } from './DialogAttachments';
 
 const meta = {

package/lib/components/Dialog/DialogContent.tsx

@@ -3,7 +3,6 @@ import { Typography } from '../Typography';
 import { DialogMetadata } from './DialogMetadata';
 
 export interface DialogContentProps {
-  updatedByName?: string;
   updatedAt?: string;
   updatedAtLabel?: string;
   summary?: string;

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogHeader } from './DialogHeader';
 
 const meta = {

package/lib/components/Dialog/DialogListItem.tsx

@@ -53,6 +53,8 @@ export type DialogListItemProps = {
   touchedBy?: DialogTouchedByActor[];
   /** Number of attachments */
   attachmentsCount?: number;
+  /** OnClick handler */
+  onClick?: () => void;
 };
 
 /**
@@ -82,6 +84,7 @@ export const DialogListItem = ({
   attachmentsCount,
   title,
   summary,
+  onClick,
   ...rest
 }: DialogListItemProps) => {
   return (

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogMetadata } from './DialogMetadata';
 
 const meta = {

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogNav } from './DialogNav';
 
 const meta = {

package/lib/components/Dialog/DialogNav.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import type { ElementType } from 'react';
 import { Button } from '../Button';
-import { ContextMenu, type DialogContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
+import { ContextMenu, type ContextMenuProps } from '../ContextMenu/ContextMenu.tsx';
 import { MetaTimestamp } from '../Meta';
 import { DialogStatus, type DialogStatusProps } from './DialogStatus';
 import { DialogTouchedBy, type DialogTouchedByActor } from './DialogTouchedBy';
@@ -17,10 +17,10 @@ export interface DialogBackButtonProps {
 export interface DialogNavProps {
   status?: DialogStatusProps;
   dueAt?: string;
-  duaAtLabel?: string;
+  dueAtLabel?: string;
   touchedBy?: DialogTouchedByActor[];
   backButton?: DialogBackButtonProps;
-  menu?: DialogContextMenuProps;
+  menu?: ContextMenuProps;
 }
 
 /**
@@ -33,8 +33,8 @@ export const DialogNav = ({
   },
   status,
   dueAt,
+  dueAtLabel,
   touchedBy,
-  duaAtLabel,
   menu,
 }: DialogNavProps) => {
   const [expandedItem, setexpandedItem] = useState<boolean>(false);
@@ -46,9 +46,9 @@ export const DialogNav = ({
         {backButton?.label || 'Back'}
       </Button>
       <div className={styles.action}>
-        {duaAtLabel && duaAtLabel && (
+        {dueAt && dueAtLabel && (
           <MetaTimestamp datetime={dueAt} size="xs">
-            {duaAtLabel}
+            {dueAtLabel}
           </MetaTimestamp>
         )}
         {status && <DialogStatus {...status} />}

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

@@ -1,7 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { useState } from 'react';
-
 import { DialogSeenBy } from './DialogSeenBy';
 
 const meta = {
@@ -12,6 +9,7 @@ const meta = {
   args: {
     seenByEndUser: true,
     seenByOthersCount: 2,
+    label: '',
   },
 } satisfies Meta<typeof DialogSeenBy>;
 
@@ -39,17 +37,17 @@ export const seenByEndUserAndOthers: Story = {
   },
 };
 
-export const ExampleLabel = ({ seenByEndUser, seenByOthersCount }) => {
-  let seen = false;
+export const ExampleLabel = ({
+  seenByEndUser,
+  seenByOthersCount,
+}: { seenByEndUser: boolean; seenByOthersCount: number }) => {
   const seenByLabel = [];
 
   if (seenByEndUser) {
-    seen = true;
     seenByLabel.push('deg');
   }
 
   if (seenByOthersCount) {
-    seen = true;
     seenByLabel.push(seenByOthersCount);
   }
 

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

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { DialogTitle } from './DialogTitle';
 
 const meta = {

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

@@ -7,7 +7,7 @@
 
 .item[aria-selected="true"] {
   background-color: var(--theme-background-subtle);
-  outline: 1px solid;
+  outline: 2px solid;
 }
 
 .link {

package/lib/components/Dropdown/Backdrop.tsx

@@ -0,0 +1,11 @@
+import cx from 'classnames';
+import styles from './backdrop.module.css';
+
+export interface BackdropProps {
+  expanded?: boolean;
+  className?: string;
+}
+
+export const Backdrop = ({ expanded = false, className }: BackdropProps) => {
+  return <div className={cx(styles.backdrop, className)} aria-expanded={expanded} />;
+};

package/lib/components/Dropdown/DrawerBase.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './drawerBase.module.css';
+
+export interface DrawerBaseProps {
+  expanded?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DrawerBase = ({ expanded = false, className, children }: DrawerBaseProps) => {
+  return (
+    <div className={cx(styles.drawer, className)} aria-expanded={expanded}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Dropdown/DropdownBase.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './dropdownBase.module.css';
+
+export interface DropdownBaseProps {
+  expanded?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const DropdownBase = ({ expanded = false, className, children }: DropdownBaseProps) => {
+  return (
+    <div className={cx(styles.dropdown, className)} aria-expanded={expanded}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Dropdown/backdrop.module.css

@@ -0,0 +1,8 @@
+.backdrop {
+  background-color: rgba(17, 29, 70, 0.25);
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

package/lib/components/Dropdown/drawerBase.module.css

@@ -0,0 +1,8 @@
+.drawer {
+  display: none;
+}
+
+.drawer[aria-expanded="true"] {
+  display: block;
+  width: 100%;
+}

package/lib/components/Dropdown/dropdownBase.module.css

@@ -0,0 +1,18 @@
+.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/Dropdown/index.ts

@@ -0,0 +1,3 @@
+export * from './DrawerBase';
+export * from './DropdownBase';
+export * from './Backdrop';

package/lib/components/{Header → GlobalMenu}/GlobalMenu.stories.tsx

@@ -6,9 +6,7 @@ const meta = {
   title: 'Header/GlobalMenu',
   component: GlobalMenu,
   tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
+  parameters: {},
   args: {
     groups: {
       apps: {
@@ -141,18 +139,8 @@ export const Accounts: Story = {
         title: 'Deg selv og favoritter',
       },
       secondary: {
-        divider: true,
         title: 'Andre kontoer',
       },
-      favourites: {
-        divider: true,
-      },
-      company: {
-        divider: true,
-      },
-      person: {
-        divider: true,
-      },
     },
     accounts: [
       {