@altinn/altinn-components 0.4.0 → 0.5.0

package/.storybook/main.ts

@@ -1,7 +1,7 @@
 import { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../lib/components/**/*.stories.@(ts|tsx)"],
+  stories: ["../lib/components/**/*.stories.@(ts|tsx)", "../lib/stories/**/*.stories.@(ts|tsx)"],
   addons: [
     "@storybook/addon-onboarding",
     "@storybook/addon-links",

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [0.5.0](https://github.com/Altinn/altinn-components/compare/v0.4.1...v0.5.0) (2024-11-15)
+
+
+### Features
+
+* search bar ([#45](https://github.com/Altinn/altinn-components/issues/45)) ([cc908e0](https://github.com/Altinn/altinn-components/commit/cc908e05957783adf97b94d5e196bf9722523471))
+
+## [0.4.1](https://github.com/Altinn/altinn-components/compare/v0.4.0...v0.4.1) (2024-11-11)
+
+
+### Bug Fixes
+
+* css changes to dialog ([#43](https://github.com/Altinn/altinn-components/issues/43)) ([79e3287](https://github.com/Altinn/altinn-components/commit/79e3287dc2efbce8ba7a9c0b94f955514289c0d3))
+
 ## [0.4.0](https://github.com/Altinn/altinn-components/compare/v0.3.0...v0.4.0) (2024-11-08)
 
 

package/biome.jsonc

@@ -60,6 +60,6 @@
     }
   },
   "files": {
-    "ignore": [".github", "node_modules", "dist", "build", ".storybook"]
+    "ignore": [".github", "node_modules", "dist", "build", ".storybook", "lib/stories"]
   }
 }

package/lib/components/Attachment/AttachmentLink.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AttachmentLink } from './AttachmentLink';
 
 const meta = {
-  title: 'Attachment/AttachmentLink',
+  title: 'Atoms/Attachment/AttachmentLink',
   component: AttachmentLink,
   tags: ['autodocs'],
   parameters: {},

package/lib/components/Attachment/AttachmentList.stories.ts

@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { AttachmentList } from './AttachmentList';
 
 const meta = {
-  title: 'Attachment/AttachmentList',
+  title: 'Atoms/Attachment/AttachmentList',
   component: AttachmentList,
   tags: ['autodocs'],
   parameters: {

package/lib/components/Button/Button.tsx

@@ -1,6 +1,8 @@
 import cx from 'classnames';
-import { Icon, type IconName } from '../Icon';
+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> {
@@ -10,22 +12,27 @@ export interface ButtonProps extends Partial<ButtonBaseProps> {
 }
 
 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={cx(styles.button, { [styles.reverse]: reverse }, className)}
         {...rest}
         disabled
       >
@@ -38,20 +45,16 @@ export const Button = ({
 
   return (
     <ButtonBase
+      variant={variant}
+      color={color}
       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>
-      )}
+      <ButtonLabel size={size}>{children}</ButtonLabel>
+      {icon && <ButtonIcon size={size} icon={icon} />}
     </ButtonBase>
   );
 };

package/lib/components/Button/ButtonBase.tsx

@@ -4,7 +4,7 @@ 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 ButtonSize = 'sm' | 'md' | 'lg' | 'custom';
 export type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {

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,16 @@
+import type { ReactNode } from 'react';
+import type { ButtonSize } from './ButtonBase';
+import styles from './buttonLabel.module.css';
+
+export interface ButtonLabelProps {
+  size: ButtonSize;
+  children: ReactNode;
+}
+
+export const ButtonLabel = ({ size, children }: ButtonLabelProps) => {
+  return (
+    <span className={styles.label} 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.tsx

@@ -1,7 +1,9 @@
 import cx from 'classnames';
 import type { MouseEventHandler } from 'react';
-import { Icon, type IconName } from '../Icon';
+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';
 
@@ -13,9 +15,9 @@ export interface ComboButtonProps extends Omit<ButtonBaseProps, 'onClick'> {
 }
 
 export const ComboButton = ({
-  size = 'md',
   variant = 'solid',
-  color,
+  color = 'primary',
+  size = 'md',
   selected = false,
   icon,
   children,
@@ -32,12 +34,12 @@ export const ComboButton = ({
       selected={selected}
       className={cx(styles.button, className)}
     >
-      <ButtonBase size={size} onClick={onIconClick} className={styles.icon}>
-        <Icon name={icon} />
+      <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.label}>
-        {children}
+      <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

@@ -1,6 +1,9 @@
 import cx from 'classnames';
-import { ButtonBase, type ButtonColor, type ButtonSize, type ButtonVariant } from '../Button';
-import { Icon, type IconName } from '../Icon';
+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 {
@@ -9,13 +12,20 @@ interface IconButtonProps {
   size?: ButtonSize;
   variant?: ButtonVariant;
   className?: string;
-  onClick?: () => void;
+  onClick?: MouseEventHandler;
 }
 
-export const IconButton = ({ className, variant, color, size, icon, onClick }: IconButtonProps) => {
+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}>
-      <Icon name={icon} className={styles.icon} />
+      <ButtonIcon icon={icon} size={size} />
     </ButtonBase>
   );
 };

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

@@ -1,63 +1,22 @@
 .button {
   display: inline-flex;
   align-items: center;
+  column-gap: 0.125em;
+  border-radius: 2px;
 }
 
 .reverse {
   flex-direction: row-reverse;
 }
 
-.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;
+  padding: 0 0.375rem;
 }
 
-/* md 44 */
-
 .button[data-size="md"] {
-  border-radius: 2px;
-  padding: 9px 6px;
+  padding: 0 0.5rem;
 }
 
-.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;
+  padding: 0 0.625rem;
 }

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

@@ -21,7 +21,7 @@
   -moz-osx-font-smoothing: inherit;
 
   /* Corrects inability to style clickable `input` types in iOS */
-  -webkit-appearance: none;
+  appearance: none;
 
   /* user select none */
   user-select: none;
@@ -45,7 +45,19 @@
   border-color: var(--theme-base-active);
 }
 
-/* solid */
+.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);
@@ -53,44 +65,52 @@
   color: white;
 }
 
-/* outline */
+.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;
 }
 
-/* dotted */
-
 .button[data-variant="dotted"] {
   border-style: dotted;
 }
 
-/* text */
-
 .button[data-variant="text"] {
   border-color: transparent;
 }
 
-.button[aria-selected="true"] {
-  background-color: var(--theme-background-subtle);
-  color: var(--theme-text-default);
+.button[data-variant="outline"]:hover,
+.button[data-variant="dotted"]:hover,
+.button[data-variant="text"]:hover {
+  background-color: var(--theme-surface-default);
 }
 
-/* primary color */
-
-.button[data-color="primary"] {
-  border-color: var(--theme-base-default);
+.button[data-variant="outline"]:active,
+.button[data-variant="dotted"]:active,
+.button[data-variant="text"]:active {
+  background-color: var(--theme-surface-active);
 }
 
-.button[data-color="primary"]:hover {
-  border-color: var(--theme-base-hover);
-}
+/* selected */
 
-.button[data-color="primary"][data-variant="solid"],
-.button[data-color="primary"][data-variant="solid"] {
-  border-color: var(--theme-base-default);
-  background-color: var(--theme-base-default);
-  color: white;
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
 }
 
 /* secondary color */
@@ -103,8 +123,20 @@
   border-color: var(--theme-surface-hover);
 }
 
-.button[data-color="secondary"][data-variant="solid"],
 .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

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

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

@@ -2,84 +2,34 @@
   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 {
+  align-self: stretch;
   border-left: 1px solid currentColor;
   width: 1px;
-  height: 1em;
+  margin: 0.375rem 0;
 }
 
-.icon {
-  display: flex;
+.primary,
+.secondary {
+  display: inline-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: 8px 10px;
+  border: none;
 }
 
-.divider[data-size="sm"] {
-  height: 20px;
-}
-
-.icon[data-size="sm"] {
-  font-size: 1.25rem;
-  padding: 6px 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;
+.primary[data-size="sm"],
+.secondary[data-size="sm"] {
+  padding: 0 0.375rem;
 }
 
-.label[data-size="lg"] {
-  padding: 1rem;
+.primary[data-size="md"],
+.secondary[data-size="md"] {
+  padding: 0 0.5rem;
 }
 
-.icon[data-size="lg"] {
-  font-size: 1.5rem;
-  padding: 16px 10px;
+.primary[data-size="lg"],
+.secondary[data-size="lg"] {
+  padding: 0 0.625rem;
 }