feat: add profile types filtering to new map

packages/components/src/CardButton/CardButton.stories.tsx

@@ -0,0 +1,16 @@
+import { CardButton } from './CardButton'
+
+import type { Meta, StoryFn } from '@storybook/react'
+
+export default {
+  title: 'Components/CardButton',
+  component: CardButton,
+} as Meta<typeof CardButton>
+
+export const Basic: StoryFn<typeof CardButton> = () => (
+  <div style={{ width: '300px' }}>
+    <CardButton>
+      <div style={{ padding: '20px' }}>Basic Implementation</div>
+    </CardButton>
+  </div>
+)

packages/components/src/CardButton/CardButton.tsx

@@ -0,0 +1,43 @@
+import { Card } from 'theme-ui'
+
+import type { BoxProps, ThemeUIStyleObject } from 'theme-ui'
+
+export interface IProps extends BoxProps {
+  children: React.ReactNode
+  extraSx?: ThemeUIStyleObject | undefined
+}
+
+export const CardButton = (props: IProps) => {
+  const { children, extraSx } = props
+
+  return (
+    <Card
+      sx={{
+        alignItems: 'center',
+        alignContent: 'center',
+        marginTop: '2px',
+        borderRadius: 2,
+        padding: 0,
+        transition: 'borderBottom 0.2s, transform 0.2s',
+        '&:hover': {
+          animationSpeed: '0.3s',
+          cursor: 'pointer',
+          marginTop: '0',
+          borderBottom: '4px solid',
+          transform: 'translateY(-2px)',
+          borderColor: 'black',
+        },
+        '&:active': {
+          transform: 'translateY(1px)',
+          borderBottom: '3px solid',
+          borderColor: 'grey',
+          transition: 'borderBottom 0.2s, transform 0.2s, borderColor 0.2s',
+        },
+        ...extraSx,
+      }}
+      {...props}
+    >
+      {children}
+    </Card>
+  )
+}

packages/components/src/CardList/CardList.tsx

