feat: added carousel arrows (#66)

Author: Fran McDade

app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.styles.ts

@@ -35,6 +35,17 @@ export const Carousel = styled.div`
   ${mediaTabletUp} {
     height: ${CAROUSEL_HEIGHT}px;
   }
+
+  .MuiIconButton-root {
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+  }
+
+  &:hover {
+    > .MuiIconButton-root {
+      opacity: 1;
+    }
+  }
 `;
 
 export const StyledBullets = styled(Bullets)`

app/components/Home/components/Section/components/SectionHero/components/Carousel/carousel.tsx

@@ -1,8 +1,10 @@
+import { SWIPE_ACTION } from "../../../../../../../../hooks/useSwipeInteraction/common/entities";
 import {
   Carousel as CarouselCards,
   CarouselView,
   StyledBullets,
 } from "./carousel.styles";
+import { Arrow } from "./components/Arrow/arrow";
 import { Cards } from "./components/Cards/cards";
 import { useInteractiveCarousel } from "./hooks/useInteractiveCarousel";
 
@@ -13,11 +15,20 @@ export const Carousel = (): JSX.Element => {
     interactiveCards,
     interactiveIndexes,
     onSetActiveIndex,
+    onSetSwipeAction,
   } = useInteractiveCarousel();
   return (
     <CarouselView>
       <CarouselCards {...interactiveAction}>
+        <Arrow
+          onClick={(): void => onSetSwipeAction(SWIPE_ACTION.SWIPE_BACKWARD)}
+          swipeAction={SWIPE_ACTION.SWIPE_BACKWARD}
+        />
         <Cards activeIndex={activeIndex} cards={interactiveCards} />
+        <Arrow
+          onClick={(): void => onSetSwipeAction(SWIPE_ACTION.SWIPE_FORWARD)}
+          swipeAction={SWIPE_ACTION.SWIPE_FORWARD}
+        />
         <StyledBullets
           activeBullet={activeIndex}
           bullets={interactiveIndexes}

app/components/Home/components/Section/components/SectionHero/components/Carousel/common/constants.ts

@@ -9,3 +9,4 @@ export const CAROUSEL_HEIGHT_SM =
   MAX_CARD_HEIGHT_SM + MAX_DECK_SIZE * CARD_OFFSET_Y;
 export const TRANSITION_DELAY = 100;
 export const TRANSITION_DURATION = 100;
+export const ARROW_OFFSET_Y = (CARD_OFFSET_Y * MAX_DECK_SIZE) / 2;

app/components/Home/components/Section/components/SectionHero/components/Carousel/common/utils.ts

@@ -1,4 +1,6 @@
+import { SWIPE_ACTION } from "../../../../../../../../../hooks/useSwipeInteraction/common/entities";
 import {
+  ARROW_OFFSET_Y,
   CARD_OFFSET_Y,
   CARD_SCALE_X,
   MAX_CARD_WIDTH,
@@ -7,6 +9,17 @@ import {
   TRANSITION_DURATION,
 } from "./constants";
 
+/**
+ * Returns the arrow's transform scaleX and translateY.
+ * @param swipeAction - Swipe action.
+ * @returns arrow's transform.
+ */
+export function getArrowTransform(swipeAction: SWIPE_ACTION): string {
+  return swipeAction === SWIPE_ACTION.SWIPE_FORWARD
+    ? `translate(24px, calc(${ARROW_OFFSET_Y}px - 50%)) scaleX(-1)`
+    : `translate(-24px, calc(${ARROW_OFFSET_Y}px - 50%))`;
+}
+
 /**
  * Returns the carousel card's position in the deck.
  * @param index - Card index.

app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.styles.ts

@@ -0,0 +1,60 @@
+import { mediaTabletDown } from "@databiosphere/findable-ui/lib/styles/common/mixins/breakpoints";
+import {
+  inkMain,
+  smokeDark,
+  smokeLightest,
+  white,
+} from "@databiosphere/findable-ui/lib/styles/common/mixins/colors";
+import { black08 } from "@databiosphere/findable-ui/lib/theme/common/palette";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { IconButton as MIconButton } from "@mui/material";
+import {
+  SwipeAction,
+  SWIPE_ACTION,
+} from "../../../../../../../../../../hooks/useSwipeInteraction/common/entities";
+import { MAX_DECK_SIZE } from "../../common/constants";
+import { getArrowTransform } from "../../common/utils";
+
+interface Props {
+  swipeAction: SwipeAction;
+}
+
+export const IconButton = styled(MIconButton, {
+  shouldForwardProp: (props) => props !== "swipeAction",
+})<Props>`
+  & {
+    background-color: ${white};
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px ${smokeDark}, 0 1px 0 0 ${black08};
+    color: ${inkMain};
+    position: absolute;
+    top: 50%;
+    transform: ${({ swipeAction }) => getArrowTransform(swipeAction)};
+    z-index: ${MAX_DECK_SIZE + 1};
+
+    &:hover {
+      background-color: ${smokeLightest};
+    }
+
+    &:active {
+      box-shadow: inset 0 0 0 1px ${smokeDark};
+    }
+
+    ${mediaTabletDown} {
+      display: none;
+    }
+  }
+
+  ${({ swipeAction }) =>
+    swipeAction === SWIPE_ACTION.SWIPE_BACKWARD &&
+    css`
+      left: 0;
+    `}
+
+  ${({ swipeAction }) =>
+    swipeAction === SWIPE_ACTION.SWIPE_FORWARD &&
+    css`
+      right: 0;
+    `}
+`;

app/components/Home/components/Section/components/SectionHero/components/Carousel/components/Arrow/arrow.tsx

@@ -0,0 +1,21 @@
+import { SouthIcon } from "@databiosphere/findable-ui/lib/components/common/CustomIcon/components/SouthIcon/southIcon";
+import { SwipeAction } from "../../../../../../../../../../hooks/useSwipeInteraction/common/entities";
+import { IconButton } from "./arrow.styles";
+
+interface ArrowProps {
+  onClick: () => void;
+  swipeAction: SwipeAction;
+}
+
+export const Arrow = ({ onClick, swipeAction }: ArrowProps): JSX.Element => {
+  return (
+    <IconButton
+      color="secondary"
+      onClick={onClick}
+      size="large"
+      swipeAction={swipeAction}
+    >
+      <SouthIcon fontSize="small" />
+    </IconButton>
+  );
+};