feat: underline for active header item and add lineair gradient

jwplayer · Feb 22, 2024 · 1d2f25f · 1d2f25f
1 parent b4c3230
commit 1d2f25f
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -42,6 +42,7 @@ const VideoDetails: React.VFC<Props> = ({
       <header className={styles.video} data-testid={testId('video-details')}>
         <div className={classNames(styles.main, styles.mainPadding)}>
           <Image className={styles.poster} image={image} alt={alt} width={1280} />
+          <div className={styles.posterFade} />
           <div className={styles.info}>
             <h1 className={styles.title}>{title}</h1>
             <div className={styles.metaContainer}>

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
@@ -17,6 +17,9 @@ exports[`<VideoDetails> > renders and matches snapshot 1`] = `
           class="_poster_d0c133 _image_4c41c3"
           src="http://image.jpg?width=1280"
         />
+        <div
+          class="_posterFade_d0c133"
+        />
         <div
           class="_info_d0c133"
         >

diff --git 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
@@ -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
@@ -1,3 +1,11 @@
 module.exports = {
   extends: ['stylelint-config-jwp'],
+  rules: {
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global'],
+      },
+    ],
+  },
 };