@altinn/altinn-components 0.6.1 → 0.6.2

package/lib/components/Icon/progressIcon.module.css

@@ -0,0 +1,29 @@
+.progress {
+  --size: 16px;
+  width: var(--size);
+  height: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: conic-gradient(var(--theme-border-strong) var(--progress, 0), var(--theme-surface-default) 0);
+  display: grid;
+  place-content: center;
+  transform: scaleX(-1);
+}
+
+.progress:after {
+  width: calc(var(--size) * 0.5);
+  height: calc(var(--size) * 0.5);
+  aspect-ratio: 1;
+  content: attr(data-value);
+  display: grid;
+  background: #fff;
+  border-radius: 50%;
+  font-size: 0;
+  place-content: center;
+}
+
+.complete {
+  width: var(--size);
+  height: var(--size);
+  color: var(--theme-border-strong);
+}

package/lib/components/Icon/radioIcon.module.css

@@ -0,0 +1,21 @@
+.radio {
+  font-size: 1rem;
+  border: 2px solid;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-base-default);
+  border-radius: 50%;
+  height: 1em;
+  width: 1em;
+}
+
+.radio[data-checked="true"] {
+  border-color: var(--theme-base-default);
+  background-color: var(--theme-base-default);
+  color: var(--theme-background-subtle);
+}
+
+.radio > svg {
+  stroke: currentColor;
+}

package/lib/components/Layout/Layout.stories.tsx

