feat: ListItem - minor updates to api and default behaviour (#233)

* fixed link icon as chevron, made it default to not visible, and made listBase and ListItemBase into ul and li elements respectably to inform screen readers of their roles * fixed errors connected to the change in API to the list item component in this PR * prittier linting * lint * remove old usage of linkIcon * added ul around single element on story * fixed accessibility issues * pulled main * linting * lint * use id as key instead of title * remove unused import * moved onMouseEnter * removed unused import --------- Co-authored-by: Alexandra Vedeler <[email protected]> Co-authored-by: Alexandra Vedeler <[email protected]>
Altinn · Feb 7, 2025 · e6aaed0 · e6aaed0
1 parent 95162fe
commit e6aaed0
Show file tree

Hide file tree

Showing 35 changed files with 538 additions and 414 deletions.
diff --git a/README.md b/README.md
@@ -1,71 +1,75 @@
 # altinn-components
 
 The next frontend of altinn.no is developed by multiple product teams, all working toward the shared goal of delivering a seamless, unified experience for the end users — ensuring they perceive it as a single and robust product.
-This package represents a collaborative effort between designers and developers across these teams, consolidating solutions to shared challenges. 
-It provides Altinn-specific React components tailored to address the common UI needs of these specific teams.   
+This package represents a collaborative effort between designers and developers across these teams, consolidating solutions to shared challenges.
+It provides Altinn-specific React components tailored to address the common UI needs of these specific teams.
 
-Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten-frontend), [Team authorization](https://github.com/Altinn/altinn-access-management-frontend), and Team Portal.
+Today these teams are [Team Arbeidsflate](https://github.com/digdir/dialogporten-frontend), [Team Authorization](https://github.com/Altinn/altinn-access-management-frontend), and Team Portal.
 
-Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library. 
+Note that this package is specifically designed to meet the unique needs of the aforementioned teams and is not intended to serve as a general-purpose library.
 We already have the amazing [Norwegian public sector's Design System](https://designsystemet.no/), and we aim to incorporate its elements wherever it makes sense, ensuring alignment and leveraging its strengths while adapting to the specific requirements of Altinn.
 
-Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration. 
-This approach helps us align with brand guidelines and the broader vision of a unified Altinn product. 
+Currently, we do not use components from the design system _directly_ but rely on its token structure and continue to explore opportunities for deeper integration.
+This approach helps us align with brand guidelines and the broader vision of a unified Altinn product.
 
 ## Feedback and questions
-Keep in mind that this package is a work in progress and will be updated continuously. 
+
+Keep in mind that this package is a work in progress and will be updated continuously.
 If you have any feedback or questions, please reach out to us on Github.
 
 ## Installation
+
 To install the package, run the following command:
 
 ```bash
 # for npm users
 npm install @altinn/components
 # for yarn users
-yarn add @altinn/components 
+yarn add @altinn/components
 # for pnpm users
 pnpm add @altinn/components
 ```
+
 Tested with Node.js 20.x <
 
 ## Requirements
 
 `React` `>=18`in your project as a peer dependency. And `react-dom` if needed.
 
 ## Usage
+
 Wrap your application in RootProvider to enable shared context across all components. Here’s a basic setup:
 
 ```tsx
-import { RootProvider } from '@altinn/components';
+import { RootProvider } from "@altinn/components";
 
 function App() {
-  return (
-    <RootProvider>
-      { /* Your application here */ }
-    </RootProvider>
-  );
+  return <RootProvider>{/* Your application here */}</RootProvider>;
 }
 ```
 
 To use the components in your application, you need to import the components you want to use from the package. For example:
 
 ```tsx
 // example: import the Avatar component and type
-import { Avatar, type AvatarVariant } from '@altinn/components';
+import { Avatar, type AvatarVariant } from "@altinn/components";
 ```
+
 and import the css file in your application once, e.g. in your css:
+
 ```ts
-import '@altinn/altinn-components/lib/css/global.css';
+import "@altinn/altinn-components/lib/css/global.css";
 ```
-for correct `font-family` and minimal collection of resets.
 
+for correct `font-family` and minimal collection of resets.
 
 ## Documentation
+
 The documentation for the components can be found in the [Storybook](https://altinn.github.io/altinn-components)  
-Components are decorated with tags to show the current status of the component. 
+Components are decorated with tags to show the current status of the component.
 
 The tags are:
+
 - `@outdated` - The component is out of sync with latest design.
 - `@beta` - The component is in beta and is more likely to have flaws or missing features.
 - `@experimental` - The component is experimental and is work in progress. Recommended not to use.
@@ -109,4 +113,4 @@ pnpm test-storybook --watch 'MyComponent.stories.tsx'
 
 - 
 To skip the test add 'skip-test' string into the tags array for the test you want to exclude. That option is defined in the test-runner.ts file. 
-Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.
+Currently all the tests under stories/Demo and docs are excluded as the accessibility test is not needed there.
diff --git a/lib/components/AccessAreaList/AccessAreaListItem.stories.tsx b/lib/components/AccessAreaList/AccessAreaListItem.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import areaGroups from '../../../test-data/accesspackages.json';
 import { AccessPackageList } from '../AccessPackageList';
+import { ListBase } from '../List';
 import { AccessAreaListItem, type AccessAreaListItemProps } from './AccessAreaListItem';
 
 const testArea = areaGroups[1].areas[1];
@@ -59,7 +60,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AreaListItemStory: Story = {};
+export const AreaListItemStory: Story = {
+  render: (args) => (
+    <ListBase>
+      <AccessAreaListItem {...args} />
+    </ListBase>
+  ),
+};
 
 export const AllAreas = (args: AccessAreaListItemProps) => {
   const [expanded, setExpanded] = React.useState<string | null>(null);
@@ -69,25 +76,27 @@ export const AllAreas = (args: AccessAreaListItemProps) => {
         <div key={group.id} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
           <h2>{group.name}</h2>
           <p>{group.description}</p>
-          {group.areas.map((area) => (
-            <AccessAreaListItem
-              id={area.id}
-              key={area.id}
-              name={area.name}
-              icon={svgStringToComponent(area.icon, area.name)}
-              size={args.size}
-              expanded={expanded === area.id}
-              onClick={() => setExpanded((prev) => (prev === area.id ? null : area.id))}
-            >
-              {area.description && <p>{area.description}</p>}
-              <AccessPackageList
-                items={area.packages.map((p) => ({
-                  id: p.id,
-                  title: p.name,
-                }))}
-              />
-            </AccessAreaListItem>
-          ))}
+          <ListBase>
+            {group.areas.map((area) => (
+              <AccessAreaListItem
+                id={area.id}
+                key={area.id}
+                name={area.name}
+                icon={svgStringToComponent(area.icon, area.name)}
+                size={args.size}
+                expanded={expanded === area.id}
+                onClick={() => setExpanded((prev) => (prev === area.id ? null : area.id))}
+              >
+                {area.description && <p>{area.description}</p>}
+                <AccessPackageList
+                  items={area.packages.map((p) => ({
+                    id: p.id,
+                    title: p.name,
+                  }))}
+                />
+              </AccessAreaListItem>
+            ))}
+          </ListBase>
         </div>
       ))}
     </div>

diff --git a/lib/components/Bookmarks/BookmarksListItem.stories.tsx b/lib/components/Bookmarks/BookmarksListItem.stories.tsx
@@ -25,16 +25,31 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  render: (args) => (
+    <ul>
+      <BookmarksListItem {...args} />
+    </ul>
+  ),
   args: {},
 };
 
 export const CustomTitle: Story = {
+  render: (args) => (
+    <ul>
+      <BookmarksListItem {...args} />
+    </ul>
+  ),
   args: {
     title: 'Mitt lagrede søk',
   },
 };
 
 export const Expanded: Story = {
+  render: (args) => (
+    <ul>
+      <BookmarksListItem {...args} />
+    </ul>
+  ),
   args: {
     title: 'Mitt lagrede søk',
     expanded: true,
@@ -43,6 +58,11 @@ export const Expanded: Story = {
 };
 
 export const LotsOfParams: Story = {
+  render: (args) => (
+    <ul>
+      <BookmarksListItem {...args} />
+    </ul>
+  ),
   args: {
     params: [
       {

diff --git a/lib/components/Bookmarks/BookmarksSection.tsx b/lib/components/Bookmarks/BookmarksSection.tsx
@@ -26,7 +26,9 @@ export const BookmarksSection = ({
     <Section padding={6} theme="surface-hover" spacing={4} bleed>
       <Heading size="md">{title}</Heading>
       {loading ? (
-        <BookmarksListItem title={title} loading={loading} size="sm" />
+        <ListBase>
+          <BookmarksListItem title={title} loading={loading} size="sm" />
+        </ListBase>
       ) : (
         items.length > 0 && (
           <ListBase spacing="xs">