Merge pull request #111 from GetLuko/hugo/feat/cards-upgrades

Add a subheader to CardSummary
GetLuko · Aug 25, 2023 · 4c111ef · 4c111ef
2 parents 021a0fa + bdbb58c
commit 4c111ef
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 16 deletions.
diff --git a/packages/sandbox/e2e/android/screenshots/CardSummary.png b/packages/sandbox/e2e/android/screenshots/CardSummary.png
diff --git a/packages/sandbox/e2e/ios/screenshots/CardSummary.png b/packages/sandbox/e2e/ios/screenshots/CardSummary.png
diff --git a/packages/sandbox/src/app/sandbox/docs/card-summary.doc.tsx b/packages/sandbox/src/app/sandbox/docs/card-summary.doc.tsx
@@ -24,6 +24,7 @@ export const CardSummarySandbox = () => {
         <CardSummary
           appearance="primary"
           header="Header"
+          subHeader="Subheader"
           value="Value"
           iconName="Area"
           rightAction="navigate"

diff --git a/packages/streamline/package.json b/packages/streamline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getluko/streamline",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "author": "luko",
   "description": "Luko Design System using react-native for iOS and Android",
   "main": "dist/packages/streamline/index.js",

diff --git a/packages/streamline/src/components/cards/card-summary/card-summary.tsx b/packages/streamline/src/components/cards/card-summary/card-summary.tsx
@@ -19,6 +19,7 @@ export const CardSummary = (props: CardSummaryProps) => {
   const {
     appearance = 'primary',
     header,
+    subHeader,
     iconName,
     value,
     rightAction,
@@ -78,6 +79,7 @@ export const CardSummary = (props: CardSummaryProps) => {
       <CardHeader
         colors={headerColors}
         title={header}
+        subtitle={subHeader}
         isLoading={isLoading || isResolving}
         iconName={iconName}
         value={value}

diff --git a/packages/streamline/src/components/cards/card-summary/card-summary.types.ts b/packages/streamline/src/components/cards/card-summary/card-summary.types.ts
@@ -24,6 +24,10 @@ export type CardSummaryProps = Pick<
      * Title of the header.
      */
     header?: string;
+    /**
+     * Subtitle of the header.
+     */
+    subHeader?: string;
     /**
      * Card description.
      */

diff --git a/packages/streamline/src/primitives/card/card-header/card-header.tsx b/packages/streamline/src/primitives/card/card-header/card-header.tsx
@@ -13,7 +13,8 @@ import {
 } from './card-header.utils';
 
 export const CardHeader = (props: CardHeaderProps) => {
-  const { colors, iconName, title, value, rightAction, isLoading } = props;
+  const { colors, iconName, title, subtitle, value, rightAction, isLoading } =
+    props;
 
   const hasIconName = hasValidIconName(iconName);
   const hasHeader = hasValidHeader(title);
@@ -31,24 +32,35 @@ export const CardHeader = (props: CardHeaderProps) => {
         {hasIconName && !isLoading && (
           <Icon color={colors.leftIconColor} iconName={iconName} size="large" />
         )}
-        {isLoading && <Spinner color={colors.leftIconColor} />}
-        {hasHeader && (
-          <Text
-            color={colors.headerColor}
-            paddingLeft={hasIconName ? 'md' : undefined}
-            variant="body"
-          >
-            {title}
-          </Text>
-        )}
+        {isLoading ? <Spinner color={colors.leftIconColor} /> : null}
+        {hasHeader ? (
+          <Box>
+            <Text
+              color={colors.headerColor}
+              paddingLeft={hasIconName ? 'md' : undefined}
+              variant="body"
+            >
+              {title}
+            </Text>
+            {subtitle ? (
+              <Text
+                color={colors.valueColor}
+                paddingLeft={hasIconName ? 'md' : undefined}
+                variant="subBody"
+              >
+                {subtitle}
+              </Text>
+            ) : null}
+          </Box>
+        ) : null}
       </Box>
       <Box flexDirection="row" alignItems="center">
-        {hasValue && (
+        {hasValue ? (
           <Text color={colors.valueColor} variant="body">
             {value}
           </Text>
-        )}
-        {hasRightAction && (
+        ) : null}
+        {hasRightAction ? (
           <>
             <Box paddingLeft="xs" />
             <Icon
@@ -57,7 +69,7 @@ export const CardHeader = (props: CardHeaderProps) => {
               size="regular"
             />
           </>
-        )}
+        ) : null}
       </Box>
     </Box>
   );

diff --git a/packages/streamline/src/primitives/card/card-header/card-header.types.ts b/packages/streamline/src/primitives/card/card-header/card-header.types.ts
@@ -6,6 +6,10 @@ export type CardHeaderProps = {
    * Header content.
    */
   title?: string;
+  /**
+   * sub content.
+   */
+  subtitle?: string;
   /**
    * The name of the icon to display on the top left corner
    */