Skip to content

Commit

Permalink
Merge pull request #133 from FDMediagroep/develop
Browse files Browse the repository at this point in the history 
Redesign buttons
  • Loading branch information
@willemliufdmg
willemliufdmg committed Sep 10, 2020
2 parents dec6bcb + 64b724e commit a39a77a
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 74 deletions.
4 changes: 0 additions & 4 deletions __tests__/components/button/Button.test.tsx
View file
Expand Up @@ -31,13 +31,9 @@ describe('Button', () => {
const { container: container2 } = render(
<Button size="m">Knopje</Button>
);
const { container: container3 } = render(
<Button size="l">Knopje</Button>
);

expect(container).toMatchSnapshot();
expect(container2).toMatchSnapshot();
expect(container3).toMatchSnapshot();
});

test('should have correct class name', () => {
Expand Down
10 changes: 0 additions & 10 deletions __tests__/components/button/__snapshots__/Button.test.tsx.snap
View file
Expand Up @@ -19,13 +19,3 @@ exports[`Button should handle sizes correctly 2`] = `
</button>
</div>
`;

exports[`Button should handle sizes correctly 3`] = `
<div>
<button
class="fdButton l"
>
Knopje
</button>
</div>
`;
154 changes: 139 additions & 15 deletions src/components/button/Button.module.scss
View file
@@ -1,48 +1,172 @@
@import '../../utils/map-deep-get.scss';
@import '../../design-tokens/colors.scss';
@import '../../design-tokens/media.scss';
@import '../../design-tokens/typography.scss';

.fdButton {
user-select: none;
position: relative;
overflow: hidden;
min-height: 2rem;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: 1rem;
line-height: 1;
color: #ffffff;
font-size: 0.875rem;
line-height: 1.25;
color: var(--button-text);
text-decoration: none;
cursor: pointer;
padding: 0 1rem;
border: none;
text-align: center;
background-position: center;
transition: transform 0.05s ease-out, background-color 0.1s;
border-radius: 0;
font-family: map-deep-get($typography, 'font-family', 'bold'), sans-serif;
font-weight: normal;
letter-spacing: -0.2px;
@media screen and (max-width: map-deep-get($media, 'sizes', 'xs')) {
width: 100%;
}

> * {
display: flex;
}

background-color: var(--button);
&:hover {
background-color: var(--button-hover);
}
// IE11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
color: #{map-deep-get($colors, 'colors', 'neutral', 100)};
background-color: #{map-deep-get($colors, 'colors', 'neutral', 40)};
&:hover {
background-color: #{map-deep-get($colors, 'colors', 'neutral', 30)};
}
}

box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset;
border-radius: 2px;
transition: background-color 0.1s;
font-family: map-deep-get($typography, 'font-family', 'bold'), sans-serif;
font-weight: normal;
&.m {
min-height: 2.5rem;
font-size: 1rem;
min-height: 3rem;
}

@media screen and (min-width: map-deep-get($media, 'sizes', 's')) {
&:active {
transform: scale(0.95);
}
}

&:hover,
&:active,
&:focus {
outline: 1px solid var(--button-outline);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
outline: #{map-deep-get($colors, 'colors', 'primary', 75)};
}
}

&:before {
content: '';
position: absolute;
background-color: white;
width: 0;
height: 100%;
}
&.l {
font-size: 1.25rem;
padding: 0 1.5rem;
min-height: 3.5rem;

&:focus {
background-color: var(--button-focus);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get($colors, 'colors', 'neutral', 0)};
}
}

/**
* Trick to play animation after click happened
*/
&:not(:active):before {
content: '';
transform: skewX(15deg);
animation: ripple 0.5s;
}

&:active {
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) inset;
background-color: var(--button-active);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get($colors, 'colors', 'neutral', 0)};
}

@media screen and (max-width: map-deep-get($media, 'sizes', 'xs')) {
transform: scale(0.98);
}
}

&:hover {
background-color: var(--button-hover);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get($colors, 'colors', 'neutral', 30)};
}

&:active {
background-color: var(--button-active);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get(
$colors,
'colors',
'neutral',
0
)};
}
}
}

&:disabled,
&:disabled:active {
outline: none;
background-color: var(--button-disabled);
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
background-color: #{map-deep-get($colors, 'colors', 'neutral', 60)};
}
transform: scale(1);
}

svg {
fill: #ffffff;
// IE11
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
fill: #ffffff;
}

width: 1rem;
height: 1rem;
margin: 0 0.5rem;
}

@keyframes ripple {
0% {
width: 0%;
opacity: 0.2;
}
50% {
opacity: 0.2;
}
100% {
width: 130%;
opacity: 0;
}
}
}
15 changes: 2 additions & 13 deletions src/components/button/Button.tsx
View file
@@ -1,7 +1,7 @@
import React from 'react';
import styles from './Button.module.scss';

