@elliemae/ds-accordion 2.2.0-next.7 → 2.2.0-next.8

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 (7) hide show
  1. package/cjs/parts/accordionItem/styles.js +49 -33
  2. package/esm/parts/accordionItem/styles.js +49 -33
  3. package/package.json +7 -7
  4. package/types/DSAccordion.d.ts +1 -1
  5. package/types/DSAccordionTypes.d.ts +3 -0
  6. package/types/parts/accordionItem/DSAccordionItem.d.ts +1 -1
  7. package/types/parts/accordionItem/styles.d.ts +2 -2
package/cjs/parts/accordionItem/styles.js CHANGED
@@ -18,53 +18,54 @@ const StyledItemContainer = /*#__PURE__*/styled__default["default"].div.withConf
18
18
  });
19
19
  const StyledItemHeader = /*#__PURE__*/styled__default["default"].button.withConfig({
20
20
  componentId: "sc-fnpjby-1"
21
- })(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
21
+ })(["display:flex;height:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
22
22
  let {
23
+ theme,
23
24
  withSecondaryTitle
24
25
  } = _ref2;
25
- return withSecondaryTitle ? '48px' : '32px';
26
+ return withSecondaryTitle ? theme.space.m : theme.space.s;
26
27
  }, _ref3 => {
27
28
  let {
28
- withCustomActions,
29
- isDSMobile
29
+ disabled
30
30
  } = _ref3;
31
- return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
31
+ return disabled ? 'not-allowed' : 'pointer';
32
32
  }, _ref4 => {
33
33
  let {
34
- disabled
34
+ isDSMobile
35
35
  } = _ref4;
36
- return disabled ? 'not-allowed' : 'pointer';
36
+ return isDSMobile ? "0 16px" : "0";
37
37
  }, _ref5 => {
38
38
  let {
39
39
  isDSMobile
40
40
  } = _ref5;
41
- return isDSMobile ? "0 16px" : "0";
41
+ return isDSMobile ? "flex-direction: row-reverse;" : "";
42
42
  }, _ref6 => {
43
- let {
44
- isDSMobile
45
- } = _ref6;
46
- return isDSMobile ? "grid-template-areas: 'title addon';" : "";
47
- }, _ref7 => {
48
43
  let {
49
44
  theme
50
- } = _ref7;
45
+ } = _ref6;
51
46
  return theme.colors.brand[700];
52
47
  });
53
48
  const StyledItemContent = /*#__PURE__*/styled__default["default"].div.withConfig({
54
49
  componentId: "sc-fnpjby-2"
55
- })(["margin:", ";grid-column:1/2;"], _ref8 => {
50
+ })(["margin:", ";grid-column:1/2;"], _ref7 => {
56
51
  let {
57
52
  isDSMobile
58
- } = _ref8;
53
+ } = _ref7;
59
54
  return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
60
55
  });
61
56
  const StyledItemAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
62
57
  componentId: "sc-fnpjby-3"
63
- })(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
58
+ })(["", " height:100%;width:", ";display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref8 => {
64
59
  let {
60
+ theme,
65
61
  isDSMobile
62
+ } = _ref8;
63
+ return !isDSMobile ? "padding: 0 ".concat(theme.space.xxs, ";") : "";
64
+ }, _ref9 => {
65
+ let {
66
+ theme
66
67
  } = _ref9;
67
- return !isDSMobile ? " padding: 0 8px;\n \n" : "\n grid-area: addon;\n ";
68
+ return theme.space.s;
68
69
  }, _ref10 => {
69
70
  let {
70
71
  disabled,
@@ -74,30 +75,30 @@ const StyledItemAddon = /*#__PURE__*/styled__default["default"].div.withConfig({
74
75
  });
75
76
  const StyledItemTitles = /*#__PURE__*/styled__default["default"].div.withConfig({
76
77
  componentId: "sc-fnpjby-4"
77
- })(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
78
- let {
79
- isDSMobile
80
- } = _ref11;
81
- return isDSMobile ? "grid-area: title;" : "";
82
- });
78
+ })(["display:grid;grid-template-columns:100%;width:100%;align-content:center;"]);
83
79
  const StyledPrimaryTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
84
80
  componentId: "sc-fnpjby-5"
85
- })(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
81
+ })(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
86
82
  let {
87
83
  disabled,
88
84
  theme
89
- } = _ref12;
85
+ } = _ref11;
90
86
  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
