gatsby-core-theme 30.0.2 → 30.0.4

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+## [30.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.3...v30.0.4) (2023-10-02)
+
+
+### Code Refactoring
+
+* added svg opacity for pagination ([364c734](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/364c734702c4c721aa098ab1360b7863cf9f2cd1))
+* responsive styles to pagination ([f08e99d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f08e99d72936de3199d05a5785e53fc6962172de))
+
+
+* Merge branch 'tm-3633-pagination' into 'master' ([41bd33f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/41bd33fc4158af689d7fa5a9bb401b9fce31f880))
+
+## [30.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.2...v30.0.3) (2023-09-28)
+
+
+### Code Refactoring
+
+* add inactive arrow bg colour ([1cf3fef](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1cf3fef8aea64f6391e939690ff18281ad8b73c2))
+* changes to custom icons and defaults ([d1d54f3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d1d54f3727dcc3d3c5e5f8f7ce13b2e9acd55749))
+* remove unwanted icon ([614b2f1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/614b2f1e96133dd2c86aeb28f6032a2a405e6e7e))
+* restore pagination styles ([84d1e4a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/84d1e4a967d136de5b4d130895b9839a75d9e61b))
+* test pagination grid for ios < 14 ([1caa107](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1caa107a011bf00f9d70da1ee134f243f9d26567))
+
+
+* Merge branch 'tm-3628-author-box' into 'master' ([d984ec8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d984ec8b9c7061ba0e0b70958acd77ffc4e963a4))
+* Merge branch 'tm-3628-author-box' into 'master' ([38682a3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/38682a3541cad9411802db610acc73bd6a4d23f5))
+
+
+### Tests
+
+* test ios css ([cad3d44](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cad3d44799d355761b8c0805b18c1241b7e46628))
+
 ## [30.0.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.1...v30.0.2) (2023-09-27)
 
 

package/package.json

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

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

@@ -32,18 +32,21 @@ export default function AuthorBox({
   showReadMore = true,
   readTimeIcon = <FaClock title="Clock Icon" />,
   contReadIcon = <FaArrowRight title="Right-pointing Arrow Icon" />,
+  socialIcons = {
+    facebook: <FaFacebookSquare title="Facebook Icon" />,
+    instagram: <FaInstagram title="Instagram Icon" />,
+    linkedin: <FaLinkedin title="Linkedin Icon" />,
+    twitter: <FaTwitter title="Twitter icon" />,
+    tiktok: <IoLogoTiktok title="Tiktok Icon" />,
+  },
 }) {
   const { translations } = useContext(Context) || {};
   const socialLinks = [
-    {
-      id: 'fb',
-      link: author?.facebook_profile,
-      icon: <FaFacebookSquare title="Facebook Icon" />,
-    },
-    { id: 'ig', link: author?.instagram_profile, icon: <FaInstagram title="Instagra Icon" /> },
-    { id: 'li', link: author?.linkedin_profile, icon: <FaLinkedin title="Linkedin Icon" /> },
-    { id: 'tw', link: author?.twitter_profile, icon: <FaTwitter title="Twitter Icon" /> },
-    { id: 'tt', link: author?.tik_tok, icon: <IoLogoTiktok title="Tiktok Icon" /> },
+    { id: 'fb', link: author?.facebook_profile, icon: socialIcons?.facebook },
+    { id: 'ig', link: author?.instagram_profile, icon: socialIcons?.instagram },
+    { 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 },
   ];
   const biographyRef = useRef(null);
   const [isReadMore, setIsReadMore] = useState(showReadMore);
@@ -257,4 +260,5 @@ AuthorBox.propTypes = {
   readTimeIcon: PropTypes.node,
   contReadIcon: PropTypes.node,
   showReadMore: PropTypes.bool,
+  socialIcons: PropTypes.shape({}),
 };

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

@@ -9,7 +9,7 @@
   height: calc(var(--pagination-height, 4rem) - 1rem);
   background-color: var(--pagination-background-color, #eeebe5);
 
-  @include min(mobile-m) {
+  @include min(mobile) {
     width: var(--pagination-width, 4rem);
     height: var(--pagination-height, 4rem);
     font-size: var(--pagination-font-size, 1.6rem);
@@ -19,12 +19,18 @@
 
 .pagination {
   padding: 1.6rem 0 !important;
-  @include flex-align(center, center);
-  gap: var(--pagination-gap, 0.8rem);
+  display: grid;
+  column-gap: var(--pagination-gap, 0.8rem);
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: center;
 
   ul {
-    @include flex-align(center, center);
-    gap: var(--pagination-midpoints-gap, 0);
+    display: grid;
+    column-gap: var(--pagination-midpoints-gap, 0);
+    grid-auto-flow: column;
+    align-items: center;
+    justify-content: center;
     background-color: var(--pagination-midpoints-background-color, #eeebe5);
     border-radius: var(--pagination-midpoints-border-radius, 100px);
 
@@ -42,11 +48,23 @@
   .button {
     cursor: not-allowed;
     color: var(--pagination-inactive-color, #ffffff);
+    fill: var(--pagination-inactive-color, #ffffff);
+    background-color: var(--pagination-inactive-background-color, var(--pagination-background-color, #eeebe5));
     @extend .padd;
 
+    > svg {
+      opacity: var(--pagination-inactive-opacity, 1);
+    }
+
     &.isActive {
       color: var(--pagination-active-color, #2e3337);
+      fill: var(--pagination-active-color, #2e3337);
+      background-color: var(--pagination-background-color, #eeebe5);
       cursor: pointer;
+
+      > svg {
+        opacity: 1;
+      }
     }
   }
 }