@nypl/design-system-react-components 0.25.0 → 0.25.4

package/src/components/Tabs/Tabs.stories.mdx

@@ -70,12 +70,20 @@ export const animalCrossing = [
   {
     label: "Mr. Resetti",
     content:
-      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional character from the Animal Crossing series of video games by Nintendo. His first appearance was in the Nintendo 64 game Dōbutsu no Mori, released in Europe and North America on the GameCube as Animal Crossing.",
+      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional " +
+      "character from the Animal Crossing series of video games by Nintendo. " +
+      "His first appearance was in the Nintendo 64 game Dōbutsu no Mori, " +
+      "released in Europe and North America on the GameCube as Animal Crossing.",
   },
   {
     label: "Zucker",
     content:
-      "<strong>Zucker</strong> is a lazy octopus villager who first appeared in New Leaf. His Japanese name and general appearance refers to the Japanese snack takoyaki, which is a fried ball of dough commonly filled with minced octopus. His catchphrase is a reference to how he is an underwater animal. He has the same initial phrase as Bertha. He has the nature hobby.",
+      "<strong>Zucker</strong> is a lazy octopus villager who first appeared " +
+      "in New Leaf. His Japanese name and general appearance refers to the " +
+      "Japanese snack takoyaki, which is a fried ball of dough commonly " +
+      "filled with minced octopus. His catchphrase is a reference to how he " +
+      "is an underwater animal. He has the same initial phrase as Bertha. He " +
+      "has the nature hobby.",
   },
 ];
 
@@ -100,8 +108,13 @@ _Note: this is the recommended approach._
 
 We recommended passing in the data for the `Tabs` component through the `data`
 prop. This allows the consumer to pass in well-formed data and always generate
-the correct DOM. Internally in the DS `Tabs` component, we map through the data
-array and generate the appropriate components needed for the layout.
+the correct DOM.
+
+Internally in the DS `Tabs` component:
+
+- we map through the data array and generate the appropriate components needed
+  for the layout.
+- adds the carousel feature for the mobile view.
 
 Note that HTML is allowed in the `content` property in each object as part of the
 string or as straight HTML.
@@ -122,12 +135,36 @@ const animalCrossing = [
     content:
       "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is ...",
   },
