@maggioli-design-system/mds-table-row 1.3.1 → 2.0.1

package/dist/stats.json

@@ -1,24 +1,25 @@
 {
-  "timestamp": "2022-02-04T14:28:22",
+  "timestamp": "2022-06-27T08:27:33",
   "compiler": {
     "name": "node",
-    "version": "16.13.0"
+    "version": "18.3.0"
   },
   "app": {
     "namespace": "MdsTableRow",
     "fsNamespace": "mds-table-row",
     "components": 1,
     "entries": 1,
-    "bundles": 60,
+    "bundles": 62,
     "outputs": [
       {
         "name": "dist-collection",
-        "files": 19,
+        "files": 21,
         "generatedFiles": [
           "./dist/collection/components/mds-table-row/mds-table-row.js",
           "./dist/collection/dictionary/autocomplete.js",
           "./dist/collection/dictionary/button.js",
           "./dist/collection/dictionary/color.js",
+          "./dist/collection/dictionary/floating-ui.js",
           "./dist/collection/dictionary/icon.js",
           "./dist/collection/dictionary/input-text-type.js",
           "./dist/collection/dictionary/loading.js",
@@ -28,6 +29,7 @@
           "./dist/collection/interface/input-value.js",
           "./dist/collection/types/autocomplete.js",
           "./dist/collection/types/button.js",
+          "./dist/collection/types/floating-ui.js",
           "./dist/collection/types/form-rel.js",
           "./dist/collection/types/input-text-type.js",
           "./dist/collection/types/input-value-type.js",
@@ -50,17 +52,17 @@
         "name": "dist-lazy",
         "files": 35,
         "generatedFiles": [
-          "./dist/cjs/index-797b786c.js",
+          "./dist/cjs/index-2159a30d.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-table-row.cjs.entry.js",
           "./dist/cjs/mds-table-row.cjs.js",
-          "./dist/esm-es5/index-7d849f54.js",
+          "./dist/esm-es5/index-1e8e95d7.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-table-row.entry.js",
           "./dist/esm-es5/mds-table-row.js",
-          "./dist/esm/index-7d849f54.js",
+          "./dist/esm/index-1e8e95d7.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-table-row.entry.js",
@@ -70,21 +72,21 @@
           "./dist/mds-table-row/index.esm.js",
           "./dist/mds-table-row/mds-table-row.esm.js",
           "./dist/mds-table-row/mds-table-row.js",
-          "./dist/mds-table-row/p-13e3a2cc.system.js",
-          "./dist/mds-table-row/p-15f2406e.system.js",
-          "./dist/mds-table-row/p-3619a466.js",
-          "./dist/mds-table-row/p-4829abc6.system.entry.js",
           "./dist/mds-table-row/p-50ea2036.system.js",
-          "./dist/mds-table-row/p-db71d0ac.entry.js",
+          "./dist/mds-table-row/p-703c309f.system.js",
+          "./dist/mds-table-row/p-c6fbd532.system.js",
+          "./dist/mds-table-row/p-c8145b7b.system.entry.js",
+          "./dist/mds-table-row/p-ca70a50c.entry.js",
+          "./dist/mds-table-row/p-f5a4be35.js",
           "./www/build/index.esm.js",
           "./www/build/mds-table-row.esm.js",
           "./www/build/mds-table-row.js",
-          "./www/build/p-13e3a2cc.system.js",
-          "./www/build/p-15f2406e.system.js",
-          "./www/build/p-3619a466.js",
-          "./www/build/p-4829abc6.system.entry.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-db71d0ac.entry.js"
+          "./www/build/p-703c309f.system.js",
+          "./www/build/p-c6fbd532.system.js",
+          "./www/build/p-c8145b7b.system.entry.js",
+          "./www/build/p-ca70a50c.entry.js",
+          "./www/build/p-f5a4be35.js"
         ]
       },
       {
@@ -117,12 +119,12 @@
         "components": [
           "mds-table-row"
         ],
-        "bundleId": "p-db71d0ac",
-        "fileName": "p-db71d0ac.entry.js",
+        "bundleId": "p-ca70a50c",
+        "fileName": "p-ca70a50c.entry.js",
         "imports": [
-          "p-3619a466.js"
+          "p-f5a4be35.js"
         ],
-        "originalByteSize": 2291
+        "originalByteSize": 1357
       }
     ],
     "esm": [
@@ -134,9 +136,9 @@
         "bundleId": "mds-table-row",
         "fileName": "mds-table-row.entry.js",
         "imports": [
-          "index-7d849f54.js"
+          "index-1e8e95d7.js"
         ],
-        "originalByteSize": 2295
+        "originalByteSize": 1361
       }
     ],
     "es5": [
@@ -148,9 +150,9 @@
         "bundleId": "mds-table-row",
         "fileName": "mds-table-row.entry.js",
         "imports": [
-          "index-7d849f54.js"
+          "index-1e8e95d7.js"
         ],
-        "originalByteSize": 2295
+        "originalByteSize": 1361
       }
     ],
     "system": [
@@ -159,12 +161,12 @@
         "components": [
           "mds-table-row"
         ],
-        "bundleId": "p-4829abc6.system",
-        "fileName": "p-4829abc6.system.entry.js",
+        "bundleId": "p-c8145b7b.system",
+        "fileName": "p-c8145b7b.system.entry.js",
         "imports": [
-          "p-13e3a2cc.system.js"
+          "p-c6fbd532.system.js"
         ],
-        "originalByteSize": 2621
+        "originalByteSize": 1636
       }
     ],
     "commonjs": [
@@ -176,9 +178,9 @@
         "bundleId": "mds-table-row.cjs",
         "fileName": "mds-table-row.cjs.entry.js",
         "imports": [
-          "index-797b786c.js"
+          "index-2159a30d.js"
         ],
-        "originalByteSize": 2365
+        "originalByteSize": 1431
       }
     ]
   },
