@bitrise/bitkit 11.1.1 → 11.1.2

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Accordion/Accordion.theme.ts +31 -7
  3. package/src/Components/Accordion/Accordion.tsx +4 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "11.1.1",
4
+ "version": "11.1.2",
5
5
  "repository": "git@github.com:bitrise-io/bitkit.git",
6
6
  "main": "src/index.ts",
7
7
  "license": "UNLICENSED",
package/src/Components/Accordion/Accordion.theme.ts CHANGED
@@ -7,6 +7,14 @@ type ColorObj = {
7
7
  enabledIcon: string;
8
8
  disabledIcon: string;
9
9
  hover: string;
10
+ border: string;
11
+ };
12
+ };
13
+
14
+ type VariantObj = {
15
+ [key: string]: {
16
+ borderRadius: string;
17
+ boxShadow: string;
10
18
  };
11
19
  };
12
20
 
@@ -17,8 +25,6 @@ const buttonStyle = {
17
25
  width: '100%',
18
26
  padding: '16',
19
27
  borderBottom: '1px solid',
20
- borderColor: 'neutral.93',
21
- borderRadius: '8',
22
28
  };
23
29
 
24
30
  const iconStyle = {
@@ -34,6 +40,7 @@ const colors: ColorObj = {
34
40
  enabledIcon: 'currentColor',
35
41
  disabledIcon: 'currentColor',
36
42
  hover: 'purple.95',
43
+ border: 'neutral.93',
37
44
  },
38
45
  gray: {
39
46
  enabledButton: 'neutral.95',
@@ -41,27 +48,42 @@ const colors: ColorObj = {
41
48
  enabledIcon: 'currentColor',
42
49
  disabledIcon: 'currentColor',
43
50
  hover: 'purple.95',
51
+ border: 'neutral.93',
44
52
  },
45
53
  orange: {
46
54
  enabledButton: 'orange.93',
47
55
  disabledButton: 'orange.93',
48
56
  enabledIcon: 'orange.10',
49
57
  disabledIcon: 'orange.80',
50
- hover: 'orange.90',
58
+ hover: 'orange.93',
59
+ border: 'orange.90',
60
+ },
61
+ };
62
+
63
+ const variants: VariantObj = {
64
+ default: {
65
+ borderRadius: '8',
66
+ boxShadow: 'small',
67
+ },
68
+ flat: {
69
+ borderRadius: '0',
70
+ boxShadow: 'none',
51
71
  },
52
72
  };
53
73
 
54
74
  const AccordionTheme: ComponentStyleConfig = {
55
- baseStyle: ({ colorScheme }) => ({
75
+ baseStyle: ({ colorScheme, variant }) => ({
56
76
  item: {
57
77
  border: '1px solid',
58
- borderColor: 'neutral.93',
59
- borderRadius: '8',
60
- boxShadow: 'small',
78
+ borderColor: colors[colorScheme].border,
79
+ borderRadius: variants[variant].borderRadius,
80
+ boxShadow: variants[variant].boxShadow,
61
81
  marginBottom: '16',
62
82
  },
63
83
  enabledButton: {
64
84
  ...buttonStyle,
85
+ borderColor: colors[colorScheme].border,
86
+ borderRadius: variants[variant].borderRadius,
65
87
  background: colors[colorScheme].enabledButton,
66
88
  _hover: {
67
89
  background: colors[colorScheme].hover,
@@ -73,7 +95,9 @@ const AccordionTheme: ComponentStyleConfig = {
73
95
  },
74
96
  disabledButton: {
75
97
  ...buttonStyle,
98
+ borderRadius: variants[variant].borderRadius,
76
99
  background: colors[colorScheme].disabledButton,
100
+ borderColor: colors[colorScheme].border,
77
101
  cursor: 'default',
78
102
  },
79
103
  enabledIcon: {
package/src/Components/Accordion/Accordion.tsx CHANGED
@@ -8,6 +8,7 @@ import {
8
8
 
9
9
  export interface AccordionProps extends Omit<ChakraAccordionProps, 'onChange'> {
10
10
  colorScheme?: 'white' | 'gray' | 'orange';
11
+ variant?: 'default' | 'flat';
11
12
  onChange?: (ids: string[], indexes: number[]) => void;
12
13
  }
13
14
 
@@ -25,7 +26,7 @@ const getItemIds = (props: AccordionProps) => {
25
26
  */
26
27
  const Accordion = (props: AccordionProps) => {
27
28
  const prefersReducedMotion = usePrefersReducedMotion({ ssr: false });
28
- const { children, colorScheme, onChange, ...rest } = props;
29
+ const { children, colorScheme, variant, onChange, ...rest } = props;
29
30
  const itemIds = getItemIds(props);
30
31
 
31
32
  const onAccordionChange = (indexes: ExpandedIndex) => {
@@ -43,6 +44,7 @@ const Accordion = (props: AccordionProps) => {
43
44
  allowMultiple
44
45
  allowToggle
45
46
  colorScheme={colorScheme}
47
+ variant={variant}
46
48
  reduceMotion={prefersReducedMotion}
47
49
  onChange={onAccordionChange}
48
50
  {...rest}
@@ -54,5 +56,6 @@ const Accordion = (props: AccordionProps) => {
54
56
 
55
57
  Accordion.defaultProps = {
56
58
  colorScheme: 'white',
59
+ variant: 'default',
57
60
  };
58
61
  export default Accordion;