Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@hypothesis/frontend-shared
Advanced tools
@hypothesis/frontend-shared - npm Package Compare versions
Comparing version 3.0.0 to 3.1.1
@@ -8,2 +8,14 @@ # Changelog | ||
| ## [v3.1.1] - 2021-06-11 | ||
| Fix typo in Changelog. | ||
| ## [v3.1.0] - 2021-06-11 | ||
| Updates `Checkbox` to use styled SVG for appearance and introduces an internal | ||
| spacing system. | ||
| - Add styling, design pattern for checkbox components [#95](https://github.com/hypothesis/frontend-shared/pull/95) | ||
| - Introduce spacing-unit scale and spacing patterns [#92](https://github.com/hypothesis/frontend-shared/pull/92) | ||
| ## [v3.0.0] - 2021-06-08 | ||
@@ -10,0 +22,0 @@ |
@@ -103,2 +103,5 @@ /** | ||
| headers?: string; | ||
| name?: string; | ||
| className?: string; | ||
| class?: string; | ||
| onToggle?: import("preact").JSX.GenericEventHandler<HTMLButtonElement>; | ||
@@ -126,4 +129,2 @@ accept?: string; | ||
| checked?: boolean; | ||
| class?: string; | ||
| className?: string; | ||
| cols?: number; | ||
@@ -173,3 +174,2 @@ colSpan?: number; | ||
| muted?: boolean; | ||
| name?: string; | ||
| nonce?: string; | ||
@@ -395,3 +395,3 @@ noValidate?: boolean; | ||
| */ | ||
| 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 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" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "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" | "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 = { | ||
@@ -411,2 +411,2 @@ /** | ||
| }; | ||
| 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; | ||
| 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" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "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" | "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; |
@@ -19,3 +19,2 @@ /** | ||
| * @prop {import('preact').ComponentChildren} children - Label text or elements | ||
| * @prop {'before'|'after'} [position] - Position the label before or after the checkbox. Defaults to 'before'. | ||
| * | ||
@@ -25,4 +24,7 @@ * @typedef {Omit<CheckboxProps, 'children'> & LabeledCheckboxBaseProps} LabeledCheckboxProps | ||
| /** | ||
| * A checkbox input | ||
| * A checkbox input. | ||
| * | ||
| * A checkbox component is a combination of an <input> element and a sibling | ||
| * <svg> element that is used for the visual appearance of the checkbox. | ||
| * | ||
| * @param {CheckboxProps} props | ||
@@ -36,3 +38,3 @@ */ | ||
| */ | ||
| export function LabeledCheckbox({ children, position, id, ...restProps }: LabeledCheckboxProps): any; | ||
| export function LabeledCheckbox({ children, id, ...restProps }: LabeledCheckboxProps): any; | ||
| export type CheckboxBaseProps = { | ||
@@ -66,3 +68,3 @@ /** | ||
| }; | ||
| export type CheckboxProps = Pick<import("preact").JSX.HTMLAttributes<HTMLInputElement>, "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" | "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" | "size" | "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"> & CheckboxBaseProps; | ||
| export type CheckboxProps = Pick<import("preact").JSX.HTMLAttributes<HTMLInputElement>, "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" | "name" | "className" | "class" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "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" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "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"> & CheckboxBaseProps; | ||
| export type LabeledCheckboxBaseProps = { | ||
@@ -73,7 +75,3 @@ /** | ||
| children: import('preact').ComponentChildren; | ||
| /** | ||
| * - Position the label before or after the checkbox. Defaults to 'before'. | ||
| */ | ||
| position?: 'before' | 'after'; | ||
| }; | ||
| export type LabeledCheckboxProps = Pick<CheckboxProps, "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" | "size" | "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" | "dangerouslySetInnerHTML" | "inputRef"> & LabeledCheckboxBaseProps; | ||
| export type LabeledCheckboxProps = Pick<CheckboxProps, "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" | "name" | "className" | "class" | "onToggle" | "accept" | "acceptCharset" | "accessKey" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autocomplete" | "autoComplete" | "autocorrect" | "autoCorrect" | "autofocus" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "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" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "radioGroup" | "readOnly" | "rel" | "role" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "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" | "dangerouslySetInnerHTML" | "inputRef"> & LabeledCheckboxBaseProps; |
@@ -9,2 +9,4 @@ "use strict"; | ||
| var _SvgIcon = require("./SvgIcon"); | ||
| var _jsxDevRuntime = require("preact/compat/jsx-dev-runtime"); | ||
@@ -24,2 +26,7 @@ | ||
| // Register the checkbox icon for use | ||
| (0, _SvgIcon.registerIcons)({ | ||
| /** @ts-ignore - TS doesn't understand require here */ | ||
| 'hyp-checkbox': require('../../images/icons/checkbox.svg') | ||
| }); | ||
| /** | ||
@@ -44,3 +51,2 @@ * @typedef CheckboxBaseProps | ||
| * @prop {import('preact').ComponentChildren} children - Label text or elements | ||
| * @prop {'before'|'after'} [position] - Position the label before or after the checkbox. Defaults to 'before'. | ||
| * | ||
@@ -51,6 +57,10 @@ * @typedef {Omit<CheckboxProps, 'children'> & LabeledCheckboxBaseProps} LabeledCheckboxProps | ||
| /** | ||
| * A checkbox input | ||
| * A checkbox input. | ||
| * | ||
| * A checkbox component is a combination of an <input> element and a sibling | ||
| * <svg> element that is used for the visual appearance of the checkbox. | ||
| * | ||
| * @param {CheckboxProps} props | ||
| */ | ||
| function Checkbox(_ref) { | ||
@@ -76,11 +86,21 @@ let { | ||
| return (0, _jsxDevRuntime.jsxDEV)("input", _objectSpread({ | ||
| ref: inputRef, | ||
| type: "checkbox", | ||
| onClick: onPressed | ||
| }, restProps), void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 44, | ||
| columnNumber: 5 | ||
| }, this); | ||
| return (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, { | ||
| children: [(0, _jsxDevRuntime.jsxDEV)("input", _objectSpread({ | ||
| className: "Hyp-Checkbox", | ||
| ref: inputRef, | ||
| type: "checkbox", | ||
| onClick: onPressed | ||
| }, restProps), void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 55, | ||
| columnNumber: 7 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(_SvgIcon.SvgIcon, { | ||
| className: "hyp-svg-checkbox", | ||
| name: "hyp-checkbox" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 62, | ||
| columnNumber: 7 | ||
| }, this)] | ||
| }, void 0, true); | ||
| } | ||
@@ -99,32 +119,30 @@ /** | ||
| children, | ||
| position = 'after', | ||
| id | ||
| } = _ref2, | ||
| restProps = _objectWithoutProperties(_ref2, ["children", "position", "id"]); | ||
| restProps = _objectWithoutProperties(_ref2, ["children", "id"]); | ||
| (_id = id) !== null && _id !== void 0 ? _id : id = restProps.name; | ||
| return (0, _jsxDevRuntime.jsxDEV)(_jsxDevRuntime.Fragment, { | ||
| children: [position === 'before' && (0, _jsxDevRuntime.jsxDEV)("label", { | ||
| htmlFor: id, | ||
| children: children | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 62, | ||
| columnNumber: 33 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(Checkbox, _objectSpread({ | ||
| return (0, _jsxDevRuntime.jsxDEV)("label", { | ||
| htmlFor: id, | ||
| className: "Hyp-LabeledCheckbox", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)(Checkbox, _objectSpread({ | ||
| id: id | ||
| }, restProps), void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 63, | ||
| lineNumber: 76, | ||
| columnNumber: 7 | ||
| }, this), position === 'after' && (0, _jsxDevRuntime.jsxDEV)("label", { | ||
| htmlFor: id, | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("span", { | ||
| "data-testid": "label-text", | ||
| children: children | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 64, | ||
| columnNumber: 32 | ||
| lineNumber: 77, | ||
| columnNumber: 7 | ||
| }, this)] | ||
| }, void 0, true); | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 75, | ||
| columnNumber: 5 | ||
| }, this); | ||
| } | ||
| //# sourceMappingURL=Checkbox.js.map |
@@ -13,2 +13,3 @@ "use strict"; | ||
| check: require('../images/icons/check.svg'), | ||
| checkbox: require('../images/icons/checkbox.svg'), | ||
| collapsed: require('../images/icons/collapsed.svg'), | ||
@@ -15,0 +16,0 @@ edit: require('../images/icons/edit.svg'), |
@@ -35,2 +35,5 @@ "use strict"; | ||
| details: "A checkbox, defaulting to checked", | ||
| style: { | ||
| width: '300px' | ||
| }, | ||
| children: (0, _jsxDevRuntime.jsxDEV)(_.LabeledCheckbox, { | ||
@@ -43,3 +46,3 @@ name: "test", | ||
| fileName: _jsxFileName, | ||
| lineNumber: 25, | ||
| lineNumber: 28, | ||
| columnNumber: 13 | ||
@@ -52,18 +55,11 @@ }, this) | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExample, { | ||
| details: "A custom label positioned before the checkbox", | ||
| details: "A checkbox, unchecked", | ||
| children: (0, _jsxDevRuntime.jsxDEV)(_.LabeledCheckbox, { | ||
| checked: wantWatermelon, | ||
| name: "test-alternative", | ||
| position: "before", | ||
| onToggle: isChecked => setWantWatermelon(isChecked), | ||
| children: (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: "I want a watermelon" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 40, | ||
| columnNumber: 15 | ||
| }, this) | ||
| children: "I want a watermelon" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 34, | ||
| lineNumber: 37, | ||
| columnNumber: 13 | ||
@@ -73,3 +69,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 33, | ||
| lineNumber: 36, | ||
| columnNumber: 11 | ||
@@ -76,0 +72,0 @@ }, this)] |
@@ -8,2 +8,4 @@ "use strict"; | ||
| var _classnames = _interopRequireDefault(require("classnames")); | ||
| var _hooks = require("preact/hooks"); | ||
@@ -19,2 +21,103 @@ | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
| function SquareBlock() { | ||
| return (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-bg-color--grey-4", | ||
| style: { | ||
| width: '2rem', | ||
| height: '2rem' | ||
| } | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 15, | ||
| columnNumber: 5 | ||
| }, this); | ||
| } | ||
| /** | ||
| * Render an example of vertical or horizontal spacing between elements. | ||
| * | ||
| * @param {Object} options | ||
| * @param {'horizontal'|'vertical'} options.direction | ||
| * @param {number} options.size - Spacing unit size, 0 - 9 | ||
| * @param {boolean} [options.defaultSize] - Is this the "default" spacing for | ||
| * this orientation? | ||
| */ | ||
| function SpacingDemo({ | ||
| direction, | ||
| size, | ||
| defaultSize = false | ||
| }) { | ||
| const layoutClass = direction === 'vertical' ? 'hyp-u-layout-column' : 'hyp-u-layout-row'; | ||
| const baseClass = direction === 'vertical' ? 'hyp-u-vertical-spacing' : 'hyp-u-horizontal-spacing'; | ||
| const sizeClass = `${baseClass}--${size}`; | ||
| return (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: (0, _classnames.default)(layoutClass, baseClass), | ||
| children: [defaultSize ? (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| children: (0, _jsxDevRuntime.jsxDEV)("strong", { | ||
| children: [size, "*"] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 43, | ||
| columnNumber: 11 | ||
| }, this) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 42, | ||
| columnNumber: 9 | ||
| }, this) : (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| children: size | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 46, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: (0, _classnames.default)(layoutClass, sizeClass, 'hyp-u-border'), | ||
| children: [(0, _jsxDevRuntime.jsxDEV)(SquareBlock, {}, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 49, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SquareBlock, {}, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 50, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SquareBlock, {}, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 51, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SquareBlock, {}, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 52, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SquareBlock, {}, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 53, | ||
| columnNumber: 9 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 48, | ||
| columnNumber: 7 | ||
| }, this), direction === 'horizontal' && (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| children: (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: [".", sizeClass] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 57, | ||
| columnNumber: 11 | ||
| }, this) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 56, | ||
| columnNumber: 9 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 40, | ||
| columnNumber: 5 | ||
| }, this); | ||
| } | ||
| function LayoutPatterns() { | ||
@@ -24,5 +127,284 @@ const [showExample1, setShowExample1] = (0, _hooks.useState)(false); | ||
| const [showExample3, setShowExample3] = (0, _hooks.useState)(false); | ||
| const scaleUnits = ['0', '0.125rem', '0.25rem', '0.5rem', '0.75rem', '1rem (default unit)', '1.5rem', '2rem', '4rem', '8rem']; | ||
| return (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternPage, { | ||
| title: "Layout", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| title: "Spacing Units", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)("p", { | ||
| children: ["Spacing units provide a way to apply predefined, consistent spacing dimensions between (margins) and around (padding) elements. Our spacing is based on a ", (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: "1rem" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 86, | ||
| columnNumber: 33 | ||
| }, this), " foundational unit."] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 83, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-vertical-spacing", | ||
| children: scaleUnits.map((unitLength, idx) => (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: `hyp-u-layout-row hyp-u-bg-color--grey-5 hyp-u-horizontal-spacing--${idx}`, | ||
| children: [(0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-bg-color--white", | ||
| style: { | ||
| paddingRight: '1rem' | ||
| }, | ||
| children: (0, _jsxDevRuntime.jsxDEV)("strong", { | ||
| children: idx | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 98, | ||
| columnNumber: 17 | ||
| }, this) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 94, | ||
| columnNumber: 15 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-bg-color--white hyp-u-stretch", | ||
| style: { | ||
| paddingLeft: '1rem' | ||
| }, | ||
| children: (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: unitLength | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 104, | ||
| columnNumber: 17 | ||
| }, this) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 100, | ||
| columnNumber: 15 | ||
| }, this)] | ||
| }, idx, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 90, | ||
| columnNumber: 13 | ||
| }, this)) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 88, | ||
| columnNumber: 9 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 82, | ||
| columnNumber: 7 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| title: "Horizontal spacing", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)("p", { | ||
| children: "Sometimes you may need to apply or adjust horizontal spacing between an element's immediate children." | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 111, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("p", { | ||
| children: ["The default spacing unit used by", ' ', (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: ".hyp-u-horizontal-spacing" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 118, | ||
| columnNumber: 11 | ||
| }, this), " and mixins is 3, marked with an asterisk below."] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 116, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-vertical-spacing", | ||
| children: (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-layout-column hyp-u-vertical-spacing", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 0 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 124, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 1 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 125, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 2 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 126, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 3, | ||
| defaultSize: true | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 127, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 4 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 128, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 5 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 129, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 6 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 130, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 7 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 131, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 8 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 132, | ||
| columnNumber: 13 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "horizontal", | ||
| size: 9 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 133, | ||
| columnNumber: 13 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 123, | ||
| columnNumber: 11 | ||
| }, this) | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 122, | ||
| columnNumber: 9 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 110, | ||
| columnNumber: 7 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| title: "Vertical spacing", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)("p", { | ||
| children: "Sometimes you may need to apply or adjust vertical spacing between an element's immediate children." | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 138, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("p", { | ||
| children: ["The default spacing unit used by ", (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| children: ".hyp-u-vertical-spacing" | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 144, | ||
| columnNumber: 44 | ||
| }, this), ' ', "and mixins is 5, marked with an asterisk below."] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 143, | ||
| columnNumber: 9 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| className: "hyp-u-layout-row hyp-u-horizontal-spacing--7", | ||
| children: [(0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 0 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 148, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 1 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 149, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 2 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 150, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 3 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 151, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 4 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 152, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 5, | ||
| defaultSize: true | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 153, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 6 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 154, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 7 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 155, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 8 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 156, | ||
| columnNumber: 11 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(SpacingDemo, { | ||
| direction: "vertical", | ||
| size: 9 | ||
| }, void 0, false, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 157, | ||
| columnNumber: 11 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 147, | ||
| columnNumber: 9 | ||
| }, this)] | ||
| }, void 0, true, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 137, | ||
| columnNumber: 7 | ||
| }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| title: "Fixed-Centered Positioning", | ||
@@ -34,3 +416,3 @@ children: [(0, _jsxDevRuntime.jsxDEV)("p", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 20, | ||
| lineNumber: 162, | ||
| columnNumber: 15 | ||
@@ -40,3 +422,3 @@ }, this), " layout pattern centers an element both horizontally and vertically within the entire viewport."] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 19, | ||
| lineNumber: 161, | ||
| columnNumber: 9 | ||
@@ -53,3 +435,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 26, | ||
| lineNumber: 168, | ||
| columnNumber: 15 | ||
@@ -65,3 +447,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 39, | ||
| lineNumber: 181, | ||
| columnNumber: 19 | ||
@@ -76,3 +458,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 44, | ||
| lineNumber: 186, | ||
| columnNumber: 21 | ||
@@ -82,3 +464,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 43, | ||
| lineNumber: 185, | ||
| columnNumber: 19 | ||
@@ -88,3 +470,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 38, | ||
| lineNumber: 180, | ||
| columnNumber: 17 | ||
@@ -94,3 +476,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 32, | ||
| lineNumber: 174, | ||
| columnNumber: 15 | ||
@@ -100,3 +482,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 25, | ||
| lineNumber: 167, | ||
| columnNumber: 13 | ||
@@ -106,3 +488,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 24, | ||
| lineNumber: 166, | ||
| columnNumber: 11 | ||
@@ -112,3 +494,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 23, | ||
| lineNumber: 165, | ||
| columnNumber: 9 | ||
@@ -118,3 +500,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 18, | ||
| lineNumber: 160, | ||
| columnNumber: 7 | ||
@@ -128,3 +510,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 59, | ||
| lineNumber: 201, | ||
| columnNumber: 15 | ||
@@ -134,3 +516,3 @@ }, this), " layout pattern provides a full-viewport, semi-opaque overlay that obscures UI interactions in the viewport below. It is intended for use as a backdrop for modals, e.g."] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 58, | ||
| lineNumber: 200, | ||
| columnNumber: 9 | ||
@@ -147,3 +529,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 66, | ||
| lineNumber: 208, | ||
| columnNumber: 15 | ||
@@ -160,3 +542,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 79, | ||
| lineNumber: 221, | ||
| columnNumber: 19 | ||
@@ -166,3 +548,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 78, | ||
| lineNumber: 220, | ||
| columnNumber: 17 | ||
@@ -172,3 +554,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 72, | ||
| lineNumber: 214, | ||
| columnNumber: 15 | ||
@@ -178,3 +560,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 65, | ||
| lineNumber: 207, | ||
| columnNumber: 13 | ||
@@ -184,3 +566,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 64, | ||
| lineNumber: 206, | ||
| columnNumber: 11 | ||
@@ -190,3 +572,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 63, | ||
| lineNumber: 205, | ||
| columnNumber: 9 | ||
@@ -196,3 +578,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 57, | ||
| lineNumber: 199, | ||
| columnNumber: 7 | ||
@@ -206,3 +588,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.Pattern, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 91, | ||
| lineNumber: 233, | ||
| columnNumber: 50 | ||
@@ -213,3 +595,3 @@ }, this), " and", ' ', (0, _jsxDevRuntime.jsxDEV)("code", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 92, | ||
| lineNumber: 234, | ||
| columnNumber: 11 | ||
@@ -219,3 +601,3 @@ }, this), " patterns."] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 90, | ||
| lineNumber: 232, | ||
| columnNumber: 9 | ||
@@ -232,3 +614,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)(_PatternPage.PatternExamples, { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 97, | ||
| lineNumber: 239, | ||
| columnNumber: 15 | ||
@@ -247,3 +629,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 111, | ||
| lineNumber: 253, | ||
| columnNumber: 21 | ||
@@ -258,3 +640,3 @@ }, this), (0, _jsxDevRuntime.jsxDEV)("div", { | ||
| fileName: _jsxFileName, | ||
| lineNumber: 116, | ||
| lineNumber: 258, | ||
| columnNumber: 23 | ||
@@ -264,3 +646,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 115, | ||
| lineNumber: 257, | ||
| columnNumber: 21 | ||
@@ -270,3 +652,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 110, | ||
| lineNumber: 252, | ||
| columnNumber: 19 | ||
@@ -276,3 +658,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 109, | ||
| lineNumber: 251, | ||
| columnNumber: 17 | ||
@@ -282,3 +664,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 103, | ||
| lineNumber: 245, | ||
| columnNumber: 15 | ||
@@ -288,3 +670,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 96, | ||
| lineNumber: 238, | ||
| columnNumber: 13 | ||
@@ -294,3 +676,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 95, | ||
| lineNumber: 237, | ||
| columnNumber: 11 | ||
@@ -300,3 +682,3 @@ }, this) | ||
| fileName: _jsxFileName, | ||
| lineNumber: 94, | ||
| lineNumber: 236, | ||
| columnNumber: 9 | ||
@@ -306,3 +688,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 89, | ||
| lineNumber: 231, | ||
| columnNumber: 7 | ||
@@ -312,3 +694,3 @@ }, this)] | ||
| fileName: _jsxFileName, | ||
| lineNumber: 17, | ||
| lineNumber: 81, | ||
| columnNumber: 5 | ||
@@ -315,0 +697,0 @@ }, this); |
| { | ||
| "name": "@hypothesis/frontend-shared", | ||
| "version": "3.0.0", | ||
| "version": "3.1.1", | ||
| "description": "Shared components, styles and utilities for Hypothesis projects", | ||
@@ -5,0 +5,0 @@ "license": "BSD-2-Clause", |
@@ -60,10 +60,10 @@ # SASS structure and conventions | ||
| | Directory | Description | Provides | Dependencies | | ||
| | ------------ | ----------------------------------------------------------- | --------- | --------------------- | | ||
| | `base` | Reset and element styles. Used only by the pattern library. | styles | mixins, variables[^1] | | ||
| | `components` | Styles for shared components | styles | any | | ||
| | `mixins` | Mixins | mixins | mixins[^2], variables | | ||
| | `patterns` | Pattern styles | styles | mixins | | ||
| | `util` | Utility styles | styles | mixins | | ||
| | `variables` | Variables | variables | none | | ||
| | Directory | Description | Provides | Dependencies | | ||
| | ------------ | ------------------------------------------------------------- | -------------------- | --------------------- | | ||
| | `base` | Reset and element styles. Used only by the pattern library. | styles | mixins, variables[^1] | | ||
| | `components` | Styles for shared components | styles | any | | ||
| | `mixins` | Mixins | mixins | mixins[^2], variables | | ||
| | `patterns` | Pattern styles | styles | mixins | | ||
| | `util` | Utility styles | styles | mixins | | ||
| | `variables` | Variables and functions that return values based on variables | variables, functions | none | | ||
@@ -70,0 +70,0 @@ ## CSS Output and Ordering |
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
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
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by6.99%
437152
- Number of package files
- increased by1.94%
105
- Lines of code
- increased by7.14%
5820
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes