gatsby-matrix-theme 28.0.11 → 28.0.12

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [28.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v28.0.11...v28.0.12) (2023-08-04)
+
+
+### Bug Fixes
+
+* cookie ([c911fdc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c911fdc2d865eadbb09b255c8b31fe515f31dfeb))
+* cookie -fixes ([282afe3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/282afe321ff1d53cb31774175486fe6d273dc5bd))
+* cookie consent ([86a83cb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/86a83cba36cf559597a77a97b4e5643f5001ebcb))
+* cookie consent ([d52ac33](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d52ac3338f1c42cfbe5c193bcf2ee6c47a425ab2))
+* cookie consent ([f498cd6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f498cd6b77fcb270eb2e3d85d42322988cd80926))
+* cookie consent ([4cf1ebd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4cf1ebd6c77f4332d49e1a7c5521b9c92bbf4385))
+* cookie consent ([ec653a8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec653a8651dd24a81a8008391cc77c44c452ebc0))
+* cookie consent ([8775eec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8775eecc4d412d5cf5498e09927e09e827870614))
+* cookie decline ([647d526](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/647d5268c7cddb61c466eb6d6c974c141fe72466))
+* cookie notice ([dee3088](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dee30888bd734dcfbed3ebb78ae7a781602f9c05))
+
+
+* Merge branch 'tm-3302-cookie-consent' into 'master' ([ae57064](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae57064eb68e2d0a03c596c5a5e243712091ccc4))
+
 ## [28.0.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v28.0.10...v28.0.11) (2023-08-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "28.0.11",
+  "version": "28.0.12",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/toggle-button/toggle-button.module.scss

