@altinn/altinn-components 0.5.2 → 0.6.1

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,53 +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,
-  ...rest
-}: ButtonBaseProps) => {
-  const Component = as || 'button';
-  return (
-    <Component
-      tabIndex={0}
-      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,31 +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;
-  variant?: ButtonVariant;
-  className?: string;
-  onClick?: MouseEventHandler;
-}
-
-export const IconButton = ({
-  variant = 'solid',
-  color = 'primary',
-  size = 'md',
-  icon,
-  className,
-  onClick,
-}: IconButtonProps) => {
-  return (
-    <ButtonBase variant={variant} color={color} size={size} className={cx(styles.button, className)} onClick={onClick}>
-      <ButtonIcon icon={icon} size={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;
-}

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

@@ -1,142 +0,0 @@
-.button {
-  border: 1px solid;
-  border-color: transparent;
-  margin: 0;
-  padding: 0;
-  width: auto;
-  overflow: visible;
-
-  background: transparent;
-
-  /* inherit font & color from ancestor */
-  color: inherit;
-  font: inherit;
-  text-align: inherit;
-
-  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
-  line-height: normal;
-
-  /* Corrects font smoothing for webkit */
-  -webkit-font-smoothing: inherit;
-  -moz-osx-font-smoothing: inherit;
-
-  /* Corrects inability to style clickable `input` types in iOS */
-  appearance: none;
-
-  /* user select none */
-  user-select: none;
-  cursor: pointer;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.button:focus {
-  border-color: var(--theme-base-active);
-}
-
-.button:hover {
-  border-color: var(--theme-base-hover);
-}
-
-.button:active {
-  border-color: var(--theme-base-active);
-}
-
-.button[data-size="sm"] {
-  height: 2.25rem; /* sm 36 */
-}
-
-.button[data-size="md"] {
-  height: 2.75rem; /* md 44 */
-}
-
-.button[data-size="lg"] {
-  height: 3.5rem; /* lg 56 */
-}
-
-/* primary solid */
-
-.button[data-variant="solid"] {
-  border-color: var(--theme-base-default);
-  background-color: var(--theme-base-default);
-  color: white;
-}
-
-.button[data-variant="solid"]:hover {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
-}
-
-.button[data-variant="solid"]:active {
-  border-color: var(--theme-base-active);
-  background-color: var(--theme-base-active);
-}
-
-/* primary outline, dotted + text */
-
-.button[data-variant="outline"],
-.button[data-variant="dotted"] {
-  border-color: var(--theme-base-default);
-}
-
-.button[data-variant="outline"] {
-  border-style: solid;
-}
-
-.button[data-variant="dotted"] {
-  border-style: dotted;
-}
-
-.button[data-variant="text"] {
-  border-color: transparent;
-}
-
-.button[data-variant="outline"]:hover,
-.button[data-variant="dotted"]:hover,
-.button[data-variant="text"]:hover {
-  background-color: var(--theme-surface-default);
-}
-
-.button[data-variant="outline"]:active,
-.button[data-variant="dotted"]:active,
-.button[data-variant="text"]:active {
-  background-color: var(--theme-surface-active);
-}
-
-/* selected */
-
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
-}
-
-/* secondary color */
-
-.button[data-color="secondary"] {
-  color: var(--theme-text-subtle);
-}
-
-.button[data-color="secondary"]:hover {
-  border-color: var(--theme-surface-hover);
-}
-
-.button[data-color="secondary"][data-variant="solid"] {
-  border-color: var(--theme-surface-default);
-  background-color: var(--theme-surface-default);
-}
-
-.button[data-color="secondary"][data-variant="solid"]:hover {
-  border-color: var(--theme-surface-hover);
-  background-color: var(--theme-surface-hover);
-}
-
-.button[data-color="secondary"][data-variant="solid"]:active,
-.button[data-color="secondary"][data-variant="outline"]:active,
-.button[data-color="secondary"][data-variant="dotted"]:active,
-.button[data-color="secondary"][data-variant="text"]:active {
-  border-color: var(--theme-surface-active);
-  background-color: var(--theme-surface-active);
-}

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

@@ -1,17 +0,0 @@
-.icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon[data-size="sm"] {
-  font-size: 1.25rem;
-}
-
-.icon[data-size="md"] {
-  font-size: 1.5rem;
-}
-
-.icon[data-size="lg"] {
-  font-size: 1.625rem;
-}

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

@@ -1,17 +0,0 @@
-.label {
-  line-height: 1;
-  font-weight: 500;
-  padding: 0 .25em;
-}
-
-.label[data-size="sm"] {
-  font-size: 0.875rem;
-}
-
-.label[data-size="md"] {
-  font-size: 1rem;
-}
-
-.label[data-size="lg"] {
-  font-size: 1.125rem;
-}

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

@@ -1,35 +0,0 @@
-.button {
-  display: inline-flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  border-radius: 2px;
-}
-
-.divider {
-  align-self: stretch;
-  border-left: 1px solid currentColor;
-  width: 1px;
-  margin: 0.375rem 0;
-}
-
-.primary,
-.secondary {
-  display: inline-flex;
-  align-items: center;
-  border: none;
-}
-
-.primary[data-size="sm"],
-.secondary[data-size="sm"] {
-  padding: 0 0.375rem;
-}
-
-.primary[data-size="md"],
-.secondary[data-size="md"] {
-  padding: 0 0.5rem;
-}
-
-.primary[data-size="lg"],
-.secondary[data-size="lg"] {
-  padding: 0 0.625rem;
-}

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

@@ -1,31 +0,0 @@
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-}
-
-.icon {
-  font-size: 1.5rem;
-}
-
-/* sm 36 */
-
-.button[data-size="sm"] {
-  width: 2.25rem;
-  height: 2.25rem;
-}
-
-/* md 44 */
-
-.button[data-size="md"] {
-  width: 2.75rem;
-  height: 2.75rem;
-}
-
-/* lg 56 */
-
-.button[data-size="lg"] {
-  width: 3.5rem;
-  height: 3.5rem;
-}