feat(AccessPackageListItem): Adding list-item components for access-packages and access-areas

lib/components/AccessAreaList/AccessAreaList.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ListBase, type ListTheme } from '../List';
+import { AccessAreaListItem, type AccessAreaListItemProps } from './AccessAreaListItem';
+
+export interface AccessAreaListProps {
+  items: AccessAreaListItemProps[];
+  theme?: ListTheme;
+}
+
+export const AccessAreaList = ({ items, theme }: AccessAreaListProps) => {
+  return (
+    <ListBase theme={theme} spacing="xs">
+      {items.map((item) => (
+        <AccessAreaListItem {...item} key={item.id} {...item} />
+      ))}
+    </ListBase>
+  );
+};

lib/components/AccessAreaList/AccessAreaListItem.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { AccessAreaListItem } from './AccessAreaListItem';
+
+import areaGroups from '../../../test-data/accesspackages.json';
+import { AccessPackageList } from '../AccessPackageList/AccessPackageList';
+
+const testArea = areaGroups[1].areas[1];
+
+const children = (
+  <>
+    {testArea.description && <p>{testArea.description}</p>}
+    <AccessPackageList
+      items={testArea.packages.map((p) => ({
+        id: p.id,
+        title: p.name,
+      }))}
+    />
+  </>
+);
+
+const meta = {
+  title: 'List/AccessAreaListItem',
+  component: AccessAreaListItem,
+  tags: ['autodocs'],
+  args: {
+    id: testArea.id,
+    size: 'md',
+    name: testArea.name,
+    icon: `data:image/svg+xml;base64,${btoa(testArea.icon)}`,
+    children,
+  },
+  argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+  },
+} satisfies Meta<typeof AccessAreaListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AreaListItemStory: Story = {};
+
+export const AllAreas = (args) => {
+  const [expanded, setExpanded] = React.useState<string | null>(null);
+  return (
+    <div>
+      {areaGroups.map((group) => (
+        <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={`data:image/svg+xml;base64,${btoa(area.icon)}`}
+              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>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};

lib/components/AccessAreaList/AccessAreaListItem.tsx

@@ -0,0 +1,40 @@
+import { ListItemBase, ListItemHeader } from '../List';
+import type { ListItemProps } from '../List';
+import styles from './accessAreaListItem.module.css';
+
+export interface AccessAreaListItemProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded'> {
+  id: string;
+  name: string;
+  icon: string;
+  children?: React.ReactNode;
+}
+
+export const AccessAreaListItem = ({
+  name,
+  icon,
+  size = 'md',
+  children,
+  expanded = false,
+  onClick,
+  ...props
+}: AccessAreaListItemProps) => {
+  return (
+    <ListItemBase size={size} color="subtle" expanded={expanded}>
+      <ListItemHeader
+        as="button"
+        avatar={{
+          name,
+          imageUrl: icon,
+          type: 'company',
+        }}
+        title={name}
+        size={size}
+        collapsible={true}
+        expanded={expanded}
+        onClick={onClick}
+        {...props}
+      />
+      {expanded && <div className={styles.content}>{children}</div>}
+    </ListItemBase>
+  );
+};

lib/components/AccessAreaList/accessAreaListItem.module.css

@@ -0,0 +1,4 @@
+.content {
+  padding: 0.625rem;
+  padding-top: 0;
+}

lib/components/AccessAreaList/index.ts

@@ -0,0 +1 @@
+export * from './AccessAreaListItem.tsx';

lib/components/AccessPackageList/AccessPackageList.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import areaGroups from '../../../test-data/accesspackages.json';
+import { AccessPackageList } from './AccessPackageList';
+
+const testArea = areaGroups[0].areas[1];
+
+const meta = {
+  title: 'List/AccessPackageList',
+  component: AccessPackageList,
+  tags: ['autodocs'],
+  args: {
+    items: testArea.packages.map((p) => ({
+      id: p.id,
+      title: p.name,
+    })),
+  },
+} satisfies Meta<typeof AccessPackageList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AccessPackageListStory: Story = {};

lib/components/AccessPackageList/AccessPackageList.tsx

@@ -0,0 +1,16 @@
+import { ListBase, type ListBaseProps } from '../List';
+import { AccessPackageListItem, type AccessPackageListItemProps } from './AccessPackageListItem';
+
+export interface AccessPackageListProps extends Pick<ListBaseProps, 'spacing' | 'theme'> {
+  items: AccessPackageListItemProps[];
+}
+
+export const AccessPackageList = ({ items, spacing = 'sm', ...props }: AccessPackageListProps) => {
+  return (
+    <ListBase spacing={spacing} {...props}>
+      {items.map((item) => (
+        <AccessPackageListItem {...item} key={item.id} {...item} />
+      ))}
+    </ListBase>
+  );
+};

lib/components/AccessPackageList/AccessPackageListItem.tsx

@@ -0,0 +1,28 @@
+import { ListItem, type ListItemProps } from '../List';
+
+export interface AccessPackageListItemProps
+  extends Pick<ListItemProps, 'onClick' | 'as' | 'title' | 'description' | 'size' | 'controls'> {
+  id: string;
+  icon?: string;
+}
+
+export const AccessPackageListItem = ({ as = 'button', icon, title, ...props }: AccessPackageListItemProps) => {
+  return (
+    <ListItem
+      avatar={
+        icon
+          ? {
+              imageUrl: icon,
+              type: 'company',
+              name: title || '',
+            }
+          : undefined
+      }
+      as={as}
+      size="sm"
+      color="accent"
+      title={title}
+      {...props}
+    />
+  );
+};

lib/components/AccessPackageList/index.ts

@@ -0,0 +1,2 @@
+export * from './AccessPackageListItem';
+export * from './AccessPackageList';

lib/components/ResourceList/ResourceListItem.tsx

@@ -1,23 +1,20 @@
 import { ListItem } from '../List';
-import type { ListItemSize } from '../List';
+import type { ListItemProps } from '../List';
 
-export interface ResourceListItemProps {
+export interface ResourceListItemProps extends Pick<ListItemProps, 'size' | 'controls' | 'as' | 'onClick'> {
   id: string;
   ownerName: string;
   resourceName: string;
   ownerLogoUrl?: string;
   ownerLogoUrlAlt?: string;
-  size?: ListItemSize;
-  controls?: React.ReactNode;
 }
 
 export const ResourceListItem = ({
   ownerName,
   resourceName,
   ownerLogoUrlAlt,
   ownerLogoUrl,
-  size = 'md',
-  controls,
+  ...props
 }: ResourceListItemProps) => {
   return (
     <ListItem
@@ -29,8 +26,7 @@ export const ResourceListItem = ({
       }}
       title={resourceName}
       description={ownerName}
-      size={size}
-      controls={controls}
+      {...props}
     />
   );
 };

lib/components/index.ts

@@ -27,3 +27,5 @@ export * from './Page';
 export * from './Transmission';
 export * from './Typography';
 export * from './ResourceList';
+export * from './AccessAreaList';
+export * from './AccessPackageList';