@propellerads/cookie-message 2.3.0 → 3.0.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 +23 -13
- package/README.md +5 -3
- package/dist/cookie-message.cjs.development.js +5 -5
- 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 +5 -5
- 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 +8 -11
- package/src/index.tsx +27 -38
- package/src/style.tsx +16 -23
- package/src/types.tsx +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
* update style-variables, button
|
|
1
|
+
## `3.0.0`
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
* update style-variables, button
|
|
6
|
-
* apply new border-radius 8px
|
|
3
|
+
- upgrade to React 18
|
|
7
4
|
|
|
8
|
-
|
|
5
|
+
## `2.4.0`
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
- updated peerDependencies
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
## `2.3.0`
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
- update style-variables, button
|
|
15
12
|
|
|
16
|
-
|
|
13
|
+
## `2.2.0`
|
|
17
14
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
- update style-variables, button
|
|
16
|
+
- apply new border-radius 8px
|
|
17
|
+
|
|
18
|
+
## `2.1.0`
|
|
19
|
+
|
|
20
|
+
- Added prop `position` with enum. Cookie Message can be positioned on the right bottom of the screen
|
|
21
|
+
|
|
22
|
+
## `2.0.2`
|
|
23
|
+
|
|
24
|
+
- Update dependencies
|
|
25
|
+
|
|
26
|
+
## `2.0.0`
|
|
27
|
+
|
|
28
|
+
- TS
|
|
29
|
+
- Production build
|
|
30
|
+
- Added optional prop for cookie key
|
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>`
|
|
@@ -29,7 +29,7 @@ var POSITION;
|
|
|
29
29
|
})(POSITION || (POSITION = {}));
|
|
30
30
|
|
|
31
31
|
function _templateObject6() {
|
|
32
|
-
var data = _taggedTemplateLiteralLoose(["
|
|
32
|
+
var data = _taggedTemplateLiteralLoose([""]);
|
|
33
33
|
|
|
34
34
|
_templateObject6 = function _templateObject6() {
|
|
35
35
|
return data;
|
|
@@ -39,7 +39,7 @@ function _templateObject6() {
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
function _templateObject5() {
|
|
42
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
42
|
+
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
43
43
|
|
|
44
44
|
_templateObject5 = function _templateObject5() {
|
|
45
45
|
return data;
|
|
@@ -49,7 +49,7 @@ function _templateObject5() {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
function _templateObject4() {
|
|
52
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
52
|
+
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
53
53
|
|
|
54
54
|
_templateObject4 = function _templateObject4() {
|
|
55
55
|
return data;
|
|
@@ -59,7 +59,7 @@ function _templateObject4() {
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
function _templateObject3() {
|
|
62
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
62
|
+
var data = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "]);
|
|
63
63
|
|
|
64
64
|
_templateObject3 = function _templateObject3() {
|
|
65
65
|
return data;
|
|
@@ -69,7 +69,7 @@ function _templateObject3() {
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
function _templateObject2() {
|
|
72
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
72
|
+
var data = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "]);
|
|
73
73
|
|
|
74
74
|
_templateObject2 = function _templateObject2() {
|
|
75
75
|
return data;
|
|
@@ -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
|
|
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","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","LEFT_BOTTOM","CookieInfo","CookieTitle","CookieAction","DEFAULT_COOKIE_KEY","CookieMessage","title","children","cookieKey","useState","window","localStorage","getItem","isShow","setShow","handleClick","setItem","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAYA,QAAZ;;AAAA,WAAYA;AACVA,EAAAA,uBAAA,gBAAA;AACAA,EAAAA,wBAAA,iBAAA;AACD,CAHD,EAAYA,QAAQ,KAARA,QAAQ,KAAA,CAApB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACMA,IAAMC,gBAAgB,gBAAGC,eAAM,CAACC,GAAV,kCAEHC,2BAFG,EAGAC,oBAHA,EAINC,yBAJM,EAOVC,sBAAO,GAAG,CAPA,EAQTA,sBAAO,GAAG,CARD,EAUlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,KAAmBT,QAAQ,CAACU,YAA5B,IACAC,UADA,qBAEWJ,sBAAO,GAAG,CAFrB,CADA;AAAA,CAVkB,EAgBlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,KAAmBT,QAAQ,CAACY,WAA5B,IACAD,UADA,qBAEUJ,sBAAO,GAAG,CAFpB,CADA;AAAA,CAhBkB,CAAtB;AAuBA,IAAMM,UAAU,gBAAGX,eAAM,CAACC,GAAV,mCACGI,sBAAO,GAAG,CADb,CAAhB;AAGA,IAAMO,WAAW,gBAAGZ,eAAM,CAACC,GAAV,mCACEI,sBAAO,GAAG,CADZ,CAAjB;AAIA,IAAMQ,YAAY,gBAAGb,eAAM,CAACC,GAAV,kCAAlB;;AChCA,IAAMa,kBAAkB,GAAG,sBAA3B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;wBACpBC;MAAAA,gCAAQ;MACRC,gBAAAA;2BACAV;MAAAA,sCAAWT,QAAQ,CAACY;4BACpBQ;MAAAA,wCAAYJ;;kBAEcK,cAAQ,CAAU,CAACC,MAAM,CAACC,YAAP,CAAoBC,OAApB,CAA4BJ,SAA5B,CAAX;MAA3BK;MAAQC;;AAEf,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAClBL,IAAAA,MAAM,CAACC,YAAP,CAAoBK,OAApB,CAA4BR,SAA5B,EAAuC,MAAvC;AACAM,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAHD;;AAKA,SAAOD,MAAM,GACXI,4BAAA,CAAC5B,gBAAD;AAAkBQ,IAAAA,QAAQ,EAAEA;GAA5B,EACEoB,4BAAA,CAACf,WAAD,MAAA,EACEe,4BAAA,IAAA,MAAA,EAAIX,KAAJ,CADF,CADF,EAKEW,4BAAA,CAAChB,UAAD,MAAA,EAAaM,QAAb,CALF,EAOEU,4BAAA,CAACd,YAAD,MAAA,EACEc,4BAAA,CAACC,eAAD;AAAQC,IAAAA,SAAS,EAAC;AAAiBC,IAAAA,IAAI,EAAEC,kBAAW,CAACC;AAASC,IAAAA,OAAO,EAAER;GAAvE,UAAA,CADF,CAPF,CADW,GAcT,IAdJ;AAeD,CA5BD;;;;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=n(t),o=require("@propellerads/button"),i=n(o),u=require("styled-components"),c=n(u),a=require("@propellerads/stylevariables");function l(n,e){return e||(e=n.slice(0)),n.raw=e,n}function s(){var n=l(["
|
|
1
|
+
"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=n(t),o=require("@propellerads/button"),i=n(o),u=require("styled-components"),c=n(u),a=require("@propellerads/stylevariables");function l(n,e){return e||(e=n.slice(0)),n.raw=e,n}function s(){var n=l([""]);return s=function(){return n},n}function p(){var n=l(["\n margin-bottom: ","px;\n"]);return p=function(){return n},n}function d(){var n=l(["\n margin-bottom: ","px;\n"]);return d=function(){return n},n}function f(){var n=l(["\n left: ","px;\n "]);return f=function(){return n},n}function v(){var n=l(["\n right: ","px;\n "]);return v=function(){return n},n}function T(){var n=l(["\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"]);return T=function(){return n},n}!function(n){n.LEFT_BOTTOM="left_bottom",n.RIGHT_BOTTOM="right_bottom"}(e||(e={}));var m=c.div(T(),a.borderRadius,a.white,a.baseShadow,5*a.spacing,5*a.spacing,(function(n){return n.position===e.RIGHT_BOTTOM&&u.css(v(),5*a.spacing)}),(function(n){return n.position===e.LEFT_BOTTOM&&u.css(f(),5*a.spacing)})),g=c.div(d(),3*a.spacing),b=c.div(p(),3*a.spacing),x=c.div(s());exports.CookieMessage=function(n){var u=n.title,c=void 0===u?"Cookies":u,a=n.children,l=n.position,s=void 0===l?e.LEFT_BOTTOM:l,p=n.cookieKey,d=void 0===p?"accept_cookie_policy":p,f=t.useState(!window.localStorage.getItem(d)),v=f[1];return f[0]?r.createElement(m,{position:s},r.createElement(b,null,r.createElement("b",null,c)),r.createElement(g,null,a),r.createElement(x,null,r.createElement(i,{elementId:"cookie-consent",type:o.BUTTON_TYPE.PRIMARY,onClick:function(){window.localStorage.setItem(d,"true"),v(!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
|
|
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","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","LEFT_BOTTOM","CookieInfo","CookieTitle","CookieAction","title","children","cookieKey","useState","window","localStorage","getItem","setShow","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick","setItem"],"mappings":"8IAEYA,g1BAAZ,SAAYA,GACVA,4BACAA,8BAFF,CAAYA,IAAAA,WCMNC,EAAmBC,EAAOC,QAEbC,eACGC,QACNC,aAGM,EAAVC,UACW,EAAVA,WAET,SAACC,UACDA,EAAMC,WAAaT,EAASU,cAC5BC,UACqB,EAAVJ,cAGX,SAACC,UACDA,EAAMC,WAAaT,EAASY,aAC5BD,UACoB,EAAVJ,cAIRM,EAAaX,EAAOC,QACG,EAAVI,WAEbO,EAAcZ,EAAOC,QACE,EAAVI,WAGbQ,EAAeb,EAAOC,+BC9BN,oBACpBa,MAAAA,aAAQ,YACRC,IAAAA,aACAR,SAAAA,aAAWT,EAASY,kBACpBM,UAAAA,aANyB,2BAQCC,YAAmBC,OAAOC,aAAaC,QAAQJ,IAA1DK,mBAQbC,gBAACvB,GAAiBQ,SAAUA,GAC1Be,gBAACV,OACCU,yBAAIR,IAGNQ,gBAACX,OAAYI,GAEbO,gBAACT,OACCS,gBAACC,GAAOC,UAAU,iBAAiBC,KAAMC,cAAYC,QAASC,QAdhD,WAClBV,OAAOC,aAAaU,QAAQb,EAAW,QACvCK,GAAQ,iBAiBN"}
|
|
@@ -20,7 +20,7 @@ var POSITION;
|
|
|
20
20
|
})(POSITION || (POSITION = {}));
|
|
21
21
|
|
|
22
22
|
function _templateObject6() {
|
|
23
|
-
var data = _taggedTemplateLiteralLoose(["
|
|
23
|
+
var data = _taggedTemplateLiteralLoose([""]);
|
|
24
24
|
|
|
25
25
|
_templateObject6 = function _templateObject6() {
|
|
26
26
|
return data;
|
|
@@ -30,7 +30,7 @@ function _templateObject6() {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
function _templateObject5() {
|
|
33
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
33
|
+
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
34
34
|
|
|
35
35
|
_templateObject5 = function _templateObject5() {
|
|
36
36
|
return data;
|
|
@@ -40,7 +40,7 @@ function _templateObject5() {
|
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
function _templateObject4() {
|
|
43
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
43
|
+
var data = _taggedTemplateLiteralLoose(["\n margin-bottom: ", "px;\n"]);
|
|
44
44
|
|
|
45
45
|
_templateObject4 = function _templateObject4() {
|
|
46
46
|
return data;
|
|
@@ -50,7 +50,7 @@ function _templateObject4() {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
function _templateObject3() {
|
|
53
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
53
|
+
var data = _taggedTemplateLiteralLoose(["\n left: ", "px;\n "]);
|
|
54
54
|
|
|
55
55
|
_templateObject3 = function _templateObject3() {
|
|
56
56
|
return data;
|
|
@@ -60,7 +60,7 @@ function _templateObject3() {
|
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
function _templateObject2() {
|
|
63
|
-
var data = _taggedTemplateLiteralLoose(["\n
|
|
63
|
+
var data = _taggedTemplateLiteralLoose(["\n right: ", "px;\n "]);
|
|
64
64
|
|
|
65
65
|
_templateObject2 = function _templateObject2() {
|
|
66
66
|
return data;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cookie-message.esm.js","sources":["../src/types.tsx","../src/style.tsx","../src/index.tsx"],"sourcesContent":["import React from
|
|
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","borderRadius","white","baseShadow","spacing","props","position","RIGHT_BOTTOM","css","LEFT_BOTTOM","CookieInfo","CookieTitle","CookieAction","DEFAULT_COOKIE_KEY","CookieMessage","title","children","cookieKey","useState","window","localStorage","getItem","isShow","setShow","handleClick","setItem","React","Button","elementId","type","BUTTON_TYPE","PRIMARY","onClick"],"mappings":";;;;;;;;;;;;;;AAEA,IAAYA,QAAZ;;AAAA,WAAYA;AACVA,EAAAA,uBAAA,gBAAA;AACAA,EAAAA,wBAAA,iBAAA;AACD,CAHD,EAAYA,QAAQ,KAARA,QAAQ,KAAA,CAApB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACMA,IAAMC,gBAAgB,gBAAGC,MAAM,CAACC,GAAV,kCAEHC,YAFG,EAGAC,KAHA,EAINC,UAJM,EAOVC,OAAO,GAAG,CAPA,EAQTA,OAAO,GAAG,CARD,EAUlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,KAAmBT,QAAQ,CAACU,YAA5B,IACAC,GADA,qBAEWJ,OAAO,GAAG,CAFrB,CADA;AAAA,CAVkB,EAgBlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,KAAmBT,QAAQ,CAACY,WAA5B,IACAD,GADA,qBAEUJ,OAAO,GAAG,CAFpB,CADA;AAAA,CAhBkB,CAAtB;AAuBA,IAAMM,UAAU,gBAAGX,MAAM,CAACC,GAAV,mCACGI,OAAO,GAAG,CADb,CAAhB;AAGA,IAAMO,WAAW,gBAAGZ,MAAM,CAACC,GAAV,mCACEI,OAAO,GAAG,CADZ,CAAjB;AAIA,IAAMQ,YAAY,gBAAGb,MAAM,CAACC,GAAV,kCAAlB;;AChCA,IAAMa,kBAAkB,GAAG,sBAA3B;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB;wBACpBC;MAAAA,gCAAQ;MACRC,gBAAAA;2BACAV;MAAAA,sCAAWT,QAAQ,CAACY;4BACpBQ;MAAAA,wCAAYJ;;kBAEcK,QAAQ,CAAU,CAACC,MAAM,CAACC,YAAP,CAAoBC,OAApB,CAA4BJ,SAA5B,CAAX;MAA3BK;MAAQC;;AAEf,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAClBL,IAAAA,MAAM,CAACC,YAAP,CAAoBK,OAApB,CAA4BR,SAA5B,EAAuC,MAAvC;AACAM,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAHD;;AAKA,SAAOD,MAAM,GACXI,mBAAA,CAAC5B,gBAAD;AAAkBQ,IAAAA,QAAQ,EAAEA;GAA5B,EACEoB,mBAAA,CAACf,WAAD,MAAA,EACEe,mBAAA,IAAA,MAAA,EAAIX,KAAJ,CADF,CADF,EAKEW,mBAAA,CAAChB,UAAD,MAAA,EAAaM,QAAb,CALF,EAOEU,mBAAA,CAACd,YAAD,MAAA,EACEc,mBAAA,CAACC,MAAD;AAAQC,IAAAA,SAAS,EAAC;AAAiBC,IAAAA,IAAI,EAAEC,WAAW,CAACC;AAASC,IAAAA,OAAO,EAAER;GAAvE,UAAA,CADF,CAPF,CADW,GAcT,IAdJ;AAeD,CA5BD;;;;"}
|
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
|
|
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.0",
|
|
4
4
|
"repository": "https://github.com/propellerads/ui-components",
|
|
5
5
|
"private": false,
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,23 +20,20 @@
|
|
|
20
20
|
"build": "tsdx build"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"
|
|
23
|
+
"@types/styled-components": "5.1.34",
|
|
24
|
+
"react": ">=18 <19",
|
|
25
|
+
"styled-components": "5.1.1"
|
|
24
26
|
},
|
|
25
27
|
"module": "dist/cookie-message.esm.js",
|
|
26
28
|
"devDependencies": {
|
|
27
|
-
"@types/react": "
|
|
28
|
-
"@types/react-dom": "^16.9.8",
|
|
29
|
-
"@types/styled-components": "^5.1.3",
|
|
30
|
-
"react": "^16.13.1",
|
|
31
|
-
"react-dom": "^16.13.1",
|
|
29
|
+
"@types/react": ">=18 <19",
|
|
32
30
|
"tsdx": "^0.13.3",
|
|
33
31
|
"tslib": "^2.0.1",
|
|
34
|
-
"typescript": "^4.
|
|
32
|
+
"typescript": "^4.9.5"
|
|
35
33
|
},
|
|
36
34
|
"dependencies": {
|
|
37
35
|
"@propellerads/button": "^5.2.1",
|
|
38
|
-
"@propellerads/stylevariables": "^1.3.1"
|
|
39
|
-
"styled-components": "^5.2.0"
|
|
36
|
+
"@propellerads/stylevariables": "^1.3.1"
|
|
40
37
|
},
|
|
41
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "5d74522986ec4a1fc7e1a62f99a7557207ae0e80"
|
|
42
39
|
}
|
package/src/index.tsx
CHANGED
|
@@ -2,49 +2,38 @@ 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
|
|
|
14
9
|
const CookieMessage = ({
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
10
|
+
title = 'Cookies',
|
|
11
|
+
children,
|
|
12
|
+
position = POSITION.LEFT_BOTTOM,
|
|
13
|
+
cookieKey = DEFAULT_COOKIE_KEY,
|
|
19
14
|
}: CookieMessageProps) => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
>
|
|
43
|
-
Got it
|
|
44
|
-
</Button>
|
|
45
|
-
</CookieAction>
|
|
46
|
-
</StyledCookieCard>
|
|
47
|
-
) : null;
|
|
15
|
+
const [isShow, setShow] = useState<boolean>(!window.localStorage.getItem(cookieKey));
|
|
16
|
+
|
|
17
|
+
const handleClick = () => {
|
|
18
|
+
window.localStorage.setItem(cookieKey, 'true');
|
|
19
|
+
setShow(false);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
return isShow ? (
|
|
23
|
+
<StyledCookieCard position={position}>
|
|
24
|
+
<CookieTitle>
|
|
25
|
+
<b>{title}</b>
|
|
26
|
+
</CookieTitle>
|
|
27
|
+
|
|
28
|
+
<CookieInfo>{children}</CookieInfo>
|
|
29
|
+
|
|
30
|
+
<CookieAction>
|
|
31
|
+
<Button elementId="cookie-consent" type={BUTTON_TYPE.PRIMARY} onClick={handleClick}>
|
|
32
|
+
Got it
|
|
33
|
+
</Button>
|
|
34
|
+
</CookieAction>
|
|
35
|
+
</StyledCookieCard>
|
|
36
|
+
) : null;
|
|
48
37
|
};
|
|
49
38
|
|
|
50
39
|
export {CookieMessage};
|
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
|
|
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> {}
|