@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/components/StyleGuide/Bidirectionality.stories.mdx

@@ -237,7 +237,7 @@ help reduce any visual mistakes.
 
 <Canvas>
   <DSProvider>
-    <div style={{ display: "flex", "flex-direction": "column" }}>
+    <div style={{ display: "flex", flexDirection: "column" }}>
       <div style={{ width: "300px" }}>
         A regular button:
         <Button buttonType={ButtonTypes.Primary} id="button-ex4" type="submit">

package/src/components/StyleGuide/Breakpoints.stories.mdx

@@ -28,20 +28,34 @@ import { getCategory } from "../../utils/componentCategories";
 
 The DS adheres to four global breakpoints for responsive layouts and typography.
 
-- Desktop: 1280px
-- Tablet Landscape: 960px
-- Tablet Portrait: 600px
 - Mobile: 320px
+- Tablet Portrait: 600px
+- Tablet Landscape: 960px
+- Desktop: 1280px
 
 ## CSS Variables
 
 The following CSS variables are available through the DS.
 
+```scss
+--nypl-breakpoint-small: 320px;
+--nypl-breakpoint-medium: 600px;
+--nypl-breakpoint-large: 960px;
+--nypl-breakpoint-xl: 1280px;
 ```
---breakpoint-xl: 1280px;
---breakpoint-large: 960px;
---breakpoint-medium: 600px;
---breakpoint-small: 320px;
+
+## SCSS Variables
+
+If you are using SCSS and imported the NYPL Design System `/dist/resources.scss`
+file, then you can use the following SCSS variables in your media queries or
+SCSS `breakpoint` function (if used).
+
+```scss
+$nypl-breakpoint-small: 320px;
+$nypl-breakpoint-medium: 600px;
+$nypl-breakpoint-large: 960px;
+$nypl-breakpoint-xl: 1280px;
+$nypl-max-width: $nypl-breakpoint-xl;
 ```
 
 ## Figma Reference

package/src/components/StyleGuide/Buttons.stories.mdx

@@ -6,18 +6,19 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { ButtonGroup } from "@chakra-ui/react";
 
-import { getCategory } from "../../utils/componentCategories";
-import Button, { ButtonGroup } from "../Button/Button";
+import Button from "../Button/Button";
 import { ButtonTypes } from "../Button/ButtonTypes";
 import Icon from "../Icons/Icon";
 import {
+  IconAlign,
   IconNames,
   IconRotationTypes,
   IconSizes,
-  IconAlign,
 } from "../Icons/IconTypes";
 import getCSSVariable from "../../helpers/getCSSVariable";
+import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
 <Meta
@@ -26,8 +27,7 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11477%3A2298",
     },
   }}
 />
@@ -45,7 +45,8 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the NYPL Design System [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic) component to render form buttons.
+Use the NYPL Design System [Button](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/form-elements-button--basic)
+component to render form buttons.
 
 ```jsx
 import { Button, ButtonTypes } from "@nypl/design-system-react-components";
@@ -59,15 +60,23 @@ import { Button, ButtonTypes } from "@nypl/design-system-react-components";
 - Button text should be title case.
 - Button icon is optional.
 - Buttons may have an icon on either the left or the right.
-- Buttons by default are blue. However, Donation buttons are red.
-- Buttons used for Back to Top actions have a Secondary button style with an arrow icon pointing up.
-- When buttons are used in a set (where the user can move forward or backward), the `Primary` button is on the right and the `Secondary` button on the left (i.e. cancel = secondary, submit = primary).
+- Buttons by default are blue. However, Donation callout buttons are red.
+- Buttons used for Back to Top actions have a Secondary button style with an
+  arrow icon pointing up.
+- When buttons are used in a group, they should be wrapped in a `ButtonGroup`.
+- When buttons are used in a group where the user can move forward or backward,
+  the `Primary` button is on the right and the `Secondary` button on the left
+  (i.e. cancel = secondary, submit = primary).
 
 ## Button Groups
 
-When `Button` components are displayed in a group, use the `ButtonGroup` component to handle the spacing and layout. The `ButtonGroup` component will use `--nypl-space-xs` (0.5rem) for spacing in horizontal group layouts.
+When `Button` components are displayed in a group, use the `ButtonGroup`
+component to handle the spacing and layout. The `ButtonGroup` component will use
+`--nypl-space-xs` (0.5rem) for spacing in horizontal group layouts.
 
-Standalone `Button` components and the `ButtonGroup` component should use `--nypl-space-l` (2rem) for spacing between all other UI elements. This spacing can be achieved by using the `Form` component.
+Standalone `Button` components and the `ButtonGroup` component should use
+`--nypl-space-l` (2rem) for spacing between all other UI elements. This spacing
+can be achieved by using the `Form` component to wrap the `Button`s.
 
 <Canvas>
   <DSProvider>
@@ -84,7 +93,7 @@ Standalone `Button` components and the `ButtonGroup` component should use `--nyp
       <Button buttonType={ButtonTypes.Primary}>
         <Icon name={IconNames.Close} size={IconSizes.Medium} />
       </Button>