@@ -0,0 +1,308 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { ActionFooter, ActionHeader, ActionMenu, DialogListItem, ListBase, Snackbar } from '../';
+import type { FooterProps, HeaderProps, MenuProps } from '../';
+import { Layout } from './Layout';
+
+const header: HeaderProps = {
+  search: {
+    name: 'search',
+    placeholder: 'Søk i Altinn',
+  },
+  currentAccount: {
+    id: 'party:aurora',
+    type: 'person',
+    name: 'Aurora Mikalsen',
+  },
+  menu: {
+    accounts: [
+      {
+        id: 'party:aurora',
+        type: 'person',
+        name: 'Aurora Mikalsen',
+      },
+    ],
+  },
+};
+
+const footer: FooterProps = {
+  address: 'Postboks 1382 Vika, 0114 Oslo.',
+  menu: {
+    items: [
+      {
+        id: '1',
+        href: '#',
+        title: 'Om Altinn',
+      },
+      {
+        id: '2',
+        href: '#',
+        title: 'Driftsmeldinger',
+      },
+      {
+        id: '3',
+        href: '#',
+        title: 'Personvern',
+      },
+      {
+        id: '4',
+        href: '#',
+        title: 'Tilgjengelighet',
+      },
+    ],
+  },
+};
+
+const menu: MenuProps = {
+  groups: {},
+  items: [
+    {
+      id: '1',
+      groupId: 1,
+      size: 'lg',
+      icon: 'inbox',
+      title: 'Innboks',
+      color: 'strong',
+    },
+    {
+      id: '2',
+      groupId: 2,
+      icon: 'doc-pencil',
+      title: 'Utkast',
+    },
+    {
+      id: '3',
+      group: 2,
+      icon: 'file-checkmark',
+      selected: true,
+      title: 'Sendt',
+    },
+    {
+      id: '4',
+      groupId: 3,
+      icon: 'bookmark',
+      title: 'Lagrede søk',
+    },
+    {
+      id: '5',
+      groupId: 4,
+      icon: 'archive',
+      title: 'Arkivert',
+    },
+    {
+      id: '6',
+      groupId: 4,
+      disabled: true,
+      icon: 'trash',
+      title: 'Papirkurv',
+    },
+  ],
+};
+
+const meta = {
+  title: 'Layout/Layout',
+  component: Layout,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    theme: 'person',
+    header,
+    footer,
+    sidebar: {
+      menu,
+    },
+  },
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const ControlledStateSearch = (args) => {
+  const [q, setQ] = useState<string>('');
+  const onChange = (event) => {
+    setQ(event.target.value);
+  };
+
+  const scopes = [
+    {
+      groupId: '1',
+      id: 'inbox',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i innboksen
+              </span>
+            );
+          }
+        : 'Alt i innboksen',
+    },
+    {
+      groupId: '1',
+      id: 'global',
+      href: '#',
+      label: q
+        ? () => {
+            return (
+              <span>
+                <mark>{q}</mark> i hele Altinn
+              </span>
+            );
+          }
+        : 'Alt i hele Altinn',
+    },
+  ];
+
+  const suggestions = q
+    ? [
+        {
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2024',
+        },
+        {
+          groupId: '2',
+          href: 'http://www.altinn.no',
+          label: 'Skattemelding 2025',
+        },
+      ].filter((item) => item.label.toLowerCase().includes((q ?? '').toLowerCase()))
+    : [];
+
+  const autocomplete = {
+    groups: {
+      2: {
+        title: `${suggestions.length} treff i innboksen`,
+      },
+    },
+    items: [...scopes, ...suggestions],
+  };
+
+  return (
+    <Layout
+      {...args}
+      header={{
+        ...args.header,
+        search: {
+          ...args.header.search,
+          value: q,
+          onChange,
+          onClear: () => setQ(''),
+          autocomplete,
+        },
+      }}
+    />
+  );
+};
+
+export const InboxBulkMode = (args) => {
+  const [snackbars, setSnackbars] = useState([]);
+
+  const [itemsById, setItemsById] = useState({
+    1: {
+      id: '1',
+      title: 'Item 1',
+      selected: true,
+    },
+    2: {
+      id: '2',
+      title: 'Item 2',
+      selected: false,
+    },
+    3: {
+      id: '3',
+      title: 'Item 2',
+      selected: false,
+    },
+  });
+
+  const bulkMenu = [
+    {
+      id: '1',
+      icon: 'arrow-redo',
+      title: 'Del og gi tilgang',
+    },
+    {
+      id: '2',
+      icon: 'eye',
+      title: 'Marker som lest',
+    },
+    {
+      id: '3',
+      icon: 'archive',
+      title: 'Flytt til arkiv',
+    },
+    {
+      id: '4',
+      icon: 'trash',
+      title: 'Flytt til papirkurv',
+    },
+  ]?.map((item) => {
+    return {
+      ...item,
+      as: 'button',
+      onClick: () =>
+        setSnackbars((prevState) => {
+          return [
+            ...prevState,
+            {
+              message: 'Snack me',
+            },
+          ];
+        }),
+    };
+  });
+
+  const onSelect = ({ id }) => {
+    setItemsById((prevState) => {
+      return {
+        ...prevState,
+        [id]: {
+          ...prevState[id],
+          selected: !prevState[id].selected,
+        },
+      };
+    });
+  };
+
+  const items = Object.values(itemsById);
+  const itemsSelected = items?.filter((item) => item.selected);
+
+  const bulkMode = itemsSelected?.length > 0;
+  const bulkTitle = itemsSelected?.length + ' av ' + items?.length + ' valgt';
+
+  return (
+    <Layout
+      theme={bulkMode ? 'neutral' : 'company'}
+      header={{ ...header, search: bulkMode ? null : header.search }}
+      sidebar={{ hidden: bulkMode, menu }}
+      content={{ theme: 'neutral' }}
+    >
+      <ActionHeader title={bulkTitle} hidden={!bulkMode} />
+      <ListBase>
+        {items?.map((item) => {
+          return (
+            <DialogListItem
+              {...item}
+              key={item?.id}
+              title={item.title}
+              onClick={bulkMode ? () => onSelect(item) : undefined}
+              selected={item.selected}
+              select={{ checked: item?.selected, onChange: () => onSelect(item) }}
+            />
+          );
+        })}
+      </ListBase>
+      <ActionFooter>
+        {bulkMode && <ActionMenu items={bulkMenu} />}
+        {snackbars.length > 0 && snackbars?.map((item, index) => <Snackbar key={index} {...item} />)}
+      </ActionFooter>
+    </Layout>
+  );
+};

package/lib/components/Layout/Layout.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+import { LayoutBase, LayoutBody, LayoutContent, LayoutSidebar, type LayoutTheme } from '.';
+import { Footer, type FooterProps } from '../Footer';
+import { Header, type HeaderProps } from '../Header';
+import { Menu, type MenuProps } from '../Menu';
+import { useRootContext } from '../RootProvider';
+
+interface SidebarProps {
+  theme?: LayoutTheme;
+  menu?: MenuProps;
+  children?: ReactNode;
+  hidden?: boolean;
+}
+
+interface ContentProps {
+  theme?: LayoutTheme;
+}
+
+export interface LayoutProps {
+  theme?: LayoutTheme;
+  header?: HeaderProps;
+  footer?: FooterProps;
+  sidebar?: SidebarProps;
+  content?: ContentProps;
+  children: ReactNode;
+}
+
+export const Layout = ({ theme = 'global', header, footer, sidebar = {}, content = {}, children }: LayoutProps) => {
+  const { currentId } = useRootContext();
+  const { menu, ...sideRestProps } = sidebar;
+  return (
+    <LayoutBase theme={theme} currentId={currentId}>
+      {header && <Header {...header} />}
+      <LayoutBody>
+        {sidebar && (
+          <LayoutSidebar hidden={sidebar?.hidden} theme={sidebar?.theme} {...sideRestProps}>
+            {menu && <Menu {...menu} />}
+            {sidebar?.children}
+          </LayoutSidebar>
+        )}
+        <LayoutContent theme={content?.theme}>{children}</LayoutContent>
+      </LayoutBody>
+      {footer && <Footer {...footer} />}
+    </LayoutBase>
+  );
+};

