Merge branch 'stampy-redesign' into jrhender-420-advanced-content-h-tag

app/components/Article/Contents.tsx

@@ -94,7 +94,6 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
      */
     const glossaryEntry = (e: Element) => {
       const entry = e.textContent && glossary[e?.textContent.toLowerCase().trim()]
-      console.log(e.textContent, entry)
       if (
         // If the contents of this item aren't simply a glossary item word, then
         // something has gone wrong and the glossary-entry should be removed
@@ -123,10 +122,10 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
       addPopup(
         e as HTMLSpanElement,
         `glossary-${entry.term}`,
-        `<div class="glossary-popup flex-container black col-6 small">
+        `<div class="glossary-popup flex-container black small">
               <div class="contents col-8">
-                   <h3>${entry.term}</h3>
-                   <div class="defintion">${entry.contents}</div>
+                   <div class="small-bold">${entry.term}</div>
+                   <div class="defintion small">${entry.contents}</div>
                    ${link || ''}
               </div>
               ${image || ''}

app/components/Article/KeepGoing/index.tsx

@@ -17,12 +17,12 @@ type NextArticleProps = {
 const NextArticle = ({section, next, first}: NextArticleProps) =>
   next && (
     <>
-      <h2 className="padding-bottom-40">Keep going! &#128073;</h2>
+      <h2 className="padding-bottom-40">Keep reading! &#128073;</h2>
       <div className="padding-bottom-24">
-        {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} article in "
+        {first ? 'Start' : 'Continue'} with the {first ? 'first' : 'next'} entry in "
         {section?.title}"
       </div>
-      <div className={`${styles.container} flex-container bordered`}>
+      <div className={`${styles.container} flex-container bordered ${styles.flex_dynamic}`}>
         <div className="vertically-centered white default-bold">{next.title}</div>
         <Button action={questionUrl(next)} className="primary-alt">
           {first ? 'Start' : 'Next'}

app/components/Article/KeepGoing/keepGoing.module.css

@@ -4,3 +4,14 @@
   padding: var(--spacing-32);
   margin-bottom: var(--spacing-56);
 }
+
+@media (max-width: 640px) {
+  .flex_dynamic {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+  }
+  .container {
+    padding: var(--spacing-24);
+  }
+}

app/components/Article/article.css

@@ -66,6 +66,8 @@ article .glossary-entry {
 article .link-popup {
   visibility: hidden;
   opacity: 0;
+  width: 522px;
+  height: 304px;
   position: absolute;
   display: inline-block;
   font: var(--baseFont);
@@ -83,19 +85,20 @@ article .contents a.button {
   font-weight: normal;
 }
 article .link-popup .glossary-popup > .contents {
-  height: 21.46vw;
   padding: var(--spacing-24) var(--spacing-40) var(--spacing-24);
 }
 article .defintion {
+  height: 160px;
   display: -webkit-box;
   /* These are webkit specific things, so might not work in all browsers (firefox handles them fine) */
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5; /* Number of lines you want to display */
+  -webkit-line-clamp: 4; /* Number of lines you want to display */
   overflow: hidden;
   text-overflow: ellipsis;
 }
 article .link-popup .glossary-popup > img {
   width: 100%;
+  height: 303px;
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
@@ -127,6 +130,18 @@ article .footer-comtainer > * {
   margin: var(--spacing-8, 8px);
 }
 
-h1.teal {
-  color: var(--colors-teal-500);
+@media only screen and (max-width: 640px) {
+  article {
+    max-width: 100%;
+  }
+  article .footer-comtainer {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+  article .footer-comtainer > div:nth-child(-n + 2) {
+    flex: 1 1;
+  }
+  article {
+    margin: 0;
+  }
 }

app/components/Article/index.tsx

@@ -33,7 +33,7 @@ const ArticleFooter = (question: Question) => {
             <EditIcon className="no-fill" />
           </Button>
         </div>
-        <span>Did this page help you?</span>
+        <span>Was this page helpful?</span>
 
         <CompositeButton className="flex-container">
           <Action pageid={question.pageid} showText={true} actionType={ActionType.HELPFUL} />
@@ -97,13 +97,14 @@ const Tags = ({tags}: Question) => (
 type ArticleProps = {
   question: Question
   glossary?: Glossary
+  className?: string
 }
-export const Article = ({question, glossary}: ArticleProps) => {
+export const Article = ({question, glossary, className}: ArticleProps) => {
   const {title, text, pageid} = question
 
   return (
-    <article>
-      <h1 className="teal padding-bottom-24">{title}</h1>
+    <article className={className}>
+      <h1 className="teal-500 padding-bottom-24">{title}</h1>
       <ArticleMeta question={question} className="padding-bottom-56" />
 
       <Contents pageid={pageid} html={text || ''} glossary={glossary || {}} />

app/components/ArticlesNav/Menu.tsx

@@ -1,4 +1,5 @@
 import {Link} from '@remix-run/react'
+import ChevronRight from '~/components/icons-generated/ChevronRight'
 import {questionUrl} from '~/routesMapper'
 import type {TOCItem} from '~/routes/questions.toc'
 import './menu.css'
@@ -8,13 +9,14 @@ type Article = {
   path?: string[]
   current?: string
   hideChildren?: boolean
+  className?: string
 }
 
 const DropdownIcon = ({article, path}: Article) => {
   if (!article?.children || article.children.length === 0 || article.pageid === (path && path[0]))
     return null
-  if (!path?.includes(article.pageid)) return <div className="dropdown-icon" />
-  return <div className="dropdown-icon active" />
+  if (!path?.includes(article.pageid)) return <ChevronRight className="dropdown-icon" />
+  return <ChevronRight className="dropdown-icon active" />
 }
 
 const Title = ({article, path, current}: Article) => {
@@ -50,21 +52,26 @@ const ArticleLevel = ({article, path, current, hideChildren}: Article) => {
     >
       <Title article={article} path={path} current={current} />
       {!hideChildren && (
-        <div className={'articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}>
-          {article.children?.map((child) => (
-            <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
-          ))}
-        </div>
+        <>
+          <div
+            className={'grey articles-dropdown' + (path?.includes(article.pageid) ? ' active' : '')}
+          >
+            {article.children?.map((child) => (
+              <ArticleLevel key={child.pageid} article={child} path={path} current={current} />
+            ))}
+          </div>
+          <hr className="mobile-only" />
+        </>
       )}
     </details>
   )
 }
 
-export const ArticlesNav = ({article, path}: Article) => {
+export const ArticlesNav = ({article, path, className}: Article) => {
   const current = path ? path[path.length - 1] : ''
 
   return (
-    <div className="articles-group col-4-5 bordered small">
+    <div className={`articles-group col-4-5 small ${className || ''}`}>
       <ArticleLevel article={article} path={path} current={current} hideChildren />
       <hr />
 

app/components/ArticlesNav/menu.css

@@ -15,16 +15,14 @@
   padding: var(--spacing-8);
   cursor: pointer;
 }
+.article-selector .dropdown-icon,
 .articles-group .dropdown-icon {
-  background-image: url(/assets/chevron-right.svg);
-  background-repeat: no-repeat;
   height: var(--spacing-12);
   margin-left: var(--spacing-8);
-  padding-left: var(--spacing-16);
 }
+.article-selector .dropdown-icon.active,
 .articles-group .article[open] .dropdown-icon {
   transform: rotate(90deg);
-  margin-top: var(--spacing-4);
 }
 
 .articles-group .article {
@@ -51,3 +49,16 @@
   top: 25px;
   left: -5px;
 }
+
+@media (max-width: 640px) {
+  .articles-group {
+    width: 100%;
+  }
+  .article-selector {
+    margin-bottom: var(--spacing-40);
+    justify-content: space-between;
+  }
+  .articles-title {
+    padding: var(--spacing-8) var(--spacing-16);
+  }
+}

app/components/Button/button.css

@@ -1,14 +1,17 @@
 .button {
   cursor: pointer;
   display: inline-flex;
-  height: var(--spacing-56, 56px);
+  min-height: var(--spacing-56, 56px);
   padding: var(--spacing-8) var(--spacing-24);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, 4px);
   box-shadow: 0px var(--spacing-16) var(--spacing-40) 0px rgba(32, 44, 89, 0.05);
   border-radius: var(--border-radius);
   box-sizing: border-box;
+
+  background: var(--colors-white, #ffffff);
+  border: 1px solid var(--colors-cool-grey-200, #dfe3e9);
 }
 
 .primary {

app/components/Button/index.tsx

@@ -7,15 +7,13 @@ type ButtonProps = {
   children?: ReactNode
   className?: string
   tooltip?: string
-  icon?: ReactNode
 }
-const Button = ({children, action, tooltip, icon, className}: ButtonProps) => {
+const Button = ({children, action, tooltip, className}: ButtonProps) => {
   const classes = ['button', className, tooltip && 'tooltip'].filter((i) => i).join(' ')
   if (typeof action === 'string') {
     return (
       <Link to={action} className={classes} data-tooltip={tooltip}>
         {children}
-        {icon && icon}
       </Link>
     )
   }

app/components/CategoriesNav/Menu.tsx

@@ -3,7 +3,7 @@ import {Link} from '@remix-run/react'
 import {SearchInput} from '../SearchInput/Input'
 import {Tag as TagType} from '~/server-utils/stampy'
 import {tagUrl} from '~/routesMapper'
-import styles from './menu.module.css'
+import './menu.css'
 
 interface CategoriesNavProps {
   /**
@@ -14,12 +14,16 @@ interface CategoriesNavProps {
    * Id of selected category
    */
   activeCategoryId: number
+  /**
+   * Class name for the component
+   */
+  className?: string
 }
 
-export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps) => {
+export const CategoriesNav = ({categories, activeCategoryId, className}: CategoriesNavProps) => {
   const [search, onSearch] = useState('')
   return (
-    <div className={styles.categoriesGroup + ' bordered col-4-5'}>
+    <div className={['categoriesGroup bordered col-4-5', className].join(' ')}>
       <h4>Categories</h4>
       <div>
         <SearchInput onChange={onSearch} placeholderText="Filter by keyword" />
@@ -30,9 +34,7 @@ export const CategoriesNav = ({categories, activeCategoryId}: CategoriesNavProps
           <Link
             key={tagId}
             to={tagUrl({tagId, name})}
-            className={[styles.categoryTitle, activeCategoryId == tagId ? 'selected' : ''].join(
-              ' '
-            )}
+            className={['categoryTitle', activeCategoryId == tagId ? 'selected' : ''].join(' ')}
           >
             {name} ({questions.length})
           </Link>

app/components/CategoriesNav/menu.css

@@ -0,0 +1,25 @@
+.categoriesGroup {
+  padding: var(--spacing-12);
+}
+.categoriesGroup > * {
+  padding: var(--spacing-16);
+}
+.categoryTitle {
+  padding: var(--spacing-24);
+  cursor: pointer;
+  display: inline-block;
+  width: 100%;
+}
+@media (max-width: 640px) {
+  .categoriesGroup {
+    width: 100%;
+    height: 100%;
+  }
+  .categoriesGroup.bordered {
+    border: 0;
+    box-shadow: none;
+  }
+  .categoryTitle.selected {
+    background: inherit;
+  }
+}

app/components/ContentBox/box.css

@@ -1,7 +1,7 @@
 .main-container-box-table {
   display: flex;
   justify-content: space-between;
-  margin-top: var(--spacing-80);
+  margin-bottom: var(--spacing-40);
 }
 
 .content-box-table-button {
@@ -57,3 +57,15 @@
   padding: 0;
   padding-right: var(--spacing-8);
 }
+
+@media (max-width: 640px) {
+  .main-container-box-table {
+    flex-direction: column;
+    margin-bottom: var(--spacing-80);
+  }
+
+  .content-box-table {
+    padding: var(--spacing-80);
+    padding-top: 0;
+  }
+}