Merge pull request #1818 from smeup/chip-test

Chip test
smeup · Mar 20, 2024 · a08b3e1 · a08b3e1
2 parents 7a83721 + 60da2b3
commit a08b3e1
Show file tree

Hide file tree

Showing 21 changed files with 212 additions and 94 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/packages/.DS_Store b/packages/.DS_Store
diff --git a/packages/ketchup/src/card.html b/packages/ketchup/src/card.html
@@ -301,6 +301,13 @@ <h1 style="display: block; width: 100%">Scalable layouts</h1>
                     size-x="300px"
                     size-y="300px"
                 ></kup-card>
+                <kup-card
+                    id="scalable-card-11"
+                    layout-family="scalable"
+                    layout-number="11"
+                    size-x="300px"
+                    size-y="300px"
+                ></kup-card>
                 <h1 style="display: block; width: 100%">Dialog layouts</h1
                 ><kup-card
                     id="dialog-card-5"

diff --git a/packages/ketchup/src/chart.html b/packages/ketchup/src/chart.html
@@ -44,6 +44,11 @@
     </head>
 
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <div class="config-panel">
             <div class="field">
                 <label for="colors">Custom colors</label>
@@ -104,13 +109,11 @@ <h1>Stacked series</h1>
         <h1>Combo chart</h1>
         <kup-chart id="combo-chart"></kup-chart>
         <hr />
-        
+
         <h1>Timeline chart</h1>
         <kup-chart id="timeline-chart"></kup-chart>
         <hr />
 
-
-
         <script src="/assets/chart.js"></script>
     </body>
 </html>
diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
@@ -58,10 +58,10 @@
   .box-wrapper {
     display: flex;
     align-items: center;
-    background-color: var(--kup_box_background_color);
-    border-radius: var(--kup-radius-00);
 
     .box {
+      background-color: var(--kup_box_background_color);
+      border-radius: var(--kup-radius-00);
       flex-grow: 1;
       cursor: pointer;
       position: relative;
@@ -84,7 +84,7 @@
       }
 
       &.selected {
-        background-color: var(---kup_box_background_color_hover);
+        background-color: var(--kup_box_background_color_hover);
 
         & .box-section.titled > h3 {
           background-color: transparent;

diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-2.scss
@@ -1,6 +1,5 @@
 .built-in-layout-2 {
   background-color: var(--kup-background-color);
-  border-radius: 4px;
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
     0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);

diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss
@@ -1,45 +1,33 @@
-.scalable-layout-9 {
-  background-color: var(--color-1);
-  color: var(--color-2);
+.scalable-layout-10 {
+  background-color: var(--kup-gray-color-10);
+  color: var(--kup-gray-color-70);
   height: 100%;
   display: flex;
   justify-content: unset;
   overflow: auto;
-  border-radius: 4px;
-
-  .section-1 {
-    background-color: var(--color-0);
-    width: 20%;
-    height: 100%;
-  }
-
-  .section-2 {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
+  width: 100%;
 
   .text {
     display: flex;
     justify-content: center;
     flex-direction: column;
   }
 
-  .descr {
-    font-size: 80%;
+  .number {
+    display: flex;
+    justify-content: space-between;
   }
 
-  .value {
-    font-size: 220%;
+  .title {
+    font-size: 120%;
   }
 
-  .buttons { 
+  .buttons {
     height: max-content;
     margin-bottom: 2%;
   }
 
   .f-button {
     float: right;
   }
-}
+}
diff --git a/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx b/packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx
@@ -595,7 +595,7 @@ export function create9(component: KupCard): VNode {
 }
 
 /**
- * 9th scalable card layout, tile view.
+ * 10th scalable card layout, tile view.
  * @param {KupCard} component - Card component.
  * @returns {VNode} 8th scalable layout virtual node.
  */
@@ -615,11 +615,21 @@ export function create10(component: KupCard): VNode {
         component.data.color && component.data.color.length > 2
             ? component.data.color[2]
             : `var(${KupThemeColorValues.TEXT})`;
+    //Icon
+    const imageArray: GenericObject[] = component.data['image']
+        ? component.data['image']
+        : [];
+    //Image color
+
+    const colorArray: string[] = component.data['color']
+        ? component.data['color']
+        : [];
     // Main text
     const mainText =
         component.data.text && component.data.text.length > 0
             ? component.data.text[0]
             : null;
+
     // Sub text
     const subText =
         component.data.text && component.data.text.length > 1
@@ -647,12 +657,88 @@ export function create10(component: KupCard): VNode {
             class={`scalable-layout-${component.layoutNumber}`}
             style={CSSVariables}
         >
-            <div class="section-1"></div>
-            <div class="section-2">
-                <div class="scalable-card">
-                    <div class="text scalable-element">
-                        <div class="value">{mainText}</div>
-                        <div class="descr">{subText}</div>
+            <div class="scalable-card">
+                <div class="text scalable-element">
+                    <div class="title">{mainText}</div>
+                    <div class="number">
+                        <div>
+                            <div class="icon">
+                                {imageArray[0] ? (
+                                    <FImage
+                                        color={
+                                            colorArray[0]
+                                                ? colorArray[0]
+                                                : `var(${KupThemeColorValues.PRIMARY})`
+                                        }
+                                        id="image1"
+                                        {...imageArray[0]}
+                                        sizeX="1.25em"
+                                        sizeY="1.25em"
+                                    ></FImage>
+                                ) : null}
+                            </div>
+                        </div>
+                        <div>{subText}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+/**
+ * 11th scalable card layout, icon with title and subtitle.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 8th scalable layout virtual node.
+ */
+export function create11(component: KupCard): VNode {
+    //Image color
+    const colorArray: string[] = component.data['color']
+        ? component.data['color']
+        : [];
+    //Icon
+    const imageArray: GenericObject[] = component.data['image']
+        ? component.data['image']
+        : [];
+    //Title, subtitle
+    let textIndex: number = 0;
+    const textArray: string[] = component.data['text']
+        ? component.data['text']
+        : [];
+    return (
+        <div class={`scalable-layout-${component.layoutNumber} scalable-card`}>
+            <div class="scalable-element">
+                <div class="icon">
+                    {imageArray[0] ? (
+                        <FImage
+                            color={
+                                colorArray[0]
+                                    ? colorArray[0]
+                                    : `var(${KupThemeColorValues.PRIMARY})`
+                            }
+                            id="image1"
+                            {...imageArray[0]}
+                            sizeX="1em"
+                            sizeY="1em"
+                        ></FImage>
+                    ) : null}
+                </div>
+                <div class="value">
+                    <div
+                        style={
+                            colorArray[1] ? { color: colorArray[1] } : undefined
+                        }
+                    >
+                        {textArray[textIndex] ? textArray[textIndex] : ''}
+                    </div>
+                </div>
+                <div class="descr">
+                    <div
+                        style={
+                            colorArray[2] ? { color: colorArray[2] } : undefined
+                        }
+                    >
+                        {textArray[++textIndex] ? textArray[textIndex] : ''}
                     </div>
                 </div>
             </div>

diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-12.scss
@@ -21,7 +21,7 @@
     flex-direction: column;
     &.has-content {
       border-bottom: 1px solid var(--kup-border-color);
-      padding: 0.5em 0.5em;
+      padding: var(--kup-space-05);
     }
     kup-date-picker:first-of-type,
     kup-time-picker:first-of-type {
@@ -35,6 +35,7 @@
     flex-direction: column;
     max-height: 20vh;
     overflow: auto;
+    padding: var(--kup-space-05);
     kup-checkbox {
       margin-left: 0;
       margin-right: auto;

diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-14.scss
@@ -53,6 +53,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        @include kup-heading-02;
 
         &:hover {
           text-decoration: underline;
@@ -70,11 +71,13 @@
         margin-right: 0.75em;
         min-width: max-content;
         width: auto;
+        @include kup-body-compact-01;
       }
 
       .value {
         font-weight: 600;
         width: 100%;
+        @include kup-heading-compact-01;
       }
     }
   }
@@ -105,7 +108,7 @@
   }
 
   .sub-formula {
-    padding: 0.5em;
+    padding: 0.5em 0;
   }
 
   .sub-chip {
@@ -117,9 +120,10 @@
   .sub-field {
     display: flex;
     flex-direction: column;
+    gap: var(--kup-space-03);
     &.has-content {
       border-bottom: 1px solid var(--kup-border-color);
-      padding: 0.5em 0.5em;
+      padding: 0.5em 0;
     }
     kup-date-picker:first-of-type,
     kup-time-picker:first-of-type {

diff --git a/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss b/packages/ketchup/src/components/kup-card/standard/kup-card-standard-15.scss
@@ -54,6 +54,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        @include kup-heading-02;
 
         &:hover {
           text-decoration: underline;
@@ -71,11 +72,13 @@
         margin-right: 0.75em;
         min-width: max-content;
         width: auto;
+        @include kup-body-compact-01;
       }
 
       .value {
         font-weight: 600;
         width: 100%;
+        @include kup-heading-compact-01;
       }
     }
   }
@@ -112,6 +115,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        @include kup-body-compact-01;
       }
 
       &__value {
@@ -122,6 +126,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        @include kup-heading-compact-01;
       }
     }
 

diff --git a/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx b/packages/ketchup/src/components/kup-data-table/kup-data-table.tsx
@@ -5741,7 +5741,7 @@ export class KupDataTable {
                         ) : null}
                         {this.insertMode !== '' ? (
                             <FButton
-                                label="Add new"
+                                label="Crea nuovo"
                                 // icon="plus"
                                 onClick={async () => {
                                     if (this.insertMode === 'form') {