Merge pull request #838 from CodeForAfrica/fix/ui_longform_tags_location

@/ui Move tags to the bottom of an article
CodeForAfrica · Aug 13, 2024 · 19dc343 · 19dc343
2 parents e44dc81 + 8c20398
commit 19dc343
Show file tree

Hide file tree

Showing 10 changed files with 180 additions and 162 deletions.
diff --git a/apps/civicsignalblog/contrib/dokku/Dockerfile b/apps/civicsignalblog/contrib/dokku/Dockerfile
@@ -1 +1 @@
-FROM codeforafrica/codeforafrica-ui:0.1.9
+FROM codeforafrica/codeforafrica-ui:0.1.10
diff --git a/apps/civicsignalblog/package.json b/apps/civicsignalblog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "civicsignalblog",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the (temporary) CivicSignal blog",

diff --git a/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.js b/apps/civicsignalblog/src/components/ArticleHeader/ArticleHeader.js
@@ -1,14 +1,12 @@
 import { Section } from "@commons-ui/core";
-import { Link, RichTypography } from "@commons-ui/next";
+import { RichTypography } from "@commons-ui/next";
 import PropTypes from "prop-types";
 import React from "react";
 
-import ChoiceChip from "@/civicsignalblog/components/ChoiceChip";
-import ChoiceChipGroup from "@/civicsignalblog/components/ChoiceChipGroup";
 import ShareThisPage from "@/civicsignalblog/components/ShareThisPage";
 
 const ArticleHeader = React.forwardRef(function ArticleHeader(props, ref) {
-  const { date, excerpt, sx, tags, title, primaryTag } = props;
+  const { date, excerpt, sx, title } = props;
 
   return (
     <Section
@@ -48,19 +46,6 @@ const ArticleHeader = React.forwardRef(function ArticleHeader(props, ref) {
       >
         {excerpt}
       </RichTypography>
-      {tags?.length > 0 ? (
-        <ChoiceChipGroup color="default" sx={{ mt: { xs: 2.5, md: 5 } }}>
-          {tags.map((tag) => (
-            <ChoiceChip
-              label={tag.name}
-              value={tag.slug}
-              key={tag.slug}
-              component={Link}
-              href={`/${primaryTag}?tag=${tag.slug}`}
-            />
-          ))}
-        </ChoiceChipGroup>
-      ) : null}
       <ShareThisPage
         title="Share This Article"
         sx={{ mt: { xs: 2.5, md: 5 } }}
@@ -73,14 +58,6 @@ ArticleHeader.propTypes = {
   title: PropTypes.string,
   date: PropTypes.string,
   excerpt: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-ArticleHeader.defaultProps = {
-  title: undefined,
-  date: undefined,
-  tags: undefined,
-  excerpt: undefined,
 };
 
 export default ArticleHeader;
diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.js
@@ -1,11 +1,13 @@
 /* eslint-disable camelcase */
 import { Section } from "@commons-ui/core";
-import { Figure } from "@commons-ui/next";
+import { Figure, Link } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import React from "react";
 
 import ArticleHeader from "@/civicsignalblog/components/ArticleHeader";
 import Author from "@/civicsignalblog/components/Author";
+import ChoiceChip from "@/civicsignalblog/components/ChoiceChip";
+import ChoiceChipGroup from "@/civicsignalblog/components/ChoiceChipGroup";
 import CMSContent from "@/civicsignalblog/components/CMSContent";
 import SectionDivider from "@/civicsignalblog/components/SectionDivider";
 import equalsIgnoreCase from "@/civicsignalblog/utils/equalsIgnoreCase";
@@ -20,7 +22,7 @@ function ArticlePage({
   publishedOn,
   primaryTag,
 }) {
-  const filteredTags = tags.filter(
+  const filteredTags = tags?.filter(
     (tag) => !equalsIgnoreCase(tag.name, primaryTag),
   );
   return (
@@ -39,8 +41,6 @@ function ArticlePage({
       <ArticleHeader
         title={title}
         date={publishedOn}
-        tags={filteredTags}
-        primaryTag={primaryTag}
         excerpt={excerpt}
         sx={{
           maxWidth: {
@@ -64,31 +64,59 @@ function ArticlePage({
       >
         {content}
       </CMSContent>
-      <SectionDivider
-        sx={{
-          maxWidth: {
-            sm: "648px",
-            md: "912px",
-          },
-          px: { xs: 2.5, sm: 0 },
-          my: { xs: 2.5, md: 5 },
-        }}
-      />
-      <Section
-        component="address"
-        sx={{
-          maxWidth: {
-            sm: "648px",
-            md: "912px",
-          },
-          mb: { xs: 2.5, md: 7.5 },
-          px: { xs: 2.5, sm: 0 },
-        }}
-      >
-        {authors?.map((author) => (
-          <Author {...author} key={author.name} />
-        ))}
-      </Section>
+      {authors?.length > 0 ? (
+        <Section
+          component="address"
+          sx={{
+            maxWidth: {
+              sm: "648px",
+              md: "912px",
+            },
+            mb: { xs: 2.5, md: 5 },
+            px: { xs: 2.5, sm: 0 },
+          }}
+        >
+          {authors?.map((author) => (
+            <Author {...author} key={author.name} />
+          ))}
+        </Section>
+      ) : null}
+      {filteredTags?.length > 0 ? (
+        <>
+          <SectionDivider
+            sx={{
+              maxWidth: {
+                sm: "648px",
+                md: "912px",
+              },
+              my: { xs: 2.5, md: 5 },
+              px: { xs: 2.5, sm: 0 },
+            }}
+          />
+          <Section
+            sx={{
+              maxWidth: {
+                sm: "648px",
+                md: "912px",
+              },
+              mb: { xs: 2.5, md: 7.5 },
+              px: { xs: 2.5, sm: 0 },
+            }}
+          >
+            <ChoiceChipGroup color="default" sx={{ mt: { xs: 2.5, md: 5 } }}>
+              {filteredTags.map((tag) => (
+                <ChoiceChip
+                  label={tag.name}
+                  value={tag.slug}
+                  key={tag.slug}
+                  component={Link}
+                  href={`/${primaryTag}?tag=${tag.slug}`}
+                />
+              ))}
+            </ChoiceChipGroup>
+          </Section>
+        </>
+      ) : null}
     </Box>
   );
 }

diff --git a/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js b/apps/civicsignalblog/src/components/ArticlePage/ArticlePage.snap.js
@@ -33,23 +33,6 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       >
         Article
       </div>
-      <div
-        class="MuiToggleButtonGroup-root css-qg4su5-MuiToggleButtonGroup-root"
-        role="group"
-      >
-        <a
-          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1f523vq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
-          href="/tag1?tag=tag2"
-          tabindex="0"
-          value="tag2"
-        >
-          <span
-            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
-          >
-            tag2
-          </span>
-        </a>
-      </div>
       <div
         class="MuiStack-root css-yhfzs2-MuiStack-root"
       >
@@ -106,15 +89,8 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
     <section
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-z5w0rf-MuiContainer-root"
     />
-    <div
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-13ttudx-MuiContainer-root"
-    >
-      <hr
-        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
-      />
-    </div>
     <address
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1o0bwi8-MuiContainer-root"
     >
       <div
         class="MuiStack-root css-ty68jk-MuiStack-root"
@@ -163,6 +139,34 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
         </div>
       </div>
     </address>
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1ke15ni-MuiContainer-root"
+    >
+      <hr
+        class="MuiDivider-root MuiDivider-fullWidth css-18tdphm-MuiDivider-root"
+      />
+    </div>
+    <div
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1fwha7w-MuiContainer-root"
+    >
+      <div
+        class="MuiToggleButtonGroup-root css-qg4su5-MuiToggleButtonGroup-root"
+        role="group"
+      >
+        <a
+          class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-clickable MuiChip-clickableColorDefault MuiChip-filledDefault css-1f523vq-MuiTypography-root-MuiLink-root-MuiButtonBase-root-MuiChip-root"
+          href="/tag1?tag=tag2"
+          tabindex="0"
+          value="tag2"
+        >
+          <span
+            class="MuiChip-label MuiChip-labelMedium css-1n6oebb-MuiChip-label"
+          >
+            tag2
+          </span>
+        </a>
+      </div>
+    </div>
   </article>
 </div>
 `;
diff --git a/apps/codeforafrica/contrib/dokku/Dockerfile b/apps/codeforafrica/contrib/dokku/Dockerfile
@@ -1 +1 @@
-FROM codeforafrica/codeforafrica-ui:1.0.54
+FROM codeforafrica/codeforafrica-ui:1.0.55
diff --git a/apps/codeforafrica/package.json b/apps/codeforafrica/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codeforafrica",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "private": true,
   "author": "Code for Africa <[email protected]>",
   "description": "This is the main CFA site.",

diff --git a/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.js b/apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.js
@@ -1,14 +1,12 @@
 import { Section } from "@commons-ui/core";
-import { Link, RichTypography } from "@commons-ui/next";
+import { RichTypography } from "@commons-ui/next";
 import PropTypes from "prop-types";
 import React from "react";
 
-import ChoiceChip from "@/codeforafrica/components/ChoiceChip";
-import ChoiceChipGroup from "@/codeforafrica/components/ChoiceChipGroup";
 import ShareThisPage from "@/codeforafrica/components/ShareThisPage";
 
 const ArticleHeader = React.forwardRef(function ArticleHeader(props, ref) {
-  const { date, excerpt, sx, tags, title, primaryTag } = props;
+  const { date, excerpt, sx, title } = props;
 
   return (
     <Section
@@ -48,19 +46,6 @@ const ArticleHeader = React.forwardRef(function ArticleHeader(props, ref) {
       >
         {excerpt}
       </RichTypography>
-      {tags?.length > 0 ? (
-        <ChoiceChipGroup color="default" sx={{ mt: { xs: 2.5, md: 5 } }}>
-          {tags.map((tag) => (
-            <ChoiceChip
-              label={tag.name}
-              value={tag.slug}
-              key={tag.slug}
-              component={Link}
-              href={`/${primaryTag}?tag=${tag.slug}`}
-            />
-          ))}
-        </ChoiceChipGroup>
-      ) : null}
       <ShareThisPage
         title="Share This Article"
         sx={{ mt: { xs: 2.5, md: 5 } }}
@@ -73,14 +58,6 @@ ArticleHeader.propTypes = {
   title: PropTypes.string,
   date: PropTypes.string,
   excerpt: PropTypes.string,
-  tags: PropTypes.arrayOf(PropTypes.shape({})),
-};
-
-ArticleHeader.defaultProps = {
-  title: undefined,
-  date: undefined,
-  tags: undefined,
-  excerpt: undefined,
 };
 
 export default ArticleHeader;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		FROM codeforafrica/codeforafrica-ui:0.1.9
		FROM codeforafrica/codeforafrica-ui:0.1.10
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		FROM codeforafrica/codeforafrica-ui:1.0.54
		FROM codeforafrica/codeforafrica-ui:1.0.55