@altinn/altinn-components 0.1.0 → 0.2.0

package/.storybook/StoryDecorator.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import styles from "./storyDecorator.module.css";
+
+interface StoryDecoratorProps {
+  tags: string[];
+  theme: string;
+  children: ReactNode;
+}
+
+export const StoryDecorator = ({
+  tags,
+  theme,
+  children,
+}: StoryDecoratorProps) => {
+  const isStable = (tags || []).includes("stable");
+  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>
+  );
+};

package/.storybook/ThemeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import styles from "./theme.module.css";
+
+export const ThemeProvider = <Theme,>({
+  children,
+  theme,
+}: {
+  children?: ReactNode;
+  theme?: Theme;
+}) => {
+  return (
+    <div className={styles.theme} data-theme={theme}>
+      {children}
+    </div>
+  );
+};

package/.storybook/main.ts

@@ -1,15 +1,14 @@
-import {StorybookConfig} from "@storybook/react-vite";
+import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: [
-    "../lib/components/**/*.stories.@(ts|tsx)",
-  ],
+  stories: ["../lib/components/**/*.stories.@(ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "@storybook/addon-themes",
     "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
+    "@storybook/addon-interactions"
   ],
   framework: {
     name: "@storybook/react-vite",

package/.storybook/preview.tsx

@@ -1,33 +1,35 @@
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+import { Preview, StoryFn } from "@storybook/react";
+import { StoryDecorator } from "./StoryDecorator";
 import "../lib/css/global.css";
-import "./preview.css";
-import {StoryFn} from "@storybook/react";
-
 /** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
     },
-  },
-  decorators: [
-    (Story: StoryFn, { tags }: { tags: string[]}) => {
-    const isStable = (tags || []).includes('stable');
-    const state = isStable ? 'stable' : 'experimental';
-    return (
-        <>
-          <span className='preview-container-stage-tag' data-tag={state}>
-            {state}
-          </span>
-          <Story />
-        </>
-    );
-    },
-  ],
+    decorators: [
+        (Story: StoryFn, data) => {
+            const { tags, globals } = data;
+            return (
+                <StoryDecorator tags={tags} theme={globals?.theme}>
+                    <Story />
+                </StoryDecorator>
+            );
+        },
+        withThemeByDataAttribute({
+            themes: {
+                global: "global",
+                neutral: "neutral",
+                company: "company",
+                person: "person",
+            },
+            defaultTheme: "neutral",
+        }),
+    ],
 };
-
-
-
-export default preview;
+export default preview;

package/.storybook/storyDecorator.module.css

@@ -0,0 +1,20 @@
+.preview {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+
+.tag {
+  font-size: 1rem;
+  color: #fff;
+}
+
+.tag[data-tag="experimental"] {
+  background-color: #f0ad4e;
+  padding: 0.25rem 0.5rem;
+}
+
+.tag[data-tag="stable"] {
+  background-color: #5cb85c;
+  padding: 0.25rem 0.5rem;
+}

package/.storybook/theme.module.css

@@ -0,0 +1,3 @@
+.theme[data-theme] {
+  background: var(--theme-background-subtle);
+}

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.2.0](https://github.com/Altinn/altinn-components/compare/v0.1.0...v0.2.0) (2024-11-06)
+
+
+### Features
+
+* add dialogs as experimental ([#24](https://github.com/Altinn/altinn-components/issues/24)) ([12b3e4d](https://github.com/Altinn/altinn-components/commit/12b3e4dc81c236eff5a5ab0364b3a7e992606c3a))
+* add meta fields ([#23](https://github.com/Altinn/altinn-components/issues/23)) ([ea8ef87](https://github.com/Altinn/altinn-components/commit/ea8ef87ca03c089e52a331ab62526be2b5acc089))
+* list item + meta tags ([#17](https://github.com/Altinn/altinn-components/issues/17)) ([f865f6c](https://github.com/Altinn/altinn-components/commit/f865f6c226e8f7ce9d4ce18c0014fb4e1c9d0383))
+
+
+### Bug Fixes
+
+* icons for checkbox and radio ([#25](https://github.com/Altinn/altinn-components/issues/25)) ([fb796e2](https://github.com/Altinn/altinn-components/commit/fb796e25636ec0b27ff643a3036ea25171202a11))
+
 ## [0.1.0](https://github.com/Altinn/altinn-components/compare/v0.0.1...v0.1.0) (2024-11-01)
 
 

package/CONTRIBUTING.MD

@@ -0,0 +1,59 @@
+# Contributing to altinn-components
+
+Thank you for contributing to altinn 3 components! 
+
+This project is a collection of reusable components for building web applications for [Altinn 3](https://docs.altinn.studio/nb/community/about/), and not a general-purpose library.
+If you are looking for a more general-purpose library, you might be looking for [Norwegian public sector's Design system](https://designsystemet.no/).
+
+We appreciate your help in making this project better, and keep in mind that the project is in an early development stage, and we are actively working to improve both the documentation and the codebase.
+
+## Share your feedback and report issues
+
+You can report bugs or suggest new features by going to our [Github Issue Templates](https://github.com/Altinn/altinn-components/issues/new/choose).
+We also welcome questions and feedback. 
+
+## I Want To Contribute
+
+### Getting started with development
+Follow these steps to set up Storybook and the necessary tools for development.
+
+#### Prerequisites for local development and storybook
+
+- The project uses `pnpm` as package manager. It is recommended to use install and use correct version of `pnpm` by using `corepack`, cf. [Using corepack section](https://pnpm.io/installation).
+- Install dependencies with `pnpm install`
+- Required node version is `20.x` or higher.
+
+#### Storybook
+Run storybook with `pnpm storybook` and navigate to `http://localhost:6006/` in your browser.
+
+### Pull requests
+A lot has been written already about how to write good pull requests. [Here are some](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/getting-started/best-practices-for-pull-requests) tips to make the process smoother.
+
+## Style guides
+
+### Code Style
+This project uses [`Biome`](https://biomejs.dev/) for linting and formatting. The configuration is found in the `biome.jsonc` file.
+We recommend using the `biome` CLI to lint and format your code before committing, or using the `biome` extension in your IDE.
+
+Use `pnpm format` to format staged files.
+
+### Commit Messages
+
+This project uses Changesets with the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)
+specification in order to generate changelogs, communicating the nature of changes.
+
+To include commits in the changelog, please ensure that you include the following keywords:
+
+- Start the commit with `fix:` to trigger a patch (0.0.x) version.
+- Start the commit with `feat:` to trigger a minor (0.x.0) version.
+
+Other keywords are also supported, but will not trigger a version bump. These keywords include:
+- `chore:` for changes that do not affect the end user, such as refactoring or updating dependencies.
+- `docs:` for changes to the documentation.
+- `refactor:` for changes that neither fixes a bug nor adds a feature. but improves the codebase.
+
+To make the changelog more specific, you have the option to scope your commits by adding a keyword in parentheses that indicates the area or aspect you are working on. 
+For example:
+- Modifying documentation for contributing: `docs(contributing): add a section on commit messages`.
+- Fixing a bug in the Avatar component: `fix(avatar): fix bug with incorrect image size`.
+

package/README.md

@@ -1,2 +1,34 @@
 # altinn-components
-Reusable react components
+This package is a set of reusable components for building web applications for [Altinn 3](https://docs.altinn.studio/nb/community/about/).
+This is *not* a general purpose library, but a library of components that are specifically designed for the Altinn platform, to ensure
+a consistent look and feel across all applications. It also contains a storybook with stories explaining the purpose and usage of each component, and
+with real examples of how to use them separately or together (composition).
+
+## Installation
+To install the package, run the following command:
+
+```bash
+# for npm users
+npm install @altinn/components
+# for yarn users
+yarn add @altinn/components 
+# for pnpm users
+pnpm add @altinn/components
+```
+Tested with Node.js 20.x <
+
+## Usage
+To use the components in your application, you need to import the components you want to use from the package. For example:
+
+```tsx
+// example: import the Avatar component and type
+import { Avatar, type AvatarVariant } from '@altinn/components';
+```
+and import the css file in your application once:
+```ts
+import '@altinn/components/dist/index.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]()

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { AttachmentLink } from './AttachmentLink';
+
+const meta = {
+  title: 'Attachment/AttachmentLink',
+  component: AttachmentLink,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Document.pdf',
+  },
+} satisfies Meta<typeof AttachmentLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Attachment/AttachmentLink.tsx

@@ -0,0 +1,20 @@
+import { Icon, type IconName } from '../Icon';
+import styles from './attachmentLink.module.css';
+
+export interface AttachmentLinkProps {
+  /** Link url */
+  href: string;
+  /** Label (filename) */
+  label: string;
+  /** Icon */
+  icon?: IconName;
+}
+
+export const AttachmentLink = ({ icon = 'file', href, label }: AttachmentLinkProps) => {
+  return (
+    <a href={href} className={styles.link}>
+      <Icon name={icon} className={styles.icon} />
+      <span className={styles.label}>{label}</span>
+    </a>
+  );
+};

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { AttachmentList } from './AttachmentList';
+
+const meta = {
+  title: 'Attachment/AttachmentList',
+  component: AttachmentList,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    items: [
+      {
+        label: '1-0 Castro.pdf',
+      },
+      {
+        label: '2-0 Kornvig.pdf',
+      },
+      {
+        label: '3-0 Kartum.pdf',
+      },
+      {
+        label: '3-1 Zinkernagel.pdf',
+      },
+      {
+        label: '4-1 Castro.pdf',
+      },
+    ],
+  },
+} satisfies Meta<typeof AttachmentList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Attachment/AttachmentList.tsx

