Skip to content
This repository was archived by the owner on Jan 21, 2019. It is now read-only.

Cleanup #28

Closed
wants to merge 5 commits into from
Closed

Cleanup #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
742d53b
Move icons and rebuild yarn.lock
vforge May 4, 2018
66745ca
Add loading flag to the button
vforge May 4, 2018
5859d24
Add tests
vforge May 4, 2018
4fbac4e
Fix tests
vforge May 5, 2018
1852fc4
Fix deprecation in tests
vforge May 5, 2018
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
2 changes: 1 addition & 1 deletion components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
},
{
"name": "Design System Icons",
"components": [
"icons": [
"VideoPlayIcon"
]
},
Expand Down
10 changes: 10 additions & 0 deletions src/components/Button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,13 @@ Different styles:
<Button square>&hellip;</Button>
</div>
```

Loading styles:
```js
<div>
<Button href='#' loading>Link</Button>
<Button secondary loading>Secondary</Button>
<Button text loading>Text</Button>
<Button square loading>&hellip;</Button>
</div>
```
216 changes: 216 additions & 0 deletions src/components/Button/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,222 @@ exports[`Button renders correctly with custom types values 5`] = `
</button>
`;

exports[`Button renders correctly with custom types values with loading 1`] = `
<a
className="wds-button is-loading"
disabled={false}
href="#"
onClick={[Function]}
>
<div
className="fandom-spinner wds-button__spinner"
style={
Object {
"height": 20,
"width": 20,
}
}
>
<svg
height={20}
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(10, 10)"
>
<circle
fill="none"
r={9}
strokeDasharray={56.548667764616276}
strokeDashoffset={56.548667764616276}
strokeLinecap="round"
strokeWidth={2}
/>
</g>
</svg>
</div>
<div
className="wds-button__original-content"
>
Link
</div>
</a>
`;

exports[`Button renders correctly with custom types values with loading 2`] = `
<button
className="wds-button wds-is-secondary is-loading"
disabled={false}
onClick={[Function]}
>
<div
className="fandom-spinner wds-button__spinner is-secondary"
style={
Object {
"height": 20,
"width": 20,
}
}
>
<svg
height={20}
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(10, 10)"
>
<circle
fill="none"
r={9}
strokeDasharray={56.548667764616276}
strokeDashoffset={56.548667764616276}
strokeLinecap="round"
strokeWidth={2}
/>
</g>
</svg>
</div>
<div
className="wds-button__original-content"
>
secondary
</div>
</button>
`;

exports[`Button renders correctly with custom types values with loading 3`] = `
<button
className="wds-button wds-is-text is-loading"
disabled={false}
onClick={[Function]}
>
<div
className="fandom-spinner wds-button__spinner is-text"
style={
Object {
"height": 20,
"width": 20,
}
}
>
<svg
height={20}
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(10, 10)"
>
<circle
fill="none"
r={9}
strokeDasharray={56.548667764616276}
strokeDashoffset={56.548667764616276}
strokeLinecap="round"
strokeWidth={2}
/>
</g>
</svg>
</div>
<div
className="wds-button__original-content"
>
text
</div>
</button>
`;

exports[`Button renders correctly with custom types values with loading 4`] = `
<button
className="wds-button wds-is-square is-loading"
disabled={false}
onClick={[Function]}
>
<div
className="fandom-spinner wds-button__spinner"
style={
Object {
"height": 20,
"width": 20,
}
}
>
<svg
height={20}
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(10, 10)"
>
<circle
fill="none"
r={9}
strokeDasharray={56.548667764616276}
strokeDashoffset={56.548667764616276}
strokeLinecap="round"
strokeWidth={2}
/>
</g>
</svg>
</div>
<div
className="wds-button__original-content"
>
…
</div>
</button>
`;

exports[`Button renders correctly with custom types values with loading 5`] = `
<button
className="wds-button custom-class is-loading"
disabled={false}
onClick={[Function]}
>
<div
className="fandom-spinner wds-button__spinner"
style={
Object {
"height": 20,
"width": 20,
}
}
>
<svg
height={20}
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
<g
transform="translate(10, 10)"
>
<circle
fill="none"
r={9}
strokeDasharray={56.548667764616276}
strokeDashoffset={56.548667764616276}
strokeLinecap="round"
strokeWidth={2}
/>
</g>
</svg>
</div>
<div
className="wds-button__original-content"
>
with custom class name
</div>
</button>
`;

exports[`Button renders correctly with default values 1`] = `
<button
className="wds-button"
Expand Down
35 changes: 35 additions & 0 deletions src/components/Button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';
import PropTypes from 'prop-types';

import Spinner from '../Spinner';

import './styles.scss';

/**
* Basic button component
*/
Expand All @@ -11,6 +15,7 @@ const Button = ({
secondary,
square,
children,
loading,
...rest
}) => {
const classes = [
Expand All @@ -19,8 +24,33 @@ const Button = ({
secondary ? 'wds-is-secondary' : '',
square ? 'wds-is-square' : '',
text ? 'wds-is-text' : '',
loading ? `is-loading` : '',
].filter(c => c).join(' ');

if (loading) {
const loadingClasses = [
'wds-button__spinner',
secondary ? 'is-secondary' : '',
text ? 'is-text' : '',
].filter(c => c).join(' ');

if (href) {
return (
<a href={href} className={classes} {...rest}>
<Spinner className={loadingClasses} size={20} />
<div className="wds-button__original-content">{children}</div>
</a>
);
}

return (
<button className={classes} {...rest}>
<Spinner className={loadingClasses} size={20} />
<div className="wds-button__original-content">{children}</div>
</button>
);
}

if (href) {
return <a href={href} className={classes} {...rest}>{children}</a>;
}
Expand Down Expand Up @@ -58,6 +88,10 @@ Button.propTypes = {
* Text flag
*/
text: PropTypes.bool,
/**
* Loading flag
*/
loading: PropTypes.bool,
/**
* Callback for the `<button>`
*/
Expand All @@ -69,6 +103,7 @@ Button.defaultProps = {
className: '',
disabled: false,
href: null,
loading: false,
secondary: false,
square: false,
text: false,
Expand Down
27 changes: 27 additions & 0 deletions src/components/Button/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,30 @@ test('Button renders correctly with custom types values', () => {
);
expect(component.toJSON()).toMatchSnapshot();
});

test('Button renders correctly with custom types values with loading', () => {
let component = renderer.create(
<Button href="#" loading>Link</Button>,
);
expect(component.toJSON()).toMatchSnapshot();

component = renderer.create(
<Button secondary loading>secondary</Button>,
);
expect(component.toJSON()).toMatchSnapshot();

component = renderer.create(
<Button text loading>text</Button>,
);
expect(component.toJSON()).toMatchSnapshot();

component = renderer.create(
<Button square loading>&hellip;</Button>,
);
expect(component.toJSON()).toMatchSnapshot();

component = renderer.create(
<Button className="custom-class" loading>with custom class name</Button>,
);
expect(component.toJSON()).toMatchSnapshot();
});
25 changes: 24 additions & 1 deletion src/components/Button/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,27 @@
@import "~design-system/dist/scss/wds-variables/index.scss";

// import wds-button
@import "~design-system/dist/scss/wds-components/_button.scss";
@import "~design-system/dist/scss/wds-components/_buttons.scss";

.wds-button {
&.is-loading {
pointer-events: none;
}

&__spinner {
position: absolute;

& > svg circle {
stroke: #fff;
}

&.is-text > svg circle,
&.is-secondary > svg circle {
stroke: #00b7e0;
}
}

&__original-content {
visibility: hidden;
}
}
Loading