@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Bookmarks/BookmarksListItem.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+.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;
+}