From 20524a8a5d5999c5eb9851da836af750fb6dc064 Mon Sep 17 00:00:00 2001
From: Maria Navarro <39739180+MariaJose@users.noreply.github.com>
Date: Thu, 17 Feb 2022 09:05:04 -0600
Subject: [PATCH] feat(docs): add do and dont section (#720)

---
 packages/docs/pages/panel.tsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/docs/pages/panel.tsx b/packages/docs/pages/panel.tsx
index c3f77ef25..9d56ce937 100644
--- a/packages/docs/pages/panel.tsx
+++ b/packages/docs/pages/panel.tsx
@@ -1,7 +1,7 @@
 import { H1, Panel, Text } from '@bigcommerce/big-design';
 import React from 'react';
 
-import { Code, CodePreview, List } from '../components';
+import { Code, CodePreview, GuidelinesTable, List } from '../components';
 import { MarginPropTable, PanelPropTable } from '../PropTables';
 
 const PanelPage = () => {
@@ -50,6 +50,25 @@ const PanelPage = () => {
       <Panel header="Props" headerId="props">
         <PanelPropTable inheritedProps={<MarginPropTable collapsible />} renderPanel={false} />
       </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          recommended={[
+            <>
+              <Code primary>Panel</Code> should use headings that set clear expectations about the content inside.
+            </>,
+            <>
+              <Code primary>Panel</Code> should prioritize information so the most important content comes first.
+            </>,
+          ]}
+          discouraged={[
+            <>
+              <Code primary>Panel</Code> should avoid too many call-to-action buttons or links and have only one primary
+              call to action.
+            </>,
+          ]}
+        />
+      </Panel>
     </>
   );
 };