@altinn/altinn-components 0.6.0 → 0.6.1

package/lib/css/colors.css

@@ -1,113 +0,0 @@
-:root {
-  --colors-neutral-1: #ffffff;
-  --colors-neutral-2: #f3f4f5;
-  --colors-neutral-3: #e2e3e5;
-  --colors-neutral-4: #cfd1d4;
-  --colors-neutral-5: #bec1c6;
-  --colors-neutral-6: #b9bcc1;
-  --colors-neutral-7: #7c818b;
-  --colors-neutral-8: #464e5c;
-  --colors-neutral-9: #212b3b;
-  --colors-neutral-10: #333c4a;
-  --colors-neutral-11: #464e5c;
-  --colors-neutral-12: #5d6470;
-  --colors-neutral-13: #232c3c;
-
-  --colors-company-1: #ffffff;
-  --colors-company-2: #e9f5ff;
-  --colors-company-3: #d3eafd;
-  --colors-company-4: #a5d6fb;
-  --colors-company-5: #78c1f9;
-  --colors-company-6: #4badf7;
-  --colors-company-7: #1e98f5;
-  --colors-company-8: #4086d7;
-  --colors-company-9: #111d46;
-  --colors-company-10: #364163;
-  --colors-company-11: #166aac;
-  --colors-company-12: #5a637f;
-  --colors-company-13: #1e2950;
-
-  --colors-person-1: #ffffff;
-  --colors-person-2: #eaf7ef;
-  --colors-person-3: #a8f3d0;
-  --colors-person-4: #6ee7b7;
-  --colors-person-5: #34d399;
-  --colors-person-6: #10b981;
-  --colors-person-7: #079669;
-  --colors-person-8: #347659;
-  --colors-person-9: #084826;
-  --colors-person-10: #076046;
-  --colors-person-11: #3b6d52;
-  --colors-person-12: #3b6d52;
-  --colors-person-13: #06331b;
-
-  /* link **/
-
-  --link-base-default: #2a4dd0;
-  --link-base-hover: #213ca3;
-  --link-base-active: #192d7b;
-
-  /* global */
-
-  --global-background-default: var(--colors-neutral-2);
-  --global-background-subtle: var(--colors-neutral-1);
-  --global-base-default: var(--colors-neutral-9);
-  --global-base-hover: var(--colors-neutral-10);
-  --global-base-active: var(--colors-neutral-11);
-  --global-border-default: var(--colors-neutral-7);
-  --global-border-strong: var(--colors-neutral-8);
-  --global-border-subtle: var(--colors-neutral-6);
-  --global-surface-active: var(--colors-neutral-5);
-  --global-surface-default: var(--colors-neutral-3);
-  --global-surface-hover: var(--colors-neutral-4);
-  --global-text-default: var(--colors-neutral-13);
-  --global-text-subtle: var(--colors-neutral-12);
-
-  /* neutral */
-
-  --neutral-background-default: var(--colors-neutral-1);
-  --neutral-background-subtle: var(--colors-neutral-2);
-  --neutral-base-default: var(--colors-neutral-9);
-  --neutral-base-hover: var(--colors-neutral-10);
-  --neutral-base-active: var(--colors-neutral-11);
-  --neutral-border-default: var(--colors-neutral-7);
-  --neutral-border-strong: var(--colors-neutral-8);
-  --neutral-border-subtle: var(--colors-neutral-6);
-  --neutral-surface-active: var(--colors-neutral-5);
-  --neutral-surface-default: var(--colors-neutral-3);
-  --neutral-surface-hover: var(--colors-neutral-4);
-  --neutral-text-default: var(--colors-neutral-13);
-  --neutral-text-subtle: var(--colors-neutral-12);
-
-  /* company */
-
-  --company-background-default: var(--colors-company-1);
-  --company-background-subtle: var(--colors-company-2);
-  --company-base-default: var(--colors-company-9);
-  --company-base-hover: var(--colors-company-10);
-  --company-base-active: var(--colors-company-11);
-  --company-border-default: var(--colors-company-7);
-  --company-border-strong: var(--colors-company-8);
-  --company-border-subtle: var(--colors-company-6);
-  --company-surface-active: var(--colors-company-5);
-  --company-surface-default: var(--colors-company-3);
-  --company-surface-hover: var(--colors-company-4);
-  --company-text-default: var(--colors-company-13);
-  --company-text-subtle: var(--colors-company-12);
-
-  /* person */
-
-  --person-background-default: var(--colors-person-1);
-  --person-background-subtle: var(--colors-person-2);
-  --person-base-default: var(--colors-person-9);
-  --person-base-hover: var(--colors-person-10);
-  --person-base-active: var(--colors-person-11);
-  --person-border-default: var(--colors-person-7);
-  --person-border-strong: var(--colors-person-8);
-  --person-border-subtle: var(--colors-person-6);
-  --person-surface-active: var(--colors-person-5);
-  --person-surface-default: var(--colors-person-3);
-  --person-surface-hover: var(--colors-person-4);
-  --person-text-default: var(--colors-person-13);
-  --person-text-subtle: var(--colors-person-12);
-}

