Skip to content

Commit

Permalink
fix(Hidden): Add Hidden component (#103)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hscgavin @markdalgleish
hscgavin authored and markdalgleish committed Feb 25, 2019
1 parent 9937ca1 commit 7879790
Show file tree
Hide file tree
Showing 6 changed files with 255 additions and 101 deletions.
206 changes: 105 additions & 101 deletions docs/src/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import ComponentRoute from './ComponentRoute/ComponentRoute';
import { Link, ExternalLink } from './Link';
import styles from './App.css.js';

const { ThemeProvider, Text, Box, BulletList, Bullet } = components;
const { ThemeProvider, Text, Box, BulletList, Bullet, Hidden } = components;

interface AppProps extends RouteComponentProps {
sourceUrlPrefix: string;
Expand Down Expand Up @@ -59,122 +59,126 @@ export default withRouter(
<Logo />
</Link>

<button
className={classnames({
[styles.menuButton]: true,
[styles.menuButton__isHidden]: isHome,
[styles.menuButton__isOpen]: isMenuOpen && !isHome
})}
onClick={this.toggleMenu}
aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar1
)}
/>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar2
)}
/>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar3
)}
/>
</button>
<Hidden print>
<button
className={classnames({
[styles.menuButton]: true,
[styles.menuButton__isHidden]: isHome,
[styles.menuButton__isOpen]: isMenuOpen && !isHome
})}
onClick={this.toggleMenu}
aria-label={isMenuOpen ? 'Close menu' : 'Open menu'}
>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar1
)}
/>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar2
)}
/>
<div
className={classnames(
styles.menuButton__bar,
styles.menuButton__bar3
)}
/>
</button>
</Hidden>
</div>
</Box>
</div>
<div className={styles.container}>
<div
className={classnames({
[styles.menu]: true,
[styles.menu__isOpen]: isMenuOpen
})}
>
<Box
paddingTop="small"
paddingBottom="large"
paddingLeft="gutter"
paddingRight="gutter"
<Hidden print>
<div
className={classnames({
[styles.menu]: true,
[styles.menu__isOpen]: isMenuOpen
})}
>
<Box paddingBottom="small">
<Text size="large" weight="strong">
Tools
</Text>
</Box>
<Box paddingBottom="small">
<BulletList>
<Bullet>
<ExternalLink
href="https://github.com/seek-oss/braid-design-system"
target="_blank"
rel="noopener noreferrer"
onClick={this.closeMenu}
>
Source
</ExternalLink>
</Bullet>
<Bullet>
<Link
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">
<Box
paddingTop="small"
paddingBottom="large"
paddingLeft="gutter"
paddingRight="gutter"
>
<Box paddingBottom="small">
<Text size="large" weight="strong">
Tools
</Text>
</Box>
<Box paddingBottom="small">
<BulletList>
<Bullet>
<ExternalLink
href="https://github.com/seek-oss/braid-design-system"
target="_blank"
rel="noopener noreferrer"
onClick={this.closeMenu}
>
Source
</ExternalLink>
</Bullet>
<Bullet>
<Link
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
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))
.filter(x => /icon/i.test(x) && x !== 'Icon')
.sort()
.map(componentName => (
<Bullet key={componentName}>
.map(iconName => (
<Bullet key={iconName}>
<Link
to={`/components/${componentName}`}
to={`/icons/${iconName}`}
onClick={this.closeMenu}
>
{componentName}
{iconName}
</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')
.sort()
.map(iconName => (
<Bullet key={iconName}>
<Link
to={`/icons/${iconName}`}
onClick={this.closeMenu}
>
{iconName}
</Link>
</Bullet>
))}
</BulletList>
</Box>
</div>
</div>
</Hidden>
<div className={styles.content}>
<Box
paddingLeft="gutter"
Expand Down
7 changes: 7 additions & 0 deletions lib/components/Hidden/Hidden.css.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default {
'@media print': {
'.hiddenOnPrint': {
display: 'none'
}
}
};
3 changes: 3 additions & 0 deletions lib/components/Hidden/Hidden.css.js.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// This file is automatically generated.
// Please do not change this file!
export const hiddenOnPrint: string;
97 changes: 97 additions & 0 deletions lib/components/Hidden/Hidden.docs.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React, { Fragment } from 'react';
import Hidden from './Hidden';
import Text from '../Text/Text';

export default {
component: Hidden,
examples: [
{
label: 'Hidden on Mobile',
render: () => (
<Fragment>
<Text>The following line is hidden on mobile:</Text>
<Hidden mobile>
<Text>Hidden on mobile.</Text>
</Hidden>
</Fragment>
)
},
{
label: 'Hidden on Desktop',
render: () => (
<Fragment>
<Text>The following line is hidden on desktop:</Text>
<Hidden desktop>
<Text>Hidden on desktop.</Text>
</Hidden>
</Fragment>
)
},
{
label: 'Hidden on Print',
render: () => (
<Fragment>
<Text>The following line is hidden on print:</Text>
<Hidden print>
<Text>Hidden on print.</Text>
</Hidden>
</Fragment>
)
},
{
label: 'Hidden on Screen',
render: () => (
<Fragment>
<Text>The following line is hidden on screen:</Text>
<Hidden screen>
<Text>Hidden on screen.</Text>
</Hidden>
</Fragment>
)
},
{
label: 'Hidden on Mobile (Inline)',
render: () => (
<Text>
The following text node is hidden on mobile:{' '}
<Hidden inline mobile>
Hidden on mobile.
</Hidden>
</Text>
)
},
{
label: 'Hidden on Desktop (Inline)',
render: () => (
<Text>
The following text node is hidden on desktop:{' '}
<Hidden inline desktop>
Hidden on desktop.
</Hidden>
</Text>
)
},
{
label: 'Hidden on Print (Inline)',
render: () => (
<Text>
The following text node is hidden on print:{' '}
<Hidden inline print>
Hidden on print.
</Hidden>
</Text>
)
},
{
label: 'Hidden on Screen (Inline)',
render: () => (
<Text>
The following text node is hidden on screen:{' '}
<Hidden inline screen>
Hidden on screen.
</Hidden>
</Text>
)
}
]
};
42 changes: 42 additions & 0 deletions lib/components/Hidden/Hidden.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { Component, ReactNode } from 'react';
import Box from '../Box/Box';
import styles from './Hidden.css.js';

export interface HiddenProps {
children: ReactNode;
mobile?: boolean;
desktop?: boolean;
screen?: boolean;
print?: boolean;
inline?: boolean;
}

export default class Hidden extends Component<HiddenProps> {
static displayName = 'Hidden';

render() {
const {
children,
inline = false,
mobile: hiddenOnMobile = false,
desktop: hiddenOnDesktop = false,
screen: hiddenOnScreen = false,
print: hiddenOnPrint = false
} = this.props;

const display = inline ? 'inline' : 'block';

return (
<Box
display={[
hiddenOnMobile || hiddenOnScreen ? 'none' : display,
hiddenOnDesktop || hiddenOnScreen ? 'none' : display
]}
className={hiddenOnPrint ? styles.hiddenOnPrint : undefined}
component={inline ? 'span' : 'div'}
>
{children}
</Box>
);
}
}
1 change: 1 addition & 0 deletions lib/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export { default as Divider } from './Divider/Divider';
export { default as FieldLabel } from './FieldLabel/FieldLabel';
export { default as FieldMessage } from './FieldMessage/FieldMessage';
export { default as Heading } from './Heading/Heading';
export { default as Hidden } from './Hidden/Hidden';
export { default as Radio } from './Radio/Radio';
export { default as Reset } from './Reset/Reset';
export { default as Strong } from './Strong/Strong';
Expand Down

0 comments on commit 7879790

Please sign in to comment.