@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/components/Bookmarks/BookmarksListItem.tsx

@@ -1,32 +0,0 @@
-import type { ElementType } from 'react';
-import { ListItemBase, ListItemLabel, ListItemMedia, type ListItemSize } from '..';
-import { type QueryItemProps, QueryLabel } from './QueryLabel';
-
-export interface BookmarksListItemProps {
-  id: string;
-  /** Element type to render */
-  as?: ElementType;
-  /** ELement link */
-  href?: string;
-  /** Optional onClick */
-  onClick?(): void;
-  /** Size of list item */
-  size?: ListItemSize;
-  /** Optional title */
-  title?: string;
-  /** Optional description */
-  description?: string;
-  /** Query params */
-  params?: QueryItemProps[];
-}
-
-export const BookmarksListItem = ({ size = 'sm', title, description, params, ...rest }: BookmarksListItemProps) => {
-  return (
-    <ListItemBase size={size} linkIcon="chevron-right" {...rest}>
-      <ListItemMedia size={size} icon={'magnifying-glass'} />
-      <ListItemLabel title={title} size={size}>
-        {!title && <QueryLabel params={params} />}
-      </ListItemLabel>
-    </ListItemBase>
-  );
-};

package/lib/components/Bookmarks/QueryLabel.tsx

@@ -1,33 +0,0 @@
-import styles from './queryLabel.module.css';
-export type QueryItemType = 'search' | 'filter';
-
-export interface QueryItemProps {
-  type?: QueryItemType;
-  value?: string;
-  label?: string;
-}
-
-export const QueryItem = ({ type = 'search', label }: QueryItemProps) => {
-  return (
-    <mark className={styles.item} data-type={type}>
-      {label}
-    </mark>
-  );
-};
-
-export interface QueryLabelProps {
-  params?: QueryItemProps[];
-}
-
-export const QueryLabel = ({ params = [] }: QueryLabelProps) => {
-  return (
-    <div className={styles.label}>
-      {params.map((item, index) => (
-        <div className={styles.group} key={index}>
-          <QueryItem {...item} />
-          {params[index + 1] && <span className={styles.plus}>+</span>}
-        </div>
-      ))}
-    </div>
-  );
-};

package/lib/components/Bookmarks/queryLabel.module.css

@@ -1,45 +0,0 @@
-.label {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 0.25rem;
-  row-gap: 0.25rem;
-}
-
-.group {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.25rem;
-}
-
-.plus {
-  color: var(--theme-text-subtle);
-}
-
-.item {
-  font-size: 0.875em;
-}
-
-.item[data-type="search"] {
-  background-color: transparent;
-  font-weight: 500;
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 0.25em;
-}
-
-.item[data-type="search"]:before {
-  content: "«";
-}
-
-.item[data-type="search"]:after {
-  content: "»";
-}
-
-.item[data-type="filter"] {
-  background-color: transparent;
-  border: 1px solid;
-  font-weight: 500;
-  padding: 0.25em 0.5em;
-  border-radius: 2px;
-}

package/lib/components/Button/Button.stories.ts

