@elliemae/ds-banner 2.4.2-rc.3 → 2.4.3-rc.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.
Files changed (9) hide show
  1. package/cjs/DSBanner.js +2 -3
  2. package/cjs/propTypes.js +5 -1
  3. package/cjs/styles.js +79 -28
  4. package/cjs/utils/styleHelpers.js +43 -12
  5. package/esm/DSBanner.js +2 -3
  6. package/esm/propTypes.js +5 -1
  7. package/esm/styles.js +79 -27
  8. package/esm/utils/styleHelpers.js +43 -8
  9. package/package.json +4 -4
package/cjs/DSBanner.js CHANGED
@@ -2,14 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
- var _jsx = require('@babel/runtime/helpers/jsx');
7
- require('core-js/modules/web.dom-collections.iterator.js');
8
5
  require('core-js/modules/esnext.async-iterator.filter.js');
9
6
  require('core-js/modules/esnext.iterator.constructor.js');
10
7
  require('core-js/modules/esnext.iterator.filter.js');
11
8
  require('core-js/modules/esnext.async-iterator.for-each.js');
12
9
  require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
+ var _jsx = require('@babel/runtime/helpers/jsx');
13
12
  var React = require('react');
14
13
  var dsIcons = require('@elliemae/ds-icons');
15
14
  var reactDesc = require('react-desc');
package/cjs/propTypes.js CHANGED
@@ -18,7 +18,11 @@ const propTypes = {
18
18
  onClick: reactDesc.PropTypes.func,
19
19
  href: reactDesc.PropTypes.string
20
20
  }).description('Properties of the ActionLink component').defaultValue({}),
21
- actionRef: reactDesc.PropTypes.object.description("\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n ").defaultValue({})
21
+ actionRef: reactDesc.PropTypes.object.description(`
22
+ Reference to use actions:
23
+ - focusOnLink: function to focus the banner
24
+ - focusOnWrapper: function to focus the link
25
+ `).defaultValue({})
22
26
  };
23
27
 
24
28
  exports.propTypes = propTypes;
package/cjs/styles.js CHANGED
@@ -2,140 +2,191 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var dsSystem = require('@elliemae/ds-system');
7
6
  var DSButton = require('@elliemae/ds-button');
8
7
  var styleHelpers = require('./utils/styleHelpers.js');
9
8
 
10
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
10
 
12
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
13
11
  var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
14
12
 
