@elliemae/ds-mobile 2.4.1 → 2.4.2-rc.11

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.
@@ -83,21 +83,21 @@ const DSMobileBanner = _ref => {
83
83
  "data-testid": "ds-mobile-banner-icon"
84
84
  }, void 0, icons.icons[type]), /*#__PURE__*/_jsx__default["default"](styles.StyledContent, {
85
85
  showCloseButton: showCloseButton
86
- }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, body, actionLinkLabel && /*#__PURE__*/_jsx__default["default"](styles.StyledActionLink, {
86
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledSubTitleText, {}, void 0, body), actionLinkLabel && /*#__PURE__*/_jsx__default["default"](styles.StyledActionLink, {
87
87
  href: actionLinkHref,
88
88
  "data-testid": "ds-mobile-banner-link",
89
89
  onClick: actionLinkOnClick
90
90
  }, void 0, actionLinkLabel))), showCloseButton && /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButtonContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.StyledCloseButton, {
91
91
  "data-testid": "ds-mobile-banner-close-button",
92
- buttonType: "link",
92
+ buttonType: "icon",
93
93
  onClick: closeButtonOnClick,
94
94
  "aria-label": "Close Banner",
95
- icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
96
- width: "12px",
97
- height: "12px"
98
- })),
99
- innerRef: closeRef
100
- }))]
95
+ innerRef: closeRef,
96
+ size: "s"
97
+ }, void 0, _CloseX || (_CloseX = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseX, {
98
+ width: "12px",
99
+ height: "12px"
100
+ }))))]
101
101
  })
102
102
  }));
103
103
  };
@@ -10,11 +10,10 @@ var styleHelpers = require('./utils/styleHelpers.js');
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
11
 
12
12
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
- var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
14
13
 
15
14
  const StyledInnerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
16
15
  componentId: "sc-4jnp92-0"
17
- })(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
16
+ })(["display:flex;min-height:60px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";padding:8px 8px 8px 16px;"], _ref => {
18
17
  let {
19
18
  theme
20
19
  } = _ref;
@@ -61,7 +60,7 @@ const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
61
60
  let {
62
61
  theme
63
62
  } = _ref8;
64
- return theme.space.xxs;
63
+ return theme.space.xxxs;
65
64
  }, _ref9 => {
66
65
  let {
67
66
  theme
@@ -75,7 +74,7 @@ const StyledTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
75
74
  });
76
75
  const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
77
76
  componentId: "sc-4jnp92-3"
78
- })(["font-size:", ";font-weight:", ";"], _ref11 => {
77
+ })(["display:flex;flex-wrap:wrap;justify-content:flex-start;font-size:", ";font-weight:", ";& > *{margin-top:4px;}"], _ref11 => {
79
78
  let {
80
79
  theme
81
80
  } = _ref11;
@@ -88,77 +87,65 @@ const StyledSubTitle = /*#__PURE__*/styled__default["default"].div.withConfig({
88
87
  });
89
88
  const StyledIconContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
90
89
  componentId: "sc-4jnp92-4"
91
- })(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
90
+ })(["margin-right:", ";"], _ref13 => {
92
91
  let {
93
92
  theme
94
93
  } = _ref13;
95
94
  return theme.space.xxs;
96
- }, _ref14 => {
97
- let {
98
- theme
99
- } = _ref14;
100
- return theme.space.xs;
101
95
  });
102
96
  const StyledContent = /*#__PURE__*/styled__default["default"].div.withConfig({
103
97
  componentId: "sc-4jnp92-5"
104
- })(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
105
- let {
106
- theme
107
- } = _ref15;
108
- return theme.space.xxs2;
109
- }, _ref16 => {
98
+ })(["width:100%;display:flex;flex-direction:column;margin-right:", ";"], _ref14 => {
110
99
  let {
111
100
  showCloseButton
112
- } = _ref16;
101
+ } = _ref14;
113
102
  return !showCloseButton ? '28px' : '0';
114
103
  });
115
104
  const StyledCloseButtonContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
116
105
  componentId: "sc-4jnp92-6"
117
- })(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
118
- const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
106
+ })(["display:flex;align-items:flex-start;"]);
107
+ const StyledSubTitleText = /*#__PURE__*/styled__default["default"].span.withConfig({
119
108
  componentId: "sc-4jnp92-7"
120
- })(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
109
+ })(["margin-right:16px;line-height:1.1;"]);
110
+ const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton.DSButtonV2).withConfig({
111
+ componentId: "sc-4jnp92-8"
112
+ })(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref15 => {
121
113
  let {
122
114
  theme
123
- } = _ref17;
115
+ } = _ref15;
124
116
  return theme.colors.brand[700];
125
117
  });