package/lib/css/global.css

@@ -1,16 +0,0 @@
-@import "https://altinncdn.no/fonts/inter/inter.css";
-@import "./colors.css";
-@import "./shadows.css";
-@import "./theme-global.css";
-@import "./theme-global-dark.css";
-@import "./theme-article.css";
-@import "./theme-neutral.css";
-@import "./theme-company.css";
-@import "./theme-person.css";
-@import "./theme.css";
-
-* {
-  font-family: "Inter", sans-serif;
-  font-feature-settings: "cv05" 1; /* Enable lowercase l with tail */
-  box-sizing: border-box;
-}

package/lib/css/shadows.css

@@ -1,7 +0,0 @@
-:root {
-  --ds-shadow-xs: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-sm: 0 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --ds-shadow-md: 0 0 1px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.12);
-  --ds-shadow-lg: 0 0 1px 0 rgba(0, 0, 0, 0.13), 0 3px 5px 0 rgba(0, 0, 0, 0.13), 0 6px 12px 0 rgba(0, 0, 0, 0.14);
-  --ds-shadow-xl: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 4px 8px 0 rgba(0, 0, 0, 0.16), 0 12px 24px 0 rgba(0, 0, 0, 0.16);
-}

package/lib/css/theme-article.css

@@ -1,15 +0,0 @@
-[data-theme="article"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--link-base-active);
-  --theme-base-default: var(--link-base-default);
-  --theme-base-hover: var(--link-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-company.css

@@ -1,15 +0,0 @@
-[data-theme="company"] {
-  --theme-background-default: var(--company-background-default);
-  --theme-background-subtle: var(--company-background-subtle);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--company-border-default);
-  --theme-border-strong: var(--company-border-strong);
-  --theme-border-subtle: var(--company-border-subtle);
-  --theme-surface-active: var(--company-surface-active);
-  --theme-surface-default: var(--company-surface-default);
-  --theme-surface-hover: var(--company-surface-hover);
-  --theme-text-default: var(--company-text-default);
-  --theme-text-subtle: var(--company-text-subtle);
-}

package/lib/css/theme-global-dark.css

@@ -1,19 +0,0 @@
-[data-theme="global-dark"] {
-  --theme-background-default: var(--company-base-hover);
-  --theme-background-subtle: var(--company-base-default);
-
-  --theme-base-default: var(--company-background-subtle);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-base-active: var(--company-base-active);
-
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-
-  --theme-surface-default: var(--company-base-default);
-  --theme-surface-hover: var(--company-base-hover);
-  --theme-surface-active: var(--company-base-active);
-
-  --theme-text-default: var(--company-background-default);
-  --theme-text-subtle: var(--company-background-subtle);
-}

package/lib/css/theme-global.css