15
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
16
13
  const StyledBannerContainer = dsSystem.styled('div', {
17
14
  name: 'DS-Banner',
18
15
  slot: 'root'
19
- })(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n overflow: hidden;\n height: ", ";\n ", ";\n"])), _ref => {
16
+ })`
17
+ overflow: hidden;
18
+ height: ${_ref => {
20
19
  let {
21
20
  isOpen
22
21
  } = _ref;
23
22
  return isOpen ? 'auto' : '0px';
24
- }, _ref2 => {
23
+ }};
24
+ ${_ref2 => {
25
25
  let {
26
26
  isAnimating,
27
27
  isOpen,
28
28
  height
29
29
  } = _ref2;
30
30
  return styleHelpers.handleAnimation(isAnimating, isOpen, height);
31
- });
31
+ }};
32
+ `;
32
33
  const StyledInnerContainer = dsSystem.styled('div', {
33
34
  name: 'DS-Banner',
34
35
  slot: 'innerContainer'
35
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ", ";\n border-bottom: 5px solid ", ";\n ", ";\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
36
+ })`
37
+ padding-right: 6px;
38
+ display: grid;
39
+ align-items: center;
40
+ min-height: 41px;
41
+ width: 100%;
42
+ background-color: ${_ref3 => {
36
43
  let {
37
44
  theme
38
45
  } = _ref3;
39
46
  return theme.colors.neutral['000'];
40
- }, _ref4 => {
47
+ }};
48
+ border-bottom: 5px solid ${_ref4 => {
41
49
  let {
42
50
  type,
43
51
  theme
44
52
  } = _ref4;
45
53
  return styleHelpers.handleBorderColor(type, theme);
46
- }, _ref5 => {
54
+ }};
55
+ ${_ref5 => {
47
56
  let {
48
57
  isAnimating,
49
58
  isOpen
50
59
  } = _ref5;
51
60
  return styleHelpers.handleAnimation(isAnimating, isOpen);
52
- });
61
+ }};
62
+ &:focus {
63
+ position: relative;
64
+ &:after {
65
+ content: '';
66
+ display: block;
67
+ position: absolute;
68
+ top: 0;
69
+ left: 0;
70
+ pointer-events: none;
71
+ border-radius: 2px;
72
+ width: calc(100%);
73
+ border: 2px solid #1e79c2;
74
+ height: calc(100% + 4px);
75
+ }
76
+ }
77
+ grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
78
+ `;
53
79
  const StyledIconContainer = dsSystem.styled('div', {
54
80
  name: 'DS-Banner',
55
81
  slot: 'iconContainer'
56
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n margin-right: ", ";\n margin-left: ", ";\n"])), _ref6 => {
82
+ })`
83
+ margin-right: ${_ref6 => {
57
84
  let {
58
85
  theme
59
86
  } = _ref6;
60
87
  return theme.space.xxs;
61
- }, _ref7 => {
88
+ }};
89
+ margin-left: ${_ref7 => {
62
90
  let {
63
91
  theme
64
92
  } = _ref7;
65
93
  return theme.space.xs;
66
- });
94
+ }};
95
+ `;
67
96
  const StyledTitle = dsSystem.styled('div', {
68
97
  name: 'DS-Banner',
69
98
  slot: 'title'
70
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref8 => {
99
+ })`
100
+ color: ${_ref8 => {
71
101
  let {
72
102
  theme
73
103
  } = _ref8;
74
104
  return theme.colors.neutral[700];
75
- }, _ref9 => {
105
+ }};
106
+ font-size: ${_ref9 => {
76
107
  let {
77
108
  theme
78
109
  } = _ref9;
79
110
  return theme.fontSizes.label[400];
80
- }, _ref10 => {
111
+ }};
112
+ font-weight: ${_ref10 => {
81
113
  let {
82
114
  theme
83
115
  } = _ref10;
84
116
  return theme.fontWeights.semibold;
85
- });
117
+ }};
118
+ `;
86
119
  const StyledSubTitle = dsSystem.styled('div', {
87
120
  name: 'DS-Banner',
88
121
  slot: 'subtitle'
89
- })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n width: 100%;\n margin-left: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref11 => {
122
+ })`
123
+ width: 100%;
124
+ margin-left: ${_ref11 => {
90
125
  let {
91
126
  theme
92
127
  } = _ref11;
93
128
  return theme.space.xs;
94
- }, _ref12 => {
129
+ }};
130
+ font-size: ${_ref12 => {
95
131
  let {
96
132
  theme
97
133
  } = _ref12;
98
134
  return theme.fontSizes.subTitle[400];
99
- }, _ref13 => {
135
+ }};
136
+ font-weight: ${_ref13 => {
100
137
  let {
101
138
  theme
102
139
  } = _ref13;
103
140
  return theme.fontWeights.regular;
104
- });
141
+ }};
142
+ `;
105
143
  const StyledActionLink = dsSystem.styled('a', {
106
144
  name: 'DS-Banner',
107
145
  slot: 'action'
108
- })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n margin-left: ", ";\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n"])), _ref14 => {
146
+ })`
147
+ margin-left: ${_ref14 => {
109
148
  let {
110
149
  theme,
111
150
  isBodyEmpty
112
151
  } = _ref14;
113
152
  return isBodyEmpty ? theme.space.xs : 0;
114
- }, _ref15 => {
153
+ }};
154
+ white-space: nowrap;
155
+ text-decoration: none;
156
+ line-height: 1.1;
157
+ font-size: ${_ref15 => {
115
158
  let {
116
159
  theme
117
160
  } = _ref15;
118
161
  return theme.fontSizes.hyperlink[400];
119
- }, _ref16 => {
162
+ }};
163
+ font-weight: ${_ref16 => {
120
164
  let {
121
165
  theme
122
166
  } = _ref16;
123
167
  return theme.fontWeights.regular;
124
- }, _ref17 => {
168
+ }};
169
+ color: ${_ref17 => {
125
170
  let {
126
171
  theme
127
172
  } = _ref17;
128
173
  return theme.colors.brand[600];
129
- });
174
+ }};
175
+ `;
130
176
  const StyledCloseButton = dsSystem.styled(DSButton__default["default"], {
131
177
  name: 'DS-Banner',
132
178
  slot: 'closeButton'
133
- })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n margin-left: ", ";\n &:not(focus) {\n border: transparent;\n }\n"])), _ref18 => {
179
+ })`
180
+ margin-left: ${_ref18 => {
134
181
  let {
135
182
  theme
136
183
  } = _ref18;
137
184
  return theme.space.xxs;
138
- });
185
+ }};
186
+ &:not(focus) {
187
+ border: transparent;
188
+ }
189
+ `;
139
190
 