126
118
  const StyledActionLink = /*#__PURE__*/styled__default["default"].a.withConfig({
127
- componentId: "sc-4jnp92-8"
128
- })(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref18 => {
129
- let {
130
- theme
131
- } = _ref18;
132
- return theme.space.xs;
133
- }, _ref19 => {
119
+ componentId: "sc-4jnp92-9"
120
+ })(["text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref16 => {
134
121
  let {
135
122
  theme
136
- } = _ref19;
123
+ } = _ref16;
137
124
  return dsSystem.toMobile(theme.fontSizes.title[600]);
138
- }, _ref20 => {
125
+ }, _ref17 => {
139
126
  let {
140
127
  theme
141
- } = _ref20;
128
+ } = _ref17;
142
129
  return theme.fontWeights.regular;
143
- }, _ref21 => {
130
+ }, _ref18 => {
144
131
  let {
145
132
  theme
146
- } = _ref21;
133
+ } = _ref18;
147
134
  return theme.colors.brand[600];
148
135
  });
149
136
  const StyledBannerContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
150
- componentId: "sc-4jnp92-9"
151
- })(["overflow:hidden;height:", ";", ";"], _ref22 => {
137
+ componentId: "sc-4jnp92-10"
138
+ })(["overflow:hidden;height:", ";", ";"], _ref19 => {
152
139
  let {
153
140
  isOpen
154
- } = _ref22;
141
+ } = _ref19;
155
142
  return isOpen ? 'auto' : '0px';
156
- }, _ref23 => {
143
+ }, _ref20 => {
157
144
  let {
158
145
  isAnimating,
159
146
  isOpen,
160
147
  height
161
- } = _ref23;
148
+ } = _ref20;
162
149
  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
163
150
  });
164
151
 
@@ -170,5 +157,6 @@ exports.StyledContent = StyledContent;
170
157
  exports.StyledIconContainer = StyledIconContainer;
171
158
  exports.StyledInnerContainer = StyledInnerContainer;
172
159
  exports.StyledSubTitle = StyledSubTitle;
160
+ exports.StyledSubTitleText = StyledSubTitleText;
173
161
  exports.StyledTextContent = StyledTextContent;
174
162
  exports.StyledTitle = StyledTitle;
@@ -12,7 +12,7 @@ import { describe } from 'react-desc';
12
12
  import { icons } from './utils/icons.js';
13
13
  import { propTypes } from './propTypes.js';
14
14
  import { defaultProps } from './defaultProps.js';
15
- import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, StyledContent, StyledTitle, StyledSubTitle, StyledActionLink, StyledCloseButtonContainer, StyledCloseButton } from './styles.js';
15
+ import { StyledBannerContainer, StyledInnerContainer, StyledIconContainer, StyledContent, StyledTitle, StyledSubTitle, StyledSubTitleText, StyledActionLink, StyledCloseButtonContainer, StyledCloseButton } from './styles.js';
16
16
  import { jsx, jsxs } from 'react/jsx-runtime';
17
17
 
18
18
  var _CloseX;
@@ -74,21 +74,21 @@ const DSMobileBanner = _ref => {
74
74
  "data-testid": "ds-mobile-banner-icon"
75
75
  }, void 0, icons[type]), /*#__PURE__*/_jsx(StyledContent, {
76
76
  showCloseButton: showCloseButton
77
- }, void 0, /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, body, actionLinkLabel && /*#__PURE__*/_jsx(StyledActionLink, {
77
+ }, void 0, /*#__PURE__*/_jsx(StyledTitle, {}, void 0, label), /*#__PURE__*/_jsx(StyledSubTitle, {}, void 0, /*#__PURE__*/_jsx(StyledSubTitleText, {}, void 0, body), actionLinkLabel && /*#__PURE__*/_jsx(StyledActionLink, {
78
78
  href: actionLinkHref,
79
79
  "data-testid": "ds-mobile-banner-link",
80
80
  onClick: actionLinkOnClick
81
81
  }, void 0, actionLinkLabel))), showCloseButton && /*#__PURE__*/_jsx(StyledCloseButtonContainer, {}, void 0, /*#__PURE__*/_jsx(StyledCloseButton, {
82
82
  "data-testid": "ds-mobile-banner-close-button",
83
- buttonType: "link",
83
+ buttonType: "icon",
84
84
  onClick: closeButtonOnClick,
85
85
  "aria-label": "Close Banner",
86
- icon: _CloseX || (_CloseX = /*#__PURE__*/_jsx(CloseX, {
87
- width: "12px",
88
- height: "12px"
89
- })),
90
- innerRef: closeRef
91
- }))]
86
+ innerRef: closeRef,
87
+ size: "s"
88
+ }, void 0, _CloseX || (_CloseX = /*#__PURE__*/_jsx(CloseX, {
89
+ width: "12px",
90
+ height: "12px"
91
+ }))))]
92
92
  })
