feat: adding vertical dots [STRY-301] (#626)

* feat: saving changes before merge [STRY-301] * feat: revert kitchen sink [STRY-301] * feat: adding docs [STRY-301] * feat: fix prettier [STRY-301] * feat: fixed translate [STRY-301] * feat: format [STRY-301] * feat: updated code [STRY-301] * feat: debug [STRY-301] * feat: fixed translate [STRY-301] * feat: testing [STRY-301] * fix: code review feedback [STRY-301] * fix: update docs [STRY-301]
washingtonpost · May 14, 2024 · 438a90b · 438a90b
1 parent 3dc00cd
commit 438a90b
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 3 deletions.
diff --git a/build.washingtonpost.com/docs/components/pagination-dots.mdx b/build.washingtonpost.com/docs/components/pagination-dots.mdx
@@ -137,6 +137,49 @@ export default function Example() {
 }
 ```
 
+### Orientation
+
+If the dots are oriented left to right or top to bottom. It defaults to a horizontal orientation.
+
+```jsx withPreview
+export default function Example() {
+  return (
+    <Box
+      css={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        css={{
+          display: "flex",
+          gap: theme.space[100],
+          marginBlockStart: theme.space[200],
+          position: "relative",
+        }}
+      >
+        <PaginationDots amount={6} index={1} label="pagination dots" />
+      </Box>
+      <Box
+        css={{
+          display: "flex",
+          gap: theme.space[100],
+          marginBlockStart: theme.space[200],
+          position: "relative",
+        }}
+      >
+        <PaginationDots
+          amount={6}
+          index={1}
+          label="pagination dots"
+          orientation="vertical"
+        />
+      </Box>
+    </Box>
+  );
+}
+```
+
 ---
 
 ## Guidance

diff --git a/packages/kit/src/pagination-dots/PaginationDots.tsx b/packages/kit/src/pagination-dots/PaginationDots.tsx
@@ -25,6 +25,8 @@ interface PaginationDotsProps extends React.ComponentPropsWithRef<"div"> {
   /** Specifies the type of element represented by the dots (e.g., "Page") */
   unitName?: string;
   css?: WPDS.CSS;
+  /** If the dots are oriented left to right or top to bottom */
+  orientation?: "horizontal" | "vertical";
 }
 
 const Dot = styled("div", {
@@ -42,6 +44,14 @@ const Dot = styled("div", {
 const PaginationContainer = styled("div", {
   maxWidth: `calc((${theme.sizes["050"]} + 2px) * 5)`,
   overflow: "hidden",
+  variants: {
+    isVertical: {
+      true: {
+        maxHeight: `calc((${theme.sizes["050"]} + 2px) * 5)`,
+        maxWidth: theme.sizes["075"],
+      },
+    },
+  },
 });
 
 const PaginationSlider = styled("div", {
@@ -52,16 +62,32 @@ const PaginationSlider = styled("div", {
   "@reducedMotion": {
     transition: "none",
   },
+  variants: {
+    isVertical: {
+      true: {
+        flexDirection: "column",
+      },
+    },
+  },
 });
 
 export const PaginationDots = React.forwardRef<
   HTMLDivElement,
   PaginationDotsProps
 >(
   (
-    { index = 1, amount, unitName, label = "Pagination Dots", ...props },
+    {
+      index = 1,
+      amount,
+      unitName,
+      label = "Pagination Dots",
+      orientation = "horizontal",
+      ...props
+    },
     ref
   ) => {
+    const isVertical = orientation === "vertical";
+
     // Limit index within the bounds of the range
     if (!amount && !index) {
       return null;
@@ -89,6 +115,7 @@ export const PaginationDots = React.forwardRef<
      * We want to move the container via `transform` so that the *visible* dots are centered.
      */
     const translate = getTranslate(nPages, activeIndex);
+
     return (
       <PaginationContainer
         ref={ref}
@@ -100,9 +127,17 @@ export const PaginationDots = React.forwardRef<
         aria-valuetext={
           unitName ? `${unitName} ${activeIndex + 1} of ${nPages}` : undefined
         }
+        isVertical={isVertical}
         {...props}
       >
-        <PaginationSlider css={{ transform: `translate(${translate})` }}>
+        <PaginationSlider
+          css={{
+            transform: !isVertical
+              ? `translate(${translate})`
+              : `translateY(${translate})`,
+          }}
+          isVertical={isVertical}
+        >
           {dots.map(({ scale, background }, i: number) => (
             <Dot
               key={i}
@@ -134,7 +169,7 @@ function configureDots(nPages: number, activeIndex: number, amount: number) {
     // default: active dot has scale = 1, each dot previous/next's scale reduces by 25%
     let scale = 1 - stepsFromActive / 4;
     if (amount <= 5 && stepsFromActive > 1) {
-      // if there are 5 or less dots, make all dots at least 4px
+      // if there are 5 or fewer dots, make all dots at least 4px
       scale = 0.5;
     } else if (
       // else if active dot is first or last in the arr, the 3rd-from-active dot should be 4px, not 2px

diff --git a/packages/kit/src/pagination-dots/play.stories.tsx b/packages/kit/src/pagination-dots/play.stories.tsx
@@ -32,6 +32,7 @@ const DefaultArgs = {
   amount: 6,
   index: 1,
   label: "Pagination Dots",
+  orientation: "horizontal",
 };
 
 const Label = styled("h3", {