feat(project): support alternate images

jwplayer · Sep 26, 2022 · e81f491 · e81f491
1 parent 10eedd8
commit e81f491
Show file tree

Hide file tree

Showing 107 changed files with 1,632 additions and 574 deletions.
diff --git a/.depcheckrc.yaml b/.depcheckrc.yaml
@@ -1,19 +1,20 @@
 ignores: [
-    # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
-    'postcss-scss',
-    'stylelint-order',
-    'stylelint-config-recommended-scss',
-    'stylelint-declaration-strict-value',
-    'stylelint-scss',
-    # This is used by commitlint in .commitlintrc.js
-    ' @commitlint/config-conventional',
-    # These are vite aliases / tsconfig paths that point to specific local directories
-    # Note the \\ is apparently necessary to escape the # or the ignore doesn't work
-    "\\#src",
-    "\\#test",
-    "\\#types",
-    # To support e2e-reports
-    'allure-commandline',
-    # To run linting checks
-    'npm-run-all',
-  ]
+  # These are dependencies for vite and vite plugins that depcheck doesn't recognize as being used
+  'postcss-scss',
+  'stylelint-order',
+  'stylelint-config-recommended-scss',
+  'stylelint-declaration-strict-value',
+  'stylelint-scss',
+  '@vitest/coverage-c8',
+  # This is used by commitlint in .commitlintrc.js
+  ' @commitlint/config-conventional',
+  # These are vite aliases / tsconfig paths that point to specific local directories
+  # Note the \\ is apparently necessary to escape the # or the ignore doesn't work
+  "\\#src",
+  "\\#test",
+  "\\#types",
+  # To support e2e-reports
+  'allure-commandline',
+  # To run linting checks
+  'npm-run-all',
+]
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^1.0.7",
-    "c8": "^7.11.2",
+    "@vitest/coverage-c8": "^0.23.4",
     "codeceptjs": "3.3.0",
     "confusing-browser-globals": "^1.0.10",
     "depcheck": "^1.4.3",
@@ -116,7 +116,7 @@
     "vite-plugin-pwa": "^0.11.13",
     "vite-plugin-static-copy": "^0.4.4",
     "vite-plugin-stylelint": "^2.1.0",
-    "vitest": "^0.19.1",
+    "vitest": "^0.23.4",
     "workbox-build": "^6.5.2",
     "workbox-window": "^6.5.2"
   },

diff --git a/src/components/Account/__snapshots__/Account.test.tsx.snap b/src/components/Account/__snapshots__/Account.test.tsx.snap
@@ -13,13 +13,13 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </h3>
     </div>
     <div
-      class="flexBox"
+      class="_flexBox_1c1c63"
     >
       <div
-        class="textField"
+        class="_textField_e16c1b"
       >
         <label
-          class="label"
+          class="_label_e16c1b"
           for="text-field_1235_email"
         >
           account.email
@@ -30,10 +30,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="controls"
+      class="_controls_1c1c63"
     >
       <button
-        class="button default outlined"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
         type="button"
       >
         <span>
@@ -53,7 +53,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </h3>
     </div>
     <div
-      class="flexBox"
+      class="_flexBox_1c1c63"
     >
       <strong>
         account.password
@@ -63,10 +63,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </p>
     </div>
     <div
-      class="controls"
+      class="_controls_1c1c63"
     >
       <button
-        class="button default outlined"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
         type="button"
       >
         <span>
@@ -86,13 +86,13 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </h3>
     </div>
     <div
-      class="flexBox"
+      class="_flexBox_1c1c63"
     >
       <div
-        class="textField"
+        class="_textField_e16c1b"
       >
         <label
-          class="label"
+          class="_label_e16c1b"
           for="text-field_1235_firstName"
         >
           account.firstname
@@ -102,10 +102,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
         </p>
       </div>
       <div
-        class="textField"
+        class="_textField_e16c1b"
       >
         <label
-          class="label"
+          class="_label_e16c1b"
           for="text-field_1235_lastName"
         >
           account.lastname
@@ -116,10 +116,10 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="controls"
+      class="_controls_1c1c63"
     >
       <button
-        class="button default outlined"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296"
         type="button"
       >
         <span>
@@ -139,13 +139,13 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </h3>
     </div>
     <div
-      class="flexBox"
+      class="_flexBox_1c1c63"
     >
       <div
-        class="checkbox"
+        class="_checkbox_531f07"
       >
         <div
-          class="row"
+          class="_row_531f07"
         >
           <input
             id="check-box_1235_consents.marketing"
