feat(badge): add postion for button, tabs and card

baloise · Feb 16, 2022 · e250a99 · e250a99
1 parent 1fc58d9
commit e250a99
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 5 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -72,6 +72,10 @@ export namespace Components {
           * Name of the icon to show. If a icon is present text should be hidden.
          */
         "icon"?: string;
+        /**
+          * If `true` the badge is added to the top right corner of the card.
+         */
+        "position": 'card' | 'button' | 'tabs' | '';
         /**
           * Define the size of badge. Small is recommended for tabs.
          */
@@ -2113,6 +2117,10 @@ declare namespace LocalJSX {
           * Name of the icon to show. If a icon is present text should be hidden.
          */
         "icon"?: string;
+        /**
+          * If `true` the badge is added to the top right corner of the card.
+         */
+        "position"?: 'card' | 'button' | 'tabs' | '';
         /**
           * Define the size of badge. Small is recommended for tabs.
          */

diff --git a/packages/components/src/components/bal-badge/bal-badge.scss b/packages/components/src/components/bal-badge/bal-badge.scss
@@ -2,6 +2,7 @@
 
 bal-badge {
   position: static;
+  user-select: none;
 }
 
 .bal-badge {
@@ -30,4 +31,32 @@ bal-badge {
     width: 32px;
     height: 32px;
   }
+
+  &.has-position-card,
+  &.has-position-button,
+  &.has-position-tabs {
+    position: absolute;
+  }
+
+  &.has-position-card,
+  &.has-position-button,
+  &.has-position-tabs {
+    right: -8px;
+    top: -8px;
+
+    &.has-size-small {
+      right: -4px;
+      top: -4px;
+    }
+
+    &.has-size-large {
+      right: -12px;
+      top: -12px;
+    }
+  }
+
+  &.has-position-tabs {
+    right: 12px;
+    top: 20px;
+  }
 }
diff --git a/packages/components/src/components/bal-badge/bal-badge.tsx b/packages/components/src/components/bal-badge/bal-badge.tsx
@@ -21,6 +21,11 @@ export class Badge implements ComponentInterface {
    */
   @Prop() color: 'danger' | 'warning' | 'success' = 'danger'
 
+  /**
+   * If `true` the badge is added to the top right corner of the card.
+   */
+  @Prop() position: 'card' | 'button' | 'tabs' | '' = ''
+
   render() {
     return (
       <Host
@@ -29,6 +34,7 @@ export class Badge implements ComponentInterface {
           'has-radius-rounded': true,
           'has-text-white': true,
           [`has-background-${this.color}`]: true,
+          [`has-position-${this.position}`]: this.position !== '',
           [`has-size-${this.size}`]: this.size !== '',
         }}
       >

diff --git a/packages/components/src/components/bal-badge/stories/bal-badge.stories.ts b/packages/components/src/components/bal-badge/stories/bal-badge.stories.ts
@@ -32,3 +32,51 @@ WithIcon.args = {
   icon: 'alert',
 }
 WithIcon.parameters = { ...component.sourceCode(WithIcon) }
+
+export const CardBadge = args => ({
+  components: { ...component.components },
+  setup: () => ({ args }),
+  template: `<bal-card>
+  <bal-badge v-bind="args">42</bal-badge>
+  <bal-card-title>Title</bal-card-title>
+  <bal-card-content>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </bal-card-content>
+</bal-card>`,
+})
+CardBadge.args = {
+  color: 'danger',
+  size: '',
+  position: 'card',
+}
+CardBadge.parameters = { ...component.sourceCode(CardBadge) }
+
+export const ButtonBadge = args => ({
+  components: { ...component.components },
+  setup: () => ({ args }),
+  template: `<bal-button>
+  <bal-badge v-bind="args">42</bal-badge>
+  Button
+</bal-button>`,
+})
+ButtonBadge.args = {
+  color: 'danger',
+  size: '',
+  position: 'button',
+}
+ButtonBadge.parameters = { ...component.sourceCode(ButtonBadge) }
+
+export const TabsBadge = args => ({
+  components: { ...component.components },
+  setup: () => ({ args }),
+  template: `<bal-tabs  interface="tabs" value="tab-b">
+  <bal-tab-item value="tab-a" label="Tab A">Content of Tab A</bal-tab-item>
+  <bal-tab-item value="tab-b" label="Tab B" bubble>Content of Tab B</bal-tab-item>
+</bal-tabs>`,
+})
+TabsBadge.args = {
+  color: 'danger',
+  size: '',
+  position: 'tabs',
+}
+TabsBadge.parameters = { ...component.sourceCode(TabsBadge) }
diff --git a/packages/components/src/components/bal-card/bal-card.scss b/packages/components/src/components/bal-card/bal-card.scss
@@ -58,14 +58,19 @@ bal-card-actions {
 }
 
 bal-card {
-  & > :first-child {
+  & > :not(bal-badge):first-child {
     padding-top: 20px;
   }
 
-  & > :last-child {
+  & > :not(bal-badge):last-child {
     padding-bottom: 20px;
   }
 
+  & > bal-badge + bal-card-title,
+  & > bal-badge + bal-card-content {
+    padding-top: 20px;
+  }
+
   & > bal-card-title + bal-card-content,
   & > bal-card-subtitle + bal-card-content {
     padding-top: 20px;
@@ -82,14 +87,19 @@ bal-card {
 
 @include desktop() {
   bal-card {
-    & > :first-child {
+    & > :not(bal-badge):first-child {
       padding-top: 24px;
     }
 
-    & > :last-child {
+    & > :not(bal-badge):last-child {
       padding-bottom: 24px;
     }
 
+    & > bal-badge + bal-card-title,
+    & > bal-badge + bal-card-content {
+      padding-top: 24px;
+    }
+
     & > bal-card-title + bal-card-content,
     & > bal-card-subtitle + bal-card-content {
       padding-top: 24px;

diff --git a/packages/components/src/components/bal-tabs/components/tabs.tsx b/packages/components/src/components/bal-tabs/components/tabs.tsx
@@ -40,7 +40,7 @@ export const TabList: FunctionalComponent<TabProps> = ({
           >
             {tab.label}
           </a>
-          <span class="bubble" style={{ display: tab.hasBubble ? 'inline' : 'none' }}></span>
+          <bal-badge size="small" position="tabs" class={{ 'is-hidden': tab.hasBubble }}></bal-badge>
         </li>
       ))}
       <li class="is-right" style={{ display: action ? 'block' : 'none' }}>