From 397df95067f6292e052a0f6cf94a434c43f16f68 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Mon, 1 Feb 2021 11:41:27 +0200
Subject: [PATCH] Update and fix missing CTA button hover/focus effects
---
src/components/cta-button/cta-button.scss | 125 +++++++++++++++++-----
src/components/hy-hero/hy-hero.tsx | 4 +-
src/components/hy-hero/readme.md | 22 ++--
src/utils/utils.ts | 1 +
4 files changed, 111 insertions(+), 41 deletions(-)
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 80ac8621..b038e87b 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -15,8 +15,13 @@
&.transparent-background {
background-color: var(--grayscale-white);
+ border: 3px solid var(--grayscale-black);
color: var(--grayscale-black);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-black);
+ }
+
.link-icon svg {
background-color: var(--grayscale-white);
fill: var(--grayscale-black);
@@ -29,8 +34,13 @@
&.black-background {
background-color: var(--grayscale-black);
+ border: 3px solid var(--grayscale-white);
color: var(--grayscale-white);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-white);
+ }
+
.link-icon svg {
background-color: var(--grayscale-black);
fill: var(--grayscale-white);
@@ -39,12 +49,33 @@
.text {
color: var(--grayscale-white);
}
+
+ &:hover {
+ background-color: var(--brand-main-active);
+
+ .link-icon svg {
+ background-color: var(--brand-main-active);
+ }
+ }
+
+ &:focus {
+ background-color: var(--brand-main);
+
+ .link-icon svg {
+ background-color: var(--brand-main);
+ }
+ }
}
&.blue-background {
background-color: var(--brand-main-light);
+ border: 3px solid var(--grayscale-white);
color: var(--grayscale-white);
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--grayscale-white);
+ }
+
.link-icon svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
@@ -53,19 +84,64 @@
.text {
color: var(--grayscale-white);
}
+
+ &:hover {
+ background-color: var(--brand-main);
+
+ .link-icon svg {
+ background-color: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ background-color: var(--brand-main-active);
+
+ .link-icon svg {
+ background-color: var(--brand-main-active);
+ }
+ }
}
&.white-background {
- background-color: var(--brand-main-light);
- color: var(--grayscale-white);
+ background-color: var(--grayscale-white);
+ border: 3px solid var(--brand-main-light);
+ color: var(--brand-main-light);
+
+ @include breakpoint($xlarge) {
+ border: 4px solid var(--brand-main-light);
+ }
.link-icon svg {
- background-color: var(--brand-main-light);
- fill: var(--grayscale-white);
+ background-color: var(--grayscale-white);
+ fill: var(--brand-main-light);
}
.text {
- color: var(--grayscale-white);
+ color: var(--brand-main-light);
+ }
+
+ &:hover {
+ border-color: var(--brand-main);
+
+ .text {
+ color: var(--brand-main);
+ }
+
+ .link-icon svg {
+ fill: var(--brand-main);
+ }
+ }
+
+ &:focus {
+ border-color: var(--brand-main-active);
+
+ .text {
+ color: var(--brand-main-active);
+ }
+
+ .link-icon svg {
+ fill: var(--brand-main-active);
+ }
}
}
@@ -77,11 +153,11 @@
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
display: flex;
- justify-content: center;
height: 100%;
+ justify-content: center;
max-width: 278px;
-
padding: 14px 12px;
+
@include breakpoint($narrow) {
padding: 15px 16px;
}
@@ -100,10 +176,12 @@
@include breakpoint($narrow) {
@include font-size(18px, 18px); //button medium
}
+
@include breakpoint($extrawide) {
// with sidebar on page
@include font-size(18px, 18px); //button medium
}
+
@include breakpoint($xlarge) {
// with sidebar on page
@include font-size(20px, 20px); //button large
@@ -116,9 +194,11 @@
@include breakpoint($narrow) {
margin-left: 10px; //button medium
}
+
@include breakpoint($extrawide) {
margin-left: 10px; //button medium
}
+
@include breakpoint($xlarge) {
margin-left: 12px; //button large
}
@@ -132,11 +212,13 @@
height: 18px;
width: 18px;
}
+
@include breakpoint($extrawide) {
//button medium
height: 18px;
width: 18px;
}
+
@include breakpoint($xlarge) {
//button large
height: 22px;
@@ -145,25 +227,6 @@
}
}
}
-
- &.blue-background,
- &.black-background {
- border: 3px solid var(--grayscale-white);
- @include breakpoint($xlarge) {
- border: 4px solid var(--grayscale-white);
- }
- }
-
- &.transparent-background {
- border: 3px solid var(--grayscale-black);
- @include breakpoint($xlarge) {
- border: 4px solid var(--grayscale-black);
- }
- }
-
- &.white-background {
- border: none;
- }
}
.hy-cta-button.large {
@@ -194,13 +257,19 @@
&.blue-background,
&.black-background {
@include breakpoint($extrawide) {
- border: 4px solid var(--grayscale-white);
+ border-width: 4px;
}
}
&.transparent-background {
@include breakpoint($extrawide) {
- border: 4px solid var(--grayscale-black);
+ border-width: 4px;
+ }
+ }
+
+ &.white-background {
+ @include breakpoint($extrawide) {
+ border-width: 4px;
}
}
}
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index d36df7f8..524c6a9d 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -80,8 +80,8 @@ export class HyHero {
if (this.colorVariant == HeroColorVariant.black) {
variant = CtaLinkButtonVariants.onBlackBkgd;
- } else if (this.colorVariant == HeroColorVariant.white) {
- variant = CtaLinkButtonVariants.onTransparentBkgd;
+ } else if (this.colorVariant == HeroColorVariant.white || this.colorVariant == HeroColorVariant.fp_white) {
+ variant = CtaLinkButtonVariants.onWhiteBkgd;
}
return (
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 3a8d33c0..7e6cb398 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -4,17 +4,17 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
-| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
-| `description` | `description` | | `string` | `undefined` |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `heading` | `heading` | | `string` | `undefined` |
-| `image` | `image` | | `string` | `undefined` |
-| `isExternal` | `is-external` | | `boolean` | `false` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
-| `urlTitle` | `url-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | --------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ----------------------- |
+| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.fp_white \| HeroColorVariant.white` | `HeroColorVariant.blue` |
+| `description` | `description` | | `string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `heading` | `heading` | | `string` | `undefined` |
+| `image` | `image` | | `string` | `undefined` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `urlTitle` | `url-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index f34e08dc..c4fa3e07 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -182,6 +182,7 @@ export enum HeroColorVariant {
blue = 'blue',
black = 'black',
white = 'white',
+ fp_white = 'fp_white',
}
export enum FooterLinkItemColor {
--
GitLab