@@ -30,16 +30,15 @@ export const CardList = (props: IProps) => {
 
   const isListEmpty = displayItems.length === 0
   const hasListLoaded = list
-  const results = `${displayItems.length} ${
-    displayItems.length == 1 ? 'result' : 'results'
-  }`
+  const results = `${displayItems.length} result${displayItems.length == 1 ? '' : 's'} in view`
 
   return (
     <Flex
       data-cy={`CardList-${dataCy}`}
       sx={{
         flexDirection: 'column',
         gap: 2,
+        padding: 2,
       }}
     >
       {!hasListLoaded && <Loader />}
@@ -49,6 +48,7 @@ export const CardList = (props: IProps) => {
             sx={{
               justifyContent: 'space-between',
               paddingX: 2,
+              paddingTop: 2,
               fontSize: 2,
             }}
           >

packages/components/src/CardListItem/CardListItem.tsx

@@ -1,5 +1,6 @@
-import { Card, Flex } from 'theme-ui'
+import { Flex } from 'theme-ui'
 
+import { CardButton } from '../CardButton/CardButton'
 import { InternalLink } from '../InternalLink/InternalLink'
 import { CardDetailsFallback } from './CardDetailsFallback'
 import { CardDetailsMemberProfile } from './CardDetailsMemberProfile'
@@ -26,30 +27,7 @@ export const CardListItem = ({ item }: IProps) => {
         padding: 2,
       }}
     >
-      <Card
-        sx={{
-          marginTop: '2px',
-          borderRadius: 2,
-          padding: 0,
-          '&:hover': {
-            animationSpeed: '0.3s',
-            cursor: 'pointer',
-            marginTop: '0',
-            borderBottom: '4px solid',
-            transform: 'translateY(-2px)',
-            transition: 'borderBottom 0.2s, transform 0.2s',
-            borderColor: 'black',
-          },
-          '&:active': {
-            transform: 'translateY(1px)',
-            borderBottom: '3px solid',
-            borderColor: 'grey',
-            transition: 'borderBottom 0.2s, transform 0.2s, borderColor 0.2s',
-          },
-          alignItems: 'stretch',
-          alignContent: 'stretch',
-        }}
-      >
+      <CardButton>
         <Flex sx={{ gap: 2, alignItems: 'stretch', alignContent: 'stretch' }}>
           {isMember && <CardDetailsMemberProfile creator={creator} />}
 
@@ -59,7 +37,7 @@ export const CardListItem = ({ item }: IProps) => {
 
           {!creator && <CardDetailsFallback item={item} />}
         </Flex>
-      </Card>
+      </CardButton>
     </InternalLink>
   )
 }

packages/components/src/DonationRequest/DonationRequest.tsx

@@ -86,7 +86,7 @@ export const DonationRequest = (props: IProps) => {
 
       <Flex
         sx={{
-          backgroundColor: 'offwhite',
+          backgroundColor: 'offWhite',
           borderTop: '2px solid',
           flexDirection: ['column', 'row'],
           padding: 2,

packages/components/src/FilterList/FilterList.stories.tsx

@@ -0,0 +1,107 @@
+import { useState } from 'react'
+
+import { FilterList } from './FilterList'
+
+import type { Meta, StoryFn } from '@storybook/react'
+import type { ProfileTypeName } from 'oa-shared'
+
+export default {
+  title: 'Components/FilterList',
+  component: FilterList,
+} as Meta<typeof FilterList>
+
+const availableFilters = [
+  {
+    label: 'Workspace',
+    type: 'workspace' as ProfileTypeName,
+  },
+  {
+    label: 'Machine Builder',
+    type: 'machine-builder' as ProfileTypeName,
+  },
+  {
+    label: 'Collection Point',
+    type: 'collection-point' as ProfileTypeName,
+  },
+  {
+    label: 'Want to get started',
+    type: 'member' as ProfileTypeName,
+  },
+]
+
+export const Basic: StoryFn<typeof FilterList> = () => {
+  const [activeFilters, setActiveFilters] = useState<string[]>([])
+
+  const onFilterChange = (label: string) => {
+    const filter = label.toLowerCase()
+    const isFilterPresent = !!activeFilters.find(
+      (existing) => existing === filter,
+    )
+    if (isFilterPresent) {
+      return setActiveFilters(activeFilters.filter((f) => f !== filter))
+    }
+    return setActiveFilters((existing) => [...existing, filter])
+  }
+
+  return (
+    <div style={{ maxWidth: '500px' }}>
+      <FilterList
+        activeFilters={activeFilters}
+        availableFilters={availableFilters}
+        onFilterChange={onFilterChange}
+      />
+    </div>
+  )
+}
+
+export const OnlyOne: StoryFn<typeof FilterList> = () => {
+  const [activeFilters, setActiveFilters] = useState<string[]>([])
+
+  const onFilterChange = (label: string) => {
+    const filter = label.toLowerCase()
+    const isFilterPresent = !!activeFilters.find(
+      (existing) => existing === filter,
+    )
+    if (isFilterPresent) {
+      return setActiveFilters(activeFilters.filter((f) => f !== filter))
+    }
+    return setActiveFilters((existing) => [...existing, filter])
+  }
+
+  return (
+    <div style={{ maxWidth: '500px' }}>
+      <FilterList
+        activeFilters={activeFilters}
+        availableFilters={[availableFilters[0]]}
+        onFilterChange={onFilterChange}
+      />
+      (Shouldn't see anything, only renders for two or more)
+    </div>
+  )
+}
+
+export const OnlyTwo: StoryFn<typeof FilterList> = () => {
+  const [activeFilters, setActiveFilters] = useState<string[]>([])
+
+  const onFilterChange = (label: string) => {
+    const filter = label.toLowerCase()
+    const isFilterPresent = !!activeFilters.find(
+      (existing) => existing === filter,
+    )
+    if (isFilterPresent) {
+      return setActiveFilters(activeFilters.filter((f) => f !== filter))
+    }
+    return setActiveFilters((existing) => [...existing, filter])
+  }
+
+  return (
+    <div style={{ maxWidth: '500px' }}>
+      <FilterList
+        activeFilters={activeFilters}
+        availableFilters={[availableFilters[0], availableFilters[1]]}
+        onFilterChange={onFilterChange}
+      />
+      (No buttons rendered)
+    </div>
+  )
+}