diff --git a/packages/docs/pages/alert.tsx b/packages/docs/pages/alert.tsx
index 464cf97b7..276c28300 100644
--- a/packages/docs/pages/alert.tsx
+++ b/packages/docs/pages/alert.tsx
@@ -1,7 +1,7 @@
import { AlertProps, Button, H1, H3, Message, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
-import { Code, CodePreview, CodeSnippet, PageNavigation } from '../components';
+import { Code, CodePreview, CodeSnippet, ContentRoutingTabs, List } from '../components';
import {
AlertsManagerAddMethodList,
AlertsManagerClearMethodList,
@@ -14,83 +14,97 @@ import { MessagingItemPropTable, MessagingLinkItemPropTable } from '../PropTable
import { alertsManager } from './_app';
const AlertPage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
-
-
- Alerts are non-disruptive messages that appear at the top right of the window and provide quick, at a glance
- feedback on the outcome of an action.
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const alert = {
- header: 'Optional Headline',
- messages: [
- {
- text: 'Required description copy.',
- link: {
- text: 'Optional Link',
- href: '#',
- },
- },
- ],
- type: 'success',
- onClose: () => null,
- } as AlertProps;
-
- return ;
- }}
- {/* jsx-to-string:end */}
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => (
- <>
-
-
+
Alert
+
+
+
+ Alerts are non-disruptive messages that appear at the top right of the window and provide quick, at-a-glance
+ feedback on the outcome of an action.
+
+ When to use:
+
+ To update merchants about a change or give them advice.
+
+
+
+
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const alert = {
+ header: 'Optional Headline',
+ messages: [
{
- text: 'Note: You should not use the Alert component directly. Instead, inject the AlertsManager component into your app and use the instance created by the createAlertsManager utility function to control which Alerts are displayed.',
+ text: 'Required description copy.',
+ link: {
+ text: 'Optional Link',
+ href: '#',
+ },
},
- ]}
- marginBottom="large"
- />
-
-
-
-
-
-
- ),
- },
- {
- id: 'manager',
- title: 'Alert manager',
- render: () => (
- <>
-
-
- BigDesign comes with an AlertsManager component that will manage and display which
- alerts to display and in which order by type. The order of priority from highest to lowest is{' '}
- error, warning, success, info.
-
-
-
- To use this component, put it in your root component (e.g. place it after GlobalStyles{' '}
- component):
-
-
-
- {`
+ ],
+ type: 'success',
+ onClose: () => null,
+ } as AlertProps;
+
+ return ;
+ }}
+ {/* jsx-to-string:end */}
+
+
+
+
+ (
+ <>
+
+
+
+ ),
+ },
+ {
+ id: 'message-item',
+ title: 'MessageItem',
+ render: () => ,
+ },
+ {
+ id: 'message-link-item',
+ title: 'MessageLinkItem',
+ render: () => ,
+ },
+ ]}
+ />
+
+
+
+
+ BigDesign comes with an AlertsManager component that will manage and display which alerts
+ to display and in which order by type. The order of priority from highest to lowest is error,{' '}
+ warning, success, info.
+
+
+
+ To use this component, put it in your root component (e.g. place it after GlobalStyles{' '}
+ component):
+
+
+
+ {`
export const alertsManager = createAlertsManager(); // import this in child components to use alerts
function App() {
@@ -104,16 +118,16 @@ const AlertPage = () => {
);
}
`}
-
-
Add alert
-
- This works in conjunction with an instance created by createAlertsManager function below. You
- need to export alertsManager instance and then you can import it in child components in order
- to trigger alert:
-
-
-
- {`
+
+
Add alert
+
+ This works in conjunction with an instance created by createAlertsManager function below. You
+ need to export alertsManager instance and then you can import it in child components in order to
+ trigger alert:
+
+
+
+ {`
import { alertsManager } from '../App';
// ...
@@ -121,36 +135,27 @@ const AlertPage = () => {
const alert = {...}; // alert props
alertsManager.add(alert);
`}
-
-
-
-
- The createAlertsManager function returns an instance for managing which alert to display.
-
-
-
- {/* jsx-to-string:start */}
- const alertsManager = createAlertsManager();
- {/* jsx-to-string:end */}
-
-
-
-
-
-
-
-
-
-
- ),
- },
- ];
+
- return (
- <>
-
Alert
+
API
+
+
+ The createAlertsManager function returns an instance for managing which alert to display.
+
+
+
+ {/* jsx-to-string:start */}
+ const alertsManager = createAlertsManager();
+ {/* jsx-to-string:end */}
+
+
+
+
+
+
-
+
+
);
};