@altinn/altinn-components 0.2.2 → 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,12 @@
 # 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)
 
 

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/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 = {

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/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/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: [
       {

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

@@ -1,10 +1,7 @@
 'use client';
-import cx from 'classnames';
 import { type MouseEventHandler, useState } from 'react';
 import type { AvatarType } from '../Avatar';
 import { Menu, type MenuGroups, MenuItem, type MenuItemProps, type MenuSearchProps } from '../Menu';
-import { HeaderButton } from './HeaderButton';
-import styles from './globalMenu.module.css';
 
 export type Account = {
   type: AvatarType;
@@ -18,7 +15,10 @@ export interface AccountSearch extends MenuSearchProps {
   hidden?: boolean;
 }
 
+export type MobileMenuType = 'dropdown' | 'drawer';
+
 export interface GlobalMenuProps {
+  variant: MobileMenuType;
   expanded: boolean;
   onToggle: MouseEventHandler;
   items: MenuItemProps[];
@@ -34,15 +34,11 @@ export interface GlobalMenuProps {
 const defaultResultLabel = (hits: number) => `${hits} hits`;
 
 export const GlobalMenu = ({
-  className,
-  expanded,
-  onToggle,
   accounts = [],
   accountGroups = {},
   accountSearch,
   items = [],
   groups,
-  menuLabel = 'Menu',
   backLabel = 'Back',
 }: GlobalMenuProps) => {
   const accountMenu: MenuItemProps[] = accounts.map((account) => ({
@@ -72,7 +68,7 @@ export const GlobalMenu = ({
     onClick: onToggleAccounts,
   };
 
-  const globalMenu = selectedAccount ? [accountMenuItem, ...items] : items;
+  const MobileMenu = selectedAccount ? [accountMenuItem, ...items] : items;
 
   const filteredAccountMenu = filterString
     ? accountMenu
@@ -113,19 +109,14 @@ export const GlobalMenu = ({
     ...(filteredAccountMenu.length > 0 ? filteredAccountMenu : [{ id: 'search', group: 'search', hidden: true }]),
   ];
 
-  return (
-    <div className={cx(styles.button, className)}>
-      <HeaderButton as="div" avatar={accountMenuItem.avatar} onClick={onToggle} expanded={expanded} label={menuLabel} />
-      <div className={styles.dropdown} aria-expanded={expanded}>
-        {selectAccount ? (
-          <>
-            <MenuItem {...backItem} />
-            <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
-          </>
-        ) : (
-          <Menu theme="global" groups={groups} items={globalMenu} />
-        )}
-      </div>
-    </div>
-  );
+  if (selectAccount) {
+    return (
+      <>
+        <MenuItem {...backItem} />
+        <Menu theme="global" search={accountSearchItem} groups={filterAccountGroups} items={accountSwitcher} />
+      </>
+    );
+  }
+
+  return <Menu theme="global" groups={groups} items={MobileMenu} />;
 };

package/lib/components/GlobalMenu/index.tsx

@@ -0,0 +1 @@
+export * from './GlobalMenu.tsx';