Skip to content

Commit 583b5da

Browse files
nathanosdevnathanosdev
committed
feat: add review summary markdown
1 parent d8e2112 commit 583b5da

29 files changed

Lines changed: 603 additions & 333 deletions

File tree

‎lib/angular-ui/src/lib/molecules/copy-to-clipboard/copy-to-clipboard.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export class CopyToClipboardComponent {
2020
public readonly value =
2121
input.required<HTMLCgCopyToClipboardElement['value']>();
2222

23+
public readonly type = input<HTMLCgCopyToClipboardElement['type']>();
24+
2325
constructor(
2426
private readonly ngZone: NgZone,
2527
private readonly elementRef: ElementRef<HTMLCgCopyToClipboardElement>,
@@ -31,5 +33,17 @@ export class CopyToClipboardComponent {
3133
this.elementRef.nativeElement.value = value;
3234
});
3335
});
36+
37+
effect(() => {
38+
const type = this.type();
39+
// [TODO]: use `isNil` from `@cg/utils` package
40+
if (!type) {
41+
return;
42+
}
43+
44+
this.ngZone.runOutsideAngular(() => {
45+
this.elementRef.nativeElement.type = type;
46+
});
47+
});
3448
}
3549
}

‎lib/styles/common.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@forward 'common/dropdown';
55
@forward 'common/effects';
66
@forward 'common/elevation';
7+
@forward 'common/forms';
78
@forward 'common/icons';
89
@forward 'common/responsiveness';
910
@forward 'common/sizing';

‎lib/styles/common/forms.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@use 'sizing';
2+
@use 'colors';
3+
@use 'dark-mode';
4+
@use 'effects';
5+
6+
@mixin input-common {
7+
display: block;
8+
width: 100%;
9+
10+
border-radius: sizing.$border-sm-radius;
11+
border: sizing.$border-md-size solid colors.$slate-400;
12+
padding: sizing.size(2.5);
13+
14+
font-size: 0.875rem;
15+
line-height: 1.25rem;
16+
17+
color: colors.$slate-900;
18+
background-color: colors.$white;
19+
outline: none;
20+
21+
&:focus {
22+
border-color: colors.$primary;
23+
@include effects.ring(colors.$primary-400);
24+
25+
@include dark-mode.dark {
26+
@include effects.ring(colors.$primary-800);
27+
}
28+
}
29+
30+
@include dark-mode.dark {
31+
color: colors.$slate-200;
32+
background-color: colors.$slate-950;
33+
border-color: colors.$slate-500;
34+
}
35+
}
36+
37+
@mixin text-area {
38+
height: sizing.size(24);
39+
resize: vertical;
40+
}

‎lib/styles/global/buttons.scss‎

Lines changed: 25 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
1-
@use '../common/colors';
2-
@use '../common/dark-mode';
3-
@use '../common/effects';
4-
@use '../common/icons';
5-
@use '../common/sizing';
6-
@use '../common/utils';
1+
@use '../common';
72

8-
$btn-color: colors.$primary;
9-
$bn-hover-color: colors.$primary-600;
10-
$btn-disabled-color: rgba(colors.$primary, 0.45);
3+
$btn-color: common.$primary;
4+
$bn-hover-color: common.$primary-600;
5+
$btn-disabled-color: rgba(common.$primary, 0.45);
116

127
.btn {
13-
@include sizing.px(4);
14-
@include sizing.py(1);
15-
@include utils.no-underline;
8+
@include common.px(4);
9+
@include common.py(1);
10+
@include common.no-underline;
1611

17-
border: sizing.$border-md-size solid transparent;
18-
border-radius: sizing.$border-sm-radius;
12+
border: common.$border-md-size solid transparent;
13+
border-radius: common.$border-sm-radius;
1914
outline: none;
2015

21-
color: colors.$white;
16+
color: common.$white;
2217
background-color: $btn-color;
2318
position: relative;
2419

@@ -28,10 +23,10 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
2823
}
2924

3025
&:focus:not(:disabled) {
31-
@include effects.ring(colors.$primary-400);
26+
@include common.ring(common.$primary-400);
3227

33-
@include dark-mode.dark {
34-
@include effects.ring(colors.$primary-800);
28+
@include common.dark {
29+
@include common.ring(common.$primary-800);
3530
}
3631
}
3732

@@ -50,7 +45,7 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
5045
background-color: transparent;
5146

5247
&:hover:not(:disabled) {
53-
color: colors.$white;
48+
color: common.$white;
5449
}
5550

5651
&:disabled {
@@ -60,22 +55,22 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
6055
}
6156

6257
&.btn--success {
63-
color: colors.$success;
64-
border-color: colors.$success;
58+
color: common.$success;
59+
border-color: common.$success;
6560

6661
&:hover:not(:disabled) {
67-
background-color: colors.$success;
68-
border-color: colors.$success;
62+
background-color: common.$success;
63+
border-color: common.$success;
6964
}
7065
}
7166

7267
&.btn--error {
73-
color: colors.$error;
74-
border-color: colors.$error;
68+
color: common.$error;
69+
border-color: common.$error;
7570

7671
&:hover:not(:disabled) {
77-
background-color: colors.$error;
78-
border-color: colors.$error;
72+
background-color: common.$error;
73+
border-color: common.$error;
7974
}
8075
}
8176
}
@@ -85,17 +80,17 @@ $btn-disabled-color: rgba(colors.$primary, 0.45);
8580
flex-direction: row;
8681
justify-content: end;
8782
align-items: center;
88-
margin-top: sizing.size(4);
83+
margin-top: common.size(4);
8984

9085
> :not(:last-child) {
91-
margin-right: sizing.size(2);
86+
margin-right: common.size(2);
9287
}
9388
}
9489

9590
.btn--loading {
9691
position: absolute;
9792
left: 50%;
9893
top: 50%;
99-
@include icons.icon-xxl;
94+
@include common.icon-xxl;
10095
transform: translate(-50%, -50%);
10196
}

‎lib/styles/global/forms.scss‎

Lines changed: 9 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,27 @@
1-
@use '../common/colors';
2-
@use '../common/dark-mode';
3-
@use '../common/effects';
4-
@use '../common/sizing';
1+
@use '../common';
52

63
.input {
7-
display: block;
8-
width: 100%;
9-
10-
border-radius: sizing.$border-sm-radius;
11-
border: sizing.$border-md-size solid colors.$slate-400;
12-
padding: sizing.size(2.5);
13-
14-
font-size: 0.875rem;
15-
line-height: 1.25rem;
16-
17-
color: colors.$slate-900;
18-
background-color: colors.$white;
19-
outline: none;
20-
21-
&:focus {
22-
border-color: colors.$primary;
23-
@include effects.ring(colors.$primary-400);
24-
25-
@include dark-mode.dark {
26-
@include effects.ring(colors.$primary-800);
27-
}
28-
}
29-
30-
@include dark-mode.dark {
31-
color: colors.$slate-200;
32-
background-color: colors.$slate-950;
33-
border-color: colors.$slate-500;
34-
}
4+
@include common.input-common;
355
}
366

377
.input--invalid {
38-
border-color: colors.$error;
8+
border-color: common.$error;
399

4010
&:focus {
41-
border-color: colors.$error;
11+
border-color: common.$error;
4212

43-
@include effects.ring(colors.$error);
13+
@include common.ring(common.$error);
4414
}
4515
}
4616

4717
.input--textarea {
48-
height: sizing.size(24);
49-
resize: vertical;
18+
@include common.text-area;
5019
}
5120

5221
.label {
53-
color: colors.$black;
22+
color: common.$black;
5423

55-
@include dark-mode.dark {
56-
color: colors.$white;
24+
@include common.dark {
25+
color: common.$white;
5726
}
5827
}

‎lib/styles/global/icons.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../common/icons';
1+
@use '../common';
22

33
.icon {
44
width: 100%;
@@ -8,25 +8,25 @@
88
}
99

1010
.icon-xs {
11-
@include icons.icon-xs;
11+
@include common.icon-xs;
1212
}
1313

1414
.icon-sm {
15-
@include icons.icon-sm;
15+
@include common.icon-sm;
1616
}
1717

1818
.icon-md {
19-
@include icons.icon-md;
19+
@include common.icon-md;
2020
}
2121

2222
.icon-lg {
23-
@include icons.icon-lg;
23+
@include common.icon-lg;
2424
}
2525

2626
.icon-xl {
27-
@include icons.icon-xl;
27+
@include common.icon-xl;
2828
}
2929

3030
.icon-xxl {
31-
@include icons.icon-xxl;
31+
@include common.icon-xxl;
3232
}

‎lib/styles/global/overlays.scss‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
@use '../common/colors';
2-
@use '../common/elevation';
1+
@use '../common';
32

43
.backdrop {
5-
@include elevation.layer-40;
4+
@include common.layer-40;
65
position: fixed;
76
top: 0;
87
left: 0;
98
right: 0;
109
bottom: 0;
11-
background-color: rgba(colors.$slate-800, 0.8);
10+
background-color: rgba(common.$slate-800, 0.8);
1211
}

0 commit comments

Comments
 (0)