93
93
  }));
94
94
  };
@@ -1,11 +1,11 @@
1
1
  import styled from 'styled-components';
2
2
  import { toMobile } from '@elliemae/ds-system';
3
- import DSButton from '@elliemae/ds-button';
3
+ import { DSButtonV2 } from '@elliemae/ds-button';
4
4
  import { handleBorderColor, handleAnimation } from './utils/styleHelpers.js';
5
5
 
6
6
  const StyledInnerContainer = /*#__PURE__*/styled.div.withConfig({
7
7
  componentId: "sc-4jnp92-0"
8
- })(["display:flex;min-height:68px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";"], _ref => {
8
+ })(["display:flex;min-height:60px;width:100%;background-color:", ";border-bottom:4px solid ", ";transform:translateY(", ");", ";padding:8px 8px 8px 16px;"], _ref => {
9
9
  let {
10
10
  theme
11
11
  } = _ref;
@@ -52,7 +52,7 @@ const StyledTitle = /*#__PURE__*/styled.div.withConfig({
52
52
  let {
53
53
  theme
54
54
  } = _ref8;
55
- return theme.space.xxs;
55
+ return theme.space.xxxs;
56
56
  }, _ref9 => {
57
57
  let {
58
58
  theme
@@ -66,7 +66,7 @@ const StyledTitle = /*#__PURE__*/styled.div.withConfig({
66
66
  });
67
67
  const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
68
68
  componentId: "sc-4jnp92-3"
69
- })(["font-size:", ";font-weight:", ";"], _ref11 => {
69
+ })(["display:flex;flex-wrap:wrap;justify-content:flex-start;font-size:", ";font-weight:", ";& > *{margin-top:4px;}"], _ref11 => {
70
70
  let {
71
71
  theme
72
72
  } = _ref11;
@@ -79,78 +79,66 @@ const StyledSubTitle = /*#__PURE__*/styled.div.withConfig({
79
79
  });
80
80
  const StyledIconContainer = /*#__PURE__*/styled.div.withConfig({
81
81
  componentId: "sc-4jnp92-4"
82
- })(["margin-top:10px;margin-right:", ";margin-left:", ";"], _ref13 => {
82
+ })(["margin-right:", ";"], _ref13 => {
83
83
  let {
84
84
  theme
85
85
  } = _ref13;
86
86
  return theme.space.xxs;
87
- }, _ref14 => {
88
- let {
89
- theme
90
- } = _ref14;
91
- return theme.space.xs;
92
87
  });
93
88
  const StyledContent = /*#__PURE__*/styled.div.withConfig({
94
89
  componentId: "sc-4jnp92-5"
95
- })(["width:100%;display:flex;flex-direction:column;margin:", " 0;margin-right:", ";"], _ref15 => {
96
- let {
97
- theme
98
- } = _ref15;
99
- return theme.space.xxs2;
100
- }, _ref16 => {
90
+ })(["width:100%;display:flex;flex-direction:column;margin-right:", ";"], _ref14 => {
101
91
  let {
102
92
  showCloseButton
103
- } = _ref16;
93
+ } = _ref14;
104
94
  return !showCloseButton ? '28px' : '0';
105
95
  });
106
96
  const StyledCloseButtonContainer = /*#__PURE__*/styled.div.withConfig({
107
97
  componentId: "sc-4jnp92-6"
108
- })(["display:flex;align-items:flex-start;margin-top:6px;margin-right:6px;"]);
109
- const StyledCloseButton = /*#__PURE__*/styled(DSButton).withConfig({
98
+ })(["display:flex;align-items:flex-start;"]);
99
+ const StyledSubTitleText = /*#__PURE__*/styled.span.withConfig({
110
100
  componentId: "sc-4jnp92-7"
111
- })(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref17 => {
101
+ })(["margin-right:16px;line-height:1.1;"]);
102
+ const StyledCloseButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
103
+ componentId: "sc-4jnp92-8"
104
+ })(["position:relative;&:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;width:100%;height:100%;border:2px solid ", ";border-radius:2px;pointer-events:none;}}"], _ref15 => {
112
105
  let {
113
106
  theme
114
- } = _ref17;
107
+ } = _ref15;
115
108
  return theme.colors.brand[700];
116
109
  });
117
110
  const StyledActionLink = /*#__PURE__*/styled.a.withConfig({
118
- componentId: "sc-4jnp92-8"
119
- })(["text-decoration:none;float:right;margin-left:", ";line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref18 => {
120
- let {
121
- theme
122
- } = _ref18;
123
- return theme.space.xs;
124
- }, _ref19 => {
111
+ componentId: "sc-4jnp92-9"
112
+ })(["text-decoration:none;line-height:1.1;font-size:", ";font-weight:", ";color:", ";"], _ref16 => {
125
113
  let {
126
114
  theme
127
- } = _ref19;
115
+ } = _ref16;
128
116
  return toMobile(theme.fontSizes.title[600]);
129
- }, _ref20 => {
117
+ }, _ref17 => {
130
118
  let {
131
119
  theme
132
- } = _ref20;
120
+ } = _ref17;
133
121
  return theme.fontWeights.regular;
134
- }, _ref21 => {
122
+ }, _ref18 => {
135
123
  let {
136
124
  theme
137
- } = _ref21;
125
+ } = _ref18;
138
126
  return theme.colors.brand[600];