@@ -163,7 +163,7 @@ exports[`<Account> > renders and matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="controls"
+      class="_controls_1c1c63"
     />
   </div>
 </div>

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -6,17 +6,17 @@ exports[`<Alert> > renders and matches snapshot 1`] = `
     open=""
   >
     <h2
-      class="title"
+      class="_title_fb2b94"
     >
       alert.title
     </h2>
     <p
-      class="body"
+      class="_body_fb2b94"
     >
       Body
     </p>
     <button
-      class="button default outlined fullWidth"
+      class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
     >
       <span>
         alert.close

diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx
@@ -1,18 +1,27 @@
-import React, { useState, useEffect, ReactNode, useRef, CSSProperties } from 'react';
+import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 
 type Props = {
   createStyle: (status: Status) => CSSProperties;
   open?: boolean;
   duration?: number;
   delay?: number;
+  keepMounted?: boolean;
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;
-  children: ReactNode;
 };
 
 export type Status = 'opening' | 'open' | 'closing' | 'closed';
 
-const Animation = ({ createStyle, open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCloseAnimationEnd, children }: Props): JSX.Element | null => {
+const Animation: React.FC<Props> = ({
+  createStyle,
+  open = true,
+  duration = 250,
+  delay = 0,
+  onOpenAnimationEnd,
+  onCloseAnimationEnd,
+  keepMounted = false,
+  children,
+}) => {
   const [status, setStatus] = useState<Status>('closed');
   const [hasOpenedBefore, setHasOpenedBefore] = useState<boolean>(false);
   const seconds = duration / 1000;
@@ -45,7 +54,7 @@ const Animation = ({ createStyle, open = true, duration = 250, delay = 0, onOpen
     };
   }, [duration, delay, transition, open, onOpenAnimationEnd, onCloseAnimationEnd, hasOpenedBefore, setHasOpenedBefore]);
 
-  if (!open && status === 'closed') {
+  if (!open && status === 'closed' && !keepMounted) {
     return null;
   }
 

diff --git a/src/components/Animation/Fade/Fade.tsx b/src/components/Animation/Fade/Fade.tsx
@@ -1,21 +1,24 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties } from 'react';
 
 import Animation, { Status } from '../Animation';
 
 type Props = {
   open?: boolean;
   duration?: number;
   delay?: number;
+  keepMounted?: boolean;
   onOpenAnimationEnd?: () => void;
   onCloseAnimationEnd?: () => void;
-  children: ReactNode;
 };
 
-const Fade = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCloseAnimationEnd, children }: Props): JSX.Element | null => {
+const Fade: React.FC<Props> = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCloseAnimationEnd, keepMounted, children }) => {
   const seconds = duration / 1000;
   const transition = `opacity ${seconds}s ease-in-out`;
 
-  const createStyle = (status: Status): CSSProperties => ({ transition, opacity: status === 'opening' || status === 'open' ? 1 : 0 });
+  const createStyle = (status: Status): CSSProperties => ({
+    transition,
+    opacity: status === 'opening' || status === 'open' ? 1 : 0,
+  });
 
   return (
     <Animation
@@ -25,6 +28,7 @@ const Fade = ({ open = true, duration = 250, delay = 0, onOpenAnimationEnd, onCl
       delay={delay}
       onOpenAnimationEnd={onOpenAnimationEnd}
       onCloseAnimationEnd={onCloseAnimationEnd}
+      keepMounted={keepMounted}
     >
       {children}
     </Animation>

diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
-    class="button default outlined active"
+    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
   >
     <span>
       aa

diff --git a/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap b/src/components/CancelSubscriptionForm/__snapshots__/CancelSubscriptionForm.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
 <div>
   <div>
     <h2
-      class="title"
+      class="_title_dba43b"
     >
       cancel_subscription.title
     </h2>
@@ -13,14 +13,14 @@ exports[`<CancelSubscriptionForm> > renders and matches snapshot 1`] = `
     </p>
     <button
       aria-disabled="false"
-      class="button confirmButton primary fullWidth"
+      class="_button_f8f296 _confirmButton_dba43b _primary_f8f296 _fullWidth_f8f296"
     >
       <span>
         cancel_subscription.unsubscribe
       </span>
     </button>
     <button
-      class="button default outlined fullWidth"
+      class="_button_f8f296 _default_f8f296 _outlined_f8f296 _fullWidth_f8f296"
     >
       <span>
         cancel_subscription.no_thanks

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -20,7 +20,7 @@
 
       & .poster {
         box-shadow: 0 0 0 3px var(--highlight-color, variables.$white), 0 8px 10px rgb(0 0 0 / 14%), 0 3px 14px rgb(0 0 0 / 12%),
-          0 4px 5px rgb(0 0 0 / 20%);
+        0 4px 5px rgb(0 0 0 / 20%);
       }
     }
   }
@@ -94,6 +94,20 @@
     background-color: rgba(0, 0, 0, 0.54);
     content: '';
   }
+
+  .posterImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+
+    &.visible {
+      opacity: 1;
+    }
+  }
 }
 
 .currentLabel {
@@ -186,6 +200,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16));
 .lock {
   margin-right: calc(#{variables.$base-spacing} / 2);
   padding: 2px 6px;
+
   > svg {
     width: 16px;
     height: 21px;
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     exports[`<Button> > renders and matches snapshot 1`] = `
     <div>
       <button
-        class="button default outlined active"
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
       >
         <span>
           aa
@@ Expand Down @@