@elliemae/ds-side-panel 3.1.0-next.0 → 3.1.0-next.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.
- package/dist/cjs/SidePanel.js +8 -8
- package/dist/cjs/SidePanel.js.map +2 -2
- package/dist/cjs/SidePanelHeader.js +14 -14
- package/dist/cjs/SidePanelHeader.js.map +2 -2
- package/dist/cjs/TemplateBasicPageWithSidePanel.js +12 -12
- package/dist/cjs/TemplateBasicPageWithSidePanel.js.map +2 -2
- package/dist/cjs/props.js +12 -12
- package/dist/cjs/props.js.map +2 -2
- package/dist/esm/SidePanel.js +2 -2
- package/dist/esm/SidePanel.js.map +1 -1
- package/dist/esm/SidePanelHeader.js +2 -2
- package/dist/esm/SidePanelHeader.js.map +1 -1
- package/dist/esm/TemplateBasicPageWithSidePanel.js +1 -1
- package/dist/esm/TemplateBasicPageWithSidePanel.js.map +1 -1
- package/dist/esm/props.js +1 -1
- package/dist/esm/props.js.map +1 -1
- package/package.json +15 -14
package/dist/cjs/SidePanel.js
CHANGED
|
@@ -27,13 +27,13 @@ __export(SidePanel_exports, {
|
|
|
27
27
|
module.exports = __toCommonJS(SidePanel_exports);
|
|
28
28
|
var React = __toESM(require("react"));
|
|
29
29
|
var import_react = __toESM(require("react"));
|
|
30
|
-
var
|
|
31
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
30
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
31
|
var import_ds_system = require("@elliemae/ds-system");
|
|
32
|
+
var import_ds_system2 = require("@elliemae/ds-system");
|
|
33
33
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
34
34
|
var import_props = require("./props");
|
|
35
35
|
var import_defaultProps = require("./defaultProps");
|
|
36
|
-
const Container =
|
|
36
|
+
const Container = import_ds_system.styled.div`
|
|
37
37
|
display: flex;
|
|
38
38
|
height: 100%;
|
|
39
39
|
flex-direction: row;
|
|
@@ -41,10 +41,10 @@ const Container = import_styled_components.default.div`
|
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
${({ noGridInfluencer }) => noGridInfluencer ? "position: relative;" : ""}
|
|
43
43
|
`;
|
|
44
|
-
const TransGrid = (0,
|
|
44
|
+
const TransGrid = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
45
45
|
box-shadow: ${(props) => props.withBoxShadow ? "0 2px 5px 0 rgba(53, 60, 70, 0.5)" : "none"};
|
|
46
46
|
transition: 300ms;
|
|
47
|
-
border-left: ${(props) => props.withBorder ? (0,
|
|
47
|
+
border-left: ${(props) => props.withBorder ? (0, import_ds_system2.border)(props.theme.colors.neutral["300"], "1px") : "none"};
|
|
48
48
|
${({ noGridInfluencer }) => noGridInfluencer ? `
|
|
49
49
|
position: absolute;
|
|
50
50
|
top:0;
|
|
@@ -53,8 +53,8 @@ const TransGrid = (0, import_styled_components.default)(import_ds_grid.Grid)`
|
|
|
53
53
|
` : ""}
|
|
54
54
|
background: ${(props) => props.theme.colors.neutral["000"]};
|
|
55
55
|
`;
|
|
56
|
-
const FooterContainer = (0,
|
|
57
|
-
border-top: ${(props) => (0,
|
|
56
|
+
const FooterContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
57
|
+
border-top: ${(props) => (0, import_ds_system2.border)(props.theme.colors.neutral["300"])};
|
|
58
58
|
`;
|
|
59
59
|
const SidePanel = ({
|
|
60
60
|
children,
|
|
@@ -99,7 +99,7 @@ const SidePanel = ({
|
|
|
99
99
|
SidePanel.propTypes = import_props.props;
|
|
100
100
|
SidePanel.defaultProps = import_defaultProps.defaultProps;
|
|
101
101
|
SidePanel.displayName = "SidePanel";
|
|
102
|
-
const DSSidePanelWithSchema = (0,
|
|
102
|
+
const DSSidePanelWithSchema = (0, import_ds_utilities.describe)(SidePanel);
|
|
103
103
|
DSSidePanelWithSchema.propTypes = import_props.props;
|
|
104
104
|
var SidePanel_default = SidePanel;
|
|
105
105
|
//# sourceMappingURL=SidePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as spprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer,\n withBorder = true,\n withBoxShadow = false,\n}): React.ReactElement => (\n <Container noGridInfluencer={noGridInfluencer}>\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n >\n <Grid\n rows={\n footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </Grid>\n </TransGrid>\n </Container>\n);\n\nSidePanel.propTypes = spprops;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = spprops;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyB;AACzB,uBAAuB;AACvB,wBAAuB;AACvB,qBAAqB;AACrB,mBAAiC;AACjC,0BAA6B;AAE7B,MAAM,YAAY,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,uBAAwB,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,6BAAO,mBAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,8BAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,uBACH,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,6BAAO,mBAAI;AAAA,gBACnB,CAAC,UAAU,8BAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,MAEhB,mDAAC;AAAA,EAAU;AAAA,GACT,mDAAC;AAAA,EAAU,QAAO;AAAA,EAAO,MAAK;AAAA,EAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,GACjF,QACH,GACA,mDAAC;AAAA,EACC,OAAO,EAAE,UAAU,SAAS;AAAA,EAC5B,QAAO;AAAA,EACP,WAAU;AAAA,EACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM,CAAC,CAAC;AAAA,EACR;AAAA,GAEA,mDAAC;AAAA,EACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,EAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,GAE5B,mDAAC,2BAAM,MAAO,GACd,mDAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,GAChC,mDAAC;AAAA,EAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,GAAI,YAAa,CACjE,GACC,SACC,mDAAC;AAAA,EAAgB,YAAW;AAAA,EAAS,IAAG;AAAA,EAAK,IAAG;AAAA,GAC7C,MACH,IACE,IACN,CACF,CACF;AAGF,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,kCAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,30 +26,30 @@ __export(SidePanelHeader_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(SidePanelHeader_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
var import_react = __toESM(require("react"));
|
|
29
|
-
var
|
|
30
|
-
var import_styled_components = __toESM(require("styled-components"));
|
|
31
|
-
var import_lodash = require("lodash");
|
|
29
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
30
|
var import_ds_system = require("@elliemae/ds-system");
|
|
31
|
+
var import_lodash = require("lodash");
|
|
32
|
+
var import_ds_system2 = require("@elliemae/ds-system");
|
|
33
33
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
34
34
|
var import_ds_button = __toESM(require("@elliemae/ds-button"));
|
|
35
35
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
36
|
-
const StyledSeparator =
|
|
36
|
+
const StyledSeparator = import_ds_system.styled.div`
|
|
37
37
|
width: 0;
|
|
38
38
|
height: 100%;
|
|
39
39
|
margin: 0 ${(props2) => props2.theme.space.xxs};
|
|
40
40
|
border-left: ${(props2) => `${props2.theme.colors.neutral[300]} 1px solid`};
|
|
41
41
|
`;
|
|
42
|
-
const StyledTitle =
|
|
42
|
+
const StyledTitle = import_ds_system.styled.div`
|
|
43
43
|
font-size: 18px;
|
|
44
44
|
font-weight: ${(props2) => props2.theme.fontWeights.regular};
|
|
45
45
|
color: ${(props2) => props2.theme.colors.neutral["700"]};
|
|
46
|
-
${(0,
|
|
46
|
+
${(0, import_ds_system2.truncate)()}
|
|
47
47
|
`;
|
|
48
|
-
const Wrapper = (0,
|
|
49
|
-
border-bottom: ${(props2) => (0,
|
|
48
|
+
const Wrapper = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
49
|
+
border-bottom: ${(props2) => (0, import_ds_system2.border)(props2.theme.colors.neutral["300"])};
|
|
50
50
|
`;
|
|
51
51
|
const SidePanelHeader = ({ title = null, additionalAction = null, onClose = import_lodash.noop, showClose = true }) => {
|
|
52
|
-
const theme = (0,
|
|
52
|
+
const theme = (0, import_ds_system2.useTheme)();
|
|
53
53
|
const separator = /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
|
|
54
54
|
height: "24px"
|
|
55
55
|
}, /* @__PURE__ */ import_react.default.createElement(StyledSeparator, null));
|
|
@@ -91,13 +91,13 @@ const SidePanelHeader = ({ title = null, additionalAction = null, onClose = impo
|
|
|
91
91
|
}))));
|
|
92
92
|
};
|
|
93
93
|
const props = {
|
|
94
|
-
title:
|
|
95
|
-
additionalAction:
|
|
96
|
-
onClose:
|
|
97
|
-
showClose:
|
|
94
|
+
title: import_ds_utilities.PropTypes.string.description("Page title"),
|
|
95
|
+
additionalAction: import_ds_utilities.PropTypes.element.description("Action button"),
|
|
96
|
+
onClose: import_ds_utilities.PropTypes.func.description("Called when the slide collapse"),
|
|
97
|
+
showClose: import_ds_utilities.PropTypes.bool.description("Show/Hide close button")
|
|
98
98
|
};
|
|
99
99
|
SidePanelHeader.propTypes = props;
|
|
100
100
|
SidePanelHeader.displayName = "SidePanelHeader";
|
|
101
|
-
const DSSidePanelHeaderWithSchema = (0,
|
|
101
|
+
const DSSidePanelHeaderWithSchema = (0, import_ds_utilities.describe)(SidePanelHeader);
|
|
102
102
|
DSSidePanelHeaderWithSchema.propTypes = props;
|
|
103
103
|
//# sourceMappingURL=SidePanelHeader.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SidePanelHeader.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n`;\n\nconst StyledTitle = styled.div`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n const theme = useTheme();\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator />\n </Grid>\n );\n const cols = [1, 'auto', 'auto'];\n const cols2 = ['auto'];\n return (\n <Wrapper\n cols={cols}\n height={theme.space.m}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"center\"\n width=\"100%\"\n >\n <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid cols={[1]} alignItems=\"center\" pr={theme.space.xs}>\n <Grid flexGrow={0}>\n <Grid cols={['auto', 'auto']} alignItems=\"center\">\n <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n {title}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <DSButton\n buttonType=\"text\"\n icon={<CloseSmall />}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n />\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nconst props = {\n /** Page title */\n title: PropTypes.string.description('Page title'),\n\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse'),\n\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,uBAAuB;AACvB,oBAAqB;AACrB,wBAA2C;AAC3C,sBAA2B;AAC3B,uBAAqB;AACrB,qBAAqB;AAErB,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA,cAGjB,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,WAAU,GAAG,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,wBAAO;AAAA;AAAA,iBAEV,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,WACzC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,gCAAS;AAAA;AAGb,MAAM,UAAU,6BAAO,mBAAI;AAAA,mBACR,CAAC,WAAU,8BAAO,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,oBAAM,YAAY,WAAW;AACvG,QAAM,QAAQ,gCAAS;AACvB,QAAM,YACJ,mDAAC;AAAA,IAAK,QAAO;AAAA,KACX,mDAAC,qBAAgB,CACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,mDAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,KAEN,mDAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,IAAa,MAAM;AAAA,KAC1D,mDAAC;AAAA,IAAK,MAAM,CAAC,CAAC;AAAA,IAAG,YAAW;AAAA,IAAS,IAAI,MAAM,MAAM;AAAA,KACnD,mDAAC;AAAA,IAAK,UAAU;AAAA,KACd,mDAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,IAAG,YAAW;AAAA,KACvC,mDAAC;AAAA,IAAY,UAAS;AAAA,IAAO,YAAW;AAAA,KACrC,KACH,CACF,CACF,CACF,CACF,GACA,mDAAC;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,KAC3F,oBAAoB,mDAAC,2BAAM,gBAAiB,GAC5C,oBAAoB,aAAa,WAClC,mDAAC,2BACE,aACC,mDAAC;AAAA,IACC,YAAW;AAAA,IACX,MAAM,mDAAC,gCAAW;AAAA,IAClB,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAY;AAAA,GACd,CAEJ,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,8BAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,8BAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,kCAAS,eAAe;AAE5D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -26,7 +26,7 @@ __export(TemplateBasicPageWithSidePanel_exports, {
|
|
|
26
26
|
module.exports = __toCommonJS(TemplateBasicPageWithSidePanel_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
28
|
var import_react = __toESM(require("react"));
|
|
29
|
-
var
|
|
29
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
30
30
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
31
31
|
var import_SidePanel = __toESM(require("./SidePanel"));
|
|
32
32
|
const TemplateBasicPageWithSidePanel = ({
|
|
@@ -67,19 +67,19 @@ const TemplateBasicPageWithSidePanel = ({
|
|
|
67
67
|
alignItems: "center"
|
|
68
68
|
}, mainFooter)))));
|
|
69
69
|
const props = {
|
|
70
|
-
globalHeader:
|
|
71
|
-
mainHeader:
|
|
72
|
-
mainContent:
|
|
73
|
-
mainFooter:
|
|
74
|
-
isOpen:
|
|
75
|
-
panelFooter:
|
|
76
|
-
panelHeader:
|
|
77
|
-
panelContent:
|
|
78
|
-
panelWidth:
|
|
79
|
-
onClose:
|
|
70
|
+
globalHeader: import_ds_utilities.PropTypes.element.description("Global Header"),
|
|
71
|
+
mainHeader: import_ds_utilities.PropTypes.element.description("Main Header"),
|
|
72
|
+
mainContent: import_ds_utilities.PropTypes.element.isRequired.description("Main content"),
|
|
73
|
+
mainFooter: import_ds_utilities.PropTypes.element.description("Main Footer"),
|
|
74
|
+
isOpen: import_ds_utilities.PropTypes.bool.description("Should show the slide panel or not"),
|
|
75
|
+
panelFooter: import_ds_utilities.PropTypes.element.description("Footer for Slide Panel"),
|
|
76
|
+
panelHeader: import_ds_utilities.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
|
|
77
|
+
panelContent: import_ds_utilities.PropTypes.element.description("Content for Slide Panel"),
|
|
78
|
+
panelWidth: import_ds_utilities.PropTypes.number.description("Width of the panel open. eg: 300"),
|
|
79
|
+
onClose: import_ds_utilities.PropTypes.func.description("callback")
|
|
80
80
|
};
|
|
81
81
|
TemplateBasicPageWithSidePanel.propTypes = props;
|
|
82
82
|
TemplateBasicPageWithSidePanel.displayName = "TemplateBasicPageWithSidePanel";
|
|
83
|
-
const DSTemplateBasicPageWithSidePanel = (0,
|
|
83
|
+
const DSTemplateBasicPageWithSidePanel = (0, import_ds_utilities.describe)(TemplateBasicPageWithSidePanel);
|
|
84
84
|
DSTemplateBasicPageWithSidePanel.propTypes = props;
|
|
85
85
|
//# sourceMappingURL=TemplateBasicPageWithSidePanel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/TemplateBasicPageWithSidePanel.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\n\nconst TemplateBasicPageWithSidePanel = ({\n globalHeader = null,\n mainHeader = null,\n mainContent,\n mainFooter,\n isOpen = false,\n onClose,\n panelFooter,\n panelHeader,\n panelContent,\n panelWidth,\n}) => (\n <Grid\n style={{ overflow: 'hidden', width: '100%' }}\n height=\"100%\"\n maxHeight=\"100%\"\n rows={['auto', '1fr']}\n >\n <Grid>{globalHeader}</Grid>\n <SidePanel\n footer={panelFooter}\n header={panelHeader}\n panelWidth={panelWidth}\n onClose={onClose}\n panelContent={panelContent}\n isOpen={isOpen}\n >\n <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n <Grid\n rows={\n mainFooter\n ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{mainHeader}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n </Grid>\n {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n </Grid>\n </Grid>\n </SidePanel>\n </Grid>\n);\n\nconst props = {\n /**\n * Global Header\n */\n globalHeader: PropTypes.element.description('Global Header'),\n /**\n * Main Header\n */\n mainHeader: PropTypes.element.description('Main Header'),\n /**\n * Main content\n */\n mainContent: PropTypes.element.isRequired.description('Main content'),\n /**\n * Main Footer\n */\n mainFooter: PropTypes.element.description('Main Footer'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n panelHeader: PropTypes.element.description(\n 'Header for Slide Panel instance of SlidePanelHeader',\n ),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n /**\n * Callback\n */\n onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(\n TemplateBasicPageWithSidePanel,\n);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAoC;AACpC,qBAAqB;AACrB,uBAAsB;AAEtB,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC;AAAA,EACC,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAC3C,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ,KAAK;AAAA,GAEpB,mDAAC,2BAAM,YAAa,GACpB,mDAAC;AAAA,EACC,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEA,mDAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,GAC3D,mDAAC;AAAA,EACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,EAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,GAE5B,mDAAC,2BAAM,UAAW,GAClB,mDAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,GAChC,mDAAC;AAAA,EAAK,OAAO,EAAE,UAAU,OAAO;AAAA,GAAI,WAAY,CAClD,GACC,cAAc,mDAAC;AAAA,EAAK,YAAW;AAAA,GAAU,UAAW,CACvD,CACF,CACF,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,8BAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,8BAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,8BAAU,QAAQ,YAC7B,qDACF;AAAA,EAIA,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,8BAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC,kCACvC,8BACF;AACA,iCAAiC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/props.js
CHANGED
|
@@ -24,18 +24,18 @@ __export(props_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(props_exports);
|
|
26
26
|
var React = __toESM(require("react"));
|
|
27
|
-
var
|
|
27
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
28
28
|
const props = {
|
|
29
|
-
children:
|
|
30
|
-
isOpen:
|
|
31
|
-
footer:
|
|
32
|
-
header:
|
|
33
|
-
panelContent:
|
|
34
|
-
panelWidth:
|
|
35
|
-
widthWhenIsClosed:
|
|
36
|
-
panelContentOverflow:
|
|
37
|
-
withBorder:
|
|
38
|
-
withBoxShadow:
|
|
39
|
-
noGridInfluencer:
|
|
29
|
+
children: import_ds_utilities.PropTypes.element.isRequired.description("Main content"),
|
|
30
|
+
isOpen: import_ds_utilities.PropTypes.bool.description("Should show the slide panel or not"),
|
|
31
|
+
footer: import_ds_utilities.PropTypes.element.description("Footer for Slide Panel"),
|
|
32
|
+
header: import_ds_utilities.PropTypes.element.description("Header for Slide Panel instance of SlidePanelHeader"),
|
|
33
|
+
panelContent: import_ds_utilities.PropTypes.element.description("Content for Slide Panel"),
|
|
34
|
+
panelWidth: import_ds_utilities.PropTypes.number.description("Width of the panel open. eg: 300"),
|
|
35
|
+
widthWhenIsClosed: import_ds_utilities.PropTypes.number.description("Width of the panel closed. eg: 0"),
|
|
36
|
+
panelContentOverflow: import_ds_utilities.PropTypes.oneOf(["auto", "hidden"]).description("Overflow on SidePanel content"),
|
|
37
|
+
withBorder: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel has border or not"),
|
|
38
|
+
withBoxShadow: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel has box shadow or not"),
|
|
39
|
+
noGridInfluencer: import_ds_utilities.PropTypes.bool.description("Whether the sidepanel is grid-influencer or not")
|
|
40
40
|
};
|
|
41
41
|
//# sourceMappingURL=props.js.map
|
package/dist/cjs/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAEnB,MAAM,QAAQ;AAAA,EAInB,UAAU,8BAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,8BAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,8BAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,8BAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,8BAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,8BAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,8BAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,8BAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,8BAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/SidePanel.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { describe } from "
|
|
4
|
-
import styled from "
|
|
3
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
4
|
+
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import { border } from "@elliemae/ds-system";
|
|
6
6
|
import { Grid } from "@elliemae/ds-grid";
|
|
7
7
|
import { props as spprops } from "./props";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { border } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { props as spprops } from './props';\nimport { defaultProps } from './defaultProps';\n\nconst Container = styled.div<{ noGridInfluencer: boolean }>`\n display: flex;\n height: 100%;\n flex-direction: row;\n max-height: 100%;\n overflow: hidden;\n ${({ noGridInfluencer }) => (noGridInfluencer ? 'position: relative;' : '')}\n`;\n\nconst TransGrid = styled(Grid)`\n box-shadow: ${(props) => (props.withBoxShadow ? '0 2px 5px 0 rgba(53, 60, 70, 0.5)' : 'none')};\n transition: 300ms;\n border-left: ${(props) => (props.withBorder ? border(props.theme.colors.neutral['300'], '1px') : 'none')};\n ${({ noGridInfluencer }) =>\n noGridInfluencer\n ? `\n position: absolute;\n top:0;\n right:0;\n height: 100%;\n `\n : ''}\n background: ${(props) => props.theme.colors.neutral['000']};\n`;\n\nconst FooterContainer = styled(Grid)`\n border-top: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanel = ({\n children,\n isOpen,\n footer,\n header,\n panelContent,\n panelWidth,\n panelContentOverflow,\n widthWhenIsClosed,\n noGridInfluencer,\n withBorder = true,\n withBoxShadow = false,\n}): React.ReactElement => (\n <Container noGridInfluencer={noGridInfluencer}>\n <TransGrid height=\"100%\" flex=\"1\" mr={noGridInfluencer ? `${widthWhenIsClosed}px` : 0}>\n {children}\n </TransGrid>\n <TransGrid\n style={{ overflow: 'hidden' }}\n height=\"100%\"\n maxHeight=\"100%\"\n width={isOpen ? `${panelWidth}px` : `${widthWhenIsClosed}px`}\n withBorder={withBorder}\n withBoxShadow={withBoxShadow}\n isOpen={isOpen}\n cols={[1]}\n noGridInfluencer={noGridInfluencer}\n >\n <Grid\n rows={\n footer ? [header ? '48px' : '0px', 'minmax(0px, 1fr)', '48px'] : [header ? '48px' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{header}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: panelContentOverflow }}>{panelContent}</Grid>\n </Grid>\n {footer ? (\n <FooterContainer alignItems=\"center\" pl=\"xs\" pr=\"xs\">\n {footer}\n </FooterContainer>\n ) : null}\n </Grid>\n </TransGrid>\n </Container>\n);\n\nSidePanel.propTypes = spprops;\nSidePanel.defaultProps = defaultProps;\nSidePanel.displayName = 'SidePanel';\nconst DSSidePanelWithSchema = describe(SidePanel);\nDSSidePanelWithSchema.propTypes = spprops;\n\nexport { SidePanel, DSSidePanelWithSchema };\nexport default SidePanel;\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrB,CAAC,EAAE,uBAAwB,mBAAmB,wBAAwB;AAAA;AAG1E,MAAM,YAAY,OAAO,IAAI;AAAA,gBACb,CAAC,UAAW,MAAM,gBAAgB,sCAAsC;AAAA;AAAA,iBAEvE,CAAC,UAAW,MAAM,aAAa,OAAO,MAAM,MAAM,OAAO,QAAQ,QAAQ,KAAK,IAAI;AAAA,IAC/F,CAAC,EAAE,uBACH,mBACI;AAAA;AAAA;AAAA;AAAA;AAAA,OAMA;AAAA,gBACQ,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGtD,MAAM,kBAAkB,OAAO,IAAI;AAAA,gBACnB,CAAC,UAAU,OAAO,MAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGnE,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,MAEhB,qCAAC;AAAA,EAAU;AAAA,GACT,qCAAC;AAAA,EAAU,QAAO;AAAA,EAAO,MAAK;AAAA,EAAI,IAAI,mBAAmB,GAAG,wBAAwB;AAAA,GACjF,QACH,GACA,qCAAC;AAAA,EACC,OAAO,EAAE,UAAU,SAAS;AAAA,EAC5B,QAAO;AAAA,EACP,WAAU;AAAA,EACV,OAAO,SAAS,GAAG,iBAAiB,GAAG;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM,CAAC,CAAC;AAAA,EACR;AAAA,GAEA,qCAAC;AAAA,EACC,MACE,SAAS,CAAC,SAAS,SAAS,OAAO,oBAAoB,MAAM,IAAI,CAAC,SAAS,SAAS,OAAO,kBAAkB;AAAA,EAE/G,OAAO,EAAE,UAAU,SAAS;AAAA,GAE5B,qCAAC,YAAM,MAAO,GACd,qCAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,GAChC,qCAAC;AAAA,EAAK,OAAO,EAAE,UAAU,qBAAqB;AAAA,GAAI,YAAa,CACjE,GACC,SACC,qCAAC;AAAA,EAAgB,YAAW;AAAA,EAAS,IAAG;AAAA,EAAK,IAAG;AAAA,GAC7C,MACH,IACE,IACN,CACF,CACF;AAGF,UAAU,YAAY;AACtB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,MAAM,wBAAwB,SAAS,SAAS;AAChD,sBAAsB,YAAY;AAGlC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { PropTypes, describe } from "
|
|
4
|
-
import styled from "
|
|
3
|
+
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
|
+
import { styled } from "@elliemae/ds-system";
|
|
5
5
|
import { noop } from "lodash";
|
|
6
6
|
import { border, truncate, useTheme } from "@elliemae/ds-system";
|
|
7
7
|
import { CloseSmall } from "@elliemae/ds-icons";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/SidePanelHeader.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { noop } from 'lodash';\nimport { border, truncate, useTheme } from '@elliemae/ds-system';\nimport { CloseSmall } from '@elliemae/ds-icons';\nimport DSButton from '@elliemae/ds-button';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst StyledSeparator = styled.div`\n width: 0;\n height: 100%;\n margin: 0 ${(props) => props.theme.space.xxs};\n border-left: ${(props) => `${props.theme.colors.neutral[300]} 1px solid`};\n`;\n\nconst StyledTitle = styled.div`\n font-size: 18px;\n font-weight: ${(props) => props.theme.fontWeights.regular};\n color: ${(props) => props.theme.colors.neutral['700']};\n ${truncate()}\n`;\n\nconst Wrapper = styled(Grid)`\n border-bottom: ${(props) => border(props.theme.colors.neutral['300'])};\n`;\n\nconst SidePanelHeader = ({ title = null, additionalAction = null, onClose = noop, showClose = true }) => {\n const theme = useTheme();\n const separator = (\n <Grid height=\"24px\">\n <StyledSeparator />\n </Grid>\n );\n const cols = [1, 'auto', 'auto'];\n const cols2 = ['auto'];\n return (\n <Wrapper\n cols={cols}\n height={theme.space.m}\n pl={theme.space.xs}\n pr={theme.space.xs}\n alignItems=\"center\"\n width=\"100%\"\n >\n <Grid alignItems=\"center\" justifyContent=\"flex-start\" cols={cols2}>\n <Grid cols={[1]} alignItems=\"center\" pr={theme.space.xs}>\n <Grid flexGrow={0}>\n <Grid cols={['auto', 'auto']} alignItems=\"center\">\n <StyledTitle maxWidth=\"100%\" alignItems=\"center\">\n {title}\n </StyledTitle>\n </Grid>\n </Grid>\n </Grid>\n </Grid>\n <Grid ml=\"xxs\" alignItems=\"center\" cols={additionalAction ? ['auto', 'auto', 'auto'] : ['auto']}>\n {additionalAction && <Grid>{additionalAction}</Grid>}\n {additionalAction && showClose && separator}\n <Grid>\n {showClose && (\n <DSButton\n buttonType=\"text\"\n icon={<CloseSmall />}\n size=\"m\"\n onClick={onClose}\n data-testid=\"btn-close-slide-panel\"\n />\n )}\n </Grid>\n </Grid>\n </Wrapper>\n );\n};\n\nconst props = {\n /** Page title */\n title: PropTypes.string.description('Page title'),\n\n /** Action button */\n additionalAction: PropTypes.element.description('Action button'),\n\n /** Called when the slide collapse */\n onClose: PropTypes.func.description('Called when the slide collapse'),\n\n /** Show/Hide close button */\n showClose: PropTypes.bool.description('Show/Hide close button'),\n};\n\nSidePanelHeader.propTypes = props;\nSidePanelHeader.displayName = 'SidePanelHeader';\nconst DSSidePanelHeaderWithSchema = describe(SidePanelHeader);\n\nDSSidePanelHeaderWithSchema.propTypes = props;\n\nexport { SidePanelHeader, DSSidePanelHeaderWithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA,cAGjB,CAAC,WAAU,OAAM,MAAM,MAAM;AAAA,iBAC1B,CAAC,WAAU,GAAG,OAAM,MAAM,OAAO,QAAQ;AAAA;AAG1D,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAAC,WAAU,OAAM,MAAM,YAAY;AAAA,WACzC,CAAC,WAAU,OAAM,MAAM,OAAO,QAAQ;AAAA,IAC7C,SAAS;AAAA;AAGb,MAAM,UAAU,OAAO,IAAI;AAAA,mBACR,CAAC,WAAU,OAAO,OAAM,MAAM,OAAO,QAAQ,MAAM;AAAA;AAGtE,MAAM,kBAAkB,CAAC,EAAE,QAAQ,MAAM,mBAAmB,MAAM,UAAU,MAAM,YAAY,WAAW;AACvG,QAAM,QAAQ,SAAS;AACvB,QAAM,YACJ,qCAAC;AAAA,IAAK,QAAO;AAAA,KACX,qCAAC,qBAAgB,CACnB;AAEF,QAAM,OAAO,CAAC,GAAG,QAAQ,MAAM;AAC/B,QAAM,QAAQ,CAAC,MAAM;AACrB,SACE,qCAAC;AAAA,IACC;AAAA,IACA,QAAQ,MAAM,MAAM;AAAA,IACpB,IAAI,MAAM,MAAM;AAAA,IAChB,IAAI,MAAM,MAAM;AAAA,IAChB,YAAW;AAAA,IACX,OAAM;AAAA,KAEN,qCAAC;AAAA,IAAK,YAAW;AAAA,IAAS,gBAAe;AAAA,IAAa,MAAM;AAAA,KAC1D,qCAAC;AAAA,IAAK,MAAM,CAAC,CAAC;AAAA,IAAG,YAAW;AAAA,IAAS,IAAI,MAAM,MAAM;AAAA,KACnD,qCAAC;AAAA,IAAK,UAAU;AAAA,KACd,qCAAC;AAAA,IAAK,MAAM,CAAC,QAAQ,MAAM;AAAA,IAAG,YAAW;AAAA,KACvC,qCAAC;AAAA,IAAY,UAAS;AAAA,IAAO,YAAW;AAAA,KACrC,KACH,CACF,CACF,CACF,CACF,GACA,qCAAC;AAAA,IAAK,IAAG;AAAA,IAAM,YAAW;AAAA,IAAS,MAAM,mBAAmB,CAAC,QAAQ,QAAQ,MAAM,IAAI,CAAC,MAAM;AAAA,KAC3F,oBAAoB,qCAAC,YAAM,gBAAiB,GAC5C,oBAAoB,aAAa,WAClC,qCAAC,YACE,aACC,qCAAC;AAAA,IACC,YAAW;AAAA,IACX,MAAM,qCAAC,gBAAW;AAAA,IAClB,MAAK;AAAA,IACL,SAAS;AAAA,IACT,eAAY;AAAA,GACd,CAEJ,CACF,CACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAGhD,kBAAkB,UAAU,QAAQ,YAAY,eAAe;AAAA,EAG/D,SAAS,UAAU,KAAK,YAAY,gCAAgC;AAAA,EAGpE,WAAW,UAAU,KAAK,YAAY,wBAAwB;AAChE;AAEA,gBAAgB,YAAY;AAC5B,gBAAgB,cAAc;AAC9B,MAAM,8BAA8B,SAAS,eAAe;AAE5D,4BAA4B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { PropTypes, describe } from "
|
|
3
|
+
import { PropTypes, describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import { Grid } from "@elliemae/ds-grid";
|
|
5
5
|
import SidePanel from "./SidePanel";
|
|
6
6
|
const TemplateBasicPageWithSidePanel = ({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/TemplateBasicPageWithSidePanel.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport { Grid } from '@elliemae/ds-grid';\nimport SidePanel from './SidePanel';\n\nconst TemplateBasicPageWithSidePanel = ({\n globalHeader = null,\n mainHeader = null,\n mainContent,\n mainFooter,\n isOpen = false,\n onClose,\n panelFooter,\n panelHeader,\n panelContent,\n panelWidth,\n}) => (\n <Grid\n style={{ overflow: 'hidden', width: '100%' }}\n height=\"100%\"\n maxHeight=\"100%\"\n rows={['auto', '1fr']}\n >\n <Grid>{globalHeader}</Grid>\n <SidePanel\n footer={panelFooter}\n header={panelHeader}\n panelWidth={panelWidth}\n onClose={onClose}\n panelContent={panelContent}\n isOpen={isOpen}\n >\n <Grid style={{ overflow: 'hidden' }} height=\"100%\" maxHeight=\"100%\">\n <Grid\n rows={\n mainFooter\n ? [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)', '48px']\n : [mainHeader ? 'auto' : '0px', 'minmax(0px, 1fr)']\n }\n style={{ overflow: 'hidden' }}\n >\n <Grid>{mainHeader}</Grid>\n <Grid style={{ overflow: 'hidden' }}>\n <Grid style={{ overflow: 'auto' }}>{mainContent}</Grid>\n </Grid>\n {mainFooter && <Grid alignItems=\"center\">{mainFooter}</Grid>}\n </Grid>\n </Grid>\n </SidePanel>\n </Grid>\n);\n\nconst props = {\n /**\n * Global Header\n */\n globalHeader: PropTypes.element.description('Global Header'),\n /**\n * Main Header\n */\n mainHeader: PropTypes.element.description('Main Header'),\n /**\n * Main content\n */\n mainContent: PropTypes.element.isRequired.description('Main content'),\n /**\n * Main Footer\n */\n mainFooter: PropTypes.element.description('Main Footer'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n panelFooter: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n panelHeader: PropTypes.element.description(\n 'Header for Slide Panel instance of SlidePanelHeader',\n ),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n /**\n * Callback\n */\n onClose: PropTypes.func.description('callback'),\n};\n\nTemplateBasicPageWithSidePanel.propTypes = props;\nTemplateBasicPageWithSidePanel.displayName = 'TemplateBasicPageWithSidePanel';\nconst DSTemplateBasicPageWithSidePanel = describe(\n TemplateBasicPageWithSidePanel,\n);\nDSTemplateBasicPageWithSidePanel.propTypes = props;\n\nexport { TemplateBasicPageWithSidePanel, DSTemplateBasicPageWithSidePanel };\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,iCAAiC,CAAC;AAAA,EACtC,eAAe;AAAA,EACf,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC,OAAO,EAAE,UAAU,UAAU,OAAO,OAAO;AAAA,EAC3C,QAAO;AAAA,EACP,WAAU;AAAA,EACV,MAAM,CAAC,QAAQ,KAAK;AAAA,GAEpB,qCAAC,YAAM,YAAa,GACpB,qCAAC;AAAA,EACC,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEA,qCAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,EAAG,QAAO;AAAA,EAAO,WAAU;AAAA,GAC3D,qCAAC;AAAA,EACC,MACE,aACI,CAAC,aAAa,SAAS,OAAO,oBAAoB,MAAM,IACxD,CAAC,aAAa,SAAS,OAAO,kBAAkB;AAAA,EAEtD,OAAO,EAAE,UAAU,SAAS;AAAA,GAE5B,qCAAC,YAAM,UAAW,GAClB,qCAAC;AAAA,EAAK,OAAO,EAAE,UAAU,SAAS;AAAA,GAChC,qCAAC;AAAA,EAAK,OAAO,EAAE,UAAU,OAAO;AAAA,GAAI,WAAY,CAClD,GACC,cAAc,qCAAC;AAAA,EAAK,YAAW;AAAA,GAAU,UAAW,CACvD,CACF,CACF,CACF;AAGF,MAAM,QAAQ;AAAA,EAIZ,cAAc,UAAU,QAAQ,YAAY,eAAe;AAAA,EAI3D,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,aAAa,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIpE,YAAY,UAAU,QAAQ,YAAY,aAAa;AAAA,EAIvD,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,aAAa,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAInE,aAAa,UAAU,QAAQ,YAC7B,qDACF;AAAA,EAIA,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAI3E,SAAS,UAAU,KAAK,YAAY,UAAU;AAChD;AAEA,+BAA+B,YAAY;AAC3C,+BAA+B,cAAc;AAC7C,MAAM,mCAAmC,SACvC,8BACF;AACA,iCAAiC,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/props.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { PropTypes } from "
|
|
2
|
+
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
3
|
const props = {
|
|
4
4
|
children: PropTypes.element.isRequired.description("Main content"),
|
|
5
5
|
isOpen: PropTypes.bool.description("Should show the slide panel or not"),
|
package/dist/esm/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\n\nexport const props = {\n /**\n * Main content\n */\n children: PropTypes.element.isRequired.description('Main content'),\n /**\n * Should show the slide panel or not\n */\n isOpen: PropTypes.bool.description('Should show the slide panel or not'),\n /**\n * Footer for Slide Panel\n */\n footer: PropTypes.element.description('Footer for Slide Panel'),\n /**\n * Header for Slide Panel instance of SlidePanelHeader\n */\n header: PropTypes.element.description('Header for Slide Panel instance of SlidePanelHeader'),\n /**\n * Content for Slide Panel\n */\n panelContent: PropTypes.element.description('Content for Slide Panel'),\n /**\n * Width of the panel open. eg: 300\n */\n panelWidth: PropTypes.number.description('Width of the panel open. eg: 300'),\n\n widthWhenIsClosed: PropTypes.number.description('Width of the panel closed. eg: 0'),\n panelContentOverflow: PropTypes.oneOf(['auto', 'hidden']).description('Overflow on SidePanel content'),\n withBorder: PropTypes.bool.description('Whether the sidepanel has border or not'),\n withBoxShadow: PropTypes.bool.description('Whether the sidepanel has box shadow or not'),\n noGridInfluencer: PropTypes.bool.description('Whether the sidepanel is grid-influencer or not'),\n};\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AAEO,MAAM,QAAQ;AAAA,EAInB,UAAU,UAAU,QAAQ,WAAW,YAAY,cAAc;AAAA,EAIjE,QAAQ,UAAU,KAAK,YAAY,oCAAoC;AAAA,EAIvE,QAAQ,UAAU,QAAQ,YAAY,wBAAwB;AAAA,EAI9D,QAAQ,UAAU,QAAQ,YAAY,qDAAqD;AAAA,EAI3F,cAAc,UAAU,QAAQ,YAAY,yBAAyB;AAAA,EAIrE,YAAY,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE3E,mBAAmB,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAClF,sBAAsB,UAAU,MAAM,CAAC,QAAQ,QAAQ,CAAC,EAAE,YAAY,+BAA+B;AAAA,EACrG,YAAY,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAChF,eAAe,UAAU,KAAK,YAAY,6CAA6C;AAAA,EACvF,kBAAkB,UAAU,KAAK,YAAY,iDAAiD;AAChG;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-side-panel",
|
|
3
|
-
"version": "3.1.0-next.
|
|
3
|
+
"version": "3.1.0-next.11",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Side Panel",
|
|
6
6
|
"files": [
|
|
@@ -54,19 +54,12 @@
|
|
|
54
54
|
"reportFile": "tests.xml",
|
|
55
55
|
"indent": 4
|
|
56
56
|
},
|
|
57
|
-
"scripts": {
|
|
58
|
-
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
59
|
-
"test": "node ../../scripts/testing/test.mjs",
|
|
60
|
-
"lint": "node ../../scripts/lint.mjs",
|
|
61
|
-
"dts": "node ../../scripts/dts.mjs",
|
|
62
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
63
|
-
},
|
|
64
57
|
"dependencies": {
|
|
65
|
-
"@elliemae/ds-button": "3.1.0-next.
|
|
66
|
-
"@elliemae/ds-grid": "3.1.0-next.
|
|
67
|
-
"@elliemae/ds-icons": "3.1.0-next.
|
|
68
|
-
"@elliemae/ds-system": "3.1.0-next.
|
|
69
|
-
"
|
|
58
|
+
"@elliemae/ds-button": "3.1.0-next.11",
|
|
59
|
+
"@elliemae/ds-grid": "3.1.0-next.11",
|
|
60
|
+
"@elliemae/ds-icons": "3.1.0-next.11",
|
|
61
|
+
"@elliemae/ds-system": "3.1.0-next.11",
|
|
62
|
+
"@elliemae/ds-utilities": "3.1.0-next.11"
|
|
70
63
|
},
|
|
71
64
|
"devDependencies": {
|
|
72
65
|
"styled-components": "~5.3.3"
|
|
@@ -80,5 +73,13 @@
|
|
|
80
73
|
"publishConfig": {
|
|
81
74
|
"access": "public",
|
|
82
75
|
"typeSafety": false
|
|
76
|
+
},
|
|
77
|
+
"scripts": {
|
|
78
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
79
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
80
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
81
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
82
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
83
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
83
84
|
}
|
|
84
|
-
}
|
|
85
|
+
}
|