feat: card header support secondary size

alauda · May 10, 2022 · 45db1b0 · 45db1b0
1 parent e4efe38
commit 45db1b0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/src/card/card.component.scss b/src/card/card.component.scss
@@ -13,10 +13,16 @@ $b: aui-card;
   @include card-shadow;
 
   &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 0;
+    font-weight: use-var(font-weight-bold);
     @include text-set(xxl, main);
 
-    font-weight: use-var(font-weight-bold);
+    &--secondary {
+      @include text-set(xl);
+    }
 
     + .#{$b}__content {
       margin-top: use-var(spacing-xl);

diff --git a/src/card/helper-directives.ts b/src/card/helper-directives.ts
@@ -1,12 +1,16 @@
-import { Directive } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 
 @Directive({
   selector: '[auiCardHeader]',
   host: {
     '[class.aui-card__header]': 'true',
+    '[class.aui-card__header--secondary]': 'size === "secondary"',
   },
 })
-export class CardHeaderDirective {}
+export class CardHeaderDirective {
+  @Input()
+  size: 'default' | 'secondary' = 'default';
+}
 
 @Directive({
   selector: '[auiCardFooter]',

diff --git a/stories/card/card.stories.mdx b/stories/card/card.stories.mdx
@@ -32,6 +32,18 @@ import { CardModule } from '@alauda/ui';
           </div>
           <div auiCardFooter>footer</div>
         </aui-card>
+        <aui-card [divider]="false">
+          <div
+            auiCardHeader
+            size="secondary"
+          >
+            secondary header
+          </div>
+          <div style="line-height: 64px; background-color: #ededed;">
+            content
+          </div>
+          <div auiCardFooter>footer</div>
+        </aui-card>
       `,
     }}
   </Story>