Merge pull request #193 from ynput/develop

Release: EntityCard priority and notifications
ynput · Oct 3, 2024 · 3a06d39 · 3a06d39
2 parents 313a1a4 + dcc6b6f
commit 3a06d39
Show file tree

Hide file tree

Showing 9 changed files with 386 additions and 303 deletions.
diff --git a/src/Dropdowns/EnumDropdown/EnumDropdown.tsx b/src/Dropdowns/EnumDropdown/EnumDropdown.tsx
@@ -15,7 +15,7 @@ export const EnumTemplate = ({ option, isSelected, isChanged, ...props }: EnumTe
   return (
     <Styled.Option
       className={clsx({ selected: isSelected, isChanged }, props.className)}
-      id={value}
+      id={String(value)}
       $color={color}
       {...props}
     >
@@ -26,20 +26,21 @@ export const EnumTemplate = ({ option, isSelected, isChanged, ...props }: EnumTe
 }
 
 export type EnumDropdownOption = {
-  value: string
+  value: string | number | boolean
   label: string
   icon?: IconType
   color?: string
 }
 
 export interface EnumDropdownProps
-  extends Omit<DropdownProps, 'options' | 'valueTemplate' | 'itemTemplate' | 'ref'> {
+  extends Omit<DropdownProps, 'value' | 'options' | 'valueTemplate' | 'itemTemplate' | 'ref'> {
   options: EnumDropdownOption[]
   colorInverse?: boolean
+  value: (string | number | boolean)[]
 }
 
 export const EnumDropdown = forwardRef<DropdownRef, EnumDropdownProps>(
-  ({ colorInverse, ...props }, ref) => {
+  ({ colorInverse, value, ...props }, ref) => {
     return (
       <Dropdown
         ref={ref}
@@ -49,6 +50,7 @@ export const EnumDropdown = forwardRef<DropdownRef, EnumDropdownProps>(
             <Styled.StyledDefaultValueTemplate
               isOpen={o}
               {...props}
+              value={value?.map((v) => String(v))}
               $color={props.isChanged ? undefined : option?.color} // use color (but not when in changed state - editor)
               className={clsx({ inverse: colorInverse })}
             >
@@ -59,6 +61,7 @@ export const EnumDropdown = forwardRef<DropdownRef, EnumDropdownProps>(
         itemTemplate={(option, isSelected) => (
           <EnumTemplate option={option} isSelected={isSelected} style={{ paddingLeft: '0.5rem' }} />
         )}
+        value={value?.map((v) => String(v))}
         {...props}
       />
     )

diff --git a/src/EntityCard/EntityCard.stories.tsx b/src/EntityCard/EntityCard.stories.tsx
@@ -1,16 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { EntityCard, EntityCardProps, PriorityType } from '.'
-import { MouseEvent, useEffect, useState } from 'react'
-import { Toolbar } from '../Layout/Toolbar'
+import { EntityCard, EntityCardProps } from '.'
+import { MouseEvent, useState } from 'react'
 import { Button } from '../Button'
-import { Panel } from '../Panels/Panel'
 import DnDTemplate from './DnD/DnDTemplate'
 import getRandomImage from '../helpers/getRandomImage'
 import styled from 'styled-components'
 import clsx from 'clsx'
 import { allUsers } from '../Dropdowns/helpers'
 import prioritiesData from './priorities.json'
 import { randomStatus, statuses } from '../Dropdowns/StatusSelect'
+import { EnumDropdownOption } from '../Dropdowns/EnumDropdown'
 
 const meta: Meta<typeof EntityCard> = {
   component: EntityCard,
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof EntityCard>
 
 interface DataProps extends EntityCardProps {}
 
-const priorities = prioritiesData as PriorityType[]
+const priorities = prioritiesData as EnumDropdownOption[]
 
 // pick 1 - 3 users randomly from the array
 const randomUsers = allUsers
@@ -38,7 +37,7 @@ const Template = ({ onActivate, ...props }: TemplateProps) => {
   const [isActive, setIsActive] = useState(false)
   return (
     <div style={{ display: 'flex', gap: 16 }}>
-      <div style={{ width: 250 }}>
+      <div style={{ width: '100%', maxWidth: 210 }}>
         <EntityCard
           isActive={isActive}
           onActivate={() => {
@@ -58,6 +57,7 @@ const StatusWrapper = styled.div`
 `
 
 const StyledCell = styled.div`
+  width: 250px;
   padding: 8px;
   background-color: var(--md-sys-color-surface-container-low);
   border: 1px solid var(--md-sys-color-outline-variant);
@@ -77,15 +77,15 @@ const StatusTemplate = (props: TemplateProps) => {
 
   const [selectedUsers, setSelectedUsers] = useState(props.users?.map((u) => u.name) || [])
   const [selectedStatus, setSelectedStatus] = useState(props.status?.name)
-  const [selectedPriority, setSelectedPriority] = useState(props.priority?.name)
+  const [selectedPriority, setSelectedPriority] = useState(props.priority?.value)
 
   const handleChange = (change: any, key: string) => {
     console.log('changed:', change, key)
   }
 
   const users = props.assigneeOptions?.filter((u) => selectedUsers.includes(u.name)) || []
   const status = statuses.find((s) => s.name === selectedStatus)
-  const priority = priorities.find((p) => p.name === selectedPriority)
+  const priority = priorities.find((p) => p.value === selectedPriority)
 
   const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
     // check if the click is editable item
@@ -167,6 +167,7 @@ const initData: DataProps = {
 export const Default: Story = {
   args: {
     ...initData,
+    notification: { comment: true },
   },
   render: Template,
 }
@@ -182,7 +183,6 @@ export const Loading: Story = {
 export const TaskStatus: Story = {
   args: {
     variant: 'status',
-    notification: undefined,
     disabled: false,
     ...initData,
     isPlayable: false,
@@ -204,6 +204,7 @@ export const ProgressView: Story = {
     statusOptions: statuses,
     statusMiddle: true,
     statusNameOnly: true,
+    isPlayable: true,
   },
   render: (args) => <StatusTemplate {...args} />,
 }

diff --git a/src/EntityCard/EntityCard.styled.ts b/src/EntityCard/EntityCard.styled.ts
@@ -22,6 +22,10 @@ const cardHoverStyles = css`
   }
 `
 
+export const Wrapper = styled.div`
+  position: relative;
+`
+
 type CardProps = {
   $statusColor?: string
 }
@@ -284,9 +288,6 @@ export const Card = styled.div<CardProps>`
   container-type: inline-size;
   /* use container query for when the card gets smaller */
   @container card (inline-size < 150px) {
-    .playable {
-      display: none;
-    }
     .title {
       .icon {
         display: none;
@@ -296,11 +297,6 @@ export const Card = styled.div<CardProps>`
       }
     }
   }
-  @container card (inline-size < 100px) {
-    .playable {
-      display: none;
-    }
-  }
 
   /* hide everything on bottom but the status icon */
   @container card (inline-size < 85px) {