@nypl/design-system-react-components 0.25.12 → 0.26.1

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   Tab,
   TabList,
   TabPanels,
@@ -8,8 +8,8 @@ import {
   Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
-import generateUUID from "../../helpers/generateUUID";
 import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Icon from "../Icons/Icon";
 import { ButtonTypes } from "../Button/ButtonTypes";
@@ -24,20 +24,20 @@ interface TabPanelProps {
   panels: React.ReactNode[] | React.ReactNode;
 }
 // The general shape of the data object for each Tab.
-export interface TabsContentDataProps {
+export interface TabsDataProps {
   label: string;
   content: string | React.ReactNode;
 }
 
 export interface TabsProps {
-  /** Array of data to display */
-  contentData?: TabsContentDataProps[];
   /** The index of the tab to display for controlled situations. */
   defaultIndex?: number;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
   /** The callback function invoked on every tab change event. */
   onChange?: (index: number) => any;
+  /** Array of data to display */
+  tabsData?: TabsDataProps[];
   /** Render a hash in the url for each tab. Only available when data is
    * passed through the `data` props. */
   useHash?: boolean;
@@ -55,7 +55,7 @@ const onClickHash = (tabHash) => {
  * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
-const getElementsFromContentData = (data, useHash): TabPanelProps => {
+const getElementsFromData = (data, useHash): TabPanelProps => {
   const tabs = [];
   const panels = [];
 
@@ -65,8 +65,8 @@ const getElementsFromContentData = (data, useHash): TabPanelProps => {
 
   if (data?.length > 6) {
     console.warn(
-      "Tabs: We recommend to use no more than six tabs. If more than six tabs " +
-        "are needed, consider other navigational patterns."
+      "NYPL Reservoir Tabs: it is recommended to use no more than six tabs. If " +
+        "more than six tabs are needed, consider other navigational patterns."
     );
   }
   data.forEach((tab, index) => {
@@ -121,8 +121,8 @@ const getElementsFromChildren = (children): TabPanelProps => {
       const childTabs = React.Children.count(child.props.children);
       if (childTabs > 6) {
         console.warn(
-          "Tabs: We recommend to use no more than six tabs. If more than six " +
-            "tabs are needed, consider other navigational patterns."
+          "NYPL Reservoir Tabs: It is recommended to use no more than six tabs. " +
+            "If more than six tabs are needed, consider other navigational patterns."
         );
       }
     }
@@ -139,14 +139,15 @@ const getElementsFromChildren = (children): TabPanelProps => {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-function Tabs(props: React.PropsWithChildren<TabsProps>) {
+export const Tabs = chakra((props: React.PropsWithChildren<TabsProps>) => {
   const {
     children,
-    contentData,
     defaultIndex = 0,
-    id = generateUUID(),
+    id,
     onChange,
+    tabsData,
     useHash = false,
+    ...rest
   } = props;
   const styles = useMultiStyleConfig("Tabs", {});
   // Just an estimate of the tab width for the mobile carousel.
@@ -155,16 +156,18 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   const mediumTabWidth = 40;
   const [tabWidth, setTabWidth] = React.useState(initTabWidth);
   const windowDimensions = useWindowSize();
-  const { tabs, panels }: any = contentData
-    ? getElementsFromContentData(contentData, useHash)
+  const { tabs, panels }: any = tabsData
+    ? getElementsFromData(tabsData, useHash)
     : getElementsFromChildren(children);
 
   if (tabs.length === 0 || panels.length === 0) {
-    console.warn("Tabs: Pass data in the `data` props or as children.");
+    console.warn(
+      "NYPL Reservoir Tabs: Pass data in the `contentData` props or as 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
+  // the `tabsData` 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(
@@ -221,9 +224,10 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     </Button>
   );
 
-  if (children && contentData?.length) {
+  if (children && tabsData?.length) {
     console.warn(
-      "Tabs: Only pass children or data in the `data` props but not both."
+      "NYPL Reservoir Tabs: Only pass children or data in the `contentData` " +
+        "prop. Do not pass both."
     );
   }
 
@@ -235,6 +239,7 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
       isLazy
       onChange={onChange}
       variant="enclosed"
+      {...rest}
     >
       <Box
         __css={styles.tablistWrapper}
@@ -253,6 +258,8 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
       {panels}
     </ChakraTabs>
   );
-}
+});
 
-export { Tabs, TabList, Tab, TabPanels, TabPanel };
+// Tabs is also exported above so the props can display in Storybook.
+export { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;

package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Tabs renders the UI snapshot correctly 1`] = `
 <div
-  className="chakra-tabs css-0"
+  className="chakra-tabs css-1xdhyk6"
   id="basic"
 >
   <div
@@ -10,7 +10,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
   >
     <button
       aria-label="Previous"
-      className="chakra-button css-fg6w03"
+      className="chakra-button css-1fhylxi"
       data-testid="button"
       id="tabs-previous-basic"
       onClick={[Function]}
@@ -18,7 +18,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="tabs-previous-icon-basic"
         role="img"
@@ -105,7 +105,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     </div>
     <button
       aria-label="Next"
-      className="chakra-button css-1whvqek"
+      className="chakra-button css-12jygyh"
       data-testid="button"
       id="tabs-next-basic"
       onClick={[Function]}
@@ -113,7 +113,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="tabs-next-icon-basic"
         role="img"
@@ -193,3 +193,392 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Tabs renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-tabs css-kle7zy"
+  id="chakra"
+>
+  <div
+    className="css-l3f8vc"
+  >
+    <button
+      aria-label="Previous"
+      className="chakra-button css-1fhylxi"
+      data-testid="button"
+      id="tabs-previous-chakra"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-previous-icon-chakra"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="css-0"
+    >
+      <div
+        className="css-16fuzwj"
+      >
+        <div
+          aria-orientation="horizontal"
+          className="chakra-tabs__tablist css-k008qs"
+          onKeyDown={[Function]}
+          role="tablist"
+        >
+          <button
+            aria-controls="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Tom Nook
+          </button>
+          <button
+            aria-controls="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Isabelle
+          </button>
+          <button
+            aria-controls="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            K.K. Slider
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="Next"
+      className="chakra-button css-12jygyh"
+      data-testid="button"
+      id="tabs-next-chakra"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-next-icon-chakra"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+  <div
+    className="chakra-tabs__tab-panels css-8atqhb"
+  >
+    <div
+      aria-labelledby="chakra--tab-0"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      hidden={false}
+      id="chakra--tabpanel-0"
+      role="tabpanel"
+      tabIndex={0}
+    >
+      <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>
+    </div>
+    <div
+      aria-labelledby="chakra--tab-1"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Isabelle, known as Shizue in Japan, is a fictional character from the Animal Crossing series of video games. She is a kindly Shih Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where she serves as the secretary to the player character.",
+        }
+      }
+      hidden={true}
+      id="chakra--tabpanel-1"
+      role="tabpanel"
+      tabIndex={0}
+    />
+    <div
+      aria-labelledby="chakra--tab-2"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<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>",
+        }
+      }
+      hidden={true}
+      id="chakra--tabpanel-2"
+      role="tabpanel"
+      tabIndex={0}
+    />
+  </div>
+</div>
+`;
+
+exports[`Tabs renders the UI snapshot correctly 3`] = `
+<div
+  className="chakra-tabs css-1xdhyk6"
+  data-testid="props"
+  id="props"
+>
+  <div
+    className="css-l3f8vc"
+  >
+    <button
+      aria-label="Previous"
+      className="chakra-button css-1fhylxi"
+      data-testid="button"
+      id="tabs-previous-props"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-previous-icon-props"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="css-0"
+    >
+      <div
+        className="css-16fuzwj"
+      >
+        <div
+          aria-orientation="horizontal"
+          className="chakra-tabs__tablist css-k008qs"
+          onKeyDown={[Function]}
+          role="tablist"
+        >
+          <button
+            aria-controls="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Tom Nook
+          </button>
+          <button
+            aria-controls="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Isabelle
+          </button>
+          <button
+            aria-controls="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            K.K. Slider
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="Next"
+      className="chakra-button css-12jygyh"
+      data-testid="button"
+      id="tabs-next-props"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-next-icon-props"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+  <div
+    className="chakra-tabs__tab-panels css-8atqhb"
+  >
+    <div
+      aria-labelledby="props--tab-0"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      hidden={false}
+      id="props--tabpanel-0"
+      role="tabpanel"
+      tabIndex={0}
+    >
+      <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>
+    </div>
+    <div
+      aria-labelledby="props--tab-1"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Isabelle, known as Shizue in Japan, is a fictional character from the Animal Crossing series of video games. She is a kindly Shih Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where she serves as the secretary to the player character.",
+        }
+      }
+      hidden={true}
+      id="props--tabpanel-1"
+      role="tabpanel"
+      tabIndex={0}
+    />
+    <div
+      aria-labelledby="props--tab-2"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<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>",
+        }
+      }
+      hidden={true}
+      id="props--tabpanel-2"
+      role="tabpanel"
+      tabIndex={0}
+    />
+  </div>
+</div>
+`;