Merge pull request #34 from NASA-IMPACT/hover-style

Add hover style
NASA-IMPACT · Nov 17, 2023 · 5a8d5c9 · 5a8d5c9
2 parents e7056a7 + 1c7a5f6
commit 5a8d5c9
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/overrides/common/embedded-video-carousel.tsx b/overrides/common/embedded-video-carousel.tsx
@@ -28,7 +28,7 @@ import { LoadingSkeleton } from "$veda-ui-scripts/components/common/loading-skel
 // required CSS for pure-react-carousel
 import "pure-react-carousel/dist/react-carousel.es.css";
 
-import { focusStyle } from "./style";
+import { focusStyle, hoverStyle } from "./style";
 
 const SROnly = styled.span`
   ${visuallyHidden}
@@ -83,26 +83,20 @@ const ButtonBackStyled = styled(ButtonBack)`
   ${buttonStyle}
   background-color: ${themeVal("color.primary")};
   &:hover {
-    background-color: ${themeVal("color.secondary")};
-  }
-  &:active,
-  &:focus,
-  &:hover {
-    ${focusStyle}
+    background-color: ${themeVal("color.primary")};
   }
+  ${hoverStyle}
+  ${focusStyle}
 `;
 
 const ButtonNextStyled = styled(ButtonNext)`
   ${buttonStyle}
   background-color: ${themeVal("color.primary")};
   &:hover {
-    background-color: ${themeVal("color.secondary")};
-  }
-  &:active,
-  &:focus,
-  &:hover {
-    ${focusStyle}
+    background-color: ${themeVal("color.primary")};
   }
+  ${hoverStyle}
+  ${focusStyle}
 `;
 
 const DescWrapper = styled.div`
@@ -184,6 +178,20 @@ export default function Carousel({ items }: EmbeddedVideosPropType) {
             </Slider>
           </FeaturedList>
         </div>
+        {items.length > 1 && (
+          <ButtonGroup
+            topHeight={height}
+            role="group"
+            aria-label="Slide controls"
+          >
+            <ButtonBackStyled>
+              <CollecticonChevronLeft title="Go to previous slide" meaningful />
+            </ButtonBackStyled>
+            <ButtonNextStyled>
+              <CollecticonChevronRight title="Go to next slide" meaningful />
+            </ButtonNextStyled>
+          </ButtonGroup>
+        )}
       </CarouselProvider>
     </Lazyload>
   );

diff --git a/overrides/common/style.ts b/overrides/common/style.ts
@@ -2,9 +2,22 @@ import { themeVal, glsp } from "$veda-ui/@devseed-ui/theme-provider";
 import styled, { css } from "$veda-ui/styled-components";
 import { VarHeading } from "$veda-ui-scripts/styles/variable-components";
 
+export const hoverStyle = css`
+  &:hover {
+    opacity: 0.67;
+  }
+`;
+
 export const focusStyle = css`
-  &:focus {
-    outline: 5px auto -webkit-focus-ring-color;
+  // Very subtle outline for mouse 
+  &:focus:not(:focus-visible) { 
+    outline: none 
+    box-shadow: ${themeVal("boxShadow.elevationA")}
+  }
+  // Enable outline for keyboard
+  &:focus,
+  &:focus-visible {
+    outline: 5px auto ${themeVal("color.base-300")};
   }
 `;
 

diff --git a/overrides/components/theme-cards.tsx b/overrides/components/theme-cards.tsx
@@ -5,7 +5,7 @@ import { themeVal, glsp } from "$veda-ui/@devseed-ui/theme-provider";
 import { stories } from "veda";
 import Hug from "$veda-ui-scripts/styles/hug";
 import { CardList } from "$veda-ui-scripts/components/common/card";
-import { focusStyle } from "../common/style";
+import { hoverStyle, focusStyle } from "../common/style";
 import { VarHeading } from "$veda-ui-scripts/styles/variable-components";
 export interface ContentsPropType {
   storyIds: string[];
@@ -21,6 +21,7 @@ const ThemeCard = styled.article`
   display: flex;
   flex-flow: column nowrap;
   border-top: 1px solid ${themeVal("color.base-200a")};
+  ${hoverStyle}
 `;
 const ThemeCardImageWrapper = styled.figure`
   height: 240px;
@@ -39,6 +40,7 @@ const ThemeLink = styled(Link)`
   pointer-events: auto;
   margin: 0;
   font-size: 0;
+  ${hoverStyle}
   ${focusStyle}
 `;