Convert scss style to styled components

sledilnik · Dec 1, 2021 · 52a22d9 · 52a22d9
1 parent 2436e2f
commit 52a22d9
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,6 @@
     "react-papaparse": "^3.17.2",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
-    "sass": "^1.44.0",
     "uuid": "^8.3.2",
     "web-vitals": "^1.0.1"
   },

diff --git a/src/components/Shared/Icons.js b/src/components/Shared/Icons.js
@@ -35,6 +35,7 @@ import { ReactComponent as Close } from 'assets/icon-close.svg';
 import { ReactComponent as Link } from 'assets/icon-link.svg';
 import { ReactComponent as PhoneBig } from 'assets/icon-phone--big.svg';
 import { ReactComponent as Phone } from 'assets/icon-phone.svg';
+import { ReactComponent as Copy } from 'assets/icon-copy.svg';
 
 export { default as MenuIcon } from '@mui/icons-material/Menu';
 export { default as RoomIcon } from '@mui/icons-material/Room';
@@ -63,6 +64,7 @@ const icons = {
   CheckGreen,
   CheckWhite,
   Close,
+  Copy,
   Dentist,
   DentistWhite,
   Facebook,

diff --git a/src/const/theme.js b/src/const/theme.js
@@ -44,6 +44,11 @@ const theme = {
     elementBoxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.15)',
     linkBoxShadow: 'inset 0 -1px 0 white, inset 0 -4px #95C83F',
     linkBoxShadowHover: 'inset 0 -1px 0 white, inset 0 -20px #95C83F',
+    summaryBorder: '#DEDEDE',
+    summaryText: 'rgba(0, 0, 0, 0.75)',
+    tableTdBorder: 'rgba(0, 0, 0, 0.45)',
+    dataTermBoxShadow: 'inset 0 -1px 0 white, inset 0 -4px #95C83F',
+    dataTermBoxShadowHover: 'inset 0 -1px 0 white, inset 0 -20px #95C83F',
   },
 };
 

diff --git a/src/pages/Faq.js b/src/pages/Faq.js
@@ -1,7 +1,6 @@
 import { useRef } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import * as Styled from './styles/Markdown';
-import './style.scss';
 import { t } from 'i18next';
 
 export default function Faq() {
@@ -15,18 +14,18 @@ export default function Faq() {
       node.open = true;
       window.scrollTo({
         top: node.getBoundingClientRect().top,
-        behavior: "smooth"
-      })
+        behavior: 'smooth',
+      });
     }
   }, []);
 
   // copy url of the definition
