gatsby-core-theme 30.0.38 → 30.0.40

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [30.0.40](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.39...v30.0.40) (2023-12-28)
+
+
+### Bug Fixes
+
+* added new mixin ([b5d9ee6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b5d9ee64b2eae4f6f531811a3f50600c5e6b1013))
+* anchor ([554e3e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/554e3e6d9b95485a3dd3b47605304a43394efc7c))
+
+
+* Merge branch 'tm-3800-anchor-core' into 'master' ([7a2e331](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7a2e331e3a05df414b334488742e4b904ca9d53a))
+
+## [30.0.39](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.38...v30.0.39) (2023-12-27)
+
+
+### Bug Fixes
+
+* add text decoration to the button ([c6af0e8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c6af0e8d83e613aa0422b6e127519329d61c741c))
+* added personal page ([92c701d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/92c701d396cb4046ed43c72d12363ed8e3972526))
+* update table ([57a3b44](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/57a3b446dec767348de9a8a709d671d9ae4b1c92))
+
+
+* Merge branch 'tm-3854-social-icons' into 'master' ([72c541c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/72c541c2a7f5b3d0678c56f501074ada7ba2d7f2))
+* Merge branch 'tm-3913-table-module' into 'master' ([1895b78](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1895b780ba26cd3957dd36e4e2c3a8dbdbfff0ed))
+* Merge branch 'tm-3916-text-module' into 'master' ([b16b26a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b16b26ac055281ad0e5ae4455615920300f14700))
+
 ## [30.0.38](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.37...v30.0.38) (2023-12-26)
 
 

package/package.json

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

package/src/components/atoms/author-box/index.js