140
191
  exports.StyledActionLink = StyledActionLink;
141
192
  exports.StyledBannerContainer = StyledBannerContainer;
package/cjs/utils/styleHelpers.js CHANGED
@@ -2,21 +2,48 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var dsSystem = require('@elliemae/ds-system');
7
6
  var bannerTypes = require('./bannerTypes.js');
8
7
 
9
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
-
11
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
-
13
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
14
- const slideIn = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n"])));
15
- const slideOut = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n"])));
8
+ const slideIn = dsSystem.kfrm`
9
+ 0% {
10
+ transform: translate3d(0, -100%, 0);
11
+ }
12
+ 100% {
13
+ transform: translate3d(0, 0, 0);
14
+ }
15
+ `;
16
+ const slideOut = dsSystem.kfrm`
17
+ 0% {
18
+ transform: translate3d(0, 0, 0);
19
+ opacity: 1;
20
+ }
21
+ 60% {
22
+ opacity: 0;
23
+ }
24
+ 100% {
25
+ opacity: 0;
26
+ transform: translate3d(0, -100%, 0);
27
+ }
28
+ `;
16
29
 
17
- const spanContainer = height => dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n 0% {\n height: 0px;\n }\n 100% {\n height: ", "px;\n }\n"])), height);
30
+ const spanContainer = height => dsSystem.kfrm`
31
+ 0% {
32
+ height: 0px;
33
+ }
34
+ 100% {
35
+ height: ${height}px;
36
+ }
37
+ `;
18
38
 
19
- const shrinkContainer = height => dsSystem.kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n 0% {\n height: ", "px;\n }\n 100% {\n height: 0px;\n }\n"])), height);
39
+ const shrinkContainer = height => dsSystem.kfrm`
40
+ 0% {
41
+ height: ${height}px;
42
+ }
43
+ 100% {
44
+ height: 0px;
45
+ }
46
+ `;
20
47
 
