@paprika/toast 4.0.2-next.0 → 4.0.3-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/lib/Toast.styles.js +4 -4
- package/lib/Toast.styles.js.map +1 -1
- package/package.json +5 -5
package/lib/Toast.styles.js
CHANGED
|
@@ -40,14 +40,14 @@ var backgroundColors = (_backgroundColors = {}, (0, _defineProperty2["default"])
|
|
|
40
40
|
|
|
41
41
|
var borderColors = (_borderColors = {}, (0, _defineProperty2["default"])(_borderColors, types.toastKinds.SUCCESS, "#c5e2d3"), (0, _defineProperty2["default"])(_borderColors, types.toastKinds.WARNING, "#f2deaf"), (0, _defineProperty2["default"])(_borderColors, types.toastKinds.ERROR, "#f2c2b8"), (0, _defineProperty2["default"])(_borderColors, types.toastKinds.INFO, "#dbd8d0"), (0, _defineProperty2["default"])(_borderColors, types.toastKinds.LOCKED, "#f2deaf"), _borderColors);
|
|
42
42
|
var closeButtonColors = (_closeButtonColors = {}, (0, _defineProperty2["default"])(_closeButtonColors, types.toastKinds.SUCCESS, _tokens["default"].color.greenDarken20), (0, _defineProperty2["default"])(_closeButtonColors, types.toastKinds.WARNING, _tokens["default"].color.yellowDarken40), (0, _defineProperty2["default"])(_closeButtonColors, types.toastKinds.ERROR, _tokens["default"].color.orangeLighten40), (0, _defineProperty2["default"])(_closeButtonColors, types.toastKinds.LOCKED, _tokens["default"].color.yellowLighten30), _closeButtonColors);
|
|
43
|
-
var fixedStyles = (0, _styledComponents.css)(["
|
|
43
|
+
var fixedStyles = (0, _styledComponents.css)(["inset-inline-start:50%;max-width:675px;position:fixed;top:", ";transform:translateX(-50%);width:calc(100% - ", ");"], _stylers["default"].spacer(2), _stylers["default"].spacer(4));
|
|
44
44
|
var iconColors = (_iconColors = {}, (0, _defineProperty2["default"])(_iconColors, types.toastKinds.SUCCESS, _tokens["default"].color.green), (0, _defineProperty2["default"])(_iconColors, types.toastKinds.WARNING, _tokens["default"].color.yellowDarken10), (0, _defineProperty2["default"])(_iconColors, types.toastKinds.ERROR, _tokens["default"].color.orange), (0, _defineProperty2["default"])(_iconColors, types.toastKinds.INFO, _tokens["default"].color.blue), (0, _defineProperty2["default"])(_iconColors, types.toastKinds.LOCKED, _tokens["default"].color.yellowDarken10), _iconColors);
|
|
45
45
|
var CloseButtonStyled = (0, _styledComponents["default"])(_button["default"].Close).withConfig({
|
|
46
46
|
displayName: "Toaststyles__CloseButtonStyled",
|
|
47
47
|
componentId: "sc-1e0oo3r-0"
|
|
48
48
|
})(function (_ref) {
|
|
49
49
|
var kind = _ref.kind;
|
|
50
|
-
return (0, _styledComponents.css)(["flex-grow:0;flex-shrink:0;margin-
|
|
50
|
+
return (0, _styledComponents.css)(["flex-grow:0;flex-shrink:0;margin-block-end:-6px;margin-block-start:-6px;margin-inline-end:-7px;margin-inline-start:", ";min-height:0;", ""], _tokens["default"].space, closeButtonColors[kind] && "color: ".concat(closeButtonColors[kind], ";"));
|
|
51
51
|
});
|
|
52
52
|
exports.CloseButtonStyled = CloseButtonStyled;
|
|
53
53
|
|
|
@@ -56,7 +56,7 @@ var IconStyled = _styledComponents["default"].div.withConfig({
|
|
|
56
56
|
componentId: "sc-1e0oo3r-1"
|
|
57
57
|
})(function (_ref2) {
|
|
58
58
|
var kind = _ref2.kind;
|
|
59
|
-
return (0, _styledComponents.css)(["color:", ";flex-grow:0;flex-shrink:0;margin:1px
|
|
59
|
+
return (0, _styledComponents.css)(["color:", ";flex-grow:0;flex-shrink:0;margin-block-end:0;margin-block-start:1px;margin-inline-end:", ";margin-inline-start:0;", ""], iconColors[kind], _tokens["default"].space, _stylers["default"].fontSize(2));
|
|
60
60
|
});
|
|
61
61
|
|
|
62
62
|
exports.IconStyled = IconStyled;
|
|
@@ -76,7 +76,7 @@ var Toast = _styledComponents["default"].div.withConfig({
|
|
|
76
76
|
kind = _ref3.kind,
|
|
77
77
|
zIndex = _ref3.zIndex,
|
|
78
78
|
shouldRender = _ref3.shouldRender;
|
|
79
|
-
return (0, _styledComponents.css)(["align-items:flex-start;background-color:", ";border-color:", ";border-radius:", ";border-style:solid;border-width:1px;color:", ";display:flex;font-weight:normal;margin-
|
|
79
|
+
return (0, _styledComponents.css)(["align-items:flex-start;background-color:", ";border-color:", ";border-radius:", ";border-style:solid;border-width:1px;color:", ";display:flex;font-weight:normal;margin-block-end:", ";min-height:", ";padding-block-end:10px;padding-block-start:", ";padding-inline-end:", ";padding-inline-start:", ";position:relative;text-align:start;transition:opacity 0.3s ease-out;word-break:break-word;z-index:", ";", " ", " ", " ", ";"], backgroundColors[kind], borderColors[kind], _tokens["default"].border.radius, _tokens["default"].color.black, _stylers["default"].spacer(2), _stylers["default"].spacer(3), _tokens["default"].spaceLg, _tokens["default"].spaceLg, _tokens["default"].spaceLg, zIndex, _stylers["default"].fontSize(), _stylers["default"].lineHeight(), isFixed ? fixedStyles : null, !shouldRender || kind === types.toastKinds.VISUALLY_HIDDEN ? _includes.visuallyHidden : null);
|
|
80
80
|
});
|
|
81
81
|
|
|
82
82
|
exports.Toast = Toast;
|
package/lib/Toast.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Toast.styles.js"],"names":["backgroundColors","types","toastKinds","SUCCESS","tokens","color","greenLighten50","WARNING","yellowLighten30","ERROR","orangeLighten40","INFO","cremeLighten5","LOCKED","borderColors","closeButtonColors","greenDarken20","yellowDarken40","fixedStyles","css","stylers","spacer","iconColors","green","yellowDarken10","orange","blue","CloseButtonStyled","Button","Close","kind","space","IconStyled","styled","div","fontSize","Content","Toast","isFixed","zIndex","shouldRender","border","radius","black","spaceLg","lineHeight","VISUALLY_HIDDEN","visuallyHidden"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,IAAMA,gBAAgB,gFACnBC,KAAK,CAACC,UAAN,CAAiBC,OADE,EACQC,mBAAOC,KAAP,CAAaC,cADrB,uDAEnBL,KAAK,CAACC,UAAN,CAAiBK,OAFE,EAEQH,mBAAOC,KAAP,CAAaG,eAFrB,uDAGnBP,KAAK,CAACC,UAAN,CAAiBO,KAHE,EAGML,mBAAOC,KAAP,CAAaK,eAHnB,uDAInBT,KAAK,CAACC,UAAN,CAAiBS,IAJE,EAIKP,mBAAOC,KAAP,CAAaO,aAJlB,uDAKnBX,KAAK,CAACC,UAAN,CAAiBW,MALE,EAKOT,mBAAOC,KAAP,CAAaG,eALpB,qBAAtB,C,CAQA;;AACA,IAAMM,YAAY,wEACfb,KAAK,CAACC,UAAN,CAAiBC,OADF,EACY,SADZ,mDAEfF,KAAK,CAACC,UAAN,CAAiBK,OAFF,EAEY,SAFZ,mDAGfN,KAAK,CAACC,UAAN,CAAiBO,KAHF,EAGU,SAHV,mDAIfR,KAAK,CAACC,UAAN,CAAiBS,IAJF,EAIS,SAJT,mDAKfV,KAAK,CAACC,UAAN,CAAiBW,MALF,EAKW,SALX,iBAAlB;AAQA,IAAME,iBAAiB,kFACpBd,KAAK,CAACC,UAAN,CAAiBC,OADG,EACOC,mBAAOC,KAAP,CAAaW,aADpB,wDAEpBf,KAAK,CAACC,UAAN,CAAiBK,OAFG,EAEOH,mBAAOC,KAAP,CAAaY,cAFpB,wDAGpBhB,KAAK,CAACC,UAAN,CAAiBO,KAHG,EAGKL,mBAAOC,KAAP,CAAaK,eAHlB,wDAIpBT,KAAK,CAACC,UAAN,CAAiBW,MAJG,EAIMT,mBAAOC,KAAP,CAAaG,eAJnB,sBAAvB;AAOA,IAAMU,WAAW,OAAGC,qBAAH,
|
|
1
|
+
{"version":3,"sources":["../src/Toast.styles.js"],"names":["backgroundColors","types","toastKinds","SUCCESS","tokens","color","greenLighten50","WARNING","yellowLighten30","ERROR","orangeLighten40","INFO","cremeLighten5","LOCKED","borderColors","closeButtonColors","greenDarken20","yellowDarken40","fixedStyles","css","stylers","spacer","iconColors","green","yellowDarken10","orange","blue","CloseButtonStyled","Button","Close","kind","space","IconStyled","styled","div","fontSize","Content","Toast","isFixed","zIndex","shouldRender","border","radius","black","spaceLg","lineHeight","VISUALLY_HIDDEN","visuallyHidden"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport stylers from \"@paprika/stylers\";\nimport tokens from \"@paprika/tokens\";\nimport Button from \"@paprika/button\";\nimport { visuallyHidden } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nconst backgroundColors = {\n [types.toastKinds.SUCCESS]: tokens.color.greenLighten50,\n [types.toastKinds.WARNING]: tokens.color.yellowLighten30,\n [types.toastKinds.ERROR]: tokens.color.orangeLighten40,\n [types.toastKinds.INFO]: tokens.color.cremeLighten5,\n [types.toastKinds.LOCKED]: tokens.color.yellowLighten30,\n};\n\n// Calculated by brightness.\nconst borderColors = {\n [types.toastKinds.SUCCESS]: \"#c5e2d3\",\n [types.toastKinds.WARNING]: \"#f2deaf\",\n [types.toastKinds.ERROR]: \"#f2c2b8\",\n [types.toastKinds.INFO]: \"#dbd8d0\",\n [types.toastKinds.LOCKED]: \"#f2deaf\",\n};\n\nconst closeButtonColors = {\n [types.toastKinds.SUCCESS]: tokens.color.greenDarken20,\n [types.toastKinds.WARNING]: tokens.color.yellowDarken40,\n [types.toastKinds.ERROR]: tokens.color.orangeLighten40,\n [types.toastKinds.LOCKED]: tokens.color.yellowLighten30,\n};\n\nconst fixedStyles = css`\n inset-inline-start: 50%;\n max-width: 675px;\n position: fixed;\n top: ${stylers.spacer(2)};\n transform: translateX(-50%);\n width: calc(100% - ${stylers.spacer(4)});\n`;\n\nconst iconColors = {\n [types.toastKinds.SUCCESS]: tokens.color.green,\n [types.toastKinds.WARNING]: tokens.color.yellowDarken10,\n [types.toastKinds.ERROR]: tokens.color.orange,\n [types.toastKinds.INFO]: tokens.color.blue,\n [types.toastKinds.LOCKED]: tokens.color.yellowDarken10,\n};\n\nexport const CloseButtonStyled = styled(Button.Close)(\n ({ kind }) => css`\n flex-grow: 0;\n flex-shrink: 0;\n margin-block-end: -6px;\n margin-block-start: -6px;\n margin-inline-end: -7px;\n margin-inline-start: ${tokens.space};\n min-height: 0;\n\n ${closeButtonColors[kind] && `color: ${closeButtonColors[kind]};`}\n `\n);\n\nexport const IconStyled = styled.div(\n ({ kind }) => css`\n color: ${iconColors[kind]};\n flex-grow: 0;\n flex-shrink: 0;\n margin-block-end: 0;\n margin-block-start: 1px;\n margin-inline-end: ${tokens.space};\n margin-inline-start: 0;\n\n ${stylers.fontSize(2)}\n `\n);\n\nexport const Content = styled.div`\n flex-grow: 1;\n flex-shrink: 1;\n`;\n\nexport const Toast = styled.div(\n ({ isFixed, kind, zIndex, shouldRender }) => css`\n align-items: flex-start;\n background-color: ${backgroundColors[kind]};\n border-color: ${borderColors[kind]};\n border-radius: ${tokens.border.radius};\n border-style: solid;\n border-width: 1px;\n color: ${tokens.color.black};\n display: flex;\n font-weight: normal;\n margin-block-end: ${stylers.spacer(2)};\n min-height: ${stylers.spacer(3)};\n padding-block-end: 10px;\n padding-block-start: ${tokens.spaceLg};\n padding-inline-end: ${tokens.spaceLg};\n padding-inline-start: ${tokens.spaceLg};\n position: relative;\n text-align: start;\n transition: opacity 0.3s ease-out;\n word-break: break-word;\n z-index: ${zIndex};\n\n ${stylers.fontSize()} \n ${stylers.lineHeight()} \n ${isFixed ? fixedStyles : null}\n ${!shouldRender || kind === types.toastKinds.VISUALLY_HIDDEN ? visuallyHidden : null};\n `\n);\n"],"file":"Toast.styles.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/toast",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.3-next.0",
|
|
4
4
|
"description": "Toast component is a controlled or uncontrolled component that provides a easy way to commmunicate to users regarding success, warning, info, and error messages.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
|
-
"@paprika/button": "^1.1.
|
|
19
|
+
"@paprika/button": "^1.1.20-next.0",
|
|
20
20
|
"@paprika/constants": "^1.0.1",
|
|
21
21
|
"@paprika/helpers": "^2.4.2",
|
|
22
|
-
"@paprika/icon": "^3.0.2
|
|
23
|
-
"@paprika/stylers": "^1.1.
|
|
24
|
-
"@paprika/tokens": "^3.1.0
|
|
22
|
+
"@paprika/icon": "^3.0.2",
|
|
23
|
+
"@paprika/stylers": "^1.1.12-next.0",
|
|
24
|
+
"@paprika/tokens": "^3.1.0",
|
|
25
25
|
"prop-types": "^15.7.2"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|