Skip to content

Commit

Permalink
feat(docs): update icon page to use new layout (#756)
Browse files Browse the repository at this point in the history 
* feat(docs): update icon page to use new layout

* feat(docs): update icon page to use new layout

* feat(docs): add comma to a sentence
  • Loading branch information
@MariaJose
MariaJose authored Mar 14, 2022
1 parent d32c2df commit 5af0ada
Showing 1 changed file with 185 additions and 154 deletions.
339 changes: 185 additions & 154 deletions packages/docs/pages/icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ import {
RUFlagIcon,
USFlagIcon,
} from '@bigcommerce/big-design-icons/flags';
import React, { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';

import { Code, CodePreview, CodeSnippet, PageNavigation } from '../components';
import { Code, CodePreview, CodeSnippet, ContentRoutingTabs, List, NextLink } from '../components';
import { FlagIconPropTable, IconPropTable } from '../PropTables';

type BigDesignIcons = Omit<typeof import('@bigcommerce/big-design-icons'), 'createStyledIcon' | 'useUniqueId'>;
Expand All @@ -35,162 +35,193 @@ const IconsPage = () => {
fetchIcons();
}, []);

const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>To use an icon import the component from the package:</Text>
<CodeSnippet>{`import { CheckIcon } from '@bigcommerce/big-design-icons';`}</CodeSnippet>
<Text>Use it anywhere in your app:</Text>
<CodePreview>
{/* jsx-to-string:start */}
<CheckIcon color="success" size="xxxLarge" />
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Country flags">
<Text>
A complete list of available flags is located{' '}
<Link href="https://flagicons.lipis.dev/" target="_blank">
here
</Link>
.
</Text>

<Text>To use a flag import the component from the package:</Text>

<CodeSnippet>{`import { USFlagIcon } from '@bigcommerce/big-design-icons/flags';`}</CodeSnippet>

<Text>Use it anywhere in your app:</Text>

<CodePreview scope={{ USFlagIcon }}>
{/* jsx-to-string:start */}
<USFlagIcon size="xxxLarge" />
{/* jsx-to-string:end */}
</CodePreview>

<CodePreview
scope={{
ARFlagIcon,
AUFlagIcon,
CAFlagIcon,
CLFlagIcon,
CNFlagIcon,
DEFlagIcon,
FRFlagIcon,
GBFlagIcon,
JPFlagIcon,
KRFlagIcon,
MXFlagIcon,
RUFlagIcon,
USFlagIcon,
}}
>
{/* jsx-to-string:start */}
{function Example() {
const [value, setValue] = useState('');
const handleChange = (val) => setValue(val);

return (
<Form>
<FormGroup>
<Select
filterable={false}
label="Countries"
maxHeight={300}
onOptionChange={handleChange}
options={[
{ value: 'us', content: 'United States', icon: <USFlagIcon /> },
{ value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
{ value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
{ value: 'en', content: 'England', icon: <GBFlagIcon /> },
{ value: 'fr', content: 'France', icon: <FRFlagIcon /> },
{ value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
{ value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
{ value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
{ value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
{ value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
{ value: 'cn', content: 'China', icon: <CNFlagIcon /> },
{ value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
{ value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
</FormGroup>
</Form>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => (
<>
<IconPropTable>
<CodeSnippet showControls={false} language="bash">
npm install @bigcommerce/big-design-icons // or yarn add @bigcommerce/big-design-icons
</CodeSnippet>
</IconPropTable>
<FlagIconPropTable>
<InlineMessage
type="warning"
messages={[
{
text: 'Flags are a submodule of the Icons package "@bigcommerce/big-design-icons", you will need to add the package first using "yarn add @bigcommerce/big-design-icons".',
},
]}
marginBottom="medium"
/>
</FlagIconPropTable>
</>
),
},
{
id: 'icons',
title: 'Available icons',
render: () => (
<Panel header="Available icons">
<Flex flexWrap="wrap" justifyContent="center">
{Object.keys(icons).map((iconName) => {
const Icon = icons[iconName];

return (
<Flex
key={iconName}
style={{ width: '300px' }}
flexDirection="column"
borderRadius="normal"
justifyContent="center"
alignItems="center"
padding="large"
>
<Icon size="xxxLarge" />
<Code>{`<${iconName} />`}</Code>
</Flex>
);
})}
</Flex>
</Panel>
),
},
];

return (
<>
<H1>Icon</H1>

<PageNavigation items={items} />
<Panel header="Overview" headerId="overview">
<Text>
BigDesign offers a variety of <NextLink href={{ hash: 'available-icons' }}>icon</NextLink> components that can
be used in a project. We also provide{' '}
<NextLink href={{ query: 'implementation=country-flags' }}>Country flags</NextLink> icons that can be
imported.
</Text>
<Text>
To use the icons install <Code primary>@bigcommerce/big-design-icons</Code> package from npm.
</Text>

<Text bold>When to use:</Text>
<List>
<List.Item>To represent an action or a status.</List.Item>
<List.Item>To provide additional visual cues.</List.Item>
</List>
</Panel>

<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<Fragment key="basic">
<Text>To use an icon, import the component from the package:</Text>
<CodeSnippet>{`import { CheckIcon } from '@bigcommerce/big-design-icons';`}</CodeSnippet>
<Text>Use it anywhere in your app:</Text>
<CodePreview>
{/* jsx-to-string:start */}
<CheckIcon color="success" size="xxxLarge" />
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
{
id: 'country-flags',
title: 'Country flags',
render: () => (
<Fragment key="country-flags">
<Text>
A complete list of available flags is located{' '}
<Link href="https://flagicons.lipis.dev/" target="_blank">
here
</Link>
.
</Text>

<Text>To use a flag import the component from the package:</Text>

<CodeSnippet>{`import { USFlagIcon } from '@bigcommerce/big-design-icons/flags';`}</CodeSnippet>

<Text>Use it anywhere in your app:</Text>

<CodePreview scope={{ USFlagIcon }}>
{/* jsx-to-string:start */}
<USFlagIcon size="xxxLarge" />
{/* jsx-to-string:end */}
</CodePreview>

<CodePreview
scope={{
ARFlagIcon,
AUFlagIcon,
CAFlagIcon,
CLFlagIcon,
CNFlagIcon,
DEFlagIcon,
FRFlagIcon,
GBFlagIcon,
JPFlagIcon,
KRFlagIcon,
MXFlagIcon,
RUFlagIcon,
USFlagIcon,
}}
>
{/* jsx-to-string:start */}
{function Example() {
const [value, setValue] = useState('');
const handleChange = (val) => setValue(val);

return (
<Form>
<FormGroup>
<Select
filterable={false}
label="Countries"
maxHeight={300}
onOptionChange={handleChange}
options={[
{ value: 'us', content: 'United States', icon: <USFlagIcon /> },
{ value: 'mx', content: 'Mexico', icon: <MXFlagIcon /> },
{ value: 'ca', content: 'Canada', icon: <CAFlagIcon /> },
{ value: 'en', content: 'England', icon: <GBFlagIcon /> },
{ value: 'fr', content: 'France', icon: <FRFlagIcon /> },
{ value: 'gr', content: 'Germany', icon: <DEFlagIcon /> },
{ value: 'ar', content: 'Argentina', icon: <ARFlagIcon /> },
{ value: 'ru', content: 'Russia', disabled: true, icon: <RUFlagIcon /> },
{ value: 'ch', content: 'Chile', icon: <CLFlagIcon /> },
{ value: 'jp', content: 'Japan', icon: <JPFlagIcon /> },
{ value: 'cn', content: 'China', icon: <CNFlagIcon /> },
{ value: 'sk', content: 'South Korea', icon: <KRFlagIcon /> },
{ value: 'au', content: 'Australia', icon: <AUFlagIcon /> },
]}
placeholder={'Choose country'}
placement={'bottom-start'}
required
value={value}
/>
</FormGroup>
</Form>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</Fragment>
),
},
]}
/>
</Panel>
<Panel header="Props" headerId="props">
<ContentRoutingTabs
id="props"
routes={[
{
id: 'Icon',
title: 'icon',
render: () => (
<IconPropTable renderPanel={false}>
<CodeSnippet showControls={false} language="bash">
npm install @bigcommerce/big-design-icons // or yarn add @bigcommerce/big-design-icons
</CodeSnippet>
</IconPropTable>
),
},
{
id: 'flag-icon',
title: 'Flag icon',
render: () => (
<FlagIconPropTable renderPanel={false}>
<InlineMessage
type="warning"
messages={[
{
text: 'Flags are a submodule of the Icons package "@bigcommerce/big-design-icons", you will need to add the package first using "yarn add @bigcommerce/big-design-icons".',
},
]}
marginBottom="medium"
/>
</FlagIconPropTable>
),
},
]}
/>
</Panel>

<Panel header="Available icons" headerId="available-icons">
<Flex flexWrap="wrap" justifyContent="center">
{Object.keys(icons).map((iconName) => {
const Icon = icons[iconName];

return (
<Flex
key={iconName}
style={{ width: '300px' }}
flexDirection="column"
borderRadius="normal"
justifyContent="center"
alignItems="center"
padding="large"
>
<Icon size="xxxLarge" />
<Code>{`<${iconName} />`}</Code>
</Flex>
);
})}
</Flex>
</Panel>
</>
);
};
Expand Down

0 comments on commit 5af0ada

Please sign in to comment.