91
- }, _ref13 => {
87
+ }, _ref12 => {
92
88
  let {
93
89
  theme,
94
90
  isDSMobile
95
- } = _ref13;
91
+ } = _ref12;
96
92
  return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
93
+ }, _ref13 => {
94
+ let {
95
+ theme
96
+ } = _ref13;
97
+ return theme.space.xs;
97
98
  });
98
99
  const StyledSecondaryTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
99
100
  componentId: "sc-fnpjby-6"
100
- })(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
101
+ })(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
101
102
  let {
102
103
  theme
103
104
  } = _ref14;
@@ -108,18 +109,33 @@ const StyledSecondaryTitle = /*#__PURE__*/styled__default["default"].span.withCo
108
109
  theme
109
110
  } = _ref15;
110
111
  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
112
+ }, _ref16 => {
113
+ let {
114
+ theme
115
+ } = _ref16;
116
+ return theme.space.xs;
111
117
  });
112
118
  const StyledItemCustomActions = /*#__PURE__*/styled__default["default"].div.withConfig({
113
119
  componentId: "sc-fnpjby-7"
114
- })(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
120
+ })(["display:grid;grid-auto-flow:column;grid-gap:", ";margin:0 ", ";justify-content:flex-end;"], _ref17 => {
121
+ let {
122
+ theme
123
+ } = _ref17;
124
+ return theme.space.xxs;
125
+ }, _ref18 => {
126
+ let {
127
+ theme
128
+ } = _ref18;
129
+ return theme.space.xs;
130
+ });
115
131
  const StyledItemHeaderContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
116
132
  componentId: "sc-fnpjby-8"
117
- })(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
133
+ })(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", "}"], _ref19 => {
118
134
  let {
119
135
  disabled,
120
136
  theme
121
- } = _ref16;
122
- return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
137
+ } = _ref19;
138
+ return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
123
139
  });
124
140
 
125
141
  exports.StyledItemAddon = StyledItemAddon;
package/esm/parts/accordionItem/styles.js CHANGED
@@ -10,53 +10,54 @@ const StyledItemContainer = /*#__PURE__*/styled.div.withConfig({
10
10
  });
11
11
  const StyledItemHeader = /*#__PURE__*/styled.button.withConfig({
12
12
  componentId: "sc-fnpjby-1"
13
- })(["display:grid;height:", ";grid-template-columns:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
13
+ })(["display:flex;height:", ";width:100%;align-items:center;border:none;outline:none;background:none;&:hover{cursor:", ";}padding:", ";", " &:focus{&:after{position:absolute;content:'';left:0;top:0;width:100%;height:100%;border-radius:2px;border:2px solid ", ";pointer-events:none;}}"], _ref2 => {
14
14
  let {
15
+ theme,
15
16
  withSecondaryTitle
16
17
  } = _ref2;
17
- return withSecondaryTitle ? '48px' : '32px';
18
+ return withSecondaryTitle ? theme.space.m : theme.space.s;
18
19
  }, _ref3 => {
19
20
  let {
20
- withCustomActions,
21
- isDSMobile
21
+ disabled
22
22
  } = _ref3;
23
- return withCustomActions ? '32px auto' : "".concat(isDSMobile ? "auto 32px" : "32px auto");
23
+ return disabled ? 'not-allowed' : 'pointer';
24
24
  }, _ref4 => {
25
25
  let {
26
- disabled
26
+ isDSMobile
27
27
  } = _ref4;
28
- return disabled ? 'not-allowed' : 'pointer';
28
+ return isDSMobile ? "0 16px" : "0";
29
29
  }, _ref5 => {
30
30
  let {
31
31
  isDSMobile
32
32
  } = _ref5;
33
- return isDSMobile ? "0 16px" : "0";
33
+ return isDSMobile ? "flex-direction: row-reverse;" : "";
34
34
  }, _ref6 => {
35
- let {
36
- isDSMobile
37
- } = _ref6;
38
- return isDSMobile ? "grid-template-areas: 'title addon';" : "";
39
- }, _ref7 => {
40
35
  let {
41
36
  theme
42
- } = _ref7;
37
+ } = _ref6;
43
38
  return theme.colors.brand[700];
44
39
  });
45
40
  const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
46
41
  componentId: "sc-fnpjby-2"
