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

package/dist/types/stencil-public-runtime.d.ts

@@ -666,7 +666,7 @@ export declare namespace JSXBase {
         use: JSXBase.SVGAttributes;
         view: JSXBase.SVGAttributes;
     }
-    interface SlotAttributes {
+    interface SlotAttributes extends JSXAttributes {
         name?: string;
         slot?: string;
         onSlotchange?: (event: Event) => void;
@@ -1427,9 +1427,7 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
-    interface DOMAttributes<T = Element> {
-        key?: string | number;
-        ref?: (elm?: T) => void;
+    interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
         exportparts?: string;
@@ -1550,6 +1548,10 @@ export declare namespace JSXBase {
         onTransitionEndCapture?: (event: TransitionEvent) => void;
     }
 }
+export interface JSXAttributes<T = Element> {
+    key?: string | number;
+    ref?: (elm?: T) => void;
+}
 export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;

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

@@ -1,4 +1,5 @@
-export declare type TypographyType = 'action' | 'caption' | 'code' | 'detail' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'hack' | 'label' | 'option' | 'paragraph';
+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';
+export declare type TypographySecondaryType = 'caption' | 'detail' | 'label' | 'option' | 'paragraph' | 'tip';
+export declare type TypographySmallerType = 'tip' | 'option';
 export declare type TypographyMonoType = 'code' | 'hack';

package/dist/types/types/variant.d.ts

@@ -1,7 +1,10 @@
 export declare type ThemeStatusVariantType = 'error' | 'info' | 'success' | 'warning';
-export declare type ThemeVariantType = 'dark' | 'light' | 'error' | 'info' | 'success' | 'warning';
+export declare type ThemeVariantType = 'dark' | 'error' | 'info' | 'light' | 'primary' | 'success' | 'warning';
+export declare type ThemeFullVariantType = 'amaranth' | 'aqua' | 'blue' | 'dark' | 'error' | 'green' | 'info' | 'light' | 'lime' | 'orange' | 'orchid' | 'sky' | 'success' | 'violet' | 'warning' | 'yellow';
 export declare type ThemeLuminanceVariantType = 'dark' | 'light';
 export declare type LabelVariantType = 'amaranth' | 'aqua' | 'blue' | 'green' | 'lime' | 'orange' | 'orchid' | 'sky' | 'violet' | 'yellow';
 export declare type ActionVariantType = 'primary' | 'dark' | 'light';
 export declare type StateVariantType = 'disabled' | 'focused' | 'readonly';
 export declare type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
+export declare type ToneSimpleVariantType = 'strong' | 'weak' | 'quiet';
+export declare type ToneMinimalVariantType = 'strong' | 'weak';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@maggioli-design-system/mds-table-row",
-  "version": "1.0.2",
+  "version": "1.3.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/custom-elements/index.js",
+  "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
-  "types": "dist/custom-elements/index.d.ts",
+  "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/mds-table-row/mds-table-row.esm.js",
@@ -14,17 +14,15 @@
     "dist/",
     "loader/",
     "readme.md",
-    "src/"
+    "src/",
+    "www/"
   ],
   "scripts": {
-    "build": "stencil build --docs-readme"
+    "build": "rm src/components.d.ts || true && stencil build --docs-readme"
   },
   "dependencies": {
-    "@maggioli-design-system/mds-table": "latest",
-    "@maggioli-design-system/mds-table-body": "latest",
-    "@maggioli-design-system/mds-table-cell": "latest",
-    "@maggioli-design-system/mds-table-footer": "latest",
-    "@maggioli-design-system/mds-table-header": "latest"
+    "@maggioli-design-system/mds-table-cell": "^1.1.1",
+    "@stencil/core": "^2.13.0"
   },
   "license": "MIT",
   "author": {
@@ -34,14 +32,14 @@
   },
   "contributors": [
     {
-        "name": "Andrea Pruccoli",
-        "email": "andrea.pruccoli@maggioli.it",
-        "role": "Software Engineer"
+      "name": "Andrea Pruccoli",
+      "email": "andrea.pruccoli@maggioli.it",
+      "role": "Software Engineer"
     },
     {
-        "name": "Vittorio Vittori",
-        "email": "vittorio.vittori@maggioli.it",
-        "role": "UX UI Designer"
+      "name": "Vittorio Vittori",
+      "email": "vittorio.vittori@maggioli.it",
+      "role": "UX UI Designer"
     }
   ]
 }

package/readme.md

@@ -5,6 +5,15 @@
 <!-- Auto Generated Below -->
 
 
+## 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                                    |
+| `--radius`               | The radius of the table (header and footer excluded)                   |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

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

@@ -1,37 +1,44 @@
 @tailwind utilities;
 