type Sizes = 's' | 'm' | 'l';
type Sizes = 's' | 'm';

interface Props {
className?: string;
Expand All @@ -17,18 +17,7 @@ interface Props {
* @param props
*/
function Button(props: Props) {
let sizeClass = '';

switch (props.size) {
case 'm':
sizeClass = styles.m;
break;
case 'l':
sizeClass = styles.l;
break;
default:
sizeClass = '';
}
let sizeClass = props.size === 'm' ? styles.m : '';

return (
<button
Expand Down
32 changes: 26 additions & 6 deletions src/design-tokens/design-tokens.scss
View file
Expand Up @@ -87,8 +87,13 @@
--stock-positive-fill: #{map-deep-get($colors, 'colors', 'primary', 50)};
--stock-closed: #{map-deep-get($colors, 'colors', 'neutral', 40)};

--button: #{map-deep-get($colors, 'colors', 'neutral', 40)};
--button-hover: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-text: #{map-deep-get($colors, 'colors', 'neutral', 100)};
--button: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-outline: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-hover: #{map-deep-get($colors, 'colors', 'primary', 100)};
--button-focus: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-active: #{map-deep-get($colors, 'colors', 'primary', 100)};
--button-disabled: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-cta: #{map-deep-get($colors, 'colors', 'persoonlijk', 75)};
--button-cta-hover: #{map-deep-get($colors, 'colors', 'persoonlijk', 50)};

Expand Down Expand Up @@ -180,8 +185,13 @@
--stock-positive-fill: #{map-deep-get($colors, 'colors', 'primary', 50)};
--stock-closed: #{map-deep-get($colors, 'colors', 'neutral', 40)};

--button: #{map-deep-get($colors, 'colors', 'neutral', 40)};
--button-text: #{map-deep-get($colors, 'colors', 'neutral', 100)};
--button: #{map-deep-get($colors, 'colors', 'neutral', 10)};
--button-outline: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-hover: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-focus: #{map-deep-get($colors, 'colors', 'neutral', 0)};
--button-active: #{map-deep-get($colors, 'colors', 'neutral', 0)};
--button-disabled: #{map-deep-get($colors, 'colors', 'neutral', 60)};
--button-cta: #{map-deep-get($colors, 'colors', 'persoonlijk', 100)};
--button-cta-hover: #{map-deep-get($colors, 'colors', 'persoonlijk', 75)};

Expand Down Expand Up @@ -275,8 +285,13 @@
--stock-positive-fill: #{map-deep-get($colors, 'colors', 'primary', 50)};
--stock-closed: #{map-deep-get($colors, 'colors', 'neutral', 40)};

--button: #{map-deep-get($colors, 'colors', 'neutral', 40)};
--button-hover: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-text: #{map-deep-get($colors, 'colors', 'neutral', 100)};
--button: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-outline: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-hover: #{map-deep-get($colors, 'colors', 'primary', 100)};
--button-focus: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-active: #{map-deep-get($colors, 'colors', 'primary', 100)};
--button-disabled: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-cta: #{map-deep-get($colors, 'colors', 'persoonlijk', 75)};
--button-cta-hover: #{map-deep-get($colors, 'colors', 'persoonlijk', 50)};

Expand Down Expand Up @@ -366,8 +381,13 @@
--stock-positive-fill: #{map-deep-get($colors, 'colors', 'primary', 50)};
--stock-closed: #{map-deep-get($colors, 'colors', 'neutral', 40)};

--button: #{map-deep-get($colors, 'colors', 'neutral', 40)};
--button-text: #{map-deep-get($colors, 'colors', 'neutral', 100)};
--button: #{map-deep-get($colors, 'colors', 'neutral', 10)};
--button-outline: #{map-deep-get($colors, 'colors', 'primary', 75)};
--button-hover: #{map-deep-get($colors, 'colors', 'neutral', 30)};
--button-focus: #{map-deep-get($colors, 'colors', 'neutral', 0)};
--button-active: #{map-deep-get($colors, 'colors', 'neutral', 0)};
--button-disabled: #{map-deep-get($colors, 'colors', 'neutral', 60)};
--button-cta: #{map-deep-get($colors, 'colors', 'persoonlijk', 100)};
--button-cta-hover: #{map-deep-get($colors, 'colors', 'persoonlijk', 75)};

Expand Down
6 changes: 6 additions & 0 deletions src/pages/button/buttons.module.scss
View file
@@ -0,0 +1,6 @@
.buttons {
display: inline;
button {
margin-bottom: 1rem;
}
}

1 comment on commit a39a77a

@vercel
Copy link

@vercel vercel bot commented on a39a77a Sep 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.