-  const handleCopy = (e) => {
+  const handleCopy = e => {
     const element = e.target;
     const dummy = document.createElement('input');
-    let text = window.location.href + "#" + element.nextSibling.id;
-    if (window.location.hash !== "") {
-      text = window.location.href.split("#")[0] + "#" + element.nextSibling.id;
+    let text = window.location.href + '#' + element.nextSibling.id;
+    if (window.location.hash !== '') {
+      text = window.location.href.split('#')[0] + '#' + element.nextSibling.id;
     }
     document.body.appendChild(dummy);
     dummy.value = text;
@@ -38,8 +37,8 @@ export default function Faq() {
     setTimeout(() => {
       element.className = 'icon copy';
       element.title = t('copy');
-    }, 2000)
-  }
+    }, 2000);
+  };
 
   useEffect(() => {
     document.body.style.overflow = 'auto';
@@ -57,11 +56,11 @@ export default function Faq() {
   // append attribute 'title' with glossary definition to each element with attribute 'data-term'
   useEffect(() => {
     if (faqRef.current) {
-      faqRef.current.querySelectorAll("span[data-term]").forEach((el) => {
+      faqRef.current.querySelectorAll('span[data-term]').forEach(el => {
         for (let term of response.glossary) {
           if (term.slug === el.getAttribute('data-term')) {
-            el.setAttribute("title", term.definition.replace(/<[^>]*>?/gm, ''));
-            el.setAttribute("tabindex", 0);
+            el.setAttribute('title', term.definition.replace(/<[^>]*>?/gm, ''));
+            el.setAttribute('tabindex', 0);
           }
         }
       });
@@ -80,28 +79,28 @@ export default function Faq() {
         <br></br>
         {response.faq.map((faq, key) => {
           return (
-            <div className="collapsable" key={key}>
-              <img className="icon copy" onClick={handleCopy} title={t('copy')} alt={t('copy')} />
-              <details id={faq.slug} ref={scroll}>
-                <summary>{faq.question}</summary>
+            <Styled.Collapsable className="collapsable" key={key}>
+              <Styled.Icon name="Copy" onClick={handleCopy} title={t('copy')} alt={t('copy')} />
+              <Styled.Details id={faq.slug} ref={scroll}>
+                <Styled.Summary>{faq.question}</Styled.Summary>
                 <Styled.Markdown key={key}>{faq.answer}</Styled.Markdown>
-              </details>
-            </div>
-          )
+              </Styled.Details>
+            </Styled.Collapsable>
+          );
         })}
         <h2>{t('faq.glossary')}</h2>
         {response.glossary.map((glossary, key) => {
           return (
-            <div className="collapsable" key={key}>
-              <img className="icon copy" onClick={handleCopy} title={t('copy')} alt={t('copy')} />
-              <details id={glossary.slug} ref={scroll}>
-                <summary>{glossary.term}</summary>
+            <Styled.Collapsable className="collapsable" key={key}>
+              <Styled.Icon name="Copy" onClick={handleCopy} title={t('copy')} alt={t('copy')} />
+              <Styled.Details id={glossary.slug} ref={scroll}>
+                <Styled.Summary>{glossary.term}</Styled.Summary>
                 <Styled.Markdown key={key}>{glossary.definition}</Styled.Markdown>
-              </details>
-            </div>
-          )
+              </Styled.Details>
+            </Styled.Collapsable>
+          );
         })}
       </Styled.StaticPageWrapper>
-    </Styled.CustomContainer >
+    </Styled.CustomContainer>
   );
 }
diff --git a/src/pages/styles/Markdown.js b/src/pages/styles/Markdown.js
@@ -1,5 +1,23 @@
 import { styled } from '@mui/material/styles';
 import MarkdownBase from 'markdown-to-jsx';
+import iconExpand from 'assets/expand-dd.svg';
+import iconClose from 'assets/close-dd.svg';
+import iconCheck from 'assets/icon-check.svg';
+import iconCopy from 'assets/icon-copy.svg';
+
+import IconBase from 'components/Shared/Icons';
+
+export const Icon = styled(IconBase)(({ theme }) => {
+  return {
+    width: '28px',
+    cursor: 'pointer',
+    padding: '5px',
+    position: 'absolute',
+    top: '-3px',
+    right: '30px',
+    zIndex: 10,
+  };
+});
 
 // Names of CustomContainer and StaticPageWrapper matches classes from 'style.scss'
 export const CustomContainer = styled('main')(({ theme }) => ({
@@ -13,14 +31,13 @@ export const CustomContainer = styled('main')(({ theme }) => ({
 }));
 
 export const StaticPageWrapper = styled('div')(({ theme }) => ({
+  fontSize: '14px',
   padding: '32px 17px 27px 17px',
 
   '@media only screen and (min-width: 768px)': {
     margin: '32px 32px 27px 32px',
   },
-}));
 
-export const Markdown = styled(MarkdownBase)(({ theme }) => ({
   h1: { marginBottom: '32px', fontSize: '28px' },
 
   'h2, h3, h4': {
@@ -34,7 +51,7 @@ export const Markdown = styled(MarkdownBase)(({ theme }) => ({
     marginBottom: '28px',
   },
 
-  ul: { paddingInlineStart: '40px', fontSize: '14px' },
+  'ul, ol': { paddingInlineStart: '40px', fontSize: '14px', marginBottom: '1rem' },
 
   'h1 + p > em': {
     display: 'block',
@@ -72,4 +89,128 @@ export const Markdown = styled(MarkdownBase)(({ theme }) => ({
     },
     strong: { fontWeight: 600 },
   },
+
+  'span[data-term]': {
+    cursor: 'help',
+    fontWeight: 600,
+    transition: 'all 0.35s ease-in-out',
+    boxShadow: theme.MD.dataTermBoxShadow,
+    textDecoration: 'none',
+    color: 'rgba(0, 0, 0, 0.8)',
+
+    '&:hover ': {
+      textDecoration: 'none',
+      color: 'rgba(0, 0, 0, 0.8)',
+      fontWeight: 600,
+      boxShadow: theme.MD.dataTermBoxShadowHover,
+    },
+  },
+
+  // 'tr + tr': {
+  //   marginTop: '27px',
+  // },
+  // table: {
+  //   width: '100%',
+  //   tableLayout: 'fixed',
+  //   textAlign: 'left',
+  //   marginBottom: '1rem',
+  //   td: {
+  //     padding: '15px 0',
+  //     width: '50%',
+  //     borderTop: `1px solid ${theme.MD.tableTdBorder}`,
+  //   },
+  // },
+
+  '@keyframes show-dd': {
+    from: {
+      transform: 'translateY(-8px)',
+      opacity: 0.1,
+    },
+    to: {
+      transform: 'translateY(0px)',
+      opacity: 1,
+    },
+  },
 }));
+
+export const Collapsable = styled('div')(({ theme }) => {
+  return {
+    position: 'relative',
+    fontSize: 'inherit',
+    '.icon': {
+      width: '28px',
+      cursor: 'pointer',
+      padding: '5px',
+      position: 'absolute',
+      top: '-3px',
+      right: '30px',
+      zIndex: 10,
+      '&.copy': {
+        content: `url(${iconCopy})`,
+      },
+      '&.check': {
+        content: `url(${iconCheck})`,
+      },
+    },
+  };
+});
+
+// !todo remove Markdown after everything is merged and use in MarkdownBase in  FAQ and About page
+export const Markdown = styled(MarkdownBase)(({ theme }) => ({}));
+
+export const Details = styled('details')(({ theme }) => {
+  return {
+    fontSize: 'inherit',
+    marginBottom: '24px',
+    '> *:not(summary)': {
+      position: 'relative',
+      display: 'none',
+      width: '90%',
+    },
+    '> *:nth-child(2)': {
+      marginTop: '2px',
+      paddingTop: '12px',
+    },
+    '&[open]': {
+      '> *:not(summary)': {
+        display: 'block',
+        animation: 'show-dd 0.5s ease-out',
+      },
+      'summary::after': {
+        content: `url(${iconClose})`,
+      },
+    },
+  };
+});
+
+export const Summary = styled('summary')(({ theme }) => {
+  return {
+    cursor: 'pointer',
+    userSelect: 'none',
+    fontSize: 'inherit',
+    fontWeight: 'bold',
+    fontStretch: 'normal',
+    fontStyle: 'normal',
+    lineHeight: 1.71,
+    color: theme.MD.summaryColor,
+    position: 'relative',
+    paddingRight: '18%',
+    '@media only screen and (min-width: 768px)': {
+      paddingRight: '10%',
+    },
+    '::marker': {
+      display: 'none',
+      content: '""',
+    },
+    '::after': {
+      content: `url(${iconExpand})`,
+      display: 'block',
+      position: 'absolute',
+      right: 0,
+      top: 0,
+    },
+    '$:focus': {
+      outline: 'none',
+    },
+  };
+});