+  {
+    label: "Mr. Resetti",
+    content:
+      "<strong>Mr. Resetti</strong>, full name Sonny Resetti, is a ...",
+  },
+  {
+    label: "Zucker",
+    content:
+      "<strong>Zucker</strong> is a lazy octopus villager who first ...",
+  },
 ];
 
 // ...
 <Tabs contentData={animalCrossing} />;
 ```
 
+## Responsive Mobile Carousel
+
+For both, the `contentData` prop approach and the children component approach
+(described below in this document), the mobile carousel feature is built. This
+adds "previous" and "next" arrows in the tab list for users to scroll through
+all the tabs while the panel stays static.
+
+Note that for the children component approach, we expect a `TabList` component
+to be passed or else the mobile carousel will _not_ be built. More on this in
+the [With Children Components](#with-children-components) section.
+
+To view and test this in Storybook, go to the "Canvas" tab and change the
+viewport in the Storybook toolbar at the top of the page.
+
 ## With Callback Event Function
 
 If you need to keep track of the index of current tab that was selected, pass
@@ -178,7 +215,10 @@ available components, you will probably have to iterate or map through an array
 to get the desired outcome. The DS `Tabs` component does this internally for
 you so this should be a last resort option.
 
-Make sure all five components are imported to use this approach.
+Make sure that:
+
+- all five components are imported to use this approach.
+- the structure follows the example below for the mobile carousel to render properly.
 
 ```jsx
 import {
@@ -197,11 +237,16 @@ import {
         <Tab>Tom Nook</Tab>
         <Tab>Isabelle</Tab>
         <Tab>K.K. Slider</Tab>
+        <Tab>Mr. Resetti</Tab>
+        <Tab>Zucker</Tab>
       </TabList>
       <TabPanels>
         <TabPanel>
-          Tom Nook, known in Japan as Tanukichi, is a fictional character in the
-          Animal Crossing series who operates the village store.
+          <p>
+            Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+            character in the Animal Crossing series who operates the village
+            store.
+          </p>
         </TabPanel>
         <TabPanel>
           Isabelle, known as Shizue in Japan, is a fictional character from the
@@ -210,10 +255,27 @@ import {
           serves as the secretary to the player character.
         </TabPanel>
         <TabPanel>
-          Totakeke, more commonly known as K.K. Slider or K.K., is a fictional
-          character within the Animal Crossing franchise. One of the franchise's
-          most popular characters, he debuted in the title Animal Crossing, and
-          has appeared in every installment since.
+          <p>
+            Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
+            fictional character within the Animal Crossing franchise. One of the
+            franchise's most popular characters, he debuted in the title Animal
+            Crossing, and has appeared in every installment since.
+          </p>
+        </TabPanel>
+        <TabPanel>
+          <strong>Mr. Resetti</strong>, full name Sonny Resetti, is a fictional
+          character from the Animal Crossing series of video games by Nintendo.
+          His first appearance was in the Nintendo 64 game Dōbutsu no Mori,
+          released in Europe and North America on the GameCube as Animal
+          Crossing.
+        </TabPanel>
+        <TabPanel>
+          <strong>Zucker</strong> is a lazy octopus villager who first appeared
+          in New Leaf. His Japanese name and general appearance refers to the
+          Japanese snack takoyaki, which is a fried ball of dough commonly
+          filled with minced octopus. His catchphrase is a reference to how he
+          is an underwater animal. He has the same initial phrase as Bertha. He
+          has the nature hobby.
         </TabPanel>
       </TabPanels>
     </Tabs>

package/src/components/Tabs/Tabs.tsx

@@ -1,19 +1,21 @@
 import * as React from "react";
 import {
   Box,
-  Tabs as ChakraTabs,
-  TabList,
   Tab,
+  TabList,
   TabPanels,
   TabPanel,
+  Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
 import generateUUID from "../../helpers/generateUUID";
-import { IconNames, IconRotationTypes } from "../Icons/IconTypes";
+import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Icon from "../Icons/Icon";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Button from "../Button/Button";
+import useCarouselStyles from "../../hooks/useCarouselStyles";
+import useWindowSize from "../../hooks/useWindowSize";
 
 // The general shape of the data object for each Tab.
 export interface TabsContentDataProps {
@@ -44,7 +46,7 @@ const onClickHash = (tabHash) => {
 };
 
 /**
- * This returns an object with `Tab` and `TabPanel` components to render in
+ * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
 const getElementsFromContentData = (data, useHash) => {
@@ -61,8 +63,7 @@ const getElementsFromContentData = (data, useHash) => {
         "needed, consider other navigational patterns."
     );
   }
-
-  data.map((tab, index) => {
+  data.forEach((tab, index) => {
     let tempPanel;
     // For URL hash enabled tabs, we need to add a custom `onClick` to handle the URL hash.
     const tempTab = (
@@ -89,7 +90,10 @@ const getElementsFromContentData = (data, useHash) => {
     panels.push(tempPanel);
   });
 
-  return { tabs, panels };
+  return {
+    tabs: <TabList>{tabs}</TabList>,
+    panels: <TabPanels>{panels}</TabPanels>,
+  };
 };
 
 /**
@@ -104,7 +108,7 @@ const getElementsFromChildren = (children) => {
     return {};
   }
 
-  children.map((child) => {
+  children.forEach((child) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -139,9 +143,68 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     useHash = false,
   } = props;
   const styles = useMultiStyleConfig("Tabs", {});
+  // Just an estimate of the tab width for the mobile carousel.
+  const initTabWidth = 65;
+  // An estimate for the tab width for larger device widths.
+  const mediumTabWidth = 40;
+  const [tabWidth, setTabWidth] = React.useState(initTabWidth);
+  const windowDimensions = useWindowSize();
   const { tabs, panels } = contentData
     ? getElementsFromContentData(contentData, useHash)
     : getElementsFromChildren(children);
+  // `tabs` is an array for the children component approach but an object for
+  // the `contentData` prop approach. We need to get the right props key value
+  // to set the carousel's length.
+  const tabProps = tabs[0] ? tabs[0]?.props : (tabs as any).props;
+  const { prevSlide, nextSlide, carouselStyle, goToStart } = useCarouselStyles(
+    tabProps?.children?.length,
+    tabWidth
+  );
+  React.useEffect(() => {
+    if (windowDimensions.width > 320) {
+      setTabWidth(mediumTabWidth);
+    } else {
+      setTabWidth(initTabWidth);
+    }
+    // If we are on larger viewports, reset the carousel so all tabs display.
+    if (windowDimensions.width > 600) {
+      goToStart();
+    }
+  }, [goToStart, windowDimensions.width]);
+  const previousButton = (
+    <Button
+      buttonType={ButtonTypes.Primary}
+      attributes={{
+        "aria-label": "Previous",
+        ...styles.buttonArrows,
+        left: "0",
+      }}
+      onClick={prevSlide}
+    >
+      <Icon
+        name={IconNames.Arrow}
+        iconRotation={IconRotationTypes.Rotate90}
+        size={IconSizes.Small}
+      />
+    </Button>
+  );
+  const nextButton = (
+    <Button
+      buttonType={ButtonTypes.Primary}
+      attributes={{
+        "aria-label": "Next",
+        ...styles.buttonArrows,
+        right: "0",
+      }}
+      onClick={nextSlide}
+    >
+      <Icon
+        name={IconNames.Arrow}
+        iconRotation={IconRotationTypes.Rotate270}
+        size={IconSizes.Small}
+      />
+    </Button>
+  );
 
   if (children && contentData?.length) {
     console.warn(
@@ -152,69 +215,27 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   return (
     <ChakraTabs
       id={id}
-      // The following lazy loads each panel whenever it is needed.
-      isLazy
       onChange={onChange}
       defaultIndex={defaultIndex}
       variant="enclosed"
+      // The following lazy loads each panel whenever it is needed.
+      isLazy
     >
-      {contentData ? (
-        <>
-          <Box
-            __css={styles.tablistWrapper}
-            sx={{
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
-            }}
-          >
-            <Button
-              buttonType={ButtonTypes.Primary}
-              attributes={{
-                "aria-label": "Previous",
-                ...styles.buttonArrows,
-              }}
-            >
-              <Icon
-                name={IconNames.arrow}
-                decorative={true}
-                iconRotation={IconRotationTypes.rotate90}
-                modifiers={["small"]}
-              />
-            </Button>
-            <TabList>{tabs}</TabList>
-            <Button
-              buttonType={ButtonTypes.Primary}
-              attributes={{
-                "aria-label": "Next",
-                ...styles.buttonArrows,
-              }}
-            >
-              <Icon
-                name={IconNames.arrow}
-                decorative={true}
-                iconRotation={IconRotationTypes.rotate270}
-                modifiers={["small"]}
-              />
-            </Button>
-          </Box>
-          <TabPanels>{panels}</TabPanels>
-        </>
-      ) : (
-        <>
-          <Box
-            __css={styles.tablistWrapper}
-            sx={{
-              "&::-webkit-scrollbar": {
-                display: "none",
-              },
-            }}
-          >
-            {tabs}
-          </Box>
-          {panels}
-        </>
-      )}
+      <Box
+        __css={styles.tablistWrapper}
+        sx={{
+          "&::-webkit-scrollbar": {
+            display: "none",
+          },
+        }}
+      >
+        {previousButton}
+        <Box __css={styles.carouselParent}>
+          <Box {...carouselStyle}>{tabs}</Box>
+        </Box>
+        {nextButton}
+      </Box>
+      {panels}
     </ChakraTabs>
   );
 }