47
- })(["margin:", ";grid-column:1/2;"], _ref8 => {
42
+ })(["margin:", ";grid-column:1/2;"], _ref7 => {
48
43
  let {
49
44
  isDSMobile
50
- } = _ref8;
45
+ } = _ref7;
51
46
  return isDSMobile ? "16px 16px 24px 16px" : "16px 16px 16px 32px";
52
47
  });
53
48
  const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
54
49
  componentId: "sc-fnpjby-3"
55
- })(["", " height:100%;display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref9 => {
50
+ })(["", " height:100%;width:", ";display:grid;place-items:center;& .em-ds-icon svg{fill:", ";}"], _ref8 => {
56
51
  let {
52
+ theme,
57
53
  isDSMobile
54
+ } = _ref8;
55
+ return !isDSMobile ? "padding: 0 ".concat(theme.space.xxs, ";") : "";
56
+ }, _ref9 => {
57
+ let {
58
+ theme
58
59
  } = _ref9;
59
- return !isDSMobile ? " padding: 0 8px;\n \n" : "\n grid-area: addon;\n ";
60
+ return theme.space.s;
60
61
  }, _ref10 => {
61
62
  let {
62
63
  disabled,
@@ -66,30 +67,30 @@ const StyledItemAddon = /*#__PURE__*/styled.div.withConfig({
66
67
  });
67
68
  const StyledItemTitles = /*#__PURE__*/styled.div.withConfig({
68
69
  componentId: "sc-fnpjby-4"
69
- })(["display:grid;grid-template-columns:100%;align-content:center;", ""], _ref11 => {
70
- let {
71
- isDSMobile
72
- } = _ref11;
73
- return isDSMobile ? "grid-area: title;" : "";
74
- });
70
+ })(["display:grid;grid-template-columns:100%;width:100%;align-content:center;"]);
75
71
  const StyledPrimaryTitle = /*#__PURE__*/styled.div.withConfig({
76
72
  componentId: "sc-fnpjby-5"
77
- })(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref12 => {
73
+ })(["margin:0;font-size:16px;color:", ";font-weight:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref11 => {
78
74
  let {
79
75
  disabled,
80
76
  theme
81
- } = _ref12;
77
+ } = _ref11;
82
78
  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[700];
83
- }, _ref13 => {
79
+ }, _ref12 => {
84
80
  let {
85
81
  theme,
86
82
  isDSMobile
87
- } = _ref13;
83
+ } = _ref12;
88
84
  return isDSMobile ? theme.fontWeights.regular : theme.fontWeights.regular;
85
+ }, _ref13 => {
86
+ let {
87
+ theme
88
+ } = _ref13;
89
+ return theme.space.xs;
89
90
  });
90
91
  const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
91
92
  componentId: "sc-fnpjby-6"
92
- })(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:16px;width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
93
+ })(["margin:0;font-size:", ";text-align:left;color:", ";text-overflow:ellipsis;overflow:hidden;height:", ";width:100%;text-align:left;display:block;white-space:nowrap;"], _ref14 => {
93
94
  let {
94
95
  theme
95
96
  } = _ref14;
@@ -100,18 +101,33 @@ const StyledSecondaryTitle = /*#__PURE__*/styled.span.withConfig({
100
101
  theme
101
102
  } = _ref15;
102
103
  return disabled ? theme.colors.neutral[200] : theme.colors.neutral[500];
104
+ }, _ref16 => {
105
+ let {
106
+ theme
107
+ } = _ref16;
108
+ return theme.space.xs;
103
109
  });
104
110
  const StyledItemCustomActions = /*#__PURE__*/styled.div.withConfig({
105
111
  componentId: "sc-fnpjby-7"
106
- })(["display:grid;grid-auto-flow:column;grid-gap:8px;margin:0 16px;justify-content:flex-end;"]);
112
+ })(["display:grid;grid-auto-flow:column;grid-gap:", ";margin:0 ", ";justify-content:flex-end;"], _ref17 => {
113
+ let {
114
+ theme
115
+ } = _ref17;
116
+ return theme.space.xxs;
117
+ }, _ref18 => {
118
+ let {
119
+ theme
120
+ } = _ref18;
121
+ return theme.space.xs;
122
+ });
107
123
  const StyledItemHeaderContainer = /*#__PURE__*/styled.div.withConfig({
108
124
  componentId: "sc-fnpjby-8"
109
- })(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", ";}"], _ref16 => {
125
+ })(["display:grid;grid-template-columns:auto max-content;place-items:center;position:relative;&:hover{", "}"], _ref19 => {
110
126
  let {
111
127
  disabled,
112
128
  theme
113
- } = _ref16;
114
- return !disabled ? "background: ".concat(theme.colors.brand[200]) : "";
129
+ } = _ref19;
130
+ return !disabled ? "background: ".concat(theme.colors.brand[200], ";") : "";
115
131
  });
