@kaizen/components 1.64.13 → 1.65.0

package/src/__future__/Tabs/subcomponents/Tab/Tab.tsx

@@ -0,0 +1,58 @@
+import React from "react"
+import classnames from "classnames"
+import { Tab as RACTab, TabProps as RACTabProps } from "react-aria-components"
+import { Badge } from "~components/Badge"
+import styles from "./Tab.module.css"
+
+export type TabProps = {
+  /**
+   * Adds a Kaizen Badge component to the tab.
+   * Comes with some logic baked in - changes variant based on active/focus/hover state.
+   */
+  badge?: string
+} & Omit<
+  RACTabProps,
+  // omitting link functionality because it goes against WAI ARIA standards https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+  | "href"
+  | "hrefLang"
+  | "target"
+  | "rel"
+  | "download"
+  | "ping"
+  | "referrerPolicy"
+>
+
+/**
+ * A tab button
+ */
+export const Tab = (props: TabProps): JSX.Element => {
+  const { badge, children, className, ...restProps } = props
+
+  const tabProps = {
+    className: classnames(styles.tab, className),
+    ...restProps,
+  }
+
+  return (
+    <RACTab {...tabProps}>
+      {({ isSelected, isFocusVisible, isHovered }) => (
+        <>
+          {children}
+          {badge && (
+            <span className={styles.badge}>
+              <Badge
+                variant={
+                  isSelected || isFocusVisible || isHovered
+                    ? "active"
+                    : "default"
+                }
+              >
+                {badge}
+              </Badge>
+            </span>
+          )}
+        </>
+      )}
+    </RACTab>
+  )
+}

package/src/__future__/Tabs/subcomponents/Tab/index.ts

@@ -0,0 +1 @@
+export * from "./Tab"

package/src/__future__/Tabs/subcomponents/TabList/TabList.module.css

@@ -0,0 +1,8 @@
+.tabList {
+  border-bottom: 1px solid rgba(var(--color-gray-600-rgb), 0.1);
+  padding: var(--spacing-xs) var(--spacing-md) 0;
+}
+
+.noPadding {
+  padding: 0;
+}

package/src/__future__/Tabs/subcomponents/TabList/TabList.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react"
+import classnames from "classnames"
+import {
+  TabList as RACTabList,
+  TabListProps as RACTabListProps,
+} from "react-aria-components"
+import styles from "./TabList.module.css"
+
+export type TabListProps = {
+  /**
+   * Accessible name for the set of tabs
+   */
+  "aria-label": string
+  /**
+   * Removes the built in padding
+   */
+  noPadding?: boolean
+  children: ReactNode
+} & RACTabListProps<HTMLElement>
+
+/**
+ * Wrapper for the tabs themselves
+ */
+export const TabList = (props: TabListProps): JSX.Element => {
+  const {
+    "aria-label": ariaLabel,
+    noPadding = false,
+    children,
+    className,
+    ...restProps
+  } = props
+  return (
+    <RACTabList
+      aria-label={ariaLabel}
+      className={classnames(
+        styles.tabList,
+        className,
+        noPadding && styles.noPadding
+      )}
+      {...restProps}
+    >
+      {children}
+    </RACTabList>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabList/index.ts

@@ -0,0 +1 @@
+export * from "./TabList"

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -0,0 +1,12 @@
+.tabPanel {
+  border: 2px solid transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
+  }
+}

package/src/__future__/Tabs/subcomponents/TabPanel/TabPanel.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import {
+  TabPanel as RACTabPanel,
+  TabPanelProps as RACTabPanelProps,
+} from "react-aria-components"
+import styles from "./TabPanel.module.css"
+
+export type TabPanelProps = RACTabPanelProps
+
+/**
+ * Wrapper for the content that shows when tab is active
+ */
+export const TabPanel = (props: TabPanelProps): JSX.Element => {
+  const { className, children, ...restProps } = props
+  return (
+    <RACTabPanel className={(styles.tabPanel, className)} {...restProps}>
+      {children}
+    </RACTabPanel>
+  )
+}

package/src/__future__/Tabs/subcomponents/TabPanel/index.ts

@@ -0,0 +1 @@
+export * from "./TabPanel"

package/src/__future__/Tabs/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export * from "./Tab/"
+export * from "./TabList/"
+export * from "./TabPanel/"

package/src/__future__/index.ts

@@ -1,2 +1,3 @@
 export * from "./Select"
 export * from "./Tag"
+export * from "./Tabs"

package/src/__utilities__/useIsClientReady/index.ts

@@ -0,0 +1 @@
+export * from "./useIsClientReady"

package/src/__utilities__/useIsClientReady/useIsClientReady.tsx

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react"
+
+/**
+ * A hook that returns a truthy value indicating if the code can be run on client side.
+ * This is a useful hook for determining if the `document` or `window` objects are available.
+ */
+export const useIsClientReady = (): boolean => {
+  const [isClientReady, setIsClientReady] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      setIsClientReady(true)
+    }
+  }, [])
+
+  return isClientReady
+}