Merge pull request #1872 from smeup/kup-badge-gravity

Kup-badge : Type/Gravity prop
smeup · Apr 19, 2024 · 964195e · 964195e
2 parents 11a35df + c72c071
commit 964195e
Show file tree

Hide file tree

Showing 7 changed files with 279 additions and 91 deletions.
diff --git a/packages/ketchup/src/badge.html b/packages/ketchup/src/badge.html
@@ -57,41 +57,33 @@ <h3>Badge</h3>
 
         <h4>Status:</h4>
 
-        <span>default</span>
+        <span>Type : info ( Default )</span>
         <div class="badge-container">
           <kup-badge text="demo"></kup-badge>
         </div>
 
-        <span>accent red</span>
+        <span>Type: danger</span>
         <div class="badge-container">
-          <kup-badge text="demo" class="kup-accent-red"></kup-badge>
+          <kup-badge text="demo" type="error"></kup-badge>
         </div>
-        <span>accent orange</span>
+        <span>Type : warning</span>
         <div class="badge-container">
-          <kup-badge text="demo" class="kup-accent-orange"></kup-badge>
+          <kup-badge text="demo" type="warning"></kup-badge>
         </div>
-        <span>accent yellow</span>
+        <span>Type : success</span>
         <div class="badge-container">
-          <kup-badge text="demo" class="kup-accent-yellow"></kup-badge>
-        </div>
-        <span>accent green</span>
-        <div class="badge-container">
-          <kup-badge text="demo" class="kup-accent-green"></kup-badge>
-        </div>
-        <span>accent white</span>
-        <div class="badge-container">
-          <kup-badge text="demo" class="kup-accent-white"></kup-badge>
+          <kup-badge text="demo" type="success"></kup-badge>
         </div>
 
         <h4>Position:</h4>
 
-        <span>top right (default)</span>
+        <span>top left (default)</span>
         <div class="badge-container">
           <kup-badge text="demo"></kup-badge>
         </div>
         <span>top left</span>
         <div class="badge-container">
-          <kup-badge text="demo" class="kup-top-left"></kup-badge>
+          <kup-badge text="demo" class="kup-top-right"></kup-badge>
         </div>
         <span>bottom right</span>
         <div class="badge-container">

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -9,6 +9,7 @@ import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon
 import { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
 import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
+import { BadgeType } from "./components/kup-badge/kup-badge-declarations";
 import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations";
 import { KupStore } from "./components/kup-state/kup-store";
 import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
@@ -60,6 +61,7 @@ export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon
 export { GenericObject, KupComponentSizing, KupEventPayload } from "./types/GenericTypes";
 export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
 export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
+export { BadgeType } from "./components/kup-badge/kup-badge-declarations";
 export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations";
 export { KupStore } from "./components/kup-state/kup-store";
 export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
@@ -323,6 +325,11 @@ export namespace Components {
           * @default null
          */
         "text": string;
+        /**
+          * The gravity of the badge.
+          * @default BadgeType.INFO
+         */
+        "type": BadgeType;
     }
     interface KupBox {
         /**
@@ -5590,6 +5597,11 @@ declare namespace LocalJSX {
           * @default null
          */
         "text"?: string;
+        /**
+          * The gravity of the badge.
+          * @default BadgeType.INFO
+         */
+        "type"?: BadgeType;
     }
     interface KupBox {
         /**

diff --git a/packages/ketchup/src/components/kup-badge/kup-badge-declarations.ts b/packages/ketchup/src/components/kup-badge/kup-badge-declarations.ts
@@ -7,3 +7,10 @@ export enum KupBadgeProps {
     imageData = 'The data of the image displayed inside the badge.Props of the sub-components.',
     text = 'The text displayed inside the badge.Defaults at false. When set to true, the component is disabled.',
 }
+
+export enum BadgeType {
+    SUCCESS = 'success',
+    INFO = 'info',
+    ERROR = 'error',
+    WARNING = 'warning',
+}
diff --git a/packages/ketchup/src/components/kup-badge/kup-badge.tsx b/packages/ketchup/src/components/kup-badge/kup-badge.tsx
@@ -22,7 +22,7 @@ import {
 import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupBadgeProps } from './kup-badge-declarations';
+import { BadgeType, KupBadgeProps } from './kup-badge-declarations';
 
 @Component({
     tag: 'kup-badge',
@@ -50,6 +50,11 @@ export class KupBadge {
      * @default null
      */
     @Prop() imageData: GenericObject = null;
+    /**
+     * The gravity of the badge.
+     * @default BadgeType.INFO
+     */
+    @Prop() type: BadgeType = BadgeType.INFO;
     /**
      * The text displayed inside the badge.
      * @default null
@@ -156,7 +161,11 @@ export class KupBadge {
                         this.rootElement as KupComponent
                     )}
                 </style>
-                <div id={componentWrapperId} onClick={() => this.onKupClick()}>
+                <div
+                    id={componentWrapperId}
+                    class={this.type}
+                    onClick={() => this.onKupClick()}
+                >
                     {this.text}
                     {imageEl}
                 </div>

diff --git a/packages/ketchup/src/components/kup-badge/readme.md b/packages/ketchup/src/components/kup-badge/readme.md
@@ -5,11 +5,12 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                       | Type            | Default |
-| ------------- | -------------- | ------------------------------------------------- | --------------- | ------- |
-| `customStyle` | `custom-style` | Custom style of the component.                    | `string`        | `''`    |
-| `imageData`   | --             | The data of the image displayed inside the badge. | `GenericObject` | `null`  |
-| `text`        | `text`         | The text displayed inside the badge.              | `string`        | `null`  |
+| Property      | Attribute      | Description                                       | Type                                                                          | Default          |
+| ------------- | -------------- | ------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------- |
+| `customStyle` | `custom-style` | Custom style of the component.                    | `string`                                                                      | `''`             |
+| `imageData`   | --             | The data of the image displayed inside the badge. | `GenericObject`                                                               | `null`           |
+| `text`        | `text`         | The text displayed inside the badge.              | `string`                                                                      | `null`           |
+| `type`        | `type`         | The gravity of the badge.                         | `BadgeType.ERROR \| BadgeType.INFO \| BadgeType.SUCCESS \| BadgeType.WARNING` | `BadgeType.INFO` |
 
 
 ## Events

diff --git a/packages/ketchup/src/components/kup-badge/styles/kup-badge-classes.scss b/packages/ketchup/src/components/kup-badge/styles/kup-badge-classes.scss
@@ -26,28 +26,22 @@
   transform: translate(15%, -15%);
 }
 
-:host(.#{$kup-class-red}) {
-  --kup-badge-primary-color: var(--kup-accent-red-color);
-  --kup-badge-text-on-primary-color: white;
+#kup-component.error {
+  background-color: var(--kup-error-color-20);
+  color: var(--kup-error-color-70);
 }
 
-:host(.#{$kup-class-orange}) {
-  --kup-badge-primary-color: var(--kup-accent-orange-color);
-  --kup-badge-text-on-primary-color: white;
+#kup-component.info {
+  background-color: var(--kup-info-color-20);
+  color: var(--kup-info-color-70);
 }
 
-:host(.#{$kup-class-yellow}) {
-  --kup-badge-primary-color: var(--kup-accent-yellow-color);
-  --kup-badge-text-on-primary-color: white;
+#kup-component.success {
+  background-color: var(--kup-success-color-20);
+  color: var(--kup-success-color-70);
 }
 
-:host(.#{$kup-class-green}) {
-  --kup-badge-primary-color: var(--kup-accent-green-color);
-  --kup-badge-text-on-primary-color: white;
-}
-
-:host(.#{$kup-class-white}) {
-  --kup-badge-primary-color: var(--kup-accent-white-color);
-  --kup-badge-text-on-primary-color: var(--kup-primary-color-80);
-  --kup_badge_border: 1px solid var(--kup-border-color);
+#kup-component.warning {
+  background-color: var(--kup-warning-color-20);
+  color: var(--kup-warning-color-70);
 }