@@ -198,7 +200,7 @@
         "tags": [],
         "text": ""
       },
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "excludeFromCollection": false,
       "events": [],
       "internal": false,
@@ -215,13 +217,29 @@
       ],
       "methods": [],
       "potentialCmpRefs": [],
-      "properties": [],
-      "shadowDelegatesFocus": null,
-      "states": [
+      "properties": [
         {
-          "name": "interactive"
+          "name": "interactive",
+          "type": "boolean",
+          "attribute": "interactive",
+          "reflect": true,
+          "mutable": true,
+          "required": false,
+          "optional": false,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "docs": {
+            "tags": [],
+            "text": ""
+          },
+          "internal": false
         }
-      ]
+      ],
+      "shadowDelegatesFocus": false,
+      "states": []
     }
   ],
   "entries": [
@@ -233,15 +251,31 @@
           "isCollectionDependency": false,
           "componentClassName": "MdsTableRow",
           "elementRef": null,
-          "encapsulation": "none",
-          "shadowDelegatesFocus": null,
-          "properties": [],
-          "virtualProperties": [],
-          "states": [
+          "encapsulation": "shadow",
+          "shadowDelegatesFocus": false,
+          "properties": [
             {
-              "name": "interactive"
+              "name": "interactive",
+              "type": "boolean",
+              "attribute": "interactive",
+              "reflect": true,
+              "mutable": true,
+              "required": false,
+              "optional": false,
+              "complexType": {
+                "original": "boolean",
+                "resolved": "boolean",
+                "references": {}
+              },
+              "docs": {
+                "tags": [],
+                "text": ""
+              },
+              "internal": false
             }
           ],
+          "virtualProperties": [],
+          "states": [],
           "methods": [],
           "listeners": [
             {
@@ -262,7 +296,7 @@
               "styleIdentifier": "mdsTableRowStyle",
               "externalStyles": [
                 {
-                  "absolutePath": "/Users/vitto/repo/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.css",
+                  "absolutePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.css",
                   "relativePath": "mds-table-row.css",
                   "originalComponentPath": "mds-table-row.css"
                 }
@@ -299,8 +333,8 @@
             "tags": [],
             "text": ""
           },
-          "jsFilePath": "/Users/vitto/repo/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.js",
-          "sourceFilePath": "/Users/vitto/repo/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.tsx",
+          "jsFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.js",
+          "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/design-system/projects/stencil/.build/mds-table-row/src/components/mds-table-row/mds-table-row.tsx",
           "sourceMapPath": null,
           "hasAttributeChangedCallbackFn": false,
           "hasComponentWillLoadFn": false,
@@ -325,19 +359,19 @@
           "hasMember": true,
           "hasMethod": false,
           "hasMode": false,
-          "hasAttribute": false,
-          "hasProp": false,
+          "hasAttribute": true,
+          "hasProp": true,
           "hasPropNumber": false,
-          "hasPropBoolean": false,
+          "hasPropBoolean": true,
           "hasPropString": false,
-          "hasPropMutable": false,
-          "hasReflect": false,
+          "hasPropMutable": true,
+          "hasReflect": true,
           "hasRenderFn": true,
-          "hasState": true,
+          "hasState": false,
           "hasStyle": true,
           "hasVdomAttribute": true,
           "hasVdomXlink": false,
-          "hasVdomClass": true,
+          "hasVdomClass": false,
           "hasVdomFunctional": false,
           "hasVdomKey": false,
           "hasVdomListener": false,
@@ -349,7 +383,6 @@
           "hasWatchCallback": false,
           "isPlain": false,
           "htmlAttrNames": [
-            "class",
             "role"
           ],
           "htmlTagNames": [
@@ -369,7 +402,7 @@
   ],
   "componentGraph": {
     "sc-mds-table-row": [
-      "p-3619a466.js"
+      "p-f5a4be35.js"
     ]
   },
   "sourceGraph": {
@@ -377,7 +410,10 @@
     "./src/dictionary/autocomplete.ts": [],
     "./src/dictionary/button.ts": [],
     "./src/dictionary/color.ts": [],
-    "./src/dictionary/icon.ts": [],
+    "./src/dictionary/floating-ui.ts": [],
+    "./src/dictionary/icon.ts": [
+      "./src/fixtures/icons.json"
+    ],
     "./src/dictionary/input-text-type.ts": [],
     "./src/dictionary/loading.ts": [],
     "./src/dictionary/typography.ts": [],
@@ -386,6 +422,7 @@
     "./src/interface/input-value.ts": [],
     "./src/types/autocomplete.ts": [],
     "./src/types/button.ts": [],
+    "./src/types/floating-ui.ts": [],
     "./src/types/form-rel.ts": [],
     "./src/types/input-text-type.ts": [],
     "./src/types/input-value-type.ts": [],

package/dist/types/components/mds-table-row/mds-table-row.d.ts

@@ -1,5 +1,5 @@
 export declare class MdsTableRow {
-  interactive?: boolean;
+  interactive: boolean;
   tableInteractiveHandler(event: CustomEvent<boolean>): void;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface MdsTableRow {
+        "interactive": boolean;
     }
 }
 declare global {
@@ -22,6 +23,7 @@ declare global {
 }
 declare namespace LocalJSX {
     interface MdsTableRow {
+        "interactive"?: boolean;
     }
     interface IntrinsicElements {
         "mds-table-row": MdsTableRow;

package/dist/types/dictionary/floating-ui.d.ts

@@ -0,0 +1,3 @@
+declare const floatingUIPlacementDictionary: string[];
+declare const floatingUIStrategyDictionary: string[];
+export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };

package/dist/types/dictionary/typography.d.ts

@@ -1,6 +1,9 @@
 declare const typographyDictionary: string[];
+declare const typographyVariationsDictionary: string[];
 declare const typographyMonoDictionary: string[];
-declare const typographyPrimaryDictionary: string[];
-declare const typographySecondaryDictionary: string[];
+declare const typographyTitleDictionary: string[];
+declare const typographyInfoDictionary: string[];
+declare const typographyReadDictionary: string[];
 declare const typographySmallerDictionary: string[];
-export { typographyDictionary, typographyMonoDictionary, typographyPrimaryDictionary, typographySecondaryDictionary, typographySmallerDictionary, };
+declare const typographyTooltipDictionary: string[];
+export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };

package/dist/types/types/floating-ui.d.ts

@@ -0,0 +1,2 @@
+export declare type FloatingUIPlacement = 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
+export declare type FloatingUIStrategy = 'absolute' | 'fixed';

package/dist/types/types/typography.d.ts

@@ -1,5 +1,8 @@
 export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph' | 'tip';
-export declare type TypographyPrimaryType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyVariants = 'title' | 'info' | 'read' | 'mono';
+export declare type TypographyTitleType = 'action' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type TypographyInfoType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographyReadType = 'caption' | 'detail' | 'paragraph';
 export declare type TypographySmallerType = 'tip' | 'option';
 export declare type TypographyMonoType = 'code' | 'hack';
+export declare type TypographyTooltipType = 'caption' | 'detail' | 'tip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "1.3.1",
+  "version": "2.0.1",
   "description": "mds-table-row is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -18,11 +18,13 @@
     "www/"
   ],
   "scripts": {
-    "build": "rm src/components.d.ts || true && stencil build --docs-readme"
+    "build": "rm src/components.d.ts || true && stencil build --docs-readme",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table-cell": "^1.1.1",
-    "@stencil/core": "^2.13.0"
+    "@maggioli-design-system/mds-table-cell": "^2.0.1",
+    "@maggioli-design-system/styles": "^8.0.0",
+    "@stencil/core": "^2.17.0"
   },
   "license": "MIT",
   "author": {

package/readme.md

@@ -5,12 +5,20 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property      | Attribute     | Description | Type      | Default     |
+| ------------- | ------------- | ----------- | --------- | ----------- |
+| `interactive` | `interactive` |             | `boolean` | `undefined` |
+
+
 ## CSS Custom Properties
 
 | Name                     | Description                                                            |
 | ------------------------ | ---------------------------------------------------------------------- |
 | `--background-row-hover` | The cell background-color when the mouse go over the table row element |
 | `--border-color`         | The border color between table rows                                    |
+| `--border-width`         | The border width between table rows                                    |
 | `--radius`               | The radius of the table (header and footer excluded)                   |
 
 

package/src/components/mds-table-row/.gitlab-ci.yml

@@ -0,0 +1,25 @@
+.base-table-row:
+  variables:
+    COMPONENT: mds-table-row
+
+# ISOLATE
+table-row-isolate:
+  extends: [.base-isolate, .base-table-row]
+  dependencies: [base-stencil-build]
+
+# TEST
+table-row-publish-test:
+  extends: [.base-stencil-publish-test, .base-table-row]
+  dependencies: [base-stencil-build, table-row-isolate]
+
+# PUBLISH
+table-row-publish:
+  extends: [.base-stencil-publish, .base-table-row]
+  dependencies: [base-stencil-build, table-row-isolate]
+  needs: [base-stencil-build, table-row-isolate, table-row-publish-test]
+
+# INSTALL TEST
+table-row-install-test:
+  extends: [.base-stencil-install-test, .base-table-row]
+  needs: [table-row-publish]
+

package/src/components/mds-table-row/mds-table-row.css

@@ -7,38 +7,28 @@
 * @prop --radius: The radius of the table (header and footer excluded)
 */
 
-mds-table-row {
+:host {
   @apply
     border-b
     table-row;
 
-  border-bottom: var(--border-width, theme('borderWidth.2')) solid var(--border-color, theme('colors.adjust-tone-09'));
+  border-bottom: var(--border-width, theme('borderWidth.2')) solid var(--border-color, theme('colors.tone-neutral-09'));
 }
 
-mds-table-row:last-child {
-  @apply border-transparent;
-}
-
-mds-table-row:first-child mds-table-cell:first-child {
-  border-top-left-radius: var(--radius, theme('borderRadius.lg'));
-}
+:host ( :first-child ) {
 
-mds-table-row:last-child mds-table-cell:first-child {
-  border-bottom-left-radius: var(--radius, theme('borderRadius.lg'));
+  --radius-top-left: var(--radius, theme('borderRadius.lg'));
+  --radius-top-right: var(--radius, theme('borderRadius.lg'));
 }
 
-mds-table-row:first-child mds-table-cell:last-child {
-  border-top-right-radius: var(--radius, theme('borderRadius.lg'));
-}
+:host ( :last-child ) {
+  @apply border-transparent;
 
-mds-table-row:last-child mds-table-cell:last-child {
-  border-bottom-right-radius: var(--radius, theme('borderRadius.lg'));
+  --radius-bottom-left: var(--radius, theme('borderRadius.lg'));
+  --radius-bottom-right: var(--radius, theme('borderRadius.lg'));
 }
 
-mds-table-row:focus {
-  @apply opacity-50;
-}
+:host ( [interactive]:hover ) {
 
-mds-table-row.interactive:hover mds-table-cell {
-  background-color: var(--background-row-hover, theme('colors.adjust-tone')) !important;
+  --background: var(--background-row-hover, theme('colors.tone-neutral'));
 }

package/src/components/mds-table-row/mds-table-row.tsx

@@ -1,13 +1,12 @@
-import { Component, Host, h, Listen, State } from '@stencil/core'
-import clsx from 'clsx'
+import { Component, Host, h, Listen, Prop } from '@stencil/core'
 @Component({
   tag: 'mds-table-row',
   styleUrl: 'mds-table-row.css',
-  shadow: false,
+  shadow: true,
 })
 export class MdsTableRow {
 
-  @State() interactive?: boolean
+  @Prop({ mutable: true, reflect: true }) interactive: boolean
 
   @Listen('tableInteractive', { target: 'body' })
   tableInteractiveHandler (event: CustomEvent<boolean>): void {
@@ -16,7 +15,7 @@ export class MdsTableRow {
 
   render () {
     return (
-      <Host class={clsx(this.interactive && 'interactive')} role="row">
+      <Host role="row">
         <slot/>
       </Host>
     )

package/src/components/mds-table-row/readme.md

@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property      | Attribute     | Description | Type      | Default     |
+| ------------- | ------------- | ----------- | --------- | ----------- |
+| `interactive` | `interactive` |             | `boolean` | `undefined` |
+
+
 ## CSS Custom Properties
 
 | Name                     | Description                                                            |

package/src/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface MdsTableRow {
+        "interactive": boolean;
     }
 }
 declare global {
@@ -22,6 +23,7 @@ declare global {
 }
 declare namespace LocalJSX {
     interface MdsTableRow {
+        "interactive"?: boolean;
     }
     interface IntrinsicElements {
         "mds-table-row": MdsTableRow;

package/src/dictionary/floating-ui.ts

@@ -0,0 +1,25 @@
+
+const floatingUIPlacementDictionary = [
+  'bottom',
+  'bottom-end',
+  'bottom-start',
+  'left',
+  'left-end',
+  'left-start',
+  'right',
+  'right-end',
+  'right-start',
+  'top',
+  'top-end',
+  'top-start',
+]
+
+const floatingUIStrategyDictionary = [
+  'absolute',
+  'fixed',
+]
+
+export {
+  floatingUIPlacementDictionary,
+  floatingUIStrategyDictionary,
+}

package/src/dictionary/icon.ts

@@ -1,5 +1,5 @@
-import mggIconsDictionary from '@maggioli-design-system/icons/dist/original/dictionary.json'
-const iconsDictionary = Object.keys(mggIconsDictionary).sort()
+import jsonIconsDictionary from '../fixtures/icons.json'
+const iconsDictionary = jsonIconsDictionary
 export {
   iconsDictionary,
 }

package/src/dictionary/typography.ts

@@ -16,12 +16,19 @@ const typographyDictionary = [
   'tip',
 ]
 
+const typographyVariationsDictionary = [
+  'title',
+  'info',
+  'read',
+  'mono',
+]
+
 const typographyMonoDictionary = [
   'code',
   'hack',
 ]
 
-const typographyPrimaryDictionary = [
+const typographyTitleDictionary = [
   'action',
   'h1',
   'h2',
@@ -31,7 +38,7 @@ const typographyPrimaryDictionary = [
   'h6',
 ]
 
-const typographySecondaryDictionary = [
+const typographyInfoDictionary = [
   'caption',
   'detail',
   'label',
@@ -40,15 +47,30 @@ const typographySecondaryDictionary = [
   'tip',
 ]
 
+const typographyReadDictionary = [
+  'caption',
+  'detail',
+  'paragraph',
+]
+
 const typographySmallerDictionary = [
   'option',
   'tip',
 ]
 
+const typographyTooltipDictionary = [
+  'caption',
+  'detail',
+  'tip',
+]
+
 export {
   typographyDictionary,
+  typographyVariationsDictionary,
   typographyMonoDictionary,
-  typographyPrimaryDictionary,
-  typographySecondaryDictionary,
+  typographyTitleDictionary,
+  typographyInfoDictionary,
+  typographyReadDictionary,
   typographySmallerDictionary,
+  typographyTooltipDictionary,
 }