@gataca/design-system 0.3.56 → 0.3.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/native/Cards/Credential/credential.native.d.ts +1 -41
- package/dist/components/native/Cards/Credential/credential_styles.native.d.ts +6 -0
- package/dist/components/native/Cards/Credential/credential_types.native.d.ts +44 -0
- package/dist/components/native/Cards/MiniCredential/miniCredential_styles.native.d.ts +2 -0
- package/dist/components/native/Cards/MiniCredential/miniCredential_types.native.d.ts +5 -0
- package/dist/components/native/Chips/Chip/Chip.config.native.d.ts +47 -1
- package/dist/components/native/Chips/Chip/Chip.types.native.d.ts +1 -1
- package/dist/components/native/Chips/Chip/styles.native.d.ts +0 -2
- package/dist/components/web/Cards/Credential/credential.web.d.ts +1 -41
- package/dist/components/web/Cards/Credential/credential_styles.web.d.ts +1 -0
- package/dist/components/web/Cards/Credential/credential_types.web.d.ts +44 -0
- package/dist/components/web/Cards/MiniCredential/miniCredential_types.web.d.ts +5 -0
- package/dist/components/web/Chips/Chip/Chip.config.web.d.ts +41 -1
- package/dist/components/web/Chips/Chip/Chip.types.web.d.ts +1 -1
- package/dist/index.native.js +1 -1
- package/dist/index.native.js.map +1 -1
- package/dist/index.web.js +1 -1
- package/dist/index.web.js.map +1 -1
- package/dist/utils/colors.d.ts +6 -0
- package/package.json +1 -1
|
@@ -1,43 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
|
|
3
|
-
type CredentialCardProps = {
|
|
4
|
-
state: CredentialCardStates;
|
|
5
|
-
issuer: {
|
|
6
|
-
image?: string;
|
|
7
|
-
name: string;
|
|
8
|
-
failToLoadImageText?: string;
|
|
9
|
-
};
|
|
10
|
-
verifiedIcon?: VerifiedIcons;
|
|
11
|
-
headingCredential1: {
|
|
12
|
-
typeText: string;
|
|
13
|
-
valueText?: string;
|
|
14
|
-
imageSlot?: string;
|
|
15
|
-
};
|
|
16
|
-
headingCredential2: {
|
|
17
|
-
typeText: string;
|
|
18
|
-
};
|
|
19
|
-
headingCredential3?: {
|
|
20
|
-
typeText: string;
|
|
21
|
-
valueText: string;
|
|
22
|
-
};
|
|
23
|
-
headingCredential4: {
|
|
24
|
-
typeText: string;
|
|
25
|
-
valueText: string;
|
|
26
|
-
};
|
|
27
|
-
headingCredential5: {
|
|
28
|
-
typeText: string;
|
|
29
|
-
valueText?: string;
|
|
30
|
-
chip?: {
|
|
31
|
-
color: HeadingCredentialChipColor;
|
|
32
|
-
text: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
style?: any;
|
|
36
|
-
display?: {
|
|
37
|
-
background_color?: string;
|
|
38
|
-
text_color?: string;
|
|
39
|
-
hasGradient?: boolean;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
1
|
+
import { CredentialCardProps } from './credential_types.native';
|
|
42
2
|
declare const CredentialCard: (props: CredentialCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
3
|
export default CredentialCard;
|
|
@@ -71,6 +71,12 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
|
|
|
71
71
|
height: number;
|
|
72
72
|
resizeMode: "contain";
|
|
73
73
|
};
|
|
74
|
+
chipAndVerifiedIconContainer: {
|
|
75
|
+
display: "flex";
|
|
76
|
+
flexDirection: "row";
|
|
77
|
+
alignItems: "center";
|
|
78
|
+
gap: number;
|
|
79
|
+
};
|
|
74
80
|
};
|
|
75
81
|
export declare const credentialCardShadows: (colors: ColorsType) => {
|
|
76
82
|
elevation: number;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
|
|
1
2
|
import { IconSize, IconStyle } from '../../Icons/icon_types';
|
|
2
3
|
export type CredentialCardStates = 'open' | 'closed';
|
|
3
4
|
export type VerifiedIcons = 'error' | 'check';
|
|
@@ -10,3 +11,46 @@ export declare const verifiedIconMap: {
|
|
|
10
11
|
crossColor?: string;
|
|
11
12
|
}>;
|
|
12
13
|
};
|
|
14
|
+
export type CredentialCardProps = {
|
|
15
|
+
state: CredentialCardStates;
|
|
16
|
+
issuer: {
|
|
17
|
+
image?: string;
|
|
18
|
+
name: string;
|
|
19
|
+
failToLoadImageText?: string;
|
|
20
|
+
};
|
|
21
|
+
chip?: {
|
|
22
|
+
text: string;
|
|
23
|
+
containerStyle?: any;
|
|
24
|
+
};
|
|
25
|
+
verifiedIcon?: VerifiedIcons;
|
|
26
|
+
headingCredential1: {
|
|
27
|
+
typeText: string;
|
|
28
|
+
valueText?: string;
|
|
29
|
+
imageSlot?: string;
|
|
30
|
+
};
|
|
31
|
+
headingCredential2: {
|
|
32
|
+
typeText: string;
|
|
33
|
+
};
|
|
34
|
+
headingCredential3?: {
|
|
35
|
+
typeText: string;
|
|
36
|
+
valueText: string;
|
|
37
|
+
};
|
|
38
|
+
headingCredential4: {
|
|
39
|
+
typeText: string;
|
|
40
|
+
valueText: string;
|
|
41
|
+
};
|
|
42
|
+
headingCredential5: {
|
|
43
|
+
typeText: string;
|
|
44
|
+
valueText?: string;
|
|
45
|
+
chip?: {
|
|
46
|
+
color: HeadingCredentialChipColor;
|
|
47
|
+
text: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
style?: any;
|
|
51
|
+
display?: {
|
|
52
|
+
background_color?: string;
|
|
53
|
+
text_color?: string;
|
|
54
|
+
hasGradient?: boolean;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
@@ -19,11 +19,13 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
|
|
|
19
19
|
width: "100%";
|
|
20
20
|
height: "100%";
|
|
21
21
|
alignSelf: "stretch";
|
|
22
|
+
gap: number;
|
|
22
23
|
};
|
|
23
24
|
credCardMainContent: {
|
|
24
25
|
display: "flex";
|
|
25
26
|
flexDirection: "column";
|
|
26
27
|
gap: number;
|
|
28
|
+
minHeight: number;
|
|
27
29
|
};
|
|
28
30
|
credCardTopData: {
|
|
29
31
|
display: "flex";
|
|
@@ -184,6 +184,40 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
184
184
|
};
|
|
185
185
|
};
|
|
186
186
|
};
|
|
187
|
+
lightYellow: {
|
|
188
|
+
filled: {
|
|
189
|
+
enable: {
|
|
190
|
+
backgroundColor: string;
|
|
191
|
+
textColor: string;
|
|
192
|
+
};
|
|
193
|
+
hover: {
|
|
194
|
+
backgroundColor: string;
|
|
195
|
+
textColor: string;
|
|
196
|
+
};
|
|
197
|
+
active: {
|
|
198
|
+
backgroundColor: string;
|
|
199
|
+
textColor: string;
|
|
200
|
+
};
|
|
201
|
+
disable: {
|
|
202
|
+
backgroundColor: string;
|
|
203
|
+
textColor: string;
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
outline: {
|
|
207
|
+
enable: {
|
|
208
|
+
textColor: string;
|
|
209
|
+
};
|
|
210
|
+
hover: {
|
|
211
|
+
textColor: string;
|
|
212
|
+
};
|
|
213
|
+
active: {
|
|
214
|
+
textColor: string;
|
|
215
|
+
};
|
|
216
|
+
disable: {
|
|
217
|
+
textColor: string;
|
|
218
|
+
};
|
|
219
|
+
};
|
|
220
|
+
};
|
|
187
221
|
blue: {
|
|
188
222
|
filled: {
|
|
189
223
|
enable: {
|
|
@@ -357,14 +391,26 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
357
391
|
};
|
|
358
392
|
};
|
|
359
393
|
};
|
|
360
|
-
export declare const getChipGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, form: string) => {
|
|
394
|
+
export declare const getChipGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, form: string, chipSize: string) => {
|
|
361
395
|
backgroundColor: any;
|
|
362
396
|
borderColor: any;
|
|
363
397
|
borderWidth: number;
|
|
364
398
|
borderRadius: number;
|
|
365
399
|
textColor: any;
|
|
400
|
+
paddingVertical: chipVerticalPadding;
|
|
401
|
+
paddingHorizontal: chipHorizontalPadding;
|
|
366
402
|
};
|
|
367
403
|
export declare const getChipFontStyles: (FontStyles: StyleType, chipSize: string, state: string) => import("../../../../styles/Fonts").FontsStyle;
|
|
404
|
+
export declare enum chipVerticalPadding {
|
|
405
|
+
'large' = 4,
|
|
406
|
+
'medium' = 3,
|
|
407
|
+
'small' = 2
|
|
408
|
+
}
|
|
409
|
+
export declare enum chipHorizontalPadding {
|
|
410
|
+
'large' = 8,
|
|
411
|
+
'medium' = 6,
|
|
412
|
+
'small' = 5
|
|
413
|
+
}
|
|
368
414
|
export declare const getChipTextStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, chipSize: string) => {
|
|
369
415
|
lineHeight: number | undefined;
|
|
370
416
|
color: any;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type ChipColor = 'yellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
|
|
1
|
+
export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
|
|
2
2
|
export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
|
|
3
3
|
export type ChipStyle = 'outline' | 'filled';
|
|
4
4
|
export type ChipForm = 'square' | 'round';
|
|
@@ -1,43 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
|
|
3
|
-
type CredentialCardProps = {
|
|
4
|
-
state: CredentialCardStates;
|
|
5
|
-
issuer: {
|
|
6
|
-
image?: string;
|
|
7
|
-
name: string;
|
|
8
|
-
failToLoadImageText?: string;
|
|
9
|
-
};
|
|
10
|
-
verifiedIcon?: VerifiedIcons;
|
|
11
|
-
headingCredential1: {
|
|
12
|
-
typeText: string;
|
|
13
|
-
valueText?: string;
|
|
14
|
-
imageSlot?: string;
|
|
15
|
-
};
|
|
16
|
-
headingCredential2: {
|
|
17
|
-
typeText: string;
|
|
18
|
-
};
|
|
19
|
-
headingCredential3: {
|
|
20
|
-
typeText: string;
|
|
21
|
-
valueText: string;
|
|
22
|
-
};
|
|
23
|
-
headingCredential4: {
|
|
24
|
-
typeText: string;
|
|
25
|
-
valueText: string;
|
|
26
|
-
};
|
|
27
|
-
headingCredential5: {
|
|
28
|
-
typeText: string;
|
|
29
|
-
valueText?: string;
|
|
30
|
-
chip?: {
|
|
31
|
-
color: HeadingCredentialChipColor;
|
|
32
|
-
text: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
display?: {
|
|
36
|
-
background_color?: string;
|
|
37
|
-
text_color?: string;
|
|
38
|
-
hasGradient?: boolean;
|
|
39
|
-
};
|
|
40
|
-
style?: any;
|
|
41
|
-
};
|
|
1
|
+
import { CredentialCardProps } from './credential_types.web';
|
|
42
2
|
declare const CredentialCard: (props: CredentialCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
43
3
|
export default CredentialCard;
|
|
@@ -11,4 +11,5 @@ export declare const styles: (topDataHeight: number, colors: ColorsType, fontSty
|
|
|
11
11
|
credIssuerImageError: React.CSSProperties;
|
|
12
12
|
credCardIssuerImage: React.CSSProperties;
|
|
13
13
|
credCardVerifiedIcon: React.CSSProperties;
|
|
14
|
+
chipAndVerifiedIconContainer: React.CSSProperties;
|
|
14
15
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
|
|
1
2
|
import { IconSize, IconStyle } from '../../Icons/icon_types';
|
|
2
3
|
export type CredentialCardStates = 'open' | 'closed';
|
|
3
4
|
export type VerifiedIcons = 'error' | 'check';
|
|
@@ -10,3 +11,46 @@ export declare const verifiedIconMap: {
|
|
|
10
11
|
crossColor?: string;
|
|
11
12
|
}>;
|
|
12
13
|
};
|
|
14
|
+
export type CredentialCardProps = {
|
|
15
|
+
state: CredentialCardStates;
|
|
16
|
+
issuer: {
|
|
17
|
+
image?: string;
|
|
18
|
+
name: string;
|
|
19
|
+
failToLoadImageText?: string;
|
|
20
|
+
};
|
|
21
|
+
chip?: {
|
|
22
|
+
text: string;
|
|
23
|
+
containerStyle?: any;
|
|
24
|
+
};
|
|
25
|
+
verifiedIcon?: VerifiedIcons;
|
|
26
|
+
headingCredential1: {
|
|
27
|
+
typeText: string;
|
|
28
|
+
valueText?: string;
|
|
29
|
+
imageSlot?: string;
|
|
30
|
+
};
|
|
31
|
+
headingCredential2: {
|
|
32
|
+
typeText: string;
|
|
33
|
+
};
|
|
34
|
+
headingCredential3: {
|
|
35
|
+
typeText: string;
|
|
36
|
+
valueText: string;
|
|
37
|
+
};
|
|
38
|
+
headingCredential4: {
|
|
39
|
+
typeText: string;
|
|
40
|
+
valueText: string;
|
|
41
|
+
};
|
|
42
|
+
headingCredential5: {
|
|
43
|
+
typeText: string;
|
|
44
|
+
valueText?: string;
|
|
45
|
+
chip?: {
|
|
46
|
+
color: HeadingCredentialChipColor;
|
|
47
|
+
text: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
display?: {
|
|
51
|
+
background_color?: string;
|
|
52
|
+
text_color?: string;
|
|
53
|
+
hasGradient?: boolean;
|
|
54
|
+
};
|
|
55
|
+
style?: any;
|
|
56
|
+
};
|
|
@@ -184,6 +184,40 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
184
184
|
};
|
|
185
185
|
};
|
|
186
186
|
};
|
|
187
|
+
lightYellow: {
|
|
188
|
+
filled: {
|
|
189
|
+
enable: {
|
|
190
|
+
backgroundColor: string;
|
|
191
|
+
textColor: string;
|
|
192
|
+
};
|
|
193
|
+
hover: {
|
|
194
|
+
backgroundColor: string;
|
|
195
|
+
textColor: string;
|
|
196
|
+
};
|
|
197
|
+
active: {
|
|
198
|
+
backgroundColor: string;
|
|
199
|
+
textColor: string;
|
|
200
|
+
};
|
|
201
|
+
disable: {
|
|
202
|
+
backgroundColor: string;
|
|
203
|
+
textColor: string;
|
|
204
|
+
};
|
|
205
|
+
};
|
|
206
|
+
outline: {
|
|
207
|
+
enable: {
|
|
208
|
+
textColor: string;
|
|
209
|
+
};
|
|
210
|
+
hover: {
|
|
211
|
+
textColor: string;
|
|
212
|
+
};
|
|
213
|
+
active: {
|
|
214
|
+
textColor: string;
|
|
215
|
+
};
|
|
216
|
+
disable: {
|
|
217
|
+
textColor: string;
|
|
218
|
+
};
|
|
219
|
+
};
|
|
220
|
+
};
|
|
187
221
|
blue: {
|
|
188
222
|
filled: {
|
|
189
223
|
enable: {
|
|
@@ -357,14 +391,20 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
357
391
|
};
|
|
358
392
|
};
|
|
359
393
|
};
|
|
360
|
-
export declare const getChipGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, form: string) => {
|
|
394
|
+
export declare const getChipGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, form: string, chipSize: string) => {
|
|
361
395
|
backgroundColor: any;
|
|
362
396
|
borderColor: any;
|
|
363
397
|
borderWidth: number;
|
|
364
398
|
borderRadius: number;
|
|
365
399
|
textColor: any;
|
|
400
|
+
padding: chipPadding;
|
|
366
401
|
};
|
|
367
402
|
export declare const getChipFontStyles: (FontStyles: StyleType, chipSize: string, state: string) => import("../../../../styles/Fonts").FontsStyle;
|
|
403
|
+
export declare enum chipPadding {
|
|
404
|
+
'large' = "4px 8px",
|
|
405
|
+
'medium' = "3px 6px",
|
|
406
|
+
'small' = "2px 5px"
|
|
407
|
+
}
|
|
368
408
|
export declare const getChipTextStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, chipSize: string) => {
|
|
369
409
|
lineHeight: number | undefined;
|
|
370
410
|
color: any;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type ChipColor = 'yellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
|
|
1
|
+
export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
|
|
2
2
|
export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
|
|
3
3
|
export type ChipStyle = 'outline' | 'filled';
|
|
4
4
|
export type ChipForm = 'square' | 'round';
|