@bitrise/bitkit 13.150.1-alpha.13 → 13.151.1-alpha.0
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/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import NotificationCard from '../Patterns/NotificationCard/NotificationCard.theme';
|
|
2
|
+
import SettingsCard from '../Patterns/SettingsCard/SettingsCard.theme';
|
|
2
3
|
import Alert from './Alert/Alert.theme';
|
|
3
4
|
import Accordion from './Accordion/Accordion.theme';
|
|
4
5
|
import Avatar from './Avatar/Avatar.theme';
|
|
@@ -104,6 +105,7 @@ const components = {
|
|
|
104
105
|
Textarea,
|
|
105
106
|
Toggletip,
|
|
106
107
|
Tooltip,
|
|
108
|
+
SettingsCard,
|
|
107
109
|
};
|
|
108
110
|
|
|
109
111
|
export default components;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
|
|
2
|
+
|
|
3
|
+
const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
|
|
4
|
+
'container',
|
|
5
|
+
'data',
|
|
6
|
+
'actions',
|
|
7
|
+
'footer',
|
|
8
|
+
]);
|
|
9
|
+
|
|
10
|
+
const baseStyle = definePartsStyle({
|
|
11
|
+
container: {
|
|
12
|
+
paddingTop: '16',
|
|
13
|
+
display: 'grid',
|
|
14
|
+
gridTemplateAreas: '"lspace data actions rspace" "space space space space" "footer footer footer footer"',
|
|
15
|
+
gridTemplateColumns: '1.5rem 1fr max-content 1.5rem',
|
|
16
|
+
gridTemplateRows: 'min-content 1rem min-content',
|
|
17
|
+
},
|
|
18
|
+
data: {
|
|
19
|
+
gridArea: 'data',
|
|
20
|
+
},
|
|
21
|
+
actions: {
|
|
22
|
+
gridArea: 'actions',
|
|
23
|
+
alignSelf: 'center',
|
|
24
|
+
marginLeft: '12',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
gap: '8',
|
|
28
|
+
},
|
|
29
|
+
footer: {
|
|
30
|
+
gridArea: 'footer',
|
|
31
|
+
borderTop: '1px solid',
|
|
32
|
+
borderColor: 'border/regular',
|
|
33
|
+
paddingX: '24',
|
|
34
|
+
paddingBottom: '8',
|
|
35
|
+
paddingTop: '6',
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
const SettingsCardTheme = defineMultiStyleConfig({
|
|
40
|
+
baseStyle,
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
export default SettingsCardTheme;
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { CardProps, createStylesContext, useMultiStyleConfig } from '@chakra-ui/react';
|
|
3
|
+
import Card from '../../Components/Card/Card';
|
|
4
|
+
import LabeledData, { LabeledDataProps } from '../../Components/LabeledData/LabeledData';
|
|
5
|
+
import Box from '../../Components/Box/Box';
|
|
6
|
+
import Toggle, { ToggleProps } from '../../Components/Toggle/Toggle';
|
|
7
|
+
import Icon, { IconProps } from '../../Components/Icon/Icon';
|
|
8
|
+
import Text from '../../Components/Text/Text';
|
|
9
|
+
import Skeleton from '../../Components/Skeleton/Skeleton';
|
|
10
|
+
import SkeletonBox from '../../Components/Skeleton/SkeletonBox';
|
|
11
|
+
import ToggleComponent, { ToggleComponentProps } from '../../Components/Toggle/ToggleComponent';
|
|
12
|
+
|
|
13
|
+
const [SettingsCardStyleProvider, useSettingsCardStyle] = createStylesContext('SettingsCard');
|
|
14
|
+
export const SettingsCardData = (props: LabeledDataProps) => {
|
|
15
|
+
const { data } = useSettingsCardStyle();
|
|
16
|
+
return <LabeledData {...props} __css={data} />;
|
|
17
|
+
};
|
|
18
|
+
export const SettingsCardActions = ({ children }: { children: ReactNode }) => {
|
|
19
|
+
const { actions } = useSettingsCardStyle();
|
|
20
|
+
return <Box __css={actions}>{children}</Box>;
|
|
21
|
+
};
|
|
22
|
+
export const SettingsCardOnOffValue = (props: Pick<ToggleProps, 'isChecked' | 'valueText' | 'label'>) => {
|
|
23
|
+
const { data } = useSettingsCardStyle();
|
|
24
|
+
return (
|
|
25
|
+
<Box __css={data}>
|
|
26
|
+
<Toggle {...props} isReadOnly />
|
|
27
|
+
</Box>
|
|
28
|
+
);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const SettingsCardToggle = (props: Omit<ToggleProps, 'variant'> & { label: ReactNode }) => {
|
|
32
|
+
const { data } = useSettingsCardStyle();
|
|
33
|
+
return (
|
|
34
|
+
<Box __css={data}>
|
|
35
|
+
<Toggle {...props} variant="fixed" />
|
|
36
|
+
</Box>
|
|
37
|
+
);
|
|
38
|
+
};
|
|
39
|
+
export const SettingsCardFooter = ({ children }: { children: ReactNode }) => {
|
|
40
|
+
const { footer } = useSettingsCardStyle();
|
|
41
|
+
return <Box __css={footer}>{children}</Box>;
|
|
42
|
+
};
|
|
43
|
+
export const SettingsCardFooterToggle = ({
|
|
44
|
+
label,
|
|
45
|
+
errorText,
|
|
46
|
+
...props
|
|
47
|
+
}: { label: string; errorText?: string } & ToggleComponentProps) => {
|
|
48
|
+
return (
|
|
49
|
+
<SettingsCardFooter>
|
|
50
|
+
<Box display="flex" alignItems="center" gap="8">
|
|
51
|
+
<Text textStyle="body/md/regular" aria-hidden>
|
|
52
|
+
{label}
|
|
53
|
+
</Text>
|
|
54
|
+
<ToggleComponent aria-label={label} size="sm" {...props} />
|
|
55
|
+
{errorText && (
|
|
56
|
+
<>
|
|
57
|
+
<Box flexGrow="1" />
|
|
58
|
+
|
|
59
|
+
<Box display="flex" flexDirection="row" gap="4">
|
|
60
|
+
<Icon
|
|
61
|
+
size="16"
|
|
62
|
+
textStyle="body/md/regular"
|
|
63
|
+
color="icon.negative"
|
|
64
|
+
name="ErrorCircleFilled"
|
|
65
|
+
alignSelf="center"
|
|
66
|
+
/>
|
|
67
|
+
<Text color="text.negative" textStyle="body/md/regular" gridArea="message">
|
|
68
|
+
{errorText}
|
|
69
|
+
</Text>
|
|
70
|
+
</Box>
|
|
71
|
+
</>
|
|
72
|
+
)}
|
|
73
|
+
</Box>
|
|
74
|
+
</SettingsCardFooter>
|
|
75
|
+
);
|
|
76
|
+
};
|
|
77
|
+
export const SettingsCardFooterError = ({
|
|
78
|
+
message,
|
|
79
|
+
reason,
|
|
80
|
+
helperText,
|
|
81
|
+
}: {
|
|
82
|
+
message: string;
|
|
83
|
+
reason: ReactNode;
|
|
84
|
+
helperText?: ReactNode;
|
|
85
|
+
}) => {
|
|
86
|
+
return (
|
|
87
|
+
<SettingsCardFooter>
|
|
88
|
+
<Box
|
|
89
|
+
display="grid"
|
|
90
|
+
gridTemplateAreas='"icon message" ". reason" "help help"'
|
|
91
|
+
columnGap="4"
|
|
92
|
+
gridTemplateColumns="min-content auto"
|
|
93
|
+
>
|
|
94
|
+
<Icon size="16" color="icon.negative" name="ErrorCircleFilled" gridArea="icon" alignSelf="center" />
|
|
95
|
+
<Text color="text.negative" textStyle="body/md/regular" gridArea="message">
|
|
96
|
+
{message}
|
|
97
|
+
</Text>
|
|
98
|
+
<Text textStyle="body/sm/regular" gridArea="reason">
|
|
99
|
+
{reason}
|
|
100
|
+
</Text>
|
|
101
|
+
<Text marginTop="8" textStyle="body/sm/regular" color="text.secondary" gridArea="help">
|
|
102
|
+
{helperText}
|
|
103
|
+
</Text>
|
|
104
|
+
</Box>
|
|
105
|
+
</SettingsCardFooter>
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
type FooterStatus = 'neutral' | 'failed' | 'success' | 'in-progress';
|
|
109
|
+
const StatusIcons: Record<FooterStatus, Pick<IconProps, 'color' | 'name'>> = {
|
|
110
|
+
neutral: { name: 'BuildstatusNeverbuilt', color: 'icon/tertiary' },
|
|
111
|
+
failed: { name: 'CrossCircleFilled', color: 'icon/negative' },
|
|
112
|
+
success: { name: 'BuildstatusSuccessfulSolid', color: 'icon/positive' },
|
|
113
|
+
'in-progress': { name: 'Clock', color: 'pal.yellow.60' },
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
export const SettingsCardFooterStatus = ({
|
|
117
|
+
status,
|
|
118
|
+
statusText,
|
|
119
|
+
detail,
|
|
120
|
+
}: {
|
|
121
|
+
status: FooterStatus | 'loading';
|
|
122
|
+
statusText: string;
|
|
123
|
+
detail?: string;
|
|
124
|
+
}) => {
|
|
125
|
+
return (
|
|
126
|
+
<SettingsCardFooter>
|
|
127
|
+
<Box display="flex" flexDirection="row" gap="4" textStyle="body/md/regular" alignItems="center">
|
|
128
|
+
{status === 'loading' ? (
|
|
129
|
+
<Skeleton isActive>
|
|
130
|
+
<SkeletonBox width="128" height="16" />
|
|
131
|
+
</Skeleton>
|
|
132
|
+
) : (
|
|
133
|
+
<>
|
|
134
|
+
<Icon size="16" {...StatusIcons[status]} />
|
|
135
|
+
<Text flexGrow="1">{statusText}</Text>
|
|
136
|
+
<Text textColor="text.secondary">{detail}</Text>
|
|
137
|
+
</>
|
|
138
|
+
)}
|
|
139
|
+
</Box>
|
|
140
|
+
</SettingsCardFooter>
|
|
141
|
+
);
|
|
142
|
+
};
|
|
143
|
+
const SettingsCard = ({ children, ...props }: Omit<CardProps, 'variant'>) => {
|
|
144
|
+
const style = useMultiStyleConfig('SettingsCard');
|
|
145
|
+
return (
|
|
146
|
+
<SettingsCardStyleProvider value={style}>
|
|
147
|
+
<Card variant="outline" sx={style.container} {...props}>
|
|
148
|
+
{children}
|
|
149
|
+
</Card>
|
|
150
|
+
</SettingsCardStyleProvider>
|
|
151
|
+
);
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export default SettingsCard;
|
package/src/index.ts
CHANGED
|
@@ -357,3 +357,15 @@ export { default as DataWidgetItem } from './Components/DataWidget/DataWidgetIte
|
|
|
357
357
|
|
|
358
358
|
export type { LabelProps } from './Components/Label/Label';
|
|
359
359
|
export { default as Label } from './Components/Label/Label';
|
|
360
|
+
|
|
361
|
+
export {
|
|
362
|
+
default as SettingsCard,
|
|
363
|
+
SettingsCardData,
|
|
364
|
+
SettingsCardFooter,
|
|
365
|
+
SettingsCardToggle,
|
|
366
|
+
SettingsCardActions,
|
|
367
|
+
SettingsCardOnOffValue,
|
|
368
|
+
SettingsCardFooterError,
|
|
369
|
+
SettingsCardFooterToggle,
|
|
370
|
+
SettingsCardFooterStatus,
|
|
371
|
+
} from './Patterns/SettingsCard/SettingsCard';
|
package/src/theme.ts
CHANGED
|
@@ -581,6 +581,7 @@
|
|
|
581
581
|
},
|
|
582
582
|
"utilities": {
|
|
583
583
|
"overlay": "rgba(32, 27, 34, 0.8)",
|
|
584
|
+
"overlay-side": "linear-gradient(90deg, rgba(32, 27, 34, 0) 0%, rgba(32, 27, 34, 0.32) 100%)",
|
|
584
585
|
"overlay-light": "rgba(32, 27, 34, 0.16)",
|
|
585
586
|
"skeleton": "sys.bg.subtle",
|
|
586
587
|
"skeleton-strong": "sys.fg.minimal"
|
|
@@ -830,6 +831,7 @@
|
|
|
830
831
|
"status/neutral/icon": "sys.neutral.strong",
|
|
831
832
|
"status/neutral/text": "sys.neutral.strong",
|
|
832
833
|
"utilities/overlay": "rgba(32, 27, 34, 0.8)",
|
|
834
|
+
"utilities/overlay-side": "linear-gradient(90deg, rgba(32, 27, 34, 0) 0%, rgba(32, 27, 34, 0.32) 100%)",
|
|
833
835
|
"utilities/overlay-light": "rgba(32, 27, 34, 0.16)",
|
|
834
836
|
"utilities/skeleton": "sys.bg.subtle",
|
|
835
837
|
"utilities/skeleton-strong": "sys.fg.minimal"
|
|
@@ -860,6 +862,20 @@
|
|
|
860
862
|
"96": "6rem",
|
|
861
863
|
"128": "8rem"
|
|
862
864
|
},
|
|
865
|
+
"space": {
|
|
866
|
+
"2": "0.125rem",
|
|
867
|
+
"4": "0.25rem",
|
|
868
|
+
"6": "0.375rem",
|
|
869
|
+
"8": "0.5rem",
|
|
870
|
+
"12": "0.75rem",
|
|
871
|
+
"16": "1rem",
|
|
872
|
+
"24": "1.5rem",
|
|
873
|
+
"32": "2rem",
|
|
874
|
+
"48": "3rem",
|
|
875
|
+
"64": "4rem",
|
|
876
|
+
"96": "6rem",
|
|
877
|
+
"128": "8rem"
|
|
878
|
+
},
|
|
863
879
|
"textStyles": {
|
|
864
880
|
"mono/code-2": {
|
|
865
881
|
"fontFamily": "mono",
|
|
@@ -1144,6 +1160,11 @@
|
|
|
1144
1160
|
"lineHeight": "size-3",
|
|
1145
1161
|
"fontSize": "3"
|
|
1146
1162
|
},
|
|
1163
|
+
"comp/notification/message-link": {
|
|
1164
|
+
"lineHeight": "size-3",
|
|
1165
|
+
"fontSize": "3",
|
|
1166
|
+
"textDecoration": "underline"
|
|
1167
|
+
},
|
|
1147
1168
|
"comp/notification/button": {
|
|
1148
1169
|
"lineHeight": "size-2",
|
|
1149
1170
|
"fontSize": "2"
|