@altinn/altinn-components 0.0.1 → 0.1.0

package/.storybook/preview.css

@@ -0,0 +1,18 @@
+.preview-container-stage-tag {
+    color: #fff;
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+}
+
+.preview-container-stage-tag[data-tag="experimental"] {
+    background-color: #f0ad4e;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}
+
+.preview-container-stage-tag[data-tag="stable"] {
+    background-color: #5cb85c;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+}

package/.storybook/preview.tsx

@@ -0,0 +1,33 @@
+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,
+      },
+    },
+  },
+  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 />
+        </>
+    );
+    },
+  ],
+};
+
+
+
+export default preview;

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [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)
 
 

package/lib/components/Avatar/Avatar.tsx

@@ -6,8 +6,9 @@ import { fromStringToColor } from './color';
 
 export type AvatarType = 'company' | 'person' | 'custom';
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type AvatarVariant = 'square' | 'circle';
-export type AvatarColor = 'dark' | 'light';
+
+type AvatarVariant = 'square' | 'circle';
+type AvatarColor = 'dark' | 'light';
 
 /**
  * Props for the Avatar component.
@@ -19,10 +20,6 @@ export interface AvatarProps {
   type?: AvatarType;
   /** The size of the avatar. */
   size?: AvatarSize;
-  /** The variant of the avatar shape. */
-  variant?: AvatarVariant;
-  /** The color theme of the avatar. */
-  color?: AvatarColor;
   /** Additional class names to apply to the avatar. */
   className?: string;
   /** URL of the image to display in the avatar. */
@@ -39,10 +36,8 @@ export interface AvatarProps {
  * Avatar component to display user or company avatars with various customization options.
  */
 export const Avatar = ({
-  type,
+  type = 'person',
   size = 'sm',
-  variant,
-  color,
   name = 'Avatar',
   outline = false,
   imageUrl,
@@ -51,13 +46,10 @@ export const Avatar = ({
   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 defaultVariant = type === 'person' ? 'circle' : 'square';
-  const defaultColor = type === 'person' ? 'light' : 'dark';
-  const appliedVariant = variant || defaultVariant;
-  const appliedColor = color || defaultColor;
-
-  const { backgroundColor, foregroundColor } = fromStringToColor(name, appliedColor);
+  const { backgroundColor, foregroundColor } = fromStringToColor(name, color);
   const initials = (name[0] ?? '').toUpperCase();
   const usingImageUrl = imageUrl && !hasImageError;
 
@@ -70,7 +62,7 @@ export const Avatar = ({
 
   return (
     <div
-      className={cx(styles.avatar, styles[appliedVariant], styles[size], { [styles.outline]: outline }, className)}
+      className={cx(styles.avatar, styles[variant], styles[size], { [styles.outline]: outline }, className)}
       style={inlineStyles}
       aria-hidden
     >

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

@@ -1,12 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
 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'],
+  tags: ['autodocs', 'stable'],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
     //    layout: 'fullscreen',
@@ -19,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 
 export const People: Story = {
   args: {
-    type: 'person',
+    defaultType: 'person',
     items: [
       {
         name: 'Albert Åberg',
@@ -36,7 +35,7 @@ export const People: Story = {
 
 export const Companies: Story = {
   args: {
-    type: 'company',
+    defaultType: 'company',
     items: [
       {
         name: 'Albert Åberg',

package/lib/components/Avatar/AvatarGroup.tsx

@@ -3,15 +3,32 @@ 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;
-  type?: AvatarType;
+  /** 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;
 }
 
-export const AvatarGroup = ({ items = [], maxItemsCount = 4, type, size = 'sm', className }: AvatarGroupProps) => {
+/**
+ * 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) {
@@ -30,7 +47,7 @@ export const AvatarGroup = ({ items = [], maxItemsCount = 4, type, size = 'sm',
               customLabel={customLabel}
               imageUrl={avatar.imageUrl}
               imageUrlAlt={avatar.imageUrlAlt}
-              type={avatar?.type || type}
+              type={avatar?.type || defaultType}
               size={size}
               outline
             />

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

@@ -4,13 +4,11 @@ import { Avatar } from './';
 const meta = {
   title: 'Avatar/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'stable'],
   parameters: {},
   args: {
     name: 'Jane Doe',
     type: 'person',
-    variant: 'circle',
-    color: 'light',
     size: 'xl',
   },
 } satisfies Meta<typeof Avatar>;
@@ -30,15 +28,12 @@ export const Company: Story = {
   args: {
     type: 'company',
     name: 'Boligeksperten',
-    variant: 'square',
   },
 };
 
 export const Logo: Story = {
   args: {
-    variant: 'square',
     imageUrl: 'https://avatars.githubusercontent.com/u/1536293?s=200&v=4',
     size: 'xl',
-    color: 'dark',
   },
 };

package/lib/components/Menu/MenuItem.stories.ts

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
 import { MenuItem } from './MenuItem';
 
 const meta = {
@@ -83,8 +81,8 @@ export const PersonGroup: Story = {
 export const Company: Story = {
   args: {
     avatar: {
-      type: 'company',
       name: 'Sportsklubben Brann',
+      type: 'company',
     },
     title: 'Sportsklubben Brann',
   },
@@ -93,7 +91,7 @@ export const Company: Story = {
 export const CompanyGroup: Story = {
   args: {
     avatarGroup: {
-      type: 'company',
+      defaultType: 'company',
       items: [
         {
           name: 'Sportsklubben Brann',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "lib/index.ts",
   "description": "Reusable react components",
   "publishConfig": {

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "local>Altinn/renovate-config"
+  ]
+}

package/.storybook/preview.ts

@@ -1,15 +0,0 @@
-import "../lib/css/global.css";
-
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;