From 1d2f25f04dc06463a0a37aa4c6fddabab455cdcf Mon Sep 17 00:00:00 2001 From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com> Date: Thu, 8 Feb 2024 08:31:56 +0100 Subject: [PATCH] feat: underline for active header item and add lineair gradient --- .../src/components/Button/Button.module.scss | 2 +- .../src/components/Header/Header.module.scss | 2 +- .../IconButton/IconButton.module.scss | 2 +- .../VideoDetails/VideoDetails.module.scss | 10 +++++++++ .../components/VideoDetails/VideoDetails.tsx | 1 + .../__snapshots__/VideoDetails.test.tsx.snap | 3 +++ .../src/containers/Layout/Layout.module.scss | 22 +++++++++++++++---- packages/ui-react/src/utils/theming.ts | 6 +++-- packages/ui-react/stylelint.config.js | 8 +++++++ 9 files changed, 47 insertions(+), 9 deletions(-) diff --git a/packages/ui-react/src/components/Button/Button.module.scss b/packages/ui-react/src/components/Button/Button.module.scss index 40577575a..477b3196a 100644 --- a/packages/ui-react/src/components/Button/Button.module.scss +++ b/packages/ui-react/src/components/Button/Button.module.scss @@ -80,7 +80,7 @@ $large-button-height: 40px; &.text { background: none; - opacity: 0.7; + opacity: 0.9; &:not(.disabled) { &.active, diff --git a/packages/ui-react/src/components/Header/Header.module.scss b/packages/ui-react/src/components/Header/Header.module.scss index 4c2865d1a..a21a924cb 100644 --- a/packages/ui-react/src/components/Header/Header.module.scss +++ b/packages/ui-react/src/components/Header/Header.module.scss @@ -81,7 +81,7 @@ height: 36px; min-height: 36px; margin: 0 6px; - padding: calc(#{variables.$header-height} / 2.5) calc(#{variables.$base-spacing} / 2); + padding: 0 calc(#{variables.$base-spacing} / 2); font-weight: var(--body-font-weight-bold); font-size: 18px; } diff --git a/packages/ui-react/src/components/IconButton/IconButton.module.scss b/packages/ui-react/src/components/IconButton/IconButton.module.scss index b30ac672e..96235b923 100644 --- a/packages/ui-react/src/components/IconButton/IconButton.module.scss +++ b/packages/ui-react/src/components/IconButton/IconButton.module.scss @@ -11,7 +11,7 @@ outline: var(--highlight-color, white) none; cursor: pointer; - opacity: 0.7; + opacity: 0.9; transition: transform 0.1s ease; &:hover, diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss index 88809e784..a9d9ce5b9 100644 --- a/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss +++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.module.scss @@ -173,6 +173,16 @@ } } +.posterFade { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 120px; + background: linear-gradient(0deg, transparent, var(--body-background-color, variables.$white)); +} + .playIcon { position: absolute; top: calc(50% - 60px); diff --git a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx index 8d3a130dc..5cd9f853f 100644 --- a/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx +++ b/packages/ui-react/src/components/VideoDetails/VideoDetails.tsx @@ -42,6 +42,7 @@ const VideoDetails: React.VFC = ({
{alt} +

{title}

diff --git a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap index 65aa5f824..5a92ca533 100644 --- a/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap +++ b/packages/ui-react/src/components/VideoDetails/__snapshots__/VideoDetails.test.tsx.snap @@ -17,6 +17,9 @@ exports[` > renders and matches snapshot 1`] = ` class="_poster_d0c133 _image_4c41c3" src="http://image.jpg?width=1280" /> +
diff --git a/packages/ui-react/src/containers/Layout/Layout.module.scss b/packages/ui-react/src/containers/Layout/Layout.module.scss index ed88ccf92..06aac380b 100644 --- a/packages/ui-react/src/containers/Layout/Layout.module.scss +++ b/packages/ui-react/src/containers/Layout/Layout.module.scss @@ -52,8 +52,22 @@ div.testFixMargin { } .headerButton { - &:not(:focus) { - border-bottom: 2px variables.$white solid; - border-radius: 0; - } + overflow: visible; + + &::after { + position: absolute; + bottom: calc(((variables.$header-height - 36px) / 2) * -1); + left: 0; + width: 100%; + height: 2px; + background-color: variables.$white; + content: ''; + } + body:global(.is-tabbing) & { + &:focus { + &::after { + display: none; + } + } + } } diff --git a/packages/ui-react/src/utils/theming.ts b/packages/ui-react/src/utils/theming.ts index 5a928ceec..58631fe26 100644 --- a/packages/ui-react/src/utils/theming.ts +++ b/packages/ui-react/src/utils/theming.ts @@ -13,8 +13,10 @@ export const setThemingVariables = (config: Config) => { root.style.setProperty('--highlight-color', highlightColor || '#fff'); root.style.setProperty('--highlight-contrast-color', highlightColor ? calculateContrastColor(highlightColor) : '#000'); - root.style.setProperty('--header-background', headerBackground || 'rgba(0, 0, 0, 0.85)'); - root.style.setProperty('--header-contrast-color', headerBackground ? calculateContrastColor(headerBackground) : '#fff'); + if (headerBackground) { + root.style.setProperty('--header-background', headerBackground); + root.style.setProperty('--header-contrast-color', calculateContrastColor(headerBackground)); + } if (backgroundColor) { root.style.setProperty('--body-background-color', backgroundColor); diff --git a/packages/ui-react/stylelint.config.js b/packages/ui-react/stylelint.config.js index 67e3aa538..97df9f71a 100644 --- a/packages/ui-react/stylelint.config.js +++ b/packages/ui-react/stylelint.config.js @@ -1,3 +1,11 @@ module.exports = { extends: ['stylelint-config-jwp'], + rules: { + 'selector-pseudo-class-no-unknown': [ + true, + { + ignorePseudoClasses: ['global'], + }, + ], + }, };