forked from box/box-ui-elements
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(sidebar): Toggle button (box#1268)
* feat(sidebar): Toggle button * chore: PR comments and add unit tests * chore: fix classes * chore: add e2e tests * chore: update README.md * chore: decouple resin tags from data testids
- Loading branch information
1 parent
7d2ac4c
commit fb7f181
Showing
12 changed files
with
846 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
### Examples | ||
**Open** | ||
```js | ||
<SidebarToggleButton isOpen/> | ||
``` | ||
**Closed** | ||
```js | ||
<SidebarToggleButton isOpen={false}/> | ||
``` | ||
**When sidebar is on the left, change the direction** | ||
```js | ||
<SidebarToggleButton direction="left" isOpen/> | ||
``` | ||
|
57 changes: 57 additions & 0 deletions
57
src/components/sidebar-toggle-button/SidebarToggleButton.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
// @flow | ||
import * as React from 'react'; | ||
import classNames from 'classnames'; | ||
import { injectIntl } from 'react-intl'; | ||
|
||
import IconHide from '../../icons/general/IconHide'; | ||
import IconShow from '../../icons/general/IconShow'; | ||
import PlainButton from '../plain-button'; | ||
import Tooltip from '../tooltip'; | ||
|
||
import messages from '../../elements/common/messages'; | ||
|
||
import './SidebarToggleButton.scss'; | ||
|
||
const DIRECTION_LEFT = 'left'; | ||
const DIRECTION_RIGHT = 'right'; | ||
|
||
type Props = { | ||
className?: string, | ||
direction?: string, | ||
isOpen: boolean, | ||
onClick?: Function, | ||
} & InjectIntlProvidedProps; | ||
|
||
const SidebarToggleButton = ({ | ||
className = '', | ||
direction = DIRECTION_RIGHT, | ||
intl, | ||
isOpen, | ||
onClick, | ||
...rest | ||
}: Props) => { | ||
const isCollapsed = !isOpen ? 'collapsed' : ''; | ||
const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow; | ||
const intlText = intl.formatMessage(intlMessage); | ||
const classes = classNames(className, 'bdl-SidebarToggleButton', { | ||
'bdl-is-collapsed': isCollapsed, | ||
}); | ||
const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left'; | ||
|
||
const renderButton = () => { | ||
if (direction === DIRECTION_LEFT) { | ||
return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />; | ||
} | ||
return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />; | ||
}; | ||
|
||
return ( | ||
<Tooltip position={tooltipPosition} text={intlText}> | ||
<PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}> | ||
{renderButton()} | ||
</PlainButton> | ||
</Tooltip> | ||
); | ||
}; | ||
|
||
export default injectIntl(SidebarToggleButton); |
29 changes: 29 additions & 0 deletions
29
src/components/sidebar-toggle-button/SidebarToggleButton.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
@import '../../styles/variables'; | ||
|
||
.bdl-SidebarToggleButton { | ||
border-radius: $bdl-border-radius-size; | ||
margin: 0 3px; | ||
padding: 4px; | ||
|
||
path { | ||
fill: $bdl-gray-50; | ||
} | ||
|
||
&:not(.is-disabled):hover { | ||
background-color: $bdl-gray-05; | ||
} | ||
|
||
&:not(.is-disabled):focus { | ||
border-color: #96a0a6; | ||
box-shadow: 0 1px 2px rgba(0, 0, 0, .1); | ||
} | ||
|
||
&.bdl-is-collapsed, | ||
&.bdl-is-collapsed:hover { | ||
background-color: $bdl-box-blue; | ||
|
||
path { | ||
fill: $white; | ||
} | ||
} | ||
} |
35 changes: 35 additions & 0 deletions
35
src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from 'react'; | ||
|
||
import SidebarToggleButton from '..'; | ||
|
||
describe('components/sidebar-toggle-button/SidebarToggleButton', () => { | ||
test('should render correctly as open', () => { | ||
const wrapper = mount(<SidebarToggleButton isOpen />); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
|
||
test('should render correctly as closed', () => { | ||
const wrapper = mount(<SidebarToggleButton isOpen={false} />); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
|
||
test('should have the proper class when it is collapsed', () => { | ||
const wrapper = mount(<SidebarToggleButton isOpen={false} />); | ||
|
||
expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy(); | ||
}); | ||
|
||
test('should render correctly as left oriented toggle when open', () => { | ||
const wrapper = mount(<SidebarToggleButton direction="left" isOpen />); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
|
||
test('should render correctly as left oriented toggle when closed', () => { | ||
const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />); | ||
|
||
expect(wrapper).toMatchSnapshot(); | ||
}); | ||
}); |
Oops, something went wrong.