Expanded section list items

src/components/section/SectionItem/SectionListItem.tsx

@@ -1,12 +1,14 @@
 import classNames from 'classnames'
 import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight'
+import IconArrowForwardIos from '@aboutbits/react-material-icons/dist/IconArrowForwardIos'
 import { ReactNode, forwardRef } from 'react'
 import {
   LinkComponentProps,
   useLinkComponent,
   useTheme,
 } from '../../../framework'
 import { ClassNameProps } from '../../types'
+import { SectionListItemLayout } from '../types'
 
 export type SectionListItemProps = ClassNameProps & {
   children?: ReactNode
@@ -28,67 +30,96 @@ export type SectionListItemButtonProps = ClassNameProps & {
    */
   onClick: () => void
   children?: ReactNode
+  variant?: SectionListItemLayout
+  badge?: ReactNode
 }
 
 export const SectionListItemButton = forwardRef<
   HTMLButtonElement,
   SectionListItemButtonProps
 >(function SectionListItemButton(
-  { children, onClick, className, ...props },
+  {
+    children,
+    onClick,
+    className,
+    variant = SectionListItemLayout.Compact,
+    badge,
+    ...props
+  },
   ref,
 ) {
   const { section } = useTheme()
 
+  const Icon =
+    variant === SectionListItemLayout.Compact
+      ? IconKeyboardArrowRight
+      : IconArrowForwardIos
+
   return (
     <button
       onClick={onClick}
       className={classNames(
-        section.listItemButton.base,
         section.listItem.base,
+        section.listItem.layout[variant],
+        section.listItemButton.base,
         className,
       )}
       ref={ref}
       {...props}
     >
       {children}
-      <IconKeyboardArrowRight
-        width="24"
-        height="24"
-        className={section.listItemButton.icon}
-      />
+      <div className={section.listItem.rightAlignedContainer.base}>
+        {badge}
+        <Icon width="24" height="24" className={section.listItem.icon} />
+      </div>
     </button>
   )
 })
 
-export type SectionListItemLinkProps = LinkComponentProps
+export type SectionListItemLinkProps = LinkComponentProps & {
+  variant?: SectionListItemLayout
+  badge?: ReactNode
+}
 
 export const SectionListItemLink = forwardRef<
   HTMLAnchorElement,
   SectionListItemLinkProps
 >(function SectionListItemLink(
-  { children, className, internal = true, ...props },
+  {
+    variant = SectionListItemLayout.Compact,
+    badge,
+    children,
+    className,
+    internal = true,
+    ...props
+  },
   ref,
 ) {
   const LinkComponent = useLinkComponent()
   const { section } = useTheme()
 
+  const Icon =
+    variant === SectionListItemLayout.Compact
+      ? IconKeyboardArrowRight
+      : IconArrowForwardIos
+
   return (
     <LinkComponent
       className={classNames(
-        section.listItemLink.base,
         section.listItem.base,
+        section.listItem.layout[variant],
+        section.listItemLink.base,
         className,
       )}
       internal={internal}
       ref={ref}
       {...props}
     >
       {children}
-      <IconKeyboardArrowRight
-        width="24"
-        height="24"
-        className={section.listItemButton.icon}
-      />
+      <div className={section.listItem.rightAlignedContainer.base}>
+        {badge}
+        <Icon width="24" height="24" className={section.listItem.icon} />
+      </div>
     </LinkComponent>
   )
 })

src/components/section/theme.ts

@@ -2,8 +2,9 @@ import { Size } from '../types'
 import { SectionContentLayout } from './Section/SectionContent/types'
 import { SectionHeaderRowLayout } from './SectionHeader/SectionHeaderRow/types'
 import { SectionHeaderSpacerSize } from './SectionHeader/SectionHeaderSpacer/types'
+import { SectionListItemLayout } from './types'
 
-export default {
+const className = {
   section: {
     base: '',
   },
@@ -30,7 +31,16 @@ export default {
     base: 'grid xl:grid-cols-2 xl:gap-x-11 gap-y-6 px-4 md:px-6 pt-4 md:pt-6 pb-8 md:pb-9',
   },
   listItem: {
-    base: 'flex border-b border-neutral-200 last:border-0 items-center min-h-[3.5rem] bg-white px-4 md:px-6',
+    base: 'flex border-b border-neutral-200 last:border-0 items-center bg-white px-4 md:px-6',
+    layout: {
+      [SectionListItemLayout.Compact]: 'py-4 min-h-[1.5rem]',
+      [SectionListItemLayout.Expanded]:
+        'py-4 min-h-[6.5rem] first:pt-6 first:min-h-[7rem] last:pb-6 last:min-h-[7rem]',
+    },
+    icon: 'fill-current mt-auto',
+    rightAlignedContainer: {
+      base: 'flex flex-col items-end self-stretch justify-between',
+    },
   },
   listItemWithAction: {
     base: 'justify-between space-x-4',
@@ -40,7 +50,6 @@ export default {
   },
   listItemButton: {
     base: 'block w-full focus:outline-neutral-800 justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
-    icon: 'fill-current',
   },
   listItemLink: {
     base: 'block focus:outline-neutral-800 justify-between space-x-4 hover:bg-neutral-100 active:bg-neutral-100',
@@ -103,3 +112,5 @@ export default {
     base: 'mt-4',
   },
 }
+
+export default className

src/components/section/types.ts

@@ -0,0 +1,4 @@
+export enum SectionListItemLayout {
+  Compact = 'COMPACT',
+  Expanded = 'EXPANDED',
+}

src/examples/List.stories.tsx

@@ -27,9 +27,11 @@ import {
   SelectField,
   Tone,
   Option,
+  SectionListItemLink,
 } from '../components'
 import { SearchField } from '../components/form/SearchField'
 import { useFilter } from '../components/util/useFilter'
+import { SectionListItemLayout } from '../components/section/types'
 
 const meta = {
   component: SectionContentList,
@@ -66,7 +68,15 @@ function useMockedList(numberOfTotalItems: number) {
   )
 }
 
-const List = ({ numberOfTotalItems = 5 }: { numberOfTotalItems?: number }) => {
+const List = ({
+  numberOfTotalItems = 5,
+  variant,
+  links = false,
+}: {
+  numberOfTotalItems?: number
+  variant?: SectionListItemLayout
+  links?: boolean
+}) => {
   const content = useMockedList(numberOfTotalItems)
   return (
     <Section>
@@ -79,14 +89,21 @@ const List = ({ numberOfTotalItems = 5 }: { numberOfTotalItems?: number }) => {
           />
         ) : (
           <SectionContentList>
-            {content.map((item) => (
-              <SectionListItemButton
-                key={item.name}
-                onClick={action('onItemClick')}
-              >
-                {`${item.name} (${item.role} - ${item.department})`}
-              </SectionListItemButton>
-            ))}
+            {content.map((item) =>
+              links ? (
+                <SectionListItemLink key={item.name} href="#" variant={variant}>
+                  {`${item.name} (${item.role} - ${item.department})`}
+                </SectionListItemLink>
+              ) : (
+                <SectionListItemButton
+                  key={item.name}
+                  onClick={action('onItemClick')}
+                  variant={variant}
+                >
+                  {`${item.name} (${item.role} - ${item.department})`}
+                </SectionListItemButton>
+              ),
+            )}
           </SectionContentList>
         )}
       </SectionContainer>
@@ -98,6 +115,14 @@ export const SimpleList: Story = () => <List />
 
 export const EmptySimpleList: Story = () => <List numberOfTotalItems={0} />
 
+export const ExpandedButtonsList: Story = () => (
+  <List variant={SectionListItemLayout.Expanded} />
+)
+
+export const ExpandedLinksList: Story = () => (
+  <List links variant={SectionListItemLayout.Expanded} />
+)
+
 /**
  * The following example shows how multiple section components and the in memory pagination are used to create an overview list with filters.
  */