Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Shrink API surface area, remove ChecklistCard #95

Merged
merged 19 commits into from
Feb 19, 2019
Merged

fix: Shrink API surface area, remove ChecklistCard #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9c8f409
fix: Shrink API WIP
markdalgleish Feb 7, 2019
26d7655
fix: Finish shrink of API surface area
mattcompiles Feb 13, 2019
0bfb6a8
chore: Merge master
mattcompiles Feb 14, 2019
a7bb745
chore: Tweaks
mattcompiles Feb 14, 2019
3bf89ab
fix: Fix visual bugs with Strong and Icon
markdalgleish Feb 15, 2019
7a7f414
Merge branch 'master' into shrink-api
mattcompiles Feb 15, 2019
c82fc78
test: Update snapshots
markdalgleish Feb 15, 2019
a663089
fix: Fix icons
markdalgleish Feb 15, 2019
5122738
fix(Card): Use padding instead of margin to prevent collapse
markdalgleish Feb 15, 2019
5426058
fix(ChevronIcon): Support inline prop
markdalgleish Feb 15, 2019
e2ebb2e
fix(ChevronIcon): Fix props
markdalgleish Feb 15, 2019
a8a1da3
docs: Balance white space in Card example
markdalgleish Feb 17, 2019
552867f
Merge branch 'master' into shrink-api
markdalgleish Feb 18, 2019
5e8cac9
fix: Fix onChange for Checkbox and Radio
markdalgleish Feb 18, 2019
f33db9e
feat: Remove ChecklistCard
markdalgleish Feb 19, 2019
fc36025
fix: Reinstate error border on Checkbox and Radio
markdalgleish Feb 19, 2019
fc37b7c
Merge branch 'master' into shrink-api
markdalgleish Feb 19, 2019
d396fc8
Merge branch 'master' into shrink-api
markdalgleish Feb 19, 2019
44a6a96
fix: Fix nested checkbox visibility, add nested Radio example
markdalgleish Feb 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 58 additions & 48 deletions docs/src/App/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,54 +103,64 @@ export default withRouter(
paddingLeft="gutter"
paddingRight="gutter"
>
<Text size="large" weight="strong" marginBottom="small">
Tools
</Text>
<BulletList marginBottom="small">
<Bullet>
<a
style={{ color: 'inherit' }}
href="https://github.com/seek-oss/braid-design-system"
target="_blank"
rel="noopener noreferrer"
onClick={this.closeMenu}
>
Source
</a>
</Bullet>
<Bullet>
<Link
style={{ color: 'inherit' }}
to="/playroom"
target="_blank"
onClick={this.closeMenu}
>
Playroom
</Link>
</Bullet>
</BulletList>
<Text size="large" weight="strong" marginBottom="small">
Components
</Text>
<BulletList marginBottom="small">
{Object.keys(components)
.filter(x => !/icon/i.test(x))
.sort()
.map(componentName => (
<Bullet key={componentName}>
<Link
style={{ color: 'inherit' }}
to={`/components/${componentName}`}
onClick={this.closeMenu}
>
{componentName}
</Link>
</Bullet>
))}
</BulletList>
<Text size="large" weight="strong" marginBottom="small">
Icons
</Text>
<Box paddingBottom="small">
<Text size="large" weight="strong">
Tools
</Text>
</Box>
<Box paddingBottom="small">
<BulletList>
<Bullet>
<a
style={{ color: 'inherit' }}
href="https://github.com/seek-oss/braid-design-system"
target="_blank"
rel="noopener noreferrer"
onClick={this.closeMenu}
>
Source
</a>
</Bullet>
<Bullet>
<Link
style={{ color: 'inherit' }}
to="/playroom"
target="_blank"
onClick={this.closeMenu}
>
Playroom
</Link>
</Bullet>
</BulletList>
</Box>
<Box paddingBottom="small">
<Text size="large" weight="strong">
Components
</Text>
</Box>
<Box paddingBottom="small">
<BulletList>
{Object.keys(components)
.filter(x => !/icon/i.test(x))
.sort()
.map(componentName => (
<Bullet key={componentName}>
<Link
style={{ color: 'inherit' }}
to={`/components/${componentName}`}
onClick={this.closeMenu}
>
{componentName}
</Link>
</Bullet>
))}
</BulletList>
</Box>
<Box paddingBottom="small">
<Text size="large" weight="strong">
Icons
</Text>
</Box>
<BulletList>
{Object.keys(components)
.filter(x => /icon/i.test(x) && x !== 'Icon')
Expand Down
6 changes: 3 additions & 3 deletions docs/src/App/ComponentProps/ComponentProps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ export default class ComponentProps extends Component<Props> {

return Object.keys(props).length === 0 ? null : (
<Fragment>
<Text weight="strong" paddingBottom="small">
Options
</Text>
<Box paddingBottom="small">
<Text weight="strong">Options</Text>
</Box>
{map(props, (option, propName) => {
if (!option) {
return null;
Expand Down
78 changes: 44 additions & 34 deletions docs/src/App/ComponentRoute/ComponentRoute.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,36 +34,42 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {

return (
<Box>
<Text size="large" weight="strong" paddingBottom="small">
{componentName}
</Text>
{examples.length > 0 ? (
<Text weight="strong" paddingBottom="small">
Example
{examples.length > 1 ? 's' : ''}
<Box paddingBottom="small">
<Text size="large" weight="strong">
{componentName}
</Text>
</Box>
{examples.length > 0 ? (
<Box paddingBottom="small">
<Text weight="strong">
Example
{examples.length > 1 ? 's' : ''}
</Text>
</Box>
) : null}
{examples.map(({ label, render, code }, index) => (
<Box key={index} marginBottom="xxlarge">
{label ? <Text paddingBottom="small">{label}</Text> : null}
{label ? (
<Box paddingBottom="small">
<Text>{label}</Text>
</Box>
) : null}
{render
? themes.map(theme => (
<Box key={theme.name} marginBottom="large">
<Text color="secondary" paddingBottom="small">
Theme: {theme.name}
</Text>
<Box paddingBottom="small">
<Text color="secondary">Theme: {theme.name}</Text>
</Box>
<ThemeProvider theme={theme}>
{render({ id: `${index}_${theme.name}` })}
</ThemeProvider>
</Box>
))
: null}
<Text color="secondary" paddingBottom="small">
Code:
</Text>
<Text
component="pre"
color="white"
<Box paddingBottom="small">
<Text color="secondary">Code:</Text>
</Box>
<Box
paddingLeft="small"
paddingRight="small"
paddingTop="xxsmall"
Expand All @@ -74,30 +80,34 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
overflowX: 'auto'
}}
>
{render
? reactElementToJSXString(render({ id: 'id' }), {
useBooleanShorthandSyntax: false,
showDefaultProps: false,
showFunctions: true
})
: null}
{code ? dedent(code) : null}
</Text>
<Text component="pre" color="white">
{render
? reactElementToJSXString(render({ id: 'id' }), {
useBooleanShorthandSyntax: false,
showDefaultProps: false,
showFunctions: true
})
: null}
{code ? dedent(code) : null}
</Text>
</Box>
</Box>
))}

<Box paddingBottom="small">
<ComponentProps componentName={componentName} />
</Box>

<Text weight="strong" paddingBottom="small">
Source
</Text>
<Text paddingBottom="large">
<a href={sourceUrl} target="_blank" rel="noopener noreferrer">
View on GitHub
</a>
</Text>
<Box paddingBottom="small">
<Text weight="strong">Source</Text>
</Box>
<Box paddingBottom="large">
<Text>
<a href={sourceUrl} target="_blank" rel="noopener noreferrer">
View on GitHub
</a>
</Text>
</Box>
</Box>
);
}
Expand Down
5 changes: 1 addition & 4 deletions lib/componentDocs/globsToReactDocgen.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
const path = require('path');
const fastGlob = require('fast-glob').async;
const { parse: parseTs } = require('react-docgen-typescript').withCustomConfig(
path.join(process.cwd(), 'tsconfig.json'),
{
propFilter: prop => !/node_modules/.test(prop.parent.fileName)
}
path.join(process.cwd(), 'tsconfig.json')
);

module.exports = async ({ include = '', exclude: ignore = [] } = {}) => {
Expand Down
19 changes: 13 additions & 6 deletions lib/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
import React, { Component, ReactNode } from 'react';
import Box, { BoxProps } from '../Box/Box';
import Box from '../Box/Box';
import Text from '../Text/Text';
import InfoIcon from '../icons/InfoIcon/InfoIcon';
import ErrorIcon from '../icons/ErrorIcon/ErrorIcon';
import styles from './Alert.css.js';

type Tone = 'info' | 'critical';

export interface AlertProps extends BoxProps {
export interface AlertProps {
tone?: Tone;
children: ReactNode;
}

const iconForTone = (tone: Tone) => {
if (tone === 'info') {
return <InfoIcon fill="white" marginRight="small" />;
return (
<Box paddingRight="small">
<InfoIcon fill="white" />
</Box>
);
}

if (tone === 'critical') {
return <ErrorIcon fill="critical" marginRight="small" />;
return (
<Box paddingRight="small">
<ErrorIcon fill="critical" />
</Box>
);
}

return null;
Expand All @@ -40,7 +48,7 @@ export default class Alert extends Component<AlertProps> {
static displayName = 'Alert';

render() {
const { tone = 'info', children, ...restProps } = this.props;
const { tone = 'info', children } = this.props;

const icon = iconForTone(tone);
const color = textColorForTone(tone);
Expand All @@ -52,7 +60,6 @@ export default class Alert extends Component<AlertProps> {
paddingRight="gutter"
paddingTop="medium"
paddingBottom="medium"
{...restProps}
>
<div className={styles.root}>
<div className={styles.icon}>{icon}</div>
Expand Down
Loading