@paprika/takeover 1.0.23-next.2 → 1.1.0-next.1
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/CHANGELOG.md +33 -0
- package/README.md +19 -17
- package/lib/Takeover.js +13 -6
- package/lib/Takeover.js.map +1 -1
- package/lib/Takeover.styles.js +5 -2
- package/lib/Takeover.styles.js.map +1 -1
- package/lib/components/Header/Header.js +15 -7
- package/lib/components/Header/Header.js.map +1 -1
- package/lib/components/Header/Header.styles.js +20 -4
- package/lib/components/Header/Header.styles.js.map +1 -1
- package/lib/index.d.ts +4 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,38 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.1.0-next.1
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 70cac61: - Update `react-focus-lock` package to support wrapping in a web component
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [70cac61]
|
|
12
|
+
- @paprika/overlay@1.0.15-next.1
|
|
13
|
+
|
|
14
|
+
## 1.0.24-next.0
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [3a068d6]
|
|
19
|
+
- @paprika/overlay@1.0.15-next.0
|
|
20
|
+
|
|
21
|
+
## 1.0.23
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- Updated dependencies [0dcf307]
|
|
26
|
+
- Updated dependencies [0bf34d9]
|
|
27
|
+
- Updated dependencies [0dcf307]
|
|
28
|
+
- Updated dependencies [9ac6aca]
|
|
29
|
+
- @paprika/helpers@2.3.0
|
|
30
|
+
- @paprika/tokens@2.0.0
|
|
31
|
+
- @paprika/button@1.1.12
|
|
32
|
+
- @paprika/heading@1.0.14
|
|
33
|
+
- @paprika/overlay@1.0.14
|
|
34
|
+
- @paprika/stylers@1.1.6
|
|
35
|
+
|
|
3
36
|
## 1.0.23-next.2
|
|
4
37
|
|
|
5
38
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -22,26 +22,28 @@ npm install @paprika/takeover
|
|
|
22
22
|
|
|
23
23
|
### Takeover
|
|
24
24
|
|
|
25
|
-
| Prop | Type | required | default | Description
|
|
26
|
-
| ------------ | ------ | -------- | --------- |
|
|
27
|
-
| a11yText | string | false | null |
|
|
28
|
-
| children | node | true | - | The content for the Takeover
|
|
29
|
-
| isOpen | bool | true | - | Control the visibility of the Takeover
|
|
30
|
-
| onAfterClose | func | false | () => {} | Callback once the Takeover has been closed event
|
|
31
|
-
| onAfterOpen | func | false | () => {} | Callback once the Takeover has been opened event
|
|
32
|
-
| onClose | func | false | () => {} | Callback triggered when the takeover needs to be close
|
|
33
|
-
| zIndex | number | false | zValue(5) | The z-index of the Takeover content
|
|
25
|
+
| Prop | Type | required | default | Description |
|
|
26
|
+
| ------------ | ------ | -------- | --------- | ------------------------------------------------------------ |
|
|
27
|
+
| a11yText | string | false | null | |
|
|
28
|
+
| children | node | true | - | The content for the Takeover |
|
|
29
|
+
| isOpen | bool | true | - | Control the visibility of the Takeover |
|
|
30
|
+
| onAfterClose | func | false | () => {} | Callback once the Takeover has been closed event |
|
|
31
|
+
| onAfterOpen | func | false | () => {} | Callback once the Takeover has been opened event |
|
|
32
|
+
| onClose | func | false | () => {} | Callback triggered when the takeover needs to be close |
|
|
33
|
+
| zIndex | number | false | zValue(5) | The z-index of the Takeover content |
|
|
34
|
+
| isFullWidth | custom | false | false | Set Takeover to full width without any margins and max-width |
|
|
34
35
|
|
|
35
36
|
### Takeover.Header
|
|
36
37
|
|
|
37
|
-
| Prop | Type | required | default | Description
|
|
38
|
-
| -------------- | ------------------------------------------------------- | -------- | ------------------------- |
|
|
39
|
-
| children | node | true | - |
|
|
40
|
-
| hasCloseButton | bool | false | true |
|
|
41
|
-
| kind | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false | Header.types.kind.DEFAULT |
|
|
42
|
-
| level | [ 1, 2, 3, 4, 5, 6] | false |
|
|
43
|
-
| onClose | func | false | () => {} |
|
|
44
|
-
| refHeading | custom | false | null |
|
|
38
|
+
| Prop | Type | required | default | Description |
|
|
39
|
+
| -------------- | ------------------------------------------------------- | -------- | ------------------------- | --------------------------------------------------------------------- |
|
|
40
|
+
| children | node | true | - | |
|
|
41
|
+
| hasCloseButton | bool | false | true | |
|
|
42
|
+
| kind | [ Header.types.kind.DEFAULT, Header.types.kind.PRIMARY] | false | Header.types.kind.DEFAULT | |
|
|
43
|
+
| level | [ 1, 2, 3, 4, 5, 6] | false | 2 | |
|
|
44
|
+
| onClose | func | false | () => {} | |
|
|
45
|
+
| refHeading | custom | false | null | |
|
|
46
|
+
| tools | node | false | null | Add node object to the right side of heading next to the close button |
|
|
45
47
|
|
|
46
48
|
### Takeover.FocusLock
|
|
47
49
|
|
package/lib/Takeover.js
CHANGED
|
@@ -50,7 +50,7 @@ var _Content = _interopRequireDefault(require("./components/Content/Content"));
|
|
|
50
50
|
|
|
51
51
|
var sc = _interopRequireWildcard(require("./Takeover.styles"));
|
|
52
52
|
|
|
53
|
-
var _excluded = ["a11yText", "isOpen", "onClose", "onAfterClose", "onAfterOpen", "zIndex"];
|
|
53
|
+
var _excluded = ["a11yText", "isOpen", "onClose", "onAfterClose", "onAfterOpen", "zIndex", "isFullWidth"];
|
|
54
54
|
|
|
55
55
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
56
56
|
|
|
@@ -80,14 +80,18 @@ var propTypes = {
|
|
|
80
80
|
onClose: _propTypes["default"].func,
|
|
81
81
|
|
|
82
82
|
/** The z-index of the Takeover content */
|
|
83
|
-
zIndex: _propTypes["default"].number
|
|
83
|
+
zIndex: _propTypes["default"].number,
|
|
84
|
+
|
|
85
|
+
/** Set Takeover to full width without any margins and max-width */
|
|
86
|
+
isFullWidth: _propTypes["default"]["boolean"]
|
|
84
87
|
};
|
|
85
88
|
var defaultProps = {
|
|
86
89
|
a11yText: null,
|
|
87
90
|
onClose: function onClose() {},
|
|
88
91
|
onAfterClose: function onAfterClose() {},
|
|
89
92
|
onAfterOpen: function onAfterOpen() {},
|
|
90
|
-
zIndex: (0, _helpers.zValue)(5)
|
|
93
|
+
zIndex: (0, _helpers.zValue)(5),
|
|
94
|
+
isFullWidth: false
|
|
91
95
|
};
|
|
92
96
|
|
|
93
97
|
function Takeover(props) {
|
|
@@ -97,6 +101,7 @@ function Takeover(props) {
|
|
|
97
101
|
onAfterClose = props.onAfterClose,
|
|
98
102
|
onAfterOpen = props.onAfterOpen,
|
|
99
103
|
zIndex = props.zIndex,
|
|
104
|
+
isFullWidth = props.isFullWidth,
|
|
100
105
|
moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
101
106
|
|
|
102
107
|
var _extractChildren = (0, _helpers2.extractChildren)(moreProps.children, ["Takeover.Content", "Takeover.FocusLock", "Takeover.Header", "Takeover.Overlay"]),
|
|
@@ -114,14 +119,15 @@ function Takeover(props) {
|
|
|
114
119
|
|
|
115
120
|
var overlayProps = _objectSpread(_objectSpread({
|
|
116
121
|
"data-pka-anchor": "takeover.overlay",
|
|
117
|
-
hasBackdrop:
|
|
122
|
+
hasBackdrop: true,
|
|
118
123
|
focusLockOptions: focusLockOptions
|
|
119
124
|
}, overlayExtracted && overlayExtracted.props), {}, {
|
|
120
125
|
isOpen: isOpen,
|
|
121
126
|
onAfterClose: onAfterClose,
|
|
122
127
|
onAfterOpen: onAfterOpen,
|
|
123
128
|
onClose: onClose,
|
|
124
|
-
zIndex: zIndex
|
|
129
|
+
zIndex: zIndex,
|
|
130
|
+
isBackdropClickDisabled: true
|
|
125
131
|
});
|
|
126
132
|
|
|
127
133
|
function getAriaLabel() {
|
|
@@ -137,7 +143,8 @@ function Takeover(props) {
|
|
|
137
143
|
|
|
138
144
|
return /*#__PURE__*/_react["default"].createElement(_overlay["default"], overlayProps, function (state) {
|
|
139
145
|
return /*#__PURE__*/_react["default"].createElement(sc.Takeover, (0, _extends2["default"])({
|
|
140
|
-
state: state
|
|
146
|
+
state: state,
|
|
147
|
+
isFullWidth: isFullWidth
|
|
141
148
|
}, moreProps, {
|
|
142
149
|
"aria-label": getAriaLabel(),
|
|
143
150
|
"aria-modal": true,
|
package/lib/Takeover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Takeover.js"],"names":["propTypes","a11yText","PropTypes","string","children","node","isRequired","isOpen","bool","onAfterClose","func","onAfterOpen","onClose","zIndex","number","defaultProps","Takeover","props","moreProps","contentExtracted","focusLockExtracted","headerExtracted","overlayExtracted","focusLockProps","focusLockOptions","as","sc","FocusLock","overlayProps","hasBackdrop","getAriaLabel","console","error","state","displayName","Header","Content","Overlay"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAG;AAChB;AACAC,EAAAA,QAAQ,EAAEC,sBAAUC,MAFJ;;AAIhB;AACAC,EAAAA,QAAQ,EAAEF,sBAAUG,IAAV,CAAeC,UALT;;AAOhB;AACAC,EAAAA,MAAM,EAAEL,sBAAUM,IAAV,CAAeF,UARP;;AAUhB;AACAG,EAAAA,YAAY,EAAEP,sBAAUQ,IAXR;;AAahB;AACAC,EAAAA,WAAW,EAAET,sBAAUQ,IAdP;;AAgBhB;AACAE,EAAAA,OAAO,EAAEV,sBAAUQ,IAjBH;;AAmBhB;AACAG,EAAAA,MAAM,EAAEX,sBAAUY;
|
|
1
|
+
{"version":3,"sources":["../src/Takeover.js"],"names":["propTypes","a11yText","PropTypes","string","children","node","isRequired","isOpen","bool","onAfterClose","func","onAfterOpen","onClose","zIndex","number","isFullWidth","defaultProps","Takeover","props","moreProps","contentExtracted","focusLockExtracted","headerExtracted","overlayExtracted","focusLockProps","focusLockOptions","as","sc","FocusLock","overlayProps","hasBackdrop","isBackdropClickDisabled","getAriaLabel","console","error","state","displayName","Header","Content","Overlay"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { zValue } from \"@paprika/stylers/lib/helpers\";\nimport { extractChildren } from \"@paprika/helpers\";\nimport OriginalOverlay from \"@paprika/overlay\";\nimport Overlay from \"./components/Overlay\";\nimport FocusLock from \"./components/FocusLock\";\nimport Header from \"./components/Header/Header\";\nimport Content from \"./components/Content/Content\";\nimport * as sc from \"./Takeover.styles\";\n\nconst propTypes = {\n /* Description of the Takeover dialog for assistive technology */\n a11yText: PropTypes.string,\n\n /** The content for the Takeover */\n children: PropTypes.node.isRequired,\n\n /** Control the visibility of the Takeover */\n isOpen: PropTypes.bool.isRequired,\n\n /** Callback once the Takeover has been closed event */\n onAfterClose: PropTypes.func,\n\n /** Callback once the Takeover has been opened event */\n onAfterOpen: PropTypes.func,\n\n /** Callback triggered when the takeover needs to be close */\n onClose: PropTypes.func,\n\n /** The z-index of the Takeover content */\n zIndex: PropTypes.number,\n\n /** Set Takeover to full width without any margins and max-width */\n isFullWidth: PropTypes.boolean,\n};\n\nconst defaultProps = {\n a11yText: null,\n onClose: () => {},\n onAfterClose: () => {},\n onAfterOpen: () => {},\n zIndex: zValue(5),\n isFullWidth: false,\n};\n\nexport default function Takeover(props) {\n const { a11yText, isOpen, onClose, onAfterClose, onAfterOpen, zIndex, isFullWidth, ...moreProps } = props;\n\n const {\n \"Takeover.Content\": contentExtracted,\n \"Takeover.FocusLock\": focusLockExtracted,\n \"Takeover.Header\": headerExtracted,\n \"Takeover.Overlay\": overlayExtracted,\n children,\n } = extractChildren(moreProps.children, [\n \"Takeover.Content\",\n \"Takeover.FocusLock\",\n \"Takeover.Header\",\n \"Takeover.Overlay\",\n ]);\n\n const focusLockProps = focusLockExtracted ? focusLockExtracted.props : {};\n const focusLockOptions = {\n as: sc.FocusLock,\n ...(focusLockProps || {}),\n };\n\n const overlayProps = {\n \"data-pka-anchor\": \"takeover.overlay\",\n hasBackdrop: true,\n focusLockOptions,\n ...(overlayExtracted && overlayExtracted.props),\n isOpen,\n onAfterClose,\n onAfterOpen,\n onClose,\n zIndex,\n isBackdropClickDisabled: true,\n };\n\n function getAriaLabel() {\n if (a11yText) return a11yText;\n if (!headerExtracted || typeof headerExtracted.props.children !== \"string\") {\n console.error(\n \"Accessibility is important 😇\\nThe Takeover requires either an a11yText prop or a Takeover.Header with a string for children.\"\n );\n return null;\n }\n\n return headerExtracted.props.children;\n }\n\n return (\n <OriginalOverlay {...overlayProps}>\n {state => (\n <sc.Takeover\n state={state}\n isFullWidth={isFullWidth}\n {...moreProps}\n aria-label={getAriaLabel()}\n aria-modal\n data-pka-anchor=\"takeover\"\n role=\"dialog\"\n zIndex={zIndex}\n >\n {headerExtracted && <sc.Header {...headerExtracted.props} onClose={onClose} />}\n {contentExtracted && (\n <sc.Content role=\"region\" tabIndex=\"0\">\n {contentExtracted}\n </sc.Content>\n )}\n {children}\n </sc.Takeover>\n )}\n </OriginalOverlay>\n );\n}\n\nTakeover.displayName = \"Takeover\";\nTakeover.propTypes = propTypes;\nTakeover.defaultProps = defaultProps;\n\nTakeover.Header = Header;\nTakeover.Content = Content;\nTakeover.FocusLock = FocusLock;\nTakeover.Overlay = Overlay;\n"],"file":"Takeover.js"}
|
package/lib/Takeover.styles.js
CHANGED
|
@@ -22,6 +22,8 @@ var _tokens = _interopRequireDefault(require("@paprika/tokens"));
|
|
|
22
22
|
|
|
23
23
|
var _stylers = _interopRequireDefault(require("@paprika/stylers"));
|
|
24
24
|
|
|
25
|
+
var _helpers = require("@paprika/stylers/lib/helpers");
|
|
26
|
+
|
|
25
27
|
var _Header = _interopRequireDefault(require("./components/Header/Header"));
|
|
26
28
|
|
|
27
29
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -48,8 +50,9 @@ var Takeover = _styledComponents["default"].div.withConfig({
|
|
|
48
50
|
componentId: "sc-1pjp0u6-1"
|
|
49
51
|
})(function (_ref) {
|
|
50
52
|
var zIndex = _ref.zIndex,
|
|
51
|
-
state = _ref.state
|
|
52
|
-
|
|
53
|
+
state = _ref.state,
|
|
54
|
+
isFullWidth = _ref.isFullWidth;
|
|
55
|
+
return (0, _styledComponents.css)(["background-color:", ";border:1px ", " solid;border-radius:", ";bottom:0;box-shadow:0 12px 24px 0 rgba(0,0,0,0.12),0 0px 6px 0 rgba(0,0,0,0.16);display:flex;flex-direction:column;left:0;margin:", ";", ";position:fixed;right:0;top:0;transition:all ", "ms ease;z-index:", ";", ""], _tokens["default"].backgroundColor.level0, _tokens["default"].border.color, _tokens["default"].card.borderRadius, (0, _helpers.spacer)(3), states[state], _tokens["default"].overlay.animationDuration, zIndex, !isFullWidth && " \n max-width: 1248px;\n @media only screen and (min-width: 1280px) {\n margin: ".concat((0, _helpers.spacer)(3), " auto;\n }\n "));
|
|
53
56
|
});
|
|
54
57
|
|
|
55
58
|
exports.Takeover = Takeover;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Takeover.styles.js"],"names":["FocusLock","styled","div","openedCss","css","closedCss","states","entering","entered","exiting","exited","Takeover","zIndex","state","tokens","backgroundColor","level0","overlay","animationDuration","Header","OriginalHeader","Content","stylers","focusRing","subtle"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,SAAS,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,yHAAf;;;AAaP,IAAMC,SAAS,OAAGC,qBAAH,iBAAf;AAIA,IAAMC,SAAS,OAAGD,qBAAH,iBAAf;AAIA,IAAME,MAAM,GAAG;AACbC,EAAAA,QAAQ,EAAEJ,SADG;AAEbK,EAAAA,OAAO,EAAEL,SAFI;AAGbM,EAAAA,OAAO,EAAEJ,SAHI;AAIbK,EAAAA,MAAM,EAAEL;AAJK,CAAf;;AAOO,IAAMM,QAAQ,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACnB;AAAA,MAAGU,MAAH,QAAGA,MAAH;AAAA,MAAWC,KAAX,QAAWA,KAAX;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/Takeover.styles.js"],"names":["FocusLock","styled","div","openedCss","css","closedCss","states","entering","entered","exiting","exited","Takeover","zIndex","state","isFullWidth","tokens","backgroundColor","level0","border","color","card","borderRadius","overlay","animationDuration","Header","OriginalHeader","Content","stylers","focusRing","subtle"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,SAAS,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,yHAAf;;;AAaP,IAAMC,SAAS,OAAGC,qBAAH,iBAAf;AAIA,IAAMC,SAAS,OAAGD,qBAAH,iBAAf;AAIA,IAAME,MAAM,GAAG;AACbC,EAAAA,QAAQ,EAAEJ,SADG;AAEbK,EAAAA,OAAO,EAAEL,SAFI;AAGbM,EAAAA,OAAO,EAAEJ,SAHI;AAIbK,EAAAA,MAAM,EAAEL;AAJK,CAAf;;AAOO,IAAMM,QAAQ,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACnB;AAAA,MAAGU,MAAH,QAAGA,MAAH;AAAA,MAAWC,KAAX,QAAWA,KAAX;AAAA,MAAkBC,WAAlB,QAAkBA,WAAlB;AAAA,aAAoCV,qBAApC,2RACsBW,mBAAOC,eAAP,CAAuBC,MAD7C,EAEgBF,mBAAOG,MAAP,CAAcC,KAF9B,EAGmBJ,mBAAOK,IAAP,CAAYC,YAH/B,EASY,qBAAO,CAAP,CATZ,EAUIf,MAAM,CAACO,KAAD,CAVV,EAcoBE,mBAAOO,OAAP,CAAeC,iBAdnC,EAeaX,MAfb,EAgBI,CAACE,WAAD,mHAIY,qBAAO,CAAP,CAJZ,4BAhBJ;AAAA,CADmB,CAAd;;;AA2BA,IAAMU,MAAM,GAAG,kCAAOC,kBAAP,CAAH;AAAA;AAAA;AAAA,kBAAZ;;;AAIA,IAAMC,OAAO,GAAGzB,6BAAOC,GAAV;AAAA;AAAA;AAAA,mDAKdyB,oBAAQC,SAAR,CAAkBC,MAAlB,CAAyB,IAAzB,CALc,CAAb","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport stylers from \"@paprika/stylers\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport OriginalHeader from \"./components/Header/Header\";\n\nexport const FocusLock = styled.div`\n align-items: center;\n display: flex;\n flex-direction: column;\n height: 100%;\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n }\n`;\n\nconst openedCss = css`\n opacity: 1;\n`;\n\nconst closedCss = css`\n opacity: 0;\n`;\n\nconst states = {\n entering: openedCss,\n entered: openedCss,\n exiting: closedCss,\n exited: closedCss,\n};\n\nexport const Takeover = styled.div(\n ({ zIndex, state, isFullWidth }) => css`\n background-color: ${tokens.backgroundColor.level0};\n border: 1px ${tokens.border.color} solid;\n border-radius: ${tokens.card.borderRadius};\n bottom: 0;\n box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.12), 0 0px 6px 0 rgba(0, 0, 0, 0.16);\n display: flex;\n flex-direction: column;\n left: 0;\n margin: ${spacer(3)};\n ${states[state]};\n position: fixed;\n right: 0;\n top: 0;\n transition: all ${tokens.overlay.animationDuration}ms ease;\n z-index: ${zIndex};\n ${!isFullWidth &&\n ` \n max-width: 1248px;\n @media only screen and (min-width: 1280px) {\n margin: ${spacer(3)} auto;\n }\n `}\n `\n);\n\nexport const Header = styled(OriginalHeader)`\n flex: none;\n`;\n\nexport const Content = styled.div`\n flex-grow: 1;\n overflow-y: auto;\n\n &:focus {\n ${stylers.focusRing.subtle(true)};\n }\n`;\n"],"file":"Takeover.styles.js"}
|
|
@@ -32,7 +32,7 @@ var types = _interopRequireWildcard(require("../../types"));
|
|
|
32
32
|
|
|
33
33
|
var sc = _interopRequireWildcard(require("./Header.styles"));
|
|
34
34
|
|
|
35
|
-
var _excluded = ["children", "level", "hasCloseButton", "kind", "onClose", "refHeading"];
|
|
35
|
+
var _excluded = ["children", "level", "hasCloseButton", "kind", "onClose", "refHeading", "tools"];
|
|
36
36
|
|
|
37
37
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
38
38
|
|
|
@@ -45,6 +45,7 @@ var Header = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
45
45
|
kind = props.kind,
|
|
46
46
|
onClose = props.onClose,
|
|
47
47
|
refHeading = props.refHeading,
|
|
48
|
+
tools = props.tools,
|
|
48
49
|
moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
49
50
|
return /*#__PURE__*/_react["default"].createElement(sc.Header, (0, _extends2["default"])({
|
|
50
51
|
ref: ref,
|
|
@@ -53,13 +54,16 @@ var Header = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
53
54
|
level: level,
|
|
54
55
|
displayLevel: 3,
|
|
55
56
|
isLight: true,
|
|
56
|
-
ref: refHeading
|
|
57
|
-
|
|
57
|
+
ref: refHeading,
|
|
58
|
+
title: typeof children === "string" ? children : null
|
|
59
|
+
}, children), /*#__PURE__*/_react["default"].createElement(sc.HeaderRightContainer, null, tools && /*#__PURE__*/_react["default"].createElement(sc.ToolContainer, {
|
|
60
|
+
"data-pka-anchor": "takeover.header.tools"
|
|
61
|
+
}, tools), hasCloseButton && /*#__PURE__*/_react["default"].createElement(sc.CloseButton, null, /*#__PURE__*/_react["default"].createElement(_button["default"].Close, {
|
|
58
62
|
"data-pka-anchor": "takeover.header.close-button",
|
|
59
63
|
onClick: onClose,
|
|
60
64
|
isDark: kind === "primary" || null,
|
|
61
65
|
size: "medium"
|
|
62
|
-
})));
|
|
66
|
+
}))));
|
|
63
67
|
});
|
|
64
68
|
|
|
65
69
|
Header.types = {
|
|
@@ -74,14 +78,18 @@ var propTypes = {
|
|
|
74
78
|
kind: _propTypes["default"].oneOf([Header.types.kind.DEFAULT, Header.types.kind.PRIMARY]),
|
|
75
79
|
level: _propTypes["default"].oneOf([1, 2, 3, 4, 5, 6]),
|
|
76
80
|
onClose: _propTypes["default"].func,
|
|
77
|
-
refHeading: (0, _helpers.RefOf)()
|
|
81
|
+
refHeading: (0, _helpers.RefOf)(),
|
|
82
|
+
|
|
83
|
+
/** Add node object to the right side of heading next to the close button */
|
|
84
|
+
tools: _propTypes["default"].node
|
|
78
85
|
};
|
|
79
86
|
var defaultProps = {
|
|
80
87
|
hasCloseButton: true,
|
|
81
|
-
level:
|
|
88
|
+
level: 2,
|
|
82
89
|
kind: Header.types.kind.DEFAULT,
|
|
83
90
|
onClose: function onClose() {},
|
|
84
|
-
refHeading: null
|
|
91
|
+
refHeading: null,
|
|
92
|
+
tools: null
|
|
85
93
|
};
|
|
86
94
|
Header.displayName = "Takeover.Header";
|
|
87
95
|
Header.propTypes = propTypes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Header/Header.js"],"names":["Header","React","forwardRef","props","ref","children","level","hasCloseButton","kind","onClose","refHeading","moreProps","types","DEFAULT","PRIMARY","propTypes","PropTypes","node","isRequired","bool","oneOf","func","defaultProps","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,MAAM,gBAAGC,kBAAMC,UAAN,CAAiB,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAC9C,MAAQC,QAAR,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Header/Header.js"],"names":["Header","React","forwardRef","props","ref","children","level","hasCloseButton","kind","onClose","refHeading","tools","moreProps","types","DEFAULT","PRIMARY","propTypes","PropTypes","node","isRequired","bool","oneOf","func","defaultProps","displayName"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { RefOf } from \"@paprika/helpers\";\nimport Button from \"@paprika/button\";\nimport * as types from \"../../types\";\nimport * as sc from \"./Header.styles\";\n\nconst Header = React.forwardRef((props, ref) => {\n const { children, level, hasCloseButton, kind, onClose, refHeading, tools, ...moreProps } = props;\n return (\n <sc.Header ref={ref} kind={kind} {...moreProps}>\n <sc.Heading\n level={level}\n displayLevel={3}\n isLight\n ref={refHeading}\n title={typeof children === \"string\" ? children : null}\n >\n {children}\n </sc.Heading>\n <sc.HeaderRightContainer>\n {tools && <sc.ToolContainer data-pka-anchor=\"takeover.header.tools\">{tools}</sc.ToolContainer>}\n {hasCloseButton && (\n <sc.CloseButton>\n <Button.Close\n data-pka-anchor=\"takeover.header.close-button\"\n onClick={onClose}\n isDark={kind === \"primary\" || null}\n size=\"medium\"\n />\n </sc.CloseButton>\n )}\n </sc.HeaderRightContainer>\n </sc.Header>\n );\n});\n\nHeader.types = {\n kind: { DEFAULT: types.DEFAULT, PRIMARY: types.PRIMARY },\n};\n\nconst propTypes = {\n children: PropTypes.node.isRequired,\n hasCloseButton: PropTypes.bool,\n kind: PropTypes.oneOf([Header.types.kind.DEFAULT, Header.types.kind.PRIMARY]),\n level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),\n onClose: PropTypes.func,\n refHeading: RefOf(),\n /** Add node object to the right side of heading next to the close button */\n tools: PropTypes.node,\n};\n\nconst defaultProps = {\n hasCloseButton: true,\n level: 2,\n kind: Header.types.kind.DEFAULT,\n onClose: () => {},\n refHeading: null,\n tools: null,\n};\n\nHeader.displayName = \"Takeover.Header\";\nHeader.propTypes = propTypes;\nHeader.defaultProps = defaultProps;\n\nexport default Header;\n"],"file":"Header.js"}
|
|
@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
|
|
|
14
14
|
value: true
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
exports.CloseButton = exports.Heading = exports.Header = void 0;
|
|
17
|
+
exports.HeaderRightContainer = exports.ToolContainer = exports.CloseButton = exports.Heading = exports.Header = void 0;
|
|
18
18
|
|
|
19
19
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
20
20
|
|
|
@@ -38,20 +38,36 @@ var Header = _styledComponents["default"].div.withConfig({
|
|
|
38
38
|
componentId: "sc-rrojnl-0"
|
|
39
39
|
})(function (_ref) {
|
|
40
40
|
var kind = _ref.kind;
|
|
41
|
-
return (0, _styledComponents.css)(["align-items:center;box-shadow:", ";box-sizing:border-box;display:flex;justify-content:space-between;min-height:", ";width:100%;z-index:1;&:focus{outline:0;}", ""], _tokens["default"].shadow, (0, _helpers.spacer)(
|
|
41
|
+
return (0, _styledComponents.css)(["align-items:center;box-shadow:", ";box-sizing:border-box;display:flex;justify-content:space-between;min-height:", ";width:100%;z-index:1;&:focus{outline:0;}", ""], _tokens["default"].shadow, (0, _helpers.spacer)(8), kinds[kind]);
|
|
42
42
|
});
|
|
43
43
|
|
|
44
44
|
exports.Header = Header;
|
|
45
45
|
var Heading = (0, _styledComponents["default"])(_heading["default"]).withConfig({
|
|
46
46
|
displayName: "Headerstyles__Heading",
|
|
47
47
|
componentId: "sc-rrojnl-1"
|
|
48
|
-
})(["margin:0
|
|
48
|
+
})(["flex:1;margin:0;overflow:hidden;padding-left:", ";text-overflow:ellipsis;white-space:nowrap;"], (0, _helpers.spacer)(3));
|
|
49
49
|
exports.Heading = Heading;
|
|
50
50
|
|
|
51
51
|
var CloseButton = _styledComponents["default"].div.withConfig({
|
|
52
52
|
displayName: "Headerstyles__CloseButton",
|
|
53
53
|
componentId: "sc-rrojnl-2"
|
|
54
|
-
})(["border-left:1px solid ", ";padding:", ";"], _tokens["default"].border.color, (0, _helpers.spacer)(
|
|
54
|
+
})(["border-left:1px solid ", ";padding:", ";"], _tokens["default"].border.color, (0, _helpers.spacer)(2));
|
|
55
55
|
|
|
56
56
|
exports.CloseButton = CloseButton;
|
|
57
|
+
|
|
58
|
+
var ToolContainer = _styledComponents["default"].div.withConfig({
|
|
59
|
+
displayName: "Headerstyles__ToolContainer",
|
|
60
|
+
componentId: "sc-rrojnl-3"
|
|
61
|
+
})(function () {
|
|
62
|
+
return (0, _styledComponents.css)(["padding-right:", ";[data-pka-anchor=\"button\"]{margin-right:", ";&:last-of-type{margin-left:0;}&:first-of-type{margin-left:", ";}}"], (0, _helpers.spacer)(2), (0, _helpers.spacer)(1), (0, _helpers.spacer)(1));
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
exports.ToolContainer = ToolContainer;
|
|
66
|
+
|
|
67
|
+
var HeaderRightContainer = _styledComponents["default"].div.withConfig({
|
|
68
|
+
displayName: "Headerstyles__HeaderRightContainer",
|
|
69
|
+
componentId: "sc-rrojnl-4"
|
|
70
|
+
})(["align-items:stretch;display:flex;height:100%;", ",", "{align-items:center;display:flex;}"], CloseButton, ToolContainer);
|
|
71
|
+
|
|
72
|
+
exports.HeaderRightContainer = HeaderRightContainer;
|
|
57
73
|
//# sourceMappingURL=Header.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Header/Header.styles.js"],"names":["kinds","DEFAULT","tokens","color","white","black","PRIMARY","purple","Header","styled","div","kind","css","shadow","Heading","OriginalHeading","CloseButton","border"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,OAAO,wBAAiBC,mBAAOC,KAAP,CAAaC,KAA9B,sBAA+CF,mBAAOC,KAAP,CAAaE,KAA5D,MADK;AAEZC,EAAAA,OAAO,wBAAiBJ,mBAAOC,KAAP,CAAaI,MAA9B,sBAAgDL,mBAAOC,KAAP,CAAaC,KAA7D;AAFK,CAAd;;AAKO,IAAMI,MAAM,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACjB;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,aAAcC,qBAAd,wKAEgBV,mBAAOW,MAFvB,EAMgB,qBAAO,CAAP,CANhB,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Header/Header.styles.js"],"names":["kinds","DEFAULT","tokens","color","white","black","PRIMARY","purple","Header","styled","div","kind","css","shadow","Heading","OriginalHeading","CloseButton","border","ToolContainer","HeaderRightContainer"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG;AACZC,EAAAA,OAAO,wBAAiBC,mBAAOC,KAAP,CAAaC,KAA9B,sBAA+CF,mBAAOC,KAAP,CAAaE,KAA5D,MADK;AAEZC,EAAAA,OAAO,wBAAiBJ,mBAAOC,KAAP,CAAaI,MAA9B,sBAAgDL,mBAAOC,KAAP,CAAaC,KAA7D;AAFK,CAAd;;AAKO,IAAMI,MAAM,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACjB;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,aAAcC,qBAAd,wKAEgBV,mBAAOW,MAFvB,EAMgB,qBAAO,CAAP,CANhB,EAaIb,KAAK,CAACW,IAAD,CAbT;AAAA,CADiB,CAAZ;;;AAkBA,IAAMG,OAAO,GAAG,kCAAOC,mBAAP,CAAH;AAAA;AAAA;AAAA,qGAIF,qBAAO,CAAP,CAJE,CAAb;;;AASA,IAAMC,WAAW,GAAGP,6BAAOC,GAAV;AAAA;AAAA;AAAA,iDACGR,mBAAOe,MAAP,CAAcd,KADjB,EAEX,qBAAO,CAAP,CAFW,CAAjB;;;;AAKA,IAAMe,aAAa,GAAGT,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACxB;AAAA,aAAME,qBAAN,2IACmB,qBAAO,CAAP,CADnB,EAGoB,qBAAO,CAAP,CAHpB,EAQqB,qBAAO,CAAP,CARrB;AAAA,CADwB,CAAnB;;;;AAeA,IAAMO,oBAAoB,GAAGV,6BAAOC,GAAV;AAAA;AAAA;AAAA,iGAI7BM,WAJ6B,EAIbE,aAJa,CAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport OriginalHeading from \"@paprika/heading\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport tokens from \"@paprika/tokens/lib/tokens\";\n\nconst kinds = {\n DEFAULT: `background: ${tokens.color.white}; color: ${tokens.color.black};`,\n PRIMARY: `background: ${tokens.color.purple}; color: ${tokens.color.white};`,\n};\n\nexport const Header = styled.div(\n ({ kind }) => css`\n align-items: center;\n box-shadow: ${tokens.shadow};\n box-sizing: border-box;\n display: flex;\n justify-content: space-between;\n min-height: ${spacer(8)};\n width: 100%;\n z-index: 1;\n &:focus {\n outline: 0;\n }\n\n ${kinds[kind]}\n `\n);\n\nexport const Heading = styled(OriginalHeading)`\n flex: 1;\n margin: 0;\n overflow: hidden;\n padding-left: ${spacer(3)};\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const CloseButton = styled.div`\n border-left: 1px solid ${tokens.border.color};\n padding: ${spacer(2)};\n`;\n\nexport const ToolContainer = styled.div(\n () => css`\n padding-right: ${spacer(2)};\n [data-pka-anchor=\"button\"] {\n margin-right: ${spacer(1)};\n &:last-of-type {\n margin-left: 0;\n }\n &:first-of-type {\n margin-left: ${spacer(1)};\n }\n }\n `\n);\n\nexport const HeaderRightContainer = styled.div`\n align-items: stretch;\n display: flex;\n height: 100%;\n ${CloseButton}, ${ToolContainer} {\n align-items: center;\n display: flex;\n }\n`;\n"],"file":"Header.styles.js"}
|
package/lib/index.d.ts
CHANGED
|
@@ -17,6 +17,8 @@ interface TakeoverProps {
|
|
|
17
17
|
onClose?: (...args: any[]) => any;
|
|
18
18
|
/** The z-index of the Takeover content */
|
|
19
19
|
zIndex?: number;
|
|
20
|
+
/** Set Takeover to full width without any margins and max-width */
|
|
21
|
+
isFullWidth?: custom;
|
|
20
22
|
}
|
|
21
23
|
|
|
22
24
|
declare namespace Takeover {
|
|
@@ -35,6 +37,8 @@ declare namespace Takeover {
|
|
|
35
37
|
onClose?: (...args: any[]) => any;
|
|
36
38
|
|
|
37
39
|
refHeading?: custom;
|
|
40
|
+
/** Add node object to the right side of heading next to the close button */
|
|
41
|
+
tools?: React.ReactNode;
|
|
38
42
|
}
|
|
39
43
|
}
|
|
40
44
|
declare namespace Takeover {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/takeover",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0-next.1",
|
|
4
4
|
"description": "The Takeover component can toggle a full-screen view to help the user focus on complex UI tasks.",
|
|
5
5
|
"author": "@paprika",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -16,15 +16,15 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
|
-
"@paprika/button": "^1.1.12
|
|
19
|
+
"@paprika/button": "^1.1.12",
|
|
20
20
|
"@paprika/constants": "^1.0.0",
|
|
21
|
-
"@paprika/heading": "^1.0.14
|
|
22
|
-
"@paprika/helpers": "^2.3.0
|
|
23
|
-
"@paprika/overlay": "^1.0.
|
|
24
|
-
"@paprika/stylers": "^1.1.6
|
|
25
|
-
"@paprika/tokens": "^2.0.0
|
|
21
|
+
"@paprika/heading": "^1.0.14",
|
|
22
|
+
"@paprika/helpers": "^2.3.0",
|
|
23
|
+
"@paprika/overlay": "^1.0.15-next.1",
|
|
24
|
+
"@paprika/stylers": "^1.1.6",
|
|
25
|
+
"@paprika/tokens": "^2.0.0",
|
|
26
26
|
"prop-types": "^15.7.2",
|
|
27
|
-
"react-focus-lock": "^2.
|
|
27
|
+
"react-focus-lock": "^2.8.1",
|
|
28
28
|
"react-transition-group": "^4.3.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|