Skip to content

Commit

Permalink
feat(docs): update textarea page to use new layout (#630)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya authored Oct 12, 2021
1 parent 87c2a0e commit 3061ef5
Showing 1 changed file with 133 additions and 98 deletions.
231 changes: 133 additions & 98 deletions packages/docs/pages/textarea.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,149 @@
import { Form, FormGroup, H1, Panel, Text, Textarea } from '@bigcommerce/big-design';
import React, { useState } from 'react';

import { Code, CodePreview, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { TextareaPropTable } from '../PropTables';

const TextAreaPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel>
<Text>Textareas are stylized form controls with the ability of controling validation.</Text>
<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [value, setValue] = useState('');
return (
<>
<H1>Textarea</H1>

const handleChange = (event) => setValue(event.target.value);
<Panel header="Overview" headerId="overview">
<Text>
<Code primary>Textarea</Code>s are text inputs that can be expanded to fit multi-line text content from users.
</Text>
<Text bold>When to use:</Text>
<List>
<List.Item>
<Code primary>Textarea</Code>s are useful when users need to create multi-sentence or paragraph length
content - e.g. product decriptions or messages.
</List.Item>
</List>
</Panel>

return (
<Form>
<FormGroup>
<Textarea
label="Label"
description="Description for the textarea."
placeholder="Placeholder"
rows={3}
resize={true}
value={value}
onChange={handleChange}
/>
</FormGroup>
</Form>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Error state">
<Text>
Textareas 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 <Code primary>onChange</Code> prop.
</Text>
<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'basic',
title: 'Basic',
render: () => (
<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [value, setValue] = useState('');

<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea
label="Description"
description="Description needs to be at least 64 characters long."
value="Start of some text..."
minLength={64}
error="Field needs to contain at least 64 characters."
onChange={() => null}
/>
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Controlling rows">
<Text>
By default, a <Code>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 <Code>7</Code> rows.
</Text>
const handleChange = (event) => setValue(event.target.value);

<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea label="Label" description="Textarea with 5 rows." placeholder="Placeholder" rows={5} />
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Resizable">
<Text>
You can also control whether <Code>Textarea</Code> components are resizeable. Resizing is only available
on the vertical axis.
</Text>
return (
<Form>
<FormGroup>
<Textarea
label="Label"
description="Description for the textarea."
placeholder="Placeholder"
rows={3}
resize={true}
value={value}
onChange={handleChange}
/>
</FormGroup>
</Form>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
),
},
{
id: 'error-state',
title: 'Error state',
render: () => (
<>
<Text>
<Code primary>Textarea</Code>s 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{' '}
<Code primary>onChange</Code> prop.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <TextareaPropTable />,
},
];
<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea
label="Description"
description="Description needs to be at least 64 characters long."
value="Start of some text..."
minLength={64}
error="Field needs to contain at least 64 characters."
onChange={() => null}
/>
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'controlling-rows',
title: 'Controlling rows',
render: () => (
<>
<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{' '}
<Code>7</Code> rows.
</Text>

return (
<>
<H1>Textarea</H1>
<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea
label="Label"
description="Textarea with 5 rows."
placeholder="Placeholder"
rows={5}
/>
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'resizable',
title: 'Resizable',
render: () => (
<>
<Text>
You can also control whether <Code primary>Textarea</Code> components are resizeable. Resizing is
only available on the vertical axis.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
<Form>
<FormGroup>
<Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
</FormGroup>
</Form>
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
]}
/>
</Panel>

<PageNavigation items={items} />
<Panel header="Props" headerId="props">
<TextareaPropTable renderPanel={false} />
</Panel>
</>
);
};
Expand Down

0 comments on commit 3061ef5

Please sign in to comment.