139
127
  });
140
128
  const StyledBannerContainer = /*#__PURE__*/styled.div.withConfig({
141
- componentId: "sc-4jnp92-9"
142
- })(["overflow:hidden;height:", ";", ";"], _ref22 => {
129
+ componentId: "sc-4jnp92-10"
130
+ })(["overflow:hidden;height:", ";", ";"], _ref19 => {
143
131
  let {
144
132
  isOpen
145
- } = _ref22;
133
+ } = _ref19;
146
134
  return isOpen ? 'auto' : '0px';
147
- }, _ref23 => {
135
+ }, _ref20 => {
148
136
  let {
149
137
  isAnimating,
150
138
  isOpen,
151
139
  height
152
- } = _ref23;
140
+ } = _ref20;
153
141
  return handleAnimation(isAnimating, isOpen, height);
154
142
  });
155
143
 
156
- export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTextContent, StyledTitle };
144
+ export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledCloseButtonContainer, StyledContent, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledSubTitleText, StyledTextContent, StyledTitle };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-mobile",
3
- "version": "2.4.1",
3
+ "version": "2.4.2-rc.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "module": "./esm/index.js",
@@ -433,19 +433,19 @@
433
433
  "generateSubmodules": true
434
434
  },
435
435
  "dependencies": {
436
- "@elliemae/ds-accordion": "2.4.1",
437
- "@elliemae/ds-backdrop": "2.4.1",
438
- "@elliemae/ds-button": "2.4.1",
439
- "@elliemae/ds-circular-progress-indicator": "2.4.1",
440
- "@elliemae/ds-form": "2.4.1",
441
- "@elliemae/ds-grid": "2.4.1",
442
- "@elliemae/ds-icon": "2.4.1",
443
- "@elliemae/ds-icons": "2.4.1",
444
- "@elliemae/ds-indeterminate-progress-indicator": "2.4.1",
445
- "@elliemae/ds-shared": "2.4.1",
446
- "@elliemae/ds-system": "2.4.1",
447
- "@elliemae/ds-tabs": "2.4.1",
448
- "@elliemae/ds-truncated-expandable-text": "2.4.1",
436
+ "@elliemae/ds-accordion": "2.4.2-rc.11",
437
+ "@elliemae/ds-backdrop": "2.4.2-rc.11",
438
+ "@elliemae/ds-button": "2.4.2-rc.11",
439
+ "@elliemae/ds-circular-progress-indicator": "2.4.2-rc.11",
440
+ "@elliemae/ds-form": "2.4.2-rc.11",
441
+ "@elliemae/ds-grid": "2.4.2-rc.11",
442
+ "@elliemae/ds-icon": "2.4.2-rc.11",
443
+ "@elliemae/ds-icons": "2.4.2-rc.11",
444
+ "@elliemae/ds-indeterminate-progress-indicator": "2.4.2-rc.11",
445
+ "@elliemae/ds-shared": "2.4.2-rc.11",
446
+ "@elliemae/ds-system": "2.4.2-rc.11",
447
+ "@elliemae/ds-tabs": "2.4.2-rc.11",
448
+ "@elliemae/ds-truncated-expandable-text": "2.4.2-rc.11",
449
449
  "@xstyled/styled-components": "~3.1.1",
450
450
  "polished": "~3.6.7",
451
451
  "prop-types": "~15.7.2",
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import type { StyledBannerContainerT, StyledContentT, StyledInnerContainerT } from './index.d';
2
3
  export declare const StyledInnerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledInnerContainerT, never>;
3
4
  export declare const StyledTextContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -6,6 +7,7 @@ export declare const StyledSubTitle: import("styled-components").StyledComponent
6
7
  export declare const StyledIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
8
  export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledContentT, never>;
8
9
  export declare const StyledCloseButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
9
- export declare const StyledCloseButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;
10
+ export declare const StyledSubTitleText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
11
+ export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/react-desc-prop-types").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;
10
12
  export declare const StyledActionLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {}, never>;
11
13
  export declare const StyledBannerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledBannerContainerT, never>;