@altinn/altinn-components 0.6.2 → 0.6.3

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

@@ -1,25 +0,0 @@
-.menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  text-indent: 0;
-
-  display: flex;
-  flex-direction: column;
-}
-
-.list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.item {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.item[role="separator"] {
-  border-top: 1px solid var(--theme-border-subtle);
-}

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

@@ -1,12 +0,0 @@
-.header {
-  padding: 0.75rem 0.5rem;
-  margin: 0.5rem 0;
-}
-
-.title {
-  font-size: 0.875rem;
-  font-weight: normal;
-  line-height: 1.25rem;
-  color: var(--theme-text-subtle);
-  margin: 0;
-}

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

@@ -1,54 +0,0 @@
-.field {
-  padding: 0 0.5rem;
-  margin: 0.5rem 0;
-  display: flex;
-  flex-direction: column;
-  row-gap: 0.5rem;
-}
-
-.label {
-  font-size: 0.875rem;
-  font-weight: normal;
-  line-height: 1.25rem;
-  color: var(--theme-text-subtle);
-  margin: 0;
-}
-
-.input {
-  width: 100%;
-  height: 2.75rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  font-weight: normal;
-  padding: 9px;
-  border-radius: 2px;
-  border: 1px solid;
-  border-color: var(--theme-border-default);
-}
-
-.input {
-  color: var(--theme-text-subtle);
-}
-
-.input[data-value="true"] {
-  color: var(--theme-text-default);
-}
-
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
-.close {
-  padding: 6px 0;
-}
-
-.icon {
-  border-left: 1px solid;
-  border-color: var(--theme-background-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  padding: 0 6px;
-}

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

@@ -1,79 +0,0 @@
-.item {
-  display: flex;
-  align-items: center;
-  column-gap: 4px;
-  border: 0;
-  user-select: none;
-  cursor: pointer;
-  margin: 0.5rem 0;
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-  line-height: normal;
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-  appearance: none;
-}
-
-.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;
-}
-
-.linkText {
-  font-size: 0.875rem;
-  white-space: nowrap;
-}
-
-.linkIcon {
-  font-size: 1.5rem;
-}
-
-/* colors */
-
-.item {
-  background-color: transparent;
-  color: var(--theme-text-default);
-}
-
-.item[aria-selected="true"] {
-  background-color: var(--theme-background-default);
-}
-
-.item:hover,
-.item:active {
-  background-color: var(--theme-surface-hover);
-}
-
-.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);
-}

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

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

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

@@ -1,38 +0,0 @@
-.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);
-  color: var(--company-text-default);
-}
-
-.media[data-color="person"] {
-  background-color: var(--person-surface-default);
-  color: var(--person-text-default);
-}

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

@@ -1,27 +0,0 @@
-.label {
-  padding-left: 6px;
-}
-
-.input {
-  position: absolute;
-  opacity: 0;
-}
-
-.icon {
-  font-size: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon {
-  color: var(--theme-base-default);
-}
-
-.icon [data-hover="true"] {
-  opacity: 0;
-}
-
-.label:hover [data-hover="true"] {
-  opacity: 1;
-}

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

@@ -1,30 +0,0 @@
-.input {
-  width: 100%;
-  height: 2.75rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  font-weight: normal;
-  padding: 9px;
-  border-radius: 2px;
-  border: 1px solid;
-  border-color: var(--theme-border-default);
-}
-
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
-.close {
-  padding: 6px 0;
-}
-
-.icon {
-  border-left: 1px solid;
-  border-color: var(--theme-background-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  padding: 0 6px;
-}

package/lib/components/Meta/MetaBase.tsx

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

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

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

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

@@ -1,20 +0,0 @@
-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 = 'xs', variant = 'text', children }: MetaItemLabelProps) => {
-  return (
-    <span className={styles.label} data-variant={variant} data-size={size}>
-      {children}
-    </span>
-  );
-};

package/lib/components/Meta/MetaItemMedia.tsx

@@ -1,22 +0,0 @@
-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 = 'xs', 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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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/meta.module.css

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