From 4ae6247fed3da4e2b1ccd2655552eb053bae0549 Mon Sep 17 00:00:00 2001
From: Maria Navarro <39739180+MariaJose@users.noreply.github.com>
Date: Thu, 10 Feb 2022 12:54:42 -0600
Subject: [PATCH] feat(docs): Update Link documentation page to use new layout
(#712)
* feat(docs): delete items variable
* feat(docs): add periods to the end of the sentences
* feat(docs): fix typos and grammar
---
packages/docs/pages/button.tsx | 6 +-
packages/docs/pages/link.tsx | 112 +++++++++++++++++++++------------
2 files changed, 75 insertions(+), 43 deletions(-)
diff --git a/packages/docs/pages/button.tsx b/packages/docs/pages/button.tsx
index 65923030e..8926220dd 100644
--- a/packages/docs/pages/button.tsx
+++ b/packages/docs/pages/button.tsx
@@ -43,7 +43,7 @@ const ButtonPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
- <>
+ Buttons are calls to action used throughout the product experience.
{/* jsx-to-string:start */}
@@ -52,7 +52,7 @@ const ButtonPage = () => {
{/* jsx-to-string:end */}
-
+
),
},
{
@@ -80,7 +80,7 @@ const ButtonPage = () => {
},
{
id: 'action-types',
- title: 'Action Types',
+ title: 'Action types',
render: () => (
diff --git a/packages/docs/pages/link.tsx b/packages/docs/pages/link.tsx
index 6574511f5..184f800b8 100644
--- a/packages/docs/pages/link.tsx
+++ b/packages/docs/pages/link.tsx
@@ -1,52 +1,84 @@
import { H1, Link, Panel, Text } from '@bigcommerce/big-design';
-import React from 'react';
+import React, { Fragment } from 'react';
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { LinkPropTable, MarginPropTable } from '../PropTables';
const LinkPage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- A simple wrapper for anchor elements. Use instead of {''}. Supports all native anchor element
- attributes.
-
-
- {/* jsx-to-string:start */}
- Link Example
- {/* jsx-to-string:end */}
-
-
-
- You can also include and external icon.
-
- {/* jsx-to-string:start */}
-
- Learn More
-
- {/* jsx-to-string:end */}
-
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => } />,
- },
- ];
-
return (
<>
Link
-
+
+ Provides navigation to another page
+ When to use:
+
+ Navigate to an external webpage
+ Navigate to helpful documentation
+
+
+
+
+ (
+
+
+ A simple wrapper for anchor elements. Use instead of {''}. Supports all native anchor element
+ attributes.
+
+
+ {/* jsx-to-string:start */}
+ Link example
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'external-link',
+ title: 'External link',
+ render: () => (
+
+ You can also include an external icon.
+
+ {/* jsx-to-string:start */}
+
+ Learn more
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ }
+ renderPanel={false}
+ nativeElement={['a', 'all']}
+ />
+
+
+
+
+ Use the external prop when a link navigates away from the control panel.
+ ,
+ <>Usually within a sentence to provide additional guidance or information.,
+ <>Use descriptive text to set clear expectations of the link destination.,
+ ]}
+ discouraged={[<>Avoid using links for actions – use a button instead.]}
+ />
+
);
};