@altinn/altinn-components 0.0.1

package/lib/components/Badge/badge.module.css

@@ -0,0 +1,36 @@
+.badge {
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  justify-content: center;
+  min-height: 24px;
+  min-width: 24px;
+  width: auto;
+  height: 24px;
+  align-items: center;
+  flex-shrink: 0;
+  background: var(--black-5, rgba(0, 0, 0, 0.05));
+  color: var(--black-100, #000);
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  border-radius: 12px;
+}
+
+.strong {
+  font-weight: 700;
+  background: var(--Action-Important, #e02e49);
+  color: #ffffff;
+}
+
+.small {
+  display: flex;
+  width: 12px;
+  height: 12px;
+  min-height: 12px;
+  min-width: 12px;
+  padding: 4px;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+}

package/lib/components/Badge/index.tsx

@@ -0,0 +1 @@
+export * from './Badge';

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

@@ -0,0 +1,44 @@
+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 Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};

package/lib/components/Button/Button.tsx

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

package/lib/components/Button/ButtonBase.tsx

@@ -0,0 +1,53 @@
+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';
+export type ButtonColor = 'primary' | 'link';
+
+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/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,44 @@
+import cx from 'classnames';
+import type { MouseEventHandler } from 'react';
+import { Icon, type IconName } from '../Icon';
+import { ButtonBase, type ButtonBaseProps } from './ButtonBase';
+
+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 = ({
+  size = 'md',
+  variant = 'solid',
+  color,
+  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.icon}>
+        <Icon name={icon} />
+      </ButtonBase>
+      <span data-size={size} className={styles.divider} />
+      <ButtonBase size={size} onClick={onLabelClick} className={styles.label}>
+        {children}
+      </ButtonBase>
+    </ButtonBase>
+  );
+};

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

@@ -0,0 +1,82 @@
+.button {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid;
+  border-color: var(--link-base-default);
+}
+
+.button:focus {
+  border-color: var(--link-base-active);
+}
+
+.button:hover {
+  border-color: var(--link-base-hover);
+}
+
+.button:active {
+  border-color: var(--link-base-active);
+}
+
+.reverse {
+  flex-direction: row-reverse;
+}
+
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
+
+.label {
+  line-height: 1rem;
+  font-weight: 600;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* sm 36 */
+
+.button[data-size="sm"] {
+  border-radius: 2px;
+  padding: 0 6px;
+}
+
+.label[data-size="sm"] {
+  font-size: 0.875rem;
+  padding: 9px 4px;
+}
+
+.icon[data-size="sm"] {
+  font-size: 1.25rem;
+}
+
+/* md 44 */
+
+.button[data-size="md"] {
+  border-radius: 2px;
+  padding: 9px 6px;
+}
+
+.label[data-size="md"] {
+  font-size: 1rem;
+  padding: 4px 4px;
+}
+
+.icon[data-size="md"] {
+  font-size: 1.5rem;
+}
+
+/* lg 56 */
+
+.button[data-size="lg"] {
+  border-radius: 2px;
+  padding: 9px 6px;
+}
+
+.label[data-size="lg"] {
+  font-size: 1.125rem;
+  padding: 10px;
+}

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

@@ -0,0 +1,77 @@
+.button {
+  border: none;
+  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 */
+  -webkit-appearance: none;
+
+  /* user select none */
+  user-select: none;
+  cursor: pointer;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* solid */
+
+.button[data-variant="solid"] {
+  border-color: var(--theme-base-hover);
+  background-color: var(--theme-base-hover);
+  color: white;
+}
+
+/* outline */
+
+.button[data-variant="outline"] {
+  border-color: var(--theme-base-hover);
+  border-style: solid;
+}
+
+/* dotted */
+
+.button[data-variant="dotted"] {
+  border-color: var(--theme-base-hover);
+  border-style: dotted;
+}
+
+/* text */
+
+.button[data-variant="text"] {
+  border-color: transparent;
+}
+
+/* solid + link
+
+.button[data-color="link"][data-variant="solid"] {
+  background-color: var(--link-base-default);
+  color: white;
+}
+
+.button[data-color="link"][data-variant="solid"]:hover {
+  background-color: var(--link-base-hover);
+}
+
+.button[data-color="link"][data-variant="active"]:hover {
+  background-color: var(--link-base-active);
+}
+ */

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

@@ -0,0 +1,83 @@
+.button {
+  display: inline-flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  border: 1px solid;
+  border-radius: 2px;
+}
+
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
+
+.label {
+  line-height: 1rem;
+  font-weight: 600;
+}
+
+.divider {
+  border-left: 1px solid currentColor;
+  width: 1px;
+  height: 1em;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* variant */
+
+.button[data-variant="solid"] {
+  border-color: var(--theme-base-hover);
+  background-color: var(--theme-base-hover);
+  color: white;
+}
+
+/* sm 36px */
+
+.label[data-size="sm"] {
+  font-size: 0.875rem;
+  padding: 9px 10px;
+}
+
+.divider[data-size="sm"] {
+  height: 20px;
+}
+
+.icon[data-size="sm"] {
+  font-size: 1.25rem;
+  padding: 7px 5px;
+}
+
+/* md 44px */
+
+.button[data-size="md"] {
+  font-size: 1rem;
+}
+
+.label[data-size="md"] {
+  padding: 10px;
+}
+
+.icon[data-size="md"] {
+  font-size: 1.25rem;
+  padding: 12px 8px;
+}
+
+/* lg 56 */
+
+.button[data-size="lg"] {
+  font-size: 1.125rem;
+}
+
+.label[data-size="lg"] {
+  padding: 1rem;
+}
+
+.icon[data-size="lg"] {
+  font-size: 1.5rem;
+  padding: 16px 10px;
+}

package/lib/components/Button/index.ts

@@ -0,0 +1,3 @@
+export * from './ButtonBase';
+export * from './Button';
+export * from './ComboButton';

package/lib/components/Header/DigdirLogomark.tsx

@@ -0,0 +1,23 @@
+export interface SymbolProps {
+  className?: string;
+  title?: string;
+}
+
+export const DigdirLogomark = ({ className, title = 'Digdir logomark' }: SymbolProps) => {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <title>{title}</title>
+      <path
+        d="M12.3167 0H0.486059C0.357148 0 0.233518 0.0511029 0.142363 0.142066C0.0512097 0.23303 0 0.356402 0 0.485044V23.515C0 23.6436 0.0512097 23.767 0.142363 23.8579C0.233518 23.9489 0.357148 24 0.486059 24H12.3167C15.4455 23.9112 18.4163 22.6085 20.5979 20.3686C22.7795 18.1288 24 15.1284 24 12.0049C24 8.88133 22.7795 5.88089 20.5979 3.64106C18.4163 1.40122 15.4455 0.0985018 12.3167 0.00970113V0ZM13.4735 20.3815C11.6835 20.689 9.84199 20.4199 8.21543 19.6132C6.58891 18.8066 5.26188 17.5042 4.42651 15.8948C3.59114 14.2853 3.29078 12.4523 3.56892 10.6611C3.84707 8.86999 4.68929 7.2137 5.97362 5.93205C7.25795 4.6504 8.91774 3.80994 10.7126 3.53237C12.5075 3.25481 14.3444 3.55454 15.9572 4.38817C17.57 5.2218 18.875 6.54605 19.6834 8.16918C20.4918 9.79233 20.7614 11.6301 20.4534 13.4163C20.1535 15.1547 19.3216 16.7576 18.0717 18.0049C16.8218 19.2521 15.2155 20.0824 13.4735 20.3815Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};