@hyphen/hyphen-components 4.4.2 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "4.4.2",
+  "version": "4.6.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Card/Card.stories.tsx

@@ -24,8 +24,10 @@ export default meta;
 
 export const OverviewCard = () => (
   <Card>
-    <Card.Header title="Card Overview" />
-    <Card.Section>
+    <Card.Header title="Card Overview" description="This is the description">
+      <Button size="sm">action</Button>
+    </Card.Header>
+    <Card.Section title="Section One">
       <p>Card content</p>
     </Card.Section>
     <Card.Section title="Section Two">Another section</Card.Section>

package/src/components/Card/components/CardHeader/CardHeader.tsx

@@ -3,51 +3,55 @@ import { Box, BoxProps } from '../../../Box/Box';
 import { Heading } from '../../../Heading/Heading';
 
 export interface CardHeaderProps extends BoxProps {
-  /**
-   * contents of the Header
-   */
-  children?: ReactNode;
-  /**
-   * Additional class names to add
-   */
-  className?: string;
   /**
    * The title of the card
    */
   title?: ReactNode;
   /**
-   * Additional props to be spread to rendered element
+   * Description of the card, or element below the title
    */
-  [x: string]: any; // eslint-disable-line
+  description?: ReactNode;
 }
 
 export const CardHeader: FC<CardHeaderProps> = ({
-  childGap = '2xs',
-  children = null,
-  className = undefined,
-  display = 'block',
-  padding = '2xl',
-  title = null,
+  children,
+  title,
+  description,
   ...restProps
 }) => {
-  const renderTitle = () =>
-    typeof title === 'string' ? (
-      <Heading size="sm" as="h4">
-        {title}
-      </Heading>
-    ) : (
-      title
-    );
-
   return (
     <Box
-      childGap={childGap}
-      display={display}
-      padding={padding}
-      className={className}
+      padding="2xl"
+      direction="row"
+      gap="2xl"
+      width="100"
+      justifyContent="space-between"
       {...restProps}
     >
-      {title && renderTitle()}
+      <Box gap="2xs">
+        {title && (
+          <>
+            {typeof title === 'string' ? (
+              <Heading size="sm" as="h4">
+                {title}
+              </Heading>
+            ) : (
+              title
+            )}
+          </>
+        )}
+        {description && (
+          <>
+            {typeof description === 'string' ? (
+              <Box fontSize={{ base: 'xs', tablet: 'sm' }} color="secondary">
+                {description}
+              </Box>
+            ) : (
+              description
+            )}
+          </>
+        )}
+      </Box>
       {children}
     </Box>
   );