fix(card): subtitle can have diffrent color and be bold

baloise · Mar 29, 2022 · be858a8 · be858a8 · vercel · Mar 29, 2022
1 parent 1342354
commit be858a8
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -242,6 +242,14 @@ export namespace Components {
     interface BalCardContent {
     }
     interface BalCardSubtitle {
+        /**
+          * If `true` the card text color is bold.
+         */
+        "bold": boolean;
+        /**
+          * If `true` the card text color becomes white.
+         */
+        "color": Props.BalHeadingColor;
         /**
           * If `true` the card text color becomes white.
          */
@@ -2628,6 +2636,14 @@ declare namespace LocalJSX {
     interface BalCardContent {
     }
     interface BalCardSubtitle {
+        /**
+          * If `true` the card text color is bold.
+         */
+        "bold"?: boolean;
+        /**
+          * If `true` the card text color becomes white.
+         */
+        "color"?: Props.BalHeadingColor;
         /**
           * If `true` the card text color becomes white.
          */

diff --git a/packages/components/src/components/bal-card/bal-card-subtitle/bal-card-subtitle.tsx b/packages/components/src/components/bal-card/bal-card-subtitle/bal-card-subtitle.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, h, Prop } from '@stencil/core'
+import { Props } from '../../../props'
 
 @Component({
   tag: 'bal-card-subtitle',
@@ -9,10 +10,20 @@ export class CardSubtitle {
    */
   @Prop() inverted = false
 
+  /**
+   * If `true` the card text color is bold.
+   */
+  @Prop() bold = false
+
+  /**
+   * If `true` the card text color becomes white.
+   */
+  @Prop() color: Props.BalHeadingColor = 'info'
+
   render() {
     return (
       <Host class="mx-5">
-        <bal-heading subtitle level="h5" space="none" color="info" inverted={this.inverted}>
+        <bal-heading subtitle={!this.bold} level="h5" space="none" color={this.color} inverted={this.inverted}>
           <slot></slot>
         </bal-heading>
       </Host>

diff --git a/packages/components/src/components/bal-card/stories/bal-card.stories.ts b/packages/components/src/components/bal-card/stories/bal-card.stories.ts
@@ -42,6 +42,7 @@ export const Basic = args => ({
   components: { ...component.components, BalButton, BalHeading },
   setup: () => ({ args }),
   template: `<bal-card v-bind="args">
+  <bal-card-subtitle bold color="blue">Your Product</bal-card-subtitle>
   <bal-card-title>BaloiseCombi</bal-card-title>
   <bal-card-subtitle>Police number 70/2.937.458</bal-card-subtitle>
   <bal-card-content>

diff --git a/packages/components/src/props.d.ts b/packages/components/src/props.d.ts
@@ -28,7 +28,7 @@ export namespace Props {
   export type BalCloseSize = 'small' | 'large' | 'medium' | ''
 
   export type BalHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
-  export type BalHeadingColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | ''
+  export type BalHeadingColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | '' | 'blue'
 
   export type BalHintPlacement = 'left' | 'right'
   export type BalIconColor = BalButtonColor | 'white'