@altinn/altinn-components 0.5.2 → 0.6.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-.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;
-  }
-}