@@ -1,15 +0,0 @@
-[data-theme="global"] {
-  --theme-background-default: var(--neutral-background-subtle);
-  --theme-background-subtle: var(--neutral-background-default);
-  --theme-base-active: var(--company-base-active);
-  --theme-base-default: var(--company-base-default);
-  --theme-base-hover: var(--company-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-neutral.css

@@ -1,15 +0,0 @@
-[data-theme="neutral"] {
-  --theme-background-default: var(--neutral-background-default);
-  --theme-background-subtle: var(--neutral-background-subtle);
-  --theme-base-active: var(--neutral-base-active);
-  --theme-base-default: var(--neutral-base-default);
-  --theme-base-hover: var(--neutral-base-hover);
-  --theme-border-default: var(--neutral-border-default);
-  --theme-border-strong: var(--neutral-border-strong);
-  --theme-border-subtle: var(--neutral-border-subtle);
-  --theme-surface-active: var(--neutral-surface-active);
-  --theme-surface-default: var(--neutral-surface-default);
-  --theme-surface-hover: var(--neutral-surface-hover);
-  --theme-text-default: var(--neutral-text-default);
-  --theme-text-subtle: var(--neutral-text-subtle);
-}

package/lib/css/theme-person.css

@@ -1,15 +0,0 @@
-[data-theme="person"] {
-  --theme-background-default: var(--person-background-default);
-  --theme-background-subtle: var(--person-background-subtle);
-  --theme-base-active: var(--person-base-active);
-  --theme-base-default: var(--person-base-default);
-  --theme-base-hover: var(--person-base-hover);
-  --theme-border-default: var(--person-border-default);
-  --theme-border-strong: var(--person-border-strong);
-  --theme-border-subtle: var(--person-border-subtle);
-  --theme-surface-active: var(--person-surface-active);
-  --theme-surface-default: var(--person-surface-default);
-  --theme-surface-hover: var(--person-surface-hover);
-  --theme-text-default: var(--person-text-default);
-  --theme-text-subtle: var(--person-text-subtle);
-}

package/lib/css/theme.css

@@ -1,22 +0,0 @@
-html {
-  --theme-background-default: var(--global-background-default);
-  --theme-background-subtle: var(--global-background-subtle);
-  --theme-base-active: var(--global-base-active);
-  --theme-base-default: var(--global-base-default);
-  --theme-base-hover: var(--global-base-hover);
-  --theme-border-default: var(--global-border-default);
-  --theme-border-strong: var(--global-border-strong);
-  --theme-border-subtle: var(--global-border-subtle);
-  --theme-surface-active: var(--global-surface-active);
-  --theme-surface-default: var(--global-surface-default);
-  --theme-surface-hover: var(--global-surface-hover);
-  --theme-text-default: var(--global-text-default);
-  --theme-text-subtle: var(--global-text-subtle);
-}
-html[data-theme] {
-  background: var(--theme-background-subtle);
-  color: var(--neutral-text-default);
-}
-body {
-  background-color: inherit;
-}

package/lib/hooks/useClickOutside.ts

@@ -1,22 +0,0 @@
-'use client';
-import { type RefObject, useEffect } from 'react';
-
-export const useClickOutside = (ref: RefObject<HTMLDivElement>, callback: () => void) => {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        callback();
-      }
-    };
-
-    document.addEventListener('mouseup', handleClickOutside);
-    document.addEventListener('touchend', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mouseup', handleClickOutside);
-      document.removeEventListener('touchend', handleClickOutside);
-    };
-  }, [callback, ref]);
-
-  return ref;
-};

package/lib/hooks/useEscapeKey.ts

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

package/lib/hooks/useMenu.tsx

@@ -1,81 +0,0 @@
-'use client';
-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/stories/Color/MenuItem.stories.tsx

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

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

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

@@ -1,62 +0,0 @@
-{
-  "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

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

package/lib/stories/Inbox/BookmarksPage.tsx

@@ -1,78 +0,0 @@
-'use client';
-import {
-  Heading,
-  BookmarksList,
-  ListBase,
-  ListItem,
-  MetaItem,
-  PageBase,
-  SectionBase,
-  SectionFooter,
-  SectionHeader,
-  Typography,
-} from '../../components';
-import { InboxToolbar } from './InboxToolbar';
-
-export function BookmarksPage() {
-  const contextMenu = {
-    items: [
-      {
-        icon: "pencil",
-        label: "Rediger søk"
-      },
-      {
-        icon: "trash",
-        label: "Slett søk"
-      }
-    ]
-  }
-
-  const bookmarks = [
-    {
-      id: '1',
-      title: 'Mitt eget søk',
-      params: [
-        {type: "search", label: "Skatt"},
-        {type: "filter", label: "Under arbeid"}
-      ],
-    },
-    {
-      id: '2',
-      params: [
-        {type: "search", label: "Skatt"},
-        {type: "filter", label: "Under arbeid"}
-      ],
-    },
-    {
-      id: '3',
-      params: [
-        {type: "filter", label: "Brønnøysundregistrene"},
-        {type: "filter", label: "Krever handling"}
-      ],
-    },
-  ].map(item => {
-    return {
-      ...item,
-      menu: {...contextMenu, id: [item.id, "-menu"].join("-")}
-    }
-  });
-
-
-  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 padding color="subtle" spacing="lg" inset>
-      <SectionHeader>
-          <Heading size="sm">{title}</Heading>
-        </SectionHeader>
-        <BookmarksList spacing="none" items={bookmarks} />
-        <SectionFooter padding>
-          <MetaItem>Sist oppdatert: 10 minutter siden.</MetaItem>
-        </SectionFooter>
-      </SectionBase>
-    </PageBase>
-  );
-}

package/lib/stories/Inbox/DialogPage.tsx

@@ -1,15 +0,0 @@
-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>
-  );
-}