@@ -1,50 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta = {
-  title: 'Atoms/Button/Button',
-  component: Button,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'Button',
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Solid: Story = {
-  args: {
-    variant: 'solid',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    loading: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};

package/lib/components/Button/Button.tsx

@@ -1,60 +0,0 @@
-import cx from 'classnames';
-import type { IconName } from '../Icon';
-import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
-import { ButtonIcon } from './ButtonIcon';
-import { ButtonLabel } from './ButtonLabel';
-import styles from './button.module.css';
-
-export interface ButtonProps extends Partial<ButtonBaseProps> {
-  icon?: IconName;
-  reverse?: boolean;
-  loading?: boolean;
-}
-
-export const Button = ({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
-  reverse = false,
-  selected = false,
-  icon,
-  href,
-  children,
-  className,
-  loading,
-  ...rest
-}: ButtonProps) => {
-  if (loading) {
-    return (
-      <ButtonBase
-        variant={variant}
-        color={color}
-        size={size}
-        selected={selected}
-        href={href}
-        className={cx(styles.button, { [styles.reverse]: reverse }, className)}
-        {...rest}
-        disabled
-      >
-        <span className={styles.label} data-size={size}>
-          <span className={styles.loading}>Loading....</span>
-        </span>
-      </ButtonBase>
-    );
-  }
-
-  return (
-    <ButtonBase
-      variant={variant}
-      color={color}
-      size={size}
-      selected={selected}
-      href={href}
-      className={cx(styles.button, { [styles.reverse]: reverse })}
-      {...rest}
-    >
-      <ButtonLabel size={size}>{children}</ButtonLabel>
-      {icon && <ButtonIcon size={size} icon={icon} />}
-    </ButtonBase>
-  );
-};

package/lib/components/Button/ButtonBase.tsx

@@ -1,54 +0,0 @@
-import cx from 'classnames';
-import type { ElementType, ReactNode } from 'react';
-
-import styles from './buttonBase.module.css';
-
-export type ButtonVariant = 'solid' | 'outline' | 'dotted' | 'text';
-export type ButtonSize = 'sm' | 'md' | 'lg' | 'custom';
-export type ButtonColor = 'primary' | 'secondary';
-
-export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Change the default rendered element for the one passed as a child, merging their props and behavior.
-   * @default false
-   */
-  as?: ElementType;
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  color?: ButtonColor;
-  selected?: boolean;
-  disabled?: boolean;
-  href?: string;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const ButtonBase = ({
-  as,
-  color,
-  className,
-  children,
-  disabled = false,
-  size,
-  selected,
-  variant,
-  tabIndex = 0,
-  ...rest
-}: ButtonBaseProps) => {
-  const Component = as || 'button';
-  return (
-    <Component
-      tabIndex={tabIndex}
-      data-size={size}
-      data-variant={variant}
-      data-color={color}
-      aria-selected={selected}
-      aria-disabled={disabled}
-      disabled={disabled}
-      className={cx(styles.button, className)}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-};

package/lib/components/Button/ButtonIcon.tsx

@@ -1,16 +0,0 @@
-import { Icon, type IconName } from '../Icon';
-import type { ButtonSize } from './ButtonBase';
-import styles from './buttonIcon.module.css';
-
-export interface ButtonIconProps {
-  icon: IconName;
-  size: ButtonSize;
-}
-
-export const ButtonIcon = ({ size, icon }: ButtonIconProps) => {
-  return (
-    <span className={styles.icon} data-size={size}>
-      <Icon name={icon} />
-    </span>
-  );
-};

package/lib/components/Button/ButtonLabel.tsx

@@ -1,18 +0,0 @@
-import cx from 'classnames';
-import type { ReactNode } from 'react';
-import type { ButtonSize } from './ButtonBase';
-import styles from './buttonLabel.module.css';
-
-export interface ButtonLabelProps {
-  size: ButtonSize;
-  className?: string;
-  children: ReactNode;
-}
-
-export const ButtonLabel = ({ className, size, children }: ButtonLabelProps) => {
-  return (
-    <span className={cx(styles.label, className)} data-size={size}>
-      {children}
-    </span>
-  );
-};

package/lib/components/Button/Buttons.stories.tsx

@@ -1,64 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Button, ComboButton, IconButton, MetaItem } from '../';
-
-const meta = {
-  title: 'Atoms/Button/Buttons',
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    color: 'primary',
-  },
-  argTypes: {
-    color: {
-      control: 'radio',
-      options: ['primary', 'secondary'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sizes = ['sm', 'md', 'lg'];
-const variants = ['solid', 'outline', 'dotted', 'text'];
-
-export const VariantsAndSizes = (args: Story) => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', rowGap: '1rem' }}>
-      {variants?.map((variant) => {
-        return (
-          <div
-            key={variant}
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              rowGap: '1rem',
-              alignItems: 'start',
-              justifyContent: 'space-between',
-              width: '100%',
-            }}
-          >
-            <MetaItem>{variant}</MetaItem>
-            {sizes?.map((size) => {
-              return (
-                <div key={size} style={{ display: 'flex', alignItems: 'center', columnGap: '1rem' }}>
-                  <IconButton {...args} icon="x-mark" variant={variant} size={size} />
-                  <Button {...args} reverse variant={variant} icon="arrow-left" size={size}>
-                    Button
-                  </Button>
-                  <Button {...args} variant={variant} icon="arrow-right" size={size}>
-                    Button
-                  </Button>
-                  <ComboButton {...args} variant={variant} icon="chevron-down" size={size}>
-                    ComboButton
-                  </ComboButton>
-                  <MetaItem>{size}</MetaItem>
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/lib/components/Button/ComboButton.stories.ts

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ComboButton } from './ComboButton';
-
-const meta = {
-  title: 'Atoms/Button/ComboButton',
-  component: ComboButton,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'ComboButton',
-    icon: 'chevron-down',
-    size: 'sm',
-  },
-} satisfies Meta<typeof ComboButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-export const Solid: Story = {
-  args: {
-    variant: 'solid',
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    variant: 'outline',
-  },
-};
-
-export const Text: Story = {
-  args: {
-    variant: 'text',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};

package/lib/components/Button/ComboButton.tsx

@@ -1,46 +0,0 @@
-import cx from 'classnames';
-import type { MouseEventHandler } from 'react';
-import type { IconName } from '../Icon';
-import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
-import { ButtonIcon } from './ButtonIcon';
-import { ButtonLabel } from './ButtonLabel';
-
-import styles from './comboButton.module.css';
-
-export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
-  icon: IconName;
-  onIconClick?: MouseEventHandler<HTMLButtonElement>;
-  onLabelClick?: MouseEventHandler<HTMLButtonElement>;
-  disabled?: boolean;
-}
-
-export const ComboButton = ({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
-  selected = false,
-  icon,
-  children,
-  className,
-  onLabelClick,
-  onIconClick,
-}: ComboButtonProps) => {
-  return (
-    <ButtonBase
-      as="div"
-      size={size}
-      variant={variant}
-      color={color}
-      selected={selected}
-      className={cx(styles.button, className)}
-    >
-      <ButtonBase size={size} onClick={onIconClick} className={styles.secondary}>
-        <ButtonIcon icon={icon} size={size} />
-      </ButtonBase>
-      <span data-size={size} className={styles.divider} />
-      <ButtonBase size={size} onClick={onLabelClick} className={styles.primary}>
-        <ButtonLabel size={size}>{children}</ButtonLabel>
-      </ButtonBase>
-    </ButtonBase>
-  );
-};

package/lib/components/Button/IconButton.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MetaItem } from '../Meta';
-import { IconButton } from './IconButton';
-
-const meta = {
-  title: 'Atoms/Button/IconButton',
-  component: IconButton,
-  tags: ['autodocs'],
-  parameters: {},
-  args: {
-    children: 'IconButton',
-    icon: 'x-mark',
-    size: 'sm',
-  },
-} satisfies Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {},
-};
-
-const sizes = ['sm', 'md', 'lg'];
-const variants = ['outline', 'solid', 'dotted', 'text'];
-
-export const Sizes = (args) => {
-  return (
-    <div style={{ display: 'flex', columnGap: '1rem', justifyContent: 'space-between', width: '100%' }}>
-      {variants?.map((variant) => {
-        return (
-          <div key={variant} style={{ display: 'flex', flexDirection: 'column', columnGap: '1rem' }}>
-            <MetaItem>{variant}</MetaItem>
-            {sizes?.map((size) => {
-              return (
-                <div key={size}>
-                  <IconButton {...args} variant={variant} size={size} />
-                  <MetaItem>{size}</MetaItem>
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
-};

package/lib/components/Button/IconButton.tsx

@@ -1,33 +0,0 @@
-import cx from 'classnames';
-import type { MouseEventHandler } from 'react';
-import type { IconName } from '../Icon';
-import { ButtonBase } from './ButtonBase';
-import type { ButtonColor, ButtonSize, ButtonVariant } from './ButtonBase';
-import { ButtonIcon } from './ButtonIcon';
-import styles from './iconButton.module.css';
-
-interface IconButtonProps {
-  icon: IconName;
-  color?: ButtonColor;
-  size?: ButtonSize;
-  iconSize?: ButtonSize;
-  variant?: ButtonVariant;
-  className?: string;
-  onClick?: MouseEventHandler;
-}
-
-export const IconButton = ({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
-  icon,
-  iconSize,
-  className,
-  onClick,
-}: IconButtonProps) => {
-  return (
-    <ButtonBase variant={variant} color={color} size={size} className={cx(styles.button, className)} onClick={onClick}>
-      <ButtonIcon icon={icon} size={iconSize || size} />
-    </ButtonBase>
-  );
-};

package/lib/components/Button/button.module.css

@@ -1,22 +0,0 @@
-.button {
-  display: inline-flex;
-  align-items: center;
-  column-gap: 0.125em;
-  border-radius: 2px;
-}
-
-.reverse {
-  flex-direction: row-reverse;
-}
-
-.button[data-size="sm"] {
-  padding: 0 0.375rem;
-}
-
-.button[data-size="md"] {
-  padding: 0 0.5rem;
-}
-
-.button[data-size="lg"] {
-  padding: 0 0.625rem;
-}