@altinn/altinn-components 0.0.1

package/lib/components/Icon/index.ts

@@ -0,0 +1,5 @@
+export * from './Icon';
+export * from './SvgIcon';
+export * from './CheckboxIcon';
+export * from './RadioIcon';
+export * from './iconsMap';

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.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { MenuProps } from '../Menu';
+import { Layout } from './Layout';
+
+const menu: MenuProps = {
+  groups: {},
+  items: [
+    {
+      id: '1',
+      group: 1,
+      size: 'lg',
+      icon: 'inbox',
+      title: 'Innboks',
+      badge: '4',
+    },
+    {
+      id: '2',
+      group: 2,
+      icon: 'doc-pencil',
+      title: 'Utkast',
+    },
+    {
+      id: '3',
+      group: 2,
+      icon: 'file-checkmark',
+      selected: true,
+      title: 'Sendt',
+      badge: '2',
+    },
+    {
+      id: '4',
+      group: 3,
+      icon: 'bookmark',
+      title: 'Lagrede søk',
+      badge: '11',
+    },
+    {
+      id: '5',
+      group: 4,
+      icon: 'archive',
+      title: 'Arkivert',
+    },
+    {
+      id: '6',
+      group: 4,
+      disabled: true,
+      icon: 'trash',
+      title: 'Papirkurv',
+    },
+  ],
+};
+
+const meta = {
+  title: 'Layout/Layout',
+  component: Layout,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    header: {
+      menu: {
+        search: {
+          name: 'search',
+          placeholder: 'Søk i Altinn',
+        },
+        accounts: [
+          {
+            type: 'person',
+            name: 'Aurora Mikalsen',
+            selected: true,
+          },
+        ],
+      },
+    },
+    sidebar: {
+      menu,
+    },
+  },
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const GlobalCompany: Story = {
+  args: {
+    sidebar: {
+      menu: {
+        ...menu,
+        defaultItemColor: 'company',
+      },
+    },
+  },
+};
+
+export const GlobalPerson: Story = {
+  args: {
+    sidebar: {
+      menu: {
+        ...menu,
+        defaultItemColor: 'person',
+      },
+    },
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    theme: 'neutral',
+  },
+};
+
+export const Company: Story = {
+  args: {
+    theme: 'company',
+  },
+};
+
+export const Person: Story = {
+  args: {
+    theme: 'person',
+  },
+};

package/lib/components/Layout/Layout.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { LayoutBase, LayoutBody, LayoutContent, LayoutSidebar, type LayoutTheme } from '.';
+import { Header, type HeaderProps } from '../Header';
+import { Menu, type MenuProps } from '../Menu';
+
+interface SidebarProps {
+  theme?: LayoutTheme;
+  menu?: MenuProps;
+  children?: ReactNode;
+}
+
+interface ContentProps {
+  theme: LayoutTheme;
+}
+
+export interface LayoutProps {
+  theme: LayoutTheme;
+  header: HeaderProps;
+  sidebar: SidebarProps;
+  content: ContentProps;
+  children: ReactNode;
+}
+
+export const Layout = ({ theme = 'global', header, sidebar, content, children }: LayoutProps) => {
+  const { menu, ...sidebarProps } = sidebar;
+  return (
+    <LayoutBase theme={theme}>
+      {header && <Header search={header?.search} {...header} />}
+      <LayoutBody>
+        {sidebar && (
+          <LayoutSidebar theme={sidebar?.theme} {...sidebarProps}>
+            {menu && <Menu {...menu} />}
+            {sidebar?.children}
+          </LayoutSidebar>
+        )}
+        <LayoutContent theme={content?.theme}>{children}</LayoutContent>
+      </LayoutBody>
+    </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,30 @@
+import type { ReactNode } from 'react';
+import styles from './layout.module.css';
+
+export type LayoutTheme = 'global' | 'neutral' | 'company' | 'person';
+
+export interface LayoutBaseProps {
+  theme?: LayoutTheme;
+  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 = ({ theme, children }: LayoutBaseProps) => {
+  return (
+    <div className={styles.base} data-theme={theme}>
+      {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 './layout.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 './layout.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,16 @@
+import type { LayoutBaseProps } from './LayoutBase';
+import styles from './layout.module.css';
+
+/**
+ * Sidebar layout container. Should be a child of LayoutBody.
+ *
+ * Will be hidden on small screens.
+ */
+
+export const LayoutSidebar = ({ theme, children }: LayoutBaseProps) => {
+  return (
+    <aside className={styles.sidebar} data-theme={theme} aria-expanded="true">
+      {children}
+    </aside>
+  );
+};

package/lib/components/Layout/index.tsx

@@ -0,0 +1,4 @@
+export * from './LayoutBase';
+export * from './LayoutBody';
+export * from './LayoutContent';
+export * from './LayoutSidebar';

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

@@ -0,0 +1,63 @@
+.base {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* theme */
+
+.base[data-theme="global"] {
+  background-color: var(--neutral-background-default);
+}
+
+.base[data-theme="neutral"] {
+  background-color: var(--neutral-background-subtle);
+}
+
+.base[data-theme="person"] {
+  background-color: var(--person-background-subtle);
+}
+
+.base[data-theme="company"] {
+  background-color: var(--company-background-subtle);
+}
+
+/* body (sidebar + content ) */
+
+.body {
+  flex-grow: 1;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  display: flex;
+  column-gap: 2em;
+}
+
+@media (min-width: 1024px) {
+  .body {
+    padding: 0 1rem;
+  }
+}
+
+.content {
+  flex-grow: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar {
+  display: none;
+}
+
+@media (min-width: 1024px) {
+  .sidebar {
+    display: none;
+    width: 224px;
+  }
+
+  .sidebar[aria-expanded="true"] {
+    display: flex;
+    flex-direction: column;
+  }
+}