lib-user: Refactor MyGroups with GroupCards (#5989)

* Refactor mock panoptes resources

* Move GroupCard

* Refactor MyGroups with GroupCardList, add GroupCardContainer

* Add MyGroup story

* Fix GroupStats propType

* Init MyGroups grid refactor for small screens

* Refactor text color for dark theme in GroupCard group displayName and TitledStat

* Fix hover effect and spacing issue

* Fix GroupCardContainer import

packages/lib-user/src/components/MyGroups/MyGroups.js

@@ -1,48 +1,48 @@
-import { arrayOf, func, shape, string } from 'prop-types'
+import { Grid, ResponsiveContext } from 'grommet'
+import { func, node } from 'prop-types'
+import { useContext } from 'react'
 
+import { ContentBox, Layout } from '@components/shared'
 import CreateGroup from './CreateGroup'
 
 const DEFAULT_HANDLER = () => true
 
 function MyGroups({
-  groups = [],
+  children,
   handleGroupCreate = DEFAULT_HANDLER
 }) {
+  const size = useContext(ResponsiveContext)
+  const columnCount = size === 'small' ? 1 : 2
+
   return (
-    <div>
-      <h3>MyGroups</h3>
-      <div>
-        {groups.map((group) => {
-          return (
-            <div key={group.id}>
-              <h4><a href={`./?groups=${group.id}`}>{group.display_name}</a></h4>
-              <span>{group.roles}</span>
-              <div>
-                <span>Classifications X</span>
-                {' | '}
-                <span>Hours Y</span>
-                {' | '}
-                <span>Members Z</span>
-                {' | '}
-                <span>Projects W</span>
-              </div>
-              <hr />
-            </div>
-          )
-        })}
-      </div>
-      <CreateGroup
-        handleGroupCreate={handleGroupCreate}
-      />
-    </div>
+    <Layout>
+      <ContentBox
+        linkLabel='Learn more about Groups'
+        linkProps={{ href: '/groups' }}
+        title='My Groups'
+        pad={{ horizontal: '60px', vertical: '30px' }}
+      >
+        <Grid
+          as='ul'
+          columns={{
+            count: columnCount,
+            size: 'auto'
+          }}
+          gap={{ row: '20px', column: '40px' }}
+          pad='none'
+        >
+          {children}
+        </Grid>
+        <CreateGroup
+          handleGroupCreate={handleGroupCreate}
+        />
+      </ContentBox>
+    </Layout>
   )
 }
 
 MyGroups.propTypes = {
-  groups: arrayOf(shape({
-    display_name: string,
-    id: string
-  })),
+  children: node,
   handleGroupCreate: func
 }
 

packages/lib-user/src/components/MyGroups/MyGroups.stories.js

@@ -0,0 +1,38 @@
+import MyGroups from './MyGroups'
+
+import GroupCard from './components/GroupCard/GroupCard'
+
+import { getActiveGroupsWithRoles } from './helpers/getActiveGroupsWithRoles'
+import { MEMBERSHIPS, USER_GROUPS } from '../../../test/mocks/panoptes'
+
+const MEMBERSHIPS_WITH_GROUPS = {
+  linked: {
+    user_groups: USER_GROUPS
+  },
+  memberships: MEMBERSHIPS
+}
+const groups = getActiveGroupsWithRoles(MEMBERSHIPS_WITH_GROUPS)
+
+export default {
+  title: 'Components/MyGroups',
+  component: MyGroups
+}
+
+export const Default = {
+  render: () => (
+    <MyGroups>
+      {groups.map(group => (
+        <GroupCard
+          key={group.id}
+          classifications={Math.floor(Math.random() * 1000)}
+          contributors={Math.floor(Math.random() * 10)}
+          displayName={group.display_name}
+          hours={Math.floor(Math.random() * 50)}
+          id={group.id}
+          projects={Math.floor(Math.random() * 10)}
+          role={group.roles[0]}
+        />
+      ))}
+    </MyGroups>
+  )
+}

packages/lib-user/src/components/MyGroups/MyGroupsContainer.js

@@ -1,7 +1,5 @@
 'use client'
 
-// This component is a work in progress. It is not intended to be imported as-is, but is currently being used for initial MyGroups local development.
-
 import { object, string } from 'prop-types'
 
 import {
@@ -18,6 +16,7 @@ import {
 import { getActiveGroupsWithRoles } from './helpers/getActiveGroupsWithRoles'
 
 import MyGroups from './MyGroups'
+import GroupCardList from './components/GroupCardList'
 
 function MyGroupsContainer({
   authClient,
@@ -65,10 +64,15 @@ function MyGroupsContainer({
   const activeGroupsWithRoles = getActiveGroupsWithRoles(membershipsWithGroups)
 
   return (
-    <MyGroups 
-      groups={activeGroupsWithRoles}
+    <MyGroups
       handleGroupCreate={handleGroupCreate}
-    />
+    >
+      <GroupCardList
+        authClient={authClient}
+        authUserId={authUser?.id}
+        groups={activeGroupsWithRoles}
+      />
+    </MyGroups>
   )
 }
 

packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.js

@@ -0,0 +1,113 @@
+import { SpacedHeading } from '@zooniverse/react-components'
+import { Anchor, Box } from 'grommet'
+import { number, string } from 'prop-types'
+import styled, { css } from 'styled-components'
+
+import { TitledStat } from '@components/shared'
+
+const StyledListItem = styled.li`
+  border-radius: 8px;
+  list-style: none;
+  
+  &:hover, &:focus-within {
+    box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.25);
+  }
+`
+
+const StyledAnchor = styled(Anchor)`
+  &:hover, &:focus {
+    text-decoration: none;
+    outline: none;
+    box-shadow: none;
+  }
+`
+
+const StyledRole = styled(Box)`
+  font-size: 9px;
+  letter-spacing: 0.9px;
+  display: flex;
+  align-items: center;
+  width: 90px;
+  line-height: normal;
+  padding: 5px 0;
+  text-transform: uppercase;
+  font-weight: bold;
+  ${props =>
+    css`
+      color: ${props.theme.global.colors.black};
+    `}
+`
+
+function GroupCard({
+  classifications = 0,
+  contributors = 0, // members
+  displayName = '',
+  hours = 0,
+  id = '',
+  projects = 0,
+  role = ''
+}) {
+  return (
+    <StyledListItem>
+      <StyledAnchor
+        href={`https://local.zooniverse.org:8080/?groups=${id}`}
+      >
+        <Box
+          pad='20px'
+        >
+          <Box
+            align='center'
+            direction='row'
+            gap='small'
+          >
+            <SpacedHeading
+              color={{ light: 'neutral-1', dark: 'accent-1' }}
+              size='16px'
+            >
+              {displayName}
+            </SpacedHeading>
+            <StyledRole
+              round='xsmall'
+              background={role === 'group_admin' ? 'neutral-2' : 'accent-1'}
+            >
+              {role === 'group_admin' ? 'Admin' : 'Member'}
+            </StyledRole>
+          </Box>
+          <Box
+            direction='row'
+            justify='between'
+          >
+            <TitledStat
+              title='Classifications'
+              value={classifications}
+            />
+            <TitledStat
+              title='Hours'
+              value={hours}
+            />
+            <TitledStat
+              title='Contributors'
+              value={contributors}
+            />
+            <TitledStat
+              title='Projects'
+              value={projects}
+            />
+          </Box>
+        </Box>
+      </StyledAnchor>
+    </StyledListItem>
+  )
+}
+
+GroupCard.propTypes = {
+  classifications: number,
+  contributors: number,
+  displayName: string,
+  hours: number,
+  id: string,
+  projects: number,
+  role: string
+}
+
+export default GroupCard

packages/lib-user/src/components/MyGroups/components/GroupCard.spec.js → packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.spec.js

@@ -1,7 +1,7 @@
 import { composeStory } from '@storybook/react'
 import { render, screen } from '@testing-library/react'
 
-import Meta, { Member, Admin } from './GroupCard.stories.js'
+import Meta, { Admin, Member } from './GroupCard.stories.js'
 import { MemberGroupCard } from './GroupCard.mock.js'
 
 describe('components > MyGroups > GroupCard', function () {

packages/lib-user/src/components/MyGroups/components/GroupCard.stories.js → packages/lib-user/src/components/MyGroups/components/GroupCard/GroupCard.stories.js

@@ -1,7 +1,7 @@
 import { Box } from 'grommet'
 
-import GroupCard from './GroupCard.js'
-import { AdminGroupCard, MemberGroupCard } from './GroupCard.mock.js'
+import GroupCard from './GroupCard'
+import { AdminGroupCard, MemberGroupCard } from './GroupCard.mock'
 
 export default {
   title: 'Components/MyGroups/GroupCard',