feat: add meta fields

.storybook/StoryDecorator.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import styles from "./storyDecorator.module.css";
 
 interface StoryDecoratorProps {

.storybook/ThemeProvider.tsx

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import styles from "./theme.module.css";
+
+export const ThemeProvider = <Theme,>({
+  children,
+  theme,
+}: {
+  children?: ReactNode;
+  theme?: Theme;
+}) => {
+  return (
+    <div className={styles.theme} data-theme={theme}>
+      {children}
+    </div>
+  );
+};

.storybook/main.ts

@@ -6,9 +6,9 @@ const config: StorybookConfig = {
     "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@chromatic-com/storybook",
-    "@storybook/addon-interactions",
     "@storybook/addon-themes",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.tsx

@@ -1,39 +1,35 @@
-import React from "react";
 import { withThemeByDataAttribute } from "@storybook/addon-themes";
 import { Preview, StoryFn } from "@storybook/react";
 import { StoryDecorator } from "./StoryDecorator";
 import "../lib/css/global.css";
-
 /** @type { import('@storybook/react').Preview } */
 const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
     },
-  },
-  decorators: [
-    (Story: StoryFn, data) => {
-      const { tags, globals } = data;
-
-      return (
-        <StoryDecorator tags={tags} theme={globals?.theme}>
-          <Story />
-        </StoryDecorator>
-      );
-    },
-    withThemeByDataAttribute({
-      themes: {
-        global: "global",
-        neutral: "neutral",
-        company: "company",
-        person: "person",
-      },
-      defaultTheme: "neutral",
-    }),
-  ],
+    decorators: [
+        (Story: StoryFn, data) => {
+            const { tags, globals } = data;
+            return (
+                <StoryDecorator tags={tags} theme={globals?.theme}>
+                    <Story />
+                </StoryDecorator>
+            );
+        },
+        withThemeByDataAttribute({
+            themes: {
+                global: "global",
+                neutral: "neutral",
+                company: "company",
+                person: "person",
+            },
+            defaultTheme: "neutral",
+        }),
+    ],
 };
-
-export default preview;
+export default preview;

.storybook/theme.module.css

@@ -0,0 +1,3 @@
+.theme[data-theme] {
+  background: var(--theme-background-subtle);
+}

lib/components/Avatar/avatar.module.css

@@ -1,4 +1,6 @@
 .avatar {
+  flex-grow: 0;
+  flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;

lib/components/Badge/Badge.stories.ts

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+
+const meta = {
+  title: 'Atoms/Badge/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    label: 'Badge',
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const Alert: Story = {
+  args: {
+    color: 'alert',
+  },
+};
+
+export const UnreadCount: Story = {
+  args: {
+    label: '2',
+    color: 'alert',
+  },
+};

lib/components/Badge/Badge.tsx

@@ -2,18 +2,21 @@ import cx from 'classnames';
 import type { ReactNode } from 'react';
 import styles from './badge.module.css';
 
+export type BadgeColor = 'subtle' | 'alert';
+export type BadgeSize = 'sm';
+
 export interface BadgeProps {
   label?: string | number;
-  variant?: 'neutral' | 'strong';
-  size?: 'medium' | 'small';
+  color?: BadgeColor;
+  size?: BadgeSize;
+  className?: string;
   children?: ReactNode;
 }
 
-// TODO: add aria-label to the badge
-export const Badge = ({ label, variant = 'neutral', size = 'medium', children }: BadgeProps) => {
-  const classNames = cx(styles.badge, {
-    [styles.strong]: variant === 'strong',
-    [styles.small]: size === 'small',
-  });
-  return <span className={classNames}>{label || children}</span>;
+export const Badge = ({ label, color = 'subtle', size = 'sm', className, children }: BadgeProps) => {
+  return (
+    <span className={cx(styles.badge, className)} data-color={color} data-size={size}>
+      <span className={styles.label}>{label || children}</span>
+    </span>
+  );
 };

lib/components/Badge/badge.module.css

@@ -1,36 +1,27 @@
 .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);
+  justify-content: center;
+  white-space: nowrap;
+
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.5em 0.5em;
+
+  min-width: 2em;
+  border-radius: 2em;
+}
+
+.badge[data-size="sm"] {
   font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1rem;
-  border-radius: 12px;
 }
 
-.strong {
-  font-weight: 700;
-  background: var(--Action-Important, #e02e49);
-  color: #ffffff;
+.badge[data-color="subtle"] {
+  background-color: var(--theme-surface-default);
+  color: var(--theme-text-subtle);
 }
 
-.small {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 4px;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+.badge[data-color="alert"] {
+  background-color: #e02e49;
+  color: white;
 }

lib/components/Button/ButtonBase.tsx

@@ -5,7 +5,7 @@ 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 type ButtonColor = 'primary' | 'secondary';
 
 export interface ButtonBaseProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**

lib/components/Button/button.module.css

@@ -1,31 +1,12 @@
 .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;

lib/components/Button/buttonBase.module.css

@@ -1,5 +1,6 @@
 .button {
-  border: none;
+  border: 1px solid;
+  border-color: transparent;
   margin: 0;
   padding: 0;
   width: auto;
@@ -32,11 +33,23 @@
   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);
+}
+
 /* solid */
 
 .button[data-variant="solid"] {
-  border-color: var(--theme-base-hover);
-  background-color: var(--theme-base-hover);
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
   color: white;
 }
 
@@ -60,18 +73,23 @@
   border-color: transparent;
 }
 
-/* solid + link
+.button[aria-selected="true"] {
+  background-color: var(--theme-background-subtle);
+  color: var(--theme-text-default);
+}
 
-.button[data-color="link"][data-variant="solid"] {
-  background-color: var(--link-base-default);
-  color: white;
+/* secondary color */
+
+.button[data-color="secondary"] {
+  color: var(--theme-text-subtle);
 }
 
-.button[data-color="link"][data-variant="solid"]:hover {
-  background-color: var(--link-base-hover);
+.button[data-color="secondary"]:hover {
+  border-color: var(--theme-surface-hover);
 }
 
-.button[data-color="link"][data-variant="active"]:hover {
-  background-color: var(--link-base-active);
+.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);
 }
- */

lib/components/Button/comboButton.module.css

@@ -6,10 +6,12 @@
   border-radius: 2px;
 }
 
+/*
 .button[aria-selected="true"] {
   background-color: var(--theme-background-subtle);
   color: var(--theme-text-default);
 }
+  */
 
 .label {
   line-height: 1rem;
@@ -40,7 +42,7 @@
 
 .label[data-size="sm"] {
   font-size: 0.875rem;
-  padding: 9px 10px;
+  padding: 8px 10px;
 }
 
 .divider[data-size="sm"] {
@@ -49,7 +51,7 @@
 
 .icon[data-size="sm"] {
   font-size: 1.25rem;
-  padding: 7px 5px;
+  padding: 6px 5px;
 }
 
 /* md 44px */

lib/components/Layout/Layout.stories.ts

@@ -11,7 +11,6 @@ const menu: MenuProps = {
       size: 'lg',
       icon: 'inbox',
       title: 'Innboks',
-      badge: '4',
     },
     {
       id: '2',
@@ -25,14 +24,12 @@ const menu: MenuProps = {
       icon: 'file-checkmark',
       selected: true,
       title: 'Sendt',
-      badge: '2',
     },
     {
       id: '4',
       group: 3,
       icon: 'bookmark',
       title: 'Lagrede søk',
-      badge: '11',
     },
     {
       id: '5',