Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@hypothesis/frontend-shared

Package Overview
Dependencies
Maintainers
4
Versions
122
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hypothesis/frontend-shared - npm Package Compare versions

Comparing version 6.3.0 to 6.4.0

lib/components/feedback/Callout.d.ts
lib/components/feedback/Callout.js
lib/components/feedback/Callout.js.map
lib/pattern-library/components/patterns/feedback/CalloutPage.d.ts
lib/pattern-library/components/patterns/feedback/CalloutPage.js
lib/pattern-library/components/patterns/feedback/CalloutPage.js.map

2

lib/components/feedback/index.d.ts

@@ -0,1 +1,2 @@

export { default as Callout } from './Callout';
export { default as Dialog } from './Dialog';

@@ -6,2 +7,3 @@ export { default as Modal } from './Modal';

export { default as SpinnerOverlay } from './SpinnerOverlay';
export type { CalloutProps } from './Callout';
export type { DialogProps } from './Dialog';

@@ -8,0 +10,0 @@ export type { ModalProps } from './Modal';

1

lib/components/feedback/index.js

@@ -0,1 +1,2 @@

export { default as Callout } from './Callout';
export { default as Dialog } from './Dialog';

@@ -2,0 +3,0 @@ export { default as Modal } from './Modal';

6

lib/components/navigation/PointerButton.d.ts
import type { PresentationalProps } from '../../types';
import type { ButtonCommonProps, HTMLButtonAttributes } from '../input/ButtonBase';
import type { ButtonProps } from '../input/Button';
type ComponentProps = {

@@ -10,3 +10,3 @@ /**

};
export type PointerButtonProps = PresentationalProps & ButtonCommonProps & ComponentProps & HTMLButtonAttributes;
export type PointerButtonProps = PresentationalProps & Omit<ButtonProps, 'variant' | 'size' | 'unstyled'> & ComponentProps;
/**

@@ -26,3 +26,3 @@ * A button for pointing toward a quantified set of items somewhere else in the

*/
declare const PointerButton: ({ children, classes, elementRef, expanded, pressed, title, direction, ...htmlAttributes }: PointerButtonProps) => import("preact").JSX.Element;
declare const PointerButton: ({ children, classes, elementRef, expanded, pressed, title, direction, ...htmlAndButtonProps }: PointerButtonProps) => import("preact").JSX.Element;
export default PointerButton;

12

lib/components/navigation/PointerButton.js
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/PointerButton.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import ButtonBase from '../input/ButtonBase';
import Button from '../input/Button';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";

@@ -28,7 +28,7 @@ /**

direction,
...htmlAttributes
...htmlAndButtonProps
}) {
return _jsxDEV(ButtonBase, {
return _jsxDEV(Button, {
"data-component": "PointerButton",
...htmlAttributes,
...htmlAndButtonProps,
elementRef: downcastRef(elementRef),

@@ -88,6 +88,8 @@ classes: classnames(

title: title,
variant: "custom",
size: "custom",
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 48,
columnNumber: 5

@@ -94,0 +96,0 @@ }, this);

7

lib/components/navigation/Tab.d.ts

@@ -1,3 +0,3 @@

import type { JSX } from 'preact';
import type { IconComponent, PresentationalProps } from '../../types';
import type { ButtonProps } from '../input/Button';
type ComponentProps = {

@@ -14,8 +14,7 @@ icon?: IconComponent;

};
type HTMLAttributes = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size' | 'icon' | 'title' | 'selected' | 'aria-expanded' | 'aria-pressed' | 'aria-label'>;
export type TabProps = PresentationalProps & ComponentProps & HTMLAttributes;
export type TabProps = PresentationalProps & Omit<ButtonProps, 'variant' | 'size' | 'unstyled'> & ComponentProps;
/**
* Render a button with appropriate ARIA tab affordances
*/
declare const Tab: ({ children, classes, elementRef, icon: Icon, textContent, selected, variant, ...htmlAttributes }: TabProps) => JSX.Element;
declare const Tab: ({ children, classes, elementRef, icon: Icon, textContent, selected, variant, ...htmlAttributes }: TabProps) => import("preact").JSX.Element;
export default Tab;

12

lib/components/navigation/Tab.js
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/components/navigation/Tab.tsx";
import classnames from 'classnames';
import { downcastRef } from '../../util/typing';
import ButtonBase from '../input/ButtonBase';
import Button from '../input/Button';
import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";

@@ -19,3 +19,3 @@ /**

}) {
return _jsxDEV(ButtonBase, {
return _jsxDEV(Button, {
"data-component": "Tab",

@@ -29,2 +29,4 @@ ...htmlAttributes,

role: "tab",
variant: "custom",
size: "custom",
children: [Icon && _jsxDEV(Icon, {

@@ -37,3 +39,3 @@ className: classnames(

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 57,
columnNumber: 9

@@ -56,3 +58,3 @@ }, this), _jsxDEV("span", {

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 65,
columnNumber: 7

@@ -62,3 +64,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 40,
columnNumber: 5

@@ -65,0 +67,0 @@ }, this);

4

lib/index.d.ts

@@ -8,3 +8,3 @@ export { useArrowKeyNavigation } from './hooks/use-arrow-key-navigation';

export { AspectRatio, DataTable, Scroll, ScrollContent, ScrollContainer, ScrollBox, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Thumbnail, } from './components/data';
export { Dialog, Modal, ModalDialog, Spinner, SpinnerOverlay, } from './components/feedback';
export { Callout, Dialog, Modal, ModalDialog, Spinner, SpinnerOverlay, } from './components/feedback';
export { Button, ButtonBase, Checkbox, IconButton, Input, InputGroup, OptionButton, Select, } from './components/input';

@@ -16,3 +16,3 @@ export { Card, CardContent, CardHeader, CardTitle, CardActions, Overlay, Panel, } from './components/layout';

export type { AspectRatioProps, DataTableProps, ScrollProps, ScrollContentProps, ScrollContainerProps, ScrollBoxProps, TableProps, TableBodyProps, TableCellProps, TableFootProps, TableHeadProps, TableRowProps, ThumbnailProps, } from './components/data';
export type { DialogProps, ModalProps, ModalDialogProps, SpinnerProps, SpinnerOverlayProps, } from './components/feedback';
export type { CalloutProps, DialogProps, ModalProps, ModalDialogProps, SpinnerProps, SpinnerOverlayProps, } from './components/feedback';
export type { ButtonProps, ButtonBaseProps, CheckboxProps, IconButtonProps, InputProps, InputGroupProps, OptionButtonProps, SelectProps, } from './components/input';

@@ -19,0 +19,0 @@ export type { CardProps, CardContentProps, CardHeaderProps, CardTitleProps, CardActionsProps, OverlayProps, PanelProps, } from './components/layout';

2

lib/index.js

@@ -11,3 +11,3 @@ // Hooks

export { AspectRatio, DataTable, Scroll, ScrollContent, ScrollContainer, ScrollBox, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Thumbnail } from './components/data';
export { Dialog, Modal, ModalDialog, Spinner, SpinnerOverlay } from './components/feedback';
export { Callout, Dialog, Modal, ModalDialog, Spinner, SpinnerOverlay } from './components/feedback';
export { Button, ButtonBase, Checkbox, IconButton, Input, InputGroup, OptionButton, Select } from './components/input';

@@ -14,0 +14,0 @@ export { Card, CardContent, CardHeader, CardTitle, CardActions, Overlay, Panel } from './components/layout';

252

lib/pattern-library/components/patterns/data/DataTablePage.js

@@ -440,3 +440,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/DataTablePage.tsx";

children: [_jsxDEV("code", {
children: "rows"
children: "DataTable"
}, void 0, false, {

@@ -446,2 +446,21 @@ fileName: _jsxFileName,

columnNumber: 13
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 205,
columnNumber: 11
}, this), _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "rows"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 213,
columnNumber: 13
}, this), ", ", _jsxDEV("code", {

@@ -451,3 +470,3 @@ children: "columns"

fileName: _jsxFileName,
lineNumber: 206,
lineNumber: 213,
columnNumber: 32

@@ -458,3 +477,3 @@ }, this), " and ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 206,
lineNumber: 213,
columnNumber: 57

@@ -464,3 +483,3 @@ }, this), " are required."]

fileName: _jsxFileName,
lineNumber: 205,
lineNumber: 212,
columnNumber: 11

@@ -476,3 +495,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 213,
lineNumber: 220,
columnNumber: 27

@@ -483,3 +502,3 @@ }, this), " are rendered. Optional", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 214,
lineNumber: 221,
columnNumber: 17

@@ -490,3 +509,3 @@ }, this), " extend CSS classes applied to associated", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 215,
lineNumber: 222,
columnNumber: 17

@@ -496,3 +515,3 @@ }, this), " elements."]

fileName: _jsxFileName,
lineNumber: 211,
lineNumber: 218,
columnNumber: 15

@@ -511,3 +530,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 218,
lineNumber: 225,
columnNumber: 17

@@ -517,3 +536,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 217,
lineNumber: 224,
columnNumber: 15

@@ -526,3 +545,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 229,
lineNumber: 236,
columnNumber: 17

@@ -532,3 +551,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 228,
lineNumber: 235,
columnNumber: 15

@@ -538,3 +557,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 210,
lineNumber: 217,
columnNumber: 13

@@ -560,3 +579,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 235,
lineNumber: 242,
columnNumber: 19

@@ -566,3 +585,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 234,
lineNumber: 241,
columnNumber: 17

@@ -572,3 +591,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 233,
lineNumber: 240,
columnNumber: 15

@@ -578,3 +597,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 232,
lineNumber: 239,
columnNumber: 13

@@ -589,3 +608,3 @@ }, this), _jsxDEV(Library.Code, {

fileName: _jsxFileName,
lineNumber: 246,
lineNumber: 253,
columnNumber: 13

@@ -595,3 +614,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 209,
lineNumber: 216,
columnNumber: 11

@@ -607,3 +626,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 259,
lineNumber: 266,
columnNumber: 33

@@ -613,3 +632,3 @@ }, this), " will be rendered."]

fileName: _jsxFileName,
lineNumber: 257,
lineNumber: 264,
columnNumber: 15

@@ -622,3 +641,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 262,
lineNumber: 269,
columnNumber: 17

@@ -628,3 +647,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 261,
lineNumber: 268,
columnNumber: 15

@@ -637,3 +656,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 265,
lineNumber: 272,
columnNumber: 17

@@ -643,3 +662,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 264,
lineNumber: 271,
columnNumber: 15

@@ -649,3 +668,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 256,
lineNumber: 263,
columnNumber: 13

@@ -664,3 +683,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 275,
lineNumber: 282,
columnNumber: 19

@@ -670,3 +689,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 274,
lineNumber: 281,
columnNumber: 17

@@ -676,3 +695,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 273,
lineNumber: 280,
columnNumber: 15

@@ -682,3 +701,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 269,
lineNumber: 276,
columnNumber: 13

@@ -690,3 +709,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 285,
lineNumber: 292,
columnNumber: 36

@@ -697,3 +716,3 @@ }, this), " field is not referenced in ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 286,
lineNumber: 293,
columnNumber: 29

@@ -703,3 +722,3 @@ }, this), ", so it is not rendered."]

fileName: _jsxFileName,
lineNumber: 284,
lineNumber: 291,
columnNumber: 13

@@ -715,3 +734,3 @@ }, this), _jsxDEV(Library.Code, {

fileName: _jsxFileName,
lineNumber: 288,
lineNumber: 295,
columnNumber: 13

@@ -721,3 +740,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 255,
lineNumber: 262,
columnNumber: 11

@@ -733,3 +752,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 301,
lineNumber: 308,
columnNumber: 49

@@ -740,3 +759,3 @@ }, this), ". Superseded by", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 302,
lineNumber: 309,
columnNumber: 17

@@ -746,3 +765,3 @@ }, this), " state."]

fileName: _jsxFileName,
lineNumber: 300,
lineNumber: 307,
columnNumber: 15

@@ -755,3 +774,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 305,
lineNumber: 312,
columnNumber: 17

@@ -761,3 +780,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 304,
lineNumber: 311,
columnNumber: 15

@@ -767,3 +786,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 299,
lineNumber: 306,
columnNumber: 13

@@ -783,3 +802,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 315,
lineNumber: 322,
columnNumber: 35

@@ -789,3 +808,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 311,
lineNumber: 318,
columnNumber: 19

@@ -795,3 +814,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 310,
lineNumber: 317,
columnNumber: 17

@@ -801,3 +820,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 309,
lineNumber: 316,
columnNumber: 15

@@ -807,3 +826,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 308,
lineNumber: 315,
columnNumber: 13

@@ -813,3 +832,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 298,
lineNumber: 305,
columnNumber: 11

@@ -824,3 +843,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 324,
lineNumber: 331,
columnNumber: 15

@@ -833,3 +852,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 328,
lineNumber: 335,
columnNumber: 17

@@ -839,3 +858,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 327,
lineNumber: 334,
columnNumber: 15

@@ -848,3 +867,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 331,
lineNumber: 338,
columnNumber: 17

@@ -854,3 +873,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 330,
lineNumber: 337,
columnNumber: 15

@@ -860,3 +879,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 323,
lineNumber: 330,
columnNumber: 13

@@ -875,3 +894,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 337,
lineNumber: 344,
columnNumber: 19

@@ -881,3 +900,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 336,
lineNumber: 343,
columnNumber: 17

@@ -887,3 +906,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 335,
lineNumber: 342,
columnNumber: 15

@@ -893,3 +912,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 334,
lineNumber: 341,
columnNumber: 13

@@ -899,3 +918,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 322,
lineNumber: 329,
columnNumber: 11

@@ -910,3 +929,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 350,
lineNumber: 357,
columnNumber: 15

@@ -919,3 +938,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 355,
lineNumber: 362,
columnNumber: 17

@@ -925,3 +944,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 354,
lineNumber: 361,
columnNumber: 15

@@ -934,3 +953,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 358,
lineNumber: 365,
columnNumber: 17

@@ -940,3 +959,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 357,
lineNumber: 364,
columnNumber: 15

@@ -946,3 +965,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 349,
lineNumber: 356,
columnNumber: 13

@@ -975,3 +994,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 379,
lineNumber: 386,
columnNumber: 34

@@ -984,3 +1003,3 @@ }, this);

fileName: _jsxFileName,
lineNumber: 382,
lineNumber: 389,
columnNumber: 29

@@ -994,3 +1013,3 @@ }, this) : 'N/A';

fileName: _jsxFileName,
lineNumber: 368,
lineNumber: 375,
columnNumber: 19

@@ -1000,3 +1019,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 367,
lineNumber: 374,
columnNumber: 17

@@ -1006,3 +1025,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 366,
lineNumber: 373,
columnNumber: 15

@@ -1012,3 +1031,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 362,
lineNumber: 369,
columnNumber: 13

@@ -1034,3 +1053,3 @@ }, this), _jsxDEV(Library.Code, {

fileName: _jsxFileName,
lineNumber: 394,
lineNumber: 401,
columnNumber: 13

@@ -1040,3 +1059,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 348,
lineNumber: 355,
columnNumber: 11

@@ -1051,3 +1070,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 416,
lineNumber: 423,
columnNumber: 15

@@ -1060,3 +1079,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 421,
lineNumber: 428,
columnNumber: 17

@@ -1066,3 +1085,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 420,
lineNumber: 427,
columnNumber: 15

@@ -1072,3 +1091,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 415,
lineNumber: 422,
columnNumber: 13

@@ -1085,3 +1104,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 431,
lineNumber: 438,
columnNumber: 34

@@ -1091,3 +1110,3 @@ }, this) : 'None']

fileName: _jsxFileName,
lineNumber: 429,
lineNumber: 436,
columnNumber: 17

@@ -1105,3 +1124,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 435,
lineNumber: 442,
columnNumber: 21

@@ -1111,3 +1130,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 434,
lineNumber: 441,
columnNumber: 19

@@ -1117,3 +1136,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 433,
lineNumber: 440,
columnNumber: 17

@@ -1123,3 +1142,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 428,
lineNumber: 435,
columnNumber: 15

@@ -1129,3 +1148,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 424,
lineNumber: 431,
columnNumber: 13

@@ -1135,3 +1154,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 414,
lineNumber: 421,
columnNumber: 11

@@ -1147,3 +1166,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 452,
lineNumber: 459,
columnNumber: 17

@@ -1153,3 +1172,3 @@ }, this), " pressed)"]

fileName: _jsxFileName,
lineNumber: 450,
lineNumber: 457,
columnNumber: 15

@@ -1162,3 +1181,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 455,
lineNumber: 462,
columnNumber: 17

@@ -1168,3 +1187,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 454,
lineNumber: 461,
columnNumber: 15

@@ -1174,3 +1193,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 449,
lineNumber: 456,
columnNumber: 13

@@ -1180,3 +1199,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 448,
lineNumber: 455,
columnNumber: 11

@@ -1192,3 +1211,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 463,
lineNumber: 470,
columnNumber: 34

@@ -1198,3 +1217,3 @@ }, this), " is currently selected."]

fileName: _jsxFileName,
lineNumber: 462,
lineNumber: 469,
columnNumber: 15

@@ -1207,3 +1226,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 466,
lineNumber: 473,
columnNumber: 17

@@ -1213,3 +1232,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 465,
lineNumber: 472,
columnNumber: 15

@@ -1219,3 +1238,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 461,
lineNumber: 468,
columnNumber: 13

@@ -1235,3 +1254,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 473,
lineNumber: 480,
columnNumber: 19

@@ -1241,3 +1260,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 472,
lineNumber: 479,
columnNumber: 17

@@ -1247,3 +1266,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 471,
lineNumber: 478,
columnNumber: 15

@@ -1253,3 +1272,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 470,
lineNumber: 477,
columnNumber: 13

@@ -1259,34 +1278,27 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 460,
lineNumber: 467,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "title",
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "A title used for accessibility purposes."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 486,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "string"
children: [_jsxDEV("code", {
children: "DataTable"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 490,
lineNumber: 494,
columnNumber: 17
}, this)
}, void 0, false, {
}, this), " accepts HTML element attributes except those detailed below."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 489,
lineNumber: 493,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
label: "type",
children: _jsxDEV("code", {
children: "true"
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'rows' | 'role' | 'loading'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 493,
lineNumber: 498,
columnNumber: 17

@@ -1296,3 +1308,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 492,
lineNumber: 497,
columnNumber: 15

@@ -1302,3 +1314,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 485,
lineNumber: 492,
columnNumber: 13

@@ -1308,3 +1320,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 484,
lineNumber: 491,
columnNumber: 11

@@ -1311,0 +1323,0 @@ }, this)]

2

lib/pattern-library/components/patterns/data/IconsPage.js

@@ -78,3 +78,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/IconsPage.tsx";

children: [_jsxDEV(Library.Example, {
title: "...svgProps",
title: "...htmlProps",
children: [_jsxDEV(Library.Callout, {

@@ -81,0 +81,0 @@ children: ["Unlike other components in this package, Icon components take", ' ', _jsxDEV("code", {

404

lib/pattern-library/components/patterns/data/ScrollBoxPage.js

@@ -96,3 +96,10 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ScrollBoxPage.tsx";

columnNumber: 13
}, this), " takes all standard props from the composite component API."]
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), "."]
}, void 0, true, {

@@ -111,3 +118,3 @@ fileName: _jsxFileName,

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 55,
columnNumber: 43

@@ -117,3 +124,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 51,
lineNumber: 54,
columnNumber: 15

@@ -126,3 +133,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 55,
lineNumber: 58,
columnNumber: 17

@@ -132,3 +139,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 54,
lineNumber: 57,
columnNumber: 15

@@ -141,3 +148,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 58,
lineNumber: 61,
columnNumber: 17

@@ -147,3 +154,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 57,
lineNumber: 60,
columnNumber: 15

@@ -153,3 +160,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 53,
columnNumber: 13

@@ -166,3 +173,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 68,
columnNumber: 21

@@ -172,3 +179,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 64,
lineNumber: 67,
columnNumber: 19

@@ -178,3 +185,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 63,
lineNumber: 66,
columnNumber: 17

@@ -184,3 +191,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 62,
lineNumber: 65,
columnNumber: 15

@@ -190,3 +197,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 61,
lineNumber: 64,
columnNumber: 13

@@ -196,3 +203,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 52,
columnNumber: 11

@@ -216,3 +223,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 78,
lineNumber: 81,
columnNumber: 13

@@ -223,3 +230,3 @@ }, this), " and its allies allow for more customization control if ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 79,
lineNumber: 82,
columnNumber: 24

@@ -229,3 +236,3 @@ }, this), " ", "doesn't", " meet flexibility needs."]

fileName: _jsxFileName,
lineNumber: 77,
lineNumber: 80,
columnNumber: 11

@@ -241,3 +248,3 @@ }, this),

fileName: _jsxFileName,
lineNumber: 88,
lineNumber: 91,
columnNumber: 32

@@ -248,3 +255,3 @@ }, this), " component. Here and in following examples, the parent container sets width (", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 90,
lineNumber: 93,
columnNumber: 15

@@ -255,3 +262,3 @@ }, this), ") and height (", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 90,
lineNumber: 93,
columnNumber: 47

@@ -261,3 +268,3 @@ }, this), ")."]

fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 89,
columnNumber: 13

@@ -275,3 +282,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 101,
lineNumber: 104,
columnNumber: 25

@@ -281,3 +288,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 100,
lineNumber: 103,
columnNumber: 23

@@ -287,3 +294,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 99,
lineNumber: 102,
columnNumber: 21

@@ -293,3 +300,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 101,
columnNumber: 19

@@ -299,3 +306,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 97,
lineNumber: 100,
columnNumber: 17

@@ -305,3 +312,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 99,
columnNumber: 15

@@ -311,3 +318,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 92,
lineNumber: 95,
columnNumber: 13

@@ -317,3 +324,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 88,
columnNumber: 11

@@ -323,3 +330,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 84,
lineNumber: 87,
columnNumber: 9

@@ -329,3 +336,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 77,
columnNumber: 7

@@ -339,3 +346,3 @@ }, this), _jsxDEV(Library.Section, {

fileName: _jsxFileName,
lineNumber: 116,
lineNumber: 119,
columnNumber: 13

@@ -345,3 +352,3 @@ }, this), " is a presentational component providing a fluid container that scrolls on overflow."]

fileName: _jsxFileName,
lineNumber: 115,
lineNumber: 118,
columnNumber: 11

@@ -354,3 +361,3 @@ }, this),

fileName: _jsxFileName,
lineNumber: 122,
lineNumber: 125,
columnNumber: 11

@@ -367,3 +374,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 128,
lineNumber: 131,
columnNumber: 21

@@ -373,3 +380,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 127,
lineNumber: 130,
columnNumber: 19

@@ -379,3 +386,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 126,
lineNumber: 129,
columnNumber: 17

@@ -385,3 +392,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 125,
lineNumber: 128,
columnNumber: 15

@@ -391,3 +398,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 124,
lineNumber: 127,
columnNumber: 13

@@ -397,3 +404,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 123,
lineNumber: 126,
columnNumber: 11

@@ -403,3 +410,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 121,
lineNumber: 124,
columnNumber: 9

@@ -413,8 +420,15 @@ }, this), _jsxDEV(Library.Pattern, {

fileName: _jsxFileName,
lineNumber: 138,
lineNumber: 141,
columnNumber: 13
}, this), " takes all standard props from the presentational component API."]
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 137,
lineNumber: 140,
columnNumber: 11

@@ -430,3 +444,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 144,
lineNumber: 150,
columnNumber: 17

@@ -437,3 +451,3 @@ }, this), "'s", " default ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 145,
lineNumber: 151,
columnNumber: 32

@@ -444,3 +458,3 @@ }, this), " ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 145,
lineNumber: 151,
columnNumber: 58

@@ -451,3 +465,3 @@ }, this), ' ', "renders CSS shadows to hint that content is scrollable. These can be disabled by using the ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 147,
lineNumber: 153,
columnNumber: 46

@@ -457,3 +471,3 @@ }, this), " variant."]

fileName: _jsxFileName,
lineNumber: 143,
lineNumber: 149,
columnNumber: 15

@@ -466,3 +480,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 150,
lineNumber: 156,
columnNumber: 17

@@ -472,3 +486,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 149,
lineNumber: 155,
columnNumber: 15

@@ -481,3 +495,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 153,
lineNumber: 159,
columnNumber: 17

@@ -487,3 +501,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 152,
lineNumber: 158,
columnNumber: 15

@@ -493,3 +507,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 142,
lineNumber: 148,
columnNumber: 13

@@ -506,3 +520,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 161,
lineNumber: 167,
columnNumber: 21

@@ -512,3 +526,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 160,
lineNumber: 166,
columnNumber: 19

@@ -518,3 +532,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 159,
lineNumber: 165,
columnNumber: 17

@@ -524,3 +538,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 158,
lineNumber: 164,
columnNumber: 15

@@ -530,3 +544,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 157,
lineNumber: 163,
columnNumber: 13

@@ -536,8 +550,47 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 141,
lineNumber: 147,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 180,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 179,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 136,
lineNumber: 139,
columnNumber: 9

@@ -547,3 +600,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 112,
lineNumber: 115,
columnNumber: 7

@@ -557,3 +610,3 @@ }, this), _jsxDEV(Library.Section, {

fileName: _jsxFileName,
lineNumber: 174,
lineNumber: 191,
columnNumber: 13

@@ -564,3 +617,3 @@ }, this), " is a presentational component that puts consistent padding and spacing around content in a", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 176,
lineNumber: 193,
columnNumber: 13

@@ -570,6 +623,6 @@ }, this), " component."]

fileName: _jsxFileName,
lineNumber: 173,
lineNumber: 190,
columnNumber: 11
}, this),
children: _jsxDEV(Library.Pattern, {
children: [_jsxDEV(Library.Pattern, {
children: [_jsxDEV(Library.Usage, {

@@ -579,3 +632,3 @@ componentName: "ScrollContent"

fileName: _jsxFileName,
lineNumber: 181,
lineNumber: 198,
columnNumber: 11

@@ -593,3 +646,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 188,
lineNumber: 205,
columnNumber: 23

@@ -599,3 +652,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 187,
lineNumber: 204,
columnNumber: 21

@@ -605,3 +658,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 186,
lineNumber: 203,
columnNumber: 19

@@ -611,3 +664,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 185,
lineNumber: 202,
columnNumber: 17

@@ -617,3 +670,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 184,
lineNumber: 201,
columnNumber: 15

@@ -623,3 +676,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 183,
lineNumber: 200,
columnNumber: 13

@@ -629,3 +682,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 182,
lineNumber: 199,
columnNumber: 11

@@ -635,8 +688,73 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 180,
lineNumber: 197,
columnNumber: 9
}, this)
}, void 0, false, {
}, this), _jsxDEV(Library.Pattern, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 216,
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: 217,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Scroll"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 225,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 224,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLDivElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 222,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 214,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 170,
lineNumber: 187,
columnNumber: 7

@@ -651,3 +769,3 @@ }, this), _jsxDEV(Library.Section, {

fileName: _jsxFileName,
lineNumber: 203,
lineNumber: 240,
columnNumber: 15

@@ -657,3 +775,3 @@ }, this), " is a presentational component that allows the combination of scrolling and non-scrolling content to be constrained to the parent ", "container's", " dimensions. This is very handy when trying to constrain complex content within, e.g., a modal."]

fileName: _jsxFileName,
lineNumber: 202,
lineNumber: 239,
columnNumber: 13

@@ -665,3 +783,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 210,
lineNumber: 247,
columnNumber: 39

@@ -671,3 +789,3 @@ }, this), " actually scrolls."]

fileName: _jsxFileName,
lineNumber: 209,
lineNumber: 246,
columnNumber: 13

@@ -681,3 +799,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 216,
lineNumber: 253,
columnNumber: 11

@@ -695,3 +813,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 221,
lineNumber: 258,
columnNumber: 17

@@ -703,3 +821,3 @@ }, this), _jsxDEV(Scroll, {

fileName: _jsxFileName,
lineNumber: 225,
lineNumber: 262,
columnNumber: 23

@@ -709,3 +827,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 224,
lineNumber: 261,
columnNumber: 21

@@ -715,3 +833,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 223,
lineNumber: 260,
columnNumber: 19

@@ -721,3 +839,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 222,
lineNumber: 259,
columnNumber: 17

@@ -729,3 +847,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 229,
lineNumber: 266,
columnNumber: 17

@@ -735,3 +853,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 220,
lineNumber: 257,
columnNumber: 15

@@ -741,3 +859,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 219,
lineNumber: 256,
columnNumber: 13

@@ -747,3 +865,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 218,
lineNumber: 255,
columnNumber: 11

@@ -753,7 +871,26 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 215,
lineNumber: 252,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Component API",
children: _jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
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: 275,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "borderless",

@@ -767,3 +904,3 @@ children: [_jsxDEV(Library.Info, {

fileName: _jsxFileName,
lineNumber: 239,
lineNumber: 283,
columnNumber: 43

@@ -773,3 +910,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 238,
lineNumber: 282,
columnNumber: 15

@@ -782,3 +919,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 242,
lineNumber: 286,
columnNumber: 17

@@ -788,3 +925,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 241,
lineNumber: 285,
columnNumber: 15

@@ -797,3 +934,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 245,
lineNumber: 289,
columnNumber: 17

@@ -803,3 +940,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 244,
lineNumber: 288,
columnNumber: 15

@@ -809,3 +946,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 237,
lineNumber: 281,
columnNumber: 13

@@ -823,3 +960,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 252,
lineNumber: 296,
columnNumber: 19

@@ -831,3 +968,3 @@ }, this), _jsxDEV(Scroll, {

fileName: _jsxFileName,
lineNumber: 256,
lineNumber: 300,
columnNumber: 25

@@ -837,3 +974,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 255,
lineNumber: 299,
columnNumber: 23

@@ -843,3 +980,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 254,
lineNumber: 298,
columnNumber: 21

@@ -849,3 +986,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 253,
lineNumber: 297,
columnNumber: 19

@@ -855,3 +992,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 251,
lineNumber: 295,
columnNumber: 17

@@ -861,3 +998,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 250,
lineNumber: 294,
columnNumber: 15

@@ -867,3 +1004,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 249,
lineNumber: 293,
columnNumber: 13

@@ -873,8 +1010,47 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 236,
lineNumber: 280,
columnNumber: 11
}, this)
}, void 0, false, {
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "ScrollContainer"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 312,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 311,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLDivElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 314,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 235,
lineNumber: 272,
columnNumber: 9

@@ -884,3 +1060,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 198,
lineNumber: 235,
columnNumber: 7

@@ -887,0 +1063,0 @@ }, this)]

103

lib/pattern-library/components/patterns/data/TablePage.js

@@ -366,15 +366,16 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/TablePage.tsx";

title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 13
}, this), " takes all standard props from the presentational component API."]
}, void 0, true, {
children: [_jsxDEV("code", {
children: "Table"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "stickyHeader",

@@ -387,3 +388,3 @@ children: [_jsxDEV(Library.Info, {

fileName: _jsxFileName,
lineNumber: 147,
lineNumber: 148,
columnNumber: 15

@@ -396,3 +397,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 151,
lineNumber: 152,
columnNumber: 17

@@ -402,3 +403,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 150,
lineNumber: 151,
columnNumber: 15

@@ -411,3 +412,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 154,
lineNumber: 155,
columnNumber: 17

@@ -417,3 +418,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 153,
lineNumber: 154,
columnNumber: 15

@@ -423,3 +424,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 146,
lineNumber: 147,
columnNumber: 13

@@ -442,3 +443,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 163,
lineNumber: 164,
columnNumber: 25

@@ -449,3 +450,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 166,
lineNumber: 167,
columnNumber: 25

@@ -455,3 +456,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 162,
lineNumber: 163,
columnNumber: 23

@@ -461,3 +462,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 161,
lineNumber: 162,
columnNumber: 21

@@ -470,3 +471,3 @@ }, this), _jsxDEV(TableBody, {

fileName: _jsxFileName,
lineNumber: 171,
lineNumber: 172,
columnNumber: 25

@@ -477,3 +478,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 172,
lineNumber: 173,
columnNumber: 25

@@ -483,3 +484,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 170,
lineNumber: 171,
columnNumber: 23

@@ -491,3 +492,3 @@ }, this), _jsxDEV(TableRow, {

fileName: _jsxFileName,
lineNumber: 178,
lineNumber: 179,
columnNumber: 25

@@ -498,3 +499,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 179,
lineNumber: 180,
columnNumber: 25

@@ -504,3 +505,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 177,
lineNumber: 178,
columnNumber: 23

@@ -512,3 +513,3 @@ }, this), _jsxDEV(TableRow, {

fileName: _jsxFileName,
lineNumber: 185,
lineNumber: 186,
columnNumber: 25

@@ -519,3 +520,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 186,
lineNumber: 187,
columnNumber: 25

@@ -525,3 +526,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 184,
lineNumber: 185,
columnNumber: 23

@@ -533,3 +534,3 @@ }, this), _jsxDEV(TableRow, {

fileName: _jsxFileName,
lineNumber: 194,
lineNumber: 195,
columnNumber: 25

@@ -540,3 +541,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 195,
lineNumber: 196,
columnNumber: 25

@@ -546,3 +547,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 193,
lineNumber: 194,
columnNumber: 23

@@ -554,3 +555,3 @@ }, this), _jsxDEV(TableRow, {

fileName: _jsxFileName,
lineNumber: 204,
lineNumber: 205,
columnNumber: 25

@@ -561,3 +562,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 205,
lineNumber: 206,
columnNumber: 25

@@ -567,3 +568,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 203,
lineNumber: 204,
columnNumber: 23

@@ -575,3 +576,3 @@ }, this), _jsxDEV(TableRow, {

fileName: _jsxFileName,
lineNumber: 212,
lineNumber: 213,
columnNumber: 25

@@ -582,3 +583,3 @@ }, this), _jsxDEV(TableCell, {

fileName: _jsxFileName,
lineNumber: 213,
lineNumber: 214,
columnNumber: 25

@@ -588,3 +589,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 211,
lineNumber: 212,
columnNumber: 23

@@ -594,3 +595,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 169,
lineNumber: 170,
columnNumber: 21

@@ -600,3 +601,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 160,
lineNumber: 161,
columnNumber: 19

@@ -606,3 +607,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 159,
lineNumber: 160,
columnNumber: 17

@@ -612,3 +613,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 158,
lineNumber: 159,
columnNumber: 15

@@ -618,3 +619,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 157,
lineNumber: 158,
columnNumber: 13

@@ -624,3 +625,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 145,
lineNumber: 146,
columnNumber: 11

@@ -786,3 +787,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 282,
lineNumber: 281,
columnNumber: 17

@@ -793,3 +794,3 @@ }, this), " accepts HTML attribute props applicable to", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 283,
lineNumber: 282,
columnNumber: 17

@@ -799,3 +800,3 @@ }, this), "."]

fileName: _jsxFileName,
lineNumber: 281,
lineNumber: 280,
columnNumber: 15

@@ -808,3 +809,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 286,
lineNumber: 285,
columnNumber: 17

@@ -814,3 +815,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 285,
lineNumber: 284,
columnNumber: 15

@@ -820,3 +821,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 280,
lineNumber: 279,
columnNumber: 13

@@ -826,3 +827,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 279,
lineNumber: 278,
columnNumber: 11

@@ -829,0 +830,0 @@ }, this)]

226

lib/pattern-library/components/patterns/data/ThumbnailPage.js

@@ -234,3 +234,10 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/data/ThumbnailPage.tsx";

columnNumber: 13
}, this), " takes all standard props from the composite component API."]
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this), "."]
}, void 0, true, {

@@ -249,3 +256,3 @@ fileName: _jsxFileName,

fileName: _jsxFileName,
lineNumber: 94,
lineNumber: 97,
columnNumber: 28

@@ -256,3 +263,3 @@ }, this), " with no visual border. Relative border size can be controlled with the", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 99,
columnNumber: 17

@@ -262,3 +269,3 @@ }, this), " prop."]

fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 96,
columnNumber: 15

@@ -271,3 +278,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 99,
lineNumber: 102,
columnNumber: 17

@@ -277,3 +284,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 101,
columnNumber: 15

@@ -286,3 +293,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 102,
lineNumber: 105,
columnNumber: 17

@@ -292,3 +299,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 101,
lineNumber: 104,
columnNumber: 15

@@ -298,3 +305,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 92,
lineNumber: 95,
columnNumber: 13

@@ -315,3 +322,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 110,
lineNumber: 113,
columnNumber: 21

@@ -321,3 +328,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 109,
lineNumber: 112,
columnNumber: 19

@@ -327,3 +334,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 108,
lineNumber: 111,
columnNumber: 17

@@ -336,3 +343,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 114,
lineNumber: 117,
columnNumber: 19

@@ -342,3 +349,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 113,
lineNumber: 116,
columnNumber: 17

@@ -348,3 +355,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 107,
lineNumber: 110,
columnNumber: 15

@@ -354,3 +361,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 106,
lineNumber: 109,
columnNumber: 13

@@ -360,3 +367,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 91,
lineNumber: 94,
columnNumber: 11

@@ -371,3 +378,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 122,
lineNumber: 125,
columnNumber: 15

@@ -380,3 +387,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 126,
lineNumber: 129,
columnNumber: 17

@@ -386,3 +393,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 125,
lineNumber: 128,
columnNumber: 15

@@ -395,3 +402,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 129,
lineNumber: 132,
columnNumber: 17

@@ -401,3 +408,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 128,
lineNumber: 131,
columnNumber: 15

@@ -407,3 +414,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 121,
lineNumber: 124,
columnNumber: 13

@@ -413,3 +420,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 120,
lineNumber: 123,
columnNumber: 11

@@ -427,3 +434,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 138,
lineNumber: 141,
columnNumber: 17

@@ -433,3 +440,3 @@ }, this), ")."]

fileName: _jsxFileName,
lineNumber: 136,
lineNumber: 139,
columnNumber: 15

@@ -442,3 +449,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 147,
lineNumber: 150,
columnNumber: 17

@@ -448,3 +455,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 146,
lineNumber: 149,
columnNumber: 15

@@ -457,3 +464,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 152,
lineNumber: 155,
columnNumber: 17

@@ -463,3 +470,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 151,
lineNumber: 154,
columnNumber: 15

@@ -469,3 +476,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 135,
lineNumber: 138,
columnNumber: 13

@@ -475,3 +482,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 134,
lineNumber: 137,
columnNumber: 11

@@ -487,3 +494,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 161,
lineNumber: 164,
columnNumber: 17

@@ -493,3 +500,3 @@ }, this), " is empty."]

fileName: _jsxFileName,
lineNumber: 159,
lineNumber: 162,
columnNumber: 15

@@ -502,3 +509,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 164,
lineNumber: 167,
columnNumber: 17

@@ -508,3 +515,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 163,
lineNumber: 166,
columnNumber: 15

@@ -514,3 +521,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 158,
lineNumber: 161,
columnNumber: 13

@@ -527,3 +534,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 171,
lineNumber: 174,
columnNumber: 21

@@ -533,3 +540,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 169,
lineNumber: 172,
columnNumber: 17

@@ -539,3 +546,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 168,
lineNumber: 171,
columnNumber: 15

@@ -545,3 +552,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 167,
lineNumber: 170,
columnNumber: 13

@@ -551,3 +558,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 157,
lineNumber: 160,
columnNumber: 11

@@ -562,3 +569,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 180,
lineNumber: 183,
columnNumber: 15

@@ -571,3 +578,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 184,
lineNumber: 187,
columnNumber: 17

@@ -578,3 +585,3 @@ }, this), " Any numeric string that can be used in a CSS", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 185,
lineNumber: 188,
columnNumber: 17

@@ -584,3 +591,3 @@ }, this), " expression"]

fileName: _jsxFileName,
lineNumber: 183,
lineNumber: 186,
columnNumber: 15

@@ -593,3 +600,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 188,
lineNumber: 191,
columnNumber: 17

@@ -599,3 +606,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 187,
lineNumber: 190,
columnNumber: 15

@@ -605,3 +612,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 179,
lineNumber: 182,
columnNumber: 13

@@ -620,3 +627,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 195,
lineNumber: 198,
columnNumber: 19

@@ -626,3 +633,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 194,
lineNumber: 197,
columnNumber: 17

@@ -632,3 +639,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 193,
lineNumber: 196,
columnNumber: 15

@@ -638,3 +645,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 192,
lineNumber: 195,
columnNumber: 13

@@ -644,3 +651,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 178,
lineNumber: 181,
columnNumber: 11

@@ -656,3 +663,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 204,
lineNumber: 207,
columnNumber: 53

@@ -664,3 +671,3 @@ }, this), ", its border, loading spinner and placeholder content. If you need more styling control, use", ' ', _jsxDEV(Library.Link, {

fileName: _jsxFileName,
lineNumber: 207,
lineNumber: 210,
columnNumber: 17

@@ -670,3 +677,3 @@ }, this), ' ', "directly."]

fileName: _jsxFileName,
lineNumber: 203,
lineNumber: 206,
columnNumber: 15

@@ -679,3 +686,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 213,
lineNumber: 216,
columnNumber: 17

@@ -685,3 +692,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 212,
lineNumber: 215,
columnNumber: 15

@@ -694,3 +701,3 @@ }, this), _jsxDEV(Library.InfoItem, {

fileName: _jsxFileName,
lineNumber: 216,
lineNumber: 219,
columnNumber: 17

@@ -700,3 +707,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 215,
lineNumber: 218,
columnNumber: 15

@@ -706,3 +713,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 202,
lineNumber: 205,
columnNumber: 13

@@ -723,3 +730,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 224,
lineNumber: 227,
columnNumber: 21

@@ -729,3 +736,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 223,
lineNumber: 226,
columnNumber: 19

@@ -735,3 +742,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 222,
lineNumber: 225,
columnNumber: 17

@@ -745,3 +752,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 229,
lineNumber: 232,
columnNumber: 19

@@ -751,3 +758,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 228,
lineNumber: 231,
columnNumber: 17

@@ -760,3 +767,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 233,
lineNumber: 236,
columnNumber: 19

@@ -766,3 +773,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 232,
lineNumber: 235,
columnNumber: 17

@@ -772,3 +779,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 221,
lineNumber: 224,
columnNumber: 15

@@ -778,3 +785,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 220,
lineNumber: 223,
columnNumber: 13

@@ -795,3 +802,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 242,
lineNumber: 245,
columnNumber: 21

@@ -801,3 +808,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 241,
lineNumber: 244,
columnNumber: 19

@@ -807,3 +814,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 240,
lineNumber: 243,
columnNumber: 17

@@ -817,3 +824,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 247,
lineNumber: 250,
columnNumber: 19

@@ -823,3 +830,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 246,
lineNumber: 249,
columnNumber: 17

@@ -832,3 +839,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 251,
lineNumber: 254,
columnNumber: 19

@@ -838,3 +845,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 250,
lineNumber: 253,
columnNumber: 17

@@ -844,3 +851,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 239,
lineNumber: 242,
columnNumber: 15

@@ -850,3 +857,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 238,
lineNumber: 241,
columnNumber: 13

@@ -867,3 +874,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 260,
lineNumber: 263,
columnNumber: 21

@@ -873,3 +880,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 259,
lineNumber: 262,
columnNumber: 19

@@ -879,3 +886,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 258,
lineNumber: 261,
columnNumber: 17

@@ -889,3 +896,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 265,
lineNumber: 268,
columnNumber: 19

@@ -895,3 +902,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 264,
lineNumber: 267,
columnNumber: 17

@@ -904,3 +911,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 269,
lineNumber: 272,
columnNumber: 19

@@ -910,3 +917,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 268,
lineNumber: 271,
columnNumber: 17

@@ -916,3 +923,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 257,
lineNumber: 260,
columnNumber: 15

@@ -922,3 +929,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 256,
lineNumber: 259,
columnNumber: 13

@@ -928,4 +935,43 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 201,
lineNumber: 204,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Thubmnail"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 17
}, this), " accepts HTML element attributes"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size' | 'loading' | 'placeholder'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 284,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 283,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 278,
columnNumber: 11
}, this)]

@@ -932,0 +978,0 @@ }, void 0, true, {

423

lib/pattern-library/components/patterns/input/CheckboxPage.js

@@ -37,5 +37,19 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/CheckboxPage.tsx";

withSource: true,
children: _jsxDEV(Checkbox, {
children: "Click me"
}, void 0, false, {
children: _jsxDEV("div", {
className: "flex flex-col",
children: [_jsxDEV(Checkbox, {
children: "Click me"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 15
}, this), _jsxDEV(Checkbox, {
disabled: true,
children: "Disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,

@@ -60,23 +74,45 @@ lineNumber: 26,

}, this), _jsxDEV(Library.Pattern, {
title: "Props",
title: "Working with Checkboxes",
children: [_jsxDEV(Library.Example, {
title: "checked",
title: "Controlled Checkboxes",
children: [_jsxDEV("p", {
children: ["When the ", _jsxDEV("code", {
children: ["The presence of a ", _jsxDEV("code", {
children: "checked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 22
}, this), " prop is present, ", _jsxDEV("code", {
lineNumber: 37,
columnNumber: 31
}, this), " prop will make the", ' ', _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 60
}, this), ' ', "will behave as a controlled component."]
lineNumber: 38,
columnNumber: 13
}, this), " behave as a controlled component. Consuming components should respond to the ", _jsxDEV("code", {
children: "onChange"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 46
}, this), " event."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 33,
lineNumber: 36,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Controlling a Checkbox with `checked`",
withSource: true,
children: _jsxDEV(Checkbox, {
checked: checked,
onChange: handleControlledChange,
children: "Controlled checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 11
}, this), _jsxDEV(Library.Code, {

@@ -97,24 +133,8 @@ content: `const [checked, setChecked] = useState(false);

size: "sm",
title: "Controlled Checkbox usage example"
title: "When the `checked prop` is present, Checkbox will behave as a controlled component"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 37,
lineNumber: 50,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Controlled Checkbox",
withSource: true,
children: _jsxDEV(Checkbox, {
checked: checked,
onChange: handleControlledChange,
children: "Controlled checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Don't forget to handle events for controlled Checkboxes",

@@ -129,3 +149,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 73,
columnNumber: 15

@@ -135,3 +155,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 64,
lineNumber: 72,
columnNumber: 13

@@ -141,3 +161,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 60,
lineNumber: 68,
columnNumber: 11

@@ -147,33 +167,28 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 32,
lineNumber: 35,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "defaultChecked",
title: "Customizing Checkbox icons",
children: [_jsxDEV("p", {
children: ["For uncontrolled ", _jsxDEV("code", {
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 30
}, this), "es,", ' ', _jsxDEV("code", {
children: "defaultChecked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 75,
lineNumber: 82,
columnNumber: 13
}, this), " sets initial checked state."]
}, this), " uses icons to style the checkbox, in unchecked and checked states. Custom icons may be provided if desired."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 81,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Uncontrolled Checkbox with defaultChecked",
withSource: true,
title: "Checkbox with custom icon and checkedIcon",
children: _jsxDEV(Checkbox, {
defaultChecked: true,
children: "Default checked"
icon: HideIcon,
checkedIcon: ShowIcon,
defaultChecked: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
lineNumber: 89,
columnNumber: 13

@@ -183,3 +198,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 77,
lineNumber: 85,
columnNumber: 11

@@ -189,32 +204,71 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 80,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "disabled",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "disabled"
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 34,
columnNumber: 7
}, this), _jsxDEV(Library.Pattern, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 9
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 9
}, this), ".", _jsxDEV(Library.Example, {
title: "checked",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set whether the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 31
}, this), " is checked. The presence of this component indicates that the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 49
}, this), " is being used as a controlled component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
lineNumber: 102,
columnNumber: 13
}, this), " styling reduces the opacity of the component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: [_jsxDEV(Checkbox, {
children: "Enabled"
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
lineNumber: 107,
columnNumber: 13
}, this), _jsxDEV(Checkbox, {
disabled: true,
children: "Disabled"
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `undefined`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
lineNumber: 110,
columnNumber: 13

@@ -224,44 +278,71 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 89,
lineNumber: 101,
columnNumber: 11
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 100,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "icon and checkedIcon",
children: [_jsxDEV("p", {
children: ["Custom icons may be used for styling checkboxes. Use the", ' ', _jsxDEV("code", {
children: "icon"
}, void 0, false, {
title: "defaultChecked",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Whether the ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 27
}, this), " is initially checked. For use when ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 119,
columnNumber: 20
}, this), " is an uncontrolled component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 117,
columnNumber: 13
}, this), " and ", _jsxDEV("code", {
children: "checkedIcon"
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 35
}, this), " props to set custom", ' ', _jsxDEV("code", {
children: "IconComponent"
lineNumber: 121,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
lineNumber: 124,
columnNumber: 13
}, this), "s to use for the unchecked and checked checkbox styling, respectively."]
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 116,
columnNumber: 11
}, this), _jsxDEV(Library.Demo, {
title: "Uncontrolled Checkbox with defaultChecked",
withSource: true,
children: _jsxDEV(Checkbox, {
icon: HideIcon,
checkedIcon: ShowIcon,
defaultChecked: true
defaultChecked: true,
children: "Default checked"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
lineNumber: 133,
columnNumber: 13

@@ -271,3 +352,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 102,
lineNumber: 129,
columnNumber: 11

@@ -277,70 +358,120 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 115,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "onChange",
children: [_jsxDEV("p", {
children: ["Any provided ", _jsxDEV("code", {
children: "onChange"
}, void 0, false, {
title: "icon",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 15
}, this), " to use as the (unchecked) checkbox icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 26
}, this), " function is invoked when there is a ", _jsxDEV("code", {
children: "change"
lineNumber: 138,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 15
}, this), " event on the checkbox ", _jsxDEV("code", {
children: "input"
}, void 0, false, {
lineNumber: 141,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 137,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "checkedIcon",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 15
}, this), " to use as the (checked) checkbox icon"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 57
}, this), " \u2014 in other words, it behaves just like a normal ", _jsxDEV("code", {
children: "onChange"
lineNumber: 148,
columnNumber: 13
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 152,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 56
}, this), ' ', "handler for an input."]
lineNumber: 151,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 108,
lineNumber: 147,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["Remember: ", _jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Checkbox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 15
}, this), " accepts HTML attributes for input elements"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 116,
columnNumber: 23
}, this), " accepts any valid", ' ', _jsxDEV("code", {
children: "HTMLInput"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 117,
lineNumber: 158,
columnNumber: 13
}, this), " attribute. You can also use", ' ', _jsxDEV("code", {
children: "onClick"
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLInputElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
lineNumber: 161,
columnNumber: 13
}, this), ", ", _jsxDEV("code", {
children: "onInput"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 118,
columnNumber: 35
}, this), ", etc."]
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 115,
lineNumber: 157,
columnNumber: 11
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
lineNumber: 156,
columnNumber: 9

@@ -350,3 +481,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 31,
lineNumber: 94,
columnNumber: 7

@@ -353,0 +484,0 @@ }, this)]

259

lib/pattern-library/components/patterns/input/InputGroupPage.js

@@ -8,17 +8,17 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/InputGroupPage.tsx";

title: "InputGroup",
children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 13
}, this), " is a presentational component that provides layout for groups of input components."]
}, void 0, true, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
lineNumber: 18,
columnNumber: 11
}, this),
children: _jsxDEV(Library.Pattern, {
}, this), " is a presentational component that provides layout and styling for groups of input components."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 9
}, this),
children: _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.Pattern, {
children: [_jsxDEV(Library.Usage, {

@@ -28,7 +28,7 @@ componentName: "InputGroup"

fileName: _jsxFileName,
lineNumber: 24,
lineNumber: 25,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV(Library.Demo, {
title: "Basic InputGroup with an Input and an IconButton",
children: _jsxDEV(Library.Demo, {
title: "Basic InputGroup containing an Input and an IconButton",
withSource: true,

@@ -42,3 +42,3 @@ children: _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 32,
lineNumber: 33,
columnNumber: 19

@@ -51,3 +51,3 @@ }, this), _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 33,
lineNumber: 34,
columnNumber: 19

@@ -57,3 +57,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 31,
lineNumber: 32,
columnNumber: 17

@@ -63,3 +63,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 30,
lineNumber: 31,
columnNumber: 15

@@ -69,4 +69,72 @@ }, this)

fileName: _jsxFileName,
lineNumber: 26,
lineNumber: 27,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 24,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Working with InputGroups",
children: [_jsxDEV(Library.Example, {
title: "Composing InputGroups",
children: [_jsxDEV("p", {
children: ["The following input components can be used in an", ' ', _jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 15
}, this), ":"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: _jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "IconButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 51,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {

@@ -84,3 +152,3 @@ title: "Select and IconButton components in InputGroup",

fileName: _jsxFileName,
lineNumber: 44,
lineNumber: 64,
columnNumber: 19

@@ -93,3 +161,3 @@ }, this), _jsxDEV(Select, {

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 70,
columnNumber: 21

@@ -101,3 +169,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 51,
lineNumber: 71,
columnNumber: 21

@@ -109,3 +177,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 72,
columnNumber: 21

@@ -117,3 +185,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 53,
lineNumber: 73,
columnNumber: 21

@@ -123,3 +191,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 69,
columnNumber: 19

@@ -132,3 +200,3 @@ }, this), _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 55,
lineNumber: 75,
columnNumber: 19

@@ -138,3 +206,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 43,
lineNumber: 63,
columnNumber: 17

@@ -144,3 +212,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 42,
lineNumber: 62,
columnNumber: 15

@@ -150,3 +218,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 38,
lineNumber: 58,
columnNumber: 13

@@ -156,19 +224,8 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 25,
lineNumber: 42,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Scaling InputGroup size",
children: [_jsxDEV("p", {
children: ["This example demonstrates ", _jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 41
}, this), " inputs scaling to the local font size."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Sizing InputGroups",
children: _jsxDEV(Library.Demo, {
title: "Scaling to local font size",
withSource: true,

@@ -184,3 +241,3 @@ children: _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 89,
columnNumber: 21

@@ -194,3 +251,3 @@ }, this), _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 75,
lineNumber: 90,
columnNumber: 21

@@ -200,3 +257,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 88,
columnNumber: 19

@@ -206,3 +263,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 87,
columnNumber: 17

@@ -212,3 +269,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 86,
columnNumber: 15

@@ -218,42 +275,58 @@ }, this)

fileName: _jsxFileName,
lineNumber: 70,
lineNumber: 85,
columnNumber: 13
}, this)]
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
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: 106,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 104,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Group-able Inputs",
children: [_jsxDEV("p", {
children: ["The following input components are supported by", ' ', _jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 15
}, this), ":"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: _jsxDEV("code", {
children: "Input"
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "InputGroup"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 114,
columnNumber: 17
}, this)
}, void 0, false, {
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
lineNumber: 113,
columnNumber: 15
}, this), _jsxDEV("li", {
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "IconButton"
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 117,
columnNumber: 17

@@ -263,25 +336,13 @@ }, this)

fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 116,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
lineNumber: 112,
columnNumber: 13
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 111,
columnNumber: 11

@@ -291,8 +352,8 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 23,
lineNumber: 103,
columnNumber: 9
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 15,
lineNumber: 23,
columnNumber: 7

@@ -299,0 +360,0 @@ }, this)

312

lib/pattern-library/components/patterns/input/InputPage.js

@@ -15,3 +15,9 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/InputPage.tsx";

columnNumber: 11
}, this), " styles text inputs."]
}, this), " is a presentational component for styling textual", ' ', _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 11,
columnNumber: 11
}, this), " elements."]
}, void 0, true, {

@@ -23,21 +29,2 @@ fileName: _jsxFileName,

children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 13
}, this), " is a presentational component for styling textual", ' ', _jsxDEV("code", {
children: "input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 18,
columnNumber: 13
}, this), " elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -48,3 +35,3 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 23,
lineNumber: 17,
columnNumber: 11

@@ -62,3 +49,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 28,
lineNumber: 22,
columnNumber: 17

@@ -68,3 +55,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 27,
lineNumber: 21,
columnNumber: 15

@@ -74,3 +61,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 26,
lineNumber: 20,
columnNumber: 13

@@ -80,5 +67,12 @@ }, this)

fileName: _jsxFileName,
lineNumber: 25,
lineNumber: 19,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 16,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Working with Inputs",
children: [_jsxDEV(Library.Example, {
title: "Accessibility",

@@ -90,3 +84,3 @@ children: [_jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 40,
lineNumber: 36,
columnNumber: 15

@@ -97,3 +91,3 @@ }, this), " have either an associated ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 40,
lineNumber: 36,
columnNumber: 60

@@ -104,3 +98,3 @@ }, this), ' ', "element or an ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 41,
lineNumber: 37,
columnNumber: 29

@@ -110,3 +104,3 @@ }, this), " attribute."]

fileName: _jsxFileName,
lineNumber: 37,
lineNumber: 33,
columnNumber: 13

@@ -124,3 +118,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 46,
lineNumber: 42,
columnNumber: 17

@@ -132,3 +126,3 @@ }, this), _jsxDEV(Input, {

fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 45,
columnNumber: 17

@@ -138,3 +132,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 45,
lineNumber: 41,
columnNumber: 15

@@ -144,3 +138,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 44,
lineNumber: 40,
columnNumber: 13

@@ -150,13 +144,6 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 36,
lineNumber: 32,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 22,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV(Library.Example, {
title: "type",
}, this), _jsxDEV(Library.Example, {
title: "Disabled inputs",
children: [_jsxDEV("p", {

@@ -167,46 +154,91 @@ children: [_jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 58,
lineNumber: 51,
columnNumber: 15
}, this), " currently supports the following", ' ', _jsxDEV("code", {
children: "type"
}, this), "s can be disabled by applying the HTML", ' ', _jsxDEV("code", {
children: "disabled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
lineNumber: 52,
columnNumber: 15
}, this), " values:"]
}, this), " attribute."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 57,
lineNumber: 50,
columnNumber: 13
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "text"
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Input, {
"aria-label": "Example input",
placeholder: "Placeholder...",
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 63,
lineNumber: 56,
columnNumber: 17
}, this), " (default)"]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
lineNumber: 55,
columnNumber: 15
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "url"
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "hasError",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set ", _jsxDEV("code", {
children: "hasError"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 17
}, this)
}, void 0, false, {
lineNumber: 75,
columnNumber: 21
}, this), " to indicate that there is an associated error for the ", _jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 76,
columnNumber: 42
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 74,
columnNumber: 15
}, this), _jsxDEV("li", {
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "email"
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 69,
lineNumber: 79,
columnNumber: 17

@@ -216,10 +248,11 @@ }, this)

fileName: _jsxFileName,
lineNumber: 68,
lineNumber: 78,
columnNumber: 15
}, this), _jsxDEV("li", {
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "text"
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 82,
columnNumber: 17

@@ -229,3 +262,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 81,
columnNumber: 15

@@ -235,29 +268,4 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 61,
lineNumber: 73,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "hasError",
children: [_jsxDEV("p", {
children: ["Set ", _jsxDEV("code", {
children: "hasError"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 19
}, this), " to indicate that there is an associated error for the ", _jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 29
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {

@@ -273,3 +281,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 84,
lineNumber: 88,
columnNumber: 17

@@ -279,3 +287,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 83,
lineNumber: 87,
columnNumber: 15

@@ -285,3 +293,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 82,
lineNumber: 86,
columnNumber: 13

@@ -291,27 +299,50 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 77,
lineNumber: 72,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "disabled",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(Input, {
"aria-label": "Example input",
placeholder: "Disabled...",
disabled: true
title: "type",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 99,
columnNumber: 17
}, this), " supports several input types"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'text' | 'url' | 'email' | 'search'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 101,
columnNumber: 15
}, this)
}, void 0, false, {
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'text'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 94,
lineNumber: 97,
columnNumber: 13

@@ -321,8 +352,47 @@ }, this)

fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 96,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 112,
columnNumber: 17
}, this), " accepts HTML attributes for input elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 111,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLInputElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 55,
lineNumber: 66,
columnNumber: 9

@@ -332,3 +402,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 14,
lineNumber: 15,
columnNumber: 7

@@ -335,0 +405,0 @@ }, this)

66

lib/pattern-library/components/patterns/input/OptionButtonPage.js

@@ -382,67 +382,13 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/OptionButtonPage.tsx";

}, this), _jsxDEV(Library.InfoItem, {
label: "props",
children: ["All ", _jsxDEV("code", {
children: "Button"
label: "type",
children: _jsxDEV("code", {
children: `Omit<ButtonProps, 'size' | 'unstyled' | 'classes' | 'variant'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 21
}, this), " props except styling API props:", _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: _jsxDEV("code", {
children: "classes"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 19
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "unstyled"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 129,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 19
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "variant"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 19
}, this), _jsxDEV("li", {
children: _jsxDEV("code", {
children: "size"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 21
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 19
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 17
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 122,
lineNumber: 123,
columnNumber: 15

@@ -449,0 +395,0 @@ }, this)]

283

lib/pattern-library/components/patterns/input/SelectPage.js

@@ -80,27 +80,2 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/input/SelectPage.tsx";

children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 13
}, this), " styles ", _jsxDEV("code", {
children: '<select>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 40
}, this), " elements. Note that ", _jsxDEV("code", {
children: '<option>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 18
}, this), " elements, with a few browser-specific exceptions, cannot be styled with CSS."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -111,6 +86,6 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 45,
lineNumber: 37,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV(Library.Demo, {
children: _jsxDEV(Library.Demo, {
title: "Basic Select",

@@ -126,3 +101,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 51,
lineNumber: 43,
columnNumber: 19

@@ -134,3 +109,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 44,
columnNumber: 19

@@ -142,3 +117,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 53,
lineNumber: 45,
columnNumber: 19

@@ -150,3 +125,3 @@ }, this), _jsxDEV("option", {

fileName: _jsxFileName,
lineNumber: 54,
lineNumber: 46,
columnNumber: 19

@@ -156,3 +131,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 42,
columnNumber: 17

@@ -162,3 +137,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 41,
columnNumber: 15

@@ -168,26 +143,43 @@ }, this)

fileName: _jsxFileName,
lineNumber: 48,
lineNumber: 40,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Setting Select width",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(SelectWrapper, {
"aria-label": "Example input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 61,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 15
}, this)
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 36,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Working with Selects",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 59,
lineNumber: 55,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
}, this), " styles ", _jsxDEV("code", {
children: '<select>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 40
}, this), " elements. Note that ", _jsxDEV("code", {
children: '<option>'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 18
}, this), " elements, with a few browser-specific exceptions, cannot be styled with CSS."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 54,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Composing and styling Selects",
children: [_jsxDEV(Library.Demo, {
title: "Select in an InputGroup",

@@ -204,3 +196,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 68,
lineNumber: 63,
columnNumber: 19

@@ -211,3 +203,3 @@ }, this), _jsxDEV(SelectWrapper, {

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 68,
columnNumber: 19

@@ -220,3 +212,3 @@ }, this), _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 69,
columnNumber: 19

@@ -226,3 +218,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 67,
lineNumber: 62,
columnNumber: 17

@@ -232,3 +224,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 66,
lineNumber: 61,
columnNumber: 15

@@ -238,29 +230,131 @@ }, this)

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 60,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Setting Select width",
withSource: true,
children: _jsxDEV("div", {
className: "w-[250px]",
children: _jsxDEV(SelectWrapper, {
"aria-label": "Example input"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 79,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 78,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 47,
lineNumber: 59,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Disabled Selects",
children: _jsxDEV(Library.Demo, {
title: "disabled Select",
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(SelectWrapper, {
"aria-label": "Example input",
disabled: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 44,
lineNumber: 53,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV(Library.Example, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "hasError",
children: [_jsxDEV("p", {
children: ["Set ", _jsxDEV("code", {
children: "hasError"
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Set ", _jsxDEV("code", {
children: "hasError"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 21
}, this), " to indicate that there is an associated error for the ", _jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 42
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 19
}, this), " to indicate that there is an associated error."]
lineNumber: 105,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 87,
lineNumber: 100,
columnNumber: 13

@@ -276,3 +370,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 115,
columnNumber: 17

@@ -282,3 +376,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 92,
lineNumber: 114,
columnNumber: 15

@@ -288,3 +382,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 91,
lineNumber: 113,
columnNumber: 13

@@ -294,26 +388,37 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 99,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "disabled",
children: _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV("div", {
className: "w-[350px]",
children: _jsxDEV(SelectWrapper, {
"aria-label": "Example input",
disabled: true
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Select"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
lineNumber: 122,
columnNumber: 17
}, this), " accepts HTML attributes for select elements."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 121,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLSelectElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
lineNumber: 124,
columnNumber: 15
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 99,
lineNumber: 120,
columnNumber: 13

@@ -323,3 +428,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 98,
lineNumber: 119,
columnNumber: 11

@@ -329,3 +434,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 93,
columnNumber: 9

@@ -332,0 +437,0 @@ }, this)]

203

lib/pattern-library/components/patterns/layout/OverlayPage.js

@@ -23,3 +23,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/OverlayPage.tsx";

columnNumber: 11
}, this), " styles full-screen backdrops for use during loading or as a modal backdrop."]
}, this), " is a presentational component that styles full-screen backdrops for use during loading or as a modal backdrop."]
}, void 0, true, {

@@ -32,15 +32,2 @@ fileName: _jsxFileName,

title: "Overlay",
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 13
}, this), " is a presentational component to render a backdrop."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -51,3 +38,3 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 36,
lineNumber: 28,
columnNumber: 11

@@ -63,3 +50,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 39,
lineNumber: 31,
columnNumber: 15

@@ -75,3 +62,3 @@ }, this), _jsxDEV(Overlay, {

fileName: _jsxFileName,
lineNumber: 42,
lineNumber: 34,
columnNumber: 19

@@ -81,3 +68,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 41,
lineNumber: 33,
columnNumber: 17

@@ -87,3 +74,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 40,
lineNumber: 32,
columnNumber: 15

@@ -93,3 +80,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 38,
lineNumber: 30,
columnNumber: 13

@@ -99,3 +86,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 37,
lineNumber: 29,
columnNumber: 11

@@ -105,10 +92,68 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 35,
lineNumber: 27,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV(Library.Example, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "variant",
children: [_jsxDEV(Library.Demo, {
title: "variant: 'dark' (default)",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Define which theme to use for the ", _jsxDEV("code", {
children: "Overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 51
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `{'dark' | 'light'}`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 53,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 52,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'dark'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 56,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 55,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 48,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "dark",
withSource: true,

@@ -120,3 +165,3 @@ children: [_jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 60,
columnNumber: 15

@@ -132,3 +177,3 @@ }, this), _jsxDEV(Overlay, {

fileName: _jsxFileName,
lineNumber: 54,
lineNumber: 62,
columnNumber: 17

@@ -138,3 +183,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 53,
lineNumber: 61,
columnNumber: 15

@@ -144,6 +189,6 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 51,
lineNumber: 59,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "variant: 'light'",
title: "light",
withSource: true,

@@ -155,3 +200,3 @@ children: [_jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 59,
lineNumber: 67,
columnNumber: 15

@@ -166,3 +211,3 @@ }, this), _jsxDEV(Overlay, {

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 73,
columnNumber: 17

@@ -172,3 +217,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 60,
lineNumber: 68,
columnNumber: 15

@@ -178,3 +223,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 58,
lineNumber: 66,
columnNumber: 13

@@ -184,29 +229,44 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 47,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "open",
children: _jsxDEV("p", {
children: ["Control whether an ", _jsxDEV("code", {
children: "Overlay"
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Set whether the overlay is open (visible) or not."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 34
}, this), " is rendered or not by setting the ", _jsxDEV("code", {
children: "open"
lineNumber: 79,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 27
}, this), " boolean prop (default", ' ', _jsxDEV("code", {
children: "true"
lineNumber: 82,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'true'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 85,
columnNumber: 15
}, this), "). Reference other examples on this page."]
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 78,
columnNumber: 13

@@ -216,8 +276,47 @@ }, this)

fileName: _jsxFileName,
lineNumber: 70,
lineNumber: 77,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Overlay"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 41,
columnNumber: 9

@@ -224,0 +323,0 @@ }, this)]

637

lib/pattern-library/components/patterns/layout/PanelPage.js

@@ -18,3 +18,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/layout/PanelPage.tsx";

columnNumber: 11
}, this), " can be used to create panel-like interfaces. For more nuanced control, use ", _jsxDEV("code", {
}, this), " is a composite component that can be used to create panel-like interfaces. For more nuanced control, use ", _jsxDEV("code", {
children: "Card"

@@ -24,4 +24,4 @@ }, void 0, false, {

lineNumber: 13,
columnNumber: 37
}, this), " and its allies."]
columnNumber: 64
}, this), ' ', "and its allies."]
}, void 0, true, {

@@ -33,15 +33,2 @@ fileName: _jsxFileName,

children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 13
}, this), " is a composite component for standardized panel layouts."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -52,24 +39,6 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 26,
lineNumber: 20,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV("p", {
children: ["All ", _jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 19
}, this), "s have a ", _jsxDEV("code", {
children: "title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 46
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
children: _jsxDEV(Library.Demo, {
title: "Basic Panel",

@@ -82,3 +51,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 32,
lineNumber: 23,
columnNumber: 15

@@ -88,11 +57,18 @@ }, this)

fileName: _jsxFileName,
lineNumber: 31,
lineNumber: 22,
columnNumber: 13
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 27,
lineNumber: 21,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Scrolling long content",
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 19,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Working with Panels",
children: _jsxDEV(Library.Example, {
title: "Scrolling content",
children: [_jsxDEV("p", {

@@ -103,3 +79,3 @@ children: ["If a ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 41,
lineNumber: 34,
columnNumber: 20

@@ -110,3 +86,3 @@ }, this), " is a direct child of an element with a height constraint and the ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 42,
lineNumber: 35,
columnNumber: 41

@@ -116,5 +92,6 @@ }, this), " prop is set, its content will scroll if it exceeds the available height. Header and buttons do not scroll."]

fileName: _jsxFileName,
lineNumber: 40,
lineNumber: 33,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Scrolling content with `scrollable` prop",
withSource: true,

@@ -130,3 +107,3 @@ children: _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 53,
lineNumber: 49,
columnNumber: 23

@@ -137,3 +114,3 @@ }, this), _jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 54,
lineNumber: 50,
columnNumber: 23

@@ -145,3 +122,3 @@ }, this), _jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 55,
lineNumber: 51,
columnNumber: 23

@@ -153,3 +130,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 60,
lineNumber: 56,
columnNumber: 19

@@ -159,3 +136,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 49,
lineNumber: 45,
columnNumber: 17

@@ -165,3 +142,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 48,
lineNumber: 44,
columnNumber: 15

@@ -171,18 +148,18 @@ }, this)

fileName: _jsxFileName,
lineNumber: 47,
lineNumber: 40,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 39,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "Scrolling certain content",
children: [_jsxDEV("p", {
children: "It is also possible to scroll some of the content of a Panel but not all of it."
}, void 0, false, {
}, this), _jsxDEV("p", {
children: ["More control can be achieved by using ", _jsxDEV("code", {
children: "ScrollBox"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 62,
columnNumber: 53
}, this), " or other scrolling components instead."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
lineNumber: 61,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Scrolling certain content",
withSource: true,

@@ -198,3 +175,3 @@ children: _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 78,
lineNumber: 72,
columnNumber: 23

@@ -205,3 +182,3 @@ }, this), _jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 79,
lineNumber: 73,
columnNumber: 23

@@ -213,3 +190,3 @@ }, this), _jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 80,
lineNumber: 74,
columnNumber: 23

@@ -222,3 +199,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 84,
lineNumber: 78,
columnNumber: 19

@@ -228,3 +205,3 @@ }, this), _jsxDEV(ScrollBox, {

fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 80,
columnNumber: 21

@@ -234,3 +211,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 79,
columnNumber: 19

@@ -240,3 +217,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 68,
columnNumber: 17

@@ -246,3 +223,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 67,
columnNumber: 15

@@ -252,3 +229,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 66,
columnNumber: 13

@@ -258,35 +235,129 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 66,
lineNumber: 32,
columnNumber: 11
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 25,
lineNumber: 31,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV(Library.Example, {
title: "onClose",
children: [_jsxDEV("p", {
children: ["Provide a function to ", _jsxDEV("code", {
children: "onClose"
title: "Component API",
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 11
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#composite-components-api",
children: "composite component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "title",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Panel title"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 37
}, this), " to render a close button."]
lineNumber: 96,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `string`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 99,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "required",
children: _jsxDEV("code", {
children: "true"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 102,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 96,
lineNumber: 95,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "buttons",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "ComponentChildren"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 110,
columnNumber: 17
}, this), " to render as available actions in the panel."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 109,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `preact.ComponentChildren`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 114,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with close button",
title: "Panel with buttons",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
onClose: () => alert('you clicked it'),
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 123,
columnNumber: 21
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 21
}, this)]
}, void 0, true),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
lineNumber: 119,
columnNumber: 15

@@ -296,3 +367,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 100,
lineNumber: 118,
columnNumber: 13

@@ -302,27 +373,110 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 107,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "icon",
children: [_jsxDEV("p", {
children: ["An ", _jsxDEV("code", {
children: "IconComponent"
title: "fullWidthHeader",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Make the header and its bottom border stretch the full width of the panel."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 18
}, this), " provided to the ", _jsxDEV("code", {
children: "icon"
lineNumber: 135,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 140,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 61
}, this), ' ', "prop will be rendered to the left of the title."]
lineNumber: 139,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 143,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 142,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 112,
lineNumber: 134,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with fullWidthHeader",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel with full-width header",
fullWidthHeader: true,
children: _jsxDEV(LoremIpsum, {
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 149,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 147,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 133,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "icon",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["An ", _jsxDEV("code", {
children: "IconComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 156,
columnNumber: 20
}, this), " to render in the panel header."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 155,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `IconComponent`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 154,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with icon",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",

@@ -333,3 +487,3 @@ icon: EditIcon,

fileName: _jsxFileName,
lineNumber: 117,
lineNumber: 164,
columnNumber: 15

@@ -339,3 +493,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 116,
lineNumber: 163,
columnNumber: 13

@@ -345,48 +499,42 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 111,
lineNumber: 153,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "buttons",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "ComponentChildren"
title: "onClose",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Render a close button and invoke this callback function when it is clicked."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
lineNumber: 172,
columnNumber: 15
}, this), " passed to the ", _jsxDEV("code", {
children: "buttons"
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `() => void`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 60
}, this), ' ', "prop will be rendered as actions in the panel."]
lineNumber: 176,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
lineNumber: 171,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Panel with close button",
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel title",
buttons: _jsxDEV(_Fragment, {
children: [_jsxDEV(Button, {
children: "Cancel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 134,
columnNumber: 21
}, this), _jsxDEV(Button, {
variant: "primary",
children: "Do it"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 135,
columnNumber: 21
}, this)]
}, void 0, true),
onClose: () => alert('you clicked it'),
children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 130,
lineNumber: 182,
columnNumber: 15

@@ -396,3 +544,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 129,
lineNumber: 181,
columnNumber: 13

@@ -402,17 +550,44 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 124,
lineNumber: 170,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "paddingSize",
children: [_jsxDEV("p", {
children: ["This sizing prop defines how much padding will be used around the Panel content. Set to ", _jsxDEV("code", {
children: "none"
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Determine how much padding is used around the content in the panel."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 37
}, this), " to turn off padding (background colors are set here to help show effect of padding)."]
lineNumber: 193,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'sm' | 'md' | 'lg' | 'none'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 198,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `'md'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 146,
lineNumber: 192,
columnNumber: 13

@@ -427,6 +602,6 @@ }, this), _jsxDEV(Library.Demo, {

children: _jsxDEV(LoremIpsum, {
size: "sm"
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 154,
lineNumber: 208,
columnNumber: 19

@@ -436,3 +611,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 153,
lineNumber: 207,
columnNumber: 17

@@ -442,3 +617,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 152,
lineNumber: 206,
columnNumber: 15

@@ -448,3 +623,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 151,
lineNumber: 205,
columnNumber: 13

@@ -454,3 +629,3 @@ }, this), _jsxDEV(Library.Demo, {

children: _jsxDEV(Panel, {
title: "paddingSize: 'md' (default)",
title: "paddingSize: 'md'",
paddingSize: "md",

@@ -460,6 +635,6 @@ children: _jsxDEV("div", {

children: _jsxDEV(LoremIpsum, {
size: "sm"
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 162,
lineNumber: 216,
columnNumber: 19

@@ -469,3 +644,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 161,
lineNumber: 215,
columnNumber: 17

@@ -475,3 +650,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 160,
lineNumber: 214,
columnNumber: 15

@@ -481,3 +656,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 159,
lineNumber: 213,
columnNumber: 13

@@ -492,6 +667,6 @@ }, this), _jsxDEV(Library.Demo, {

children: _jsxDEV(LoremIpsum, {
size: "sm"
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 170,
lineNumber: 224,
columnNumber: 19

@@ -501,3 +676,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 169,
lineNumber: 223,
columnNumber: 17

@@ -507,3 +682,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 168,
lineNumber: 222,
columnNumber: 15

@@ -513,3 +688,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 167,
lineNumber: 221,
columnNumber: 13

@@ -525,6 +700,6 @@ }, this), _jsxDEV(Library.Demo, {

children: _jsxDEV(LoremIpsum, {
size: "sm"
size: "xs"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 178,
lineNumber: 232,
columnNumber: 19

@@ -534,3 +709,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 177,
lineNumber: 231,
columnNumber: 17

@@ -540,3 +715,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 176,
lineNumber: 230,
columnNumber: 15

@@ -546,3 +721,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 175,
lineNumber: 229,
columnNumber: 13

@@ -552,28 +727,27 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 145,
lineNumber: 191,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "fullWidthHeader",
children: [_jsxDEV("p", {
children: ["This boolean prop (default ", _jsxDEV("code", {
children: "false"
}, void 0, false, {
title: "scrollable",
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: ["Make the content in the panel scroll if the panel exceeds height constraints. All scrollable panels have a", ' ', _jsxDEV("code", {
children: "fullWidthHeader"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 17
}, this), " to align with scroll-shadow hints."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 186,
columnNumber: 42
}, this), ") determines whether the header of the Panel and its bottom border stretches the full width of the Panel."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 185,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
withSource: true,
children: _jsxDEV(Panel, {
title: "Panel with full-width header",
fullWidthHeader: true,
children: _jsxDEV(LoremIpsum, {
size: "sm"
lineNumber: 239,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `boolean`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
lineNumber: 245,
columnNumber: 17

@@ -583,27 +757,21 @@ }, this)

fileName: _jsxFileName,
lineNumber: 191,
lineNumber: 244,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 190,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 184,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "scrollable",
children: [_jsxDEV("p", {
children: ["This boolean prop (default ", _jsxDEV("code", {
children: "false"
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: `false`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 248,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 42
}, this), ") determines whether content will scroll if it exceeds height constraints. Scrollable Panels have a full-width header so that scrolling shadow hints", ' ', "don't", " look funky."]
lineNumber: 247,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 198,
lineNumber: 238,
columnNumber: 13

@@ -621,3 +789,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 210,
lineNumber: 258,
columnNumber: 23

@@ -629,3 +797,3 @@ }, this), _jsxDEV(Button, {

fileName: _jsxFileName,
lineNumber: 211,
lineNumber: 259,
columnNumber: 23

@@ -639,3 +807,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 216,
lineNumber: 264,
columnNumber: 19

@@ -645,3 +813,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 206,
lineNumber: 254,
columnNumber: 17

@@ -651,3 +819,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 205,
lineNumber: 253,
columnNumber: 15

@@ -657,3 +825,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 204,
lineNumber: 252,
columnNumber: 13

@@ -663,8 +831,47 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 197,
lineNumber: 237,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "Panel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 271,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `JSX.HTMLAttributes<HTMLElement>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
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: 94,
lineNumber: 88,
columnNumber: 9

@@ -674,3 +881,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 17,
lineNumber: 18,
columnNumber: 7

@@ -677,0 +884,0 @@ }, this)

223

lib/pattern-library/components/patterns/navigation/PointerButtonPage.js

@@ -17,3 +17,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/PointerButtonPage.tsx";

columnNumber: 13
}, this), " is a component for styling a button that points towards a group of items elsewhere in the UI or off-screen. They are specifically used to indicate and navigate to \"buckets\" (groups of annotations that are near each other in document content) in the Hypothesis client."]
}, this), " is a presentational component for styling a button that points towards a group of items elsewhere in the UI or off-screen. They are specifically used to indicate and navigate to \"buckets\" (groups of annotations that are near each other in document content) in the Hypothesis client."]
}, void 0, true, {

@@ -32,15 +32,2 @@ fileName: _jsxFileName,

children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 13
}, this), " is a presentational component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 27,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -51,7 +38,7 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 33,
lineNumber: 27,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
children: [_jsxDEV(Library.Demo, {
title: "PointerButton directions 'up', 'down', 'left'",
children: _jsxDEV(Library.Demo, {
title: "Basic PointerButtons",
withSource: true,

@@ -63,3 +50,3 @@ children: [_jsxDEV(PointerButton, {

fileName: _jsxFileName,
lineNumber: 39,
lineNumber: 30,
columnNumber: 15

@@ -71,3 +58,3 @@ }, this), _jsxDEV(PointerButton, {

fileName: _jsxFileName,
lineNumber: 40,
lineNumber: 31,
columnNumber: 15

@@ -79,3 +66,3 @@ }, this), _jsxDEV(PointerButton, {

fileName: _jsxFileName,
lineNumber: 41,
lineNumber: 32,
columnNumber: 15

@@ -85,5 +72,19 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 35,
lineNumber: 29,
columnNumber: 13
}, this), _jsxDEV("p", {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 26,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Working with PointerButtons",
children: _jsxDEV(Library.Example, {
title: "PointerButtons in context",
children: [_jsxDEV("p", {
children: ["The following example shows ", _jsxDEV("code", {

@@ -93,3 +94,3 @@ children: "PointerButtons"

fileName: _jsxFileName,
lineNumber: 45,
lineNumber: 39,
columnNumber: 43

@@ -99,3 +100,3 @@ }, this), " as they might appear in the client, positioned absolutely in a", ' ', '"bucket bar"', "."]

fileName: _jsxFileName,
lineNumber: 44,
lineNumber: 38,
columnNumber: 13

@@ -119,3 +120,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 57,
lineNumber: 50,
columnNumber: 21

@@ -125,3 +126,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 53,
lineNumber: 46,
columnNumber: 19

@@ -138,3 +139,3 @@ }, this), _jsxDEV("li", {

fileName: _jsxFileName,
lineNumber: 64,
lineNumber: 57,
columnNumber: 21

@@ -144,3 +145,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 60,
lineNumber: 53,
columnNumber: 19

@@ -157,3 +158,3 @@ }, this), _jsxDEV("li", {

fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 64,
columnNumber: 21

@@ -163,3 +164,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 67,
lineNumber: 60,
columnNumber: 19

@@ -176,3 +177,3 @@ }, this), _jsxDEV("li", {

fileName: _jsxFileName,
lineNumber: 78,
lineNumber: 71,
columnNumber: 21

@@ -182,3 +183,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 67,
columnNumber: 19

@@ -188,3 +189,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 45,
columnNumber: 17

@@ -194,3 +195,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 51,
lineNumber: 44,
columnNumber: 15

@@ -200,3 +201,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 50,
lineNumber: 43,
columnNumber: 13

@@ -206,49 +207,51 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 34,
lineNumber: 37,
columnNumber: 11
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 32,
lineNumber: 36,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 13
}, this), " also takes common", ' ', _jsxDEV("a", {
href: "./input-button",
children: _jsxDEV("code", {
children: "ButtonBase"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 89,
columnNumber: 13
}, this), ' ', "props."]
}, void 0, true, {
title: "Component API",
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
lineNumber: 80,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
}, this), " accepts all standard", ' ', _jsxDEV(Library.Link, {
href: "/using-components#presentational-components-api",
children: "presentational component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 11
}, this), ".", _jsxDEV(Library.Example, {
title: "direction",
children: [_jsxDEV("p", {
children: ["The ", _jsxDEV("code", {
children: "direction"
children: [_jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: "Direction the button should point. If not provided, the button will be a round lozenge."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 19
}, this), " prop is not required. When not provided, the button will not point in any direction but instead will be lozenge-shaped. This pattern is not used anywhere currently."]
lineNumber: 87,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `'up' | 'down' | 'left'`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 86,
columnNumber: 13

@@ -262,3 +265,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 102,
lineNumber: 97,
columnNumber: 15

@@ -268,3 +271,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 101,
lineNumber: 96,
columnNumber: 13

@@ -276,3 +279,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 106,
lineNumber: 101,
columnNumber: 19

@@ -282,3 +285,3 @@ }, this), " direction is intended to point to and navigate to a bucket of annotations currently visible on-screen."]

fileName: _jsxFileName,
lineNumber: 105,
lineNumber: 100,
columnNumber: 13

@@ -293,3 +296,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 110,
lineNumber: 105,
columnNumber: 15

@@ -299,3 +302,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 109,
lineNumber: 104,
columnNumber: 13

@@ -307,3 +310,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 114,
lineNumber: 109,
columnNumber: 19

@@ -313,3 +316,3 @@ }, this), " direction is intended to point to and navigate to the next bucket offscreen (above)."]

fileName: _jsxFileName,
lineNumber: 113,
lineNumber: 108,
columnNumber: 13

@@ -324,3 +327,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 118,
lineNumber: 113,
columnNumber: 15

@@ -330,3 +333,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 117,
lineNumber: 112,
columnNumber: 13

@@ -338,3 +341,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 122,
lineNumber: 117,
columnNumber: 19

@@ -344,3 +347,3 @@ }, this), " direction is intended to point to and navigate to the next bucket offscreen (below)."]

fileName: _jsxFileName,
lineNumber: 121,
lineNumber: 116,
columnNumber: 13

@@ -355,3 +358,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 126,
lineNumber: 121,
columnNumber: 15

@@ -361,3 +364,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 125,
lineNumber: 120,
columnNumber: 13

@@ -367,8 +370,54 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 94,
lineNumber: 85,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "...buttonProps",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "PointerButton"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 17
}, this), " props for", ' ', _jsxDEV(Library.Link, {
href: "/input-button",
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 17
}, this), " except for styling API props. This includes HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 126,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<ButtonProps>, 'variant' | 'size' | 'unstyled'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 125,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 124,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 79,
columnNumber: 9

@@ -375,0 +424,0 @@ }, this)]

710

lib/pattern-library/components/patterns/navigation/TabPage.js

@@ -58,3 +58,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/navigation/TabPage.tsx";

children: _jsxDEV(Library.Demo, {
title: "Basic (non-interactive) example",
title: "Basic Tabs in a tablist",
withSource: true,

@@ -119,69 +119,2 @@ children: _jsxDEV("div", {

columnNumber: 11
}, this), _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 15
}, this), "s ", _jsxDEV("em", {
children: "must"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 33
}, this), " be direct children of an element with ", _jsxDEV("code", {
children: ["role=", '"tablist"']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 69,
columnNumber: 20
}, this), " (or use the", ' ', _jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 70,
columnNumber: 15
}, this), " component)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 67,
columnNumber: 13
}, this), _jsxDEV("li", {
children: ["You ", _jsxDEV("em", {
children: "should"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 73,
columnNumber: 19
}, 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: 75,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 74,
columnNumber: 15
}, this), ' ', "attribute to each ", _jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 77,
columnNumber: 33
}, this), ". This is not always feasible in our applications."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 11
}, this)]

@@ -193,100 +126,79 @@ }, void 0, true, {

}, this), _jsxDEV(Library.Pattern, {
title: "Props",
title: "Working with Tabs",
children: [_jsxDEV(Library.Example, {
title: "aria-controls",
children: ["An element with ", _jsxDEV("code", {
children: 'role="tab"'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
columnNumber: 29
}, this), " should set an", ' ', _jsxDEV("code", {
children: "aria-controls"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 13
}, this), " attribute when possible. See the full", ' ', _jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 13
}, this), " example below."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "icon",
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}, this), "s may have icons. The icon will be displayed on the left and sized proportionally to the inherited font size.", _jsxDEV(Library.Demo, {
title: "Tabs with icon",
withSource: true,
children: _jsxDEV("div", {
role: "tablist",
children: [_jsxDEV(Tab, {
icon: ProfileIcon,
children: "Profile"
title: "Accessibility",
children: _jsxDEV("ul", {
children: [_jsxDEV("li", {
children: [_jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
lineNumber: 70,
columnNumber: 17
}, this), _jsxDEV(Tab, {
classes: "text-lg",
icon: ProfileIcon,
children: "Profile"
}, this), "s ", _jsxDEV("em", {
children: "must"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 96,
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), _jsxDEV(Tab, {
classes: "text-xl",
icon: ProfileIcon,
children: "Profile"
}, 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: 99,
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)]
}, 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: 94,
lineNumber: 74,
columnNumber: 15
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 68,
columnNumber: 13
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 90,
lineNumber: 67,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "selected",
children: ["This boolean property asserts that the ", _jsxDEV("code", {
children: "Tab"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 107,
columnNumber: 52
}, this), " is currently selected and the ", _jsxDEV("code", {
children: "tabpanel"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 108,
columnNumber: 30
}, this), " it controls (where relevant) is active and visible."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 106,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "textContent",
title: "Preventing text jiggle with textContent",
children: [_jsxDEV("p", {

@@ -296,12 +208,6 @@ 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."

fileName: _jsxFileName,
lineNumber: 113,
lineNumber: 85,
columnNumber: 13
}, this), _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "textContent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 120,
columnNumber: 15
}, this), " is a string representing the text content of the tab when selected.", ' ', _jsxDEV("strong", {
children: [_jsxDEV("strong", {
children: ["Setting ", _jsxDEV("code", {

@@ -311,3 +217,3 @@ children: "textContent"

fileName: _jsxFileName,
lineNumber: 123,
lineNumber: 93,
columnNumber: 25

@@ -317,3 +223,3 @@ }, this), " can help prevent jiggle in selected tabs"]

fileName: _jsxFileName,
lineNumber: 122,
lineNumber: 92,
columnNumber: 15

@@ -323,3 +229,3 @@ }, this), ". The size of the tab will accommodate this string rendered in bold text."]

fileName: _jsxFileName,
lineNumber: 119,
lineNumber: 91,
columnNumber: 13

@@ -339,3 +245,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 139,
lineNumber: 109,
columnNumber: 19

@@ -345,3 +251,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 134,
lineNumber: 104,
columnNumber: 17

@@ -356,3 +262,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 148,
lineNumber: 118,
columnNumber: 19

@@ -362,3 +268,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 143,
lineNumber: 113,
columnNumber: 17

@@ -373,3 +279,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 157,
lineNumber: 127,
columnNumber: 19

@@ -379,3 +285,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 152,
lineNumber: 122,
columnNumber: 17

@@ -385,3 +291,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 133,
lineNumber: 103,
columnNumber: 15

@@ -391,3 +297,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 129,
lineNumber: 99,
columnNumber: 13

@@ -399,3 +305,3 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 165,
lineNumber: 135,
columnNumber: 15

@@ -405,3 +311,3 @@ }, this), " to that string avoids the jiggle. Text will still change size (bold text is larger) but the tabs themselves do not move."]

fileName: _jsxFileName,
lineNumber: 163,
lineNumber: 133,
columnNumber: 13

@@ -420,3 +326,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 171,
lineNumber: 141,
columnNumber: 17

@@ -430,3 +336,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 178,
lineNumber: 148,
columnNumber: 17

@@ -440,3 +346,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 185,
lineNumber: 155,
columnNumber: 17

@@ -446,3 +352,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 170,
lineNumber: 140,
columnNumber: 15

@@ -452,3 +358,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 169,
lineNumber: 139,
columnNumber: 13

@@ -460,8 +366,8 @@ }, this), _jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 195,
lineNumber: 165,
columnNumber: 56
}, this), ' ', "can be set to an estimated ", '"widest-possible-text-content"', ' ', "value. A trial and error approach worked here:"]
}, this), ' ', "can be set to an estimated ", '"widest-possible-text-content"', ' ', "value."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 194,
lineNumber: 164,
columnNumber: 13

@@ -482,3 +388,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 210,
lineNumber: 180,
columnNumber: 19

@@ -488,3 +394,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 204,
lineNumber: 174,
columnNumber: 17

@@ -500,3 +406,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 220,
lineNumber: 190,
columnNumber: 19

@@ -506,3 +412,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 214,
lineNumber: 184,
columnNumber: 17

@@ -518,3 +424,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 230,
lineNumber: 200,
columnNumber: 19

@@ -524,3 +430,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 224,
lineNumber: 194,
columnNumber: 17

@@ -530,3 +436,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 203,
lineNumber: 173,
columnNumber: 15

@@ -536,3 +442,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 199,
lineNumber: 169,
columnNumber: 13

@@ -542,3 +448,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 112,
lineNumber: 84,
columnNumber: 11

@@ -548,4 +454,244 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 83,
lineNumber: 66,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
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.Example, {
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.Example, {
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.Example, {
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.Example, {
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)]

@@ -563,3 +709,3 @@ }, void 0, true, {

fileName: _jsxFileName,
lineNumber: 243,
lineNumber: 291,
columnNumber: 13

@@ -570,3 +716,3 @@ }, this), " is a presentational component that provides a", ' ', _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 244,
lineNumber: 292,
columnNumber: 13

@@ -578,3 +724,3 @@ }, this), " container and arrow-key navigation as outlined by", ' ', _jsxDEV("a", {

fileName: _jsxFileName,
lineNumber: 246,
lineNumber: 294,
columnNumber: 13

@@ -584,25 +730,6 @@ }, this), "."]

fileName: _jsxFileName,
lineNumber: 242,
lineNumber: 290,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {
title: "Status",
children: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 13
}, this), " is a new component."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 254,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
children: [_jsxDEV(Library.Usage, {

@@ -612,3 +739,3 @@ componentName: "TabList"

fileName: _jsxFileName,
lineNumber: 259,
lineNumber: 302,
columnNumber: 11

@@ -621,3 +748,3 @@ }, this), _jsxDEV(Library.Example, {

fileName: _jsxFileName,
lineNumber: 263,
lineNumber: 306,
columnNumber: 15

@@ -628,3 +755,3 @@ }, this), ", ", _jsxDEV("code", {

fileName: _jsxFileName,
lineNumber: 263,
lineNumber: 306,
columnNumber: 37

@@ -635,3 +762,3 @@ }, this), " and some tabpanels. The tabpanels have been made focusable here as they contain no focusable elements: pressing ", _jsxDEV("kbd", {

fileName: _jsxFileName,
lineNumber: 265,
lineNumber: 308,
columnNumber: 44

@@ -641,3 +768,3 @@ }, this), " when in the tablist will move focus to the active tabpanel. Tabs may be navigated with the left and right arrows."]

fileName: _jsxFileName,
lineNumber: 261,
lineNumber: 304,
columnNumber: 13

@@ -658,3 +785,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 272,
lineNumber: 315,
columnNumber: 19

@@ -669,3 +796,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 280,
lineNumber: 323,
columnNumber: 19

@@ -680,3 +807,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 288,
lineNumber: 331,
columnNumber: 19

@@ -686,3 +813,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 271,
lineNumber: 314,
columnNumber: 17

@@ -700,3 +827,3 @@ }, this), _jsxDEV(Card, {

fileName: _jsxFileName,
lineNumber: 297,
lineNumber: 340,
columnNumber: 17

@@ -714,3 +841,3 @@ }, this), _jsxDEV(Card, {

fileName: _jsxFileName,
lineNumber: 309,
lineNumber: 352,
columnNumber: 17

@@ -728,3 +855,3 @@ }, this), _jsxDEV(Card, {

fileName: _jsxFileName,
lineNumber: 321,
lineNumber: 364,
columnNumber: 17

@@ -734,3 +861,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 270,
lineNumber: 313,
columnNumber: 15

@@ -740,3 +867,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 269,
lineNumber: 312,
columnNumber: 13

@@ -746,3 +873,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 260,
lineNumber: 303,
columnNumber: 11

@@ -752,32 +879,66 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 258,
lineNumber: 301,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: _jsxDEV(Library.Example, {
title: "Component API",
children: [_jsxDEV("p", {
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 383,
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: 384,
columnNumber: 13
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 382,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "vertical",
children: [_jsxDEV("p", {
children: ["By default, ", _jsxDEV("code", {
children: "TabList"
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: 341,
columnNumber: 27
}, this), " layout is horizontal. Set the boolean ", _jsxDEV("code", {
children: "vertical"
lineNumber: 391,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: "boolean"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 396,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 342,
columnNumber: 23
}, this), " prop for a vertical layout. This will also enable arrow-key navigation using the up and down arrows."]
lineNumber: 395,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "default",
children: _jsxDEV("code", {
children: "false"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 399,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 398,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 340,
lineNumber: 390,
columnNumber: 13
}, this), _jsxDEV("p", {
children: "The following example demonstrates vertical layout and up/down keyboard navigation."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {

@@ -797,3 +958,3 @@ withSource: true,

fileName: _jsxFileName,
lineNumber: 352,
lineNumber: 405,
columnNumber: 17

@@ -808,3 +969,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 360,
lineNumber: 413,
columnNumber: 17

@@ -819,3 +980,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 368,
lineNumber: 421,
columnNumber: 17

@@ -825,3 +986,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 351,
lineNumber: 404,
columnNumber: 15

@@ -831,3 +992,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 350,
lineNumber: 403,
columnNumber: 13

@@ -837,8 +998,47 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 339,
lineNumber: 389,
columnNumber: 11
}, this)
}, void 0, false, {
}, this), _jsxDEV(Library.Example, {
title: "...htmlAttributes",
children: _jsxDEV(Library.Info, {
children: [_jsxDEV(Library.InfoItem, {
label: "description",
children: [_jsxDEV("code", {
children: "TabList"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 436,
columnNumber: 17
}, this), " accepts HTML attributes."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 435,
columnNumber: 15
}, this), _jsxDEV(Library.InfoItem, {
label: "type",
children: _jsxDEV("code", {
children: `Omit<JSX.HTMLAttributes<HTMLElement>, 'size'>`
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 439,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 438,
columnNumber: 15
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 434,
columnNumber: 13
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 433,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 338,
lineNumber: 381,
columnNumber: 9

@@ -848,3 +1048,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 239,
lineNumber: 287,
columnNumber: 7

@@ -851,0 +1051,0 @@ }, this)]

2

lib/pattern-library/components/patterns/prototype/FakeAnnotationPublishControl.js

@@ -84,3 +84,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/prototype/FakeAnnotationPublishControl.tsx";

icon: GlobeIcon,
label: "All course participants",
label: "All assignment participants",
isDisabled: noSharing

@@ -87,0 +87,0 @@ }, void 0, false, {

670

lib/pattern-library/components/patterns/prototype/SharedAnnotationsPage.js
var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/prototype/SharedAnnotationsPage.tsx";
import { useState } from 'preact/hooks';
import { Button, Card, CardActions, CardContent, Checkbox, EditIcon, EllipsisIcon, GlobeIcon, GroupsFilledIcon, IconButton, ModalDialog, PinIcon, ReplyIcon, TrashIcon, Tab, TabList } from '../../../../';
import { Card, CardActions, CardContent, EditIcon, EllipsisIcon, GlobeIcon, GroupsFilledIcon, IconButton, PinIcon, ReplyIcon, TrashIcon, Tab, TabList } from '../../../../';
import Library from '../../Library';

@@ -11,3 +10,2 @@ import { LoremIpsum } from '../samples';

import { jsxDEV as _jsxDEV } from "preact/jsx-dev-runtime";
import { Fragment as _Fragment } from "preact/jsx-dev-runtime";
function FakeAnnotation({

@@ -32,3 +30,3 @@ children,

fileName: _jsxFileName,
lineNumber: 54,
lineNumber: 49,
columnNumber: 31

@@ -47,3 +45,3 @@ }, this);

fileName: _jsxFileName,
lineNumber: 61,
lineNumber: 56,
columnNumber: 13

@@ -53,3 +51,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 60,
lineNumber: 55,
columnNumber: 11

@@ -62,3 +60,3 @@ }, this), isShared && _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 66,
lineNumber: 61,
columnNumber: 13

@@ -68,3 +66,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 65,
lineNumber: 60,
columnNumber: 11

@@ -74,3 +72,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 58,
lineNumber: 53,
columnNumber: 7

@@ -88,3 +86,3 @@ }, this), _jsxDEV(CardContent, {

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 68,
columnNumber: 13

@@ -103,3 +101,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 82,
lineNumber: 77,
columnNumber: 26

@@ -112,3 +110,3 @@ }, this),

fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 80,
columnNumber: 21

@@ -119,3 +117,3 @@ }, this), _jsxDEV(FakeMenuItem, {

fileName: _jsxFileName,
lineNumber: 86,
lineNumber: 81,
columnNumber: 21

@@ -126,3 +124,3 @@ }, this), !hasReplies && _jsxDEV(FakeMenuItem, {

fileName: _jsxFileName,
lineNumber: 87,
lineNumber: 82,
columnNumber: 37

@@ -137,3 +135,3 @@ }, this), hasReplies && _jsxDEV(FakeMenuItem, {

fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 88,
columnNumber: 29

@@ -145,3 +143,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 94,
lineNumber: 89,
columnNumber: 29

@@ -151,3 +149,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 92,
lineNumber: 87,
columnNumber: 27

@@ -157,3 +155,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 89,
lineNumber: 84,
columnNumber: 23

@@ -163,3 +161,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 84,
lineNumber: 79,
columnNumber: 19

@@ -174,3 +172,3 @@ }, this), _jsxDEV(FakeMenuSection, {

fileName: _jsxFileName,
lineNumber: 105,
lineNumber: 100,
columnNumber: 30

@@ -180,3 +178,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 103,
lineNumber: 98,
columnNumber: 21

@@ -186,3 +184,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 102,
lineNumber: 97,
columnNumber: 19

@@ -192,3 +190,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 76,
lineNumber: 71,
columnNumber: 17

@@ -198,3 +196,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 69,
columnNumber: 13

@@ -204,3 +202,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 67,
columnNumber: 11

@@ -215,3 +213,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 114,
lineNumber: 109,
columnNumber: 15

@@ -222,3 +220,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 115,
lineNumber: 110,
columnNumber: 15

@@ -228,3 +226,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 113,
lineNumber: 108,
columnNumber: 13

@@ -238,3 +236,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 118,
lineNumber: 113,
columnNumber: 15

@@ -246,3 +244,3 @@ }, this), _jsxDEV("div", {

fileName: _jsxFileName,
lineNumber: 121,
lineNumber: 116,
columnNumber: 15

@@ -252,3 +250,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 117,
lineNumber: 112,
columnNumber: 13

@@ -258,3 +256,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 112,
lineNumber: 107,
columnNumber: 11

@@ -264,3 +262,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 71,
lineNumber: 66,
columnNumber: 9

@@ -275,3 +273,3 @@ }, this), content, _jsxDEV(CardActions, {

fileName: _jsxFileName,
lineNumber: 129,
lineNumber: 124,
columnNumber: 15

@@ -283,3 +281,3 @@ }, this), actions.includes('delete') && _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 132,
lineNumber: 127,
columnNumber: 15

@@ -292,3 +290,3 @@ }, this), actions.includes('pin') && _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 135,
lineNumber: 130,
columnNumber: 15

@@ -300,3 +298,3 @@ }, this), actions.includes('reply') && _jsxDEV(IconButton, {

fileName: _jsxFileName,
lineNumber: 142,
lineNumber: 137,
columnNumber: 15

@@ -306,3 +304,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 127,
lineNumber: 122,
columnNumber: 11

@@ -312,3 +310,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 126,
lineNumber: 121,
columnNumber: 9

@@ -318,3 +316,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 70,
lineNumber: 65,
columnNumber: 7

@@ -324,3 +322,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 57,
lineNumber: 52,
columnNumber: 5

@@ -337,80 +335,25 @@ }, this);

fileName: _jsxFileName,
lineNumber: 153,
lineNumber: 148,
columnNumber: 5
}, this);
}
/**
* Wrap the ModalDialog component with some state management to make reuse in
* multiple examples plausible and convenient.
*/
function ModalDialog_({
buttons,
children,
...dialogProps
}) {
const [dialogOpen, setDialogOpen] = useState(false);
const closeDialog = () => setDialogOpen(false);
const openButton = _jsxDEV(Button, {
onClick: () => setDialogOpen(!dialogOpen),
variant: "primary",
children: [dialogOpen ? 'Hide' : 'Show', " dialog"]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 5
}, this);
return _jsxDEV(_Fragment, {
children: [!dialogOpen && openButton, dialogOpen && _jsxDEV(ModalDialog, {
buttons: buttons,
...dialogProps,
onClose: closeDialog,
children: children
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 177,
columnNumber: 9
}, this)]
}, void 0, true);
}
export default function SharedAnnotationsPrototypePage() {
return _jsxDEV(Library.Page, {
title: "Re-using annotations in copied course assignments",
intro: _jsxDEV(_Fragment, {
children: [' ', _jsxDEV("p", {
children: ["Give instructors the ability to create and manage", ' ', _jsxDEV("b", {
className: "font-semibold",
children: "course-shared content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 13
}, this), " that all course participants can see regardless of section group membership. Separately, provide instructors the ability to", ' ', _jsxDEV("b", {
className: "font-semibold",
children: "pin content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 197,
columnNumber: 13
}, this), " such that it shows up at the top of sidebar on every tab."]
}, void 0, true, {
title: "Sharing annotations with all assignment participants",
intro: _jsxDEV("p", {
children: ["Give instructors the ability to create and manage", ' ', _jsxDEV("b", {
className: "font-semibold",
children: "assignment-shared content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 192,
lineNumber: 161,
columnNumber: 11
}, this), _jsxDEV("p", {
children: ["On first launch, or when editing settings for an assignment in a copied course, give the instructor the option to", ' ', _jsxDEV("b", {
className: "font-semibold",
children: "copy all of the course-shared annotations they created in the source assignment"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 13
}, this), ' ', "to the copied assignment."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 11
}, this)]
}, void 0, true),
}, this), " that all assignment participants can see regardless of section group membership."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 9
}, this),
children: [_jsxDEV(Library.Section, {
title: "Sharing annotations in an assignment",
children: [_jsxDEV(Library.Callout, {

@@ -421,3 +364,3 @@ children: [_jsxDEV("strong", {

fileName: _jsxFileName,
lineNumber: 214,
lineNumber: 169,
columnNumber: 11

@@ -427,108 +370,19 @@ }, this), " The UI sketches here are intended as low-fidelity wireframes to demonstrate UX and flow intent. They are not intended to represent polished design."]

fileName: _jsxFileName,
lineNumber: 213,
lineNumber: 168,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "User stories",
children: _jsxDEV("p", {
children: ["The low-fidelity UI sketches in this document attempt to address the", ' ', _jsxDEV("a", {
href: "https://docs.google.com/document/d/1jrWGqRaCab-jhqrHjSEQXjOzMo8JGBPJz3BdYec_Zk0",
children: "user stories in this document"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 221,
columnNumber: 13
}, this), ' ', "(access limited to Hypothesis team)."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 219,
columnNumber: 11
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 218,
columnNumber: 9
}, this), _jsxDEV("p", {
children: "As broken down here, there are three implied projects:"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 227,
columnNumber: 9
}, this), _jsxDEV("ol", {
start: 1,
children: [_jsxDEV("li", {
children: "Course-shared content"
}, this), _jsxDEV(Library.Pattern, {
title: "Creating and managing content shared to all participants",
children: [_jsxDEV("p", {
children: "An instructor may create top-level annotations that are visible to everyone in the assignment, regardless of which segment they belong to. An instructor may edit an annotation and change its sharing target."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 229,
lineNumber: 174,
columnNumber: 11
}, this), _jsxDEV("li", {
children: "Pinned content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 11
}, this), _jsxDEV("li", {
children: "Annotation re-use for copied course assignments"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 228,
columnNumber: 9
}, this), _jsxDEV("p", {
children: [_jsxDEV("i", {
children: "Pinned content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 234,
columnNumber: 11
}, this), " is independent functionality and could be deferred if desired. ", _jsxDEV("i", {
children: "Annotation re-use"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 32
}, this), " depends on", ' ', _jsxDEV("i", {
children: "course-shared content"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 236,
columnNumber: 11
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 233,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 212,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "1. Course-shared content",
intro: _jsxDEV("p", {
children: "An instructor may create top-level annotations that are visible to everyone in the course, regardless of which section group they belong to. An instructor may edit an annotation and move it into or out of this \u201Call-participants\u201D group."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 242,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Section, {
title: "Creating and managing course-shared content",
children: [_jsxDEV(Library.Section, {
title: "User interface: Creating or editing an annotation",
}, this), _jsxDEV(Library.Section, {
title: "Proposed user interface: Creating or editing an annotation",
children: [_jsxDEV("p", {
children: ["We might be able to extend the existing annotation-publish control. The annotation-publish control is available when creating", ' ', _jsxDEV("i", {
children: "or"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 15
}, this), " editing an annotation."]
}, void 0, true, {
children: "A proposed approach is to extend the existing publish-annotation interface."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 252,
lineNumber: 181,
columnNumber: 13

@@ -543,3 +397,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 260,
lineNumber: 188,
columnNumber: 17

@@ -549,3 +403,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 259,
lineNumber: 187,
columnNumber: 15

@@ -555,3 +409,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 258,
lineNumber: 186,
columnNumber: 13

@@ -561,142 +415,27 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 251,
lineNumber: 180,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
title: "User interface: When an annotation has replies",
children: [_jsxDEV("p", {
children: "It may be difficult technically and logically to deal with moving annotations between course-shared and section-group-only once they have replies. If that is the case, we could restrict moving an annotation once it has replies."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 266,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "One option",
children: _jsxDEV("div", {
className: "text-[13px] leading-none h-[200px]",
children: _jsxDEV(FakeAnnotationPublishControl, {
group: "Section 1",
noSharing: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 274,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 273,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Another option",
children: _jsxDEV("div", {
className: "text-[13px] leading-none h-[200px]",
children: _jsxDEV(FakeAnnotationPublishControl, {
group: "Section 1",
noSharing: true,
noSharingMessage: 'Annotations with replies cannot be moved'
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 281,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 280,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 279,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 265,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
title: "User interface: Improving experience in the future",
children: [_jsxDEV("p", {
children: ["It might be possible to consolidate some annotation actions into a", ' ', '"manage-annotation menu"', " at the top right of a top-level annotation card. And we could to distinguish between moving and copying."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 291,
columnNumber: 13
}, this), _jsxDEV("p", {
children: "This gives the user an option to copy a top-level annotation that they authored. Annotations with replies could be copied but not moved (replies would not get copied)."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Annotation card with context menu",
children: _jsxDEV(FakeSidebar, {
children: _jsxDEV(FakeAnnotation, {
isOwn: true,
withManageMenu: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 304,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 302,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Annotation (with replies) and context menu",
children: _jsxDEV(FakeSidebar, {
children: _jsxDEV(FakeAnnotation, {
hasReplies: true,
isOwn: true,
withManageMenu: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 309,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 308,
columnNumber: 13
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 250,
lineNumber: 173,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Displaying course-shared content",
}, this), _jsxDEV(Library.Pattern, {
title: "Displaying shared content",
children: [_jsxDEV("p", {
children: "Content visible to all course participants should be \u201Cmerged into\u201D the annotation threads for the active group (section/reading group as indicated by the group selector in the top bar), but it should be easy to distinguish which annotation threads are shared to all participants."
}, void 0, false, {
children: ["Content visible to all assignment participants should be", ' ', '"merged into" ', "the annotation threads for the active segment (section/reading group as indicated by the group selector in the top bar), but it should be easy to distinguish which annotation threads are shared to all participants."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 317,
lineNumber: 195,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
}, this), _jsxDEV(Library.Example, {
title: "User interface: showing shared and non-shared annotations together",
children: [_jsxDEV("p", {
children: "It should be easy to visually distinguish which annotations in the sidebar are shared."
children: "It should be easy to visually distinguish which annotations in the sidebar are shared. The treatment shown here is not proposed as a design solution."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 325,
lineNumber: 204,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Low-fidelity sketch of merged shared annotations",
children: _jsxDEV(FakeSidebar, {

@@ -710,3 +449,3 @@ children: [_jsxDEV(TabList, {

fileName: _jsxFileName,
lineNumber: 332,
lineNumber: 212,
columnNumber: 19

@@ -717,3 +456,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 333,
lineNumber: 213,
columnNumber: 19

@@ -724,3 +463,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 334,
lineNumber: 214,
columnNumber: 19

@@ -730,7 +469,7 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 331,
lineNumber: 211,
columnNumber: 17
}, this), _jsxDEV(FakeAnnotation, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 337,
lineNumber: 217,
columnNumber: 17

@@ -742,7 +481,7 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 338,
lineNumber: 218,
columnNumber: 17
}, this), _jsxDEV(FakeAnnotation, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 339,
lineNumber: 219,
columnNumber: 17

@@ -754,3 +493,3 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 340,
lineNumber: 220,
columnNumber: 17

@@ -761,3 +500,3 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 341,
lineNumber: 221,
columnNumber: 17

@@ -767,3 +506,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 330,
lineNumber: 210,
columnNumber: 15

@@ -773,3 +512,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 329,
lineNumber: 209,
columnNumber: 13

@@ -779,3 +518,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 324,
lineNumber: 203,
columnNumber: 11

@@ -785,3 +524,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 316,
lineNumber: 194,
columnNumber: 9

@@ -791,22 +530,34 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 239,
lineNumber: 167,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "2. Pinned Content",
title: "Possible future enhancements",
intro: _jsxDEV("p", {
children: ["A top-level annotation can be \u201Cpinned\u201D by authorized users, which makes the annotation(s) show up at the top of the sidebar above the annotation-type tabs at all times. This feature could help with the use case of instructors wanting to put certain annotations front and center, or provide instructions or prompts for the assignment as a whole.", ' ']
}, void 0, true, {
children: "Several proposed future features may have some interplay with annotation assignment sharing."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 351,
lineNumber: 231,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Section, {
title: "Pinning and unpinning content",
children: [_jsxDEV("p", {
children: "Pinning is a \u201Ctoggle\u201D type of functionality. We could restrict its availability to top-level annotations."
children: [_jsxDEV(Library.Callout, {
children: [_jsxDEV("strong", {
children: "Note:"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 362,
lineNumber: 238,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
}, this), " None of the following features are scoped or committed yet. These sketches merely posit some potential UX interplay and may be useful as reference later."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 237,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Pinned content",
children: [_jsxDEV("p", {
children: ["A top-level annotation can be ", '"pinned"', " by authorized users, which makes the annotation(s) show up at the top of the sidebar above the annotation-type tabs at all times. This feature could help with the use case of instructors wanting to put certain annotations front and center, or provide instructions or prompts for the assignment as a whole.", ' ']
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 243,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "User interface: Toggling pinning",

@@ -817,3 +568,3 @@ children: [_jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 367,
lineNumber: 252,
columnNumber: 13

@@ -826,3 +577,3 @@ }, this), _jsxDEV(Library.Demo, {

fileName: _jsxFileName,
lineNumber: 373,
lineNumber: 258,
columnNumber: 17

@@ -832,3 +583,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 372,
lineNumber: 257,
columnNumber: 15

@@ -838,3 +589,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 371,
lineNumber: 256,
columnNumber: 13

@@ -844,3 +595,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 366,
lineNumber: 251,
columnNumber: 11

@@ -850,19 +601,7 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 361,
lineNumber: 242,
columnNumber: 9
}, this), _jsxDEV(Library.Section, {
title: "Displaying pinned content",
children: [_jsxDEV("p", {
children: ["Pinned content could be shown ", _jsxDEV("i", {
children: "above"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 381,
columnNumber: 43
}, this), " all other content, including tabs (i.e. a pinned Page Note would also show up on the Annotations tab, but above the tabs). This could satisfy use cases relating to creating prompts or instructions for assignments, or for otherwise showing certain instructor content at the top."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 380,
columnNumber: 11
}, this), _jsxDEV(Library.Section, {
children: [_jsxDEV(Library.Example, {
title: "User interface: Showing pinned, shared and non-shared annotations",

@@ -873,4 +612,16 @@ children: [_jsxDEV("p", {

fileName: _jsxFileName,
lineNumber: 388,
lineNumber: 266,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["Pinned content could be shown ", _jsxDEV("i", {
children: "above"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 268,
columnNumber: 45
}, this), " all other content, including tabs (i.e. a pinned Page Note would also show up on the Annotations tab, but above the tabs). This could satisfy use cases relating to creating prompts or instructions for assignments, or for otherwise showing certain instructor content at the top."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {

@@ -883,3 +634,3 @@ children: _jsxDEV(FakeSidebar, {

fileName: _jsxFileName,
lineNumber: 391,
lineNumber: 276,
columnNumber: 17

@@ -892,3 +643,3 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 392,
lineNumber: 277,
columnNumber: 17

@@ -902,3 +653,3 @@ }, this), _jsxDEV(TabList, {

fileName: _jsxFileName,
lineNumber: 395,
lineNumber: 280,
columnNumber: 19

@@ -909,3 +660,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 396,
lineNumber: 281,
columnNumber: 19

@@ -916,3 +667,3 @@ }, this), _jsxDEV(Tab, {

fileName: _jsxFileName,
lineNumber: 397,
lineNumber: 282,
columnNumber: 19

@@ -922,7 +673,7 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 394,
lineNumber: 279,
columnNumber: 17
}, this), _jsxDEV(FakeAnnotation, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 399,
lineNumber: 284,
columnNumber: 17

@@ -934,7 +685,7 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 400,
lineNumber: 285,
columnNumber: 17
}, this), _jsxDEV(FakeAnnotation, {}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 401,
lineNumber: 286,
columnNumber: 17

@@ -946,3 +697,3 @@ }, this), _jsxDEV(FakeAnnotation, {

fileName: _jsxFileName,
lineNumber: 402,
lineNumber: 287,
columnNumber: 17

@@ -952,3 +703,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 390,
lineNumber: 275,
columnNumber: 15

@@ -958,3 +709,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 389,
lineNumber: 274,
columnNumber: 13

@@ -964,85 +715,32 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 387,
lineNumber: 265,
columnNumber: 11
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 379,
columnNumber: 9
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 348,
columnNumber: 7
}, this), _jsxDEV(Library.Section, {
title: "3. Re-using content in copied course assignments",
intro: _jsxDEV("p", {
children: ["An instructor copies a course. Afterwards, they have the option to", ' ', _jsxDEV("b", {
children: "copy over their own annotation content that was shared to all participants"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 414,
columnNumber: 13
}, this), ' ', "on an assignment-by-assignment basis. They could then edit or remove any that they want to change or delete."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 412,
columnNumber: 11
}, this),
children: _jsxDEV(Library.Section, {
title: "Copying annotations on first launch",
children: _jsxDEV(Library.Section, {
title: "User interface: Modal on first launch",
children: _jsxDEV(Library.Demo, {
children: _jsxDEV(ModalDialog_, {
title: "Re-use content for this assignment?",
buttons: _jsxDEV(Button, {
variant: "primary",
children: "Continue"
}, this), _jsxDEV(Library.Example, {
title: "User interface: Improving experience in the future",
children: [_jsxDEV("p", {
children: "In the future, we might provide both share/move and copy options for a root-level annotation."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 293,
columnNumber: 13
}, this), _jsxDEV("p", {
children: ["One option: it might be possible to consolidate some annotation actions into a ", '"manage-annotation menu"', " at the top right of a top-level annotation card."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 297,
columnNumber: 13
}, this), _jsxDEV(Library.Demo, {
title: "Annotation card with context menu",
children: _jsxDEV(FakeSidebar, {
children: _jsxDEV(FakeAnnotation, {
isOwn: true,
withManageMenu: true
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 428,
columnNumber: 26
}, this),
children: [_jsxDEV("p", {
children: "It looks like this assignment was copied from another course. You can re-use your shared content in this assignment."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 430,
lineNumber: 304,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "border-b"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 434,
columnNumber: 17
}, this), _jsxDEV(Checkbox, {
children: "Copy shared annotations to this assignment"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 435,
columnNumber: 17
}, this), _jsxDEV("div", {
className: "border-b"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 436,
columnNumber: 17
}, this), _jsxDEV("p", {
className: "text-xs",
children: _jsxDEV("em", {
children: "Only your annotations shared with all course participants will be copied. Replies are not copied. You can edit or remove individual copied annotations at any time."
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 438,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 437,
columnNumber: 17
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 426,
lineNumber: 303,
columnNumber: 15

@@ -1052,18 +750,18 @@ }, this)

fileName: _jsxFileName,
lineNumber: 425,
lineNumber: 302,
columnNumber: 13
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 424,
lineNumber: 292,
columnNumber: 11
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 423,
lineNumber: 264,
columnNumber: 9
}, this)
}, void 0, false, {
}, this)]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 409,
lineNumber: 228,
columnNumber: 7

@@ -1073,3 +771,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 187,
lineNumber: 156,
columnNumber: 5

@@ -1076,0 +774,0 @@ }, this);

132

lib/pattern-library/components/patterns/transition/SliderPage.js

@@ -71,3 +71,2 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/transition/SliderPage.tsx";

export default function SliderPage() {
const [transitionStatus, setTransitionStatus] = useState();
return _jsxDEV(Library.Page, {

@@ -81,3 +80,3 @@ title: "Slider",

fileName: _jsxFileName,
lineNumber: 57,
lineNumber: 53,
columnNumber: 13

@@ -87,3 +86,3 @@ }, this), " is a transition component with a slide-down/slide-up transition on open/close."]

fileName: _jsxFileName,
lineNumber: 56,
lineNumber: 52,
columnNumber: 11

@@ -93,27 +92,2 @@ }, this)

children: _jsxDEV(Library.Section, {
intro: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Slider"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 13
}, this), " implements the ", _jsxDEV("code", {
children: "TransitionComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 66,
columnNumber: 48
}, this), ' ', "API, so it can be used standalone, or together with any other component which accepts a ", _jsxDEV("code", {
children: "TransitionComponent"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 39
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 65,
columnNumber: 11
}, this),
children: [_jsxDEV(Library.Pattern, {

@@ -124,7 +98,7 @@ children: [_jsxDEV(Library.Usage, {

fileName: _jsxFileName,
lineNumber: 73,
lineNumber: 61,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
children: _jsxDEV(Library.Demo, {
title: "Basic example",
title: "Basic Slider",
withSource: true,

@@ -138,3 +112,3 @@ children: _jsxDEV(Slider_, {

fileName: _jsxFileName,
lineNumber: 78,
lineNumber: 66,
columnNumber: 19

@@ -144,3 +118,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 77,
lineNumber: 65,
columnNumber: 17

@@ -150,3 +124,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 76,
lineNumber: 64,
columnNumber: 15

@@ -156,3 +130,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 75,
lineNumber: 63,
columnNumber: 13

@@ -162,3 +136,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 74,
lineNumber: 62,
columnNumber: 11

@@ -168,83 +142,29 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 72,
lineNumber: 60,
columnNumber: 9
}, this), _jsxDEV(Library.Pattern, {
title: "Props",
children: [_jsxDEV(Library.Example, {
title: "direction",
children: ["This prop tells if the Slider is currently expanded (", _jsxDEV("code", {
children: "in"
title: "Component API",
children: _jsxDEV("p", {
children: [_jsxDEV("code", {
children: "Button"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 87,
columnNumber: 66
}, this), ") or collapsed (", _jsxDEV("code", {
children: "out"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 29
}, this), "). It is ", _jsxDEV("code", {
children: "in"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 88,
columnNumber: 54
}, this), " by default."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 86,
columnNumber: 11
}, this), _jsxDEV(Library.Example, {
title: "onTransitionEnd",
children: ["Optionally, you can provide a callback that will be invoked once the", ' ', _jsxDEV("code", {
children: "in"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
lineNumber: 75,
columnNumber: 13
}, this), "/", _jsxDEV("code", {
children: "out"
}, this), " accepts", ' ', _jsxDEV(Library.Link, {
href: "/using-components#transition-components-api",
children: "transition component props"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 29
}, this), " transitions end.", _jsxDEV(Library.Demo, {
title: "Slider with onTransitionEnd",
withSource: true,
children: _jsxDEV(Slider_, {
direction: "out",
onTransitionEnd: direction => setTransitionStatus(direction),
_transitionStatus: transitionStatus,
children: _jsxDEV(Card, {
children: _jsxDEV(CardContent, {
children: "This is the content of the Slider"
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 101,
columnNumber: 19
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 100,
columnNumber: 17
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 15
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 94,
lineNumber: 76,
columnNumber: 13
}, this)]
}, this), "."]
}, void 0, true, {
fileName: _jsxFileName,
lineNumber: 91,
lineNumber: 74,
columnNumber: 11
}, this)]
}, void 0, true, {
}, this)
}, void 0, false, {
fileName: _jsxFileName,
lineNumber: 85,
lineNumber: 73,
columnNumber: 9

@@ -254,3 +174,3 @@ }, this)]

fileName: _jsxFileName,
lineNumber: 63,
lineNumber: 59,
columnNumber: 7

@@ -260,3 +180,3 @@ }, this)

fileName: _jsxFileName,
lineNumber: 52,
lineNumber: 48,
columnNumber: 5

@@ -263,0 +183,0 @@ }, this);

2

lib/pattern-library/components/patterns/UsingComponentsPage.js

@@ -504,2 +504,3 @@ var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/UsingComponentsPage.tsx";

}, this), _jsxDEV(Library.Section, {
id: "composite-components-api",
title: "API",

@@ -677,2 +678,3 @@ children: [_jsxDEV(Library.Example, {

title: "API",
id: "transition-components-api",
children: [_jsxDEV(Library.Example, {

@@ -679,0 +681,0 @@ title: "direction",

6

lib/pattern-library/routes.js

@@ -12,2 +12,3 @@ import ColorsPage from './components/patterns/ColorsPage';

import ThumbnailPage from './components/patterns/data/ThumbnailPage';
import CalloutPage from './components/patterns/feedback/CalloutPage';
import DialogPage from './components/patterns/feedback/DialogPage';

@@ -104,2 +105,7 @@ import ModalPage from './components/patterns/feedback/ModalPage';

}, {
title: 'Callout',
group: 'feedback',
component: CalloutPage,
route: '/feedback-callout'
}, {
title: 'Dialogs',

@@ -106,0 +112,0 @@ group: 'feedback',

9

package.json
{
"name": "@hypothesis/frontend-shared",
"version": "6.3.0",
"version": "6.4.0",
"description": "Shared components, styles and utilities for Hypothesis projects",

@@ -13,3 +13,3 @@ "license": "BSD-2-Clause",

"@babel/preset-typescript": "^7.18.6",
"@hypothesis/frontend-build": "^1.0.1",
"@hypothesis/frontend-build": "^2.2.0",
"@rollup/plugin-babel": "^6.0.0",

@@ -54,3 +54,3 @@ "@rollup/plugin-commonjs": "^25.0.0",

"prettier": "^2.2.1",
"rollup": "^2.58.0",
"rollup": "^3.25.1",
"rollup-plugin-string": "^3.0.0",

@@ -98,3 +98,4 @@ "sass": "^1.43.2",

"wouter-preact": "^2.10.0-alpha.1"
}
},
"packageManager": "yarn@3.6.0"
}
lib/components/feedback/index.js.map

Sorry, the diff of this file is not supported yet

lib/components/navigation/PointerButton.js.map

Sorry, the diff of this file is not supported yet

lib/components/navigation/Tab.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/data/DataTablePage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/data/IconsPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/data/ScrollBoxPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/data/TablePage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/data/ThumbnailPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/feedback/DialogPage.js

Sorry, the diff of this file is too big to display

lib/pattern-library/components/patterns/feedback/DialogPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/input/CheckboxPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/input/InputGroupPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/input/InputPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/input/OptionButtonPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/input/SelectPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/layout/CardPage.js

Sorry, the diff of this file is too big to display

lib/pattern-library/components/patterns/layout/CardPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/layout/OverlayPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/layout/PanelPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/navigation/PointerButtonPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/navigation/TabPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/prototype/FakeAnnotationPublishControl.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/prototype/SharedAnnotationsPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/transition/SliderPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/components/patterns/UsingComponentsPage.js.map

Sorry, the diff of this file is not supported yet

lib/pattern-library/routes.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc