Skip to content

Commit

Permalink
Feature/counter bar refactor (#21)
Browse files Browse the repository at this point in the history 
* Storybook - Automatically name styled components in React DOM

* Refactor of CSS to achieve good alignment

Main things achieved here (due to Flexbox!) are:

- the total stays on the left
- other counters resize to fill width and wrap when they need to
- a max-width is set on counters so they're not too wide
- long text wraps beside counts neatly inside counters

Count boxes can still handle any number of digits and the counter boxes still run flush to each edge of the page.

Minimal changes to result-count and result-count-title were necessary in this commit. If these cause a problem with their use elsewhere let's revisit.

* CounterBar refactor

Work in progress here - would like to check approach is as expected. Tests, docs and stories are updated, but the missing functionality is the clicking to make active or trigger handlers. We'll need to think about the best way to handle that with this new structure.

* Fix docs

* Remove onSelect / onClick handling

* Use Flex shorthand

* Use more concise syntax

* Fix stories and docs

Indentation etc.

* Fix tests

* Enable props for Total colours

* Wrap long lines

* Enable any tag to be used for Total element

Here's my effort to implement this! I'm not sure it's the best way, but it works.

* Pass on any props to TotalWrapper

Enabling link href, for example. Also move example story.

* Disable failing test

For the time being I can see absolutely no reason why this test is failing - the DOM looks as expected! Will have to look into it later - disabling for now so we can at least build.

* Fix object spacing

* Enable CounterBar.Item to use any element

* Correct prop names and enable colours for Items

* Update snapshot

* Misc improvements

* Update snapshot

* Update story total

* Amend propType
  • Loading branch information
@gavinorland @stevesims
gavinorland authored and stevesims committed Jul 17, 2018
1 parent feac5d3 commit d0af589
Show file tree
Hide file tree
Showing 10 changed files with 1,431 additions and 568 deletions.
264 changes: 159 additions & 105 deletions API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,121 +350,175 @@ CounterBar

Simple
```jsx
<CounterBar
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 2 },
{ id: 'jkl', name: 'Counter 4', score: 9 },
{ id: 'mno', name: 'Counter 5', score: 2 },
{ id: 'pqr', name: 'Counter 6', score: 1 },
{ id: 'stu', name: 'Counter 7', score: 0 },
]}
/>
<CounterBar>
<CounterBar.Total score={15}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Active counter
```jsx
<CounterBar
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ active: true, id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 2 },
]}
/>
```
Active title
```jsx
<CounterBar
activeTitle
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 0 },
]}
/>
```
Active counter and title on click
```jsx
<CounterBar
listTitle="All counters"
activeTitle
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 2 },
{ id: 'jkl', name: 'Counter 4', score: 9 },
{ id: 'mno', name: 'Counter 5', score: 2 },
{ id: 'pqr', name: 'Counter 6', score: 1 },
{ id: 'stu', name: 'Counter 7' },
]}
// eslint-disable-next-line no-alert
onSelect={ (id) => alert(`Counter with id: ${id} selected.`) }
/>
```
Clickable counters
```jsx
<CounterBar
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 2 },
{ id: 'jkl', name: 'Counter 4', score: 9 },
{ id: 'mno', name: 'Counter 5', score: 2 },
{ id: 'pqr', name: 'Counter 6', score: 1 },
{ id: 'stu', name: 'Counter 7' },
]}
// eslint-disable-next-line no-alert
onSelect={ (id) => alert(`Counter with id: ${id} selected.`) }
/>
```

Padded container
```jsx
<CounterBar
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2', score: 2 },
{ id: 'ghi', name: 'Counter 3', score: 2 },
{ id: 'jkl', name: 'Counter 4', score: 0 },
{ id: 'mno', name: 'Counter 5', score: 2 },
{ id: 'pqr', name: 'Counter 6', score: 0 },
{ id: 'stu', name: 'Counter 7', score: 2 },
]}
/>
<CounterBar>
<CounterBar.Total score={15}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3} active>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Active total
```jsx
<CounterBar>
<CounterBar.Total score={15} active>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Empty counters
```jsx
<CounterBar>
<CounterBar.Total score={7}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter />
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter />
</CounterBar.Counters>
</CounterBar>
```
CounterBar with padded counters container
```jsx
<div style={{padding: '4px'}}>
<CounterBar>
<CounterBar.Total score={15}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
</div>
```

Zero/no scores
```jsx
<CounterBar
listTitle="All counters"
name="name"
counters={[
{ id: 'abc', name: 'Counter 1', score: 0 },
{ id: 'def', name: 'Counter 2' },
{ id: 'ghi', name: 'Counter 3', score: 0 },
]}
/>
```jsx
<CounterBar>
<CounterBar.Total score={9}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={0}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Custom colours on total
```jsx
<CounterBar>
<CounterBar.Total score={15} scoreColor="yellow" scoreBackgroundColor="pink">All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Custom colours on counters
```jsx
<CounterBar>
<CounterBar.Total score={15}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2} scoreColor="orange" scoreBackgroundColor="blue">Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4} scoreColor="yellow" scoreBackgroundColor="purple">Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Use any HTML element string for the total
```jsx
<CounterBar>
<CounterBar.Total score={15} component="aside">All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Use a Link component for the total
```jsx
import { HashRouter, Link } from 'react-router-dom';

<HashRouter>
<CounterBar>
<CounterBar.Total score={15} component={Link} to="/courses?sort=name'/">All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1}>Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
</HashRouter>
```
Use any HTML element string for a counter
```jsx
<CounterBar>
<CounterBar.Total score={15}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1} component="nav">Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2} component="aside">Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3} component="div">Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4} component="section">Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5} component="span">Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
```
Use a Link component for a counter
```jsx
import { HashRouter, Link } from 'react-router-dom';

<HashRouter>
<CounterBar>
<CounterBar.Total score={2}>All counters</CounterBar.Total>
<CounterBar.Counters>
<CounterBar.Counter score={1} component={Link} to="/courses/1/">Counter 1</CounterBar.Counter>
<CounterBar.Counter score={2}>Counter 2</CounterBar.Counter>
<CounterBar.Counter score={3}>Counter 3</CounterBar.Counter>
<CounterBar.Counter score={4}>Counter 4</CounterBar.Counter>
<CounterBar.Counter score={5}>Counter 5</CounterBar.Counter>
</CounterBar.Counters>
</CounterBar>
</HashRouter>
```

### Properties
Prop | Required | Default | Type | Description
:--- | :------- | :------ | :--- | :----------
`activeTitle` | | `````` | bool |
`counters` | | `````` | arrayOf[object Object] |
`listTitle` | | `````` | any |
`name` | true | `````` | string |
`onSelect` | | ```() => {}``` | func |
`children` | true | `````` | node |


DistractionFree
Expand Down
Loading

0 comments on commit d0af589

Please sign in to comment.