@hypothesis/frontend-shared
Advanced tools
Comparing version 1.13.0 to 2.0.0
@@ -8,2 +8,13 @@ # Changelog | ||
## [v2.0.0] - 2021-05-13 | ||
### Breaking changes: | ||
- Set default `type` property of buttons to "button" [#62](https://github.com/hypothesis/frontend-shared/pull/62) | ||
### Added: | ||
- Add Checkbox component and patterns [#43](https://github.com/hypothesis/frontend-shared/pull/43) | ||
- Add `Panel` component and adjust icon registration [#60](https://github.com/hypothesis/frontend-shared/pull/60) | ||
## [v1.13.0] - 2021-04-28 | ||
@@ -10,0 +21,0 @@ |
@@ -10,15 +10,13 @@ /** | ||
* | ||
* @param {ButtonProps} props | ||
* @param {ButtonBaseProps} props | ||
*/ | ||
export function LabeledButton({ children, className, ...restProps }: ButtonProps): any; | ||
export function LabeledButton({ children, className, ...restProps }: ButtonBaseProps): any; | ||
/** | ||
* A button styled to appear as an HTML link (<a>) | ||
* | ||
* @param {ButtonProps} props | ||
* @param {ButtonBaseProps} props | ||
*/ | ||
export function LinkButton(props: ButtonProps): any; | ||
export function LinkButton(props: ButtonBaseProps): any; | ||
export type ButtonProps = { | ||
buttonRef?: import('preact').Ref<HTMLButtonElement>; | ||
children?: import("preact").ComponentChildren; | ||
className?: string; | ||
/** | ||
@@ -33,3 +31,2 @@ * - Name of `SvgIcon` to render in the button | ||
iconPosition?: 'left' | 'right'; | ||
disabled?: boolean; | ||
/** | ||
@@ -41,2 +38,6 @@ * - Is the element associated with this button | ||
/** | ||
* - Use `expanded` prop instead | ||
*/ | ||
"aria-expanded"?: never; | ||
/** | ||
* - Is this button currently "active?" (set | ||
@@ -46,4 +47,7 @@ * `aria-pressed`) | ||
pressed?: boolean; | ||
onClick?: (event: Event) => void; | ||
/** | ||
* - Use `pressed` prop instead | ||
*/ | ||
"aria-pressed"?: never; | ||
/** | ||
* - Relative button size: | ||
@@ -54,6 +58,2 @@ * affects padding | ||
/** | ||
* - Optional inline styles | ||
*/ | ||
style?: any; | ||
/** | ||
* - Button title; used for `aria-label` attribute | ||
@@ -63,2 +63,6 @@ */ | ||
/** | ||
* - Use `title` prop instead | ||
*/ | ||
"aria-label"?: never; | ||
/** | ||
* - For styling: element variant | ||
@@ -68,2 +72,329 @@ */ | ||
}; | ||
/** | ||
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited | ||
* from HTMLElement and conflicts with the _ButtonProps.size prop above. | ||
*/ | ||
export type HTMLButtonElementProps = { | ||
max?: string | number; | ||
required?: boolean; | ||
default?: boolean; | ||
high?: number; | ||
low?: number; | ||
disabled?: boolean; | ||
start?: number; | ||
open?: boolean; | ||
media?: string; | ||
loading?: "eager" | "lazy"; | ||
hidden?: boolean; | ||
data?: string; | ||
dir?: NotificationDirection; | ||
form?: string; | ||
label?: string; | ||
slot?: string; | ||
span?: number; | ||
style?: string | import("preact").JSX.CSSProperties; | ||
summary?: string; | ||
title?: string; | ||
pattern?: string; | ||
async?: boolean; | ||
readonly?: boolean; | ||
defer?: boolean; | ||
manifest?: string; | ||
content?: string; | ||
height?: string | number; | ||
width?: string | number; | ||
target?: string; | ||
type?: string; | ||
key?: any; | ||
headers?: string; | ||
onToggle?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
accept?: string; | ||
acceptCharset?: string; | ||
accessKey?: string; | ||
action?: string; | ||
allowFullScreen?: boolean; | ||
allowTransparency?: boolean; | ||
alt?: string; | ||
as?: string; | ||
autocomplete?: string; | ||
autoComplete?: string; | ||
autocorrect?: string; | ||
autoCorrect?: string; | ||
autofocus?: boolean; | ||
autoFocus?: boolean; | ||
autoPlay?: boolean; | ||
capture?: string | boolean; | ||
cellPadding?: string | number; | ||
cellSpacing?: string | number; | ||
charSet?: string; | ||
challenge?: string; | ||
checked?: boolean; | ||
class?: string; | ||
className?: string; | ||
cols?: number; | ||
colSpan?: number; | ||
contentEditable?: boolean; | ||
contextMenu?: string; | ||
controls?: boolean; | ||
controlsList?: string; | ||
coords?: string; | ||
crossOrigin?: string; | ||
dateTime?: string; | ||
disableRemotePlayback?: boolean; | ||
download?: any; | ||
draggable?: boolean; | ||
encType?: string; | ||
formAction?: string; | ||
formEncType?: string; | ||
formMethod?: string; | ||
formNoValidate?: boolean; | ||
formTarget?: string; | ||
frameBorder?: string | number; | ||
href?: string; | ||
hrefLang?: string; | ||
for?: string; | ||
htmlFor?: string; | ||
httpEquiv?: string; | ||
icon?: string; | ||
id?: string; | ||
inputMode?: string; | ||
integrity?: string; | ||
is?: string; | ||
keyParams?: string; | ||
keyType?: string; | ||
kind?: string; | ||
lang?: string; | ||
list?: string; | ||
loop?: boolean; | ||
marginHeight?: number; | ||
marginWidth?: number; | ||
maxLength?: number; | ||
mediaGroup?: string; | ||
method?: string; | ||
min?: string | number; | ||
minLength?: number; | ||
multiple?: boolean; | ||
muted?: boolean; | ||
name?: string; | ||
nonce?: string; | ||
noValidate?: boolean; | ||
optimum?: number; | ||
placeholder?: string; | ||
playsInline?: boolean; | ||
poster?: string; | ||
preload?: string; | ||
radioGroup?: string; | ||
readOnly?: boolean; | ||
rel?: string; | ||
role?: string; | ||
rows?: number; | ||
rowSpan?: number; | ||
sandbox?: string; | ||
scope?: string; | ||
scoped?: boolean; | ||
scrolling?: string; | ||
seamless?: boolean; | ||
selected?: boolean; | ||
shape?: string; | ||
sizes?: string; | ||
spellcheck?: boolean; | ||
src?: string; | ||
srcset?: string; | ||
srcDoc?: string; | ||
srcLang?: string; | ||
srcSet?: string; | ||
step?: string | number; | ||
tabIndex?: number; | ||
useMap?: string; | ||
value?: string | number | string[]; | ||
volume?: string | number; | ||
wmode?: string; | ||
wrap?: string; | ||
about?: string; | ||
datatype?: string; | ||
inlist?: any; | ||
prefix?: string; | ||
property?: string; | ||
resource?: string; | ||
typeof?: string; | ||
vocab?: string; | ||
itemProp?: string; | ||
itemScope?: boolean; | ||
itemType?: string; | ||
itemID?: string; | ||
itemRef?: string; | ||
ref?: import("preact").Ref<HTMLButtonElement>; | ||
jsx?: boolean; | ||
onLoad?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onError?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onErrorCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onCopy?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onCopyCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onCut?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onCutCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onPaste?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onPasteCapture?: import("preact").JSX.ClipboardEventHandler<HTMLButtonElement>; | ||
onCompositionEnd?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onCompositionEndCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onCompositionStart?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onCompositionStartCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onCompositionUpdate?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onCompositionUpdateCapture?: import("preact").JSX.CompositionEventHandler<HTMLButtonElement>; | ||
onFocus?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>; | ||
onFocusCapture?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>; | ||
onBlur?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>; | ||
onBlurCapture?: import("preact").JSX.FocusEventHandler<HTMLButtonElement>; | ||
onChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onInput?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onInputCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSearch?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSearchCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSubmit?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSubmitCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onInvalid?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onInvalidCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onReset?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onResetCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onFormData?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onFormDataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onKeyDown?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onKeyDownCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onKeyPress?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onKeyPressCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onKeyUp?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onKeyUpCapture?: import("preact").JSX.KeyboardEventHandler<HTMLButtonElement>; | ||
onAbort?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onAbortCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onCanPlay?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onCanPlayCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onCanPlayThrough?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onCanPlayThroughCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onDurationChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onDurationChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEmptied?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEmptiedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEncrypted?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEncryptedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEnded?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onEndedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadedData?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadedDataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadedMetadata?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadedMetadataCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadStart?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onLoadStartCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPause?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPauseCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPlay?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPlayCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPlaying?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onPlayingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onProgress?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onProgressCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onRateChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onRateChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSeeked?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSeekedCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSeeking?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSeekingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onStalled?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onStalledCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSuspend?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSuspendCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onTimeUpdate?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onTimeUpdateCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onVolumeChange?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onVolumeChangeCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onWaiting?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onWaitingCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onClick?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onClickCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onContextMenu?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onContextMenuCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onDblClick?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onDblClickCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onDrag?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragEnd?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragEndCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragEnter?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragEnterCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragExit?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragExitCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragLeave?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragLeaveCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragOver?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragOverCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragStart?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDragStartCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDrop?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onDropCapture?: import("preact").JSX.DragEventHandler<HTMLButtonElement>; | ||
onMouseDown?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseDownCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseEnter?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseEnterCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseLeave?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseLeaveCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseMove?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseMoveCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseOut?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseOutCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseOver?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseOverCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseUp?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onMouseUpCapture?: import("preact").JSX.MouseEventHandler<HTMLButtonElement>; | ||
onSelect?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onSelectCapture?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
onTouchCancel?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchCancelCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchEnd?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchEndCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchMove?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchMoveCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchStart?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onTouchStartCapture?: import("preact").JSX.TouchEventHandler<HTMLButtonElement>; | ||
onPointerOver?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerOverCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerEnter?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerEnterCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerDown?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerDownCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerMove?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerMoveCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerUp?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerUpCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerCancel?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerCancelCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerOut?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerOutCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerLeave?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onPointerLeaveCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onGotPointerCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onGotPointerCaptureCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onLostPointerCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onLostPointerCaptureCapture?: import("preact").JSX.PointerEventHandler<HTMLButtonElement>; | ||
onScroll?: import("preact").JSX.UIEventHandler<HTMLButtonElement>; | ||
onScrollCapture?: import("preact").JSX.UIEventHandler<HTMLButtonElement>; | ||
onWheel?: import("preact").JSX.WheelEventHandler<HTMLButtonElement>; | ||
onWheelCapture?: import("preact").JSX.WheelEventHandler<HTMLButtonElement>; | ||
onAnimationStart?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onAnimationStartCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onAnimationEnd?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onAnimationEndCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onAnimationIteration?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onAnimationIterationCapture?: import("preact").JSX.AnimationEventHandler<HTMLButtonElement>; | ||
onTransitionEnd?: import("preact").JSX.TransitionEventHandler<HTMLButtonElement>; | ||
onTransitionEndCapture?: import("preact").JSX.TransitionEventHandler<HTMLButtonElement>; | ||
children?: import("preact").ComponentChildren; | ||
dangerouslySetInnerHTML?: { | ||
__html: string; | ||
}; | ||
}; | ||
/** | ||
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited | ||
* from HTMLElement and conflicts with the _ButtonProps.size prop above. | ||
*/ | ||
export type ButtonBaseProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "class" | "className" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML">; | ||
export type IconButtonBaseProps = { | ||
@@ -83,2 +414,2 @@ /** | ||
}; | ||
export type IconButtonProps = ButtonProps & IconButtonBaseProps; | ||
export type IconButtonProps = ButtonProps & Pick<import("preact").JSX.HTMLAttributes<HTMLButtonElement>, "max" | "required" | "default" | "high" | "low" | "disabled" | "start" | "open" | "media" | "loading" | "hidden" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "readonly" | "defer" | "manifest" | "content" | "height" | "width" | "target" | "type" | "key" | "headers" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "class" | "className" | "cols" | "colSpan" | "contentEditable" | "contextMenu" | "controls" | "controlsList" | "coords" | "crossOrigin" | "dateTime" | "disableRemotePlayback" | "download" | "draggable" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "href" | "hrefLang" | "for" | "htmlFor" | "httpEquiv" | "icon" | "id" | "inputMode" | "integrity" | "is" | "keyParams" | "keyType" | "kind" | "lang" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "spellcheck" | "src" | "srcset" | "srcDoc" | "srcLang" | "srcSet" | "step" | "tabIndex" | "useMap" | "value" | "volume" | "wmode" | "wrap" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "ref" | "jsx" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onInput" | "onInputCapture" | "onSearch" | "onSearchCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onReset" | "onResetCapture" | "onFormData" | "onFormDataCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDblClick" | "onDblClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseEnterCapture" | "onMouseLeave" | "onMouseLeaveCapture" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerOut" | "onPointerOutCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "children" | "dangerouslySetInnerHTML"> & IconButtonBaseProps; |
@@ -33,17 +33,15 @@ "use strict"; | ||
* @prop {import('preact').Ref<HTMLButtonElement>} [buttonRef] | ||
* @prop {import("preact").ComponentChildren} [children] | ||
* @prop {string} [className] | ||
* @prop {string} [icon] - Name of `SvgIcon` to render in the button | ||
* @prop {'left'|'right'} [iconPosition] - Icon positioned to left or to | ||
* right of button text | ||
* @prop {boolean} [disabled] | ||
* @prop {boolean} [expanded] - Is the element associated with this button | ||
* expanded (set `aria-expanded`) | ||
* @prop {never} [aria-expanded] - Use `expanded` prop instead | ||
* @prop {boolean} [pressed] - Is this button currently "active?" (set | ||
* `aria-pressed`) | ||
* @prop {(event: Event) => void} [onClick] | ||
* @prop {never} [aria-pressed] - Use `pressed` prop instead | ||
* @prop {'small'|'medium'|'large'} [size='medium'] - Relative button size: | ||
* affects padding | ||
* @prop {Object} [style] - Optional inline styles | ||
* @prop {string} [title] - Button title; used for `aria-label` attribute | ||
* @prop {never} [aria-label] - Use `title` prop instead | ||
* @prop {'normal'|'primary'|'light'|'dark'} [variant='normal'] - For styling: element variant | ||
@@ -53,2 +51,10 @@ */ | ||
/** | ||
* Fold in HTML button prop definitions into ButtonProps, but ignore `size` because it's inherited | ||
* from HTMLElement and conflicts with the _ButtonProps.size prop above. | ||
* | ||
* @typedef {Omit<import('preact').JSX.HTMLAttributes<HTMLButtonElement>, 'size'> } HTMLButtonElementProps | ||
* @typedef {ButtonProps & HTMLButtonElementProps} ButtonBaseProps | ||
*/ | ||
/** | ||
* @typedef IconButtonBaseProps | ||
@@ -61,10 +67,11 @@ * @prop {string} icon - Icon is required for icon buttons | ||
/** | ||
* @typedef {ButtonProps & IconButtonBaseProps} IconButtonProps | ||
* @typedef {ButtonBaseProps & IconButtonBaseProps} IconButtonProps | ||
*/ | ||
/** | ||
* @param {ButtonProps} props | ||
* @param {ButtonBaseProps} props | ||
*/ | ||
function ButtonBase(_ref) { | ||
let { | ||
// Custom props. | ||
buttonRef, | ||
@@ -77,17 +84,22 @@ className, | ||
expanded, | ||
pressed | ||
pressed, | ||
// Standard <button> props. | ||
type = 'button' | ||
} = _ref, | ||
restProps = _objectWithoutProperties(_ref, ["buttonRef", "className", "icon", "iconPosition", "size", "variant", "expanded", "pressed"]); | ||
restProps = _objectWithoutProperties(_ref, ["buttonRef", "className", "icon", "iconPosition", "size", "variant", "expanded", "pressed", "type"]); | ||
restProps['aria-expanded'] = expanded; | ||
restProps['aria-pressed'] = pressed; | ||
restProps['aria-label'] = restProps.title; | ||
return (0, _jsxDevRuntime.jsxDEV)("button", _objectSpread({ | ||
const ariaProps = { | ||
'aria-expanded': expanded, | ||
'aria-pressed': pressed, | ||
'aria-label': restProps.title | ||
}; | ||
return (0, _jsxDevRuntime.jsxDEV)("button", _objectSpread(_objectSpread({ | ||
ref: buttonRef, | ||
className: (0, _classnames.default)(className, `${className}--${size}`, `${className}--${variant}`, { | ||
[`${className}--icon-${iconPosition}`]: icon | ||
}) | ||
}, restProps), void 0, false, { | ||
}), | ||
type: type | ||
}, ariaProps), restProps), void 0, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 56, | ||
lineNumber: 68, | ||
columnNumber: 5 | ||
@@ -119,3 +131,3 @@ }, this); | ||
fileName: _jsxFileName, | ||
lineNumber: 80, | ||
lineNumber: 94, | ||
columnNumber: 7 | ||
@@ -125,3 +137,3 @@ }, this) | ||
fileName: _jsxFileName, | ||
lineNumber: 79, | ||
lineNumber: 93, | ||
columnNumber: 5 | ||
@@ -133,3 +145,3 @@ }, this); | ||
* | ||
* @param {ButtonProps} props | ||
* @param {ButtonBaseProps} props | ||
*/ | ||
@@ -156,3 +168,3 @@ | ||
fileName: _jsxFileName, | ||
lineNumber: 98, | ||
lineNumber: 112, | ||
columnNumber: 43 | ||
@@ -163,3 +175,3 @@ }, this), children, icon && iconPosition === 'right' && (0, _jsxDevRuntime.jsxDEV)(_SvgIcon.SvgIcon, { | ||
fileName: _jsxFileName, | ||
lineNumber: 100, | ||
lineNumber: 114, | ||
columnNumber: 44 | ||
@@ -169,3 +181,3 @@ }, this)] | ||
fileName: _jsxFileName, | ||
lineNumber: 97, | ||
lineNumber: 111, | ||
columnNumber: 5 | ||
@@ -177,3 +189,3 @@ }, this); | ||
* | ||
* @param {ButtonProps} props | ||
* @param {ButtonBaseProps} props | ||
*/ | ||
@@ -187,3 +199,3 @@ | ||
fileName: _jsxFileName, | ||
lineNumber: 111, | ||
lineNumber: 125, | ||
columnNumber: 10 | ||
@@ -190,0 +202,0 @@ }, this); |
@@ -0,4 +1,6 @@ | ||
export { Panel } from "./components/Panel"; | ||
export { useElementShouldClose } from "./hooks/use-element-should-close"; | ||
export { normalizeKeyName } from "./browser-compatibility-utils"; | ||
export { LabeledCheckbox, Checkbox } from "./components/Checkbox"; | ||
export { IconButton, LabeledButton, LinkButton } from "./components/buttons"; | ||
export { SvgIcon, registerIcons } from "./components/SvgIcon"; |
@@ -6,2 +6,14 @@ "use strict"; | ||
}); | ||
Object.defineProperty(exports, "LabeledCheckbox", { | ||
enumerable: true, | ||
get: function () { | ||
return _Checkbox.LabeledCheckbox; | ||
} | ||
}); | ||
Object.defineProperty(exports, "Checkbox", { | ||
enumerable: true, | ||
get: function () { | ||
return _Checkbox.Checkbox; | ||
} | ||
}); | ||
Object.defineProperty(exports, "IconButton", { | ||
@@ -25,2 +37,8 @@ enumerable: true, | ||
}); | ||
Object.defineProperty(exports, "Panel", { | ||
enumerable: true, | ||
get: function () { | ||
return _Panel.Panel; | ||
} | ||
}); | ||
Object.defineProperty(exports, "SvgIcon", { | ||
@@ -51,4 +69,8 @@ enumerable: true, | ||
var _Checkbox = require("./components/Checkbox"); | ||
var _buttons = require("./components/buttons"); | ||
var _Panel = require("./components/Panel"); | ||
var _SvgIcon = require("./components/SvgIcon"); | ||
@@ -55,0 +77,0 @@ |
@@ -10,4 +10,12 @@ "use strict"; | ||
var _SharedMoleculePatterns = _interopRequireDefault(require("./patterns/SharedMoleculePatterns")); | ||
var _SharedOrganismPatterns = _interopRequireDefault(require("./patterns/SharedOrganismPatterns")); | ||
var _SharedButtonPatterns = _interopRequireDefault(require("./patterns/SharedButtonPatterns")); | ||
var _SharedFormPatterns = _interopRequireDefault(require("./patterns/SharedFormPatterns")); | ||
var _SharedPanelPatterns = _interopRequireDefault(require("./patterns/SharedPanelPatterns")); | ||
var _router = require("../router"); | ||
@@ -36,3 +44,3 @@ | ||
fileName: _jsxFileName, | ||
lineNumber: 19, | ||
lineNumber: 26, | ||
columnNumber: 7 | ||
@@ -43,3 +51,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", { | ||
fileName: _jsxFileName, | ||
lineNumber: 20, | ||
lineNumber: 27, | ||
columnNumber: 7 | ||
@@ -49,15 +57,39 @@ }, this)] | ||
} | ||
/** @type {PlaygroundRoute[]} */ | ||
/** @type {PlaygroundRoute} */ | ||
const routes = [{ | ||
const homeRoute = { | ||
route: /^\/?$/, | ||
title: 'Home', | ||
component: HomeRoute | ||
}; | ||
/** @type {PlaygroundRoute[]} */ | ||
const patternRoutes = [{ | ||
route: '/shared-molecules', | ||
title: 'Molecules', | ||
component: _SharedMoleculePatterns.default | ||
}, { | ||
route: '/shared-organisms', | ||
title: 'Organisms', | ||
component: _SharedOrganismPatterns.default | ||
}]; | ||
/** @type {PlaygroundRoute[]} */ | ||
const componentRoutes = [{ | ||
route: '/shared-buttons', | ||
title: 'Buttons', | ||
component: _SharedButtonPatterns.default | ||
}, { | ||
route: '/shared-forms', | ||
title: 'Forms', | ||
component: _SharedFormPatterns.default | ||
}, { | ||
route: '/shared-panel', | ||
title: 'Panel', | ||
component: _SharedPanelPatterns.default | ||
}]; | ||
const demoRoutes = routes.filter(r => r.component !== HomeRoute); | ||
/** @type {PlaygroundRoute[]} */ | ||
const routes = [homeRoute, ...patternRoutes, ...componentRoutes]; | ||
/** | ||
@@ -86,3 +118,3 @@ * @typedef PlaygroundAppProps | ||
fileName: _jsxFileName, | ||
lineNumber: 62, | ||
lineNumber: 96, | ||
columnNumber: 5 | ||
@@ -95,3 +127,3 @@ }, this) : (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, { | ||
fileName: _jsxFileName, | ||
lineNumber: 65, | ||
lineNumber: 99, | ||
columnNumber: 7 | ||
@@ -102,3 +134,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("p", { | ||
fileName: _jsxFileName, | ||
lineNumber: 66, | ||
lineNumber: 100, | ||
columnNumber: 7 | ||
@@ -120,3 +152,3 @@ }, this)] | ||
fileName: _jsxFileName, | ||
lineNumber: 75, | ||
lineNumber: 109, | ||
columnNumber: 13 | ||
@@ -126,3 +158,3 @@ }, this) | ||
fileName: _jsxFileName, | ||
lineNumber: 74, | ||
lineNumber: 108, | ||
columnNumber: 11 | ||
@@ -132,3 +164,3 @@ }, this) | ||
fileName: _jsxFileName, | ||
lineNumber: 73, | ||
lineNumber: 107, | ||
columnNumber: 9 | ||
@@ -139,21 +171,23 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("h2", { | ||
fileName: _jsxFileName, | ||
lineNumber: 78, | ||
lineNumber: 112, | ||
columnNumber: 9 | ||
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", { | ||
children: demoRoutes.map(c => (0, _jsxDevRuntime.jsxDEV)("li", { | ||
className: "PlaygroundApp__nav-list", | ||
children: patternRoutes.map(({ | ||
route, | ||
title | ||
}) => (0, _jsxDevRuntime.jsxDEV)("li", { | ||
className: "PlaygroundApp__nav-item", | ||
children: (0, _jsxDevRuntime.jsxDEV)("a", { | ||
className: "PlaygroundApp__nav-link", | ||
href: | ||
/** @type string */ | ||
c.route, | ||
onClick: e => navigate(e, c.route), | ||
children: c.title | ||
}, c.route, false, { | ||
href: `${route}`, | ||
onClick: e => navigate(e, route), | ||
children: title | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 82, | ||
lineNumber: 116, | ||
columnNumber: 15 | ||
}, this) | ||
}, c.route, false, { | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 81, | ||
lineNumber: 115, | ||
columnNumber: 13 | ||
@@ -163,4 +197,35 @@ }, this)) | ||
fileName: _jsxFileName, | ||
lineNumber: 79, | ||
lineNumber: 113, | ||
columnNumber: 9 | ||
}, this), (0, _jsxDevRuntime.jsxDEV)("h2", { | ||
children: "Common Components" | ||
}, void 0, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 126, | ||
columnNumber: 9 | ||
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", { | ||
className: "PlaygroundApp__nav-list", | ||
children: componentRoutes.map(({ | ||
route, | ||
title | ||
}) => (0, _jsxDevRuntime.jsxDEV)("li", { | ||
className: "PlaygroundApp__nav-item", | ||
children: (0, _jsxDevRuntime.jsxDEV)("a", { | ||
href: `${route}`, | ||
onClick: e => navigate(e, route), | ||
children: title | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 130, | ||
columnNumber: 15 | ||
}, this) | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 129, | ||
columnNumber: 13 | ||
}, this)) | ||
}, void 0, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 127, | ||
columnNumber: 9 | ||
}, this), extraRoutes.length > 0 && (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, { | ||
@@ -171,21 +236,23 @@ children: [(0, _jsxDevRuntime.jsxDEV)("h2", { | ||
fileName: _jsxFileName, | ||
lineNumber: 95, | ||
lineNumber: 142, | ||
columnNumber: 13 | ||
}, this), (0, _jsxDevRuntime.jsxDEV)("ul", { | ||
children: extraRoutes.map(c => (0, _jsxDevRuntime.jsxDEV)("li", { | ||
className: "PlaygroundApp__nav-list", | ||
children: extraRoutes.map(({ | ||
route, | ||
title | ||
}) => (0, _jsxDevRuntime.jsxDEV)("li", { | ||
className: "PlaygroundApp__nav-item", | ||
children: (0, _jsxDevRuntime.jsxDEV)("a", { | ||
className: "PlaygroundApp__nav-link", | ||
href: | ||
/** @type string */ | ||
c.route, | ||
onClick: e => navigate(e, c.route), | ||
children: c.title | ||
}, c.route, false, { | ||
href: `${route}`, | ||
onClick: e => navigate(e, route), | ||
children: title | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 99, | ||
lineNumber: 146, | ||
columnNumber: 19 | ||
}, this) | ||
}, c.route, false, { | ||
}, route, false, { | ||
fileName: _jsxFileName, | ||
lineNumber: 98, | ||
lineNumber: 145, | ||
columnNumber: 17 | ||
@@ -195,3 +262,3 @@ }, this)) | ||
fileName: _jsxFileName, | ||
lineNumber: 96, | ||
lineNumber: 143, | ||
columnNumber: 13 | ||
@@ -202,3 +269,3 @@ }, this)] | ||
fileName: _jsxFileName, | ||
lineNumber: 72, | ||
lineNumber: 106, | ||
columnNumber: 7 | ||
@@ -210,3 +277,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
fileName: _jsxFileName, | ||
lineNumber: 113, | ||
lineNumber: 159, | ||
columnNumber: 7 | ||
@@ -216,3 +283,3 @@ }, this)] | ||
fileName: _jsxFileName, | ||
lineNumber: 71, | ||
lineNumber: 105, | ||
columnNumber: 5 | ||
@@ -219,0 +286,0 @@ }, this); |
@@ -12,3 +12,3 @@ "use strict"; | ||
var _icons = _interopRequireDefault(require("./icons")); | ||
var _icons = _interopRequireDefault(require("../icons")); | ||
@@ -15,0 +15,0 @@ var _PlaygroundApp = _interopRequireDefault(require("./components/PlaygroundApp")); |
{ | ||
"name": "@hypothesis/frontend-shared", | ||
"version": "1.13.0", | ||
"version": "2.0.0", | ||
"description": "Shared components, styles and utilities for Hypothesis projects", | ||
@@ -25,3 +25,3 @@ "license": "BSD-2-Clause", | ||
"eslint": "^7.3.1", | ||
"eslint-config-hypothesis": "^2.4.0", | ||
"eslint-config-hypothesis": "^2.5.0", | ||
"eslint-plugin-jsx-a11y": "^6.2.3", | ||
@@ -28,0 +28,0 @@ "eslint-plugin-mocha": "^8.0.0", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
292418
82
3748
0