Intro to demo

Altinn · Jan 15, 2025 · 7ba0c1e · 7ba0c1e
1 parent 9105e75
commit 7ba0c1e
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 56 deletions.
diff --git a/lib/components/GlobalMenu/BackButton.tsx b/lib/components/GlobalMenu/BackButton.tsx
@@ -1,5 +1,5 @@
-import type { ElementType } from "react";
-import { MenuItem } from "../Menu";
+import type { ElementType } from 'react';
+import { MenuItem } from '../Menu';
 
 export interface BackButtonProps {
   label: string;
@@ -8,15 +8,5 @@ export interface BackButtonProps {
 }
 
 export const BackButton = ({ label, onClick, as }: BackButtonProps) => {
-  return (
-    <MenuItem
-      size="xs"
-      id="back"
-      icon="arrow-undo"
-      theme="transparent"
-      title={label}
-      onClick={onClick}
-      as={as}
-    />
-  );
+  return <MenuItem size="xs" id="back" icon="arrow-undo" theme="transparent" title={label} onClick={onClick} as={as} />;
 };
diff --git a/lib/components/GlobalMenu/GlobalMenu.tsx b/lib/components/GlobalMenu/GlobalMenu.tsx
@@ -1,20 +1,11 @@
-"use client";
-import { useMemo, useState } from "react";
-import {
-  Menu,
-  type MenuItemGroups,
-  type MenuItemProps,
-  MenuListItem,
-} from "../Menu";
-import { type Account, AccountButton } from "./AccountButton";
-import { AccountMenu, type AccountMenuProps } from "./AccountMenu";
-import { BackButton } from "./BackButton";
-import {
-  GlobalMenuBase,
-  GlobalMenuFooter,
-  GlobalMenuHeader,
-} from "./GlobalMenuBase";
-import { LogoutButton, type LogoutButtonProps } from "./LogoutButton";
+'use client';
+import { useMemo, useState } from 'react';
+import { Menu, type MenuItemGroups, type MenuItemProps, MenuListItem } from '../Menu';
+import { type Account, AccountButton } from './AccountButton';
+import { AccountMenu, type AccountMenuProps } from './AccountMenu';
+import { BackButton } from './BackButton';
+import { GlobalMenuBase, GlobalMenuFooter, GlobalMenuHeader } from './GlobalMenuBase';
+import { LogoutButton, type LogoutButtonProps } from './LogoutButton';
 
 export interface GlobalMenuProps extends AccountMenuProps {
   items: MenuItemProps[];
@@ -35,8 +26,8 @@ export const GlobalMenu = ({
   accountSearch,
   items = [],
   groups,
-  changeLabel = "Change",
-  backLabel = "Back",
+  changeLabel = 'Change',
+  backLabel = 'Back',
   currentAccount,
   onSelectAccount,
   onClose,
@@ -95,11 +86,7 @@ export const GlobalMenu = ({
           />
         </GlobalMenuHeader>
         <MenuListItem as="div" role="separator" />
-        <Menu
-          groups={groups}
-          items={itemsWithToggle}
-          defaultItemTheme="surface"
-        />
+        <Menu groups={groups} items={itemsWithToggle} defaultItemTheme="surface" />
         {logoutButton && (
           <>
             <MenuListItem as="div" role="separator" />

diff --git a/lib/components/Page/PageMenu.tsx b/lib/components/Page/PageMenu.tsx
@@ -1,20 +1,16 @@
-import { MenuItem, type MenuItemColor, type MenuItemProps } from "..";
+import { MenuItem, type MenuItemColor, type MenuItemProps } from '..';
 
-import styles from "./pageMenu.module.css";
+import styles from './pageMenu.module.css';
 
-export type PageMenuTheme = "transparent" | "base";
+export type PageMenuTheme = 'transparent' | 'base';
 
 export interface PageMenuProps {
   theme?: PageMenuTheme;
   color?: MenuItemColor;
   items?: MenuItemProps[];
 }
 
-export const PageMenu = ({
-  theme = "transparent",
-  color,
-  items = [],
-}: PageMenuProps) => {
+export const PageMenu = ({ theme = 'transparent', color, items = [] }: PageMenuProps) => {
   return (
     <nav data-theme={theme} data-color={color} className={styles.menu}>
       <ul className={styles.list}>

diff --git a/lib/stories/Demo/docs/Default.tsx b/lib/stories/Demo/docs/Default.tsx
@@ -1,6 +1,14 @@
-import { useNavigation } from '../';
-import { Badge, Flex, Heading, PageBase, PageNav, Section, Typography } from '../../../components';
-import { Colors } from './Colors';
+import { useNavigation } from "../";
+import {
+  Badge,
+  Flex,
+  Heading,
+  PageBase,
+  PageNav,
+  Section,
+  Typography,
+} from "../../../components";
+import { Colors } from "./Colors";
 
 export const Default = () => {
   const { breadcrumbs } = useNavigation();
@@ -11,27 +19,50 @@ export const Default = () => {
       <Typography>
         <h1>Altinn UI components</h1>
         <p>
-          This package is a set of reusable components for building web applications for Altinn 3. It is not a general
-          purpose library, but a library of components that are specifically designed for the Altinn platform, to ensure
-          a consistent look and feel across all applications.
+          This package is a set of reusable components for building web
+          applications for Altinn 3. It is not a general purpose library, but a
+          library of components that are specifically designed for the Altinn
+          platform, to ensure a consistent look and feel across all
+          applications.
         </p>
         <p>
           <strong>Documentation and demos are work in progress.</strong>
         </p>
+        <h2>About this demo</h2>
+        <p>
+          The purpose of this demo is primarily to show how navigating across
+          multiple areas could work within Altinn, using the same layout and
+          basic building blocks. Design and content is limited, and might not be
+          representative of the final product.
+        </p>
+        <ul>
+          <li>
+            <a href="/?path=/story/demo--inbox&globals=theme:person">
+              Jump to demo
+            </a>
+          </li>
+        </ul>
         <h2>How to use</h2>
         <p>xxx</p>
         <h1>Layout and RootProvider</h1>
         <p>
-          Use Layout and RootProvider to establish the Altinn interface. Layout provides a global header and footer, as
-          well as an optional sidebar, while RootProvider takes care of handling global interaction patterns.
+          Use Layout and RootProvider to establish the Altinn interface. Layout
+          provides a global header and footer, as well as an optional sidebar,
+          while RootProvider takes care of handling global interaction patterns.
         </p>
         <h2>RootProvider</h2>
-        <p>Handles common interaction tasks like showing/hiding menus, triggering Snackbars, etc.</p>
+        <p>
+          Handles common interaction tasks like showing/hiding menus, triggering
+          Snackbars, etc.
+        </p>
         <ul>
           <li>Snackbar</li>
         </ul>
         <h2>Header</h2>
-        <p>The header provides ui for search and the global menu, including an account switcher.</p>
+        <p>
+          The header provides ui for search and the global menu, including an
+          account switcher.
+        </p>
         <ul>
           <li>Search</li>
           <li>Global menu</li>
@@ -45,7 +76,9 @@ export const Default = () => {
         <p>The header provides a simple ui for search and the global menu.</p>
 
         <h1>Theming and colors</h1>
-        <p>The Altinn color system is built using tokens from Designsystemet.</p>
+        <p>
+          The Altinn color system is built using tokens from Designsystemet.
+        </p>
         <h2>Primary colors</h2>
         <ul>
           <li>Accent: </li>