Skip to content

CAKE-4662 | 🐛 Add className to countdown components #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 11, 2019
Merged

CAKE-4662 | 🐛 Add className to countdown components #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3fccca
CAKE-4662 | :bug: Add className to countdown components
vforge Apr 8, 2019
e4c0ea1
CAKE-4662 | :bug: Add className to StyledAvatar
vforge Apr 8, 2019
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
12 changes: 6 additions & 6 deletions docs/build/bundle.14bcdddd.js → docs/build/bundle.61d38668.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.14bcdddd.js"></script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.61d38668.js"></script></body></html>
33 changes: 22 additions & 11 deletions source/components/Countdown/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@

exports[`Countdown calls callback 10 times with proper values Callback #0 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -27,10 +28,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #0 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #1 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -52,10 +54,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #1 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #2 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -77,10 +80,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #2 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #3 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -102,10 +106,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #3 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #4 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -127,10 +132,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #4 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #5 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -152,10 +158,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #5 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #6 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -177,10 +184,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #6 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #7 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -202,10 +210,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #7 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #8 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -227,10 +236,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #8 1`] =

exports[`Countdown calls callback 10 times with proper values Callback #9 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand All @@ -243,10 +253,11 @@ exports[`Countdown calls callback 10 times with proper values Callback #9 1`] =

exports[`Countdown renders correctly 1`] = `
<Countdown
className=""
onTick={[Function]}
>
<div
className="countdown__wrapper"
className="countdown__wrapper "
>
<span
className="countdown__value"
Expand Down
10 changes: 8 additions & 2 deletions source/components/Countdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const LOW = 3;
/**
* Simple circular, countdown-from-10 component with callback.
*/
const Countdown = ({ onTick }) => {
const Countdown = ({ className, onTick }) => {
const [value, setValue] = useState(START);

useInterval(() => {
Expand All @@ -26,7 +26,7 @@ const Countdown = ({ onTick }) => {
const rangeClassName = (value <= LOW ? 'is-low' : (value <= HIGH ? 'is-medium' : 'is-high'));

return (
<div className="countdown__wrapper">
<div className={`countdown__wrapper ${className}`}>
<span className="countdown__value">{value}</span>
{value > 0 && (
<svg className={`countdown__animation ${rangeClassName}`}>
Expand All @@ -38,8 +38,14 @@ const Countdown = ({ onTick }) => {
};

Countdown.propTypes = {
/** Additional class name */
className: PropTypes.string,
/** Callback function that will be called at every tick - 1st param is the value */
onTick: PropTypes.func.isRequired,
};

Countdown.defaultProps = {
className: '',
};

export default Countdown;
1 change: 1 addition & 0 deletions source/components/Countdown/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
align-items: center;
background-color: $wds-color-white;
border-radius: 100%;
color: $wds-color-black;
display: inline-flex;
height: 40px;
justify-content: center;
Expand Down
9 changes: 7 additions & 2 deletions source/components/StyledAvatar/__snapshots__/index.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -659,11 +659,13 @@ exports[`Avatar renders with props 1`] = `
title="title"
>
<StyledAvatar__Wrapper
className="class-name"
href="href"
size={48}
title="title"
>
<StyledComponent
className="class-name"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand Down Expand Up @@ -710,7 +712,7 @@ exports[`Avatar renders with props 1`] = `
title="title"
>
<div
className="StyledAvatar__Wrapper-sc-8ufved-1 cYlivE"
className="class-name StyledAvatar__Wrapper-sc-8ufved-1 cYlivE"
href="href"
size={48}
title="title"
Expand Down Expand Up @@ -1227,12 +1229,15 @@ exports[`Avatar renders with size 30px 1`] = `
<StyledAvatar
alt="User avatar"
badge="sysop"
className="foo"
size="30"
>
<StyledAvatar__Wrapper
className="foo"
size="30"
>
<StyledComponent
className="foo"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand Down Expand Up @@ -1277,7 +1282,7 @@ exports[`Avatar renders with size 30px 1`] = `
size="30"
>
<div
className="StyledAvatar__Wrapper-sc-8ufved-1 miNBH"
className="foo StyledAvatar__Wrapper-sc-8ufved-1 miNBH"
size="30"
>
<DefaultAvatar
Expand Down
5 changes: 4 additions & 1 deletion source/components/StyledAvatar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ class StyledAvatar extends React.Component {

render() {
return (
<Wrapper title={this.props.title} size={this.props.size} href={this.props.href}>
<Wrapper className={this.props.className} title={this.props.title} size={this.props.size} href={this.props.href}>
{this.renderAvatarImage()}
{this.props.badge && <Badge badge={this.props.badge} diameter={parseInt(this.props.size, 10)} size={getBadgeSize(this.props.size)} />}
</Wrapper>
Expand All @@ -98,6 +98,8 @@ StyledAvatar.propTypes = {
'global-discussions-moderator', 'helper', 'staff', 'vstf', '',
],
),
/** Additional class name */
className: PropTypes.string,
/** Link to user's profile */
href: PropTypes.string,
/** Function that returns wrapped avatar image, accepts one argument avatarImage which provides the actual avatar image */
Expand All @@ -115,6 +117,7 @@ StyledAvatar.propTypes = {
StyledAvatar.defaultProps = {
alt: 'User avatar',
badge: undefined,
className: undefined,
href: undefined,
linkBuilder: undefined,
size: 48,
Expand Down
2 changes: 1 addition & 1 deletion source/components/StyledAvatar/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ test('Avatar renders with default props', () => {
});

test('Avatar renders with size 30px', () => {
const component = mount(<StyledAvatar size="30" badge="sysop" />);
const component = mount(<StyledAvatar className="foo" size="30" badge="sysop" />);
expect(component).toMatchSnapshot();
});

Expand Down
Loading