@altinn/altinn-components 0.4.1 → 0.5.1

package/lib/components/Toolbar/ToolbarOptions.tsx

@@ -1,8 +1,9 @@
-import type { ChangeEventHandler } from 'react';
+import { type ChangeEventHandler, Fragment } from 'react';
 import {
   MenuBase,
-  MenuGroup,
   MenuHeader,
+  MenuList,
+  MenuListItem,
   MenuOption,
   type MenuOptionProps,
   MenuSearch,
@@ -13,6 +14,7 @@ export type ToolbarOptionType = 'checkbox' | 'radio';
 
 export interface OptionGroup {
   title?: string;
+  divider?: boolean;
   optionType?: ToolbarOptionType;
 }
 
@@ -24,7 +26,7 @@ export interface ToolbarOptionsProps {
   optionGroups?: { [key: string]: OptionGroup };
 }
 
-export const ToolbarOptions = ({ search, optionGroups, options, onChange, optionType }: ToolbarOptionsProps) => {
+export const ToolbarOptions = ({ search, optionGroups = {}, options, onChange, optionType }: ToolbarOptionsProps) => {
   const sections = options.reduce(
     (acc, option) => {
       const group = option.group || '';
@@ -38,24 +40,35 @@ export const ToolbarOptions = ({ search, optionGroups, options, onChange, option
   return (
     <MenuBase theme="global">
       {search && <MenuSearch {...search} />}
-      {Object.keys(sections)?.map((key) => {
-        const headerTitle = optionGroups?.[key]?.title;
-        return (
-          <MenuGroup key={key}>
-            {headerTitle && <MenuHeader title={headerTitle} />}
-            {sections[key]?.map((item) => (
-              <MenuOption
-                key={item.value}
-                onChange={onChange}
-                label={item.label}
-                type={optionGroups?.[key]?.optionType || optionType}
-                value={item.value}
-                checked={item.checked}
-              />
-            ))}
-          </MenuGroup>
-        );
-      })}
+      <MenuList>
+        {Object.keys(sections)?.map((key, groupIndex) => {
+          const groupProps = optionGroups[key] || {};
+          const { title, divider = true } = groupProps;
+          return (
+            <Fragment key={key}>
+              {groupIndex && divider ? <MenuListItem role="separator" /> : ''}
+
+              {title && (
+                <MenuListItem>
+                  <MenuHeader title={title} />
+                </MenuListItem>
+              )}
+              {sections[key]?.map((item) => (
+                <MenuListItem key={item.value}>
+                  <MenuOption
+                    onChange={onChange}
+                    label={item.label}
+                    badge={item.badge}
+                    type={optionGroups?.[key]?.optionType || optionType}
+                    value={item.value}
+                    checked={item.checked}
+                  />
+                </MenuListItem>
+              ))}
+            </Fragment>
+          );
+        })}
+      </MenuList>
     </MenuBase>
   );
 };

package/lib/components/Toolbar/toolbarAdd.module.css

@@ -0,0 +1,7 @@
+.menu {
+  position: relative;
+}
+
+.menu[aria-expanded="true"] {
+  z-index: 2;
+}

package/lib/components/Toolbar/toolbarBase.module.css

@@ -0,0 +1,19 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 0.5rem;
+  /*  padding: 0 1rem; */
+}
+
+@media (min-width: 1024px) {
+  .toolbar {
+    padding: 0;
+    /*    margin: 1.125rem 0; */
+  }
+
+  .toolbar > * {
+    width: auto;
+  }
+}

package/lib/components/Toolbar/toolbarButton.module.css

@@ -1,3 +1,3 @@
-.remove > button:hover + * + * {
+.removeButton > button:hover + * + * {
   text-decoration: line-through;
 }

package/lib/components/Toolbar/toolbarFilter.module.css

@@ -0,0 +1,25 @@
+.filter {
+  position: relative;
+}
+
+.filter[aria-expanded="true"] {
+  z-index: 2;
+}
+
+.dropdown[aria-expanded="true"] {
+  display: none;
+}
+
+.drawer[aria-expanded="true"] {
+  display: block;
+}
+
+@media (min-width: 1024px) {
+  .drawer[aria-expanded="true"] {
+    display: none;
+  }
+
+  .dropdown[aria-expanded="true"] {
+    display: block;
+  }
+}

package/lib/components/Toolbar/toolbarMenu.module.css

@@ -0,0 +1,7 @@
+.menu {
+  position: relative;
+}
+
+.menu[aria-expanded="true"] {
+  z-index: 2;
+}

package/lib/components/Typography/Heading.tsx

@@ -0,0 +1,23 @@
+import cx from 'classnames';
+import type { ReactNode } from 'react';
+import styles from './heading.module.css';
+
+export type HeadingSize = 'sm' | 'md' | 'lg';
+export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingProps {
+  as?: HeadingComponent;
+  size?: HeadingSize;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Heading = ({ as = 'h2', size = 'md', className, children }: HeadingProps) => {
+  const H = as;
+
+  return (
+    <H className={cx(styles.heading, className)} data-size={size}>
+      {children}
+    </H>
+  );
+};

package/lib/components/Typography/Typography.tsx

@@ -1,21 +1,24 @@
 import cx from 'classnames';
-import type { ReactNode } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import type { LayoutTheme } from '../Layout';
 import styles from './typography.module.css';
 
-export type TypographySize = 'md' | 'lg' | 'xl';
+export type TypographySize = 'sm' | 'md' | 'lg';
 
 export interface TypographyProps {
+  as?: ElementType;
   size?: TypographySize;
   theme?: LayoutTheme;
   className?: string;
   children?: ReactNode;
 }
 
-export const Typography = ({ size = 'md', theme, className, children }: TypographyProps) => {
+export const Typography = ({ as = 'div', size = 'md', theme, className, children }: TypographyProps) => {
+  const Component = as;
+
   return (
-    <div className={cx(styles.typography, className)} data-size={size} data-theme={theme}>
+    <Component className={cx(styles.typography, className)} data-size={size} data-theme={theme}>
       {children}
-    </div>
+    </Component>
   );
 };

package/lib/components/Typography/heading.module.css

@@ -0,0 +1,21 @@
+.heading {
+  margin: 0;
+}
+
+.heading[data-size="sm"] {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.25;
+}
+
+.heading[data-size="md"] {
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.heading[data-size="lg"] {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}

package/lib/components/Typography/index.ts

@@ -1 +1,2 @@
 export * from './Typography';
+export * from './Heading';

package/lib/components/Typography/typography.module.css

@@ -4,6 +4,14 @@
   line-height: 1.5;
 }
 
+.item[data-size="sm"] {
+  font-size: 0.875rem;
+}
+
+.item[data-size="md"] {
+  font-size: 1rem;
+}
+
 .typography[data-size="lg"] {
   font-size: 1.125rem;
 }

package/lib/components/index.ts

@@ -15,6 +15,8 @@ export * from './Layout';
 export * from './List';
 export * from './Menu';
 export * from './Meta';
+export * from './Searchbar';
 export * from './Snackbar';
 export * from './Toolbar';
+export * from './Page';
 export * from './Typography';

package/lib/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useClickOutside';
+export * from './useEscapeKey';
+export * from './useMenu';

package/lib/{components/Menu → hooks}/useEscapeKey.ts

@@ -1,11 +1,11 @@
 'use client';
 import { useEffect } from 'react';
 
-export const useEscapeKey = (onEscape: () => void): void => {
+export const useEscapeKey = (onEscape?: () => void): void => {
   useEffect(() => {
     const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
-        onEscape();
+        onEscape?.();
       }
     };
     document.addEventListener('keydown', handleEscape);

package/lib/hooks/useMenu.tsx

@@ -0,0 +1,80 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export interface UseMenuItemProps<T> {
+  menuIndex: number;
+  active?: boolean;
+  props: T;
+}
+
+export interface UseMenuGroup<T, V> {
+  items: UseMenuItemProps<T>[];
+  props: Record<string, V>;
+}
+
+export interface UseMenuOutput<T, V> {
+  menu: UseMenuGroup<T, V>[];
+  activeIndex: number;
+  setActiveIndex: (activeIndex: number) => void;
+}
+
+export interface UseMenuInput<T, V> {
+  items: T[];
+  groups: Record<string, V>;
+  groupByKey?: keyof T;
+  keyboardEvents?: boolean;
+}
+
+export const useMenu = <T, V>({
+  items,
+  groups,
+  groupByKey,
+  keyboardEvents = false,
+}: UseMenuInput<T, V>): UseMenuOutput<T, V> => {
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+
+  const menu = useMemo(() => {
+    const flatItems: T[] = [];
+    const grouped = items.reduce(
+      (acc, item) => {
+        const key = groupByKey && item[groupByKey] ? (item[groupByKey] as string) : 'ungrouped';
+        acc[key] = acc[key] || [];
+        acc[key].push(item);
+        flatItems.push(item);
+        return acc;
+      },
+      {} as Record<string, T[]>,
+    );
+
+    return Object.entries(grouped).map(([key, groupItems]) => ({
+      items: groupItems.map((item) => ({
+        menuIndex: flatItems.indexOf(item),
+        active: activeIndex === flatItems.indexOf(item),
+        props: item,
+      })),
+      props: groups[key] || {},
+    }));
+  }, [items, groupByKey, activeIndex, groups]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'ArrowDown') {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % items.length);
+      } else if (event.key === 'ArrowUp') {
+        setActiveIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+      }
+    },
+    [items.length],
+  );
+
+  useEffect(() => {
+    if (keyboardEvents) {
+      setActiveIndex(0);
+      document.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [handleKeyDown, keyboardEvents]);
+
+  return { menu, activeIndex, setActiveIndex };
+};

package/lib/index.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './hooks';

package/lib/stories/Color/MenuItem.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LayoutBase, type LayoutTheme, MenuBase, MenuItem, type MenuItemColor, MetaItem } from '../../components';
+
+const meta = {
+  title: 'Demo/Color/MenuItem',
+  component: MenuItem,
+  tags: ['autodocs'],
+  parameters: {},
+  args: {
+    id: 'inbox',
+  },
+} satisfies Meta<typeof MenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ThemesAndColors = () => {
+  const themes: LayoutTheme[] = ['global', 'neutral', 'company', 'person', 'global-dark'];
+  const colors: MenuItemColor[] = ['neutral', 'subtle', 'strong', 'company', 'person'];
+
+  return (
+    <div style={{ display: 'flex', width: '100%' }}>
+      {themes.map((theme) => {
+        return (
+          <div key={theme} style={{ flexGrow: 1 }}>
+            <LayoutBase theme={theme}>
+              <MenuBase>
+                {colors.map((color) => {
+                  return (
+                    <div key={color}>
+                      <MenuItem icon="inbox" title="Title" color={color} id="inbox" />
+                      <MetaItem>{theme + '/' + color}</MetaItem>
+                    </div>
+                  );
+                })}
+              </MenuBase>
+            </LayoutBase>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/lib/stories/Color/Swatches.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Swatches } from './Swatches';
+
+const meta = {
+  title: 'Demo/Color/Swatches',
+  component: Swatches,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {},
+} satisfies Meta<typeof Swatches>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/lib/stories/Color/Swatches.tsx

@@ -0,0 +1,42 @@
+import type { LayoutTheme } from '../../components';
+import colors from './colors.json';
+import styles from './swatches.module.css';
+
+const themes = {
+  neutral: 'Neutral',
+  person: 'Person',
+  company: 'Company',
+};
+
+export interface SwatchesProps {
+  theme: LayoutTheme;
+}
+
+export const SwatchesList = ({ theme }: SwatchesProps) => {
+  return (
+    <div className={styles.list} data-theme={theme}>
+      {Object.keys(colors).map((key) => {
+        const style = {
+          backgroundColor: 'var(--theme-' + key + ')',
+        };
+
+        return (
+          <section className={styles.item}>
+            <div style={style} className={styles.swatch}></div>
+            {key}
+          </section>
+        );
+      })}
+    </div>
+  );
+};
+
+export const Swatches = ({ theme }: SwatchesProps) => {
+  return (
+    <div className={styles.row}>
+      {Object.keys(themes).map((key) => {
+        return <SwatchesList theme={key} />;
+      })}
+    </div>
+  );
+};

package/lib/stories/Color/colors.json

@@ -0,0 +1,62 @@
+{
+  "background-default": {
+    "$type": "color",
+    "$value": "{color.<color>.1}"
+  },
+  "background-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.2}"
+  },
+  "surface-default": {
+    "$type": "color",
+    "$value": "{color.<color>.3}"
+  },
+  "surface-hover": {
+    "$type": "color",
+    "$value": "{color.<color>.4}"
+  },
+  "surface-active": {
+    "$type": "color",
+    "$value": "{color.<color>.5}"
+  },
+  "border-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.6}"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "{color.<color>.7}"
+  },
+  "border-strong": {
+    "$type": "color",
+    "$value": "{color.<color>.8}"
+  },
+  "base-default": {
+    "$type": "color",
+    "$value": "{color.<color>.9}"
+  },
+  "base-hover": {
+    "$type": "color",
+    "$value": "{color.<color>.10}"
+  },
+  "base-active": {
+    "$type": "color",
+    "$value": "{color.<color>.11}"
+  },
+  "text-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.12}"
+  },
+  "text-default": {
+    "$type": "color",
+    "$value": "{color.<color>.13}"
+  },
+  "contrast-default": {
+    "$type": "color",
+    "$value": "{color.<color>.contrast-1}"
+  },
+  "contrast-subtle": {
+    "$type": "color",
+    "$value": "{color.<color>.contrast-2}"
+  }
+}

package/lib/stories/Color/swatches.module.css

@@ -0,0 +1,14 @@
+.swatch {
+  width: 4rem;
+  height: 4rem;
+  border: 1px solid;
+}
+
+.row {
+  display: flex;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+}

package/lib/stories/Inbox/BookmarksPage.tsx

@@ -0,0 +1,52 @@
+'use client';
+import {
+  Heading,
+  ListBase,
+  ListItem,
+  MetaItem,
+  PageBase,
+  SectionBase,
+  SectionFooter,
+  SectionHeader,
+  Typography,
+} from '../../components';
+import { InboxToolbar } from './InboxToolbar';
+
+export function BookmarksPage() {
+  const bookmarks = [
+    {
+      id: '1',
+      title: '123',
+    },
+    {
+      id: '2',
+      title: '123',
+    },
+    {
+      id: '3',
+      title: '123',
+    },
+  ];
+
+  const count = bookmarks.length;
+  const title = (count > 1 && count + ' lagrede søk') || (count && '1 lagret søk') || 'Ingen lagrede søk';
+
+  return (
+    <PageBase margin="lg" spacing="lg">
+      <InboxToolbar />
+      <SectionBase spacing="lg">
+        <SectionHeader padding>
+          <Heading size="md">{title}</Heading>
+        </SectionHeader>
+        <ListBase spacing="sm">
+          {bookmarks.map((item) => (
+            <ListItem {...item} key={item.id} />
+          ))}
+        </ListBase>
+        <SectionFooter padding>
+          <MetaItem>Sist oppdatert: 10 minutter siden.</MetaItem>
+        </SectionFooter>
+      </SectionBase>
+    </PageBase>
+  );
+}

package/lib/stories/Inbox/DialogPage.tsx

@@ -0,0 +1,15 @@
+import { ActionMenu, Dialog, PageBase } from '../../components';
+import type { DialogProps } from '../../components';
+
+interface DialogPageProps {
+  dialog: DialogProps;
+}
+
+export function DialogPage({ dialog }: DialogPageProps) {
+  return (
+    <PageBase inset>
+      <Dialog {...dialog} />
+      <ActionMenu items={dialog?.menu?.items} />
+    </PageBase>
+  );
+}

package/lib/stories/Inbox/Inbox.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { accounts, dialogs } from './';
+import { Inbox } from './Inbox';
+
+const meta = {
+  title: 'Demo/Inbox/Inbox',
+  component: Inbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    inboxId: 'inbox',
+    accounts,
+    accountId: 'a0',
+    dialogs,
+  },
+} satisfies Meta<typeof Inbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const BulkMode: Story = {
+  args: {
+    selectedIds: ['d1'],
+  },
+};
+
+export const DialogOpen: Story = {
+  args: {
+    dialogId: 'd1',
+  },
+};
+
+export const SavedSearches: Story = {
+  args: {
+    inboxId: 'bookmarks',
+  },
+};
+
+export const ProfilePage: Story = {
+  args: {
+    inboxId: 'profile',
+  },
+};
+
+export const SettingsPage: Story = {
+  args: {
+    inboxId: 'settings',
+  },
+};