Skip to content
Permalink
Browse files

feat(BulletPoints): Added BulletPoints components

  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent 5cb5826 commit f197633ab67ef61770c15ddaabe67ba745d0c31a
@@ -0,0 +1,40 @@
import React, { Component } from 'react';
import { BulletPoints, BulletPoint } from 'preshape';
import onEdit from '../Component/onEdit';
import DocumentationPage from '../Documentation/DocumentationPage';
import ComponentExample from '../Component/ComponentExample';
import ComponentPropsTable from '../Component/ComponentPropsTable';
import RenderRepeat from '../RenderRepeat/RenderRepeat';

export default class ComponentList extends Component {
constructor(props) {
super(props);
this.state = {};
}

render() {
return (
<DocumentationPage { ...this.props }>
<ComponentExample>
<BulletPoints { ...this.state.BulletPoints }>
<RenderRepeat count={ 5 }>
{ (n) => (
<BulletPoint { ...this.state.BulletPoint } key={ n }>
Lorem ipsum
</BulletPoint>
) }
</RenderRepeat>
</BulletPoints>
</ComponentExample>

<ComponentPropsTable
components={ [
require('!!@brandwatch/axiom-documentation-loader!../../../src/BulletPoints/BulletPoints'),
require('!!@brandwatch/axiom-documentation-loader!../../../src/BulletPoints/BulletPoint'),
] }
onEdit={ (...args) => this.setState((state) => onEdit(state, ...args)) }
values={ this.state } />
</DocumentationPage>
);
}
}
@@ -4,6 +4,7 @@ import Application from './Application';
import Base from './Base';
import BlockQuote from './BlockQuote';
import Bounds from './Bounds';
import BulletPoints from './BulletPoints';
import Button from './Button';
import CheckBox from './CheckBox';
import CodeBlock from './CodeBlock';
@@ -54,6 +55,11 @@ export default [{
name: 'Bounds',
to: '/components/bounds',
description: 'A behaviour component that uses the Resize Observer API to observe width and height of an element.',
}, {
Component: BulletPoints,
name: 'BulletPoints',
to: '/components/bullet-points',
description: 'A vertical list component for listing your todos.'
}, {
Component: Button,
name: 'Button',
@@ -0,0 +1,10 @@
import React, { Component } from 'react';
import Base from '../Base/Base';

export default class BulletPoint extends Component {
render() {
return (
<Base Component="li" { ...this.props } className="BulletPoints__point" />
);
}
}
@@ -0,0 +1,3 @@
.BulletPoints--numbered {
list-style-type: decimal;
}
@@ -0,0 +1,22 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import classnames from 'classnames';
import Base from '../Base/Base';
import './BulletPoints.css';

export default class BulletPoints extends Component {
static propTypes = {
numbered: PropTypes.bool,
};

render() {
const { numbered, ...rest } = this.props;
const classes = classnames('BulletPoints', {
'BulletPoints--numbered': numbered,
});

return (
<Base Component="ul" { ...rest } className={ classes } />
);
}
}
@@ -15,6 +15,8 @@ export { default as ApplicationTitle } from './Application/ApplicationTitle';
export { default as Base } from './Base/Base';
export { default as BlockQuote } from './BlockQuote/BlockQuote';
export { default as Bounds } from './Bounds/Bounds';
export { default as BulletPoint } from './BulletPoints/BulletPoint';
export { default as BulletPoints } from './BulletPoints/BulletPoints';
export { default as Button } from './Button/Button';
export { default as Buttons } from './Button/Buttons';
export { default as CheckBox } from './CheckBox/CheckBox';

0 comments on commit f197633

Please sign in to comment.
You can’t perform that action at this time.