package/lib/components/Layout/LayoutBase.stories.ts

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

package/lib/components/Layout/LayoutBase.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import styles from './layoutBase.module.css';
+
+export type LayoutTheme = 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
+
+export interface LayoutBaseProps {
+  theme?: LayoutTheme;
+  currentId?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Base layout container where you can set the application theme colors.
+ *
+ * Anatomy of a layout:
+ *
+ * - LayoutBase
+ *  - Header
+ *  - LayoutBody
+ *    - LayoutSidebar
+ *    - LayoutContent
+ *  - Footer
+ *
+ */
+export const LayoutBase = ({ currentId, theme, children }: LayoutBaseProps) => {
+  return (
+    <div className={styles.base} data-theme={theme} data-current-id={currentId}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Layout/LayoutBody.stories.ts

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

package/lib/components/Layout/LayoutBody.tsx

@@ -0,0 +1,16 @@
+import type { LayoutBaseProps } from './LayoutBase';
+import styles from './layoutBody.module.css';
+
+/**
+ * Body layout container. Should be a child of LayoutBase.
+ * Defines a max-width for the application body.
+ *
+ */
+
+export const LayoutBody = ({ theme, children }: LayoutBaseProps) => {
+  return (
+    <div className={styles.body} data-theme={theme}>
+      {children}
+    </div>
+  );
+};

package/lib/components/Layout/LayoutContent.stories.ts

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

package/lib/components/Layout/LayoutContent.tsx

@@ -0,0 +1,15 @@
+import type { LayoutBaseProps } from './LayoutBase';
+import styles from './layoutContent.module.css';
+
+/**
+ * Content layout container. Should be a child of LayoutBody.
+ *
+ *
+ */
+export const LayoutContent = ({ theme, children }: LayoutBaseProps) => {
+  return (
+    <main className={styles.content} data-theme={theme}>
+      {children}
+    </main>
+  );
+};

package/lib/components/Layout/LayoutSidebar.stories.ts

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

package/lib/components/Layout/LayoutSidebar.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { LayoutTheme } from './LayoutBase';
+import styles from './layoutSidebar.module.css';
+
+/**
+ * Sidebar layout container. Should be a child of LayoutBody.
+ *
+ * Will be hidden on small screens.
+ */
+
+export interface LayoutSidebarProps {
+  theme?: LayoutTheme;
+  hidden?: boolean;
+  children?: ReactNode;
+}
+
+export const LayoutSidebar = ({ theme, hidden = false, children }: LayoutSidebarProps) => {
+  return (
+    <aside className={styles.sidebar} data-theme={theme} aria-hidden={hidden}>
+      {children}
+    </aside>
+  );
+};

package/lib/components/Layout/layoutBase.module.css

@@ -0,0 +1,22 @@
+.base {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.base[data-theme] {
+  background-color: var(--theme-background-subtle);
+}
+
+.base[data-current-id="menu"] {
+  background-color: var(--theme-background-default);
+}
+
+@media (max-width: 1024px) {
+  .base[data-current-id="menu"] header + *,
+  .base[data-current-id="menu"] footer {
+    display: none;
+  }
+}

package/lib/components/Layout/layoutBody.module.css

@@ -0,0 +1,15 @@
+.body {
+  flex-grow: 1;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  display: flex;
+  column-gap: 2em;
+}
+
+@media (min-width: 1024px) {
+  .body {
+    padding: 0 1rem;
+  }
+}

package/lib/components/Layout/layoutContent.module.css

@@ -0,0 +1,13 @@
+.content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin: 0 auto;
+}
+
+@media (min-width: 1024px) {
+  [aria-hidden="true"] + .content {
+    padding: 0 112px;
+  }
+}

package/lib/components/Layout/layoutSidebar.module.css

@@ -0,0 +1,20 @@
+.sidebar {
+  display: none;
+}
+
+.sidebar[aria-hidden="true"] {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .sidebar {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    width: 224px;
+  }
+
+  .sidebar[aria-hidden="true"] {
+    display: none;
+  }
+}