move header outside main card content

pluralsh · Dec 17, 2024 · 08b45d6 · 08b45d6
1 parent 113f24d
commit 08b45d6
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 43 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -12,6 +12,7 @@ import {
   toFillLevel,
   useFillLevel,
 } from './contexts/FillLevelContext'
+import WrapWithIf from './WrapWithIf'
 
 const CARD_SEVERITIES = [
   'info',
@@ -38,6 +39,7 @@ type BaseCardProps = {
     size?: 'medium' | 'large'
     content?: ReactNode
     headerProps?: ComponentProps<'div'>
+    outerProps?: ComponentProps<'div'>
   }
 }
 
@@ -137,24 +139,36 @@ const getBgColor = ({
 }
 
 const HeaderSC = styled.div<{
-  fillLevel: CardFillLevel
-  selected: boolean
-  size: 'medium' | 'large'
-}>(({ theme, fillLevel, selected, size }) => ({
-  ...theme.partials.text.overline,
-  display: 'flex',
-  alignItems: 'center',
-  color: theme.colors['text-xlight'],
-  borderBottom: `1px solid ${theme.colors[fillToNeutralBorderC[fillLevel]]}`,
-  backgroundColor: selected
-    ? theme.colors[fillToNeutralSelectedBgC[fillLevel]]
-    : getBgColor({ theme, fillLevel }),
-  height: size === 'large' ? 48 : 40,
-  padding: `0 ${theme.spacing.medium}px`,
-  overflow: 'hidden',
-}))
+  $fillLevel: CardFillLevel
+  $selected: boolean
+  $size: 'medium' | 'large'
+  $cornerSize: CornerSize
+}>(
+  ({
+    theme,
+    $fillLevel: fillLevel,
+    $selected: selected,
+    $size: size,
+    $cornerSize: cornerSize,
+  }) => ({
+    ...theme.partials.text.overline,
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.colors['text-xlight'],
+    border: `1px solid ${theme.colors[fillToNeutralBorderC[fillLevel]]}`,
+    borderBottom: 'none',
+    borderRadius: `${theme.borderRadiuses[cornerSize]}px ${theme.borderRadiuses[cornerSize]}px 0 0`,
+    backgroundColor: selected
+      ? theme.colors[fillToNeutralSelectedBgC[fillLevel]]
+      : getBgColor({ theme, fillLevel }),
+    height: size === 'large' ? 48 : 40,
+    padding: `0 ${theme.spacing.medium}px`,
+    overflow: 'hidden',
+  })
+)
 
 const CardSC = styled(Div)<{
+  $hasHeader: boolean
   $fillLevel: CardFillLevel
   $cornerSize: CornerSize
   $severity: Severity
@@ -164,6 +178,7 @@ const CardSC = styled(Div)<{
 }>(
   ({
     theme,
+    $hasHeader,
     $fillLevel: fillLevel,
     $cornerSize: cornerSize,
     $severity: severity,
@@ -172,8 +187,16 @@ const CardSC = styled(Div)<{
     $disabled: disabled,
   }) => ({
     ...theme.partials.reset.button,
-    border: `1px solid ${theme.colors[fillToNeutralBorderC[fillLevel]]}`,
-    borderRadius: theme.borderRadiuses[cornerSize],
+    border: `1px solid ${
+      theme.colors[
+        fillToNeutralBorderC[
+          $hasHeader ? toFillLevel(fillLevel + 1) : fillLevel
+        ]
+      ]
+    }`,
+    borderRadius: $hasHeader
+      ? `0 0 ${theme.borderRadiuses[cornerSize]}px ${theme.borderRadiuses[cornerSize]}px`
+      : theme.borderRadiuses[cornerSize],
     backgroundColor: selected
       ? theme.colors[fillToNeutralSelectedBgC[fillLevel]]
       : getBgColor({ theme, fillLevel }),
@@ -214,7 +237,13 @@ const Card = forwardRef(
     }: CardProps,
     ref
   ) => {
-    const { size, content: headerContent, headerProps } = header ?? {}
+    const hasHeader = !!header
+    const {
+      size,
+      content: headerContent,
+      headerProps,
+      outerProps,
+    } = header ?? {}
 
     const mainFillLevel = useDecideFillLevel({ fillLevel })
     const headerFillLevel = useDecideFillLevel({ fillLevel: mainFillLevel + 1 })
@@ -226,33 +255,40 @@ const Card = forwardRef(
 
     return (
       <FillLevelProvider value={mainFillLevel}>
-        <CardSC
-          ref={ref}
-          $cornerSize={cornerSize}
-          $fillLevel={mainFillLevel}
-          $severity={cardSeverity}
-          $selected={selected}
-          $clickable={clickable}
-          {...(clickable && {
-            forwardedAs: 'button',
-            type: 'button',
-            'data-clickable': 'true',
-          })}
-          $disabled={clickable && disabled}
-          {...props}
+        <WrapWithIf
+          condition={hasHeader}
+          wrapper={<div {...outerProps} />}
         >
           {header && (
             <HeaderSC
-              fillLevel={headerFillLevel}
-              selected={selected}
-              size={size}
+              $fillLevel={headerFillLevel}
+              $selected={selected}
+              $size={size}
+              $cornerSize={cornerSize}
               {...headerProps}
             >
               {headerContent}
             </HeaderSC>
           )}
-          {children}
-        </CardSC>
+          <CardSC
+            ref={ref}
+            $cornerSize={cornerSize}
+            $fillLevel={mainFillLevel}
+            $severity={cardSeverity}
+            $selected={selected}
+            $clickable={clickable}
+            $hasHeader={hasHeader}
+            {...(clickable && {
+              forwardedAs: 'button',
+              type: 'button',
+              'data-clickable': 'true',
+            })}
+            $disabled={clickable && disabled}
+            {...props}
+          >
+            {children}
+          </CardSC>
+        </WrapWithIf>
       </FillLevelProvider>
     )
   }

diff --git a/src/stories/Card.stories.tsx b/src/stories/Card.stories.tsx
@@ -1,12 +1,11 @@
-import { Flex } from 'honorable'
 import { type ComponentProps, type ReactNode } from 'react'
 
 import { useTheme } from 'styled-components'
 
 import { type FillLevel } from '../components/contexts/FillLevelContext'
 
 import type { CardProps } from '../components/Card'
-import { Card, InfoOutlineIcon, Tooltip } from '../index'
+import { Card, Flex, InfoOutlineIcon, Tooltip } from '../index'
 
 export default {
   title: 'Card',
@@ -72,7 +71,6 @@ function Template({
               }}
             >
               <Flex
-                caption
                 alignItems="center"
                 height={height}
                 justifyContent="center"
@@ -96,7 +94,8 @@ function FillLevelTemplate({
   disabled,
   width,
   severity,
-}: { width: number } & CardProps) {
+  headerContent,
+}: { width: number; headerContent: ReactNode } & CardProps) {
   const theme = useTheme()
 
   return (
@@ -106,15 +105,19 @@ function FillLevelTemplate({
         flexWrap="wrap"
         gap="xxlarge"
       >
-        {fillLevels.map((fillLevel) => (
+        {fillLevels.map((fillLevel, index) => (
           <Card
+            key={index}
             clickable={clickable}
             selected={selected}
             disabled={disabled}
             width={width}
             padding="medium"
             fillLevel={fillLevel}
             severity={severity}
+            header={{
+              content: headerContent,
+            }}
           >
             fillLevel=
             {fillLevel === undefined ? 'undefined' : `"${fillLevel}"`}
@@ -178,4 +181,13 @@ WithFillLevelContext.args = {
   clickable: false,
   disabled: false,
   width: 400,
+  headerSize: 'medium',
+  headerContent: (
+    <Flex justifyContent="space-between">
+      <p>Header</p>
+      <Tooltip label="Tooltip">
+        <InfoOutlineIcon />
+      </Tooltip>
+    </Flex>
+  ),
 }