Skip to content

Commit

Permalink
feat(docs): fix code editor bug part 3 (#748)
Browse files Browse the repository at this point in the history
  • Loading branch information
@MariaJose
MariaJose authored Mar 2, 2022
1 parent b1b6470 commit 38ac255
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 37 deletions.
14 changes: 7 additions & 7 deletions packages/docs/pages/box.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Flex, H1, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
import React, { Fragment } from 'react';
import styled from 'styled-components';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable } from '../components';
Expand All @@ -26,7 +26,7 @@ const BoxPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>Used as a simple container or as a base to build other components.</Text>

<CodePreview>
Expand All @@ -36,14 +36,14 @@ const BoxPage = () => {
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'shadows',
title: 'Shadows',
render: () => (
<>
<Fragment key="shadows">
<Text>
<Code primary>Box</Code> also supports multiple shadows, here is an example of how they look like:
</Text>
Expand All @@ -60,14 +60,14 @@ const BoxPage = () => {
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'extending',
title: 'Extending',
render: () => (
<>
<Fragment key="extending">
<Text>
<Code primary>Box</Code> is extendable, here is an example on how to create an{' '}
<Code primary>Avatar</Code> component extending from <Code primary>Box</Code> with a couple of extra
Expand All @@ -91,7 +91,7 @@ const BoxPage = () => {
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
10 changes: 5 additions & 5 deletions packages/docs/pages/display.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, H1, Link, Panel, Text } from '@bigcommerce/big-design';
import React from 'react';
import React, { Fragment } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, NextLink } from '../components';
import { DisplayPropTable } from '../PropTables';
Expand Down Expand Up @@ -32,7 +32,7 @@ const DisplayPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>
A few of our components expose a <Code primary>display</Code> prop in order to change the CSS
display property. See a components prop table to see if this prop exists.
Expand All @@ -44,14 +44,14 @@ const DisplayPage = () => {
</Box>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'responsive',
title: 'Responsive',
render: () => (
<>
<Fragment key="responsive">
<Text>
It's also possible to use the prop with responsive{' '}
<NextLink href="/breakpoints">breakpoints</NextLink>:
Expand Down Expand Up @@ -79,7 +79,7 @@ const DisplayPage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/pages/flex.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Flex, FlexItem, H1, Link, 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 {
Expand Down Expand Up @@ -61,7 +61,7 @@ const FlexPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview scope={{ ExampleBox }}>
<CodePreview scope={{ ExampleBox }} key="basic">
{/* jsx-to-string:start */}
<Flex
alignContent="stretch"
Expand Down Expand Up @@ -91,7 +91,7 @@ const FlexPage = () => {
id: 'justify-content',
title: 'Justify content',
render: () => (
<>
<Fragment key="justify-content">
<Text>
Flex container's can space their element with uniform spacing in-between each flex item using the{' '}
<Code primary>justifyContent</Code> prop.
Expand All @@ -115,14 +115,14 @@ const FlexPage = () => {
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'column-layout',
title: 'Column layout',
render: () => (
<>
<Fragment key="column-layout">
<Text>
One way of creating a column based layout is using a combination of the{' '}
<Code primary>flexWrap</Code> prop on the flex container with an additional{' '}
Expand All @@ -147,14 +147,14 @@ const FlexPage = () => {
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'sort-content',
title: 'Sort content',
render: () => (
<>
<Fragment key="sort-content">
<Text>
Using the <Code primary>flexOrder</Code> prop you can reorganize content based on the size generated
by setting the <Code primary>flexGrow</Code> prop. <Code primary>flexGrow</Code> allows the flex
Expand All @@ -179,7 +179,7 @@ const FlexPage = () => {
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
22 changes: 11 additions & 11 deletions packages/docs/pages/message.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { H1, Message, 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 { MarginPropTable, MessagePropTable } from '../PropTables';
Expand Down Expand Up @@ -31,7 +31,7 @@ const MessagePage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<>
<Fragment key="basic">
<Text>
A message primarily used for displaying page/table messaging, feature/discover/system level
messages, or even non-critical messaging.
Expand All @@ -54,14 +54,14 @@ const MessagePage = () => {
/>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'types',
title: 'Types',
render: () => (
<>
<Fragment key="types">
<Text>
There are four types of <Code primary>Messages</Code> based on the level of message you want to
display.
Expand Down Expand Up @@ -93,14 +93,14 @@ const MessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'header',
title: 'Header',
render: () => (
<>
<Fragment key="header">
<Text>
<Code primary>Messages</Code> allow you to pass an optional <Code primary>header</Code> prop.
</Text>
Expand All @@ -122,14 +122,14 @@ const MessagePage = () => {
</>
{/* 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 MessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'actions',
title: 'Actions',
render: () => (
<>
<Fragment key="actions">
<Text>
<Code primary>Messages</Code> allow you to pass an optional <Code primary>actions</Code> prop.
</Text>
Expand All @@ -183,7 +183,7 @@ const MessagePage = () => {
</>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down
12 changes: 6 additions & 6 deletions packages/docs/pages/tooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Box, Button, Flex, Grid, H1, Panel, Text, Tooltip } from '@bigcommerce/big-design';
import { WarningIcon } from '@bigcommerce/big-design-icons';
import React from 'react';
import React, { Fragment } from 'react';

import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
import { TooltipPropTable } from '../PropTables';
Expand Down Expand Up @@ -35,7 +35,7 @@ const TooltipPage = () => {
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview>
<CodePreview key="basic">
{/* jsx-to-string:start */}
<Tooltip trigger={<Button>Hover</Button>} placement="right">
Tooltip Content
Expand All @@ -48,7 +48,7 @@ const TooltipPage = () => {
id: 'anchor',
title: 'Anchor',
render: () => (
<>
<Fragment key="anchor">
<Text>
Tooltips can wrap any <Code>Element</Code>. Tooltip will show on hover.
</Text>
Expand All @@ -75,14 +75,14 @@ const TooltipPage = () => {
</Flex>
{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
{
id: 'placement',
title: 'Placement',
render: () => (
<>
<Fragment key="placement">
<Text>
Tooltip can be anchored in different directions with the <Code primary>placement</Code> property. It
will automatically find a position if there's not enough space in the chosen direction.
Expand All @@ -107,7 +107,7 @@ const TooltipPage = () => {

{/* jsx-to-string:end */}
</CodePreview>
</>
</Fragment>
),
},
]}
Expand Down

0 comments on commit 38ac255

Please sign in to comment.