21
48
  const handleBorderColor = (type, _ref) => {
22
49
  let {
@@ -42,9 +69,13 @@ const handleAnimation = function (isAnimating, isOpen) {
42
69
 
43
70
  if (isAnimating) {
44
71
  if (isOpen) {
45
- return dsSystem.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n animation: ", " 0.5s ease-in;\n "])), height ? spanContainer(height) : slideIn);
72
+ return dsSystem.css`
73
+ animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
74
+ `;
46
75
  } else {
47
- return dsSystem.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n animation: ", " 0.5s ease-in;\n "])), height ? shrinkContainer(height) : slideOut);
76
+ return dsSystem.css`
77
+ animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
78
+ `;
48
79
  }
49
80
  }
50
81
  };
package/esm/DSBanner.js CHANGED
@@ -1,11 +1,10 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import _jsx from '@babel/runtime/helpers/esm/jsx';
3
- import 'core-js/modules/web.dom-collections.iterator.js';
4
1
  import 'core-js/modules/esnext.async-iterator.filter.js';
5
2
  import 'core-js/modules/esnext.iterator.constructor.js';
6
3
  import 'core-js/modules/esnext.iterator.filter.js';
7
4
  import 'core-js/modules/esnext.async-iterator.for-each.js';
8
5
  import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import _jsx from '@babel/runtime/helpers/esm/jsx';
9
8
  import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
10
9
  import { CloseX } from '@elliemae/ds-icons';
11
10
  import { describe } from 'react-desc';
package/esm/propTypes.js CHANGED
@@ -14,7 +14,11 @@ const propTypes = {
14
14
  onClick: PropTypes.func,
15
15
  href: PropTypes.string
16
16
  }).description('Properties of the ActionLink component').defaultValue({}),
17
- actionRef: PropTypes.object.description("\n Reference to use actions:\n - focusOnLink: function to focus the banner\n - focusOnWrapper: function to focus the link\n ").defaultValue({})
17
+ actionRef: PropTypes.object.description(`
18
+ Reference to use actions:
19
+ - focusOnLink: function to focus the banner
20
+ - focusOnWrapper: function to focus the link
21
+ `).defaultValue({})
18
22
  };
19
23
 
20
24
  export { propTypes };
package/esm/styles.js CHANGED
@@ -1,131 +1,183 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import { styled } from '@elliemae/ds-system';
3
2
  import DSButton from '@elliemae/ds-button';
4
3
  import { handleAnimation, handleBorderColor } from './utils/styleHelpers.js';
5
4
 
