Feat / kup-typography

packages/ketchup-react/src/index.ts

@@ -74,4 +74,6 @@ export const KupTextField = /*@__PURE__*/createReactComponent<JSX.KupTextField,
 export const KupTimePicker = /*@__PURE__*/createReactComponent<JSX.KupTimePicker, HTMLKupTimePickerElement>('kup-time-picker');
 export const KupTooltip = /*@__PURE__*/createReactComponent<JSX.KupTooltip, HTMLKupTooltipElement>('kup-tooltip');
 export const KupTree = /*@__PURE__*/createReactComponent<JSX.KupTree, HTMLKupTreeElement>('kup-tree');
+export const KupTypography = /*@__PURE__*/createReactComponent<JSX.KupTypography, HTMLKupTypographyElement>('kup-typography');
+export const KupTypographyList = /*@__PURE__*/createReactComponent<JSX.KupTypographyList, HTMLKupTypographyListElement>('kup-typography-list');
 export const KupVerticalScroll = /*@__PURE__*/createReactComponent<JSX.KupVerticalScroll, HTMLKupVerticalScrollElement>('kup-vertical-scroll');

packages/ketchup/src/assets/index.js

@@ -238,6 +238,14 @@ components.data = [
         value: 'Time picker',
         id: 'time-picker.html',
     },
+    {
+        value: 'Typography',
+        id: 'typography.html',
+    },
+    {
+        value: 'Typography List',
+        id: 'typography-list.html',
+    },
     {
         value: 'Text field',
         id: 'text-field.html',

packages/ketchup/src/assets/text-list.js

@@ -0,0 +1,39 @@
+const simpleData = [
+    {
+        data: {
+            type: 'heading-01',
+        },
+        value: 'Button Flat 1',
+        obj: {
+            t: '',
+            p: '',
+            k: 'b1',
+        },
+    },
+    {
+        value: 'Button Flat 2',
+    },
+    {
+        value: 'This is a text that will be outputted as text for the LAB component also called in ketchup typography.',
+    },
+    {
+        value: 'Button Flat 5',
+    },
+];
+
+const textList = document.getElementById('text-list');
+textList.data = simpleData;
+
+const toolbarTitle = [
+    {
+        value: 'Button Flat 1',
+        obj: {
+            t: '',
+            p: '',
+            k: 'b1',
+        },
+    },
+];
+
+const textListToolbar = document.getElementById('text-list-toolbar');
+textListToolbar.data = toolbarTitle;

packages/ketchup/src/components/kup-accordion/styles/kup-accordion-classes.scss

@@ -39,7 +39,7 @@
 }
 
 :host(.#{$kup-class-warning}) {
-  --kup-accordion-primary-color: var(--kup-warning-50-color);
+--kup-accordion-primary-color: var(--kup-warning-color-50);
   --kup-accordion-primary-color-rgb: var(--kup-warning-color-50-rgb);
   --kup-accordion-text-on-primary-color: white;
 }

packages/ketchup/src/components/kup-badge/readme.md

@@ -118,6 +118,7 @@ Type: `Promise<void>`
  - [kup-text-field](../kup-text-field)
  - [kup-time-picker](../kup-time-picker)
  - [kup-tree](../kup-tree)
+ - [kup-typography](../kup-typography)
 
 ### Depends on
 
@@ -175,6 +176,7 @@ graph TD;
   kup-numeric-picker --> kup-badge
   kup-planner --> kup-badge
   kup-snackbar --> kup-badge
+  kup-typography --> kup-badge
   style kup-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/ketchup/src/components/kup-button-list/kup-button-list.tsx

@@ -35,7 +35,7 @@ import {
 import { KupListNode } from '../kup-list/kup-list-declarations';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { setProps } from '../../utils/utils';
+import { getProps, setProps } from '../../utils/utils';
 import { KupDropdownButtonEventPayload } from '../kup-dropdown-button/kup-dropdown-button-declarations';
 import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
 import { KupDataDataset } from '../../managers/kup-data/kup-data-declarations';
@@ -179,22 +179,7 @@ export class KupButtonList {
      */
     @Method()
     async getProps(descriptions?: boolean): Promise<GenericObject> {
-        let props: GenericObject = {};
-        if (descriptions) {
-            props = KupButtonListProps;
-        } else {
-            for (const key in KupButtonListProps) {
-                if (
-                    Object.prototype.hasOwnProperty.call(
-                        KupButtonListProps,
-                        key
-                    )
-                ) {
-                    props[key] = this[key];
-                }
-            }
-        }
-        return props;
+        return getProps(this, KupButtonListProps, descriptions);
     }
     /**
      * This method is used to trigger a new render of the component.

packages/ketchup/src/components/kup-card/readme.md

@@ -148,6 +148,8 @@ Type: `Promise<void>`
  - [kup-text-field](../kup-text-field)
  - [kup-time-picker](../kup-time-picker)
  - [kup-tree](../kup-tree)
+ - [kup-typography](../kup-typography)
+ - [kup-typography-list](../kup-typography-list)
 
 ### Depends on
 
@@ -232,6 +234,8 @@ graph TD;
   kup-probe --> kup-card
   kup-qlik --> kup-card
   kup-snackbar --> kup-card
+  kup-typography --> kup-card
+  kup-typography-list --> kup-card
   style kup-card fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/ketchup/src/components/kup-date-picker/kup-date-picker.tsx

@@ -43,6 +43,7 @@ import {
     KupCardData,
     KupCardFamily,
 } from '../kup-card/kup-card-declarations';
+import { getProps } from '../../utils/utils';
 
 @Component({
     tag: 'kup-date-picker',
@@ -345,22 +346,7 @@ export class KupDatePicker {
      */
     @Method()
     async getProps(descriptions?: boolean): Promise<GenericObject> {
-        let props: GenericObject = {};
-        if (descriptions) {
-            props = KupDatePickerProps;
-        } else {
-            for (const key in KupDatePickerProps) {
-                if (
-                    Object.prototype.hasOwnProperty.call(
-                        KupDatePickerProps,
-                        key
-                    )
-                ) {
-                    props[key] = this[key];
-                }
-            }
-        }
-        return props;
+        return getProps(this, KupDatePickerProps, descriptions);
     }
     /**
      * This method is used to trigger a new render of the component.

packages/ketchup/src/components/kup-dialog/readme.md

@@ -152,6 +152,8 @@ Type: `Promise<void>`
  - [kup-text-field](../kup-text-field)
  - [kup-time-picker](../kup-time-picker)
  - [kup-tree](../kup-tree)
+ - [kup-typography](../kup-typography)
+ - [kup-typography-list](../kup-typography-list)
 
 ### Depends on
 
@@ -214,6 +216,8 @@ graph TD;
   kup-probe --> kup-dialog
   kup-qlik --> kup-dialog
   kup-snackbar --> kup-dialog
+  kup-typography --> kup-dialog
+  kup-typography-list --> kup-dialog
   style kup-dialog fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/ketchup/src/components/kup-list/readme.md

@@ -154,6 +154,7 @@ Type: `Promise<void>`
  - [kup-tab-bar](../kup-tab-bar)
  - [kup-time-picker](../kup-time-picker)
  - [kup-tree](../kup-tree)
+ - [kup-typography](../kup-typography)
 
 ### Depends on
 
@@ -238,6 +239,7 @@ graph TD;
   kup-form --> kup-badge
   kup-tab-bar --> kup-list
   kup-tree --> kup-list
+  kup-typography --> kup-list
   style kup-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/ketchup/src/components/kup-numeric-picker/kup-numeric-picker.tsx

@@ -36,6 +36,7 @@ import {
     KupCardData,
     KupCardFamily,
 } from '../kup-card/kup-card-declarations';
+import { getProps } from '../../utils/utils';
 @Component({
     tag: 'kup-numeric-picker',
     styleUrl: 'kup-numeric-picker.scss',
@@ -323,22 +324,7 @@ export class KupNumericPicker {
      */
     @Method()
     async getProps(descriptions?: boolean): Promise<GenericObject> {
-        let props: GenericObject = {};
-        if (descriptions) {
-            props = KupNumericPickerProps;
-        } else {
-            for (const key in KupNumericPickerProps) {
-                if (
-                    Object.prototype.hasOwnProperty.call(
-                        KupNumericPickerProps,
-                        key
-                    )
-                ) {
-                    props[key] = this[key];
-                }
-            }
-        }
-        return props;
+        return getProps(this, KupNumericPickerProps, descriptions);
     }
     /**
      * This method is used to trigger a new render of the component.

packages/ketchup/src/components/kup-tab-bar/kup-tab-bar-declarations.ts

@@ -24,8 +24,3 @@ export interface KupTabBarEventPayload extends KupEventPayload {
     node: KupTabBarNode;
     index: number;
 }
-
-export interface KupTabbarItemClickEventPayload extends KupEventPayload {
-    value?: string;
-    node?: KupListNode;
-}

packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx

@@ -17,7 +17,6 @@ import {
     KupTabBarNode,
     KupTabBarEventPayload,
     KupTabBarProps,
-    KupTabbarItemClickEventPayload,
 } from './kup-tab-bar-declarations';
 import {
     KupManager,
@@ -36,8 +35,8 @@ import {
     KupDynamicPositionPlacement,
 } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 import { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations';
-import { KupListNode } from '../kup-list/kup-list-declarations';
-import { KupList } from '../kup-list/kup-list';
+import { KupDataNode } from '../../managers/kup-data/kup-data-declarations';
+import { KupToolbarItemClickEventPayload } from '../../managers/kup-toolbar/kup-toolbar-declarations';
 
 @Component({
     tag: 'kup-tab-bar',
@@ -86,6 +85,11 @@ export class KupTabBar {
      * @default true
      */
     @Prop() toolbar: boolean = true;
+    /**
+     * Display DataNode Toolbar.
+     * @default null
+     */
+    @Prop() toolbarData: KupDataNode[];
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -161,7 +165,7 @@ export class KupTabBar {
         cancelable: false,
         bubbles: true,
     })
-    kupItemClick: EventEmitter<KupTabbarItemClickEventPayload>;
+    kupItemClick: EventEmitter<KupToolbarItemClickEventPayload>;
 
     #dropDownActionCardAnchor: HTMLElement = null;
 
@@ -209,7 +213,7 @@ export class KupTabBar {
         });
     }
 
-    onKupTabbarItemClick(e: CustomEvent) {
+    onKupToolbarItemClick(e: CustomEvent) {
         this.kupItemClick.emit({
             comp: this,
             id: this.rootElement.id,
@@ -293,32 +297,16 @@ export class KupTabBar {
         this.toolbarList = null;
     }
 
-    private listItemData: KupListNode[] = [
-        {
-            value: 'Maximize',
-            id: 'maximize',
-            icon: 'add_alert',
-            selected: false,
-        },
-        {
-            value: 'Refresh',
-            id: 'refresh',
-            selected: true,
-            icon: 'ac_unit',
-            separator: true,
-        },
-    ];
-
     createDropDownToolbarList() {
         if (this.toolbarList) {
             this.closeRowToolbarList();
         }
         const listEl = document.createElement('kup-list');
-        listEl.data = this.listItemData;
+        listEl.data = this.toolbarData;
         listEl.isMenu = true;
         listEl.menuVisible = true;
         listEl.addEventListener('kup-list-click', (e: CustomEvent) => {
-            this.onKupTabbarItemClick(e);
+            this.onKupToolbarItemClick(e);
             setTimeout(() => {
                 this.closeRowToolbarList();
             }, 0);

packages/ketchup/src/components/kup-tab-bar/readme.md

@@ -5,24 +5,25 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                                     | Type              | Default |
-| ------------- | -------------- | --------------------------------------------------------------- | ----------------- | ------- |
-| `customStyle` | `custom-style` | Custom style of the component.                                  | `string`          | `''`    |
-| `data`        | --             | List of elements.                                               | `KupTabBarNode[]` | `null`  |
-| `dense`       | `dense`        | Defaults at false. When set to true, the component is dense.    | `boolean`         | `false` |
-| `ripple`      | `ripple`       | When enabled displays Material's ripple effect on item headers. | `boolean`         | `false` |
-| `toolbar`     | `toolbar`      | When enabled displays toolbar item inside each single tab.      | `boolean`         | `true`  |
+| Property      | Attribute      | Description                                                     | Type              | Default     |
+| ------------- | -------------- | --------------------------------------------------------------- | ----------------- | ----------- |
+| `customStyle` | `custom-style` | Custom style of the component.                                  | `string`          | `''`        |
+| `data`        | --             | List of elements.                                               | `KupTabBarNode[]` | `null`      |
+| `dense`       | `dense`        | Defaults at false. When set to true, the component is dense.    | `boolean`         | `false`     |
+| `ripple`      | `ripple`       | When enabled displays Material's ripple effect on item headers. | `boolean`         | `false`     |
+| `toolbar`     | `toolbar`      | When enabled displays toolbar item inside each single tab.      | `boolean`         | `true`      |
+| `toolbarData` | --             | Display DataNode Toolbar.                                       | `KupDataNode[]`   | `undefined` |
 
 
 ## Events
 
-| Event                  | Description                                    | Type                                          |
-| ---------------------- | ---------------------------------------------- | --------------------------------------------- |
-| `kup-tabbar-blur`      | Triggered when the tab loses focus.            | `CustomEvent<KupTabBarEventPayload>`          |
-| `kup-tabbar-click`     | Triggered when the tab is clicked.             | `CustomEvent<KupTabBarEventPayload>`          |
-| `kup-tabbar-focus`     | Triggered when the tab is focused.             | `CustomEvent<KupTabBarEventPayload>`          |
-| `kup-tabbar-iconclick` | Triggered when the icon inside tab is clicked. | `CustomEvent<KupTabBarEventPayload>`          |
-| `kup-tabbar-itemclick` | Triggered when a list item is clicked.         | `CustomEvent<KupTabbarItemClickEventPayload>` |
+| Event                  | Description                                    | Type                                           |
+| ---------------------- | ---------------------------------------------- | ---------------------------------------------- |
+| `kup-tabbar-blur`      | Triggered when the tab loses focus.            | `CustomEvent<KupTabBarEventPayload>`           |
+| `kup-tabbar-click`     | Triggered when the tab is clicked.             | `CustomEvent<KupTabBarEventPayload>`           |
+| `kup-tabbar-focus`     | Triggered when the tab is focused.             | `CustomEvent<KupTabBarEventPayload>`           |
+| `kup-tabbar-iconclick` | Triggered when the icon inside tab is clicked. | `CustomEvent<KupTabBarEventPayload>`           |
+| `kup-tabbar-itemclick` | Triggered when a list item is clicked.         | `CustomEvent<KupToolbarItemClickEventPayload>` |
 
 
 ## Methods