@propellerads/cookie-message 2.4.0 → 3.0.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/README.md +5 -3
- package/dist/cookie-message.cjs.development.js +17 -85
- package/dist/cookie-message.cjs.development.js.map +1 -1
- package/dist/cookie-message.cjs.production.min.js +1 -1
- package/dist/cookie-message.cjs.production.min.js.map +1 -1
- package/dist/cookie-message.esm.js +17 -85
- package/dist/cookie-message.esm.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/style.d.ts +1 -1
- package/dist/types.d.ts +3 -3
- package/package.json +11 -15
- package/src/index.tsx +3 -14
- package/src/style.tsx +16 -23
- package/src/types.tsx +7 -7
- package/CHANGELOG.md +0 -23
package/README.md
CHANGED
|
@@ -7,8 +7,10 @@
|
|
|
7
7
|
[Github](https://github.com/propellerads/ui-components/tree/master/Components/CookieMessage)
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
|
-
|
|
10
|
+
|
|
11
|
+
- `yarn add @propellerads/cookie-message` or `npm install @propellerads/cookie-message -S`
|
|
11
12
|
|
|
12
13
|
### How to use
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
- `import CookieMessage from '@propellerads/cookie-message';`
|
|
16
|
+
- And render `<CookieMessage title="My Cookie Title">Your text</CookieMessage>`
|
|
@@ -12,110 +12,42 @@ var styled = require('styled-components');
|
|
|
12
12
|
var styled__default = _interopDefault(styled);
|
|
13
13
|
var stylevariables = require('@propellerads/stylevariables');
|
|
14
14
|
|
|
15
|
-
function _taggedTemplateLiteralLoose(
|
|
16
|
-
|
|
17
|
-
raw = strings.slice(0);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
strings.raw = raw;
|
|
21
|
-
return strings;
|
|
15
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
16
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
22
17
|
}
|
|
23
18
|
|
|
24
19
|
var POSITION;
|
|
25
|
-
|
|
26
20
|
(function (POSITION) {
|
|
27
21
|
POSITION["LEFT_BOTTOM"] = "left_bottom";
|
|
28
22
|
POSITION["RIGHT_BOTTOM"] = "right_bottom";
|
|
29
23
|
})(POSITION || (POSITION = {}));
|
|
30
24
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
_templateObject6 = function _templateObject6() {
|
|
35
|
-
return data;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return data;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function _templateObject5() {
|
|
42
|
-
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
43
|
-
|
|
44
|
-
_templateObject5 = function _templateObject5() {
|
|
45
|
-
return data;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
return data;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function _templateObject4() {
|
|
52
|
-
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
53
|
-
|
|
54
|
-
_templateObject4 = function _templateObject4() {
|
|
55
|
-
return data;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
return data;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function _templateObject3() {
|
|
62
|
-
var data = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "]);
|
|
63
|
-
|
|
64
|
-
_templateObject3 = function _templateObject3() {
|
|
65
|
-
return data;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
return data;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function _templateObject2() {
|
|
72
|
-
var data = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "]);
|
|
73
|
-
|
|
74
|
-
_templateObject2 = function _templateObject2() {
|
|
75
|
-
return data;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
return data;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function _templateObject() {
|
|
82
|
-
var data = _taggedTemplateLiteralLoose(["\n width: 320px;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: ", ";\n position: fixed;\n z-index: 99999;\n bottom: ", "px;\n padding: ", "px;\n\n ", ";\n\n ", ";\n"]);
|
|
83
|
-
|
|
84
|
-
_templateObject = function _templateObject() {
|
|
85
|
-
return data;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
return data;
|
|
89
|
-
}
|
|
90
|
-
var StyledCookieCard = /*#__PURE__*/styled__default.div( /*#__PURE__*/_templateObject(), stylevariables.borderRadius, stylevariables.white, stylevariables.baseShadow, stylevariables.spacing * 5, stylevariables.spacing * 5, function (props) {
|
|
91
|
-
return props.position === POSITION.RIGHT_BOTTOM && styled.css(_templateObject2(), stylevariables.spacing * 5);
|
|
25
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
26
|
+
var StyledCookieCard = /*#__PURE__*/styled__default.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 320px;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: ", ";\n position: fixed;\n z-index: 99999;\n bottom: ", "px;\n padding: ", "px;\n\n ", ";\n\n ", ";\n"])), stylevariables.borderRadius, stylevariables.white, stylevariables.baseShadow, stylevariables.spacing * 5, stylevariables.spacing * 5, function (props) {
|
|
27
|
+
return props.position === POSITION.RIGHT_BOTTOM && styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "])), stylevariables.spacing * 5);
|
|
92
28
|
}, function (props) {
|
|
93
|
-
return props.position === POSITION.LEFT_BOTTOM && styled.css(_templateObject3(), stylevariables.spacing * 5);
|
|
29
|
+
return props.position === POSITION.LEFT_BOTTOM && styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "])), stylevariables.spacing * 5);
|
|
94
30
|
});
|
|
95
|
-
var CookieInfo = /*#__PURE__*/styled__default.div( /*#__PURE__*/
|
|
96
|
-
var CookieTitle = /*#__PURE__*/styled__default.div( /*#__PURE__*/
|
|
97
|
-
var CookieAction = /*#__PURE__*/styled__default.div( /*#__PURE__*/
|
|
31
|
+
var CookieInfo = /*#__PURE__*/styled__default.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), stylevariables.spacing * 3);
|
|
32
|
+
var CookieTitle = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), stylevariables.spacing * 3);
|
|
33
|
+
var CookieAction = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
98
34
|
|
|
99
35
|
var DEFAULT_COOKIE_KEY = 'accept_cookie_policy';
|
|
100
|
-
|
|
101
36
|
var CookieMessage = function CookieMessage(_ref) {
|
|
102
37
|
var _ref$title = _ref.title,
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
38
|
+
title = _ref$title === void 0 ? 'Cookies' : _ref$title,
|
|
39
|
+
children = _ref.children,
|
|
40
|
+
_ref$position = _ref.position,
|
|
41
|
+
position = _ref$position === void 0 ? POSITION.LEFT_BOTTOM : _ref$position,
|
|
42
|
+
_ref$cookieKey = _ref.cookieKey,
|
|
43
|
+
cookieKey = _ref$cookieKey === void 0 ? DEFAULT_COOKIE_KEY : _ref$cookieKey;
|
|
110
44
|
var _useState = React.useState(!window.localStorage.getItem(cookieKey)),
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
45
|
+
isShow = _useState[0],
|
|
46
|
+
setShow = _useState[1];
|
|
114
47
|
var handleClick = function handleClick() {
|
|
115
48
|
window.localStorage.setItem(cookieKey, 'true');
|
|
116
49
|
setShow(false);
|
|
117
50
|
};
|
|
118
|
-
|
|
119
51
|
return isShow ? React__default.createElement(StyledCookieCard, {
|
|
120
52
|
position: position
|
|
121
53
|
}, React__default.createElement(CookieTitle, null, React__default.createElement("b", null, title)), React__default.createElement(CookieInfo, null, children), React__default.createElement(CookieAction, null, React__default.createElement(Button__default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cookie-message.cjs.development.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport enum POSITION {\n
|
|
1
|
+
{"version":3,"file":"cookie-message.cjs.development.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\n\nexport enum POSITION {\n LEFT_BOTTOM = 'left_bottom',\n RIGHT_BOTTOM = 'right_bottom',\n}\n\nexport interface CookieMessageProps {\n children: ReactNode;\n title?: ReactNode;\n cookieKey?: string;\n position?: POSITION;\n}\n\nexport class CookieMessage extends React.Component<CookieMessageProps> {}\n","import styled, {css} from 'styled-components';\nimport {white, borderRadius, baseShadow, spacing} from '@propellerads/stylevariables';\nimport {POSITION} from './types';\n\ninterface StyledCookieCardProps {\n position: POSITION;\n}\n\nconst StyledCookieCard = styled.div`\n width: 320px;\n border-radius: ${borderRadius}px;\n background-color: ${white};\n box-shadow: ${baseShadow};\n position: fixed;\n z-index: 99999;\n bottom: ${spacing * 5}px;\n padding: ${spacing * 5}px;\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.RIGHT_BOTTOM &&\n css`\n right: ${spacing * 5}px;\n `};\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.LEFT_BOTTOM &&\n css`\n left: ${spacing * 5}px;\n `};\n`;\n\nconst CookieInfo = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\nconst CookieTitle = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\n\nconst CookieAction = styled.div``;\n\nexport {StyledCookieCard, CookieInfo, CookieTitle, CookieAction};\n","import React, {useState} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {CookieMessageProps, POSITION} from './types';\nimport {StyledCookieCard, CookieAction, CookieInfo, CookieTitle} from './style';\n\nconst DEFAULT_COOKIE_KEY = 'accept_cookie_policy';\n\nconst CookieMessage = ({\n title = 'Cookies',\n children,\n position = POSITION.LEFT_BOTTOM,\n cookieKey = DEFAULT_COOKIE_KEY,\n}: CookieMessageProps) => {\n const [isShow, setShow] = useState<boolean>(!window.localStorage.getItem(cookieKey));\n\n const handleClick = () => {\n window.localStorage.setItem(cookieKey, 'true');\n setShow(false);\n };\n\n return isShow ? (\n <StyledCookieCard position={position}>\n <CookieTitle>\n <b>{title}</b>\n </CookieTitle>\n\n <CookieInfo>{children}</CookieInfo>\n\n <CookieAction>\n <Button elementId=\"cookie-consent\" type={BUTTON_TYPE.PRIMARY} onClick={handleClick}>\n Got it\n </Button>\n </CookieAction>\n </StyledCookieCard>\n ) : null;\n};\n\nexport {CookieMessage};\n"],"names":["POSITION","StyledCookieCard","styled","div","_templateObject","_taggedTemplateLiteralLoose","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","_templateObject2","LEFT_BOTTOM","_templateObject3","CookieInfo","_templateObject4","CookieTitle","_templateObject5","CookieAction","_templateObject6","DEFAULT_COOKIE_KEY","CookieMessage","_ref","title","_ref$title","children","_ref$position","_ref$cookieKey","cookieKey","_useState","useState","window","localStorage","getItem","isShow","setShow","handleClick","setItem","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,IAAYA,QAGX;AAHD,WAAYA,QAAQ;EAClBA,uCAA2B;EAC3BA,yCAA6B;AAC/B,CAAC,EAHWA,QAAQ,KAARA,QAAQ;;;ACFpB,AAQA,IAAMC,gBAAgB,gBAAGC,eAAM,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,gBAAAC,2BAAA,0MAEhBC,2BAAY,EACTC,oBAAK,EACXC,yBAAU,EAGdC,sBAAO,GAAG,CAAC,EACVA,sBAAO,GAAG,CAAC,EAEpB,UAACC,KAA4B;EAAA,OAC7BA,KAAK,CAACC,QAAQ,KAAKX,QAAQ,CAACY,YAAY,IACxCC,UAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA,qCACQI,sBAAO,GAAG,CAAC,CACrB;AAAA,GAED,UAACC,KAA4B;EAAA,OAC7BA,KAAK,CAACC,QAAQ,KAAKX,QAAQ,CAACe,WAAW,IACvCF,UAAG,CAAAG,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA,oCACOI,sBAAO,GAAG,CAAC,CACpB;AAAA,EACJ;AAED,IAAMQ,UAAU,gBAAGf,eAAM,CAACC,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,gBAAAb,2BAAA,qCACVI,sBAAO,GAAG,CAAC,CAC7B;AACD,IAAMU,WAAW,gBAAGjB,eAAM,CAACC,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,gBAAAf,2BAAA,qCACXI,sBAAO,GAAG,CAAC,CAC7B;AAED,IAAMY,YAAY,gBAAGnB,eAAM,CAACC,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,gBAAAjB,2BAAA,QAAE;;AChCjC,IAAMkB,kBAAkB,GAAG,sBAAsB;AAEjD,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA;wBACjBC,KAAK;IAALA,KAAK,GAAAC,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,aAAA,GAAAJ,IAAA,CACRd,QAAQ;IAARA,QAAQ,GAAAkB,aAAA,cAAG7B,QAAQ,CAACe,WAAW,GAAAc,aAAA;IAAAC,cAAA,GAAAL,IAAA,CAC/BM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAGP,kBAAkB,GAAAO,cAAA;EAE9B,IAAAE,SAAA,GAA0BC,cAAQ,CAAU,CAACC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACL,SAAS,CAAC,CAAC;IAA7EM,MAAM,GAAAL,SAAA;IAAEM,OAAO,GAAAN,SAAA;EAEtB,IAAMO,WAAW,GAAG,SAAdA,WAAWA;IACfL,MAAM,CAACC,YAAY,CAACK,OAAO,CAACT,SAAS,EAAE,MAAM,CAAC;IAC9CO,OAAO,CAAC,KAAK,CAAC;GACf;EAED,OAAOD,MAAM,GACXI,6BAACxC,gBAAgB;IAACU,QAAQ,EAAEA;KAC1B8B,6BAACtB,WAAW,QACVsB,wCAAIf,KAAK,CAAK,CACF,EAEde,6BAACxB,UAAU,QAAEW,QAAQ,CAAc,EAEnCa,6BAACpB,YAAY,QACXoB,6BAACC,eAAM;IAACC,SAAS,EAAC,gBAAgB;IAACC,IAAI,EAAEC,kBAAW,CAACC,OAAO;IAAEC,OAAO,EAAER;cAE9D,CACI,CACE,GACjB,IAAI;AACV,CAAC;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,o,i,r,a,c,l=require("react"),s=e(l),p=require("@propellerads/button"),u=e(p),d=require("styled-components"),T=e(d),m=require("@propellerads/stylevariables");function g(e,n){return n||(n=e.slice(0)),e.raw=n,e}!function(e){e.LEFT_BOTTOM="left_bottom",e.RIGHT_BOTTOM="right_bottom"}(n||(n={}));var b=T.div(t||(t=g(["\n width: 320px;\n border-radius: ","px;\n background-color: ",";\n box-shadow: ",";\n position: fixed;\n z-index: 99999;\n bottom: ","px;\n padding: ","px;\n\n ",";\n\n ",";\n"])),m.borderRadius,m.white,m.baseShadow,5*m.spacing,5*m.spacing,(function(e){return e.position===n.RIGHT_BOTTOM&&d.css(o||(o=g(["\n right: ","px;\n "])),5*m.spacing)}),(function(e){return e.position===n.LEFT_BOTTOM&&d.css(i||(i=g(["\n left: ","px;\n "])),5*m.spacing)})),f=T.div(r||(r=g(["\n margin-bottom: ","px;\n"])),3*m.spacing),x=T.div(a||(a=g(["\n margin-bottom: ","px;\n"])),3*m.spacing),v=T.div(c||(c=g([""])));exports.CookieMessage=function(e){var t=e.title,o=void 0===t?"Cookies":t,i=e.children,r=e.position,a=void 0===r?n.LEFT_BOTTOM:r,c=e.cookieKey,d=void 0===c?"accept_cookie_policy":c,T=l.useState(!window.localStorage.getItem(d)),m=T[1];return T[0]?s.createElement(b,{position:a},s.createElement(x,null,s.createElement("b",null,o)),s.createElement(f,null,i),s.createElement(v,null,s.createElement(u,{elementId:"cookie-consent",type:p.BUTTON_TYPE.PRIMARY,onClick:function(){window.localStorage.setItem(d,"true"),m(!1)}},"Got it"))):null};
|
|
2
2
|
//# sourceMappingURL=cookie-message.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cookie-message.cjs.production.min.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport enum POSITION {\n
|
|
1
|
+
{"version":3,"file":"cookie-message.cjs.production.min.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\n\nexport enum POSITION {\n LEFT_BOTTOM = 'left_bottom',\n RIGHT_BOTTOM = 'right_bottom',\n}\n\nexport interface CookieMessageProps {\n children: ReactNode;\n title?: ReactNode;\n cookieKey?: string;\n position?: POSITION;\n}\n\nexport class CookieMessage extends React.Component<CookieMessageProps> {}\n","import styled, {css} from 'styled-components';\nimport {white, borderRadius, baseShadow, spacing} from '@propellerads/stylevariables';\nimport {POSITION} from './types';\n\ninterface StyledCookieCardProps {\n position: POSITION;\n}\n\nconst StyledCookieCard = styled.div`\n width: 320px;\n border-radius: ${borderRadius}px;\n background-color: ${white};\n box-shadow: ${baseShadow};\n position: fixed;\n z-index: 99999;\n bottom: ${spacing * 5}px;\n padding: ${spacing * 5}px;\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.RIGHT_BOTTOM &&\n css`\n right: ${spacing * 5}px;\n `};\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.LEFT_BOTTOM &&\n css`\n left: ${spacing * 5}px;\n `};\n`;\n\nconst CookieInfo = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\nconst CookieTitle = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\n\nconst CookieAction = styled.div``;\n\nexport {StyledCookieCard, CookieInfo, CookieTitle, CookieAction};\n","import React, {useState} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {CookieMessageProps, POSITION} from './types';\nimport {StyledCookieCard, CookieAction, CookieInfo, CookieTitle} from './style';\n\nconst DEFAULT_COOKIE_KEY = 'accept_cookie_policy';\n\nconst CookieMessage = ({\n title = 'Cookies',\n children,\n position = POSITION.LEFT_BOTTOM,\n cookieKey = DEFAULT_COOKIE_KEY,\n}: CookieMessageProps) => {\n const [isShow, setShow] = useState<boolean>(!window.localStorage.getItem(cookieKey));\n\n const handleClick = () => {\n window.localStorage.setItem(cookieKey, 'true');\n setShow(false);\n };\n\n return isShow ? (\n <StyledCookieCard position={position}>\n <CookieTitle>\n <b>{title}</b>\n </CookieTitle>\n\n <CookieInfo>{children}</CookieInfo>\n\n <CookieAction>\n <Button elementId=\"cookie-consent\" type={BUTTON_TYPE.PRIMARY} onClick={handleClick}>\n Got it\n </Button>\n </CookieAction>\n </StyledCookieCard>\n ) : null;\n};\n\nexport {CookieMessage};\n"],"names":["POSITION","StyledCookieCard","styled","div","_templateObject","_taggedTemplateLiteralLoose","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","_templateObject2","LEFT_BOTTOM","_templateObject3","CookieInfo","_templateObject4","CookieTitle","_templateObject5","CookieAction","_templateObject6","_ref","title","_ref$title","children","_ref$position","_ref$cookieKey","cookieKey","_useState","useState","window","localStorage","getItem","setShow","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick","setItem"],"mappings":"8IAEYA,qNAAZ,SAAYA,GACVA,4BACAA,8BAFF,CAAYA,IAAAA,OCFZ,IAQMC,EAAmBC,EAAOC,IAAGC,IAAAA,EAAAC,mMAEhBC,eACGC,QACNC,aAGM,EAAVC,UACW,EAAVA,WAET,SAACC,GAA4B,OAC7BA,EAAMC,WAAaX,EAASY,cAC5BC,MAAGC,IAAAA,EAAAT,oCACkB,EAAVI,cAGX,SAACC,GAA4B,OAC7BA,EAAMC,WAAaX,EAASe,aAC5BF,MAAGG,IAAAA,EAAAX,mCACiB,EAAVI,cAIRQ,EAAaf,EAAOC,IAAGe,IAAAA,EAAAb,oCACA,EAAVI,WAEbU,EAAcjB,EAAOC,IAAGiB,IAAAA,EAAAf,oCACD,EAAVI,WAGbY,EAAenB,EAAOC,IAAGmB,IAAAA,EAAAjB,gCC9BT,SAAHkB,WACjBC,MAAAA,WAAKC,EAAG,UAASA,EACjBC,EAAQH,EAARG,SAAQC,EAAAJ,EACRZ,SAAAA,WAAQgB,EAAG3B,EAASe,YAAWY,EAAAC,EAAAL,EAC/BM,UAAAA,WAASD,EANgB,uBAMKA,EAE9BE,EAA0BC,YAAmBC,OAAOC,aAAaC,QAAQL,IAA1DM,EAAOL,KAOtB,OAPaA,KAQXM,gBAACnC,GAAiBU,SAAUA,GAC1ByB,gBAACjB,OACCiB,yBAAIZ,IAGNY,gBAACnB,OAAYS,GAEbU,gBAACf,OACCe,gBAACC,GAAOC,UAAU,iBAAiBC,KAAMC,cAAYC,QAASC,QAdhD,WAClBV,OAAOC,aAAaU,QAAQd,EAAW,QACvCM,GAAQ,iBAiBN"}
|
|
@@ -3,110 +3,42 @@ import Button, { BUTTON_TYPE } from '@propellerads/button';
|
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { borderRadius, white, baseShadow, spacing } from '@propellerads/stylevariables';
|
|
5
5
|
|
|
6
|
-
function _taggedTemplateLiteralLoose(
|
|
7
|
-
|
|
8
|
-
raw = strings.slice(0);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
strings.raw = raw;
|
|
12
|
-
return strings;
|
|
6
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
7
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
13
8
|
}
|
|
14
9
|
|
|
15
10
|
var POSITION;
|
|
16
|
-
|
|
17
11
|
(function (POSITION) {
|
|
18
12
|
POSITION["LEFT_BOTTOM"] = "left_bottom";
|
|
19
13
|
POSITION["RIGHT_BOTTOM"] = "right_bottom";
|
|
20
14
|
})(POSITION || (POSITION = {}));
|
|
21
15
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
_templateObject6 = function _templateObject6() {
|
|
26
|
-
return data;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return data;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
function _templateObject5() {
|
|
33
|
-
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
34
|
-
|
|
35
|
-
_templateObject5 = function _templateObject5() {
|
|
36
|
-
return data;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
function _templateObject4() {
|
|
43
|
-
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
44
|
-
|
|
45
|
-
_templateObject4 = function _templateObject4() {
|
|
46
|
-
return data;
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
return data;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function _templateObject3() {
|
|
53
|
-
var data = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "]);
|
|
54
|
-
|
|
55
|
-
_templateObject3 = function _templateObject3() {
|
|
56
|
-
return data;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
return data;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
function _templateObject2() {
|
|
63
|
-
var data = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "]);
|
|
64
|
-
|
|
65
|
-
_templateObject2 = function _templateObject2() {
|
|
66
|
-
return data;
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
return data;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function _templateObject() {
|
|
73
|
-
var data = _taggedTemplateLiteralLoose(["\n width: 320px;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: ", ";\n position: fixed;\n z-index: 99999;\n bottom: ", "px;\n padding: ", "px;\n\n ", ";\n\n ", ";\n"]);
|
|
74
|
-
|
|
75
|
-
_templateObject = function _templateObject() {
|
|
76
|
-
return data;
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
return data;
|
|
80
|
-
}
|
|
81
|
-
var StyledCookieCard = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject(), borderRadius, white, baseShadow, spacing * 5, spacing * 5, function (props) {
|
|
82
|
-
return props.position === POSITION.RIGHT_BOTTOM && css(_templateObject2(), spacing * 5);
|
|
16
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
17
|
+
var StyledCookieCard = /*#__PURE__*/styled.div(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 320px;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: ", ";\n position: fixed;\n z-index: 99999;\n bottom: ", "px;\n padding: ", "px;\n\n ", ";\n\n ", ";\n"])), borderRadius, white, baseShadow, spacing * 5, spacing * 5, function (props) {
|
|
18
|
+
return props.position === POSITION.RIGHT_BOTTOM && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "])), spacing * 5);
|
|
83
19
|
}, function (props) {
|
|
84
|
-
return props.position === POSITION.LEFT_BOTTOM && css(_templateObject3(), spacing * 5);
|
|
20
|
+
return props.position === POSITION.LEFT_BOTTOM && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "])), spacing * 5);
|
|
85
21
|
});
|
|
86
|
-
var CookieInfo = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
87
|
-
var CookieTitle = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
88
|
-
var CookieAction = /*#__PURE__*/styled.div( /*#__PURE__*/
|
|
22
|
+
var CookieInfo = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), spacing * 3);
|
|
23
|
+
var CookieTitle = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"])), spacing * 3);
|
|
24
|
+
var CookieAction = /*#__PURE__*/styled.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
|
|
89
25
|
|
|
90
26
|
var DEFAULT_COOKIE_KEY = 'accept_cookie_policy';
|
|
91
|
-
|
|
92
27
|
var CookieMessage = function CookieMessage(_ref) {
|
|
93
28
|
var _ref$title = _ref.title,
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
29
|
+
title = _ref$title === void 0 ? 'Cookies' : _ref$title,
|
|
30
|
+
children = _ref.children,
|
|
31
|
+
_ref$position = _ref.position,
|
|
32
|
+
position = _ref$position === void 0 ? POSITION.LEFT_BOTTOM : _ref$position,
|
|
33
|
+
_ref$cookieKey = _ref.cookieKey,
|
|
34
|
+
cookieKey = _ref$cookieKey === void 0 ? DEFAULT_COOKIE_KEY : _ref$cookieKey;
|
|
101
35
|
var _useState = useState(!window.localStorage.getItem(cookieKey)),
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
36
|
+
isShow = _useState[0],
|
|
37
|
+
setShow = _useState[1];
|
|
105
38
|
var handleClick = function handleClick() {
|
|
106
39
|
window.localStorage.setItem(cookieKey, 'true');
|
|
107
40
|
setShow(false);
|
|
108
41
|
};
|
|
109
|
-
|
|
110
42
|
return isShow ? React.createElement(StyledCookieCard, {
|
|
111
43
|
position: position
|
|
112
44
|
}, React.createElement(CookieTitle, null, React.createElement("b", null, title)), React.createElement(CookieInfo, null, children), React.createElement(CookieAction, null, React.createElement(Button, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cookie-message.esm.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport enum POSITION {\n
|
|
1
|
+
{"version":3,"file":"cookie-message.esm.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React, {ReactNode} from 'react';\n\nexport enum POSITION {\n LEFT_BOTTOM = 'left_bottom',\n RIGHT_BOTTOM = 'right_bottom',\n}\n\nexport interface CookieMessageProps {\n children: ReactNode;\n title?: ReactNode;\n cookieKey?: string;\n position?: POSITION;\n}\n\nexport class CookieMessage extends React.Component<CookieMessageProps> {}\n","import styled, {css} from 'styled-components';\nimport {white, borderRadius, baseShadow, spacing} from '@propellerads/stylevariables';\nimport {POSITION} from './types';\n\ninterface StyledCookieCardProps {\n position: POSITION;\n}\n\nconst StyledCookieCard = styled.div`\n width: 320px;\n border-radius: ${borderRadius}px;\n background-color: ${white};\n box-shadow: ${baseShadow};\n position: fixed;\n z-index: 99999;\n bottom: ${spacing * 5}px;\n padding: ${spacing * 5}px;\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.RIGHT_BOTTOM &&\n css`\n right: ${spacing * 5}px;\n `};\n\n ${(props: StyledCookieCardProps) =>\n props.position === POSITION.LEFT_BOTTOM &&\n css`\n left: ${spacing * 5}px;\n `};\n`;\n\nconst CookieInfo = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\nconst CookieTitle = styled.div`\n margin-bottom: ${spacing * 3}px;\n`;\n\nconst CookieAction = styled.div``;\n\nexport {StyledCookieCard, CookieInfo, CookieTitle, CookieAction};\n","import React, {useState} from 'react';\nimport Button, {BUTTON_TYPE} from '@propellerads/button';\n\nimport {CookieMessageProps, POSITION} from './types';\nimport {StyledCookieCard, CookieAction, CookieInfo, CookieTitle} from './style';\n\nconst DEFAULT_COOKIE_KEY = 'accept_cookie_policy';\n\nconst CookieMessage = ({\n title = 'Cookies',\n children,\n position = POSITION.LEFT_BOTTOM,\n cookieKey = DEFAULT_COOKIE_KEY,\n}: CookieMessageProps) => {\n const [isShow, setShow] = useState<boolean>(!window.localStorage.getItem(cookieKey));\n\n const handleClick = () => {\n window.localStorage.setItem(cookieKey, 'true');\n setShow(false);\n };\n\n return isShow ? (\n <StyledCookieCard position={position}>\n <CookieTitle>\n <b>{title}</b>\n </CookieTitle>\n\n <CookieInfo>{children}</CookieInfo>\n\n <CookieAction>\n <Button elementId=\"cookie-consent\" type={BUTTON_TYPE.PRIMARY} onClick={handleClick}>\n Got it\n </Button>\n </CookieAction>\n </StyledCookieCard>\n ) : null;\n};\n\nexport {CookieMessage};\n"],"names":["POSITION","StyledCookieCard","styled","div","_templateObject","_taggedTemplateLiteralLoose","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","_templateObject2","LEFT_BOTTOM","_templateObject3","CookieInfo","_templateObject4","CookieTitle","_templateObject5","CookieAction","_templateObject6","DEFAULT_COOKIE_KEY","CookieMessage","_ref","title","_ref$title","children","_ref$position","_ref$cookieKey","cookieKey","_useState","useState","window","localStorage","getItem","isShow","setShow","handleClick","setItem","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick"],"mappings":";;;;;;;;;AAEA,IAAYA,QAGX;AAHD,WAAYA,QAAQ;EAClBA,uCAA2B;EAC3BA,yCAA6B;AAC/B,CAAC,EAHWA,QAAQ,KAARA,QAAQ;;;ACFpB,AAQA,IAAMC,gBAAgB,gBAAGC,MAAM,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,gBAAAC,2BAAA,0MAEhBC,YAAY,EACTC,KAAK,EACXC,UAAU,EAGdC,OAAO,GAAG,CAAC,EACVA,OAAO,GAAG,CAAC,EAEpB,UAACC,KAA4B;EAAA,OAC7BA,KAAK,CAACC,QAAQ,KAAKX,QAAQ,CAACY,YAAY,IACxCC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAT,2BAAA,qCACQI,OAAO,GAAG,CAAC,CACrB;AAAA,GAED,UAACC,KAA4B;EAAA,OAC7BA,KAAK,CAACC,QAAQ,KAAKX,QAAQ,CAACe,WAAW,IACvCF,GAAG,CAAAG,gBAAA,KAAAA,gBAAA,GAAAX,2BAAA,oCACOI,OAAO,GAAG,CAAC,CACpB;AAAA,EACJ;AAED,IAAMQ,UAAU,gBAAGf,MAAM,CAACC,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,gBAAAb,2BAAA,qCACVI,OAAO,GAAG,CAAC,CAC7B;AACD,IAAMU,WAAW,gBAAGjB,MAAM,CAACC,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,gBAAAf,2BAAA,qCACXI,OAAO,GAAG,CAAC,CAC7B;AAED,IAAMY,YAAY,gBAAGnB,MAAM,CAACC,GAAG,CAAAmB,gBAAA,KAAAA,gBAAA,gBAAAjB,2BAAA,QAAE;;AChCjC,IAAMkB,kBAAkB,GAAG,sBAAsB;AAEjD,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA;wBACjBC,KAAK;IAALA,KAAK,GAAAC,UAAA,cAAG,SAAS,GAAAA,UAAA;IACjBC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,aAAA,GAAAJ,IAAA,CACRd,QAAQ;IAARA,QAAQ,GAAAkB,aAAA,cAAG7B,QAAQ,CAACe,WAAW,GAAAc,aAAA;IAAAC,cAAA,GAAAL,IAAA,CAC/BM,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAGP,kBAAkB,GAAAO,cAAA;EAE9B,IAAAE,SAAA,GAA0BC,QAAQ,CAAU,CAACC,MAAM,CAACC,YAAY,CAACC,OAAO,CAACL,SAAS,CAAC,CAAC;IAA7EM,MAAM,GAAAL,SAAA;IAAEM,OAAO,GAAAN,SAAA;EAEtB,IAAMO,WAAW,GAAG,SAAdA,WAAWA;IACfL,MAAM,CAACC,YAAY,CAACK,OAAO,CAACT,SAAS,EAAE,MAAM,CAAC;IAC9CO,OAAO,CAAC,KAAK,CAAC;GACf;EAED,OAAOD,MAAM,GACXI,oBAACxC,gBAAgB;IAACU,QAAQ,EAAEA;KAC1B8B,oBAACtB,WAAW,QACVsB,+BAAIf,KAAK,CAAK,CACF,EAEde,oBAACxB,UAAU,QAAEW,QAAQ,CAAc,EAEnCa,oBAACpB,YAAY,QACXoB,oBAACC,MAAM;IAACC,SAAS,EAAC,gBAAgB;IAACC,IAAI,EAAEC,WAAW,CAACC,OAAO;IAAEC,OAAO,EAAER;cAE9D,CACI,CACE,GACjB,IAAI;AACV,CAAC;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { CookieMessageProps } from './types';
|
|
2
|
-
declare const CookieMessage: ({ title, children, position, cookieKey, }: CookieMessageProps) => JSX.Element | null;
|
|
3
|
+
declare const CookieMessage: ({ title, children, position, cookieKey, }: CookieMessageProps) => React.JSX.Element | null;
|
|
3
4
|
export { CookieMessage };
|
package/dist/style.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ declare const StyledCookieCard: import("styled-components").StyledComponent<"div
|
|
|
6
6
|
declare const CookieInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
7
|
declare const CookieTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
declare const CookieAction: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export { StyledCookieCard, CookieInfo, CookieTitle, CookieAction
|
|
9
|
+
export { StyledCookieCard, CookieInfo, CookieTitle, CookieAction };
|
package/dist/types.d.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
export declare enum POSITION {
|
|
3
3
|
LEFT_BOTTOM = "left_bottom",
|
|
4
4
|
RIGHT_BOTTOM = "right_bottom"
|
|
5
5
|
}
|
|
6
6
|
export interface CookieMessageProps {
|
|
7
|
-
children:
|
|
8
|
-
title?:
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
title?: ReactNode;
|
|
9
9
|
cookieKey?: string;
|
|
10
10
|
position?: POSITION;
|
|
11
11
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/cookie-message",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"repository": "https://github.com/propellerads/ui-components",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -15,27 +15,23 @@
|
|
|
15
15
|
"node": ">=10"
|
|
16
16
|
},
|
|
17
17
|
"scripts": {
|
|
18
|
-
"prepublishOnly": "tsdx build",
|
|
19
18
|
"start": "tsdx watch",
|
|
20
19
|
"build": "tsdx build"
|
|
21
20
|
},
|
|
22
21
|
"peerDependencies": {
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"@types/styled-components": "5.1.
|
|
26
|
-
"react": "^17.0.2",
|
|
27
|
-
"react-dom": "^17.0.2",
|
|
28
|
-
"styled-components": "5.1.1"
|
|
22
|
+
"react": ">=18 <19",
|
|
23
|
+
"styled-components": "5.1.1",
|
|
24
|
+
"@types/styled-components": "5.1.34"
|
|
29
25
|
},
|
|
30
26
|
"module": "dist/cookie-message.esm.js",
|
|
31
27
|
"devDependencies": {
|
|
32
|
-
"tsdx": "
|
|
33
|
-
"tslib": "
|
|
34
|
-
"typescript": "
|
|
28
|
+
"tsdx": "0.13.3",
|
|
29
|
+
"tslib": "2.0.1",
|
|
30
|
+
"typescript": "4.9.5",
|
|
31
|
+
"@types/react": "18.3.24"
|
|
35
32
|
},
|
|
36
33
|
"dependencies": {
|
|
37
|
-
"@propellerads/button": "^
|
|
38
|
-
"@propellerads/stylevariables": "^
|
|
39
|
-
}
|
|
40
|
-
"gitHead": "82824622b4ac991d78567c473a46b5044cd72035"
|
|
34
|
+
"@propellerads/button": "^8.0.1",
|
|
35
|
+
"@propellerads/stylevariables": "^2.0.1"
|
|
36
|
+
}
|
|
41
37
|
}
|
package/src/index.tsx
CHANGED
|
@@ -2,12 +2,7 @@ import React, {useState} from 'react';
|
|
|
2
2
|
import Button, {BUTTON_TYPE} from '@propellerads/button';
|
|
3
3
|
|
|
4
4
|
import {CookieMessageProps, POSITION} from './types';
|
|
5
|
-
import {
|
|
6
|
-
StyledCookieCard,
|
|
7
|
-
CookieAction,
|
|
8
|
-
CookieInfo,
|
|
9
|
-
CookieTitle,
|
|
10
|
-
} from './style';
|
|
5
|
+
import {StyledCookieCard, CookieAction, CookieInfo, CookieTitle} from './style';
|
|
11
6
|
|
|
12
7
|
const DEFAULT_COOKIE_KEY = 'accept_cookie_policy';
|
|
13
8
|
|
|
@@ -30,16 +25,10 @@ const CookieMessage = ({
|
|
|
30
25
|
<b>{title}</b>
|
|
31
26
|
</CookieTitle>
|
|
32
27
|
|
|
33
|
-
<CookieInfo>
|
|
34
|
-
{children}
|
|
35
|
-
</CookieInfo>
|
|
28
|
+
<CookieInfo>{children}</CookieInfo>
|
|
36
29
|
|
|
37
30
|
<CookieAction>
|
|
38
|
-
<Button
|
|
39
|
-
elementId="cookie-consent"
|
|
40
|
-
type={BUTTON_TYPE.PRIMARY}
|
|
41
|
-
onClick={handleClick}
|
|
42
|
-
>
|
|
31
|
+
<Button elementId="cookie-consent" type={BUTTON_TYPE.PRIMARY} onClick={handleClick}>
|
|
43
32
|
Got it
|
|
44
33
|
</Button>
|
|
45
34
|
</CookieAction>
|
package/src/style.tsx
CHANGED
|
@@ -1,14 +1,9 @@
|
|
|
1
1
|
import styled, {css} from 'styled-components';
|
|
2
|
-
import {
|
|
3
|
-
white,
|
|
4
|
-
borderRadius,
|
|
5
|
-
baseShadow,
|
|
6
|
-
spacing,
|
|
7
|
-
} from '@propellerads/stylevariables';
|
|
2
|
+
import {white, borderRadius, baseShadow, spacing} from '@propellerads/stylevariables';
|
|
8
3
|
import {POSITION} from './types';
|
|
9
4
|
|
|
10
5
|
interface StyledCookieCardProps {
|
|
11
|
-
|
|
6
|
+
position: POSITION;
|
|
12
7
|
}
|
|
13
8
|
|
|
14
9
|
const StyledCookieCard = styled.div`
|
|
@@ -21,28 +16,26 @@ const StyledCookieCard = styled.div`
|
|
|
21
16
|
bottom: ${spacing * 5}px;
|
|
22
17
|
padding: ${spacing * 5}px;
|
|
23
18
|
|
|
24
|
-
${(props: StyledCookieCardProps) =>
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
${(props: StyledCookieCardProps) =>
|
|
20
|
+
props.position === POSITION.RIGHT_BOTTOM &&
|
|
21
|
+
css`
|
|
22
|
+
right: ${spacing * 5}px;
|
|
23
|
+
`};
|
|
27
24
|
|
|
28
|
-
${(props: StyledCookieCardProps) =>
|
|
29
|
-
|
|
30
|
-
|
|
25
|
+
${(props: StyledCookieCardProps) =>
|
|
26
|
+
props.position === POSITION.LEFT_BOTTOM &&
|
|
27
|
+
css`
|
|
28
|
+
left: ${spacing * 5}px;
|
|
29
|
+
`};
|
|
31
30
|
`;
|
|
32
31
|
|
|
33
32
|
const CookieInfo = styled.div`
|
|
34
|
-
|
|
33
|
+
margin-bottom: ${spacing * 3}px;
|
|
35
34
|
`;
|
|
36
35
|
const CookieTitle = styled.div`
|
|
37
|
-
|
|
36
|
+
margin-bottom: ${spacing * 3}px;
|
|
38
37
|
`;
|
|
39
38
|
|
|
40
|
-
const CookieAction = styled.div
|
|
41
|
-
`;
|
|
39
|
+
const CookieAction = styled.div``;
|
|
42
40
|
|
|
43
|
-
export {
|
|
44
|
-
StyledCookieCard,
|
|
45
|
-
CookieInfo,
|
|
46
|
-
CookieTitle,
|
|
47
|
-
CookieAction,
|
|
48
|
-
};
|
|
41
|
+
export {StyledCookieCard, CookieInfo, CookieTitle, CookieAction};
|
package/src/types.tsx
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, {ReactNode} from 'react';
|
|
2
2
|
|
|
3
3
|
export enum POSITION {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
LEFT_BOTTOM = 'left_bottom',
|
|
5
|
+
RIGHT_BOTTOM = 'right_bottom',
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
export interface CookieMessageProps {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
title?: ReactNode;
|
|
11
|
+
cookieKey?: string;
|
|
12
|
+
position?: POSITION;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
export class CookieMessage extends React.Component<CookieMessageProps> {}
|
package/CHANGELOG.md
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
### `2.4.0`
|
|
2
|
-
* updated peerDependencies
|
|
3
|
-
|
|
4
|
-
### `2.3.0`
|
|
5
|
-
* update style-variables, button
|
|
6
|
-
|
|
7
|
-
### `2.2.0`
|
|
8
|
-
* update style-variables, button
|
|
9
|
-
* apply new border-radius 8px
|
|
10
|
-
|
|
11
|
-
### `2.1.0`
|
|
12
|
-
|
|
13
|
-
* Added prop `position` with enum. Cookie Message can be positioned on the right bottom of the screen
|
|
14
|
-
|
|
15
|
-
### `2.0.2`
|
|
16
|
-
|
|
17
|
-
* Update dependencies
|
|
18
|
-
|
|
19
|
-
#### `2.0.0`
|
|
20
|
-
|
|
21
|
-
* TS
|
|
22
|
-
* Production build
|
|
23
|
-
* Added optional prop for cookie key
|