@altinn/altinn-components 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -1,111 +0,0 @@
-# Changelog
-
-## [0.6.2](https://github.com/Altinn/altinn-components/compare/v0.6.1...v0.6.2) (2024-11-20)
-
-
-### Bug Fixes
-
-* bump version for alignment with npm ([#65](https://github.com/Altinn/altinn-components/issues/65)) ([1de4f0a](https://github.com/Altinn/altinn-components/commit/1de4f0a37a7d37a2c04543d4fd8f1c733005f957))
-
-## [0.6.1](https://github.com/Altinn/altinn-components/compare/v0.6.0...v0.6.1) (2024-11-20)
-
-
-### Bug Fixes
-
-* publish npm: revert to old working export ([#63](https://github.com/Altinn/altinn-components/issues/63)) ([448bea6](https://github.com/Altinn/altinn-components/commit/448bea64b7220ad747eddb20dc624ded055dfb60))
-
-## [0.6.0](https://github.com/Altinn/altinn-components/compare/v0.5.2...v0.6.0) (2024-11-20)
-
-
-### Features
-
-* date picker + bookmarks + saved searches ([#60](https://github.com/Altinn/altinn-components/issues/60)) ([3cc249e](https://github.com/Altinn/altinn-components/commit/3cc249ebbd6bb1f5157524a0bfa1fa6693f38dd8))
-
-## [0.5.2](https://github.com/Altinn/altinn-components/compare/v0.5.1...v0.5.2) (2024-11-18)
-
-
-### Bug Fixes
-
-* fixing selecting current account and simplify API for Header ([#58](https://github.com/Altinn/altinn-components/issues/58)) ([b39a14a](https://github.com/Altinn/altinn-components/commit/b39a14a14014ff78209d636f3edc93507b443fd2))
-
-## [0.5.1](https://github.com/Altinn/altinn-components/compare/v0.5.0...v0.5.1) (2024-11-16)
-
-
-### Bug Fixes
-
-* add log out button and refactoring of global menu ([#50](https://github.com/Altinn/altinn-components/issues/50)) ([0fc8bfa](https://github.com/Altinn/altinn-components/commit/0fc8bfaa0feb113624da9e740aed54d61de15d4c))
-
-## [0.5.0](https://github.com/Altinn/altinn-components/compare/v0.4.1...v0.5.0) (2024-11-15)
-
-
-### Features
-
-* search bar ([#45](https://github.com/Altinn/altinn-components/issues/45)) ([cc908e0](https://github.com/Altinn/altinn-components/commit/cc908e05957783adf97b94d5e196bf9722523471))
-
-## [0.4.1](https://github.com/Altinn/altinn-components/compare/v0.4.0...v0.4.1) (2024-11-11)
-
-
-### Bug Fixes
-
-* css changes to dialog ([#43](https://github.com/Altinn/altinn-components/issues/43)) ([79e3287](https://github.com/Altinn/altinn-components/commit/79e3287dc2efbce8ba7a9c0b94f955514289c0d3))
-
-## [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)
-
-
-### 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)
-
-
-### Bug Fixes
-
-* export members and add use client if needed for next support ([#26](https://github.com/Altinn/altinn-components/issues/26)) ([cb2c52e](https://github.com/Altinn/altinn-components/commit/cb2c52e8f8bd3b2633b439285bb8f4e5dc36d2ed))
-
-## [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)
-
-
-### Features
-
-* mark Avatar and AvatarGroup as stable ([#14](https://github.com/Altinn/altinn-components/issues/14)) ([fd8bbce](https://github.com/Altinn/altinn-components/commit/fd8bbce2ce59954d8682527b1a9d70bd08b9ccd7))
-
-## 0.0.1 (2024-10-31)
-
-
-### Features
-
-* setup project with components: Layout, Header, Toolbar, Menu and Avatar ([f789c56](https://github.com/Altinn/altinn-components/commit/f789c5600c76339b9d1d58b92405a1a202d9b702))
-
-
-### Miscellaneous Chores
-
-* release 0.0.1 ([#8](https://github.com/Altinn/altinn-components/issues/8)) ([4a38885](https://github.com/Altinn/altinn-components/commit/4a3888565d53763307882f9fcc2cca503289c2c5))

package/CONTRIBUTING.MD

@@ -1,59 +0,0 @@
-# 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/biome.jsonc

@@ -1,65 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
-  "vcs": {
-    "enabled": true,
-    "clientKind": "git",
-    "defaultBranch": "main"
-  },
-  "organizeImports": {
-    "enabled": true
-  },
-  "formatter": {
-    "formatWithErrors": true,
-    "enabled": true,
-    "lineWidth": 120,
-    "lineEnding": "lf",
-    "ignore": [],
-    "indentStyle": "space",
-    "indentWidth": 2
-  },
-  "javascript": {
-    "formatter": {
-      "arrowParentheses": "always",
-      "quoteStyle": "single",
-      "jsxQuoteStyle": "double",
-      "semicolons": "always",
-      "trailingCommas": "all",
-      "quoteProperties": "asNeeded",
-      "bracketSpacing": true,
-      "bracketSameLine": false
-    }
-  },
-  "css": {
-    "parser": {
-      "cssModules": true
-    },
-    "formatter": {
-      "enabled": true,
-      "indentStyle": "space",
-      "indentWidth": 2
-    },
-    "linter": {
-      "enabled": true
-    }
-  },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "suspicious": {
-        "noArrayIndexKey": "off"
-      },
-      "recommended": true,
-      "style": {
-        "noUnusedTemplateLiteral": "off",
-        "noNonNullAssertion": "off",
-        "useTemplate": "off"
-      },
-      "correctness": {
-        "useExhaustiveDependencies": "warn"
-      }
-    }
-  },
-  "files": {
-    "ignore": [".github", "node_modules", "dist", "build", ".storybook", "lib/stories"]
-  }
-}

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AttachmentLink } from './AttachmentLink';
-
-const meta = {
-  title: 'Atoms/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

@@ -1,20 +0,0 @@
-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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { AttachmentList } from './AttachmentList';
-
-const meta = {
-  title: 'Atoms/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

@@ -1,26 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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

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

package/lib/components/Avatar/Avatar.tsx

@@ -1,83 +0,0 @@
-'use client';
-import cx from 'classnames';
-import { useState } from 'react';
-import styles from './avatar.module.css';
-import { fromStringToColor } from './color';
-
-export type AvatarType = 'company' | 'person' | 'custom';
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-type AvatarVariant = 'square' | 'circle';
-type AvatarColor = 'dark' | 'light';
-
-/**
- * Props for the Avatar component.
- */
-export interface AvatarProps {
-  /** The name to display in the avatar. */
-  name: string;
-  /** The type of avatar. */
-  type?: AvatarType;
-  /** The size of the avatar. */
-  size?: AvatarSize;
-  /** Additional class names to apply to the avatar. */
-  className?: string;
-  /** URL of the image to display in the avatar. */
-  imageUrl?: string;
-  /** Alt text for the image. */
-  imageUrlAlt?: string;
-  /** Whether to display an outline around the avatar. */
-  outline?: boolean;
-  /** Custom label to display inside the avatar. */
-  customLabel?: string;
-}
-
-/**
- * Avatar component to display user or company avatars with various customization options.
- */
-export const Avatar = ({
-  type = 'person',
-  size = 'sm',
-  name = 'Avatar',
-  outline = false,
-  imageUrl,
-  imageUrlAlt,
-  customLabel,
-  className,
-}: AvatarProps): JSX.Element => {
-  const [hasImageError, setHasImageError] = useState<boolean>(false);
-  const variant: AvatarVariant = type === 'person' ? 'circle' : 'square';
-  const color: AvatarColor = type === 'person' ? 'light' : 'dark';
-
-  const { backgroundColor, foregroundColor } = fromStringToColor(name, color);
-  const initials = (name[0] ?? '').toUpperCase();
-  const usingImageUrl = imageUrl && !hasImageError;
-
-  const inlineStyles = !usingImageUrl
-    ? {
-        backgroundColor,
-        color: foregroundColor,
-      }
-    : undefined;
-
-  return (
-    <div
-      className={cx(styles.avatar, styles[variant], styles[size], { [styles.outline]: outline }, className)}
-      style={inlineStyles}
-      aria-hidden
-    >
-      {usingImageUrl ? (
-        <img
-          src={imageUrl}
-          className={styles.image}
-          alt={imageUrlAlt || imageUrl}
-          onError={() => {
-            setHasImageError(true);
-          }}
-        />
-      ) : (
-        <span>{customLabel || initials}</span>
-      )}
-    </div>
-  );
-};

package/lib/components/Avatar/AvatarGroup.stories.ts

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { AvatarGroup } from './AvatarGroup';
-
-const meta = {
-  title: 'Avatar/AvatarGroup',
-  component: AvatarGroup,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs', 'stable'],
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    //    layout: 'fullscreen',
-  },
-  args: {},
-} satisfies Meta<typeof AvatarGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const People: Story = {
-  args: {
-    defaultType: 'person',
-    items: [
-      {
-        name: 'Albert Åberg',
-      },
-      {
-        name: 'Birger Meling',
-      },
-      {
-        name: 'Celine Dion',
-      },
-    ],
-  },
-};
-
-export const Companies: Story = {
-  args: {
-    defaultType: 'company',
-    items: [
-      {
-        name: 'Albert Åberg',
-      },
-      {
-        name: 'Birger Meling',
-      },
-      {
-        name: 'Celine Dion',
-      },
-    ],
-  },
-};
-
-export const CompanyAndPerson: Story = {
-  args: {
-    items: [
-      {
-        type: 'company',
-        name: 'Albert Åberg',
-      },
-      {
-        type: 'person',
-        name: 'Birger Meling',
-      },
-    ],
-  },
-};

package/lib/components/Avatar/AvatarGroup.tsx

@@ -1,60 +0,0 @@
-'use client';
-import cx from 'classnames';
-import { useMemo } from 'react';
-import { Avatar, type AvatarProps, type AvatarSize, type AvatarType } from '.';
-import styles from './avatarGroup.module.css';
-
-/**
- * Props for the AvatarGroup components.
- */
-export interface AvatarGroupProps {
-  /** Array of avatars to display in the group, each specified by AvatarProps. */
-  items?: AvatarProps[];
-  /** Maximum number of avatars to show in the group. Remaining avatars are summarized in a "+X" label. */
-  maxItemsCount?: number;
-  /** Default avatar type to apply if not specified in individual items. This affects the styling. */
-  defaultType?: AvatarType;
-  /** Size of all avatars in the group (e.g., 'sm', 'md', 'lg'). */
-  size?: AvatarSize;
-  /** Additional CSS class for styling the avatar group container. */
-  className?: string;
-}
-
-/**
- * Avatar group component for displaying multiple avatars as a group.
- */
-export const AvatarGroup = ({
-  items = [],
-  maxItemsCount = 4,
-  defaultType,
-  size = 'sm',
-  className,
-}: AvatarGroupProps) => {
-  const maxItems = useMemo(() => items.slice(0, maxItemsCount), [items, maxItemsCount]);
-
-  if (items?.length === 0) {
-    return <div className={styles.avatarGroup} />;
-  }
-
-  return (
-    <ul className={cx(styles.reset, styles.group, styles[size], className)} data-count={maxItems?.length}>
-      {maxItems.map((avatar, index) => {
-        const lastLegalAvatarReached = index === maxItemsCount - 1;
-        const customLabel = avatar.customLabel || lastLegalAvatarReached ? items.length.toString() : undefined;
-        return (
-          <li className={cx(styles.reset, styles.item)} key={avatar.name}>
-            <Avatar
-              name={avatar.name}
-              customLabel={customLabel}
-              imageUrl={avatar.imageUrl}
-              imageUrlAlt={avatar.imageUrlAlt}
-              type={avatar?.type || defaultType}
-              size={size}
-              outline
-            />
-          </li>
-        );
-      })}
-    </ul>
-  );
-};

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

@@ -1,61 +0,0 @@
-.avatar {
-  flex-grow: 0;
-  flex-shrink: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  --avatar-font-size-xs: 0.75rem;
-  --avatar-font-size-sm: 0.875rem;
-  --avatar-font-size-md: 1.125rem;
-  --avatar-font-size-lg: 1.25rem;
-  --avatar-font-size-xl: 1.5rem;
-}
-
-.circle {
-  border-radius: 50%;
-}
-
-.square {
-  border-radius: 5%;
-}
-
-.outline {
-  outline: 1px solid #ffffff;
-  box-sizing: border-box;
-}
-
-.xs {
-  font-size: var(--avatar-font-size-xs);
-  width: 20px;
-  height: 20px;
-}
-
-.sm {
-  font-size: var(--avatar-font-size-sm);
-  width: 24px;
-  height: 24px;
-}
-
-.md {
-  font-size: var(--avatar-font-size-md);
-  width: 30px;
-  height: 30px;
-}
-
-.lg {
-  font-size: var(--avatar-font-size-lg);
-  width: 36px;
-  height: 36px;
-}
-
-.xl {
-  font-size: var(--avatar-font-size-xl);
-  width: 44px;
-  height: 44px;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-}