@paprika/takeover 1.1.2 → 2.0.0-next.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/CHANGELOG.md +19 -0
- package/README.md +10 -0
- package/lib/Takeover.js +6 -2
- package/lib/Takeover.js.map +1 -1
- package/lib/Takeover.styles.js +1 -1
- package/lib/Takeover.styles.js.map +1 -1
- package/lib/components/Content/Content.js +13 -1
- package/lib/components/Content/Content.js.map +1 -1
- package/lib/components/Footer/Footer.js +75 -0
- package/lib/components/Footer/Footer.js.map +1 -0
- package/lib/components/Footer/index.js +19 -0
- package/lib/components/Footer/index.js.map +1 -0
- package/lib/components/Header/Header.styles.js +4 -2
- package/lib/components/Header/Header.styles.js.map +1 -1
- package/lib/index.d.ts +12 -0
- package/package.json +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 2.0.0-next.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [d484734]
|
|
8
|
+
- @paprika/l10n@1.2.0-next.0
|
|
9
|
+
|
|
10
|
+
## 1.1.3
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- be2176f: Update takeover style base on approved design proposal
|
|
15
|
+
|
|
16
|
+
## 1.1.3-next.0
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- be2176f: Update takeover style base on approved design proposal
|
|
21
|
+
|
|
3
22
|
## 1.1.2
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -45,6 +45,14 @@ npm install @paprika/takeover
|
|
|
45
45
|
| refHeading | custom | false | null | |
|
|
46
46
|
| tools | node | false | null | Add node object to the right side of heading next to the close button |
|
|
47
47
|
|
|
48
|
+
### Takeover.Footer
|
|
49
|
+
|
|
50
|
+
| Prop | Type | required | default | Description |
|
|
51
|
+
| ------------- | ---- | -------- | -------- | ---------------------------------------------------------------------------------- |
|
|
52
|
+
| children | node | false | null | The footer for the Takeover. Button size needs to be LARGE as per design guideline |
|
|
53
|
+
| onSaveClick | func | false | () => {} | Save Callback triggered when want to use default layout of the footer |
|
|
54
|
+
| onCancelClick | func | false | () => {} | Cancel Callback triggered when want to use default layout of the footer |
|
|
55
|
+
|
|
48
56
|
### Takeover.FocusLock
|
|
49
57
|
|
|
50
58
|
| Prop | Type | required | default | Description |
|
|
@@ -61,6 +69,7 @@ You can use any of the following components to compose the Takeover:
|
|
|
61
69
|
```jsx
|
|
62
70
|
<Takeover.Header />
|
|
63
71
|
<Takeover.Content />
|
|
72
|
+
<Takeover.Footer />
|
|
64
73
|
<Takeover.FocusLock />
|
|
65
74
|
```
|
|
66
75
|
|
|
@@ -70,6 +79,7 @@ Basic Example
|
|
|
70
79
|
<Takeover isOpen={isOpen} onClose={toggle}>
|
|
71
80
|
<Takeover.Header>Header</Takeover.Header>
|
|
72
81
|
<Takeover.Content>My content</Takeover.Content>
|
|
82
|
+
<Takeover.Footer onSaveClick={toggle} onCancelClick={toggle} />
|
|
73
83
|
</Takeover>
|
|
74
84
|
```
|
|
75
85
|
|
package/lib/Takeover.js
CHANGED
|
@@ -46,6 +46,8 @@ var _FocusLock = _interopRequireDefault(require("./components/FocusLock"));
|
|
|
46
46
|
|
|
47
47
|
var _Header = _interopRequireDefault(require("./components/Header/Header"));
|
|
48
48
|
|
|
49
|
+
var _Footer = _interopRequireDefault(require("./components/Footer"));
|
|
50
|
+
|
|
49
51
|
var _Content = _interopRequireDefault(require("./components/Content/Content"));
|
|
50
52
|
|
|
51
53
|
var sc = _interopRequireWildcard(require("./Takeover.styles"));
|
|
@@ -104,10 +106,11 @@ function Takeover(props) {
|
|
|
104
106
|
isFullWidth = props.isFullWidth,
|
|
105
107
|
moreProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
|
106
108
|
|
|
107
|
-
var _extractChildren = (0, _helpers2.extractChildren)(moreProps.children, ["Takeover.Content", "Takeover.FocusLock", "Takeover.Header", "Takeover.Overlay"]),
|
|
109
|
+
var _extractChildren = (0, _helpers2.extractChildren)(moreProps.children, ["Takeover.Content", "Takeover.FocusLock", "Takeover.Header", "Takeover.Footer", "Takeover.Overlay"]),
|
|
108
110
|
contentExtracted = _extractChildren["Takeover.Content"],
|
|
109
111
|
focusLockExtracted = _extractChildren["Takeover.FocusLock"],
|
|
110
112
|
headerExtracted = _extractChildren["Takeover.Header"],
|
|
113
|
+
footerExtracted = _extractChildren["Takeover.Footer"],
|
|
111
114
|
overlayExtracted = _extractChildren["Takeover.Overlay"],
|
|
112
115
|
children = _extractChildren.children;
|
|
113
116
|
|
|
@@ -156,7 +159,7 @@ function Takeover(props) {
|
|
|
156
159
|
})), contentExtracted && /*#__PURE__*/_react["default"].createElement(sc.Content, {
|
|
157
160
|
role: "region",
|
|
158
161
|
tabIndex: "0"
|
|
159
|
-
}, contentExtracted), children);
|
|
162
|
+
}, contentExtracted), children, footerExtracted);
|
|
160
163
|
});
|
|
161
164
|
}
|
|
162
165
|
|
|
@@ -164,6 +167,7 @@ Takeover.displayName = "Takeover";
|
|
|
164
167
|
Takeover.propTypes = propTypes;
|
|
165
168
|
Takeover.defaultProps = defaultProps;
|
|
166
169
|
Takeover.Header = _Header["default"];
|
|
170
|
+
Takeover.Footer = _Footer["default"];
|
|
167
171
|
Takeover.Content = _Content["default"];
|
|
168
172
|
Takeover.FocusLock = _FocusLock["default"];
|
|
169
173
|
Takeover.Overlay = _Overlay["default"];
|
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","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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,MApBF;;AAsBhB;AACAC,EAAAA,WAAW,EAAEb;AAvBG,CAAlB;AA0BA,IAAMc,YAAY,GAAG;AACnBf,EAAAA,QAAQ,EAAE,IADS;AAEnBW,EAAAA,OAAO,EAAE,mBAAM,CAAE,CAFE;AAGnBH,EAAAA,YAAY,EAAE,wBAAM,CAAE,CAHH;AAInBE,EAAAA,WAAW,EAAE,uBAAM,CAAE,CAJF;AAKnBE,EAAAA,MAAM,EAAE,qBAAO,CAAP,CALW;AAMnBE,EAAAA,WAAW,EAAE;AANM,CAArB;;AASe,SAASE,QAAT,CAAkBC,KAAlB,EAAyB;AACtC,MAAQjB,QAAR,GAAoGiB,KAApG,CAAQjB,QAAR;AAAA,MAAkBM,MAAlB,GAAoGW,KAApG,CAAkBX,MAAlB;AAAA,MAA0BK,OAA1B,GAAoGM,KAApG,CAA0BN,OAA1B;AAAA,MAAmCH,YAAnC,GAAoGS,KAApG,CAAmCT,YAAnC;AAAA,MAAiDE,WAAjD,GAAoGO,KAApG,CAAiDP,WAAjD;AAAA,MAA8DE,MAA9D,GAAoGK,KAApG,CAA8DL,MAA9D;AAAA,MAAsEE,WAAtE,GAAoGG,KAApG,CAAsEH,WAAtE;AAAA,MAAsFI,SAAtF,6CAAoGD,KAApG;;AAEA,
|
|
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","footerExtracted","overlayExtracted","focusLockProps","focusLockOptions","as","sc","FocusLock","overlayProps","hasBackdrop","isBackdropClickDisabled","getAriaLabel","console","error","state","displayName","Header","Footer","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 Footer from \"./components/Footer\";\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.Footer\": footerExtracted,\n \"Takeover.Overlay\": overlayExtracted,\n children,\n } = extractChildren(moreProps.children, [\n \"Takeover.Content\",\n \"Takeover.FocusLock\",\n \"Takeover.Header\",\n \"Takeover.Footer\",\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 {footerExtracted}\n </sc.Takeover>\n )}\n </OriginalOverlay>\n );\n}\n\nTakeover.displayName = \"Takeover\";\nTakeover.propTypes = propTypes;\nTakeover.defaultProps = defaultProps;\n\nTakeover.Header = Header;\nTakeover.Footer = Footer;\nTakeover.Content = Content;\nTakeover.FocusLock = FocusLock;\nTakeover.Overlay = Overlay;\n"],"file":"Takeover.js"}
|
package/lib/Takeover.styles.js
CHANGED
|
@@ -65,7 +65,7 @@ exports.Header = Header;
|
|
|
65
65
|
var Content = _styledComponents["default"].div.withConfig({
|
|
66
66
|
displayName: "Takeoverstyles__Content",
|
|
67
67
|
componentId: "sc-1pjp0u6-3"
|
|
68
|
-
})(["flex-grow:1;overflow-y:auto;&:focus{", ";}"], _stylers["default"].focusRing.subtle(true));
|
|
68
|
+
})(["flex-grow:1;height:100%;overflow-y:auto;position:relative;&:focus{", ";}"], _stylers["default"].focusRing.subtle(true));
|
|
69
69
|
|
|
70
70
|
exports.Content = Content;
|
|
71
71
|
//# sourceMappingURL=Takeover.styles.js.map
|
|
@@ -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","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,
|
|
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,iFAMdyB,oBAAQC,SAAR,CAAkBC,MAAlB,CAAyB,IAAzB,CANc,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 height: 100%;\n overflow-y: auto;\n position: relative;\n &:focus {\n ${stylers.focusRing.subtle(true)};\n }\n`;\n"],"file":"Takeover.styles.js"}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _typeof = require("@babel/runtime-corejs2/helpers/typeof");
|
|
4
|
+
|
|
5
|
+
var _WeakMap = require("@babel/runtime-corejs2/core-js/weak-map");
|
|
6
|
+
|
|
3
7
|
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
4
8
|
|
|
9
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs2/core-js/object/get-own-property-descriptor");
|
|
10
|
+
|
|
5
11
|
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
6
12
|
|
|
7
13
|
_Object$defineProperty(exports, "__esModule", {
|
|
@@ -18,10 +24,16 @@ var _helpers = require("@paprika/stylers/lib/helpers");
|
|
|
18
24
|
|
|
19
25
|
var _tokens = _interopRequireDefault(require("@paprika/tokens/lib/tokens"));
|
|
20
26
|
|
|
27
|
+
var sc = _interopRequireWildcard(require("../Header/Header.styles"));
|
|
28
|
+
|
|
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); }
|
|
30
|
+
|
|
31
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
32
|
+
|
|
21
33
|
var StyledContent = _styledComponents["default"].div.withConfig({
|
|
22
34
|
displayName: "Content__StyledContent",
|
|
23
35
|
componentId: "sc-z0n5xf-0"
|
|
24
|
-
})(["background-color:", ";border-radius:", ";box-shadow:", ";margin:", ";padding:", ";"], _tokens["default"].color.white, _tokens["default"].card.borderRadius, _tokens["default"].card.shadow, (0, _helpers.spacer)(2), (0, _helpers.spacer)(2));
|
|
36
|
+
})(["background-color:", ";border-radius:", ";box-shadow:", ";margin:", ";min-height:calc(100% - ", ");padding:", ";"], _tokens["default"].color.white, _tokens["default"].card.borderRadius, _tokens["default"].card.shadow, (0, _helpers.spacer)(2), sc.headerHeight, (0, _helpers.spacer)(2));
|
|
25
37
|
|
|
26
38
|
function Content(props) {
|
|
27
39
|
return /*#__PURE__*/_react["default"].createElement(StyledContent, props);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Content/Content.js"],"names":["StyledContent","styled","div","tokens","color","white","card","borderRadius","shadow","Content","props","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Content/Content.js"],"names":["StyledContent","styled","div","tokens","color","white","card","borderRadius","shadow","sc","headerHeight","Content","props","displayName"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,aAAa,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,wHACGC,mBAAOC,KAAP,CAAaC,KADhB,EAEAF,mBAAOG,IAAP,CAAYC,YAFZ,EAGHJ,mBAAOG,IAAP,CAAYE,MAHT,EAIP,qBAAO,CAAP,CAJO,EAKSC,EAAE,CAACC,YALZ,EAMN,qBAAO,CAAP,CANM,CAAnB;;AASe,SAASC,OAAT,CAAiBC,KAAjB,EAAwB;AACrC,sBAAO,gCAAC,aAAD,EAAmBA,KAAnB,CAAP;AACD;;AAEDD,OAAO,CAACE,WAAR,GAAsB,kBAAtB","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\nimport tokens from \"@paprika/tokens/lib/tokens\";\nimport * as sc from \"../Header/Header.styles\";\n\nconst StyledContent = styled.div`\n background-color: ${tokens.color.white};\n border-radius: ${tokens.card.borderRadius};\n box-shadow: ${tokens.card.shadow};\n margin: ${spacer(2)};\n min-height: calc(100% - ${sc.headerHeight});\n padding: ${spacer(2)};\n`;\n\nexport default function Content(props) {\n return <StyledContent {...props} />;\n}\n\nContent.displayName = \"Takeover.Content\";\n"],"file":"Content.js"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
exports["default"] = Footer;
|
|
12
|
+
|
|
13
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/extends"));
|
|
14
|
+
|
|
15
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs2/helpers/objectWithoutProperties"));
|
|
16
|
+
|
|
17
|
+
var _react = _interopRequireDefault(require("react"));
|
|
18
|
+
|
|
19
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
20
|
+
|
|
21
|
+
var _button = _interopRequireDefault(require("@paprika/button"));
|
|
22
|
+
|
|
23
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
24
|
+
|
|
25
|
+
var _tokens = _interopRequireDefault(require("@paprika/tokens"));
|
|
26
|
+
|
|
27
|
+
var _useI18n = _interopRequireDefault(require("@paprika/l10n/lib/useI18n"));
|
|
28
|
+
|
|
29
|
+
var _helpers = require("@paprika/stylers/lib/helpers");
|
|
30
|
+
|
|
31
|
+
var _excluded = ["children", "onSaveClick", "onCancelClick"];
|
|
32
|
+
|
|
33
|
+
var StyledFooter = _styledComponents["default"].div.withConfig({
|
|
34
|
+
displayName: "Footer__StyledFooter",
|
|
35
|
+
componentId: "sc-t38py2-0"
|
|
36
|
+
})(["background:", ";padding:", ";[data-pka-anchor=\"button\"]{&:nth-child(2){margin-left:", ";}}"], _tokens["default"].color.blackLighten70, (0, _helpers.spacer)(2), _tokens["default"].space);
|
|
37
|
+
|
|
38
|
+
function Footer(_ref) {
|
|
39
|
+
var children = _ref.children,
|
|
40
|
+
onSaveClick = _ref.onSaveClick,
|
|
41
|
+
onCancelClick = _ref.onCancelClick,
|
|
42
|
+
moreProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
43
|
+
var I18n = (0, _useI18n["default"])();
|
|
44
|
+
return /*#__PURE__*/_react["default"].createElement(StyledFooter, (0, _extends2["default"])({
|
|
45
|
+
"ata-pka-anchor": "takeover.footer"
|
|
46
|
+
}, moreProps), children || /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
47
|
+
kind: _button["default"].types.kind.PRIMARY,
|
|
48
|
+
size: _button["default"].types.size.LARGE,
|
|
49
|
+
onClick: onSaveClick
|
|
50
|
+
}, I18n.t("actions.confirm")), /*#__PURE__*/_react["default"].createElement(_button["default"], {
|
|
51
|
+
kind: _button["default"].types.kind.MINOR,
|
|
52
|
+
size: _button["default"].types.size.LARGE,
|
|
53
|
+
onClick: onCancelClick
|
|
54
|
+
}, I18n.t("actions.cancel"))));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
var propTypes = {
|
|
58
|
+
/** The footer for the Takeover. Button size needs to be LARGE as per design guideline */
|
|
59
|
+
children: _propTypes["default"].node,
|
|
60
|
+
|
|
61
|
+
/** Save Callback triggered when want to use default layout of the footer */
|
|
62
|
+
onSaveClick: _propTypes["default"].func,
|
|
63
|
+
|
|
64
|
+
/** Cancel Callback triggered when want to use default layout of the footer */
|
|
65
|
+
onCancelClick: _propTypes["default"].func
|
|
66
|
+
};
|
|
67
|
+
var defaultProps = {
|
|
68
|
+
children: null,
|
|
69
|
+
onSaveClick: function onSaveClick() {},
|
|
70
|
+
onCancelClick: function onCancelClick() {}
|
|
71
|
+
};
|
|
72
|
+
Footer.displayName = "Takeover.Footer";
|
|
73
|
+
Footer.propTypes = propTypes;
|
|
74
|
+
Footer.defaultProps = defaultProps;
|
|
75
|
+
//# sourceMappingURL=Footer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Footer/Footer.js"],"names":["StyledFooter","styled","div","tokens","color","blackLighten70","space","Footer","children","onSaveClick","onCancelClick","moreProps","I18n","Button","types","kind","PRIMARY","size","LARGE","t","MINOR","propTypes","PropTypes","node","func","defaultProps","displayName"],"mappings":";;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,YAAY,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,qGACFC,mBAAOC,KAAP,CAAaC,cADX,EAEL,qBAAO,CAAP,CAFK,EAKGF,mBAAOG,KALV,CAAlB;;AAUe,SAASC,MAAT,OAAwE;AAAA,MAAtDC,QAAsD,QAAtDA,QAAsD;AAAA,MAA5CC,WAA4C,QAA5CA,WAA4C;AAAA,MAA/BC,aAA+B,QAA/BA,aAA+B;AAAA,MAAbC,SAAa;AACrF,MAAMC,IAAI,GAAG,0BAAb;AACA,sBACE,gCAAC,YAAD;AAAc,sBAAe;AAA7B,KAAmDD,SAAnD,GACGH,QAAQ,iBACP,+EACE,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAEK,mBAAOC,KAAP,CAAaC,IAAb,CAAkBC,OAAhC;AAAyC,IAAA,IAAI,EAAEH,mBAAOC,KAAP,CAAaG,IAAb,CAAkBC,KAAjE;AAAwE,IAAA,OAAO,EAAET;AAAjF,KACGG,IAAI,CAACO,CAAL,CAAO,iBAAP,CADH,CADF,eAIE,gCAAC,kBAAD;AAAQ,IAAA,IAAI,EAAEN,mBAAOC,KAAP,CAAaC,IAAb,CAAkBK,KAAhC;AAAuC,IAAA,IAAI,EAAEP,mBAAOC,KAAP,CAAaG,IAAb,CAAkBC,KAA/D;AAAsE,IAAA,OAAO,EAAER;AAA/E,KACGE,IAAI,CAACO,CAAL,CAAO,gBAAP,CADH,CAJF,CAFJ,CADF;AAcD;;AAED,IAAME,SAAS,GAAG;AAChB;AACAb,EAAAA,QAAQ,EAAEc,sBAAUC,IAFJ;;AAGhB;AACAd,EAAAA,WAAW,EAAEa,sBAAUE,IAJP;;AAKhB;AACAd,EAAAA,aAAa,EAAEY,sBAAUE;AANT,CAAlB;AASA,IAAMC,YAAY,GAAG;AACnBjB,EAAAA,QAAQ,EAAE,IADS;AAEnBC,EAAAA,WAAW,EAAE,uBAAM,CAAE,CAFF;AAGnBC,EAAAA,aAAa,EAAE,yBAAM,CAAE;AAHJ,CAArB;AAMAH,MAAM,CAACmB,WAAP,GAAqB,iBAArB;AACAnB,MAAM,CAACc,SAAP,GAAmBA,SAAnB;AACAd,MAAM,CAACkB,YAAP,GAAsBA,YAAtB","sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport Button from \"@paprika/button\";\nimport PropTypes from \"prop-types\";\nimport tokens from \"@paprika/tokens\";\nimport useI18n from \"@paprika/l10n/lib/useI18n\";\nimport { spacer } from \"@paprika/stylers/lib/helpers\";\n\nconst StyledFooter = styled.div`\n background: ${tokens.color.blackLighten70};\n padding: ${spacer(2)};\n [data-pka-anchor=\"button\"] {\n &:nth-child(2) {\n margin-left: ${tokens.space};\n }\n }\n`;\n\nexport default function Footer({ children, onSaveClick, onCancelClick, ...moreProps }) {\n const I18n = useI18n();\n return (\n <StyledFooter ata-pka-anchor=\"takeover.footer\" {...moreProps}>\n {children || (\n <>\n <Button kind={Button.types.kind.PRIMARY} size={Button.types.size.LARGE} onClick={onSaveClick}>\n {I18n.t(\"actions.confirm\")}\n </Button>\n <Button kind={Button.types.kind.MINOR} size={Button.types.size.LARGE} onClick={onCancelClick}>\n {I18n.t(\"actions.cancel\")}\n </Button>\n </>\n )}\n </StyledFooter>\n );\n}\n\nconst propTypes = {\n /** The footer for the Takeover. Button size needs to be LARGE as per design guideline */\n children: PropTypes.node,\n /** Save Callback triggered when want to use default layout of the footer */\n onSaveClick: PropTypes.func,\n /** Cancel Callback triggered when want to use default layout of the footer */\n onCancelClick: PropTypes.func,\n};\n\nconst defaultProps = {\n children: null,\n onSaveClick: () => {},\n onCancelClick: () => {},\n};\n\nFooter.displayName = \"Takeover.Footer\";\nFooter.propTypes = propTypes;\nFooter.defaultProps = defaultProps;\n"],"file":"Footer.js"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
_Object$defineProperty(exports, "default", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function get() {
|
|
14
|
+
return _Footer["default"];
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
var _Footer = _interopRequireDefault(require("./Footer"));
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Footer/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./Footer\";\n"],"file":"index.js"}
|
|
@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
|
|
|
14
14
|
value: true
|
|
15
15
|
});
|
|
16
16
|
|
|
17
|
-
exports.HeaderRightContainer = exports.ToolContainer = exports.CloseButton = exports.Heading = exports.Header = void 0;
|
|
17
|
+
exports.HeaderRightContainer = exports.ToolContainer = exports.CloseButton = exports.Heading = exports.Header = exports.headerHeight = void 0;
|
|
18
18
|
|
|
19
19
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
20
20
|
|
|
@@ -32,13 +32,15 @@ var kinds = {
|
|
|
32
32
|
DEFAULT: "background: ".concat(_tokens["default"].color.white, "; color: ").concat(_tokens["default"].color.black, ";"),
|
|
33
33
|
PRIMARY: "background: ".concat(_tokens["default"].color.purple, "; color: ").concat(_tokens["default"].color.white, ";")
|
|
34
34
|
};
|
|
35
|
+
var headerHeight = "".concat((0, _helpers.spacer)(8));
|
|
36
|
+
exports.headerHeight = headerHeight;
|
|
35
37
|
|
|
36
38
|
var Header = _styledComponents["default"].div.withConfig({
|
|
37
39
|
displayName: "Headerstyles__Header",
|
|
38
40
|
componentId: "sc-rrojnl-0"
|
|
39
41
|
})(function (_ref) {
|
|
40
42
|
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
|
|
43
|
+
return (0, _styledComponents.css)(["align-items:center;box-shadow:", ";box-sizing:border-box;display:flex;justify-content:space-between;min-height:", ";overflow:auto;width:100%;&:focus{outline:0;}z-index:1;", ""], _tokens["default"].shadow, headerHeight, kinds[kind]);
|
|
42
44
|
});
|
|
43
45
|
|
|
44
46
|
exports.Header = Header;
|
|
@@ -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","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
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Header/Header.styles.js"],"names":["kinds","DEFAULT","tokens","color","white","black","PRIMARY","purple","headerHeight","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,YAAY,aAAM,qBAAO,CAAP,CAAN,CAAlB;;;AAEA,IAAMC,MAAM,GAAGC,6BAAOC,GAAV;AAAA;AAAA;AAAA,GACjB;AAAA,MAAGC,IAAH,QAAGA,IAAH;AAAA,aAAcC,qBAAd,sLAEgBX,mBAAOY,MAFvB,EAMgBN,YANhB,EAaIR,KAAK,CAACY,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,iDACGT,mBAAOgB,MAAP,CAAcf,KADjB,EAEX,qBAAO,CAAP,CAFW,CAAjB;;;;AAKA,IAAMgB,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 headerHeight = `${spacer(8)}`;\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: ${headerHeight};\n overflow: auto;\n width: 100%;\n &:focus {\n outline: 0;\n }\n z-index: 1;\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
|
@@ -41,6 +41,18 @@ declare namespace Takeover {
|
|
|
41
41
|
tools?: React.ReactNode;
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
declare namespace Takeover {
|
|
45
|
+
function Footer(props: FooterProps): JSX.Element;
|
|
46
|
+
interface FooterProps {
|
|
47
|
+
[x: string]: any;
|
|
48
|
+
/** The footer for the Takeover. Button size needs to be LARGE as per design guideline */
|
|
49
|
+
children?: React.ReactNode;
|
|
50
|
+
/** Save Callback triggered when want to use default layout of the footer */
|
|
51
|
+
onSaveClick?: (...args: any[]) => any;
|
|
52
|
+
/** Cancel Callback triggered when want to use default layout of the footer */
|
|
53
|
+
onCancelClick?: (...args: any[]) => any;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
44
56
|
declare namespace Takeover {
|
|
45
57
|
function FocusLock(props: FocusLockProps): JSX.Element;
|
|
46
58
|
interface FocusLockProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/takeover",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.0",
|
|
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",
|
|
@@ -30,11 +30,13 @@
|
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"react": "^16.8.4",
|
|
32
32
|
"react-dom": "^16.8.4",
|
|
33
|
-
"styled-components": "^4.2.0"
|
|
33
|
+
"styled-components": "^4.2.0",
|
|
34
|
+
"@paprika/l10n": "^1.2.0-next.0"
|
|
34
35
|
},
|
|
35
36
|
"paprikaDocs": {
|
|
36
37
|
"subComponents": [
|
|
37
38
|
"Header",
|
|
39
|
+
"Footer",
|
|
38
40
|
"Content",
|
|
39
41
|
"FocusLock",
|
|
40
42
|
"Overlay"
|