@elliemae/ds-accordion 2.2.0-beta.0 → 2.2.0-next.4

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