@gataca/design-system 0.2.45 → 0.2.46
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/Action/ActionItems/actionItems_styles.native.d.ts +41 -1
- package/dist/components/native/Action/ActionItems/actionItems_types.native.d.ts +1 -0
- package/dist/components/native/Buttons/Button/Button.types.native.d.ts +1 -0
- package/dist/components/native/Buttons/SegmentedButton/SegmentedButton.types.native.d.ts +2 -1
- package/dist/components/native/Cards/Credential/credential_styles.native.d.ts +3 -2
- package/dist/components/native/Headings/HeadingCredential/HeadingCredential_styles.native.d.ts +20 -0
- package/dist/components/native/Lists/ListItem/listItemContent.native.d.ts +4 -0
- package/dist/components/native/Lists/ListItem/listItem_styles.native.d.ts +9 -0
- package/dist/components/native/Lists/ListItem/listItem_types.native.d.ts +14 -1
- package/dist/components/web/Action/ActionItems/actionItems_styles.web.d.ts +4 -1
- package/dist/components/web/Action/ActionItems/actionItems_types.web.d.ts +1 -0
- package/dist/components/web/Buttons/Button/Button.types.web.d.ts +1 -0
- package/dist/components/web/Buttons/SegmentedButton/SegmentedButton.types.web.d.ts +2 -1
- package/dist/components/web/Lists/ListItem/listItem_styles.web.d.ts +1 -0
- package/dist/components/web/Lists/ListItem/listItem_types.web.d.ts +14 -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/package.json +1 -1
|
@@ -5,6 +5,7 @@ declare const _default: {
|
|
|
5
5
|
alignItems: "center";
|
|
6
6
|
gap: number;
|
|
7
7
|
alignSelf: "flex-start";
|
|
8
|
+
cursor: "pointer";
|
|
8
9
|
};
|
|
9
10
|
actionItemsTextsContainer: {
|
|
10
11
|
display: "flex";
|
|
@@ -16,10 +17,49 @@ declare const _default: {
|
|
|
16
17
|
alignItems: "center";
|
|
17
18
|
gap: number;
|
|
18
19
|
};
|
|
19
|
-
|
|
20
|
+
imageContainer: {
|
|
20
21
|
width: number;
|
|
21
22
|
height: number;
|
|
22
23
|
borderRadius: number;
|
|
24
|
+
position: "relative";
|
|
25
|
+
overflow: "hidden";
|
|
26
|
+
};
|
|
27
|
+
landscapeImage: {
|
|
28
|
+
position: "absolute";
|
|
29
|
+
left: "-50%";
|
|
30
|
+
right: "-50%";
|
|
31
|
+
top: "-50%";
|
|
32
|
+
bottom: "-50%";
|
|
33
|
+
margin: "auto";
|
|
34
|
+
minWidth: "100%";
|
|
35
|
+
minHeight: "100%";
|
|
36
|
+
maxHeight: "100%";
|
|
37
|
+
objectFit: "cover";
|
|
38
|
+
};
|
|
39
|
+
portraitImage: {
|
|
40
|
+
position: "absolute";
|
|
41
|
+
left: "-50%";
|
|
42
|
+
right: "-50%";
|
|
43
|
+
top: "-50%";
|
|
44
|
+
bottom: "-50%";
|
|
45
|
+
margin: "auto";
|
|
46
|
+
minWidth: "100%";
|
|
47
|
+
minHeight: "100%";
|
|
48
|
+
maxWidth: "100%";
|
|
49
|
+
objectFit: "cover";
|
|
50
|
+
};
|
|
51
|
+
squareImage: {
|
|
52
|
+
position: "absolute";
|
|
53
|
+
left: "-50%";
|
|
54
|
+
right: "-50%";
|
|
55
|
+
top: "-50%";
|
|
56
|
+
bottom: "-50%";
|
|
57
|
+
margin: "auto";
|
|
58
|
+
minWidth: "100%";
|
|
59
|
+
minHeight: "100%";
|
|
60
|
+
maxWidth: "100%";
|
|
61
|
+
maxHeight: "100%";
|
|
62
|
+
objectFit: "cover";
|
|
23
63
|
};
|
|
24
64
|
};
|
|
25
65
|
export default _default;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ColorsType } from '../../../../styles/Colors';
|
|
2
2
|
import { StyleType } from '../../../../styles';
|
|
3
|
-
export declare const styles: (
|
|
3
|
+
export declare const styles: (colors: ColorsType, fontStyles: StyleType, background_color?: string) => {
|
|
4
4
|
credCardContainer: {
|
|
5
5
|
display: "flex";
|
|
6
6
|
flexDirection: "column";
|
|
@@ -21,10 +21,11 @@ export declare const styles: (topDataHeight: number, colors: ColorsType, fontSty
|
|
|
21
21
|
display: "flex";
|
|
22
22
|
flexDirection: "column";
|
|
23
23
|
gap: number;
|
|
24
|
+
minHeight: number;
|
|
25
|
+
justifyContent: "space-between";
|
|
24
26
|
};
|
|
25
27
|
credCardTopData: {
|
|
26
28
|
display: "flex";
|
|
27
|
-
minHeight: number;
|
|
28
29
|
alignSelf: "stretch";
|
|
29
30
|
};
|
|
30
31
|
credCardDetailRow: {
|
package/dist/components/native/Headings/HeadingCredential/HeadingCredential_styles.native.d.ts
CHANGED
|
@@ -13,20 +13,40 @@ declare const _default: {
|
|
|
13
13
|
borderRadius: number;
|
|
14
14
|
};
|
|
15
15
|
landscapeImage: {
|
|
16
|
+
position: "absolute";
|
|
17
|
+
left: "-50%";
|
|
18
|
+
right: "-50%";
|
|
19
|
+
top: "-50%";
|
|
20
|
+
bottom: "-50%";
|
|
21
|
+
margin: "auto";
|
|
16
22
|
minWidth: "100%";
|
|
17
23
|
minHeight: "100%";
|
|
18
24
|
maxHeight: "100%";
|
|
19
25
|
objectFit: "cover";
|
|
20
26
|
};
|
|
21
27
|
portraitImage: {
|
|
28
|
+
position: "absolute";
|
|
29
|
+
left: "-50%";
|
|
30
|
+
right: "-50%";
|
|
31
|
+
top: "-50%";
|
|
32
|
+
bottom: "-50%";
|
|
33
|
+
margin: "auto";
|
|
22
34
|
minWidth: "100%";
|
|
23
35
|
minHeight: "100%";
|
|
24
36
|
maxWidth: "100%";
|
|
25
37
|
objectFit: "cover";
|
|
26
38
|
};
|
|
27
39
|
squareImage: {
|
|
40
|
+
position: "absolute";
|
|
41
|
+
left: "-50%";
|
|
42
|
+
right: "-50%";
|
|
43
|
+
top: "-50%";
|
|
44
|
+
bottom: "-50%";
|
|
45
|
+
margin: "auto";
|
|
28
46
|
minWidth: "100%";
|
|
29
47
|
minHeight: "100%";
|
|
48
|
+
maxWidth: "100%";
|
|
49
|
+
maxHeight: "100%";
|
|
30
50
|
objectFit: "cover";
|
|
31
51
|
};
|
|
32
52
|
};
|
|
@@ -14,6 +14,7 @@ declare const _default: {
|
|
|
14
14
|
justifyContent: "space-between";
|
|
15
15
|
alignItems: "center";
|
|
16
16
|
gap: number;
|
|
17
|
+
flexWrap: "wrap";
|
|
17
18
|
alignSelf: "stretch";
|
|
18
19
|
paddingVertical: number;
|
|
19
20
|
paddingHorizontal: number;
|
|
@@ -27,5 +28,13 @@ declare const _default: {
|
|
|
27
28
|
alignItems: "center";
|
|
28
29
|
gap: number;
|
|
29
30
|
};
|
|
31
|
+
notificationContainer: {
|
|
32
|
+
display: "flex";
|
|
33
|
+
flexDirection: "column";
|
|
34
|
+
justifyContent: "center";
|
|
35
|
+
alignItems: "center";
|
|
36
|
+
cursor: "pointer";
|
|
37
|
+
marginLeft: "auto";
|
|
38
|
+
};
|
|
30
39
|
};
|
|
31
40
|
export default _default;
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.native';
|
|
1
2
|
import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.native';
|
|
3
|
+
import { ButtonProps } from '../../Buttons/Button/Button.types.native';
|
|
4
|
+
import { SegmentedButtonProps } from '../../Buttons/SegmentedButton/SegmentedButton.types.native';
|
|
2
5
|
import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.native';
|
|
3
6
|
import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.native';
|
|
7
|
+
import { ChipProps } from '../../Chips/Chip/Chip.types.native';
|
|
4
8
|
import { IconSize } from '../../Icons/icon_types';
|
|
5
9
|
import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.native';
|
|
6
10
|
import { SwitchProps } from '../../Switch/Switch/switch_types.native';
|
|
@@ -9,7 +13,7 @@ export type ListItemSize = 'medium' | 'small';
|
|
|
9
13
|
export type ListItemColor = 'black' | 'gray';
|
|
10
14
|
export type ListItemAlign = 'left' | 'right';
|
|
11
15
|
export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'indicator';
|
|
12
|
-
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button';
|
|
16
|
+
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button' | 'chip';
|
|
13
17
|
export interface ListItemProps {
|
|
14
18
|
condition: ListItemCondition;
|
|
15
19
|
title?: string;
|
|
@@ -31,7 +35,16 @@ export interface ListItemProps {
|
|
|
31
35
|
size: IconSize;
|
|
32
36
|
color: string;
|
|
33
37
|
}>;
|
|
38
|
+
segmentedButton?: SegmentedButtonProps;
|
|
39
|
+
trailingValue?: string;
|
|
34
40
|
hasHoverStyle?: boolean;
|
|
35
41
|
containerStyle?: any;
|
|
42
|
+
actionItem?: ActionItemsProps;
|
|
43
|
+
notification?: {
|
|
44
|
+
text: string;
|
|
45
|
+
onPress: (x: any) => void;
|
|
46
|
+
};
|
|
47
|
+
button?: ButtonProps;
|
|
48
|
+
chip?: ChipProps;
|
|
36
49
|
onPress?: (x: any) => void;
|
|
37
50
|
}
|
|
@@ -3,5 +3,8 @@ export declare const styles: () => {
|
|
|
3
3
|
actionItemsContainer: React.CSSProperties;
|
|
4
4
|
actionItemsTextsContainer: React.CSSProperties;
|
|
5
5
|
actionItemsTitleContainer: React.CSSProperties;
|
|
6
|
-
|
|
6
|
+
imageContainer: React.CSSProperties;
|
|
7
|
+
landscapeImage: React.CSSProperties;
|
|
8
|
+
portraitImage: React.CSSProperties;
|
|
9
|
+
squareImage: React.CSSProperties;
|
|
7
10
|
};
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.web';
|
|
1
2
|
import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.web';
|
|
3
|
+
import { ButtonProps } from '../../Buttons/Button/Button.types.web';
|
|
4
|
+
import { SegmentedButtonProps } from '../../Buttons/SegmentedButton/SegmentedButton.types.web';
|
|
2
5
|
import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.web';
|
|
3
6
|
import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.web';
|
|
7
|
+
import { ChipProps } from '../../Chips/Chip/Chip.types.web';
|
|
4
8
|
import { IconSize } from '../../Icons/icon_types';
|
|
5
9
|
import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.web';
|
|
6
10
|
import { SwitchProps } from '../../Switch/Switch/switch_types.web';
|
|
@@ -9,7 +13,7 @@ export type ListItemSize = 'medium' | 'small';
|
|
|
9
13
|
export type ListItemColor = 'black' | 'gray';
|
|
10
14
|
export type ListItemAlign = 'left' | 'right';
|
|
11
15
|
export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'indicator';
|
|
12
|
-
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button';
|
|
16
|
+
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button' | 'chip';
|
|
13
17
|
export interface ListItemProps {
|
|
14
18
|
condition: ListItemCondition;
|
|
15
19
|
title?: string;
|
|
@@ -31,7 +35,16 @@ export interface ListItemProps {
|
|
|
31
35
|
size: IconSize;
|
|
32
36
|
color: string;
|
|
33
37
|
}>;
|
|
38
|
+
segmentedButton?: SegmentedButtonProps;
|
|
39
|
+
trailingValue?: string;
|
|
40
|
+
actionItem?: ActionItemsProps;
|
|
34
41
|
hasHoverStyle?: boolean;
|
|
35
42
|
radioButton?: RadioButtonProps;
|
|
43
|
+
notification?: {
|
|
44
|
+
text: string;
|
|
45
|
+
onPress: (x: any) => void;
|
|
46
|
+
};
|
|
47
|
+
button?: ButtonProps;
|
|
48
|
+
chip?: ChipProps;
|
|
36
49
|
onPress?: (x: any) => void;
|
|
37
50
|
}
|