gatsby-core-theme 1.6.21 → 2.0.2

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);