-      <Button buttonType={ButtonTypes.Callout}>Button Text</Button>
+      <Button buttonType={ButtonTypes.Callout}>Donate</Button>
       <Button buttonType={ButtonTypes.Secondary}>
         Back to Top
         <Icon
@@ -100,15 +109,20 @@ Standalone `Button` components and the `ButtonGroup` component should use `--nyp
 
 ## Button Types
 
-The `buttonType` prop should be used to render various forms of the button component.
+The `buttonType` prop should be used to render various forms of the button
+component. Note that the `SearchBar` type is only used internally in the
+`SearchBar` component.
 
 <Canvas>
   <DSProvider>
     <ButtonGroup>
       <Button buttonType={ButtonTypes.Primary}>Primary Button</Button>
       <Button buttonType={ButtonTypes.Secondary}>Secondary Button</Button>
+      <Button buttonType={ButtonTypes.Callout}>Callout Button</Button>
       <Button buttonType={ButtonTypes.Pill}>Pill Button</Button>
       <Button buttonType={ButtonTypes.Link}>Link Button</Button>
+      <Button buttonType={ButtonTypes.SearchBar}>SearchBar Button</Button>
+      <Button buttonType={ButtonTypes.NoBrand}>NoBrand Button</Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>
@@ -124,6 +138,11 @@ The `buttonType` prop should be used to render various forms of the button compo
 - often paired with a Primary button
 - Visual Treatment: rectangular, outlined
 
+### ButtonTypes.Callout
+
+- used for call to actions such as donation buttons
+- Visual Treatment: rectangular, NYPL red background
+
 ### ButtonTypes.Pill
 
 - used for equally weighted actions
@@ -135,11 +154,28 @@ The `buttonType` prop should be used to render various forms of the button compo
 - used for equally weighted actions
 - Visual Treatment: text link with underline
 
+### ButtonTypes.SearchBar
+
+- used internally in the `SearchBar` component for visual flow when it is next
+  to the `TextInput` component
+- Visual Treatment: rectangular, filled, no border radius on the left side
+
+### ButtonTypes.NoBrand
+
+- used in cases where there is no brand color
+- Visual Treatment: rectangular, filled with a black background
+
 ## Patterns
 
 - Buttons are blue by default.
-- Buttons that are intended as a call out (i.e. Donation buttons) shoud be set as `ButtonTypes.Callout`.
-- The "Back to Top" button must be set as `ButtonTypes.Secondary` and must include an up arrow icon.
+- Buttons that are intended as a call out (i.e. Donation buttons) should be set
+  as `ButtonTypes.Callout`.
+- The "Back to Top" button must be set as `ButtonTypes.Secondary` and must
+  include an up arrow icon.
+- Previous and Next buttons should be set as `ButtonTypes.Secondary` and be
+  wrapped in a `ButtonGroup`.
+- Only use the `ButtonTypes.NoBrand` style where there is no brand color. _This
+  should be rarely used._
 
 <Canvas>
   <DSProvider>
@@ -154,6 +190,24 @@ The `buttonType` prop should be used to render various forms of the button compo
           align={IconAlign.Right}
         />
       </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate90}
+          align={IconAlign.Left}
+          size={IconSizes.Small}
+        />
+        Previous
+      </Button>
+      <Button buttonType={ButtonTypes.Secondary}>
+        Next
+        <Icon
+          name={IconNames.Arrow}
+          iconRotation={IconRotationTypes.Rotate270}
+          align={IconAlign.Right}
+          size={IconSizes.Small}
+        />
+      </Button>
     </ButtonGroup>
   </DSProvider>
 </Canvas>

package/src/components/StyleGuide/ColorCard.tsx

@@ -28,7 +28,6 @@ export default function ColorCard(
         backgroundColor={backgroundColor}
         center
         layout={CardLayouts.Column}
-        padding="3rem"
         border
       />
       <div style={{ marginLeft: "1rem" }}>

package/src/components/StyleGuide/DesignTokens.stories.mdx

@@ -0,0 +1,170 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  ArgsTable,
+  Description,
+} from "@storybook/addon-docs/blocks";
+import { withDesign } from "storybook-addon-designs";
+import { getCategory } from "../../utils/componentCategories";
+
+<Meta title={getCategory("Design Tokens")} />
+
+# Design Tokens
+
+| Table of Contents                                                                    |
+| ------------------------------------------------------------------------------------ |
+| 1. [What are Design Tokens?](#what-are-design-tokens)                                |
+| 2. [Why Use Design Tokens?](#why-use-design-tokens)                                  |
+| 3. [How to Use the NYPL Design Tokens](#figma-reference)                             |
+| 4. [Using NYPL Design Tokens in CSS](#using-nypl-design-tokens-in-css)               |
+| 5. [Using NYPL Design Tokens in Javascript](#using-nypl-design-tokens-in-javascript) |
+| 6. [NYPL Design Token Categories](#nypl-design-token-categories)                     |
+
+## What are Design Tokens?
+
+Design tokens are the style values that define a design system. These values can include, but may not be limited to, spacing, color, typography, breakpoints and object styles. Ultimately, these values are used to construct and maintain the components that make up our system.
+
+## Why Use Design Tokens?
+
+_"With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development."_ – Jina Bolton, Lead Designer for the Salesforce Design System
+
+Design tokens are a single source of truth when it comes to styles. They allow an organization to more easily build multiple applications – web and/or native – that feel and look the same without slowing down the development team.
+
+## How to Use the NYPL Design Tokens
+
+The NYPL design tokens are built into the NYPL Design System (the DS) and are offered in two formats for consumption: CSS variables and javascript data objects. To access either of these formats, the DS v0.25.2 or higher needs to be properly installed in a consuming React application.
+
+## Using NYPL Design Tokens in CSS
+
+If your app uses CSS or SCSS to handle styles, the DS creates standard CSS custom properties (e.g. variables) for consumption in your stylesheets. If the DS is properly installed, the CSS custom properties will be available for you to use. Nothing more needs to be done to your app.
+
+To assist with CSS scope isolation, all of the CSS custom properties created by the DS are prefixed with "nypl." Please see the examples below.
+
+```css
+--nypl-colors-brand-primary
+--nypl-colors-brand-secondary
+--nypl-fontSizes-sm
+--nypl-fontSizes-md
+--nypl-fontSizes-lg
+--nypl-fontSizes-xl
+--nypl-space-xxs
+--nypl-space-xs
+--nypl-space-s
+--nypl-space-m
+--nypl-space-l
+```
+
+The CSS custom properties are defined on the :root pseudo-class and should be implemented using standard CSS custom properties conventions.
+
+```css
+/* Property Declaration in the DS */
+:root {
+  --nypl-colors-brand-primary: #c60917;
+}
+
+/* Property Usage in Your Application */
+.custom-button {
+  background: var(--nypl-colors-brand-primary);
+}
+```
+
+## Using NYPL Design Tokens in Javascript
+
+If you would like to use CSS-in-JS styles in your React components, the `useNYPLTheme` hook will provide you with NYPL design token values. The hook depends on the `DSProvider` component and will not work properly outside of the `DSProvider` wrapper component.
+
+After importing and implementing the `DSProvider` wrapper component, as explained in the `DSProvider` section of the [DS Chakra UI](?path=/story/chakra-ui--page#dsprovider) document, your children components can use this hook function.
+
+```tsx
+import { useNYPLTheme } from "@nypl/design-system-react-components";
+const theme = useNYPLTheme();
+```
+
+The theme variable will be a javascript object containing the NYPL design token style values. This will allow you to use design token values in your components through CSS-in-JS.
+
+```tsx
+// theme
+{
+  breakpoints: { ... },
+  colors: {
+    brand: { ... },
+    section: { ... },
+    transparent: { ... },
+    ui: { ... },
+  },
+  fontSizes: { ... },
+  fontWeights: { ... },
+  fonts: { ... },
+  radii: { ... },
+  space: { ... },
+}
+```
+
+#### Using in DS Components
+
+The general rule of thumb is that DS components and the available variants should be used with the styles and variants as they are shown in Storybook, but there may be rare times when a component does require a modification. That said, if a DS component does need an updated style, first contact the Design System and UX teams about this update.
+
+If you receive approval to make a change in a consuming app, then you can add styles directly to the `additionalStyles` prop. For example, if the `Heading` component needs to render text in NYPL's "success primary" green color and add a bold font weight, then you can do the following:
+
+```tsx
+const theme = useNYPLTheme();
+
+// ...
+return (
+  <div>
+    <Heading
+      level={2}
+      additionalStyles={{
+        color: theme.colors.ui.success.primary,
+        fontWeight: theme.fontWeights.bold,
+      }}
+    >
+      Get a Digital Library Card Today in a Few Easy Steps
+    </Heading>
+  </div>
+);
+```
+
+IMPORTANT: At the moment, not all DS components have this prop or feature.
+
+#### Using in HTML Components
+
+For styling standard HTML elements, use the `style` attribute to add inline styles.
+
+```html
+<p style={{ color: theme.colors.ui.success.primary }}>
+  If you are 13 or older and live, work, attend school, or pay property
+  taxes in New York State, you can get a free digital library card right
+  now using this online form. Visitors to New York State can also use this
+  form to apply for a temporary card.
+</p>
+```
+
+#### Using in Styled Components
+
+For adding theme styles to styled-objects, use the theme object as a standard javascript variable.
+
+```tsx
+const CustomButton = styled.button`
+  background: ${theme.colors.brand.primary};
+`;
+```
+
+## NYPL Design Token Categories
+
+The DS design tokens are broken into the following categories:
+
+- [breakpoints](?path=/story/documentation-style-guide-breakpoints--page)
+- [colors](?path=/story/documentation-style-guide-colors--page)
+  - brand
+  - section
+  - transparent
+  - ui
+- radii
+- [spacing](?path=/story/documentation-style-guide-spacing--page)
+- [typography](?path=/story/documentation-style-guide-typography--page)
+  - font families
+  - font sizes
+  - font weights
+
+For details related to a specific category, please refer to the corresponding section in the Style Guide available in the DS Storybook.

package/src/components/StyleGuide/Iconography.stories.mdx

@@ -6,6 +6,7 @@ import {
   Description,
 } from "@storybook/addon-docs/blocks";
 import { withDesign } from "storybook-addon-designs";
+import { Stack } from "@chakra-ui/react";
 
 import { getCategory } from "../../utils/componentCategories";
 import Icon from "../Icons/Icon";
@@ -42,63 +43,53 @@ import DSProvider from "../../theme/provider";
 
 ## General Information
 
-Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props) component to render and control icons and NYPL logos as `<svg>` elements within consuming apps.
+Use the NYPL Design System [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+component to render and control icons and NYPL logos as `<svg>` elements within
+consuming apps.
 
 The DS utilizes the `Filled` icons available in the [Material UI Design System](https://material-ui.com/components/material-icons/).
 
 ## Icon Examples
 
-The graphic of the `Icon` component is handled through the `IconNames` and `LogoNames` enums. To see all graphic options for `Icon`, please refer to the [Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props) Storybook page.
+The graphic of the `Icon` component is handled through the `IconNames` and
+`LogoNames` enums. To see all graphic options for `Icon`, please refer to the
+[Icon](https://nypl.github.io/nypl-design-system/storybook-static/?path=/docs/icon--control-props)
+Storybook page.
 
 <Canvas>
   <DSProvider>
-    <span style={{ marginRight: "1rem" }}>
+    <Stack spacing="s" direction="row">
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.Check}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.Close}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.ErrorOutline}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={IconNames.SpeakerNotes}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={LogoNames.LogoNypl}
-        style={{ marginRight: "1rem" }}
       />
-    </span>
-    <span style={{ marginRight: "1rem" }}>
       <Icon
         decorative
         size={IconSizes.ExtraExtraExtraLarge}
         name={LogoNames.LogoBrooklyn}
       />
-    </span>
+    </Stack>
   </DSProvider>
 </Canvas>
 
@@ -117,26 +108,14 @@ The size of the `Icon` component is handled through the `IconSizes` enum.
 
 <Canvas>
   <DSProvider>
-    <div style={{ display: "flex", alignItems: "center" }}>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Small} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Medium} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.Large} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
-      </span>
-      <span style={{ marginRight: "1rem" }}>
-        <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-      </span>
-    </div>
+    <Stack spacing="s" direction="row" alignItems="center">
+      <Icon size={IconSizes.Small} name={IconNames.Check} />
+      <Icon size={IconSizes.Medium} name={IconNames.Check} />
+      <Icon size={IconSizes.Large} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraLarge} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraExtraLarge} name={IconNames.Check} />
+      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+    </Stack>
   </DSProvider>
 </Canvas>
 
@@ -151,31 +130,34 @@ The size of the `Icon` component is handled through the `IconSizes` enum.
 
 ## Icon Colors
 
-The color of the `Icon` component is handled through the `IconColors` enum. Icons in NYPL projects should always be rendered with one color.
+The color of the `Icon` component is handled through the `IconColors` enum.
+Icons in NYPL projects should always be rendered with one color.
 
 <Canvas>
   <DSProvider>
-    <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.BrandPrimary}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchPrimary}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchLibrarySchwartzman}
-    />
-    <Icon
-      name={IconNames.Check}
-      size={IconSizes.ExtraExtraExtraLarge}
-      color={IconColors.SectionResearchLibrarySchomburg}
-    />
+    <Stack spacing="s" direction="row">
+      <Icon size={IconSizes.ExtraExtraExtraLarge} name={IconNames.Check} />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.BrandPrimary}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchPrimary}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchLibrarySchwartzman}
+      />
+      <Icon
+        name={IconNames.Check}
+        size={IconSizes.ExtraExtraExtraLarge}
+        color={IconColors.SectionResearchLibrarySchomburg}
+      />
+    </Stack>
   </DSProvider>
 </Canvas>
 
@@ -196,7 +178,14 @@ The color of the `Icon` component is handled through the `IconColors` enum. Icon
 
 ## Development Notes
 
-Icons have been added to the Icon component as they have been needed within NYPL development project, so not all of the [NYPL icons](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A3945) and [NYPL Brand](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007) and [NYPL UI](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=14989%3A37) colors are currently available through the DS Icon component. If your project requires an icon or color that is not currently available in the Icon component, please inform your project manager or reach out directly to the NYPL Design System team.
+Icons have been added to the Icon component as they have been needed within NYPL
+development project, so not all of the [NYPL icons](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/?node-id=10734%3A3945)
+and [NYPL Brand](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007)
+and [NYPL UI](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=14989%3A37)
+colors are currently available through the DS Icon component. If your project
+requires an icon or color that is not currently available in the Icon component,
+please inform your project manager or reach out directly to the NYPL Design
+System team.
 
 ## Figma Reference
 

package/src/components/Tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
 import {
   Box,
-  Tabs as ChakraTabs,
-  TabList,
   Tab,
+  TabList,
   TabPanels,
   TabPanel,
+  Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
 
@@ -63,7 +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 = (
@@ -108,7 +108,7 @@ const getElementsFromChildren = (children) => {
     return {};
   }
 
-  children.map((child) => {
+  children.forEach((child) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -170,7 +170,7 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
     if (windowDimensions.width > 600) {
       goToStart();
     }
-  }, [windowDimensions.width]);
+  }, [goToStart, windowDimensions.width]);
   const previousButton = (
     <Button
       buttonType={ButtonTypes.Primary}