feat: search bar (#45)

Co-authored-by: Inge Fossland <inge@fosslandfoss.no>
Altinn · Nov 15, 2024 · cc908e0 · cc908e0
1 parent 2309be2
commit cc908e0
Show file tree

Hide file tree

Showing 176 changed files with 4,034 additions and 823 deletions.
diff --git a/biome.jsonc b/biome.jsonc
@@ -60,6 +60,6 @@
     }
   },
   "files": {
-    "ignore": [".github", "node_modules", "dist", "build", ".storybook"]
+    "ignore": [".github", "node_modules", "dist", "build", ".storybook", "lib/stories"]
   }
 }
diff --git a/lib/components/Attachment/AttachmentLink.stories.ts b/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: {},

diff --git a/lib/components/Attachment/AttachmentList.stories.ts b/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: {

diff --git a/lib/components/Button/Button.tsx b/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>
   );
 };
diff --git a/lib/components/Button/ButtonBase.tsx b/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> {

diff --git a/lib/components/Button/ButtonIcon.tsx b/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>
+  );
+};
diff --git a/lib/components/Button/ButtonLabel.tsx b/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>
+  );
+};
diff --git a/lib/components/Button/Buttons.stories.tsx b/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>
+  );
+};
diff --git a/lib/components/Button/ComboButton.tsx b/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>
   );

diff --git a/lib/components/Button/IconButton.stories.tsx b/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>
+  );
+};
diff --git a/lib/components/Button/IconButton.tsx b/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>
   );
 };
diff --git a/lib/components/Button/button.module.css b/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;
 }