@altinn/altinn-components 0.0.1 → 0.2.0

package/lib/components/Menu/MenuItemLabel.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { MenuItemSize } from './MenuItemBase';
-import styles from './menuItem.module.css';
+import styles from './menuItemLabel.module.css';
 
 export interface MenuItemLabelProps {
   size?: MenuItemSize;
@@ -12,15 +12,15 @@ export interface MenuItemLabelProps {
 
 export const MenuItemLabel = ({ size = 'sm', label, title, description, children }: MenuItemLabelProps) => {
   return (
-    <span className={styles?.label} data-size={size}>
+    <span className={styles.label} data-size={size}>
       {children ? (
         children
       ) : (
         <>
-          <strong className={styles?.title} data-size={size}>
+          <strong className={styles.title} data-size={size}>
             {title || label}
           </strong>
-          <span className={styles?.description} data-size={size}>
+          <span className={styles.description} data-size={size}>
             {description}
           </span>
         </>

package/lib/components/Menu/MenuItemMedia.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize } from '../Avatar';
 import { Icon, type IconName } from '../Icon';
 import type { MenuItemColor, MenuItemSize } from './MenuItemBase';
-import styles from './menuItem.module.css';
+import styles from './menuItemMedia.module.css';
 
 interface MenuItemMediaProps {
   color?: MenuItemColor;
@@ -33,7 +33,7 @@ export const MenuItemMedia = ({ size = 'sm', color, icon, avatar, avatarGroup, c
 
   return (
     <div className={styles.media} data-size={size} data-color={!icon ? null : color}>
-      {icon ? <Icon name={icon} variant={color === 'strong' ? 'solid' : 'outline'} className={styles?.icon} /> : ''}
+      {icon && <Icon name={icon} variant={color === 'strong' ? 'solid' : 'outline'} className={styles.icon} />}
       {avatar && <Avatar {...avatar} size={sizeMap?.avatar[size] as AvatarSize} />}
       {avatarGroup && <AvatarGroup {...avatarGroup} size={sizeMap?.avatarGroup[size] as AvatarSize} />}
       {children}

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

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { MenuOption } from './MenuOption';
 
 const meta = {
@@ -7,7 +6,10 @@ const meta = {
   component: MenuOption,
   tags: ['autodocs'],
   parameters: {},
-  args: {},
+  args: {
+    value: '',
+    label: 'Label',
+  },
 } satisfies Meta<typeof MenuOption>;
 
 export default meta;

package/lib/components/Menu/MenuOption.tsx

@@ -33,10 +33,10 @@ export const MenuOption = ({
   onChange,
 }: MenuOptionProps) => {
   return (
-    <MenuItemBase className={styles?.label} disabled={disabled} selected={checked} size={size} as="label">
-      <input className={styles?.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
-      {type === 'checkbox' && <CheckboxIcon checked={checked} className={styles.icon} />}
-      {type === 'radio' && <RadioIcon checked={checked} className={styles.icon} />}
+    <MenuItemBase className={styles.label} disabled={disabled} selected={checked} size={size} as="label">
+      <input className={styles.input} name={name} value={value} type={type} checked={checked} onChange={onChange} />
+      {type === 'checkbox' && <CheckboxIcon checked={checked} hover={true} className={styles.icon} />}
+      {type === 'radio' && <RadioIcon checked={checked} hover={true} className={styles.icon} />}
       <MenuItemLabel title={title} description={description} size={size}>
         {label}
       </MenuItemLabel>

package/lib/components/Menu/menuItemBase.module.css

@@ -0,0 +1,72 @@
+.item {
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  border: 0;
+  user-select: none;
+  cursor: pointer;
+  margin: 0.5rem 0;
+}
+
+.item[aria-disabled="true"] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* size */
+
+.item[data-size="sm"] {
+  min-height: 44px;
+}
+
+/* content */
+
+.content {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  column-gap: 6px;
+  padding: 6px;
+}
+
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+
+.actionIcon {
+  font-size: 1.5rem;
+}
+
+/* colors */
+
+.item:hover {
+  background-color: var(--theme-background-default);
+}
+
+.item[aria-selected="true"] {
+  background-color: var(--theme-background-default);
+}
+
+/* company */
+
+.item[data-color="company"]:hover {
+  background-color: var(--company-background-subtle);
+}
+
+.item[data-color="company"][aria-selected="true"] {
+  background-color: var(--company-surface-default);
+}
+
+/* person */
+
+.item[data-color="person"]:hover {
+  background-color: var(--person-background-subtle);
+}
+
+.item[data-color="person"][aria-selected="true"] {
+  background-color: var(--person-surface-default);
+}

package/lib/components/Menu/menuItemLabel.module.css

@@ -0,0 +1,22 @@
+.label {
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.25rem;
+}
+
+.title[data-size="lg"] {
+  font-size: 1.125rem;
+  line-height: 1.25;
+  font-weight: 500;
+}
+
+.title[data-size="sm"] {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-weight: 400;
+}
+
+.description {
+  font-size: 14px;
+  color: var(--theme-text-subtle);
+}

package/lib/components/Menu/menuItemMedia.module.css

@@ -0,0 +1,36 @@
+.media {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5%;
+  width: 2rem;
+  height: 2rem;
+}
+
+.media[data-size="lg"] {
+  width: 44px;
+  height: 44px;
+}
+
+.icon {
+  font-size: 1.5rem;
+}
+
+.media[data-color="subtle"] {
+  background-color: var(--theme-background-default);
+  color: var(--theme-text-default);
+}
+
+.media[data-color="strong"] {
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-default);
+}
+
+.media[data-color="company"] {
+  background-color: var(--company-surface-default);
+}
+
+.media[data-color="person"] {
+  background-color: var(--person-surface-default);
+}

package/lib/components/Menu/menuOption.module.css

@@ -9,21 +9,19 @@
 
 .icon {
   font-size: 1rem;
-  border: 2px solid;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.icon > svg {
-  color: transparent;
+.icon {
+  color: var(--theme-base-default);
 }
 
-.label:hover .icon > svg {
-  color: var(--theme-base-default);
+.icon [data-hover="true"] {
+  opacity: 0;
 }
 
-.icon[data-checked="true"] > svg,
-.label:hover .icon[data-checked="true"] > svg {
-  color: var(--theme-background-subtle);
+.label:hover [data-hover="true"] {
+  opacity: 1;
 }

package/lib/components/Meta/MetaBase.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { MetaItemSize } from './MetaItemBase';
+import styles from './meta.module.css';
+export interface MetaBaseProps {
+  size?: MetaItemSize;
+  children?: ReactNode;
+}
+
+export const MetaBase = ({ size = 'xs', children }: MetaBaseProps) => {
+  return (
+    <div className={styles.meta} data-size={size}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Meta/MetaItem.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetaItem } from './MetaItem';
+
+const meta = {
+  title: 'Meta/MetaItem',
+  component: MetaItem,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {
+    children: 'Label',
+  },
+} satisfies Meta<typeof MetaItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Icon: Story = {
+  args: { icon: 'clock-dashed' },
+};

package/lib/components/Meta/MetaItem.tsx

@@ -0,0 +1,31 @@
+import type { ElementType, ReactNode } from 'react';
+import type { IconName } from '../Icon';
+import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
+import { MetaItemLabel } from './MetaItemLabel';
+import { MetaItemMedia } from './MetaItemMedia';
+
+export interface MetaItemProps {
+  /**  Render as element */
+  as?: ElementType;
+  /** Meta size */
+  size?: MetaItemSize;
+  /** Variant */
+  variant?: MetaItemVariant;
+  /** Icon name */
+  icon?: IconName;
+  /** Label */
+  children?: ReactNode;
+  /** classname */
+  className?: string;
+}
+
+export const MetaItem = ({ size = 'xs', variant = 'text', icon, children, ...rest }: MetaItemProps) => {
+  return (
+    <MetaItemBase variant={variant} size={size} {...rest}>
+      {icon && <MetaItemMedia icon={icon} size={size} />}
+      <MetaItemLabel variant={variant} size={size}>
+        {children}
+      </MetaItemLabel>
+    </MetaItemBase>
+  );
+};

package/lib/components/Meta/MetaItemBase.tsx

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import type { ElementType, ReactNode } from 'react';
+import styles from './metaItem.module.css';
+
+export type MetaItemVariant = 'solid' | 'outline' | 'dotted' | 'text';
+export type MetaItemSize = 'xs' | 'sm' | 'md';
+export type MetaItemColor = 'subtle';
+
+export interface MetaItemBaseProps {
+  as?: ElementType;
+  variant?: MetaItemVariant;
+  size?: MetaItemSize;
+  color?: MetaItemColor;
+  datetime?: string;
+  progress?: number;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const MetaItemBase = ({
+  as,
+  variant = 'text',
+  size,
+  color,
+  progress,
+  datetime,
+  className,
+  children,
+  ...rest
+}: MetaItemBaseProps) => {
+  const Component = as || 'span';
+
+  return (
+    <Component
+      data-size={size}
+      data-color={color}
+      data-variant={variant}
+      data-progress={progress}
+      dateTime={datetime}
+      className={cx(styles.item, className)}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};

package/lib/components/Meta/MetaItemLabel.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { MetaItemSize, MetaItemVariant } from './MetaItemBase';
+import styles from './metaItem.module.css';
+
+export interface MetaItemLabelProps {
+  /** Meta size */
+  size?: MetaItemSize;
+  /** Variant */
+  variant?: MetaItemVariant;
+  /** Label */
+  children?: ReactNode;
+}
+
+export const MetaItemLabel = ({ size = 'sm', variant = 'text', children }: MetaItemLabelProps) => {
+  return (
+    <span className={styles.label} data-variant={variant} data-size={size}>
+      {children}
+    </span>
+  );
+};

package/lib/components/Meta/MetaItemMedia.tsx

@@ -0,0 +1,22 @@
+import { Icon, type IconName, ProgressIcon } from '../Icon';
+import type { MetaItemSize } from './MetaItemBase';
+import styles from './metaItem.module.css';
+
+interface MetaItemMediaProps {
+  size?: MetaItemSize;
+  progress?: number;
+  icon?: IconName;
+}
+
+export const MetaItemMedia = ({ size = 'sm', icon, progress }: MetaItemMediaProps) => {
+  if (!icon && typeof progress !== 'number') {
+    return false;
+  }
+
+  return (
+    <span className={styles.media} data-size={size}>
+      {icon && <Icon name={icon} className={styles.icon} />}
+      {progress && <ProgressIcon value={progress} className={styles.icon} />}
+    </span>
+  );
+};

package/lib/components/Meta/MetaList.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetaList } from './MetaList';
+
+const meta = {
+  title: 'Meta/MetaList',
+  component: MetaList,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    items: [
+      {
+        label: 'Meta 1',
+      },
+      {
+        label: 'Meta 2',
+      },
+      {
+        label: 'Meta 3',
+      },
+    ],
+  },
+} satisfies Meta<typeof MetaList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/components/Meta/MetaList.tsx

@@ -0,0 +1,43 @@
+import { MetaBase } from './MetaBase';
+import { MetaItem } from './MetaItem';
+import type { MetaItemBaseProps, MetaItemSize } from './MetaItemBase';
+import { MetaProgress } from './MetaProgress';
+import { MetaTimestamp } from './MetaTimestamp';
+import styles from './metaList.module.css';
+
+export type MetaListItemType = 'default' | 'progress' | 'timestamp';
+
+export interface MetaListItemProps extends MetaItemBaseProps {
+  label: string;
+  type?: MetaListItemType;
+}
+
+export interface MetaListProps {
+  items: MetaListItemProps[];
+  size?: MetaItemSize;
+}
+
+export const MetaListItem = ({ type = 'default', label, ...rest }: MetaListItemProps) => {
+  switch (type) {
+    case 'progress':
+      return <MetaProgress {...rest}>{label}</MetaProgress>;
+    case 'timestamp':
+      return <MetaTimestamp {...rest}>{label}</MetaTimestamp>;
+    default:
+      return <MetaItem {...rest}>{label}</MetaItem>;
+  }
+};
+
+export const MetaList = ({ size = 'xs', items = [] }: MetaListProps) => {
+  return (
+    <MetaBase size={size}>
+      <ul className={styles.list}>
+        {items.map((item, index) => (
+          <li className={styles.item} key={'meta-' + index}>
+            <MetaListItem {...item} />
+          </li>
+        ))}
+      </ul>
+    </MetaBase>
+  );
+};

package/lib/components/Meta/MetaProgress.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetaProgress } from './MetaProgress';
+
+const meta = {
+  title: 'Meta/MetaProgress',
+  component: MetaProgress,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  args: {},
+} satisfies Meta<typeof MetaProgress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const InProgress: Story = {
+  args: {
+    progress: 75,
+    children: 'Under arbeid',
+  },
+};
+
+export const ProgressComplete: Story = {
+  args: {
+    progress: 100,
+    children: 'Avsluttet',
+  },
+};

package/lib/components/Meta/MetaProgress.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
+import { MetaItemLabel } from './MetaItemLabel';
+import { MetaItemMedia } from './MetaItemMedia';
+
+export interface MetaProgressProps {
+  /** Meta size */
+  size?: MetaItemSize;
+  /** Variant */
+  variant?: MetaItemVariant;
+  /** Progress of 100 */
+  progress?: number;
+  /** Label */
+  children?: ReactNode;
+}
+
+export const MetaProgress = ({ size = 'xs', variant = 'text', progress = 0, children }: MetaProgressProps) => {
+  return (
+    <MetaItemBase variant={variant} size={size}>
+      <MetaItemMedia size={size} progress={progress} />
+      <MetaItemLabel variant={variant} size={size}>
+        {children}
+      </MetaItemLabel>
+    </MetaItemBase>
+  );
+};

package/lib/components/Meta/MetaTimestamp.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { MetaTimestamp } from './MetaTimestamp';
+
+const meta = {
+  title: 'Meta/MetaTimestamp',
+  component: MetaTimestamp,
+  tags: ['autodocs'],
+  parameters: {
+    //    layout: "fullscreen",
+  },
+  args: {
+    children: '26. mai 1999',
+    datetime: '1999-05-26',
+  },
+} satisfies Meta<typeof MetaTimestamp>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: '26. mai 1999',
+    datetime: '1999-05-26',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    icon: 'clock',
+    children: 'Frist: 26. mai 1999',
+    datetime: '1999-05-26',
+  },
+};

package/lib/components/Meta/MetaTimestamp.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../Icon';
+import { MetaItemBase, type MetaItemSize, type MetaItemVariant } from './MetaItemBase';
+import { MetaItemLabel } from './MetaItemLabel';
+import { MetaItemMedia } from './MetaItemMedia';
+
+export interface MetaTimestampProps {
+  /** Meta size */
+  size?: MetaItemSize;
+  /** Variant */
+  variant?: MetaItemVariant;
+  /** Datetime in ISO format */
+  datetime?: string;
+  /** Icon name */
+  icon?: IconName;
+  /** Label */
+  children?: ReactNode;
+}
+
+export const MetaTimestamp = ({ size = 'xs', variant = 'text', datetime, icon, children }: MetaTimestampProps) => {
+  return (
+    <MetaItemBase as="time" variant={variant} datetime={datetime} size={size}>
+      {icon && <MetaItemMedia size={size} icon={icon} />}
+      <MetaItemLabel variant={variant} size={size}>
+        {children}
+      </MetaItemLabel>
+    </MetaItemBase>
+  );
+};

package/lib/components/Meta/index.ts

@@ -0,0 +1,6 @@
+export * from './MetaBase';
+export * from './MetaList';
+export * from './MetaItemBase';
+export * from './MetaItem';
+export * from './MetaProgress';
+export * from './MetaTimestamp';

package/lib/components/Meta/meta.module.css

@@ -0,0 +1,6 @@
+.meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  column-gap: 0.5rem;
+}