gatsby-core-theme 35.0.5 → 35.0.7

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [35.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.0.6...v35.0.7) (2024-07-26)
+
+
+### Bug Fixes
+
+* qa fixes ([ed24307](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ed2430714cc4778624ef9403deaa91ec8f7b3325))
+
+
+* Merge branch 'tm-4071-market-dropdown' into 'master' ([1eae8bb](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1eae8bbf04314adf5cd35d8765d8b449bad5c66b))
+* Merge branch 'master' into tm-4071-market-dropdown ([a1148fa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a1148fa995863a4de4a15d6d94c39edfd495b64d))
+
+## [35.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.0.5...v35.0.6) (2024-07-26)
+
+
+### Bug Fixes
+
+* moved cookie from matrix to core ([f9a46dc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f9a46dcb3884d6b4d56008c453f3fe1b41ed4136))
+* storybook ([940d628](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/940d62857be4aef2906a7635b7a7937be14efa59))
+* storybook images ([8a8768f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a8768f61bbb795839ac350f26bde45ab76dcd5b))
+* storybook images ([ab3b4a1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ab3b4a12bd146765695f52ebaf46d6c1db323abf))
+
+
+* Merge branch 'tm-4595-cookie-consent-body' into 'master' ([a185198](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a185198117b92f2002b89003fac8f28ec645c655))
+
 ## [35.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.0.4...v35.0.5) (2024-07-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "35.0.5",
+  "version": "35.0.7",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/market-dropdown/market-dropdown.module.scss

@@ -15,25 +15,29 @@
 .dropdownInner{
   cursor: pointer;
   background-color: #F4F4F4;
-  padding: .4rem;
+  padding: .7rem 0.4rem;
 
   @include flex-direction(row);
   @include flex-align(center, center);
 
-  gap: .4rem;
+  gap: 1.1rem;
   border-radius:.8rem;
 
-  &::after{
-    @include arrow(rgba(27, 27, 28, 1), 0.8rem, down, false, translateY(-50%));
-
-    margin: .8rem .4rem .4rem;
+  @include min(tablet){
+    &::after{
+      @include arrow(rgba(27, 27, 28, 1), 0.8rem, down, false, translateY(-50%));
+  
+      margin: .8rem .4rem .4rem;
+    }
   }
 }
 
-.dropdownActive::after{
-  @include arrow(rgba(27, 27, 28, 1), 0.8rem, up, false, translateY(50%));
+@include min(tablet){
+  .dropdownActive::after{
+    @include arrow(rgba(27, 27, 28, 1), 0.8rem, up, false, translateY(50%));
 
-  margin: .4rem .4rem .8rem;
+    margin: .4rem .4rem .8rem;
+  }
 }
 
 .dropdownOptions {
@@ -41,7 +45,7 @@
   background-color: #fff;
   top: 100%;
   padding: 1.6rem;
-  border-radius: 0.4rem;
+  border-radius: 0.8rem;
   gap: 0.6rem;
   flex-direction: column;
   height: 100dvh;
@@ -49,6 +53,8 @@
   right: 0;
   display: none !important;
   box-shadow: 0 20px 24px -4px rgb(27 27 28 / 5%);
+  overflow-y: auto;
+  padding-bottom: 50dvh;
 
   @include flex-align(start, start);
 
@@ -92,12 +98,13 @@
   background-color: rgb(244 244 244 / 100%);
   padding: .9rem .4rem;
   border-radius: .8rem;
-  color: #0f172a;
+  color: #1B1B1C;
   text-transform: capitalize;
   gap: .4rem;
+  font-weight: 400;
 
   &:hover{
-    background-color: #fff;
+    font-weight: 700;
   }
 
   > img {
@@ -108,7 +115,6 @@
   > span {
     font-size: 14px;
     font-style: normal;
-    font-weight: 400;
     line-height: 22px;
   }
 

package/src/components/atoms/toggle-button/index.js

@@ -0,0 +1,37 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './toggle-button.module.scss';
+
+const ToggleButton = ({ icon1, icons2, state, setStateFunc }) => (
+  <div className={styles?.wrgtoggle || ''} onClick={() => setStateFunc(!state)}>
+    <div
+      className={`${styles?.wrgtogglecontainer || ''} ${
+        state ? styles?.wrgtogglecontainerOn || '' : ''
+      }`}
+    >
+      <div className={styles?.wrgtogglecheck || ''}>
+        <span>{icon1}</span>
+      </div>
+      <div className={styles?.wrgtoggleuncheck || ''}>
+        <span>{icons2}</span>
+      </div>
+    </div>
+
+    <div
+      className={`${styles?.wrgtogglecircle || ''} ${
+        state ? styles?.wrgtogglecircleAgreed || '' : ''
+      }`}
+    />
+  </div>
+);
+
+ToggleButton.propTypes = {
+  icon1: PropTypes.elementType,
+  icons2: PropTypes.elementType,
+  state: PropTypes.bool,
+  setStateFunc: PropTypes.func,
+};
+
+export default ToggleButton;

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

@@ -0,0 +1,56 @@
+.wrgtoggle {
+    touch-action: pan-x;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .wrgtoggleuncheck span,
+  .wrgtogglecheck span {
+    align-items: center;
+    display: flex;
+    height: 10px;
+    justify-content: center;
+    position: relative;
+    width: 10px;
+  }
+
+  .wrgtogglecontainer {
+    width: 4.8rem;
+    height: 2.4rem;
+    padding: 0;
+    border-radius: 30px;
+    background-color: var(--cookie-input-bg, #ced0dd);
+    transition: all 0.2s ease;
+  }
+
+  .wrgtogglecontainerOn {
+    background-color: var(--cookie-input-on-bg, #4DD792);
+  }
+
+  .wrgtogglecircle {
+    transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background-color: var(--cookie-input-circle-bg, #fafafa);
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+  }
+
+  .wrgtogglecircleAgreed {
+    right: 1px;
+    left: auto;
+  }

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

@@ -0,0 +1,76 @@
+.categoryBox {
+  height: var(--categoryBox-height, 4.3rem);
+  overflow-y: hidden;
+  background-color: #f3f2f2;
+  border-radius: 0.8rem;
+  margin-top: 0.8rem;
+
+  .categoryHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--categoryBox-padding, 0.8rem 1.6rem);
+    font-weight: 700;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    color: #1b1b1c;
+
+    > p {
+      font-weight: 700;
+      font-size: 1.4rem;
+      line-height: 2.2rem;
+      text-align: right;
+    }
+
+    .boxTitle {
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      > span {
+        margin: 0px;
+        padding-left: 0.8rem;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 24px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .categoryText {
+    background-color: white;
+    margin: 1.5px;
+    padding: 1.6rem;
+    font-weight: 400;
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    color: var(--categoryText-color, #515156);
+    max-height: 10rem;
+    overflow-y: auto;
+
+    @include min(tablet){
+      &::-webkit-scrollbar {
+        height: 4px;
+        width: 4px;
+      }
+
+      /* Track */
+      &::-webkit-scrollbar-track {
+        background: white;
+      }
+
+      /* Handle */
+      &::-webkit-scrollbar-thumb {
+        background: #d4d7da;
+      }
+    }
+  }
+}
+
+.showFullCategory {
+  height: auto;
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AiOutlinePlus } from '@react-icons/all-files/ai/AiOutlinePlus';
+import { AiOutlineMinus } from '@react-icons/all-files/ai/AiOutlineMinus';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import ToggleButton from '../../../atoms/toggle-button';
+
+import styles from './category.module.scss';
+
+const CategoryContainer = ({
+  obj,
+  index,
+  currentState,
+  updateState,
+  currentSection,
+  setCurrentSection,
+  openSign = <AiOutlineMinus title="Minus Icon" />,
+  closeSign = <AiOutlinePlus title="Plus Icon" />,
+}) => (
+  <div>
+    <div
+      aria-hidden="true"
+      className={`${styles.categoryBox} ${currentSection === index && styles.showFullCategory}`}
+      onClick={() => setCurrentSection(index)}
+    >
+      <div className={styles.categoryHeader}>
+        <div className={styles.boxTitle}>
+          {currentSection === index ? openSign : closeSign}
+          <span>{useTranslate(obj?.translateKey, obj?.altTranslation)}</span>
+        </div>
+        {obj?.button ? (
+          <ToggleButton state={currentState} setStateFunc={updateState} />
+        ) : (
+          <p>{useTranslate('cookie_container_always_text', 'Always Enabled')}</p>
+        )}
+      </div>
+      <div className={styles.categoryText}>{useTranslate(obj?.textKey, obj?.defaultText)}</div>
+    </div>
+  </div>
+);
+
+CategoryContainer.propTypes = {
+  obj: PropTypes.shape({
+    translateKey: PropTypes.string,
+    altTranslation: PropTypes.string,
+    textKey: PropTypes.string,
+    button: PropTypes.bool,
+    defaultText: PropTypes.string,
+  }),
+  index: PropTypes.number,
+  currentState: PropTypes.bool,
+  updateState: PropTypes.func,
+  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,57 @@
+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 logoImg from '../../../../static/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',
+    },
+    cookieLink: {
+      title: 'Cookie Consent Text',
+      path: '/cookie',
+    },
+  },
+
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays Cookie Modal',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <CookieModal {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  logo: logoImg,
+  templateTwo: true,
+};