Skip to content

Commit

Permalink
Convert a few more. Add partials .scss
Browse files Browse the repository at this point in the history
  • Loading branch information
@xdrdak
xdrdak committed Sep 24, 2019
1 parent 3dbd29d commit c326fea
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 128 deletions.
75 changes: 40 additions & 35 deletions packages/flame/src/Autocomplete/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,38 +172,43 @@ stories.add('States', () => (
</div>
));

stories.add('Events', () => (
<div>
<h3>onChange (see action logger)</h3>
<p>
This method is required to update the value as react-select requires it (Note that (as of 1.0)
you must handle the change and pass the updated value to the Select.) See the{' '}
<a href="https://react-select.com/home" target="_blank" rel="noopener noreferrer">
usage
</a>{' '}
documentation.
</p>
<Autocomplete {...exampleProps} onChange={action('onChange')} />

<h3>onFocus (see action logger)</h3>
<Autocomplete {...exampleProps} onFocus={action('onFocus')} />

<h3>onBlur (see action logger)</h3>
<Autocomplete {...exampleProps} onBlur={action('onBlur')} />

<h3>onCreateOption success (see action logger)</h3>
<Autocomplete {...exampleProps} onCreate={onCreateOption} />

<h3>onCreateOption error (see action logger)</h3>
<Autocomplete {...exampleProps} onCreate={onCreateOptionError} />

<h3>
onCreateOption with custom isOptionUnique - case insensitive as an example (see action logger)
</h3>
<Autocomplete
{...exampleProps}
onCreate={onCreateOption}
isOptionUnique={caseInsensitiveUnique}
/>
</div>
));
stories.add(
'Events',
() => (
<div>
<h3>onChange (see action logger)</h3>
<p>
This method is required to update the value as react-select requires it (Note that (as of
1.0) you must handle the change and pass the updated value to the Select.) See the{' '}
<a href="https://react-select.com/home" target="_blank" rel="noopener noreferrer">
usage
</a>{' '}
documentation.
</p>
<Autocomplete {...exampleProps} onChange={action('onChange')} />

<h3>onFocus (see action logger)</h3>
<Autocomplete {...exampleProps} onFocus={action('onFocus')} />

<h3>onBlur (see action logger)</h3>
<Autocomplete {...exampleProps} onBlur={action('onBlur')} />

<h3>onCreateOption success (see action logger)</h3>
<Autocomplete {...exampleProps} onCreate={onCreateOption} />

<h3>onCreateOption error (see action logger)</h3>
<Autocomplete {...exampleProps} onCreate={onCreateOptionError} />

<h3>
onCreateOption with custom isOptionUnique - case insensitive as an example (see action
logger)
</h3>
<Autocomplete
{...exampleProps}
onCreate={onCreateOption}
isOptionUnique={caseInsensitiveUnique}
/>
</div>
),
{ percy: { skip: true } },
);
12 changes: 6 additions & 6 deletions packages/flame/src/Divider/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ stories.add('Story', () => (
<Divider />
<h3>With Content</h3>
<Divider>
<Icon size="1rem" name="products" className="cr-mr-2" />
<span>T-Shirt</span>
<Icon size="1rem" name="products" />
<Box ml={2}>T-Shirt</Box>
</Divider>
<h3>Between Elements</h3>
<Box mb={2} style={cardsStyles}>
Expand Down Expand Up @@ -53,8 +53,8 @@ stories.add('Story', () => (
<Divider variant="dotted" />
<h3>With Content</h3>
<Divider variant="dotted">
<Icon size="1rem" name="products" className="cr-mr-2" />
<span>T-Shirt</span>
<Icon size="1rem" name="products" />
<Box ml={2}>T-Shirt</Box>
</Divider>
</div>
<div>
Expand Down Expand Up @@ -109,8 +109,8 @@ stories.add(
<Divider variant="dotted" />
<h3>With Content</h3>
<Divider variant="dotted">
<Icon size="1rem" name="products" className="cr-mr-2" />
<span>T-Shirt</span>
<Icon size="1rem" name="products" />
<Box ml={2}>T-Shirt</Box>
</Divider>
</div>
),
Expand Down
14 changes: 7 additions & 7 deletions packages/flame/src/Flag/examples/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import { Ul } from '../../../../../stories/components/Ul';
const stories = storiesOf('Flag', module).addDecorator(withReadme(Readme));

const Description: React.FC = ({ children }) => (
<Text fontSize="text-s" color="dimmed" mb={1}>
<Text fontSize="text-s" mb={1}>
{children}
</Text>
);
Expand Down Expand Up @@ -56,9 +56,9 @@ class FlagPresenter extends React.Component<FlagPresenterProps, FlagPresenterSta

return (
<div>
<div className="cr-mb-1">
<Box mb={1}>
<Input readOnly size="small" value={selectedName} onFocus={e => e.target.select()} />
</div>
</Box>

{flagList.map((flag: { code: string; name: string }) => (
<span
Expand Down Expand Up @@ -114,12 +114,12 @@ stories.add('Story', () => (
stories.add('Size', () => (
<Ul>
{['0.875rem', '1rem', '1.125rem', '1.5rem', '2.25rem', '4rem'].map(size => (
<li className="cr-mb-2" key={size}>
<Box as="li" mb={2} key={size}>
<Flag code="ca" size={size} />
<span className="cr-ml-2" style={{ fontSize: size }}>
<Box as="span" ml={2} style={{ fontSize: size }}>
{size}
</span>
</li>
</Box>
</Box>
))}
</Ul>
));
Expand Down
2 changes: 1 addition & 1 deletion packages/flame/src/Group/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Badge, PillBadge } from '../Badge';
const stories = storiesOf('Group', module).addDecorator(withReadme(Readme));

const Description: React.FC = ({ children }) => (
<Text fontSize="text-s" color="dimmed" mb={1}>
<Text fontSize="text-s" mb={1}>
{children}
</Text>
);
Expand Down
21 changes: 13 additions & 8 deletions packages/flame/src/Icon/examples/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import IconSprite from '!raw-loader!../../../svg/icon-sprite.svg'; // eslint-dis
import { Icon } from '../index';
import { IconAdd } from '../Add';
import { IconArrowDown } from '../ArrowDown';
import { Box } from '../../Core';
import Readme from '../README.md';
import IconList from '../../../svg/Icon.list.json';
import '../../../svg/Icons/icon.scss';
Expand Down Expand Up @@ -59,8 +60,10 @@ class IconPresenter extends React.PureComponent<IconPresenterProps, IconPresente
const { colors } = this.state;

return (
<li
className="cr-mb-2 cr-ph-4"
<Box
as="li"
mb={2}
px={4}
style={{
display: 'flex',
alignItems: 'center',
Expand All @@ -73,7 +76,9 @@ class IconPresenter extends React.PureComponent<IconPresenterProps, IconPresente

return React.cloneElement(child as any, { name, ...colors });
})}
<span className="cr-ml-2 cr-text-s">{name}</span>
<Box as="span" ml={2} fontSize="text-s">
{name}
</Box>
</div>
<div>
<Ul className="cr-text-xs cr-gray-300" style={{ cursor: 'pointer', textAlign: 'right' }}>
Expand All @@ -89,7 +94,7 @@ class IconPresenter extends React.PureComponent<IconPresenterProps, IconPresente
))}
</Ul>
</div>
</li>
</Box>
);
}
}
Expand All @@ -114,12 +119,12 @@ stories.add('Story', () => (
stories.add('Size', () => (
<Ul>
{['0.875rem', '1rem', '1.125rem', '1.5rem', '2.25rem', '4rem'].map(size => (
<li className="cr-mb-2" key={size}>
<Box as="li" mb={2} key={size}>
<Icon name="register" size={size} />
<span className="cr-ml-2" style={{ fontSize: size }}>
<Box as="span" ml={2} style={{ fontSize: size }}>
{size}
</span>
</li>
</Box>
</Box>
))}
</Ul>
));
Expand Down
53 changes: 29 additions & 24 deletions packages/flame/src/Select/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,45 @@ import { storiesOf } from '@storybook/react';
import { withReadme } from 'storybook-readme';

import { TextContent, Heading3 } from '../Text';
import { Box } from '../Core';

import SelectExample from './examples';
import Readme from './README.md';

const stories = storiesOf('Select', module).addDecorator(withReadme(Readme));

const bottomSpace = 'cr-mb-1';

stories.add('Story', () => (
<TextContent>
<Heading3>Default</Heading3>
<SelectExample className={bottomSpace}>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</SelectExample>
<Box mb={1}>
<SelectExample>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</SelectExample>
</Box>
<Heading3>Option variants</Heading3>
<SelectExample className={bottomSpace}>
<option value="1">Option 1</option>
<option value="2" disabled>
Option 2 (disabled)
</option>
<option value="3">Option 3</option>
<optgroup label="Option group">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</SelectExample>
<Box mb={1}>
<SelectExample>
<option value="1">Option 1</option>
<option value="2" disabled>
Option 2 (disabled)
</option>
<option value="3">Option 3</option>
<optgroup label="Option group">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</SelectExample>
</Box>
<Heading3>Disabled</Heading3>
<SelectExample disabled className={bottomSpace}>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</SelectExample>
<Box mb={1}>
<SelectExample disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</SelectExample>
</Box>
</TextContent>
));
6 changes: 3 additions & 3 deletions packages/flame/src/Spinner/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ const stories = storiesOf('Spinner', module).addDecorator(withReadme(Readme));
stories.add('Story', () => (
<div>
<Box mb={3}>
<Text fontSize="small" color="dimmed" mb={1}>
<Text fontSize="small" mb={1}>
Default
</Text>
<Spinner />
</Box>

<Box mb={3}>
<Text fontSize="small" color="dimmed" mb={1}>
<Text fontSize="small" mb={1}>
Resized
</Text>
<Group>
Expand All @@ -33,7 +33,7 @@ stories.add('Story', () => (
</Box>

<Box mb={3}>
<Text fontSize="small" color="dimmed" mb={1}>
<Text fontSize="small" mb={1}>
Colored
</Text>
<Group>
Expand Down
16 changes: 8 additions & 8 deletions packages/flame/src/Switch/story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withReadme } from 'storybook-readme';

import { Text, TextContent, Heading2 } from '../Text';
import { Text, Heading2 } from '../Text';

import { Switch } from './Switch';
import Readme from './README.md';
Expand All @@ -14,7 +14,7 @@ import { Box } from '../Core';
const stories = storiesOf('Switch', module).addDecorator(withReadme(Readme));

const Description: React.FC = ({ children }) => (
<Text fontSize="small" color="dimmed" mb={3}>
<Text fontSize="text-s" mb={1}>
{children}
</Text>
);
Expand Down Expand Up @@ -70,8 +70,8 @@ class SwitchWrapper extends React.Component<{}, State> {
}

stories.add('States', () => (
<TextContent>
<Heading2>Switch States</Heading2>
<div>
<Heading2 mb={2}>Switch States</Heading2>
<Description>Toggle On / Off</Description>
<Box mb={3}>
<Switch />
Expand All @@ -83,7 +83,7 @@ stories.add('States', () => (
<Switch checked disabled />
</Group>
</Box>
</TextContent>
</div>
));

// eslint-disable-next-line react/no-multi-comp
Expand Down Expand Up @@ -132,16 +132,16 @@ class ToggleEventsWrapper extends React.Component<{}, { checked?: boolean }> {
stories.add(
'Events',
() => (
<TextContent>
<Heading2>Switch Events</Heading2>
<div>
<Heading2 mb={2}>Switch Events</Heading2>
<Text>
These examples are using <strong>controlled</strong> components.
</Text>
<ToggleEventsWrapper />
<Box mb={3}>
<SwitchWrapper />
</Box>
</TextContent>
</div>
),
{ percy: { skip: true } },
);
Loading

0 comments on commit c326fea

Please sign in to comment.