Skip to content

Commit

Permalink
feat(docs): fix code editor bug part 2 (#747)
Browse files Browse the repository at this point in the history 
* feat(docs): fix code editor bug part2

* feat(docs): fix code editor bug part2
  • Loading branch information
@MariaJose
MariaJose authored Mar 2, 2022
1 parent 6d9b1f9 commit b1b6470
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 35 deletions.
10 changes: 5 additions & 5 deletions packages/docs/pages/counter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Counter, Form, FormGroup, H1, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { CounterPropTable } from '../PropTables';
Expand Down Expand Up @@ -34,7 +34,7 @@ const CounterPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>
<Code primary>Counters</Code> are stylized numerical form controls with the ability to control
validation.
Expand Down Expand Up @@ -64,14 +64,14 @@ const CounterPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'error-states',
title: 'Error states',
render: () => (
<>
<Fragment key="error-states">
<Text>
<Code primary>Counters</Code> allow you to pass in an <Code primary>error</Code> message that will
control the styles of a <Code primary>Counter</Code>. The logic on the counter can be controlled
Expand Down Expand Up @@ -110,7 +110,7 @@ const CounterPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
10 changes: 5 additions & 5 deletions packages/docs/pages/datepicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Datepicker, Form, FormGroup, H1, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { DatepickerPropTable } from '../PropTables';
Expand Down Expand Up @@ -31,7 +31,7 @@ const DatepickerPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>Use to select a single date from the calendar.</Text>

<CodePreview>
Expand All @@ -56,14 +56,14 @@ const DatepickerPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'error-states',
title: 'Error states',
render: () => (
<>
<Fragment key="error-state">
<Text>
<Code primary>Datepicker</Code> allows you to pass in an <Code primary>error</Code> message that
will control the styles of a counter. The logic on the <Code primary>Datepicker</Code> can be
Expand Down Expand Up @@ -103,7 +103,7 @@ const DatepickerPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
12 changes: 6 additions & 6 deletions packages/docs/pages/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const FormPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>
Form fields are essential to any website or web application. Unique <Code>id</Code>'s' will be
auto-generated for the form fields and labels <Code>for</Code> attribute, unless manually specified.
Expand All @@ -91,7 +91,7 @@ const FormPage = () => {
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
Expand Down Expand Up @@ -177,7 +177,7 @@ const FormPage = () => {
id: 'layout',
title: 'Layout',
render: () => (
<>
<Fragment key="layout">
<Text>
You can up to 3 <Code>Input</Code> components in row to add more dimension to a{' '}
<Code>FormGroup</Code>. <Code>Radio</Code> and <Code>Checkbox</Code> components will never display
Expand Down Expand Up @@ -209,14 +209,14 @@ const FormPage = () => {
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'validation',
title: 'Validation',
render: () => (
<>
<Fragment key="validation">
<Text>
All form controls are tied to <Code primary>onChange</Code> or equivalent event handlers. Validation
messages can be passed through the <Code>error</Code> prop. All input errors in an{' '}
Expand Down Expand Up @@ -277,7 +277,7 @@ const FormPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
22 changes: 11 additions & 11 deletions packages/docs/pages/inline-message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { H1, InlineMessage, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
import React, { Fragment } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List, NextLink } from '../components';
import { InlineMessagePropTable } from '../PropTables';
Expand Down Expand Up @@ -31,7 +31,7 @@ const InlineMessagePage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>
An inline message, mostly used for displaying alerts within <Code primary>Modals</Code>. Is a
condensed version of the <NextLink href="/message">Message</NextLink> component.
Expand All @@ -54,14 +54,14 @@ const InlineMessagePage = () => {
/>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'types',
title: 'Types',
render: () => (
<>
<Fragment key="types">
<Text>
There are four types of <Code primary>InlineMessages</Code> based on the level of message you want
to display.
Expand Down Expand Up @@ -93,14 +93,14 @@ const InlineMessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'header',
title: 'Header',
render: () => (
<>
<Fragment key="header">
<Text>
<Code primary>InlineMessages</Code> allow you to pass an optional <Code primary>header</Code> prop.
</Text>
Expand All @@ -122,14 +122,14 @@ const InlineMessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'onclose',
title: 'onClose',
render: () => (
<>
<Fragment key="onclose">
<Text>Toggles the visibility of the close button, and provides an on click callback.</Text>

<CodePreview>
Expand All @@ -149,14 +149,14 @@ const InlineMessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'actions',
title: 'Actions',
render: () => (
<>
<Fragment key="actions">
<Text>
<Code primary>InlineMessages</Code> allow you to pass an optional <Code primary>actions</Code> prop.
</Text>
Expand All @@ -183,7 +183,7 @@ const InlineMessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/pages/textarea.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Form, FormGroup, H1, Panel, Text, Textarea } from '@bigcommerce/big-design';
import React, { useState } from 'react';
import React, { Fragment, useState } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { TextareaPropTable } from '../PropTables';
Expand Down Expand Up @@ -30,7 +30,7 @@ const TextAreaPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview>
<CodePreview key="basic">
{/* jsx-to-string:start */}
{function Example() {
const [value, setValue] = useState('');
Expand Down Expand Up @@ -61,7 +61,7 @@ const TextAreaPage = () => {
id: 'error-state',
title: 'Error state',
render: () => (
<>
<Fragment key="error-state">
<Text>
<Code primary>Textareas</Code> allow you to pass in an <Code primary>error</Code> message that will
control the styles of an input. The logic on the input can be controlled with the{' '}
Expand All @@ -84,14 +84,14 @@ const TextAreaPage = () => {
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'controlling-rows',
title: 'Controlling rows',
render: () => (
<>
<Fragment key="controlling-rows">
<Text>
By default, a <Code primary>Textarea</Code> displays with <Code>3</Code> rows. In order to set the
intial amount of rows, pass in the <Code>rows</Code> prop. There can only be a maximum of{' '}
Expand All @@ -112,14 +112,14 @@ const TextAreaPage = () => {
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'resizable',
title: 'Resizable',
render: () => (
<>
<Fragment key="resizable">
<Text>
You can also control whether <Code primary>Textarea</Code> components are resizeable. Resizing is
only available on the vertical axis.
Expand All @@ -134,7 +134,7 @@ const TextAreaPage = () => {
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down

0 comments on commit b1b6470

Please sign in to comment.