From 885e70629475480d305ba0b722bd72799600da16 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Wed, 11 Dec 2019 20:00:58 +0700
Subject: [PATCH] Link to close button page from modal and notification
 patterns

---
 client/pages/ExplorePage.tsx             | 4 ++--
 client/patterns/modal/Details.tsx        | 5 +++++
 client/patterns/notification/Details.tsx | 5 +++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 117f51e..677bf17 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -62,7 +62,7 @@ const ExplorePage = () => {
                         textAlign: 'center',
                     }}
                 >
-                    Here is the collection of patterns
+                    Here is the collection of 63 patterns
                 </h2>
                 <div style={{ marginBottom: '32px', textAlign: 'center' }}>
                     All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -108,7 +108,6 @@ const ExplorePage = () => {
 
                     <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
                         <CoverCard pattern={Pattern.ButtonWithIcon} />
-                        <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CustomCheckboxButton} />
                         <CoverCard pattern={Pattern.CustomRadioButton} />
                         <CoverCard pattern={Pattern.FloatingLabel} />
@@ -136,6 +135,7 @@ const ExplorePage = () => {
                         <CoverCard pattern={Pattern.Badge} />
                         <CoverCard pattern={Pattern.Card} />
                         <CoverCard pattern={Pattern.Centering} />
+                        <CoverCard pattern={Pattern.CloseButton} />
                         <CoverCard pattern={Pattern.CookieBanner} />
                         <CoverCard pattern={Pattern.CornerRibbon} />
                         <CoverCard pattern={Pattern.DockedAtCorner} />
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 62c97a8..775143f 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -10,6 +11,10 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
             <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can use the <Link to='/patterns/close-button'>close button</Link> to
+                    represent the button for closing the modal.
+                </div>
                 <BrowserFrame
                     content={(
                         <div
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 1554c12..6607bd4 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
             <div style={{ padding: '64px 32px' }}>
+                <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
+                    You can use the <Link to='/patterns/close-button'>close button</Link> to
+                    represent the button for closing the notification.
+                </div>
                 <BrowserFrame
                     content={(
                         <div