@@ -0,0 +1,26 @@
+import type { TypographySize } from '../Typography';
+import { AttachmentLink, type AttachmentLinkProps } from './AttachmentLink';
+import styles from './attachmentList.module.css';
+
+export interface AttachmentListProps {
+  items: AttachmentLinkProps[];
+  size?: TypographySize;
+}
+
+export const AttachmentList = ({ size, items }: AttachmentListProps) => {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <ul className={styles.list} data-size={size}>
+      {items.map((item, index) => {
+        return (
+          <li key={index} className={styles.item}>
+            <AttachmentLink {...item} key={'attachment' + index} />
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

package/lib/components/Attachment/attachmentLink.module.css

@@ -0,0 +1,20 @@
+.link {
+  display: inline-flex;
+  align-items: start;
+  column-gap: 0.25em;
+  color: var(--theme-base-default);
+}
+
+.link:hover {
+  color: var(--theme-base-hover);
+}
+
+.label {
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.icon {
+  font-size: 1.5em;
+}

package/lib/components/Attachment/attachmentList.module.css

@@ -0,0 +1,12 @@
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  padding: 0;
+  margin: 0;
+}

package/lib/components/Attachment/index.ts

@@ -0,0 +1,2 @@
+export * from './AttachmentLink';
+export * from './AttachmentList';

package/lib/components/Avatar/avatar.module.css

@@ -1,4 +1,6 @@
 .avatar {
+  flex-grow: 0;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/components/Badge/Badge.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Atoms/Badge/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Alert: Story = {
+  args: {
+    color: 'alert',
+  },
+};
+
+export const UnreadCount: Story = {
+  args: {
+    label: '2',
+    color: 'alert',
+  },
+};

package/lib/components/Badge/Badge.tsx

@@ -2,18 +2,21 @@ import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './badge.module.css';
 
-interface BadgeProps {
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
+export interface BadgeProps {
   label?: string | number;
-  variant?: 'neutral' | 'strong';
-  size?: 'medium' | 'small';
+  color?: BadgeColor;
+  size?: BadgeSize;
+  className?: string;
   children?: ReactNode;
 }
 
-// TODO: add aria-label to the badge
-export const Badge = ({ label, variant = 'neutral', size = 'medium', children }: BadgeProps) => {
-  const classNames = cx(styles.badge, {
-    [styles.strong]: variant === 'strong',
-    [styles.small]: size === 'small',
-  });
-  return <span className={classNames}>{label || children}</span>;
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+      <span className={styles.label}>{label || children}</span>
+    </span>
+  );
 };

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;