6
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
7
5
  const StyledBannerContainer = styled('div', {
8
6
  name: 'DS-Banner',
9
7
  slot: 'root'
10
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow: hidden;\n height: ", ";\n ", ";\n"])), _ref => {
8
+ })`
9
+ overflow: hidden;
10
+ height: ${_ref => {
11
11
  let {
12
12
  isOpen
13
13
  } = _ref;
14
14
  return isOpen ? 'auto' : '0px';
15
- }, _ref2 => {
15
+ }};
16
+ ${_ref2 => {
16
17
  let {
17
18
  isAnimating,
18
19
  isOpen,
19
20
  height
20
21
  } = _ref2;
21
22
  return handleAnimation(isAnimating, isOpen, height);
22
- });
23
+ }};
24
+ `;
23
25
  const StyledInnerContainer = styled('div', {
24
26
  name: 'DS-Banner',
25
27
  slot: 'innerContainer'
26
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ", ";\n border-bottom: 5px solid ", ";\n ", ";\n &:focus {\n position: relative;\n &:after {\n content: '';\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n border-radius: 2px;\n width: calc(100%);\n border: 2px solid #1e79c2;\n height: calc(100% + 4px);\n }\n }\n grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;\n"])), _ref3 => {
28
+ })`
29
+ padding-right: 6px;
30
+ display: grid;
31
+ align-items: center;
32
+ min-height: 41px;
33
+ width: 100%;
34
+ background-color: ${_ref3 => {
27
35
  let {
28
36
  theme
29
37
  } = _ref3;
30
38
  return theme.colors.neutral['000'];
31
- }, _ref4 => {
39
+ }};
40
+ border-bottom: 5px solid ${_ref4 => {
32
41
  let {
33
42
  type,
34
43
  theme
35
44
  } = _ref4;
36
45
  return handleBorderColor(type, theme);
37
- }, _ref5 => {
46
+ }};
47
+ ${_ref5 => {
38
48
  let {
39
49
  isAnimating,
40
50
  isOpen
41
51
  } = _ref5;
42
52
  return handleAnimation(isAnimating, isOpen);
43
- });
53
+ }};
54
+ &:focus {
55
+ position: relative;
56
+ &:after {
57
+ content: '';
58
+ display: block;
59
+ position: absolute;
60
+ top: 0;
61
+ left: 0;
62
+ pointer-events: none;
63
+ border-radius: 2px;
64
+ width: calc(100%);
65
+ border: 2px solid #1e79c2;
66
+ height: calc(100% + 4px);
67
+ }
68
+ }
69
+ grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
70
+ `;
44
71
  const StyledIconContainer = styled('div', {
45
72
  name: 'DS-Banner',
46
73
  slot: 'iconContainer'
47
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin-right: ", ";\n margin-left: ", ";\n"])), _ref6 => {
74
+ })`
75
+ margin-right: ${_ref6 => {
48
76
  let {
49
77
  theme
50
78
  } = _ref6;
51
79
  return theme.space.xxs;
52
- }, _ref7 => {
80
+ }};
81
+ margin-left: ${_ref7 => {
53
82
  let {
54
83
  theme
55
84
  } = _ref7;
56
85
  return theme.space.xs;
57
- });
86
+ }};
87
+ `;
58
88
  const StyledTitle = styled('div', {
59
89
  name: 'DS-Banner',
60
90
  slot: 'title'
61
- })(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref8 => {
91
+ })`
92
+ color: ${_ref8 => {
62
93
  let {
63
94
  theme
64
95
  } = _ref8;
65
96
  return theme.colors.neutral[700];
66
- }, _ref9 => {
97
+ }};
98
+ font-size: ${_ref9 => {
67
99
  let {
68
100
  theme
69
101
  } = _ref9;
70
102
  return theme.fontSizes.label[400];
71
- }, _ref10 => {
103
+ }};
104
+ font-weight: ${_ref10 => {
72
105
  let {
73
106
  theme
74
107
  } = _ref10;
75
108
  return theme.fontWeights.semibold;
76
- });
109
+ }};
110
+ `;
77
111
  const StyledSubTitle = styled('div', {
78
112
  name: 'DS-Banner',
79
113
  slot: 'subtitle'
80
- })(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: 100%;\n margin-left: ", ";\n font-size: ", ";\n font-weight: ", ";\n"])), _ref11 => {
114
+ })`
115
+ width: 100%;
116
+ margin-left: ${_ref11 => {
81
117
  let {
82
118
  theme
83
119
  } = _ref11;
84
120
  return theme.space.xs;
85
- }, _ref12 => {
121
+ }};
122
+ font-size: ${_ref12 => {
86
123
  let {
87
124
  theme
88
125
  } = _ref12;
89
126
  return theme.fontSizes.subTitle[400];
90
- }, _ref13 => {
127
+ }};
128
+ font-weight: ${_ref13 => {
91
129
  let {
92
130
  theme
93
131
  } = _ref13;
94
132
  return theme.fontWeights.regular;
95
- });
133
+ }};
134
+ `;
96
135
  const StyledActionLink = styled('a', {
97
136
  name: 'DS-Banner',
98
137
  slot: 'action'
99
- })(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: ", ";\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n"])), _ref14 => {
138
+ })`
139
+ margin-left: ${_ref14 => {
100
140
  let {
101
141
  theme,
102
142
  isBodyEmpty
103
143
  } = _ref14;
104
144
  return isBodyEmpty ? theme.space.xs : 0;
105
- }, _ref15 => {
145
+ }};
146
+ white-space: nowrap;
147
+ text-decoration: none;
148
+ line-height: 1.1;
149
+ font-size: ${_ref15 => {
106
150
  let {
107
151
  theme
108
152
  } = _ref15;
109
153
  return theme.fontSizes.hyperlink[400];
110
- }, _ref16 => {
154
+ }};
155
+ font-weight: ${_ref16 => {
111
156
  let {
112
157
  theme
113
158
  } = _ref16;
114
159
  return theme.fontWeights.regular;
115
- }, _ref17 => {
160
+ }};
161
+ color: ${_ref17 => {
116
162
  let {
117
163
  theme
118
164
  } = _ref17;
119
165
  return theme.colors.brand[600];
120
- });
166
+ }};
167
+ `;
121
168
  const StyledCloseButton = styled(DSButton, {
122
169
  name: 'DS-Banner',
123
170
  slot: 'closeButton'
124
- })(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-left: ", ";\n &:not(focus) {\n border: transparent;\n }\n"])), _ref18 => {
171
+ })`
172
+ margin-left: ${_ref18 => {
125
173
  let {
126
174
  theme
127
175
  } = _ref18;
128
176
  return theme.space.xxs;
129
- });
177
+ }};
178
+ &:not(focus) {
179
+ border: transparent;
180
+ }
181
+ `;
130
182
 
