feat(card): cards can have a hover effect and a selected background

baloise · Mar 9, 2022 · 8cc7182 · 8cc7182
1 parent cc93a3a
commit 8cc7182
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 0 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -178,6 +178,10 @@ export namespace Components {
           * If `true` a light blue border is added to the card.
          */
         "border": boolean;
+        /**
+          * If `true` the card has a hover effect.
+         */
+        "clickable": boolean;
         /**
           * Defines the color of the card.
          */
@@ -190,6 +194,10 @@ export namespace Components {
           * If `true` the card background color becomes blue.
          */
         "inverted": boolean;
+        /**
+          * If `true` the card gets a light background to indicate a selection.
+         */
+        "selected": boolean;
         /**
           * If `true` the card loses its border radius.
          */
@@ -363,6 +371,10 @@ export namespace Components {
           * If `true` a small button with a edit icon will be shown on the right.
          */
         "editable": boolean;
+        /**
+          * If `true` the text will break and the height of the item increases.
+         */
+        "multiline": boolean;
     }
     interface BalDatepicker {
         /**
@@ -2464,6 +2476,10 @@ declare namespace LocalJSX {
           * If `true` a light blue border is added to the card.
          */
         "border"?: boolean;
+        /**
+          * If `true` the card has a hover effect.
+         */
+        "clickable"?: boolean;
         /**
           * Defines the color of the card.
          */
@@ -2476,6 +2492,10 @@ declare namespace LocalJSX {
           * If `true` the card background color becomes blue.
          */
         "inverted"?: boolean;
+        /**
+          * If `true` the card gets a light background to indicate a selection.
+         */
+        "selected"?: boolean;
         /**
           * If `true` the card loses its border radius.
          */
@@ -2656,6 +2676,10 @@ declare namespace LocalJSX {
           * If `true` a small button with a edit icon will be shown on the right.
          */
         "editable"?: boolean;
+        /**
+          * If `true` the text will break and the height of the item increases.
+         */
+        "multiline"?: boolean;
         /**
           * Emitted when the edit button loses focus.
          */
@@ -2901,6 +2925,14 @@ declare namespace LocalJSX {
           * Triggers when a file is added or removed.
          */
         "onBalChange"?: (event: CustomEvent<File[]>) => void;
+        /**
+          * Triggers when a file is added.
+         */
+        "onBalFilesAdded"?: (event: CustomEvent<File[]>) => void;
+        /**
+          * Triggers when a file is removed.
+         */
+        "onBalFilesRemoved"?: (event: CustomEvent<File[]>) => void;
         /**
           * Triggers when a file is rejected due to not allowed MIME-Type and so on.
          */

diff --git a/packages/components/src/components/bal-card/bal-card.scss b/packages/components/src/components/bal-card/bal-card.scss
@@ -47,6 +47,17 @@ bal-card,
   &.is-danger {
     background-color: $danger;
   }
+
+  &.is-clickable {
+    &:active,
+    &:hover {
+      box-shadow: $shadow-hover;
+    }
+  }
+
+  &.is-selected {
+    background: $blue-0;
+  }
 }
 
 bal-card-title,

diff --git a/packages/components/src/components/bal-card/bal-card.tsx b/packages/components/src/components/bal-card/bal-card.tsx
@@ -26,6 +26,16 @@ export class BalCard {
    */
   @Prop() inverted = false
 
+  /**
+   * If `true` the card has a hover effect.
+   */
+  @Prop() clickable = false
+
+  /**
+   * If `true` the card gets a light background to indicate a selection.
+   */
+  @Prop() selected = false
+
   /**
    * Defines the color of the card.
    */
@@ -44,6 +54,8 @@ export class BalCard {
           'has-border': this.border,
           'is-inverted': this.inverted,
           'has-shadow': !this.flat,
+          'is-clickable': this.clickable,
+          'is-selected': this.selected,
           'has-radius-large': !this.square,
         }}
       >

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
@@ -294,3 +294,20 @@ export const Service = args => ({
 </bal-card>`,
 })
 Service.parameters = { ...component.sourceCode(Service) }
+
+export const ClickableAndSelected = args => ({
+  components: { ...component.components, BalButton, BalHeading },
+  setup: () => ({ args }),
+  template: `<bal-card v-bind="args">
+  <bal-card-content>
+    <div class="is-flex is-align-items-center is-justify-content-start is-flex-direction-column">
+      <bal-heading level="h4">Hover me</bal-heading>
+    </div>
+    </bal-card-content>
+</bal-card>`,
+})
+ClickableAndSelected.args = {
+  clickable: true,
+  selected: true,
+}
+ClickableAndSelected.parameters = { ...component.sourceCode(ClickableAndSelected) }
diff --git a/packages/components/src/styles/helpers/shadow.scss b/packages/components/src/styles/helpers/shadow.scss
@@ -1,3 +1,7 @@
 .has-shadow {
   box-shadow: $shadow;
 }
+
+.has-shadow-hover {
+  box-shadow: $shadow-hover;
+}