116
132
 
117
133
  export { StyledItemAddon, StyledItemContainer, StyledItemContent, StyledItemCustomActions, StyledItemHeader, StyledItemHeaderContainer, StyledItemTitles, StyledPrimaryTitle, StyledSecondaryTitle };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-accordion",
3
- "version": "2.2.0-next.7",
3
+ "version": "2.2.0-next.8",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Accordion",
6
6
  "module": "./esm/index.js",
@@ -80,12 +80,12 @@
80
80
  "build": "node ../../scripts/build/build.js"
81
81
  },
82
82
  "dependencies": {
83
- "@elliemae/ds-button": "2.2.0-next.7",
84
- "@elliemae/ds-classnames": "2.2.0-next.7",
85
- "@elliemae/ds-icons": "2.2.0-next.7",
86
- "@elliemae/ds-shared": "2.2.0-next.7",
87
- "@elliemae/ds-system": "2.2.0-next.7",
88
- "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.7",
83
+ "@elliemae/ds-button": "2.2.0-next.8",
84
+ "@elliemae/ds-classnames": "2.2.0-next.8",
85
+ "@elliemae/ds-icons": "2.2.0-next.8",
86
+ "@elliemae/ds-shared": "2.2.0-next.8",
87
+ "@elliemae/ds-system": "2.2.0-next.8",
88
+ "@elliemae/ds-truncated-tooltip-text": "2.2.0-next.8",
89
89
  "react-desc": "^4.1.3"
90
90
  },
91
91
  "devDependencies": {
package/types/DSAccordion.d.ts CHANGED
@@ -37,7 +37,7 @@ declare const DSAccordion: {
37
37
  };
38
38
  };
39
39
  declare const DSAccordionWithSchema: {
40
- (props?: DSAccordionPropsT | undefined): JSX.Element;
40
+ (props?: unknown): JSX.Element;
41
41
  propTypes: unknown;
42
42
  toTypescript: () => import("react-desc").TypescriptSchema;
43
43
  };
package/types/DSAccordionTypes.d.ts CHANGED
@@ -132,3 +132,6 @@ export interface StyledItemAddonPropsT {
132
132
  disabled: boolean;
133
133
  isDSMobile: boolean;
134
134
  }
135
+ export interface StyledItemHeaderContainerPropsT {
136
+ disabled: boolean;
137
+ }
package/types/parts/accordionItem/DSAccordionItem.d.ts CHANGED
@@ -45,7 +45,7 @@ declare const DSAccordionItem: {
45
45
  };
46
46
  };
47
47
  declare const DSAccordionItemWithSchema: {
48
- (props?: DSAccordionItemPropsT | undefined): JSX.Element;
48
+ (props?: unknown): JSX.Element;
49
49
  propTypes: unknown;
50
50
  toTypescript: () => import("react-desc").TypescriptSchema;
51
51
  };
package/types/parts/accordionItem/styles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { StyledItemAddonPropsT, StyledItemHeaderPropsT, StyledItemTitlesPropsT, StyledPrimaryTitlePropsT, StyledSecondaryTitlePropsT, StyledItemContentPropsT } from '../../DSAccordionTypes';
1
+ import type { StyledItemAddonPropsT, StyledItemHeaderPropsT, StyledItemTitlesPropsT, StyledPrimaryTitlePropsT, StyledSecondaryTitlePropsT, StyledItemContentPropsT, StyledItemHeaderContainerPropsT } from '../../DSAccordionTypes';
2
2
  export declare const StyledItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
3
3
  export declare const StyledItemHeader: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledItemHeaderPropsT, never>;
4
4
  export declare const StyledItemContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledItemContentPropsT, never>;
@@ -7,4 +7,4 @@ export declare const StyledItemTitles: import("styled-components").StyledCompone
7
7
  export declare const StyledPrimaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledPrimaryTitlePropsT, never>;
8
8
  export declare const StyledSecondaryTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, StyledSecondaryTitlePropsT, never>;
9
9
  export declare const StyledItemCustomActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
- export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
10
+ export declare const StyledItemHeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledItemHeaderContainerPropsT, never>;