Merge pull request #315 from 30-seconds/cosmos

Resolves #307

package.json

@@ -47,7 +47,7 @@
     "node-fetch": "^2.6.1",
     "node-sass": "^4.14.1",
     "prettier": "^2.2.1",
-    "prismjs": "^1.19.0",
+    "prismjs": "^1.23.0",
     "prop-types": "^15.7.2",
     "puppeteer": "^5.5.0",
     "react": "^16.13.0",

src/blocks/parsers/markdown/index.js

@@ -36,43 +36,40 @@ const blogTransformers = [
     blogType: 'any',
     matcher: /<pre class="language-([^"]+)" data-code-language="([^"]*)">([\s\S]*?)<\/pre>/g,
     replacer:
-      '<pre class="blog-code language-$1 notranslate" data-code-language="$2">$3</pre>',
+      '<pre class="language-$1 notranslate" data-code-language="$2">$3</pre>',
   },
   // Convert blog blockquotes to the appropriate elements
   {
     blogType: 'any',
     matcher: /<blockquote>\s*\n*\s*<p>([\s\S]*?)<\/p>\s*\n*\s<\/blockquote>/g,
-    replacer: '<blockquote class="blog-quote">$1</blockquote>',
+    replacer: '<blockquote class="fs-md md:fs-lg">$1</blockquote>',
   },
   // Convert blog titles h3 and below to the appropriate elements
   {
     blogType: 'any',
     matcher: /<h([123])>([\s\S]*?)<\/h\d>/g,
-    replacer: '<h3 class="blog-body-title">$2</h3>',
+    replacer:
+      '<h3 class="card-body-title txt-150 fs-lg md:fs-xl f-alt">$2</h3>',
   },
   // Convert blog titles h4 and above to the appropriate elements
   {
     blogType: 'any',
     matcher: /<h([456])>([\s\S]*?)<\/h\d>/g,
-    replacer: '<h4 class="blog-body-title">$2</h4>',
-  },
-  // Convert blog tables to the appropriate elements
-  {
-    blogType: 'any',
-    matcher: /<table>([\s\S]*?)<\/table>/g,
-    replacer: '<table class="blog-table">$1</table>',
+    replacer:
+      '<h4 class="card-body-title txt-150 fs-md md:fs-lg f-alt">$2</h4>',
   },
   // Convert blog cross tables to the appropriate elements
   {
     blogType: 'any',
-    matcher: /<table class="([^"]+)">\s*\n*\s*<thead>\s*\n*\s*<tr>\s*\n*\s*<th><\/th>/g,
-    replacer: '<table class="$1 with-primary-column"><thead><tr><th></th>',
+    matcher: /<table>\s*\n*\s*<thead>\s*\n*\s*<tr>\s*\n*\s*<th><\/th>/g,
+    replacer: '<table class="primary-col"><thead><tr><th></th>',
   },
   // Convert image credit to the appropriate element
   {
     blogType: 'any',
     matcher: /<p>\s*\n*\s*<strong>Image credit:<\/strong>([\s\S]*?)<\/p>/g,
-    replacer: '<p class="blog-image-credit">Image credit: $1</p>',
+    replacer:
+      '<p class="card-image-credit card-fw-section">Image credit: $1</p>',
   },
 ];
 
@@ -103,6 +100,12 @@ export class MarkdownParser {
     if (!language)
       throw new Error(`Prism doesn't support language '${language}'.`);
     const languageData = prismComponents.languages[language];
+    // Add extras for specific languages (better highlighting)
+    if (language === 'javascript' && !Prism.languages['js-extras'])
+      require(`prismjs/components/prism-js-extras.js`);
+    if (language === 'css' && !Prism.languages['js-extras'])
+      require(`prismjs/components/prism-css-extras.js`);
+
     if (Prism.languages[language] || languageData.option === `default`) return;
 
     if (languageData.require) {
@@ -208,7 +211,7 @@ export class MarkdownParser {
       result.fullDescription = result.fullDescription.replace(
         /(<p>)*<img src="\.\/([^"]+)"([^>]*)>(<\/p>)*/g,
         (match, openTag, imgSrc, imgRest) =>
-          `<img class="card-image" src="${assetPath}/${imgSrc}"${imgRest}>`
+          `<img class="card-fw-section" src="${assetPath}/${imgSrc}"${imgRest}>`
       );
     } else {
       Object.entries(codeBlocks).forEach(([key, value]) => {

src/blocks/utilities/extractor/index.js

@@ -195,17 +195,6 @@ export class Extractor {
           }
         )
       ),
-      JSONSerializer.serializeToDir(
-        ...Chunk.createStaticPageChunks(
-          outPath,
-          '/settings',
-          'SettingsPage',
-          0.05,
-          {
-            stringLiterals: literals.settings,
-          }
-        )
-      ),
       JSONSerializer.serializeToDir(
         ...Chunk.createStaticPageChunks(
           outPath,

src/blocks/utilities/screenshot/index.js

@@ -57,6 +57,8 @@ export class Screenshot {
 
         // Style card
         const card = document.querySelector('.snippet-card');
+        card.classList.remove('srfc-02dp');
+        card.classList.add('srfc-02db');
         card.style.maxWidth = '800px';
         card.style.zIndex = '8';
         // Add logo inside the card

src/components/atoms/_index.scss

@@ -6,5 +6,4 @@
 @import './pageBackdrop';
 @import './pageTitle';
 @import './snippetPreview';
-@import './tagList';
 @import './toggle';

src/components/atoms/button/codepenButton/index.jsx

@@ -55,7 +55,7 @@ const CodepenButton = ({
         })}
       />
       <button
-        className='btn codepen-btn icon icon-codepen'
+        className='btn no-shd action-btn fs-no md:fs-sm icon icon-codepen'
         title={literals.codepen}
         onClick={() => {
           // eslint-disable-next-line camelcase

src/components/atoms/button/codepenButton/index.test.jsx

@@ -25,13 +25,11 @@ describe('<CodepenButton />', () => {
   it('should render correctly', () => {
     expect(wrapper.querySelectorAll('form')).toHaveLength(1);
     expect(wrapper.querySelectorAll('form > input')).toHaveLength(1);
-    expect(wrapper.querySelectorAll('button.btn.codepen-btn')).toHaveLength(1);
+    expect(wrapper.querySelectorAll('button.btn')).toHaveLength(1);
   });
 
   it('should have an appropriate title attribute', () => {
-    expect(
-      wrapper.querySelectorAll('button.btn.codepen-btn[title]')
-    ).toHaveLength(1);
+    expect(wrapper.querySelectorAll('button.btn[title]')).toHaveLength(1);
     expect(button.title).toBe(literals.codepen);
   });
 

src/components/atoms/button/copyButton/index.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'typedefs/proptypes';
 import { useGtagEvent } from 'components/hooks';
 import copyToClipboard from 'copy-to-clipboard';
-import { Button } from 'components/atoms/button';
 import { combineClassNames } from 'utils';
 import literals from 'lang/en/client/common';
 
@@ -12,7 +11,6 @@ const propTypes = {
 
 /**
  * Button that copies the given text to clipboard.
- * Dependent on the sibling `Button` (`RegularButton`) component.
  * Dependent on `copy-to-clipboard` external module.
  * @param {string} text - Text to be copied when the button is clicked.
  */
@@ -38,8 +36,8 @@ const CopyButton = ({ text }) => {
   }, [active]);
 
   return (
-    <Button
-      className={combineClassNames`copy-btn icon ${
+    <button
+      className={combineClassNames`btn no-shd action-btn fs-no md:fs-sm icon ${
         active ? 'icon-check active' : 'icon-clipboard'
       }`}
       title={literals.copyToClipboard}
@@ -51,7 +49,7 @@ const CopyButton = ({ text }) => {
       }}
     >
       {buttonText}
-    </Button>
+    </button>
   );
 };
 

src/components/atoms/button/copyButton/index.test.jsx

@@ -27,13 +27,13 @@ describe('<CopyButton />', () => {
   afterEach(cleanup);
 
   it('should render correctly', () => {
-    expect(wrapper.querySelectorAll('button.btn.copy-btn')).toHaveLength(1);
+    expect(wrapper.querySelectorAll('button.btn.icon-clipboard')).toHaveLength(
+      1
+    );
   });
 
   it('should have an appropriate title attribute', () => {
-    expect(wrapper.querySelectorAll('button.btn.copy-btn[title]')).toHaveLength(
-      1
-    );
+    expect(wrapper.querySelectorAll('button.btn[title]')).toHaveLength(1);
     expect(button.title).toBe(literals.copyToClipboard);
   });
 
@@ -44,15 +44,13 @@ describe('<CopyButton />', () => {
       expect(copyToClipboardMock.mock.calls.length).toBeGreaterThan(0);
       expect(setTimeout).toHaveBeenCalled();
       await waitFor(() =>
-        expect(
-          wrapper.querySelectorAll('button.btn.copy-btn.active')
-        ).toHaveLength(1)
+        expect(wrapper.querySelectorAll('button.btn.active')).toHaveLength(1)
       );
       fireEvent.click(button);
       jest.advanceTimersByTime(750);
       await waitFor(() =>
         expect(
-          wrapper.querySelectorAll('button.btn.copy-btn:not(.active)')
+          wrapper.querySelectorAll('button.btn:not(.active)')
         ).toHaveLength(1)
       );
     });

src/components/atoms/button/regularButton/_index.scss

@@ -1,32 +1,18 @@
-// Colors
-:root {
-  --button-back-color: #3B3EFC;
-  --button-fore-color: #FFFFFF;
-  --button-shadow-color: rgba(0, 32, 128, 0.25);
-  --button-back-color-tertiary: #131418;
-}
-
-// Dark mode colors
-.dark {
-  --button-shadow-color: rgba(0, 3, 10, 0.22);
-}
-
 .btn, a.btn {
   display: inline-block;
   padding: 0.625rem 0.875rem;
   margin-top: 0.75rem;
-  background: var(--button-back-color);
-  color: var(--button-fore-color);
+  background: var(--clr-btn-bg);
+  color: var(--clr-txt-200);
   cursor: pointer;
   border: none;
-  border-radius: 1rem;
-  font-size: 1.125rem;
+  border-radius: var(--br-xl);
   line-height: 1.5rem;
   transition: 0.3s ease all;
-  box-shadow:  0px 2px 4px var(--button-shadow-color);
+  box-shadow: var(--shd-el-02dp);
 
   &:hover, &:focus {
-    box-shadow: 0px 3px 10px var(--button-shadow-color);
+    box-shadow: var(--shd-el-04dp);
     text-decoration: none;
     outline: none;
   }
@@ -48,6 +34,37 @@
       animation-timing-function: ease-in-out;
     }
   }
+
+  // Utility to remove box-shadow from btn elements
+  &.no-shd {
+    box-shadow: none;
+
+    &:hover, &:focus {
+      box-shadow: none;
+    }
+  }
+
+  // Utility for btn elements that display a link color on hover
+  &.link-btn {
+
+    &:hover, &:focus {
+      color: var(--clr-link);
+    }
+  }
+
+  // Utility for btn elements that look like actions
+  &.action-btn {
+    background: transparent;
+    color: var(--clr-action);
+    text-transform: uppercase;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    opacity: .87;
+
+    &:hover, &:focus {
+      opacity: 1;
+    }
+  }
 }
 
 @keyframes active {

src/components/atoms/button/regularButton/index.jsx

@@ -22,7 +22,7 @@ const Button = ({
   ...rest // Needs props to be have accessible name if only icon etc.
 }) => (
   <button
-    className={combineClassNames`btn ${className}`}
+    className={combineClassNames`btn fs-md ${className}`}
     onClick={onClick}
     {...rest}
   >

src/components/atoms/button/regularButton/index.test.jsx

@@ -31,7 +31,7 @@ describe('<Button />', () => {
     });
 
     it('should render with the default className', () => {
-      expect(wrapper.querySelector('button').className).toBe('btn');
+      expect(wrapper.querySelectorAll('.btn')).toHaveLength(1);
     });
   });
 });

src/components/atoms/button/shareButton/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'typedefs/proptypes';
 import { useGtagEvent } from 'components/hooks';
-import { Button } from 'components/atoms/button';
 import literals from 'lang/en/client/common';
 
 const propTypes = {
@@ -10,7 +9,7 @@ const propTypes = {
 };
 
 /**
- * Generic button component.
+ * Button that shares the given page to clipboard.
  */
 const ShareButton = ({ pageTitle, pageDescription }) => {
   const gtagCallback = useGtagEvent('click');
@@ -22,8 +21,8 @@ const ShareButton = ({ pageTitle, pageDescription }) => {
   if (!canShare) return null;
 
   return (
-    <Button
-      className='share-btn icon icon-share'
+    <button
+      className='btn no-shd action-btn fs-no md:fs-sm icon icon-share'
       title={literals.share}
       onClick={() => {
         // eslint-disable-next-line camelcase
@@ -40,7 +39,7 @@ const ShareButton = ({ pageTitle, pageDescription }) => {
       }}
     >
       {literals.share}
-    </Button>
+    </button>
   );
 };