@altinn/altinn-components 0.2.2 → 0.4.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.4.0](https://github.com/Altinn/altinn-components/compare/v0.3.0...v0.4.0) (2024-11-08)
+
+
+### Features
+
+* add footer component ([#40](https://github.com/Altinn/altinn-components/issues/40)) ([bdf5c0c](https://github.com/Altinn/altinn-components/commit/bdf5c0cd68c374ac5fe83536033074289f379abe))
+
+## [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/Footer/Footer.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+
+const meta = {
+  title: 'Footer/Footer',
+  component: Footer,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    address: 'Postboks 1382 Vika, 0114 Oslo.',
+    menu: {
+      items: [
+        {
+          id: '1',
+          title: 'Om Altinn',
+        },
+        {
+          id: '2',
+          title: 'Driftsmeldinger',
+        },
+        {
+          id: '3',
+          title: 'Personvern',
+        },
+        {
+          id: '4',
+          title: 'Tilgjengelighet',
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/lib/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { FooterAddress } from './FooterAddress';
+import { FooterBase } from './FooterBase';
+import { FooterLogo } from './FooterLogo';
+import { FooterMenu, type FooterMenuProps } from './FooterMenu';
+
+export interface FooterProps {
+  address: string;
+  menu: FooterMenuProps;
+}
+
+export const Footer = ({ address, menu }: FooterProps) => {
+  return (
+    <FooterBase>
+      <FooterAddress>
+        <FooterLogo />
+        {address}
+      </FooterAddress>
+      <FooterMenu {...menu} />
+    </FooterBase>
+  );
+};

package/lib/components/Footer/FooterAddress.tsx

@@ -0,0 +1,12 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerAddress.module.css';
+
+export interface FooterAddressProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterAddress = ({ className, children }: FooterAddressProps) => {
+  return <address className={cx(styles.address, className)}>{children}</address>;
+};

package/lib/components/Footer/FooterBase.tsx

@@ -0,0 +1,16 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './footerBase.module.css';
+
+export interface FooterBaseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export const FooterBase = ({ className, children }: FooterBaseProps) => {
+  return (
+    <footer className={cx(styles.footer, className)}>
+      <div className={styles.grid}>{children} </div>
+    </footer>
+  );
+};

package/lib/components/Footer/FooterLogo.tsx

@@ -0,0 +1,17 @@
+import cx from 'classnames';
+import { DigdirLogomark } from '../Header/DigdirLogomark.tsx';
+import styles from './footerLogo.module.css';
+
+export interface FooterLogoProps {
+  className?: string;
+  title?: string;
+}
+
+export const FooterLogo = ({ className, title = 'Digdir' }: FooterLogoProps) => {
+  return (
+    <div className={cx(styles.logo, className)}>
+      <DigdirLogomark className={styles.symbol} />
+      <span>{title}</span>
+    </div>
+  );
+};

package/lib/components/Footer/FooterMenu.tsx

@@ -0,0 +1,43 @@
+import cx from 'classnames';
+import type { ElementType } from 'react';
+import { MenuBase } from '../Menu/';
+import styles from './footerMenu.module.css';
+
+export interface FooterMenuProps {
+  className?: string;
+  items: FooterLinkProps[];
+}
+
+export interface FooterLinkProps {
+  as?: ElementType;
+  id?: string;
+  href?: string;
+  title?: string;
+  className?: string;
+}
+
+export const FooterLink = ({ as, className, title, ...rest }: FooterLinkProps) => {
+  const Component = as || 'a';
+
+  return (
+    <Component className={cx(styles.link, className)} {...rest}>
+      {title}
+    </Component>
+  );
+};
+
+export const FooterMenu = ({ className, items = [] }: FooterMenuProps) => {
+  return (
+    <MenuBase className={cx(styles.menu, className)}>
+      <ul className={styles.list}>
+        {items.map((item) => {
+          return (
+            <li key={item.id}>
+              <FooterLink {...item} />
+            </li>
+          );
+        })}
+      </ul>
+    </MenuBase>
+  );
+};

package/lib/components/Footer/footerAddress.module.css

@@ -0,0 +1,8 @@
+.address {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  font-style: normal;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}

package/lib/components/Footer/footerBase.module.css

@@ -0,0 +1,28 @@
+.footer {
+  border-top: 1px solid;
+  border-color: var(--theme-border-subtle);
+
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+
+  padding: 1rem 0;
+  margin: 2rem 1rem;
+}
+
+.grid {
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  row-gap: 1rem;
+}
+
+@media (min-width: 1024px) {
+  .grid {
+    padding: 0 1rem;
+    flex-direction: row;
+  }
+}

package/lib/components/Footer/footerLogo.module.css

@@ -0,0 +1,12 @@
+.logo {
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5em;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.symbol {
+  width: 1rem;
+  height: 1rem;
+}