@@ -47,6 +47,19 @@ export default function AuthorBox({
       </svg>
     ),
     tiktok: <IoLogoTiktok title="Tiktok Icon" />,
+    wikipedia: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <title>Wikipedia Icon</title>
+        <path d="M14.4955 4.6618V4.95411C14.11 5.02259 13.8181 5.14373 13.62 5.31753C13.3362 5.57562 13.0015 5.97064 12.782 6.50259L8.31508 15.6196H8.01788L3.53358 6.38408C3.32473 5.91007 3.0408 5.62039 2.95513 5.51504C2.82125 5.35177 2.65658 5.22405 2.46113 5.13187C2.26567 5.03971 2.00193 4.98046 1.66992 4.95411V4.6618H6.03327V4.95411C5.52989 5.00152 5.28991 5.08579 5.13997 5.20692C4.99003 5.32807 4.91506 5.48345 4.91506 5.67305C4.91506 5.9364 5.03822 6.34722 5.28456 6.90551L8.59622 13.1863L11.8341 6.98451C12.0858 6.37356 12.2946 5.94957 12.2946 5.71255C12.2946 5.55982 12.217 5.41366 12.0617 5.27408C11.9064 5.13451 11.7306 5.03576 11.3612 4.97781C11.3344 4.97256 11.2889 4.96466 11.2246 4.95411V4.6618H14.4955Z" />
+        <path d="M18.3409 4.66179V4.95411C17.9553 5.02259 17.6634 5.14373 17.4653 5.31753C17.1815 5.57561 16.8468 5.97063 16.6273 6.50259L12.7071 15.6196H12.4099L8.26722 6.38408C8.05837 5.91007 7.77445 5.62038 7.68877 5.51504C7.55489 5.35177 7.39022 5.22405 7.19477 5.13187C6.99931 5.03971 6.82224 4.98045 6.49023 4.95411V4.66179H10.7669V4.95411C10.2635 5.00152 10.0235 5.08579 9.87361 5.20692C9.72367 5.32807 9.6487 5.48344 9.6487 5.67304C9.6487 5.9364 9.77186 6.34722 10.0182 6.90551L12.9882 13.1863L15.6795 6.98451C15.9311 6.37355 16.1399 5.94957 16.1399 5.71255C16.1399 5.55981 16.0623 5.41366 15.907 5.27407C15.7517 5.13451 15.4893 5.03576 15.1198 4.97781C15.093 4.97255 15.0475 4.96465 14.9833 4.95411V4.66179H18.3409Z" />
+      </svg>
+    ),
   },
 }) {
   const { translations } = useContext(Context) || {};
@@ -56,6 +69,7 @@ export default function AuthorBox({
     { id: 'li', link: author?.linkedin_profile, icon: socialIcons?.linkedin },
     { id: 'tw', link: author?.twitter_profile, icon: socialIcons?.twitter },
     { id: 'tt', link: author?.tik_tok, icon: socialIcons?.tiktok },
+    { id: 'wk', link: author?.personal_website, icon: socialIcons?.wikipedia },
   ];
   const biographyRef = useRef(null);
   const [isReadMore, setIsReadMore] = useState(showReadMore);

package/src/components/molecules/content/content.module.scss

@@ -78,6 +78,8 @@
   max-width: var(--max-width-content, var(--main-container-max)) !important;
   margin: 0 auto;
   padding: var(--show-more-button-padding-mobile) !important;
+  text-decoration: var(--show-more-button-text-decoration, none);
+  
 
   &::after {
     display: var(--show-more-button-arrow-display, none);

package/src/components/molecules/content/table/table.module.scss

@@ -59,6 +59,7 @@
         height: 5.6rem;
         color: var(--table-head-text);
         background: var(--table-head-background);
+        border-right: var(--border-right-table-header, 2px solid var(--table-head-background));
         font-weight: 700;
         font-size: 1.6rem;
         line-height: 2.7rem;
@@ -195,7 +196,6 @@
           td {
             display: block;
             text-align: left !important;
-            width: 100% !important;
             height: var(--table-template-two-mobile-height, 4rem);
             @include flex-align(center, flex-start);
             background: var(--even-td-template-two, #fff);

package/src/components/organisms/anchor/template-one/anchor.module.scss

@@ -2,6 +2,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -42,16 +43,20 @@
   max-width: var(--main-container-max);
   margin: 0 auto;
   @include flex-direction(row);
+
   &::-webkit-scrollbar {
     height: 0.4rem;
     display: none;
   }
+
   &::-webkit-scrollbar-track {
     background: #9c9ab0;
   }
+
   &::-webkit-scrollbar-thumb {
     background: #1c1a28;
   }
+
   overflow-x: scroll;
 }
 
@@ -85,7 +90,7 @@
 }
 
 .anchorItem {
-  &.active > a {
+  &.active>a {
     background-color: #1c1a28;
     color: #fff;
     border: 1.5px solid #3e3c47;
@@ -119,7 +124,7 @@
     display: flex;
   }
 
-  > svg {
+  >svg {
     width: 3.2rem;
     height: 3.2rem;
     padding: 0.8rem;
@@ -130,7 +135,7 @@
 }
 
 .disabled {
-  > svg {
+  >svg {
     color: #515156;
     background-color: #f4f4f4;
   }
@@ -139,44 +144,46 @@
 .staticShowButtons {
   display: flex;
 
-  > button:first-child {
+  >button:first-child {
     padding-right: 1.6rem;
   }
 
-  > button:last-of-type {
+  >button:last-of-type {
     padding-left: 1.6rem;
   }
 }
 
 .stickyShowButtons {
-  > button:first-child {
+  >button:first-child {
     position: absolute;
     top: 0.6rem;
     padding-right: 1.6rem;
     height: 4rem;
+
     @include custom-min(960) {
       left: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
       transform: translateX(50%);
     }
   }
 
-  > button:last-of-type {
+  >button:last-of-type {
     position: absolute;
     top: 0.6rem;
     height: 4rem;
     padding-left: 1.6rem;
+
     @include custom-min(960) {
       right: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
       transform: translateX(-50%);
     }
   }
 
-  > ul {
-    > li:first-child {
+  >ul {
+    >li:first-child {
       margin-left: 4.8rem;
     }
 
-    > li:last-child {
+    >li:last-child {
       margin-right: 4.8rem;
     }
   }
@@ -199,72 +206,102 @@
 
 .staticFullScrollWidth {
   min-width: 100vw;
-  max-width: 100vw;
   display: inline-grid;
 
-  &::before {
+  @include min(tablet) {
+    max-width: 100vw;
+  }
+
+  &:not(.staticShowButtons) {
+    &::before {
+      display: none;
+    }
+
+    >ul {
+      >li:first-child {
+        padding-left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2) !important;
+      }
+    }
+  }
+
+  &::before,
+  &::after {
     content: '';
+    display: none;
     position: absolute;
     top: 0;
-    left: 0;
-    display: block;
     background-color: var(--body-background-color, white);
-    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
     height: 4.5rem;
     z-index: 1;
+
+    @include custom-min(960) {
+      display: block;
+    }
+
+    @include custom-min-max(960, 1100) {
+      width: 2.4rem;
+    }
+
+    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem);
+  }
+
+  &::before {
+    left: 0;
   }
 
   &::after {
-    content: '';
-    position: absolute;
-    top: 0;
     right: 0;
-    display: block;
-    background-color: var(--body-background-color, white);
-    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
-    height: 4.5rem;
-    z-index: 1;
   }
 
-  > button:first-child {
+  >button {
     position: absolute;
     z-index: 2;
-    left: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
     height: 4.5rem;
     padding-right: 1.6rem;
-  }
+    left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 2.4rem);
 
-  > button:last-of-type {
-    position: absolute;
-    z-index: 2;
-    right: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 1.6rem);
-    height: 4.5rem;
-    padding-left: 1.6rem;
+    &:last-of-type {
+      left: unset;
+      right: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 2.4rem);
+    }
+
+    @include custom-min-max(960, 1100) {
+      left: 2.4rem;
+
+      &:last-of-type {
+        right: 2.4rem;
+      }
+    }
   }
 
-  > ul {
+  >ul {
     max-width: unset !important;
     margin: 0 !important;
+    padding: 0 1.6rem;
 
     &::-webkit-scrollbar {
       display: block !important;
     }
 
-    > li:first-child {
-      padding-left: calc(
-        (100vw - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem
-      ) !important;
+    >li:first-child {
+      padding-left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 5.8rem) !important;
+
+      @include custom-min-max(960, 1100) {
+        padding-left: 7.2rem !important;
+      }
+
     }
 
-    > li:last-child {
-      padding-right: calc(
-        (100vw - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem
-      ) !important;
+    >li:last-child {
+      padding-right: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 5.8rem) !important;
+
+      @include custom-min-max(960, 1100) {
+        padding-right: 7.2rem !important;
+      }
     }
   }
 }
 
-
-.displayNone{
-   visibility: hidden !important;
+.displayNone {
+  visibility: hidden !important;
 }

package/src/components/organisms/anchor/template-one/anchor.stories.js

@@ -131,6 +131,7 @@ Default.args = {
       { label: 'section-twelf' },
     ],
   },
+  fullScrollWidth: false,
   isShowButtons: false,
   sliderGap: 10,
   headerOffset: 20,
@@ -138,7 +139,7 @@ Default.args = {
 
 export const FullWidth = Template.bind({});
 FullWidth.args = {
-  width: '90%',
+  width: '100%',
   module: {
     items: [
       { label: 'section-one' },
@@ -163,7 +164,7 @@ FullWidth.args = {
 
 export const Buttons = Template.bind({});
 Buttons.args = {
-  width: '90%',
+  width: '100%',
   module: {
     items: [
       { label: 'section-one' },
@@ -180,6 +181,7 @@ Buttons.args = {
       { label: 'section-twelf' },
     ],
   },
+  fullScrollWidth: false,
   isShowButtons: true,
   sliderGap: 10,
   headerOffset: 80,

package/src/styles/utils/_mixins.scss

@@ -146,6 +146,24 @@
   }
 }
 
+@mixin border-gradient-single($color-1, $bgcolor, $radius: 0.8rem, $border-width: 0.1rem) {
+  background: $bgcolor;
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: $radius;
+    border: $border-width solid transparent;
+    background: $color-1 border-box;
+    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: destination-out;
+    mask-composite: exclude;
+  }
+}
+
 @mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {
   display: inline-flex;
   align-items: center;

package/src/styles/utils/variables/_main.scss

@@ -210,5 +210,4 @@
   --contentCollapsibleBox-bg: #fff;
 
   //anchor
-  --anchor-max-width: var(--main-container-max, 96rem);
-}
+  --anchor-max-width: var(--main-container-max, 96rem);}