@@ -25,16 +25,16 @@
   }
 
   .wrgtogglecontainer {
-    width: 50px;
-    height: 24px;
+    width: 4.8rem;
+    height: 2.4rem;
     padding: 0;
     border-radius: 30px;
-    background-color: #ced0dd;
+    background-color: var(--cookie-input-bg, #ced0dd);
     transition: all 0.2s ease;
   }
 
   .wrgtogglecontainerOn {
-    background-color: #5ce482;
+    background-color: var(--cookie-input-on-bg, #4DD792);
   }
 
   .wrgtogglecircle {
@@ -45,7 +45,7 @@
     width: 22px;
     height: 22px;
     border-radius: 50%;
-    background-color: #fafafa;
+    background-color: var(--cookie-input-circle-bg, #fafafa);
     box-sizing: border-box;
     transition: all 0.2s ease;
   }

package/src/components/molecules/cookie-modal/category/category.module.scss

@@ -1,25 +1,25 @@
 .categoryBox {
-  height: 59px;
+  height: var(--categoryBox-height, 4.3rem);
   overflow-y: hidden;
   background-color: #f3f2f2;
-  border-radius: 8px;
-  margin-top: 8px;
+  border-radius: 0.8rem;
+  margin-top: 0.8rem;
 
   .categoryHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 16px;
+    padding: var(--categoryBox-padding, 0.8rem 1.6rem);
     font-weight: 700;
-    font-size: 16px;
-    line-height: 24px;
-    color: #150e06;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    color: #1b1b1c;
 
     > p {
       font-weight: 700;
-      font-size: 14px;
-      line-height: 22px;
-      text-align: right
+      font-size: 1.4rem;
+      line-height: 2.2rem;
+      text-align: right;
     }
 
     .boxTitle {
@@ -30,7 +30,7 @@
       text-overflow: ellipsis;
       > span {
         margin: 0px;
-        padding-left: 10px;
+        padding-left: 0.8rem;
         font-weight: 700;
         font-size: 16px;
         line-height: 24px;
@@ -43,16 +43,12 @@
 
   .categoryText {
     background-color: white;
-    margin: 2px;
-    padding: 16px;
+    margin: 1.5px;
+    padding: 1.6rem;
     font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-    color: #39394F;
-
-    @include min(tablet){
-      color:#150E06;
-    }
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    color: var(--categoryText-color, #515156);
   }
 }
 

package/src/components/molecules/cookie-modal/category/index.js

@@ -14,6 +14,8 @@ const CategoryContainer = ({
   currentSection,
   setCurrentSection,
   translations,
+  openSign = <AiOutlineMinus />,
+  closeSign = <AiOutlinePlus />,
 }) => (
   <div>
     <div
@@ -23,16 +25,18 @@ const CategoryContainer = ({
     >
       <div className={styles.categoryHeader}>
         <div className={styles.boxTitle}>
-          {currentSection === index ? <AiOutlineMinus /> : <AiOutlinePlus />}
+          {currentSection === index ? openSign : closeSign}
           <span>{translate(translations, obj?.translateKey, obj?.altTranslation)}</span>
         </div>
         {obj?.button ? (
           <ToggleButton state={currentState} setStateFunc={updateState} />
         ) : (
-          <p>{translate(translations, 'cookie_container_always_text', 'Alwasy Enabled')}</p>
+          <p>{translate(translations, 'cookie_container_always_text', 'Always Enabled')}</p>
         )}
       </div>
-      <div className={styles.categoryText}>{translate(translations, obj?.textKey)}</div>
+      <div className={styles.categoryText}>
+        {translate(translations, obj?.textKey, obj?.defaultText)}
+      </div>
     </div>
   </div>
 );
@@ -43,6 +47,7 @@ CategoryContainer.propTypes = {
     altTranslation: PropTypes.string,
     textKey: PropTypes.string,
     button: PropTypes.bool,
+    defaultText: PropTypes.string,
   }),
   index: PropTypes.number,
   currentState: PropTypes.bool,
@@ -50,6 +55,8 @@ CategoryContainer.propTypes = {
   currentSection: PropTypes.number,
   setCurrentSection: PropTypes.func,
   translations: PropTypes.shape({}),
+  openSign: PropTypes.shape({}),
+  closeSign: PropTypes.shape({}),
 };
 
 export default CategoryContainer;

package/src/components/molecules/cookie-modal/cookie-modal-two.stories.js

@@ -0,0 +1,61 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import MainProvider from 'gatsby-core-theme/src/context/MainProvider';
+import logoImg from '../../../../storybook-images/logo.svg';
+import CookieModal from '.';
+
+export default {
+  title: 'Theme/Layout/Cookie/Settings/Template Two',
+  component: CookieModal,
+  args: {
+    translations: {
+      privacy_preference_title: 'Privacy Preference Center',
+      privacy_preference_text:
+        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
+      neccesary_cookie_title: 'Necessary',
+      neccesary_cookie_text: 'Lorem Ipsum',
+      analytical_cookie_title: 'Analytical And Stadistical',
+      analytical_cookie_text: 'Lorem Ipsum',
+      marketing_cookie_title: 'Marketing',
+      marketing_cookie_text: 'Lorem Ipsum',
+    },
+  },
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays Cookie Modal',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <MainProvider
+    value={{
+      translations: args?.translations,
+    }}
+  >
+    <CookieModal {...args} />
+  </MainProvider>
+);
+export const Default = Template.bind({});
+Default.args = {
+  logo: logoImg,
+  templateTwo: true,
+};

package/src/components/molecules/cookie-modal/cookie-modal.module.scss

@@ -1,18 +1,38 @@
+.hide {
+  display: none;
+}
+
+.container {
+  position: fixed;
+  z-index: var(--cookie-consent-index);
+  top: 0;
+  right: 0;
+  background-color: red;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.5);
+  @include flex-align(center, center);
+}
+
 .modalContent {
   background-color: white;
-  padding: 20px 16px;
-  height: 100%;
+  box-shadow: 0px 8px 8px -4px rgba(27, 27, 28, 0.02), 0px 20px 24px -4px rgba(27, 27, 28, 0.05);
+
+  padding: var(--cookieModal-mobile-padding, 1.6rem 1.6rem 3.2rem);
+  max-width: 63.4rem;
+  margin: 0 auto;
+  height: auto;
   overflow-y: scroll;
 
   .modalCookieHeader {
     display: flex;
     position: relative;
-    padding-bottom: 18px;
-    border-bottom: 1px solid #ced0dd;
+    padding-bottom: 1.6rem;
+    border-bottom: 1.5px solid #dedede;
 
     > img {
-      width: 184px;
-      height: 29px;
+      width: var(--cookieModal-mobile-img-width, 12.1rem);
+      height: var(--cookieModal-mobile-img-height, 3.2rem);
     }
 
     > button {
@@ -23,36 +43,49 @@
   }
 
   .modalTextHeader {
-    margin-top: 18px;
-    margin-bottom: 16px;
+    margin-top: 1.6rem;
+    margin-bottom: 1.6rem;
 
     span {
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 24px;
-      color: #150E06;
+      font-size: var(--cookieModal-mobile-privacy-size, 1.6rem);
+      font-weight: var(--cookieModal-mobile-privacy-weight, 700);
+      line-height: var(--cookieModal-mobile-privacy-Lineheight, 2.7rem);
+      color: var(--cookieModal-mobile-privacy-color, #1b1b1c);
     }
     p {
       font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
-      color: #150E06;
-      margin-top: 8px;
+      font-size: var(--cookieModal-mobile-privacy-text-size, 1.4rem);
+      line-height: var(--cookieModal-mobile-privacy-text-Lineheight, 2.2rem);
+      color: var(--cookieModal-mobile-privacy-text-color, #515156);
+      margin-top: var(--cookieModal-mobile-privacy-text-margin-top, 1.6rem);
     }
   }
 
   .modalButtons {
     display: flex;
     flex-direction: column;
+    padding: var(--cookieModal-button-padding, 0rem);
+    gap: var(--cookieModal-button-gap, 0.8rem);
 
     button {
-      margin-bottom: 13px;
-      height: 40px;
+      display: flex;
+      align-items: center;
+      gap: var(--cookieModal-mobile-button-gap, 0.8rem);
+      height: var(--cookieModal-mobile-button-height, 4rem);
+      text-align: center;
+      font-size: var(--cookieModal-mobile-button-size, 1.4rem);
+      font-weight: var(--cookieModal-mobile-button-weight, 700);
+      line-height: var(--cookieModal-mobile-button-lineHeight, 2.2rem);
+      text-transform: capitalize;
+      padding: var(--cookieModal-mobile-button-padding, 0.8rem 1.6rem);
+      border-radius: var(--cookieModal-mobile-button-radius, 10rem);
+      background-color: var(--cookieModal-mobile-button-bg, #6e33e5);
+      color: var(--cookieModal-mobile-button-color, white) !important;
 
       &:last-child {
-        background-color: white;
-        border: 1px solid black;
-        color: black;
+        background-color: var(--cookieModal-mobile-second-button-bg, white);
+        border: var(--cookieModal-mobile-second-button-border, 2px solid #262629);
+        color: var(--cookieModal-mobile-second-button-color, #262629) !important;
 
         &:hover {
           background: none;
@@ -62,29 +95,43 @@
   }
 
   .mainBox {
-    padding-top: 3px;
+    padding-top: 1.4rem;
 
     .mainTitle {
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 24px;
-      margin-bottom: 8px;
-      color: #150E06;
+      display: block;
+      font-weight: var(--cookieModal-mainTitle-weight, 700);
+      font-size: var(--cookieModal-mainTitle-size, 1.6rem);
+      line-height: var(--cookieModal-mainTitle-lineHeight, 2.7rem);
+      margin-bottom: var(--cookieModal-mainTitle-margin-bottom, 1.6rem);
+      color: var(--cookieModal-mainTitle-color, #1b1b1c);
+
+      @include min(tablet) {
+        font-size: var(--cookieModal-desktop-mainTitle-size, 1.6rem);
+        line-height: var(--cookieModal-desktop-mainTitle-lineHeight, 2.7rem);
+      }
     }
   }
   .lastButton {
-    padding-top: 16px;
-    padding-bottom: 3.2rem;
+    padding-top: 1.6rem;
+
     > button {
-      height: 40px;
+      background-color: var(--cookieModal-mobile-button-bg, #6e33e5);
+      padding: var(--cookieModal-mobile-button-padding, 0.8rem 1.6rem);
+      border-radius: var(--cookieModal-mobile-button-radius, 10rem);
+      height: var(--cookieModal-mobile-button-height, 4rem);
       width: 100%;
       margin-bottom: 0px;
+      color: var(--cookieModal-mobile-button-color, white) !important;
+      font-size: var(--cookieModal-mobile-button-size, 1.4rem);
+      font-weight: var(--cookieModal-mobile-button-weight, 700);
+      line-height: var(--cookieModal-mobile-button-lineHeight, 2.2rem);
+      text-transform: capitalize;
     }
   }
 
   @include min(tablet) {
-    border-radius: 16px;
-    padding: 34px 32px;
+    border-radius: 1.6rem;
+    padding: var(--cookieModal-desktop-padding, 2.4rem);
     overflow-y: scroll;
     max-height: 98vh;
     &::-webkit-scrollbar {
@@ -102,49 +149,40 @@
     }
     .modalCookieHeader {
       justify-content: center;
-      padding-bottom: 27px;
+      padding-bottom: 2.4rem;
       border: none;
       > img {
-        width: 159px;
-        height: 25px;
+        width: var(--cookieModal-desktop-img-width, 15.1rem);
+        height: var(--cookieModal-desktop-img-height, 4rem);
       }
       > button {
-        right: -11px;
+        right: -16px;
         top: -16px;
       }
     }
     .modalTextHeader {
       margin-top: 0px;
       margin-bottom: 0px;
-      color: #150e06;
-      span {
-        font-size: 18px;
-        line-height: 26px;
+      font-size: var(--cookieModal-privacy-size, 1.6rem);
+
+      > span {
+        font-size: var(--cookieModal-desktop-privacy-size, 1.6rem);
+        line-height: var(--cookieModal-desktop-privacy-Lineheight, 2.7rem);
       }
     }
     .modalButtons {
       flex-direction: row;
-      padding: 16px 0px;
+      padding: var(--cookieModal-desktop-button-padding, 1.6rem 0px);
+      gap: var(--cookieModal-desktop-button-gap, 0.8rem);
 
       button {
         margin-bottom: 0px;
-        &:last-child {
-          margin-left: 10px;
-        }
       }
     }
     .mainBox {
       padding-top: 8px;
-      color: #150e06;
-      .mainTitle {
-        margin: 0px;
-        font-size: 18px;
-        line-height: 26px;
-        margin-bottom: 8px;
-      }
     }
     .lastButton {
-    
       padding-bottom: 0rem;
       > button {
         width: auto;
@@ -152,3 +190,109 @@
     }
   }
 }
+
+.modalContentTwo {
+  padding: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+
+  @include min(tablet) {
+    padding: 3.2rem;
+    border-radius: 1.6rem;
+  }
+
+  .modalCookieHeader {
+    justify-content: start;
+    padding-bottom: 2.4rem;
+    border: none;
+    > span {
+      color: #1b1b1c;
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 2.8rem;
+      text-transform: capitalize;
+      width: 90%;
+
+      @include min(tablet) {
+        width: 100%;
+        font-size: 2.4rem;
+        line-height: 3.2rem;
+      }
+    }
+    @include min(tablet) {
+      padding-bottom: 3.2rem;
+    }
+  }
+
+  .modalTextHeader {
+    margin: 0rem;
+    > p {
+      margin: 0rem;
+    }
+  }
+
+  .modalButtons {
+    order: 3;
+    padding: 0rem;
+    padding-top: 2.4rem;
+    flex-direction: column-reverse;
+
+    @include min(tablet) {
+      gap: 0.8rem;
+      padding-top: 3.2rem;
+      flex-direction: row-reverse;
+    }
+
+    > button {
+      width: 100%;
+      padding: 1.6rem 2.4rem;
+      height: 5.6rem;
+      font-size: 1.8rem;
+      font-weight: 700;
+      line-height: 2.6rem;
+      text-transform: capitalize;
+
+      &:last-child {
+        margin-left: 0rem;
+      }
+    }
+  }
+
+  .mainBox {
+    margin-top: 2.4rem;
+    padding-top: 0rem;
+    max-height: 5.6rem;
+    overflow: hidden;
+    background-color: #f4f4f4;
+    border-radius: 0.8rem;
+    padding: 0.8rem;
+
+    @include min(tablet) {
+      margin-top: 3.2rem;
+      padding: 1.6rem;
+    }
+
+    > span {
+      padding: 0.8rem;
+      @include min(tablet) {
+        padding: 0rem;
+      }
+    }
+
+    > div {
+      > div {
+        background-color: white;
+
+        > div:last-child {
+          background-color: #f4f4f4;
+        }
+      }
+    }
+  }
+
+  .mainBoxStyleTwoFullHeight {
+    max-height: unset !important;
+    overflow: unset;
+  }
+}

package/src/components/molecules/cookie-modal/cookie-modal.stories.js

@@ -0,0 +1,60 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import MainProvider from 'gatsby-core-theme/src/context/MainProvider';
+import logoImg from '../../../../storybook-images/logo.svg';
+import CookieModal from '.';
+
+export default {
+  title: 'Theme/Layout/Cookie/Settings/Template One',
+  component: CookieModal,
+  args: {
+    translations: {
+      privacy_preference_title: 'Privacy Preference Center',
+      privacy_preference_text:
+        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
+      neccesary_cookie_title: 'Necessary',
+      neccesary_cookie_text: 'Lorem Ipsum',
+      analytical_cookie_title: 'Analytical And Stadistical',
+      analytical_cookie_text: 'Lorem Ipsum',
+      marketing_cookie_title: 'Marketing',
+      marketing_cookie_text: 'Lorem Ipsum',
+    },
+  },
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays Cookie Modal',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <MainProvider
+    value={{
+      translations: args?.translations,
+    }}
+  >
+    <CookieModal {...args} />
+  </MainProvider>
+);
+export const Default = Template.bind({});
+Default.args = {
+  logo: logoImg,
+};