@gataca/design-system 0.4.15 → 0.4.17
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/assets/update~SEJFBKXV.png +0 -0
- package/dist/components/index.native.d.ts +2 -0
- package/dist/components/index.web.d.ts +2 -0
- package/dist/components/native/Buttons/Button/Button.config.native.d.ts +1 -1
- package/dist/components/native/Cards/MiniCredential/miniCredential_styles.native.d.ts +41 -1
- package/dist/components/native/Cards/MiniCredential/miniCredential_types.native.d.ts +4 -0
- package/dist/components/native/Chips/Chip/Chip.config.native.d.ts +34 -0
- package/dist/components/native/Chips/Chip/Chip.types.native.d.ts +1 -1
- package/dist/components/native/Dialog/Dialog/dialog_types.native.d.ts +1 -1
- package/dist/components/native/Drawer/BottomDrawer/bottomDrawer_styles.native.d.ts +0 -14
- package/dist/components/native/Headings/HeadingContainer/HeadingContainer_types.native.d.ts +1 -1
- package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer.native.d.ts +4 -0
- package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer_styles.native.d.ts +21 -0
- package/dist/components/native/Headings/StatusHeadingContainer/StatusHeadingContainer_types.native.d.ts +22 -0
- package/dist/components/native/Headings/StatusHeadingContainer/index.native.d.ts +2 -0
- package/dist/components/native/Icons/icons/moreHorizontal.d.ts +8 -0
- package/dist/components/native/Icons/index.native.d.ts +1 -0
- package/dist/components/native/Illustrations/illustrations_types.d.ts +1 -0
- package/dist/components/native/Lists/List/list_types.native.d.ts +3 -0
- package/dist/components/native/Lists/ListItem/listItem.config.native.d.ts +74 -0
- package/dist/components/native/Lists/ListItem/listItem_styles.native.d.ts +0 -10
- package/dist/components/native/Lists/ListItem/listItem_types.native.d.ts +11 -21
- package/dist/components/native/Lists/ListMetaContainer/listMetaContainer_types.native.d.ts +23 -4
- package/dist/components/native/TopAppBar/TopAppBar/topAppBar_types.native.d.ts +11 -3
- package/dist/components/native/TopAppBar/TopDrawerBar/topDrawerBar_styles.native.d.ts +16 -1
- package/dist/components/native/TopAppBar/TopDrawerBar/topDrawerBar_types.native.d.ts +1 -0
- package/dist/components/web/Buttons/RoundedButton/RoundedButton.config.web.d.ts +2 -4
- package/dist/components/web/Cards/MiniCredential/miniCredential_styles.web.d.ts +5 -1
- package/dist/components/web/Cards/MiniCredential/miniCredential_types.web.d.ts +4 -0
- package/dist/components/web/Chips/Chip/Chip.config.web.d.ts +34 -0
- package/dist/components/web/Chips/Chip/Chip.types.web.d.ts +1 -1
- package/dist/components/web/Headings/HeadingContainer/HeadingContainer_types.web.d.ts +1 -1
- package/dist/components/web/Headings/StatusHeadingContainer/StatusHeadingContainer.web.d.ts +4 -0
- package/dist/components/web/Headings/StatusHeadingContainer/StatusHeadingContainer_styles.web.d.ts +5 -0
- package/dist/components/web/Headings/StatusHeadingContainer/StatusHeadingContainer_types.web.d.ts +19 -0
- package/dist/components/web/Headings/StatusHeadingContainer/index.web.d.ts +2 -0
- package/dist/components/web/Icons/icons/moreHorizontal.d.ts +9 -0
- package/dist/components/web/Icons/index.web.d.ts +1 -0
- package/dist/components/web/Lists/List/list_types.web.d.ts +3 -0
- package/dist/components/web/Lists/ListItem/listItem.config.web.d.ts +62 -0
- package/dist/components/web/Lists/ListItem/listItem_styles.web.d.ts +0 -1
- package/dist/components/web/Lists/ListItem/listItem_types.web.d.ts +15 -26
- package/dist/components/web/Lists/ListMetaContainer/listMetaContainer_types.web.d.ts +25 -4
- 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
|
@@ -320,6 +320,40 @@ export declare const createColorMap: (Colors: ColorsType) => {
|
|
|
320
320
|
};
|
|
321
321
|
};
|
|
322
322
|
};
|
|
323
|
+
lightPink: {
|
|
324
|
+
filled: {
|
|
325
|
+
enable: {
|
|
326
|
+
backgroundColor: string;
|
|
327
|
+
textColor: string;
|
|
328
|
+
};
|
|
329
|
+
hover: {
|
|
330
|
+
backgroundColor: string;
|
|
331
|
+
textColor: string;
|
|
332
|
+
};
|
|
333
|
+
active: {
|
|
334
|
+
backgroundColor: string;
|
|
335
|
+
textColor: string;
|
|
336
|
+
};
|
|
337
|
+
disable: {
|
|
338
|
+
backgroundColor: string;
|
|
339
|
+
textColor: string;
|
|
340
|
+
};
|
|
341
|
+
};
|
|
342
|
+
outline: {
|
|
343
|
+
enable: {
|
|
344
|
+
textColor: string;
|
|
345
|
+
};
|
|
346
|
+
hover: {
|
|
347
|
+
textColor: string;
|
|
348
|
+
};
|
|
349
|
+
active: {
|
|
350
|
+
textColor: string;
|
|
351
|
+
};
|
|
352
|
+
disable: {
|
|
353
|
+
textColor: string;
|
|
354
|
+
};
|
|
355
|
+
};
|
|
356
|
+
};
|
|
323
357
|
grey: {
|
|
324
358
|
filled: {
|
|
325
359
|
enable: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
|
|
2
|
-
export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
|
|
2
|
+
export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'lightPink' | 'black';
|
|
3
3
|
export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
|
|
4
4
|
export type ChipStyle = 'outline' | 'filled';
|
|
5
5
|
export type ChipForm = 'square' | 'round';
|
|
@@ -15,7 +15,7 @@ export interface HeadingContainerProps {
|
|
|
15
15
|
align?: HeadingContainerAlign;
|
|
16
16
|
titleText?: string;
|
|
17
17
|
titleTooltip?: ParentComponentTooltipProps;
|
|
18
|
-
contentText?: string;
|
|
18
|
+
contentText?: string | React.Component | any;
|
|
19
19
|
sectionName?: string;
|
|
20
20
|
chip?: ChipProps;
|
|
21
21
|
containerStyle?: any;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StatusHeadingContainerProps } from './StatusHeadingContainer_types.web';
|
|
3
|
+
declare const StatusHeadingContainer: (props: React.PropsWithChildren<StatusHeadingContainerProps>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export default StatusHeadingContainer;
|
package/dist/components/web/Headings/StatusHeadingContainer/StatusHeadingContainer_types.web.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { IllustrationProps } from '../../Illustrations/illustrations_types';
|
|
2
|
+
import { HeadingContainerProps } from '../HeadingContainer/HeadingContainer_types.web';
|
|
3
|
+
export interface StatusHeadingContainerProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
swapIllustration: IllustrationProps;
|
|
6
|
+
headingContainer: HeadingContainerProps;
|
|
7
|
+
bottomImage?: {
|
|
8
|
+
source: any;
|
|
9
|
+
id?: string;
|
|
10
|
+
width?: number | string;
|
|
11
|
+
height?: number | string;
|
|
12
|
+
containerStyle?: any;
|
|
13
|
+
resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center' | undefined;
|
|
14
|
+
resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
|
|
15
|
+
parentContainerStyle?: any;
|
|
16
|
+
alt?: string;
|
|
17
|
+
};
|
|
18
|
+
containerStyle?: any;
|
|
19
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { IconSize } from '../icon_types';
|
|
2
|
+
type MoreHorizontalIconProps = {
|
|
3
|
+
id?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
size: IconSize;
|
|
6
|
+
color?: string;
|
|
7
|
+
};
|
|
8
|
+
declare const MoreHorizontalIcon: (props: MoreHorizontalIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default MoreHorizontalIcon;
|
|
@@ -97,6 +97,7 @@ export { default as MinusIcon } from './icons/minus';
|
|
|
97
97
|
export { default as MoneyIcon } from './icons/money';
|
|
98
98
|
export { default as MonitorIcon } from './icons/monitor';
|
|
99
99
|
export { default as MoreVerticalIcon } from './icons/moreVertical';
|
|
100
|
+
export { default as MoreHorizontalIcon } from './icons/moreHorizontal';
|
|
100
101
|
export { default as PencilIcon } from './icons/pencil';
|
|
101
102
|
export { default as PlayCircleIcon } from './icons/playCircle';
|
|
102
103
|
export { default as PlusSquaresIcon } from './icons/plusSquares';
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
+
import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingContainer_types.web';
|
|
1
2
|
import { ListItemProps } from '../ListItem/listItem_types.web';
|
|
2
3
|
export type ListBg = 'grey' | 'white';
|
|
3
4
|
export interface ListProps {
|
|
4
5
|
id?: string;
|
|
5
6
|
className?: string;
|
|
6
7
|
list: ListItemProps[];
|
|
8
|
+
spacing?: boolean;
|
|
7
9
|
bgColor?: ListBg;
|
|
8
10
|
borderTop?: boolean;
|
|
9
11
|
containerStyle?: any;
|
|
12
|
+
headingContainer?: HeadingContainerProps;
|
|
10
13
|
}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { ColorsType } from '../../../../utils/theming';
|
|
2
|
+
import { ListItemColor, ListItemState, ListItemType } from './listItem_types.web';
|
|
3
|
+
export declare const createColorMap: (Colors: ColorsType) => {
|
|
4
|
+
white: {
|
|
5
|
+
enable: string;
|
|
6
|
+
hover: string;
|
|
7
|
+
active: string;
|
|
8
|
+
};
|
|
9
|
+
grey: {
|
|
10
|
+
enable: string;
|
|
11
|
+
hover: string;
|
|
12
|
+
active: string;
|
|
13
|
+
};
|
|
14
|
+
none: {
|
|
15
|
+
enable: string;
|
|
16
|
+
hover: string;
|
|
17
|
+
active: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export declare const getContainerStyles: (colors: ColorsType, color?: ListItemColor, type?: ListItemType, state?: ListItemState) => {
|
|
21
|
+
borderBottomRightRadius: number;
|
|
22
|
+
borderBottomLeftRadius: number;
|
|
23
|
+
borderRadius?: undefined;
|
|
24
|
+
border: string;
|
|
25
|
+
borderTop?: undefined;
|
|
26
|
+
backgroundColor: string;
|
|
27
|
+
} | {
|
|
28
|
+
borderRadius: number;
|
|
29
|
+
borderBottomRightRadius?: undefined;
|
|
30
|
+
borderBottomLeftRadius?: undefined;
|
|
31
|
+
border: string;
|
|
32
|
+
borderTop?: undefined;
|
|
33
|
+
backgroundColor: string;
|
|
34
|
+
} | {
|
|
35
|
+
borderBottomRightRadius: number;
|
|
36
|
+
borderBottomLeftRadius: number;
|
|
37
|
+
borderRadius?: undefined;
|
|
38
|
+
borderTop: string;
|
|
39
|
+
border?: undefined;
|
|
40
|
+
backgroundColor: string;
|
|
41
|
+
} | {
|
|
42
|
+
borderRadius: number;
|
|
43
|
+
borderBottomRightRadius?: undefined;
|
|
44
|
+
borderBottomLeftRadius?: undefined;
|
|
45
|
+
borderTop: string;
|
|
46
|
+
border?: undefined;
|
|
47
|
+
backgroundColor: string;
|
|
48
|
+
} | {
|
|
49
|
+
borderBottomRightRadius: number;
|
|
50
|
+
borderBottomLeftRadius: number;
|
|
51
|
+
borderRadius?: undefined;
|
|
52
|
+
border: number;
|
|
53
|
+
borderTop?: undefined;
|
|
54
|
+
backgroundColor: string;
|
|
55
|
+
} | {
|
|
56
|
+
borderRadius: number;
|
|
57
|
+
borderBottomRightRadius?: undefined;
|
|
58
|
+
borderBottomLeftRadius?: undefined;
|
|
59
|
+
border: number;
|
|
60
|
+
borderTop?: undefined;
|
|
61
|
+
backgroundColor: string;
|
|
62
|
+
};
|
|
@@ -11,35 +11,30 @@ import { IconSize } from '../../Icons/icon_types';
|
|
|
11
11
|
import { IconGroupProps } from '../../Icons/IconGroup/iconGroup_types.web';
|
|
12
12
|
import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.web';
|
|
13
13
|
import { SwitchProps } from '../../Switch/Switch/switch_types.web';
|
|
14
|
-
import {
|
|
15
|
-
export type ListItemType = 'filled' | '
|
|
16
|
-
export type ListItemState = 'enable' | 'active';
|
|
17
|
-
export type
|
|
18
|
-
export type
|
|
19
|
-
export type ListItemColor = 'black' | 'gray' | 'white' | 'red';
|
|
20
|
-
export type ListItemAlign = 'left' | 'right';
|
|
14
|
+
import { ListMetaContainerProps } from '../ListMetaContainer/listMetaContainer_types.web';
|
|
15
|
+
export type ListItemType = 'filled' | 'outline' | 'divider' | 'select';
|
|
16
|
+
export type ListItemState = 'enable' | 'hover' | 'active';
|
|
17
|
+
export type ListItemColor = 'white' | 'grey' | 'none';
|
|
18
|
+
export type ListItemAlign = 'center' | 'top';
|
|
21
19
|
export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'indicator' | 'chip' | 'buttonIcon' | 'chipGroup';
|
|
22
|
-
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | '
|
|
20
|
+
export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'icon' | 'segmentedButton' | 'listMetaContainer' | 'action' | 'button' | 'chip' | 'iconGroup';
|
|
23
21
|
export interface ListItemProps {
|
|
24
22
|
id?: string;
|
|
25
23
|
className?: string;
|
|
24
|
+
color?: ListItemColor;
|
|
26
25
|
type?: ListItemType;
|
|
27
26
|
state?: ListItemState;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
content?: string;
|
|
31
|
-
extraInfo?: string;
|
|
32
|
-
mainTextColor?: ListMetaContainerColor;
|
|
33
|
-
mainActionItem?: ActionItemsProps;
|
|
34
|
-
mainTextInfoColor?: ListMetaContainerColor;
|
|
27
|
+
align?: ListItemAlign;
|
|
28
|
+
listMetaContainer?: ListMetaContainerProps;
|
|
35
29
|
leading: ListItemLeading;
|
|
36
30
|
trailing: ListItemTrailing;
|
|
37
31
|
helperText?: string;
|
|
38
32
|
avatar?: AvatarProps;
|
|
39
33
|
credential?: MiniCredentialCardProps;
|
|
40
|
-
|
|
34
|
+
leadingButtonIcon?: ButtonIconProps;
|
|
41
35
|
checkbox?: CheckboxProps;
|
|
42
36
|
switchOpt?: SwitchProps;
|
|
37
|
+
radioButton?: RadioButtonProps;
|
|
43
38
|
iconGroup?: IconGroupProps;
|
|
44
39
|
leadingIcon?: {
|
|
45
40
|
Icon: React.FC<{
|
|
@@ -56,20 +51,14 @@ export interface ListItemProps {
|
|
|
56
51
|
color?: string;
|
|
57
52
|
};
|
|
58
53
|
segmentedButton?: SegmentedButtonProps;
|
|
59
|
-
|
|
60
|
-
actionItem?: ActionItemsProps;
|
|
54
|
+
trailingListMetaContainer?: ListMetaContainerProps;
|
|
61
55
|
hasHoverStyle?: boolean;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
id?: string;
|
|
65
|
-
className?: string;
|
|
66
|
-
text: string;
|
|
67
|
-
onClick: (x?: any) => void;
|
|
68
|
-
};
|
|
56
|
+
containerStyle?: any;
|
|
57
|
+
actionItem?: ActionItemsProps;
|
|
69
58
|
button?: ButtonProps;
|
|
70
59
|
leadingChip?: ChipProps;
|
|
71
60
|
chip?: ChipProps;
|
|
72
61
|
chipGroup?: ChipGroupProps;
|
|
73
|
-
|
|
62
|
+
typeSelectRadioButton?: RadioButtonProps;
|
|
74
63
|
onClick?: (x?: any) => void;
|
|
75
64
|
}
|
|
@@ -1,23 +1,44 @@
|
|
|
1
1
|
import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.web';
|
|
2
|
+
import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.web';
|
|
2
3
|
import { ChipProps } from '../../Chips/Chip/Chip.types.web';
|
|
4
|
+
import { IconSize, IconStyle } from '../../Icons/icon_types';
|
|
3
5
|
import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
|
|
4
6
|
export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
|
|
7
|
+
export type ListMetaContainerType = 'main' | 'notification';
|
|
8
|
+
export type ListMetaContainerMainColor = 'white' | 'black';
|
|
5
9
|
export type ListMetaContainerSize = 'medium' | 'small';
|
|
6
|
-
export type ListMetaContainerColor = 'black' | 'gray' | '
|
|
10
|
+
export type ListMetaContainerColor = 'black' | 'gray' | 'purple' | 'white';
|
|
7
11
|
export type ListMetaContainerAlign = 'left' | 'right';
|
|
8
12
|
export interface ListMetaContainerProps {
|
|
9
13
|
id?: string;
|
|
10
14
|
className?: string;
|
|
11
15
|
condition: ListMetaContainerCondition;
|
|
16
|
+
type?: ListMetaContainerType;
|
|
12
17
|
size?: ListMetaContainerSize;
|
|
13
|
-
|
|
14
|
-
|
|
18
|
+
mainColor?: ListMetaContainerMainColor;
|
|
19
|
+
titleColor?: ListMetaContainerColor;
|
|
20
|
+
contentColor?: ListMetaContainerColor;
|
|
15
21
|
align?: ListMetaContainerAlign;
|
|
16
22
|
tooltip?: ParentComponentTooltipProps;
|
|
17
23
|
chip?: ChipProps;
|
|
18
24
|
actionItem?: ActionItemsProps;
|
|
19
25
|
title?: string;
|
|
20
26
|
content?: string;
|
|
21
|
-
extraInfo?: string;
|
|
27
|
+
extraInfo?: string | React.Component | any;
|
|
28
|
+
icon16px?: {
|
|
29
|
+
id?: string;
|
|
30
|
+
className?: string;
|
|
31
|
+
color?: string;
|
|
32
|
+
style?: IconStyle;
|
|
33
|
+
Icon?: React.FC<{
|
|
34
|
+
id?: string;
|
|
35
|
+
className?: string;
|
|
36
|
+
size: IconSize;
|
|
37
|
+
style?: IconStyle;
|
|
38
|
+
color: string;
|
|
39
|
+
}>;
|
|
40
|
+
onClick: (x?: any) => void;
|
|
41
|
+
};
|
|
42
|
+
roundedButton?: RoundedButtonProps;
|
|
22
43
|
containerStyle?: any;
|
|
23
44
|
}
|