131
183
  export { StyledActionLink, StyledBannerContainer, StyledCloseButton, StyledIconContainer, StyledInnerContainer, StyledSubTitle, StyledTitle };
package/esm/utils/styleHelpers.js CHANGED
@@ -1,14 +1,45 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import { kfrm, css } from '@elliemae/ds-system';
3
2
  import { BANNER_TYPES } from './bannerTypes.js';
4
3
 
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
6
- const slideIn = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n 100% {\n transform: translate3d(0, 0, 0);\n }\n"])));
7
- const slideOut = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0% {\n transform: translate3d(0, 0, 0);\n opacity: 1;\n }\n 60% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translate3d(0, -100%, 0);\n }\n"])));
4
+ const slideIn = kfrm`
5
+ 0% {
6
+ transform: translate3d(0, -100%, 0);
7
+ }
8
+ 100% {
9
+ transform: translate3d(0, 0, 0);
10
+ }
11
+ `;
12
+ const slideOut = kfrm`
13
+ 0% {
14
+ transform: translate3d(0, 0, 0);
15
+ opacity: 1;
16
+ }
17
+ 60% {
18
+ opacity: 0;
19
+ }
20
+ 100% {
21
+ opacity: 0;
22
+ transform: translate3d(0, -100%, 0);
23
+ }
24
+ `;
8
25
 
9
- const spanContainer = height => kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0% {\n height: 0px;\n }\n 100% {\n height: ", "px;\n }\n"])), height);
26
+ const spanContainer = height => kfrm`
27
+ 0% {
28
+ height: 0px;
29
+ }
30
+ 100% {
31
+ height: ${height}px;
32
+ }
33
+ `;
10
34
 
11
- const shrinkContainer = height => kfrm(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n 0% {\n height: ", "px;\n }\n 100% {\n height: 0px;\n }\n"])), height);
35
+ const shrinkContainer = height => kfrm`
36
+ 0% {
37
+ height: ${height}px;
38
+ }
39
+ 100% {
40
+ height: 0px;
41
+ }
42
+ `;
12
43
 
13
44
  const handleBorderColor = (type, _ref) => {
14
45
  let {
@@ -34,9 +65,13 @@ const handleAnimation = function (isAnimating, isOpen) {
34
65
 
35
66
  if (isAnimating) {
36
67
  if (isOpen) {
37
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in;\n "])), height ? spanContainer(height) : slideIn);
68
+ return css`
69
+ animation: ${height ? spanContainer(height) : slideIn} 0.5s ease-in;
70
+ `;
38
71
  } else {
39
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n animation: ", " 0.5s ease-in;\n "])), height ? shrinkContainer(height) : slideOut);
72
+ return css`
73
+ animation: ${height ? shrinkContainer(height) : slideOut} 0.5s ease-in;
74
+ `;
40
75
  }
41
76
  }
42
77
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-banner",
3
- "version": "2.4.2-rc.3",
3
+ "version": "2.4.3-rc.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Banner",
6
6
  "module": "./esm/index.js",
@@ -60,9 +60,9 @@
60
60
  "build": "node ../../scripts/build/build.js"
61
61
  },
62
62
  "dependencies": {
63
- "@elliemae/ds-button": "2.4.2-rc.3",
64
- "@elliemae/ds-icons": "2.4.2-rc.3",
65
- "@elliemae/ds-system": "2.4.2-rc.3",
63
+ "@elliemae/ds-button": "2.4.3-rc.0",
64
+ "@elliemae/ds-icons": "2.4.3-rc.0",
65
+ "@elliemae/ds-system": "2.4.3-rc.0",
66
66
  "react-desc": "~4.1.3"
67
67
  },
68
68
  "devDependencies": {