fix(Article-ArticleNav): add icon to article navigation button (#591)

sabertazimi · Apr 15, 2022 · cb858d5 · cb858d5
1 parent 0439965
commit cb858d5
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 12 deletions.
diff --git a/src/components/Article/ArticleNav.tsx b/src/components/Article/ArticleNav.tsx
@@ -1,6 +1,11 @@
 import { FlexContainer } from '@components';
 import type { PostMetaType } from '@types';
 import { Button } from 'antd';
+import {
+  ArrowLeftOutlined,
+  ArrowRightOutlined,
+  HomeOutlined,
+} from '@ant-design/icons';
 import classNames from 'classnames';
 import { Link } from 'gatsby';
 import React from 'react';
@@ -13,34 +18,38 @@ const ArticleNav = ({ post: { prevPost, nextPost } }: Props): JSX.Element => (
   <FlexContainer className="justify-between" role="navigation">
     <Button
       className={classNames(
+        'flex-container',
         'w-full h-24 mb-6',
         'text-2xl align-bottom rounded-none',
         'md:mb-0 md:w-5/12',
         'button-primary'
       )}
       size="large"
+      icon={prevPost ? <ArrowLeftOutlined /> : <HomeOutlined />}
     >
       <Link
-        className="font-extrabold text-light"
+        className="m-auto font-extrabold text-light"
         to={prevPost ? prevPost.slug : '/posts'}
       >
         {prevPost ? prevPost.title : 'Back to Home'}
       </Link>
     </Button>
     <Button
       className={classNames(
+        'flex-container',
         'w-full h-24 mb-6',
         'text-2xl align-bottom rounded-none',
         'md:mb-0 md:w-5/12',
         'button-primary'
       )}
       size="large"
+      icon={nextPost ? <ArrowRightOutlined /> : <HomeOutlined />}
     >
       <Link
-        className="font-extrabold text-light"
+        className="m-auto font-extrabold text-light"
         to={nextPost ? nextPost.slug : '/posts'}
       >
-        {nextPost ? nextPost.title : 'Back to HomePage'}
+        {nextPost ? nextPost.title : 'Back to Home'}
       </Link>
     </Button>
   </FlexContainer>

diff --git a/src/components/Article/__snapshots__/Article.test.tsx.snap b/src/components/Article/__snapshots__/Article.test.tsx.snap
@@ -190,24 +190,62 @@ exports[`Article should render correctly (snapshot) 1`] = `
       style={Object {}}
     >
       <button
-        className="ant-btn ant-btn-default ant-btn-lg w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
+        className="ant-btn ant-btn-default ant-btn-lg flex-container w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
         onClick={[Function]}
         type="button"
       >
+        <span
+          aria-label="arrow-left"
+          className="anticon anticon-arrow-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 000 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
         <a
-          className="font-extrabold text-light"
+          className="m-auto font-extrabold text-light"
           href="/javascriptBasicNotes/"
         >
           JavaScript Basic Notes
         </a>
       </button>
       <button
-        className="ant-btn ant-btn-default ant-btn-lg w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
+        className="ant-btn ant-btn-default ant-btn-lg flex-container w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
         onClick={[Function]}
         type="button"
       >
+        <span
+          aria-label="arrow-right"
+          className="anticon anticon-arrow-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="arrow-right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z"
+            />
+          </svg>
+        </span>
         <a
-          className="font-extrabold text-light"
+          className="m-auto font-extrabold text-light"
           href="/javascriptAdvancedNotes/"
         >
           JavaScript Advanced Notes
@@ -547,27 +585,65 @@ exports[`Article should render correctly with partial data (snapshot) 1`] = `
       style={Object {}}
     >
       <button
-        className="ant-btn ant-btn-default ant-btn-lg w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
+        className="ant-btn ant-btn-default ant-btn-lg flex-container w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
         onClick={[Function]}
         type="button"
       >
+        <span
+          aria-label="home"
+          className="anticon anticon-home"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="home"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
+            />
+          </svg>
+        </span>
         <a
-          className="font-extrabold text-light"
+          className="m-auto font-extrabold text-light"
           href="/posts"
         >
           Back to Home
         </a>
       </button>
       <button
-        className="ant-btn ant-btn-default ant-btn-lg w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
+        className="ant-btn ant-btn-default ant-btn-lg flex-container w-full h-24 mb-6 text-2xl align-bottom rounded-none md:mb-0 md:w-5/12 button-primary"
         onClick={[Function]}
         type="button"
       >
+        <span
+          aria-label="home"
+          className="anticon anticon-home"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="home"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"
+            />
+          </svg>
+        </span>
         <a
-          className="font-extrabold text-light"
+          className="m-auto font-extrabold text-light"
           href="/posts"
         >
-          Back to HomePage
+          Back to Home
         </a>
       </button>
     </div>