Skip to content

Commit 69cc169

Browse files
Leonardo-SignorelliLeonardo-Signorelli
committed
Kup-card : dash layout plus
1 parent 14eeec3 commit 69cc169

File tree

3 files changed

+111
-30
lines changed

3 files changed

+111
-30
lines changed

‎packages/ketchup/src/card.html

+7
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,13 @@ <h1 style="display: block; width: 100%">Scalable layouts</h1>
301301
size-x="300px"
302302
size-y="300px"
303303
></kup-card>
304+
<kup-card
305+
id="scalable-card-11"
306+
layout-family="scalable"
307+
layout-number="11"
308+
size-x="300px"
309+
size-y="300px"
310+
></kup-card>
304311
<h1 style="display: block; width: 100%">Dialog layouts</h1
305312
><kup-card
306313
id="dialog-card-5"

‎packages/ketchup/src/components/kup-card/scalable/kup-card-scalable-10.scss

+11-23
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,33 @@
1-
.scalable-layout-9 {
2-
background-color: var(--color-1);
3-
color: var(--color-2);
1+
.scalable-layout-10 {
2+
background-color: var(--kup-gray-color-10);
3+
color: var(--kup-gray-color-70);
44
height: 100%;
55
display: flex;
66
justify-content: unset;
77
overflow: auto;
8-
border-radius: 4px;
9-
10-
.section-1 {
11-
background-color: var(--color-0);
12-
width: 20%;
13-
height: 100%;
14-
}
15-
16-
.section-2 {
17-
width: 100%;
18-
height: 100%;
19-
display: flex;
20-
flex-direction: column;
21-
}
8+
width: 100%;
229

2310
.text {
2411
display: flex;
2512
justify-content: center;
2613
flex-direction: column;
2714
}
2815

29-
.descr {
30-
font-size: 80%;
16+
.number {
17+
display: flex;
18+
justify-content: space-between;
3119
}
3220

33-
.value {
34-
font-size: 220%;
21+
.title {
22+
font-size: 120%;
3523
}
3624

37-
.buttons {
25+
.buttons {
3826
height: max-content;
3927
margin-bottom: 2%;
4028
}
4129

4230
.f-button {
4331
float: right;
4432
}
45-
}
33+
}

‎packages/ketchup/src/components/kup-card/scalable/kup-card-scalable.tsx

+93-7
Original file line numberDiff line numberDiff line change
@@ -595,7 +595,7 @@ export function create9(component: KupCard): VNode {
595595
}
596596

597597
/**
598-
* 9th scalable card layout, tile view.
598+
* 10th scalable card layout, tile view.
599599
* @param {KupCard} component - Card component.
600600
* @returns {VNode} 8th scalable layout virtual node.
601601
*/
@@ -615,11 +615,21 @@ export function create10(component: KupCard): VNode {
615615
component.data.color && component.data.color.length > 2
616616
? component.data.color[2]
617617
: `var(${KupThemeColorValues.TEXT})`;
618+
//Icon
619+
const imageArray: GenericObject[] = component.data['image']
620+
? component.data['image']
621+
: [];
622+
//Image color
623+
624+
const colorArray: string[] = component.data['color']
625+
? component.data['color']
626+
: [];
618627
// Main text
619628
const mainText =
620629
component.data.text && component.data.text.length > 0
621630
? component.data.text[0]
622631
: null;
632+
623633
// Sub text
624634
const subText =
625635
component.data.text && component.data.text.length > 1
@@ -647,12 +657,88 @@ export function create10(component: KupCard): VNode {
647657
class={`scalable-layout-${component.layoutNumber}`}
648658
style={CSSVariables}
649659
>
650-
<div class="section-1"></div>
651-
<div class="section-2">
652-
<div class="scalable-card">
653-
<div class="text scalable-element">
654-
<div class="value">{mainText}</div>
655-
<div class="descr">{subText}</div>
660+
<div class="scalable-card">
661+
<div class="text scalable-element">
662+
<div class="title">{mainText}</div>
663+
<div class="number">
664+
<div>
665+
<div class="icon">
666+
{imageArray[0] ? (
667+
<FImage
668+
color={
669+
colorArray[0]
670+
? colorArray[0]
671+
: `var(${KupThemeColorValues.PRIMARY})`
672+
}
673+
id="image1"
674+
{...imageArray[0]}
675+
sizeX="1.25em"
676+
sizeY="1.25em"
677+
></FImage>
678+
) : null}
679+
</div>
680+
</div>
681+
<div>{subText}</div>
682+
</div>
683+
</div>
684+
</div>
685+
</div>
686+
);
687+
}
688+
689+
/**
690+
* 11th scalable card layout, icon with title and subtitle.
691+
* @param {KupCard} component - Card component.
692+
* @returns {VNode} 8th scalable layout virtual node.
693+
*/
694+
export function create11(component: KupCard): VNode {
695+
//Image color
696+
const colorArray: string[] = component.data['color']
697+
? component.data['color']
698+
: [];
699+
//Icon
700+
const imageArray: GenericObject[] = component.data['image']
701+
? component.data['image']
702+
: [];
703+
//Title, subtitle
704+
let textIndex: number = 0;
705+
const textArray: string[] = component.data['text']
706+
? component.data['text']
707+
: [];
708+
return (
709+
<div class={`scalable-layout-${component.layoutNumber} scalable-card`}>
710+
<div class="scalable-element">
711+
<div class="icon">
712+
{imageArray[0] ? (
713+
<FImage
714+
color={
715+
colorArray[0]
716+
? colorArray[0]
717+
: `var(${KupThemeColorValues.PRIMARY})`
718+
}
719+
id="image1"
720+
{...imageArray[0]}
721+
sizeX="1em"
722+
sizeY="1em"
723+
></FImage>
724+
) : null}
725+
</div>
726+
<div class="value">
727+
<div
728+
style={
729+
colorArray[1] ? { color: colorArray[1] } : undefined
730+
}
731+
>
732+
{textArray[textIndex] ? textArray[textIndex] : ''}
733+
</div>
734+
</div>
735+
<div class="descr">
736+
<div
737+
style={
738+
colorArray[2] ? { color: colorArray[2] } : undefined
739+
}
740+
>
741+
{textArray[++textIndex] ? textArray[textIndex] : ''}
656742
</div>
657743
</div>
658744
</div>

0 commit comments

Comments
 (0)