feat(close): add new component

packages/components/src/components.d.ts

@@ -63,6 +63,20 @@ export namespace Components {
     }
     interface BalApp {
     }
+    interface BalBadge {
+        /**
+          * Define the alert color for the badge.
+         */
+        "color": 'danger' | 'warning' | 'success';
+        /**
+          * Name of the icon to show. If a icon is present text should be hidden.
+         */
+        "icon"?: string;
+        /**
+          * Define the size of badge. Small is recommended for tabs.
+         */
+        "size": 'small' | 'large' | '';
+    }
     interface BalButton {
         /**
           * If `true` the bottom corners get rounded
@@ -275,6 +289,20 @@ export namespace Components {
          */
         "vertical": boolean;
     }
+    interface BalClose {
+        /**
+          * If `true` it has a light background.
+         */
+        "background": boolean;
+        /**
+          * If `true` it supports dark backgrounds.
+         */
+        "inverted": boolean;
+        /**
+          * Define the size of badge. Small is recommended for tabs.
+         */
+        "size": 'small' | 'large' | 'medium' | '';
+    }
     interface BalData {
         /**
           * If `true` a bottom border is added to the data-item.
@@ -622,7 +650,7 @@ export namespace Components {
         /**
           * The theme type of the button. Given by bulma our css framework.
          */
-        "color": BalButtonColor;
+        "color": BalButtonColor | 'white';
         /**
           * If `true` the button is inverted
          */
@@ -1526,6 +1554,12 @@ declare global {
         prototype: HTMLBalAppElement;
         new (): HTMLBalAppElement;
     };
+    interface HTMLBalBadgeElement extends Components.BalBadge, HTMLStencilElement {
+    }
+    var HTMLBalBadgeElement: {
+        prototype: HTMLBalBadgeElement;
+        new (): HTMLBalBadgeElement;
+    };
     interface HTMLBalButtonElement extends Components.BalButton, HTMLStencilElement {
     }
     var HTMLBalButtonElement: {
@@ -1586,6 +1620,12 @@ declare global {
         prototype: HTMLBalCheckboxGroupElement;
         new (): HTMLBalCheckboxGroupElement;
     };
+    interface HTMLBalCloseElement extends Components.BalClose, HTMLStencilElement {
+    }
+    var HTMLBalCloseElement: {
+        prototype: HTMLBalCloseElement;
+        new (): HTMLBalCloseElement;
+    };
     interface HTMLBalDataElement extends Components.BalData, HTMLStencilElement {
     }
     var HTMLBalDataElement: {
@@ -1949,6 +1989,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "bal-accordion": HTMLBalAccordionElement;
         "bal-app": HTMLBalAppElement;
+        "bal-badge": HTMLBalBadgeElement;
         "bal-button": HTMLBalButtonElement;
         "bal-button-group": HTMLBalButtonGroupElement;
         "bal-card": HTMLBalCardElement;
@@ -1959,6 +2000,7 @@ declare global {
         "bal-card-title": HTMLBalCardTitleElement;
         "bal-checkbox": HTMLBalCheckboxElement;
         "bal-checkbox-group": HTMLBalCheckboxGroupElement;
+        "bal-close": HTMLBalCloseElement;
         "bal-data": HTMLBalDataElement;
         "bal-data-item": HTMLBalDataItemElement;
         "bal-data-label": HTMLBalDataLabelElement;
@@ -2062,6 +2104,20 @@ declare namespace LocalJSX {
     }
     interface BalApp {
     }
+    interface BalBadge {
+        /**
+          * Define the alert color for the badge.
+         */
+        "color"?: 'danger' | 'warning' | 'success';
+        /**
+          * Name of the icon to show. If a icon is present text should be hidden.
+         */
+        "icon"?: string;
+        /**
+          * Define the size of badge. Small is recommended for tabs.
+         */
+        "size"?: 'small' | 'large' | '';
+    }
     interface BalButton {
         /**
           * If `true` the bottom corners get rounded
@@ -2294,6 +2350,20 @@ declare namespace LocalJSX {
          */
         "vertical"?: boolean;
     }
+    interface BalClose {
+        /**
+          * If `true` it has a light background.
+         */
+        "background"?: boolean;
+        /**
+          * If `true` it supports dark backgrounds.
+         */
+        "inverted"?: boolean;
+        /**
+          * Define the size of badge. Small is recommended for tabs.
+         */
+        "size"?: 'small' | 'large' | 'medium' | '';
+    }
     interface BalData {
         /**
           * If `true` a bottom border is added to the data-item.
@@ -2641,7 +2711,7 @@ declare namespace LocalJSX {
         /**
           * The theme type of the button. Given by bulma our css framework.
          */
-        "color"?: BalButtonColor;
+        "color"?: BalButtonColor | 'white';
         /**
           * If `true` the button is inverted
          */
@@ -3591,6 +3661,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "bal-accordion": BalAccordion;
         "bal-app": BalApp;
+        "bal-badge": BalBadge;
         "bal-button": BalButton;
         "bal-button-group": BalButtonGroup;
         "bal-card": BalCard;
@@ -3601,6 +3672,7 @@ declare namespace LocalJSX {
         "bal-card-title": BalCardTitle;
         "bal-checkbox": BalCheckbox;
         "bal-checkbox-group": BalCheckboxGroup;
+        "bal-close": BalClose;
         "bal-data": BalData;
         "bal-data-item": BalDataItem;
         "bal-data-label": BalDataLabel;
@@ -3669,6 +3741,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "bal-accordion": LocalJSX.BalAccordion & JSXBase.HTMLAttributes<HTMLBalAccordionElement>;
             "bal-app": LocalJSX.BalApp & JSXBase.HTMLAttributes<HTMLBalAppElement>;
+            "bal-badge": LocalJSX.BalBadge & JSXBase.HTMLAttributes<HTMLBalBadgeElement>;
             "bal-button": LocalJSX.BalButton & JSXBase.HTMLAttributes<HTMLBalButtonElement>;
             "bal-button-group": LocalJSX.BalButtonGroup & JSXBase.HTMLAttributes<HTMLBalButtonGroupElement>;
             "bal-card": LocalJSX.BalCard & JSXBase.HTMLAttributes<HTMLBalCardElement>;
@@ -3679,6 +3752,7 @@ declare module "@stencil/core" {
             "bal-card-title": LocalJSX.BalCardTitle & JSXBase.HTMLAttributes<HTMLBalCardTitleElement>;
             "bal-checkbox": LocalJSX.BalCheckbox & JSXBase.HTMLAttributes<HTMLBalCheckboxElement>;
             "bal-checkbox-group": LocalJSX.BalCheckboxGroup & JSXBase.HTMLAttributes<HTMLBalCheckboxGroupElement>;
+            "bal-close": LocalJSX.BalClose & JSXBase.HTMLAttributes<HTMLBalCloseElement>;
             "bal-data": LocalJSX.BalData & JSXBase.HTMLAttributes<HTMLBalDataElement>;
             "bal-data-item": LocalJSX.BalDataItem & JSXBase.HTMLAttributes<HTMLBalDataItemElement>;
             "bal-data-label": LocalJSX.BalDataLabel & JSXBase.HTMLAttributes<HTMLBalDataLabelElement>;

packages/components/src/components/bal-close/bal-close.scss

@@ -0,0 +1,33 @@
+@import './bal-close.vars.scss';
+
+bal-close {
+  position: static;
+  display: inline-block;
+  cursor: pointer;
+  flex-grow: 0;
+  flex-shrink: 0;
+  outline: 0;
+
+  .delete:not(.has-background) {
+    background: transparent;
+  }
+
+  .delete:not(.is-inverted) {
+    &::before,
+    &::after {
+      background: $blue;
+    }
+
+    &:focus {
+      background: transparent;
+    }
+
+    &:hover {
+      background: $blue-1;
+    }
+
+    &:active {
+      background: $blue-2;
+    }
+  }
+}

packages/components/src/components/bal-close/bal-close.tsx

@@ -0,0 +1,40 @@
+import { Component, h, ComponentInterface, Host, Element, Prop } from '@stencil/core'
+
+@Component({
+  tag: 'bal-close',
+})
+export class Close implements ComponentInterface {
+  @Element() el!: HTMLElement
+
+  /**
+   * Define the size of badge. Small is recommended for tabs.
+   */
+  @Prop() size: 'small' | 'large' | 'medium' | '' = ''
+
+  /**
+   * If `true` it supports dark backgrounds.
+   */
+  @Prop() inverted = false
+
+  /**
+   * If `true` it has a light background.
+   */
+  @Prop() background = false
+
+  render() {
+    return (
+      <Host>
+        <button
+          tabIndex={-1}
+          aria-label="close"
+          class={{
+            'delete': true,
+            'is-inverted': this.inverted,
+            'has-background': this.background,
+            [`is-${this.size}`]: this.size !== '',
+          }}
+        ></button>
+      </Host>
+    )
+  }
+}

packages/components/src/components/bal-close/bal-close.vars.scss

@@ -0,0 +1,3 @@
+// define variables for your component here with !default.
+
+// $close-color: $text !default;

packages/components/src/components/bal-close/stories/bal-close.docs.mdx

@@ -0,0 +1,24 @@
+import { Story, Canvas, Description } from '@storybook/addon-docs'
+import readme from '../readme.md'
+
+<span id="story--components-close--basic" style={{ opacity: 0 }}></span>
+
+# Close
+
+Todo add some description to the component and its purpose
+
+<Canvas>
+  <Story id="components-close--basic" />
+</Canvas>
+
+## Component Api
+
+<Description markdown={readme} />
+
+<br />
+
+import testing from './testing.md'
+
+<Description markdown={testing} />
+
+<bal-doc-github link="/components/bal-close/stories/bal-close.docs.mdx"></bal-doc-github>

packages/components/src/components/bal-close/stories/bal-close.stories.ts

@@ -0,0 +1,19 @@
+import docs from './bal-close.docs.mdx'
+import { BalComponentStory } from '../../../stories/utils'
+import { BalClose } from '../../../../.storybook/vue/components'
+
+const component = BalComponentStory({
+  title: 'Components/Close',
+  component: BalClose,
+  docs,
+})
+
+export default component.story
+
+export const Basic = args => ({
+  components: { ...component.components },
+  setup: () => ({ args }),
+  template: `<bal-close v-bind="args"></bal-close>`,
+})
+Basic.args = {}
+Basic.parameters = { ...component.sourceCode(Basic) }

packages/components/src/components/bal-icon/bal-icon.scss

@@ -52,6 +52,10 @@ bal-icon {
     transform: rotate(180deg);
   }
 
+  &.is-white {
+    fill: $white;
+  }
+
   &.is-primary {
     fill: $primary;
   }

packages/components/src/components/bal-icon/bal-icon.tsx

@@ -26,7 +26,7 @@ export class Icon {
   /**
    * The theme type of the button. Given by bulma our css framework.
    */
-  @Prop() color: BalButtonColor = 'info'
+  @Prop() color: BalButtonColor | 'white' = 'info'
 
   /**
    * If `true` the button is inverted

packages/components/src/components/bal-tag/bal-tag.scss

@@ -22,13 +22,17 @@ bal-tag {
     background-color: $grey;
   }
 
+  bal-close {
+    display: flex !important;
+  }
+
   &.is-dense {
     padding-top: 0;
     padding-bottom: 0;
     padding-left: 8px;
     padding-right: 8px;
 
-    .delete {
+    bal-close {
       margin-left: 0.25rem;
       margin-right: -0.1rem;
     }

packages/components/src/components/bal-tag/bal-tag.tsx

@@ -62,16 +62,14 @@ export class Tag {
           <bal-text small={this.size === 'small'}>
             <slot />
           </bal-text>
-          <div
+          <bal-close
             style={{
               display: this.closable ? 'inline-block' : 'none',
             }}
-            class={{
-              'delete': true,
-              'is-small': true,
-            }}
+            inverted
+            background
             onClick={(event: MouseEvent) => this.balCloseClick.emit(event)}
-          ></div>
+          ></bal-close>
         </div>
       </Host>
     )

packages/components/src/components/notice/bal-modal/bal-modal-header/bal-modal-header.tsx

@@ -26,13 +26,7 @@ export class ModalHeader {
             <slot></slot>
           </h4>
         </div>
-        <button
-          class={{
-            'modal-close': true,
-          }}
-          aria-label="close"
-          onClick={this.closeHandler}
-        ></button>
+        <bal-close size="large" onClick={this.closeHandler}></bal-close>
       </Host>
     )
   }