@elliemae/ds-banner 3.1.0-next.9 → 3.1.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.
- package/dist/cjs/exported-related/theming.js +2 -2
- package/dist/cjs/exported-related/theming.js.map +2 -2
- package/dist/cjs/styles.js +7 -7
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/exported-related/theming.js +2 -2
- package/dist/esm/exported-related/theming.js.map +2 -2
- package/dist/esm/styles.js +8 -8
- package/dist/esm/styles.js.map +2 -2
- package/package.json +5 -5
|
@@ -21,12 +21,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
var theming_exports = {};
|
|
22
22
|
__export(theming_exports, {
|
|
23
23
|
DSBannerName: () => DSBannerName,
|
|
24
|
-
|
|
24
|
+
DSBannerSlots: () => DSBannerSlots
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(theming_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
const DSBannerName = "DSBanner";
|
|
29
|
-
const
|
|
29
|
+
const DSBannerSlots = {
|
|
30
30
|
CONTAINER: "root",
|
|
31
31
|
INNER_CONTAINER: "inner-container",
|
|
32
32
|
TITLE: "title",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/theming.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,
|
|
4
|
+
"sourcesContent": ["export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -36,7 +36,7 @@ var import_styleHelpers = require("./utils/styleHelpers");
|
|
|
36
36
|
var import_exported_related = require("./exported-related");
|
|
37
37
|
const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
38
38
|
name: import_exported_related.DSBannerName,
|
|
39
|
-
slot: import_exported_related.
|
|
39
|
+
slot: import_exported_related.DSBannerSlots.CONTAINER
|
|
40
40
|
})`
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
|
|
@@ -47,7 +47,7 @@ const StyledBannerContainer = (0, import_ds_system.styled)("div", {
|
|
|
47
47
|
`;
|
|
48
48
|
const StyledInnerContainer = (0, import_ds_system.styled)("div", {
|
|
49
49
|
name: import_exported_related.DSBannerName,
|
|
50
|
-
slot: import_exported_related.
|
|
50
|
+
slot: import_exported_related.DSBannerSlots.INNER_CONTAINER
|
|
51
51
|
})`
|
|
52
52
|
padding-right: 6px;
|
|
53
53
|
display: grid;
|
|
@@ -75,22 +75,22 @@ const StyledInnerContainer = (0, import_ds_system.styled)("div", {
|
|
|
75
75
|
}
|
|
76
76
|
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
77
77
|
`;
|
|
78
|
-
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.
|
|
78
|
+
const StyledIconContainer = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ICON_CONTAINER })`
|
|
79
79
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
80
80
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
81
81
|
`;
|
|
82
|
-
const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.
|
|
82
|
+
const StyledTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.TITLE })`
|
|
83
83
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
84
84
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
85
85
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
86
86
|
`;
|
|
87
|
-
const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.
|
|
87
|
+
const StyledSubTitle = (0, import_ds_system.styled)("div", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.SUBTITLE })`
|
|
88
88
|
width: 100%;
|
|
89
89
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
90
90
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
91
91
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
92
92
|
`;
|
|
93
|
-
const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.DSBannerName, slot: import_exported_related.
|
|
93
|
+
const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.ACTION_LINK })`
|
|
94
94
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
95
95
|
white-space: nowrap;
|
|
96
96
|
text-decoration: none;
|
|
@@ -106,7 +106,7 @@ const StyledActionLink = (0, import_ds_system.styled)("a", { name: import_export
|
|
|
106
106
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
107
107
|
}
|
|
108
108
|
`;
|
|
109
|
-
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.DSBannerName, slot: import_exported_related.
|
|
109
|
+
const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_exported_related.DSBannerName, slot: import_exported_related.DSBannerSlots.CLOSE_BUTTON })`
|
|
110
110
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
111
111
|
`;
|
|
112
112
|
//# sourceMappingURL=styles.js.map
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName,
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,
|
|
4
|
+
"sourcesContent": ["import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n ref: React.MutableRefObject<HTMLAnchorElement>;\n}\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\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`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`\n margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA8C;AAC9C,uBAA2B;AAC3B,0BAAmD;AACnD,8BAA4C;AAsBrC,MAAM,wBAAwB,6BAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,yCAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,6BAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,sCAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,2CAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,yCAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,6BAAO,OAAO,EAAE,MAAM,sCAAc,MAAM,sCAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,6BAA0B,KAAK,EAAE,MAAM,sCAAc,MAAM,sCAAc,YAAY,CAAC;AAAA,iBACrG,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,6BAAO,6BAAY,EAAE,MAAM,sCAAc,MAAM,sCAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
const DSBannerName = "DSBanner";
|
|
3
|
-
const
|
|
3
|
+
const DSBannerSlots = {
|
|
4
4
|
CONTAINER: "root",
|
|
5
5
|
INNER_CONTAINER: "inner-container",
|
|
6
6
|
TITLE: "title",
|
|
@@ -11,6 +11,6 @@ const slots = {
|
|
|
11
11
|
};
|
|
12
12
|
export {
|
|
13
13
|
DSBannerName,
|
|
14
|
-
|
|
14
|
+
DSBannerSlots
|
|
15
15
|
};
|
|
16
16
|
//# sourceMappingURL=theming.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/theming.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,eAAe;AAErB,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSBannerName = 'DSBanner';\n\nexport const DSBannerSlots = {\n CONTAINER: 'root',\n INNER_CONTAINER: 'inner-container',\n TITLE: 'title',\n SUBTITLE: 'subtitle',\n ICON_CONTAINER: 'icon-container',\n ACTION_LINK: 'action-link',\n CLOSE_BUTTON: 'close-button',\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAO,MAAM,eAAe;AAErB,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,cAAc;AAChB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -2,10 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
import { styled, sizing, space, layout } from "@elliemae/ds-system";
|
|
3
3
|
import { DSButtonV2 } from "@elliemae/ds-button";
|
|
4
4
|
import { handleAnimation, handleBorderColor } from "./utils/styleHelpers";
|
|
5
|
-
import { DSBannerName,
|
|
5
|
+
import { DSBannerName, DSBannerSlots } from "./exported-related";
|
|
6
6
|
const StyledBannerContainer = styled("div", {
|
|
7
7
|
name: DSBannerName,
|
|
8
|
-
slot:
|
|
8
|
+
slot: DSBannerSlots.CONTAINER
|
|
9
9
|
})`
|
|
10
10
|
overflow: hidden;
|
|
11
11
|
height: ${({ isOpen }) => isOpen ? "auto" : "0px"};
|
|
@@ -16,7 +16,7 @@ const StyledBannerContainer = styled("div", {
|
|
|
16
16
|
`;
|
|
17
17
|
const StyledInnerContainer = styled("div", {
|
|
18
18
|
name: DSBannerName,
|
|
19
|
-
slot:
|
|
19
|
+
slot: DSBannerSlots.INNER_CONTAINER
|
|
20
20
|
})`
|
|
21
21
|
padding-right: 6px;
|
|
22
22
|
display: grid;
|
|
@@ -44,22 +44,22 @@ const StyledInnerContainer = styled("div", {
|
|
|
44
44
|
}
|
|
45
45
|
grid-template-columns: auto minmax(auto, auto) minmax(auto, 1fr) auto;
|
|
46
46
|
`;
|
|
47
|
-
const StyledIconContainer = styled("div", { name: DSBannerName, slot:
|
|
47
|
+
const StyledIconContainer = styled("div", { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`
|
|
48
48
|
margin-right: ${({ theme }) => theme.space.xxs};
|
|
49
49
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
50
50
|
`;
|
|
51
|
-
const StyledTitle = styled("div", { name: DSBannerName, slot:
|
|
51
|
+
const StyledTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.TITLE })`
|
|
52
52
|
color: ${({ theme }) => theme.colors.neutral[700]};
|
|
53
53
|
font-size: ${({ theme }) => theme.fontSizes.label[400]};
|
|
54
54
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
|
55
55
|
`;
|
|
56
|
-
const StyledSubTitle = styled("div", { name: DSBannerName, slot:
|
|
56
|
+
const StyledSubTitle = styled("div", { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`
|
|
57
57
|
width: 100%;
|
|
58
58
|
margin-left: ${({ theme }) => theme.space.xs};
|
|
59
59
|
font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};
|
|
60
60
|
font-weight: ${({ theme }) => theme.fontWeights.regular};
|
|
61
61
|
`;
|
|
62
|
-
const StyledActionLink = styled("a", { name: DSBannerName, slot:
|
|
62
|
+
const StyledActionLink = styled("a", { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`
|
|
63
63
|
margin-left: ${({ theme, isBodyEmpty }) => isBodyEmpty ? theme.space.xs : 0};
|
|
64
64
|
white-space: nowrap;
|
|
65
65
|
text-decoration: none;
|
|
@@ -75,7 +75,7 @@ const StyledActionLink = styled("a", { name: DSBannerName, slot: slots.ACTION_LI
|
|
|
75
75
|
border: 2px solid ${({ theme }) => theme.colors.brand[700]};
|
|
76
76
|
}
|
|
77
77
|
`;
|
|
78
|
-
const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot:
|
|
78
|
+
const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`
|
|
79
79
|
margin-left: ${({ theme }) => theme.space.xxs};
|
|
80
80
|
`;
|
|
81
81
|
export {
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName,
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAsBO,MAAM,wBAAwB,OAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, sizing, space, layout } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { handleAnimation, handleBorderColor } from './utils/styleHelpers';\nimport { DSBannerName, DSBannerSlots } from './exported-related';\nimport type { DSBannerInternalsT } from './sharedTypes';\n\ninterface StyledBannerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n height: number;\n}\n\ninterface StyledInnerContainerT {\n type: DSBannerInternalsT.BannerTypesT;\n isOpen: boolean;\n isAnimating: boolean;\n ref: React.MutableRefObject<HTMLDivElement>;\n}\n\ninterface StyledActionLinkT {\n isBodyEmpty: string;\n ref: React.MutableRefObject<HTMLAnchorElement>;\n}\n\nexport const StyledBannerContainer = styled<StyledBannerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.CONTAINER,\n})`\n overflow: hidden;\n height: ${({ isOpen }) => (isOpen ? 'auto' : '0px')};\n ${({ isAnimating, isOpen, height }) => handleAnimation(isAnimating, isOpen, height)};\n ${sizing}\n ${space}\n ${layout}\n`;\n\nexport const StyledInnerContainer = styled<StyledInnerContainerT>('div', {\n name: DSBannerName,\n slot: DSBannerSlots.INNER_CONTAINER,\n})`\n padding-right: 6px;\n display: grid;\n align-items: center;\n min-height: 41px;\n width: 100%;\n background-color: ${({ theme }) => theme.colors.neutral['000']};\n border-bottom: 5px solid ${({ type, theme }) => handleBorderColor(type, theme)};\n transform: translateY(${({ isOpen }) => (isOpen ? '0' : '-100%')});\n ${({ isAnimating, isOpen }) => handleAnimation(isAnimating, isOpen)};\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`;\n\nexport const StyledIconContainer = styled('div', { name: DSBannerName, slot: DSBannerSlots.ICON_CONTAINER })`\n margin-right: ${({ theme }) => theme.space.xxs};\n margin-left: ${({ theme }) => theme.space.xs};\n`;\n\nexport const StyledTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.TITLE })`\n color: ${({ theme }) => theme.colors.neutral[700]};\n font-size: ${({ theme }) => theme.fontSizes.label[400]};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n`;\n\nexport const StyledSubTitle = styled('div', { name: DSBannerName, slot: DSBannerSlots.SUBTITLE })`\n width: 100%;\n margin-left: ${({ theme }) => theme.space.xs};\n font-size: ${({ theme }) => theme.fontSizes.subTitle[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n`;\n\nexport const StyledActionLink = styled<StyledActionLinkT>('a', { name: DSBannerName, slot: DSBannerSlots.ACTION_LINK })`\n margin-left: ${({ theme, isBodyEmpty }) => (isBodyEmpty ? theme.space.xs : 0)};\n white-space: nowrap;\n text-decoration: none;\n line-height: 1.1;\n font-size: ${({ theme }) => theme.fontSizes.hyperlink[400]};\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme }) => theme.colors.brand[600]};\n border: 2px solid transparent;\n border-radius: 2px;\n padding: 2px 4px;\n &:focus {\n outline: none;\n border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n }\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSBannerName, slot: DSBannerSlots.CLOSE_BUTTON })`\n margin-left: ${({ theme }) => theme.space.xxs};\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAsBO,MAAM,wBAAwB,OAA+B,OAAO;AAAA,EACzE,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA,YAEW,CAAC,EAAE,aAAc,SAAS,SAAS;AAAA,IAC3C,CAAC,EAAE,aAAa,QAAQ,aAAa,gBAAgB,aAAa,QAAQ,MAAM;AAAA,IAChF;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,OAA8B,OAAO;AAAA,EACvE,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMqB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,6BAC7B,CAAC,EAAE,MAAM,YAAY,kBAAkB,MAAM,KAAK;AAAA,0BACrD,CAAC,EAAE,aAAc,SAAS,MAAM;AAAA,IACtD,CAAC,EAAE,aAAa,aAAa,gBAAgB,aAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmB7D,MAAM,sBAAsB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,eAAe,CAAC;AAAA,kBACzF,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,iBAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAGrC,MAAM,cAAc,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,MAAM,CAAC;AAAA,WAC/E,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,eAChC,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA,iBACnC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,iBAAiB,OAAO,OAAO,EAAE,MAAM,cAAc,MAAM,cAAc,SAAS,CAAC;AAAA;AAAA,iBAE/E,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC7B,CAAC,EAAE,YAAY,MAAM,UAAU,SAAS;AAAA,iBACtC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA;AAG3C,MAAM,mBAAmB,OAA0B,KAAK,EAAE,MAAM,cAAc,MAAM,cAAc,YAAY,CAAC;AAAA,iBACrG,CAAC,EAAE,OAAO,kBAAmB,cAAc,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,eAI9D,CAAC,EAAE,YAAY,MAAM,UAAU,UAAU;AAAA,iBACvC,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAMrB,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAInD,MAAM,oBAAoB,OAAO,YAAY,EAAE,MAAM,cAAc,MAAM,cAAc,aAAa,CAAC;AAAA,iBAC3F,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-banner",
|
|
3
|
-
"version": "3.1.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Banner",
|
|
6
6
|
"files": [
|
|
@@ -63,10 +63,10 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-button": "3.1.0
|
|
67
|
-
"@elliemae/ds-icons": "3.1.0
|
|
68
|
-
"@elliemae/ds-system": "3.1.0
|
|
69
|
-
"@elliemae/ds-utilities": "3.1.0
|
|
66
|
+
"@elliemae/ds-button": "3.1.0",
|
|
67
|
+
"@elliemae/ds-icons": "3.1.0",
|
|
68
|
+
"@elliemae/ds-system": "3.1.0",
|
|
69
|
+
"@elliemae/ds-utilities": "3.1.0"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@testing-library/jest-dom": "~5.16.2",
|