-.table-row {
+/**
+* @prop --background-row-hover: The cell background-color when the mouse go over the table row element
+* @prop --border-color: The border color between table rows
+* @prop --border-width: The border width between table rows
+* @prop --radius: The radius of the table (header and footer excluded)
+*/
+
+mds-table-row {
   @apply
     border-b
     table-row;
 
-  border-bottom-color: var(--border-color, theme('colors.adjust-tone-18'));
+  border-bottom: var(--border-width, theme('borderWidth.2')) solid var(--border-color, theme('colors.adjust-tone-09'));
 }
 
-.table-row:last-child {
+mds-table-row:last-child {
   @apply border-transparent;
 }
 
-.table-row:first-child .table-cell:first-child {
-  border-top-left-radius: var(--border-radius, theme('borderRadius.lg'));
+mds-table-row:first-child mds-table-cell:first-child {
+  border-top-left-radius: var(--radius, theme('borderRadius.lg'));
 }
 
-.table-row:last-child .table-cell:first-child {
-  border-bottom-left-radius: var(--border-radius, theme('borderRadius.lg'));
+mds-table-row:last-child mds-table-cell:first-child {
+  border-bottom-left-radius: var(--radius, theme('borderRadius.lg'));
 }
 
-.table-row:first-child .table-cell:last-child {
-  border-top-right-radius: var(--border-radius, theme('borderRadius.lg'));
+mds-table-row:first-child mds-table-cell:last-child {
+  border-top-right-radius: var(--radius, theme('borderRadius.lg'));
 }
 
-.table-row:last-child .table-cell:last-child {
-  border-bottom-right-radius: var(--border-radius, theme('borderRadius.lg'));
+mds-table-row:last-child mds-table-cell:last-child {
+  border-bottom-right-radius: var(--radius, theme('borderRadius.lg'));
 }
 
-.table-row:focus {
+mds-table-row:focus {
   @apply opacity-50;
 }
 
-.table-row--interactive:hover .table-cell {
-  background-color: var(--background-row-hover, theme('colors.adjust-tone-20'));
+mds-table-row.interactive:hover mds-table-cell {
+  background-color: var(--background-row-hover, theme('colors.adjust-tone')) !important;
 }

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

@@ -16,7 +16,7 @@ export class MdsTableRow {
 
   render () {
     return (
-      <Host class={clsx('table-row', this.interactive && 'table-row--interactive')} role="row">
+      <Host class={clsx(this.interactive && 'interactive')} role="row">
         <slot/>
       </Host>
     )

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

@@ -5,6 +5,16 @@
 <!-- Auto Generated Below -->
 
 
+## 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)                   |
+
+
 ----------------------------------------------
 
 Built with love @ **Maggioli Informatica / R&D Department**

package/src/dictionary/icon.ts

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

package/src/dictionary/typography.ts

@@ -13,6 +13,7 @@ const typographyDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
 ]
 
 const typographyMonoDictionary = [
@@ -36,6 +37,12 @@ const typographySecondaryDictionary = [
   'label',
   'option',
   'paragraph',
+  'tip',
+]
+
+const typographySmallerDictionary = [
+  'option',
+  'tip',
 ]
 
 export {
@@ -43,4 +50,5 @@ export {
   typographyMonoDictionary,
   typographyPrimaryDictionary,
   typographySecondaryDictionary,
+  typographySmallerDictionary,
 }

package/src/dictionary/variant.ts

@@ -3,6 +3,7 @@ const themeVariantDictionary = [
   'error',
   'info',
   'light',
+  'primary',
   'success',
   'warning',
 ]
@@ -19,6 +20,25 @@ const themeStatusVariantDictionary = [
   'warning',
 ]
 
+const themeFullVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'dark',
+  'error',
+  'green',
+  'info',
+  'light',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'success',
+  'violet',
+  'warning',
+  'yellow',
+]
+
 const themeLabelVariantDictionary = [
   'amaranth',
   'aqua',
@@ -39,10 +59,24 @@ const toneVariantDictionary = [
   'quiet',
 ]
 
+const toneSimpleVariantDictionary = [
+  'strong',
+  'weak',
+  'quiet',
+]
+
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+]
+
 export {
+  themeFullVariantDictionary,
   themeLabelVariantDictionary,
   themeLuminanceVariantDictionary,
   themeStatusVariantDictionary,
   themeVariantDictionary,
+  toneMinimalVariantDictionary,
+  toneSimpleVariantDictionary,
   toneVariantDictionary,
 }

package/src/types/typography.ts

@@ -13,6 +13,7 @@ export type TypographyType =
   | 'label'
   | 'option'
   | 'paragraph'
+  | 'tip'
 
 export type TypographyPrimaryType =
   | 'action'
@@ -29,6 +30,11 @@ export type TypographySecondaryType =
   | 'label'
   | 'option'
   | 'paragraph'
+  | 'tip'
+
+export type TypographySmallerType =
+  | 'tip'
+  | 'option'
 
 export type TypographyMonoType =
   | 'code'

package/src/types/variant.ts

@@ -6,11 +6,30 @@ export type ThemeStatusVariantType =
 
 export type ThemeVariantType =
   | 'dark'
+  | 'error'
+  | 'info'
   | 'light'
+  | 'primary'
+  | 'success'
+  | 'warning'
+
+export type ThemeFullVariantType =
+  | 'amaranth'
+  | 'aqua'
+  | 'blue'
+  | 'dark'
   | 'error'
+  | 'green'
   | 'info'
+  | 'light'
+  | 'lime'
+  | 'orange'
+  | 'orchid'
+  | 'sky'
   | 'success'
+  | 'violet'
   | 'warning'
+  | 'yellow'
 
 export type ThemeLuminanceVariantType =
   | 'dark'
@@ -44,3 +63,11 @@ export type ToneVariantType =
   | 'ghost' // bordered
   | 'quiet' // no background, no border
 
+export type ToneSimpleVariantType =
+  | 'strong'
+  | 'weak'
+  | 'quiet'
+
+export type ToneMinimalVariantType =
+| 'strong'
+| 'weak'

package/www/build/mds-table-row.esm.js

@@ -0,0 +1 @@
+import{p as t,b as e}from"./p-3619a466.js";(()=>{const e=import.meta.url,a={};return""!==e&&(a.resourcesUrl=new URL(".",e).href),t(a)})().then((t=>e([["p-db71d0ac",[[4,"mds-table-row",{interactive:[32]},[[16,"tableInteractive","tableInteractiveHandler"]]]]]],t)));