@hypothesis/frontend-shared
Version:
Shared components, styles and utilities for Hypothesis projects
1,224 lines • 45.4 kB
JavaScript
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/TabPage.tsx";
import classnames from 'classnames';
import { useState } from 'preact/hooks';
import { Card, EmailIcon, ProfileIcon, SettingsIcon, Tab, TabList } from '../../../../';
import Library from '../../Library';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
export default function TabPage() {
const [prefPanel, setPrefPanel] = useState('notifications');
const [sidebarPanel, setSidebarPanel] = useState('annotations');
const [sidebarPanel2, setSidebarPanel2] = useState('annotations');
const [sidebarPanel3, setSidebarPanel3] = useState('annotations');
const [verticalPanel, setVerticalPanel] = useState('notifications');
return _jsxDEV(Library.Page, {
title: "Tabs",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 11
}, this), " and ", _jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
columnNumber: 32
}, this), " are presentational components for rendering accessible tabs."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Tab",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 13
}, this), " generates a button with appropriate ARIA attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 40,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: _jsxDEV(Library.Demo, {
title: "Basic Tabs in a tablist",
withSource: true,
children: _jsxDEV("div", {
role: "tablist",
className: "gap-x-6 flex",
children: [_jsxDEV(Tab, {
children: ["Annotations", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 52
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 46,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: true,
children: ["Page Notes", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 4
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 17
}, this), _jsxDEV(Tab, {
children: ["Orphans", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 2
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Working with Tabs",
children: [_jsxDEV(Library.SectionL3, {
title: "Accessibility",
children: _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 17
}, this), "s ", _jsxDEV("em", {
children: "must"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 35
}, this), " be direct children of an element with ", _jsxDEV("code", {
children: ["role=", '"tablist"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 22
}, this), " (or use the", ' ', _jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 17
}, this), " component)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 15
}, this), _jsxDEV("li", {
children: ["You ", _jsxDEV("em", {
children: "should"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
columnNumber: 21
}, this), " provide an", ' ', _jsxDEV("a", {
href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls",
children: _jsxDEV("code", {
children: "aria-controls"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 17
}, this), ' ', "attribute to each ", _jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 35
}, this), ". This is not always feasible in our applications."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "Preventing text jiggle with textContent",
children: [_jsxDEV("p", {
children: "Bolding is used in our design patterns to indicate a selected tab. Without any intervention, textual tabs will jiggle around when they are selected. This has a simple cause: bold text takes up more room."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this), _jsxDEV("p", {
children: [_jsxDEV("strong", {
children: ["Setting ", _jsxDEV("code", {
children: "textContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 25
}, this), " can help prevent jiggle in selected tabs"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this), ". The size of the tab will accommodate this string rendered in bold text."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Tabs without textContent (jiggle when selected)",
withSource: true,
children: _jsxDEV(TabList, {
classes: "gap-x-6",
children: [_jsxDEV(Tab, {
selected: sidebarPanel === 'annotations',
onClick: () => setSidebarPanel('annotations'),
children: ["Annotations", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 52
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel === 'pageNotes',
onClick: () => setSidebarPanel('pageNotes'),
children: ["Page Notes", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 48
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel === 'orphans',
onClick: () => setSidebarPanel('orphans'),
children: ["Orphans", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 4
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["For tabs that have a simple text label, setting", ' ', _jsxDEV("code", {
children: "textContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 15
}, this), " to that string avoids the jiggle. Text will still change size (bold text is larger) but the tabs themselves do not move."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Tabs with textContent (no jiggle)",
withSource: true,
children: _jsxDEV(TabList, {
classes: "gap-x-6",
children: [_jsxDEV(Tab, {
selected: sidebarPanel2 === 'annotations',
onClick: () => setSidebarPanel2('annotations'),
textContent: "Annotations",
children: "Annotations"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel2 === 'pageNotes',
onClick: () => setSidebarPanel2('pageNotes'),
textContent: "Page Notes",
children: "Page Notes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel2 === 'orphans',
onClick: () => setSidebarPanel2('orphans'),
textContent: "Orphans",
children: "Orphans"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["For tabs with styled or dynamic content, ", _jsxDEV("code", {
children: "textContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 56
}, this), ' ', "can be set to an estimated ", '"widest-possible-text-content"', ' ', "value."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Tabs with estimated widest-value textContent",
withSource: true,
children: _jsxDEV(TabList, {
classes: "gap-x-6",
children: [_jsxDEV(Tab, {
selected: sidebarPanel3 === 'annotations',
onClick: () => setSidebarPanel3('annotations'),
textContent: "Annotations##",
children: ["Annotations", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 52
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel3 === 'pageNotes',
onClick: () => setSidebarPanel3('pageNotes'),
textContent: "Page Notes##",
children: ["Page Notes", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 56
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: sidebarPanel3 === 'orphans',
onClick: () => setSidebarPanel3('orphans'),
textContent: "Orphans##",
children: ["Orphans", _jsxDEV("span", {
className: "relative bottom-[3px] left-[2px] text-[10px]",
children: 2
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 169,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 211,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 210,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "icon",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Optional icon to display on the left, sized proportionally to the inherited font size."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 220,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Tabs with icon",
withSource: true,
children: _jsxDEV("div", {
role: "tablist",
children: [_jsxDEV(Tab, {
icon: ProfileIcon,
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 17
}, this), _jsxDEV(Tab, {
classes: "text-lg",
icon: ProfileIcon,
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 17
}, this), _jsxDEV(Tab, {
classes: "text-xl",
icon: ProfileIcon,
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 229,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "selected",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Asserts that the ", _jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 244,
columnNumber: 34
}, this), " is currently selected and the", ' ', _jsxDEV("code", {
children: "tabpanel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 245,
columnNumber: 17
}, this), " it controls (where relevant) is active and visible."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 251,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 241,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "textContent",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "String representing the longest textual content expected for the Tab. Used to prevent jiggle when selected."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 264,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 258,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...buttonProps",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 17
}, this), " forwards", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: _jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 17
}, this), ' ', "component API props, including HTML attributes. Styling API props are not forwarded."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<ButtonProps, 'variant' | 'size' | 'unstyled'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 269,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 209,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Styling API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 289,
columnNumber: 13
}, this), " accepts the following props from the", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-styling-api",
children: "presentational component styling API"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 288,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "variant",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set to ", _jsxDEV("code", {
children: "custom"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 298,
columnNumber: 24
}, this), " to remove theming styles and provide your own styling with ", _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 299,
columnNumber: 39
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'text' | 'tab' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "'text'"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 305,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 296,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'tab'",
withSource: true,
children: _jsxDEV("div", {
role: "tablist",
className: "flex",
children: [_jsxDEV(Tab, {
variant: "tab",
children: "Share"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 17
}, this), _jsxDEV(Tab, {
selected: true,
variant: "tab",
children: "Import"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 312,
columnNumber: 17
}, this), _jsxDEV(Tab, {
variant: "tab",
children: "Export"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 295,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "size",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set relative internal spacing and padding. Set to", ' ', _jsxDEV("code", {
children: `'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 324,
columnNumber: 17
}, this), " to provide your own sizing styles with", ' ', _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
columnNumber: 17
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 322,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'md' | 'custom'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 328,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 327,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 331,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 321,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 320,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "unstyled",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set to remove all styling."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 338,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 341,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 345,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 344,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 337,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "TabList",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 13
}, this), " is a presentational component that provides a", ' ', _jsxDEV("code", {
children: 'role="tablist"'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 356,
columnNumber: 13
}, this), " container and arrow-key navigation as outlined by", ' ', _jsxDEV("a", {
href: "https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/",
children: "WAI-ARIA authoring practices"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 358,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 354,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.SectionL2, {
children: [_jsxDEV(Library.Usage, {
componentName: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 366,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
children: [_jsxDEV("p", {
children: ["This example demonstrates a full Tab pattern with", ' ', _jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 370,
columnNumber: 15
}, this), ", ", _jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 370,
columnNumber: 37
}, this), " and some tabpanels. The tabpanels have been made focusable here as they contain no focusable elements: pressing ", _jsxDEV("kbd", {
children: "tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 372,
columnNumber: 44
}, this), " when in the tablist will move focus to the active tabpanel. Tabs may be navigated with the left and right arrows."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Full Tab pattern example",
children: _jsxDEV("div", {
children: [_jsxDEV(TabList, {
classes: "w-[400px] gap-x-6 my-4",
children: [_jsxDEV(Tab, {
"aria-controls": "profile-panel",
textContent: "Profile",
selected: prefPanel === 'profile',
onClick: () => setPrefPanel('profile'),
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 379,
columnNumber: 19
}, this), _jsxDEV(Tab, {
"aria-controls": "notifications-panel",
textContent: "Notifications",
selected: prefPanel === 'notifications',
onClick: () => setPrefPanel('notifications'),
children: "Notifications"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 387,
columnNumber: 19
}, this), _jsxDEV(Tab, {
"aria-controls": "account-panel",
textContent: "Account",
selected: prefPanel === 'account',
onClick: () => setPrefPanel('account'),
children: "Account"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 378,
columnNumber: 17
}, this), _jsxDEV(Card, {
classes: classnames({
hidden: prefPanel !== 'profile'
}, 'p-2 focus-visible-ring'),
id: "profile-panel",
role: "tabpanel",
tabIndex: 0,
variant: "flat",
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 404,
columnNumber: 17
}, this), _jsxDEV(Card, {
classes: classnames({
hidden: prefPanel !== 'notifications'
}, 'p-2 focus-visible-ring'),
id: "notifications-panel",
role: "tabpanel",
tabIndex: 0,
variant: "flat",
children: "Notifications"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 416,
columnNumber: 17
}, this), _jsxDEV(Card, {
classes: classnames({
hidden: prefPanel !== 'account'
}, 'p-2 focus-visible-ring'),
id: "account-panel",
role: "tabpanel",
tabIndex: 0,
variant: "flat",
children: "Account"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 428,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 377,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 376,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 367,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 365,
columnNumber: 9
}, this), _jsxDEV(Library.SectionL2, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 447,
columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 448,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 446,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "vertical",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Indicates that the tablist should be laid out vertically. When set, arrow-key navigation using up and down arrows is enabled."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 455,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 460,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 459,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 463,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 462,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 454,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
title: "Vertical TabList",
children: _jsxDEV(TabList, {
classes: "gap-y-2",
vertical: true,
children: [_jsxDEV(Tab, {
icon: ProfileIcon,
onClick: () => setVerticalPanel('profile'),
selected: verticalPanel === 'profile',
textContent: "Profile",
children: "Profile"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 469,
columnNumber: 17
}, this), _jsxDEV(Tab, {
icon: EmailIcon,
onClick: () => setVerticalPanel('notifications'),
selected: verticalPanel === 'notifications',
textContent: "Notifications",
children: "Notifications"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 477,
columnNumber: 17
}, this), _jsxDEV(Tab, {
icon: SettingsIcon,
onClick: () => setVerticalPanel('account'),
selected: verticalPanel === 'account',
textContent: "Account",
children: "Account"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 485,
columnNumber: 17
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 468,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 467,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 453,
columnNumber: 11
}, this), _jsxDEV(Library.SectionL3, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 500,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 499,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 503,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 502,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 498,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 497,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 445,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 351,
columnNumber: 7
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 5
}, this);
}
//# sourceMappingURL=TabPage.js.map