gatsby-core-theme 1.6.19 → 2.0.0

package/src/hooks/lazy-image/index.js

@@ -1,39 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
-// import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
 
-// When to use this component:
-// 1. If you have 1 image to lazyload
-// 2. If you have images for different breakpoints and want the browser to decide when to serve the images based on the device, bandwidth, etc.
 export default function LazyImage({
   height,
   width,
-  // offset = 200,
   style = {},
   className,
   src = '#',
-  // srcSet = '',
   alt = '',
-  // sizes,
-  // defaultImg,
-  // once = false,
+  defaultImg,
+  loading = 'lazy',
 }) {
-  // const [errorImage, setErrorImage] = useState(false);
+  const [errorImage, setErrorImage] = useState(false);
 
-  // if ((defaultImg && !src) || errorImage === true) {
-  //   return defaultImg;
-  // }
+  if ((defaultImg && !src) || errorImage === true) {
+    return defaultImg;
+  }
 
-  return (
-    <>
-      {/* <LazyLoad
-        height={`${height}px`}
-        width={`${width}px`}
-        offset={offset}
-        debounce={0}
-        once={once}
-      >
+  if (!isNativeImageLazyLoadingSupported()) {
+    const LazyLoad = loadable(() => import(`react-lazyload`));
+    return (
+      <LazyLoad height={`${height}px`} width={`${width}px`} debounce={0}>
         <img
           src={src}
           className={className}
@@ -41,36 +31,32 @@ export default function LazyImage({
           width={width}
           alt={alt}
           style={style}
-          srcSet={srcSet}
-          sizes={sizes}
-          onError={() => setErrorImage(true)}
         />
-      </LazyLoad> */}
-      {/* <noscript> */}
-      <img
-        src={src}
-        loading="lazy"
-        className={className}
-        height={height}
-        width={width}
-        alt={alt}
-        style={style}
-      />
-      {/* </noscript> */}
-    </>
+      </LazyLoad>
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      loading={loading}
+      className={className}
+      height={height}
+      width={width}
+      alt={alt}
+      style={style}
+      onError={() => setErrorImage(true)}
+    />
   );
 }
 
 LazyImage.propTypes = {
   width: PropTypes.number,
   height: PropTypes.number,
-  // offset: PropTypes.number,
   style: PropTypes.shape({}),
   className: PropTypes.string,
   src: PropTypes.string,
   alt: PropTypes.string,
-  // sizes: PropTypes.string,
-  // srcSet: PropTypes.string,
-  // defaultImg: PropTypes.element,
-  // once: PropTypes.bool,
+  defaultImg: PropTypes.element,
+  loading: PropTypes.string,
 };

package/src/hooks/tabs/index.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { forceCheck } from 'react-lazyload';
-import TabList from './tab/tab-list';
+import loadable from '@loadable/component';
 import styles from './tabs.module.scss';
 
 const Tabs = ({
@@ -19,6 +19,8 @@ const Tabs = ({
     showAll ? showAllTabId : `${children[0].props.label}_0`
   );
 
+  const TabList = showTabs ? loadable(() => import('./tab/tab-list')) : null;
+
   const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
     styles[headerClass]
   } ${tabsAlign === 'right' && styles.invertOrder}`;
@@ -31,7 +33,7 @@ const Tabs = ({
   return (
     <>
       <div className={tabHeaderClass}>
-        {showTabs && (
+        {TabList && (
           <TabList
             onClick={onClickTabItem}
             items={children}

package/src/hooks/tabs/tabs.test.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, cleanup, fireEvent } from '@testing-library/react';
+import { render, cleanup, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
 import Tabs from '.';
 
 describe('Tabs Component', () => {
-  test('render tabs', () => {
+  test('render tabs', async () => {
     const { container, getByText } = render(
       <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
         <div label="one" key={1}>
@@ -19,15 +19,18 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
-    expect(container.querySelectorAll('.tabListItem')).toHaveLength(2);
-    // tabsAlign="right"
-    expect(container.querySelectorAll('div.tabsHeader.invertOrder')).toHaveLength(1);
-    // // HeaderComp
-    expect(getByText('my header')).toBeTruthy();
-    expect(getByText('1111111111111')).toBeTruthy();
+
+    await waitFor(() => {
+      expect(container.querySelectorAll('.tabListItem')).toHaveLength(2);
+      // tabsAlign="right"
+      expect(container.querySelectorAll('div.tabsHeader.invertOrder')).toHaveLength(1);
+      // // HeaderComp
+      expect(getByText('my header')).toBeTruthy();
+      expect(getByText('1111111111111')).toBeTruthy();
+    });
   });
 
-  test('show all', () => {
+  test('show all', async () => {
     const { container, getByText } = render(
       <Tabs
         tabsAlign="left"
@@ -45,12 +48,14 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
-    expect(container.querySelectorAll('.tabListItem')).toHaveLength(3);
-    expect(container.querySelectorAll('div.tabsHeader')).toHaveLength(1);
-    expect(getByText('1111111111111222222233333333')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(container.querySelectorAll('.tabListItem')).toHaveLength(3);
+      expect(container.querySelectorAll('div.tabsHeader')).toHaveLength(1);
+      expect(getByText('1111111111111222222233333333')).toBeInTheDocument();
+    });
   });
 
-  test('switch tabs', () => {
+  test('switch tabs', async () => {
     const { getByText } = render(
       <Tabs tabsAlign="right" HeaderComp={<div className="header">my header</div>}>
         <div label="one" key={1}>
@@ -64,11 +69,23 @@ describe('Tabs Component', () => {
         </div>
       </Tabs>
     );
+
+    await waitFor(() => {
+      expect(getByText('two')).toBeTruthy();
+    });
+
     fireEvent.click(getByText('two'));
     expect(getByText('2222222')).toBeTruthy();
-    fireEvent.click(getByText('three'));
+
+    await waitFor(() => {
+      fireEvent.click(getByText('three'));
+    });
+
     expect(getByText('33333333')).toBeTruthy();
-    fireEvent.click(getByText('one'));
+
+    await waitFor(() => {
+      fireEvent.click(getByText('one'));
+    });
     expect(getByText('1111111111111')).toBeTruthy();
   });
 });

package/src/styles/utils/_mixins.scss

@@ -84,3 +84,45 @@
     background: linear-gradient(to bottom, $color2 0, $color1 100%);
   }
 }
+
+@mixin star($border-color: #fba62f, $fill-color: #fba62f) {
+  line-height: 2rem;
+  width: 16px;
+  font-weight: normal;
+  display: inline-block;
+  color: $fill-color;
+  font-size: 15px;
+  position: relative;
+  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;
+
+  &:last-child {
+    margin-right: 0;
+  }
+  &:before {
+    content: '\2605';
+  }
+}
+
+
+@mixin half-star($border-color: #fba62f, $half-empty-color: #fba62f , $half-full-color: white) {
+  line-height: 2rem;
+  width: 16px;
+  font-weight: normal;
+  display: inline-block;
+  color: $half-full-color;
+  font-size: 15px;
+  position: relative;
+  &:before {
+    content: '\2605';
+  }
+  text-shadow: -1px 0 $border-color, 0 1px $border-color, 1px 0 $border-color, 0 -1px $border-color;
+  &:after {
+    content: '\2605';
+    color: $half-empty-color;
+    position: absolute;
+    width: 7px;
+    overflow: hidden;
+    bottom: 0;
+    left: 0;
+  }
+}

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

@@ -9,6 +9,13 @@
   --secondary-text-color: var(--color-4);
   --heading-base-color: var(--color-12);
   --text-link-color: var(--color-13);
+  --full-star-fill-color: #fba62f;  
+  --full-star-border-color: #fba62f;
+  --halfFull-star-fill-color: #fba62f;
+  --halfEmpty-star-fill-color: white;
+  --half-star-border-color: #fba62f;
+  --empty-star-fill-color: white;
+  --empty-star-border-color: grey;
 
   // Font
   --main-font: Nunito;
@@ -51,6 +58,7 @@
   --modal-background-color: white;
 
   --star-rating-color: orange;
+  --selling-point-icon-color: #00889e;
 
   --scroll-to-top-background-color: var(--color-1);