@availity/mui-accordion 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/README.md +61 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.js +79 -0
- package/dist/index.mjs +43 -0
- package/introduction.stories.mdx +7 -0
- package/jest.config.js +7 -0
- package/package.json +51 -0
- package/project.json +42 -0
- package/src/index.ts +4 -0
- package/src/lib/Accordion.stories.tsx +110 -0
- package/src/lib/Accordion.test.tsx +13 -0
- package/src/lib/Accordion.tsx +8 -0
- package/src/lib/AccordionActions.stories.tsx +22 -0
- package/src/lib/AccordionActions.test.tsx +9 -0
- package/src/lib/AccordionActions.tsx +8 -0
- package/src/lib/AccordionDetails.stories.tsx +21 -0
- package/src/lib/AccordionDetails.test.tsx +9 -0
- package/src/lib/AccordionDetails.tsx +8 -0
- package/src/lib/AccordionSummary.stories.tsx +20 -0
- package/src/lib/AccordionSummary.test.tsx +9 -0
- package/src/lib/AccordionSummary.tsx +21 -0
- package/tsconfig.json +5 -0
- package/tsconfig.spec.json +10 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
|
|
4
|
+
|
|
5
|
+
## 0.1.0 (2024-03-15)
|
|
6
|
+
|
|
7
|
+
### Dependency Updates
|
|
8
|
+
|
|
9
|
+
* `mui-icon` updated to version `0.8.0`
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **mui-accordion:** add accordion package ([83e6bfd](https://github.com/Availity/element/commit/83e6bfd5f8c07750e59d44edaccbd4a713cc6fc8))
|
package/README.md
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# @availity/mui-accordion
|
|
2
|
+
|
|
3
|
+
> Availity MUI Accordion component to be used with @availity/element design system.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@availity/mui-accordion)
|
|
6
|
+
[](https://www.npmjs.com/package/@availity/mui-accordion)
|
|
7
|
+
[](https://github.com/Availity/element/blob/main/packages/mui-accordion/package.json)
|
|
8
|
+
|
|
9
|
+
## Documentation
|
|
10
|
+
|
|
11
|
+
This package extends the MUI Accordion component: [MUI Accordion Docs](https://mui.com/components/accordion/)
|
|
12
|
+
|
|
13
|
+
Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-accordion-introduction--docs)
|
|
14
|
+
|
|
15
|
+
Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
### Import Through @availity/element (Recommended)
|
|
20
|
+
|
|
21
|
+
#### NPM
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @availity/element
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
#### Yarn
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn add @availity/element
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Direct Import
|
|
34
|
+
|
|
35
|
+
#### NPM
|
|
36
|
+
|
|
37
|
+
_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install @availity/mui-accordion
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
#### Yarn
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
yarn add @availity/mui-accordion
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Usage
|
|
50
|
+
|
|
51
|
+
#### Import through @availity/element
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { Accordion } from '@availity/element';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Direct import
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { Accordion } from '@availity/mui-accordion';
|
|
61
|
+
```
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
|
|
3
|
+
import { AccordionProps as AccordionProps$1 } from '@mui/material/Accordion';
|
|
4
|
+
import { AccordionActionsProps as AccordionActionsProps$1 } from '@mui/material/AccordionActions';
|
|
5
|
+
import { AccordionDetailsProps as AccordionDetailsProps$1 } from '@mui/material/AccordionDetails';
|
|
6
|
+
import { AccordionSummaryProps as AccordionSummaryProps$1 } from '@mui/material/AccordionSummary';
|
|
7
|
+
|
|
8
|
+
type AccordionProps = Omit<AccordionProps$1, 'component' | 'TransitionComponent' | 'TransitionProps'>;
|
|
9
|
+
declare const Accordion: react.ForwardRefExoticComponent<Pick<AccordionProps, keyof _mui_material_OverridableComponent.CommonProps | "onChange" | "children" | "elevation" | "square" | "sx" | "variant" | "color" | "translate" | "defaultExpanded" | "disabled" | "disableGutters" | "expanded" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & react.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
|
|
11
|
+
type AccordionActionsProps = AccordionActionsProps$1;
|
|
12
|
+
declare const AccordionActions: react.ForwardRefExoticComponent<Pick<AccordionActionsProps$1, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "translate" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disableSpacing"> & react.RefAttributes<unknown>>;
|
|
13
|
+
|
|
14
|
+
type AccordionDetailsProps = AccordionDetailsProps$1;
|
|
15
|
+
declare const AccordionDetails: react.ForwardRefExoticComponent<Pick<AccordionDetailsProps$1, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "translate" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & react.RefAttributes<unknown>>;
|
|
16
|
+
|
|
17
|
+
type AccordionSummaryProps = Omit<AccordionSummaryProps$1, 'centerRipple' | 'component' | 'disableRipple' | 'disableTouchRipple' | 'expandIcon' | 'focusRipple' | 'focusVisibleClassname' | 'onFocusVisible' | 'TouchRippleProps' | 'touchRippleRef'>;
|
|
18
|
+
declare const AccordionSummary: react.ForwardRefExoticComponent<Pick<AccordionSummaryProps, "className" | "style" | "classes" | "onChange" | "children" | "sx" | "color" | "translate" | "disabled" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "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" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "focusVisibleClassName" | "LinkComponent"> & react.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
|
|
20
|
+
export { Accordion, AccordionActions, AccordionActionsProps, AccordionDetails, AccordionDetailsProps, AccordionProps, AccordionSummary, AccordionSummaryProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
|
|
26
|
+
// src/index.ts
|
|
27
|
+
var src_exports = {};
|
|
28
|
+
__export(src_exports, {
|
|
29
|
+
Accordion: () => Accordion,
|
|
30
|
+
AccordionActions: () => AccordionActions,
|
|
31
|
+
AccordionDetails: () => AccordionDetails,
|
|
32
|
+
AccordionSummary: () => AccordionSummary
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(src_exports);
|
|
35
|
+
|
|
36
|
+
// src/lib/Accordion.tsx
|
|
37
|
+
var import_Accordion = __toESM(require("@mui/material/Accordion"));
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
40
|
+
var Accordion = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Accordion.default, {
|
|
41
|
+
...props,
|
|
42
|
+
ref
|
|
43
|
+
}));
|
|
44
|
+
|
|
45
|
+
// src/lib/AccordionActions.tsx
|
|
46
|
+
var import_AccordionActions = __toESM(require("@mui/material/AccordionActions"));
|
|
47
|
+
var import_react2 = require("react");
|
|
48
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
|
+
var AccordionActions = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AccordionActions.default, {
|
|
50
|
+
...props,
|
|
51
|
+
ref
|
|
52
|
+
}));
|
|
53
|
+
|
|
54
|
+
// src/lib/AccordionDetails.tsx
|
|
55
|
+
var import_AccordionDetails = __toESM(require("@mui/material/AccordionDetails"));
|
|
56
|
+
var import_react3 = require("react");
|
|
57
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
+
var AccordionDetails = (0, import_react3.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AccordionDetails.default, {
|
|
59
|
+
...props,
|
|
60
|
+
ref
|
|
61
|
+
}));
|
|
62
|
+
|
|
63
|
+
// src/lib/AccordionSummary.tsx
|
|
64
|
+
var import_AccordionSummary = __toESM(require("@mui/material/AccordionSummary"));
|
|
65
|
+
var import_mui_icon = require("@availity/mui-icon");
|
|
66
|
+
var import_react4 = require("react");
|
|
67
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
68
|
+
var AccordionSummary = (0, import_react4.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AccordionSummary.default, {
|
|
69
|
+
...props,
|
|
70
|
+
expandIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.TriangleExpandIcon, {}),
|
|
71
|
+
ref
|
|
72
|
+
}));
|
|
73
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
74
|
+
0 && (module.exports = {
|
|
75
|
+
Accordion,
|
|
76
|
+
AccordionActions,
|
|
77
|
+
AccordionDetails,
|
|
78
|
+
AccordionSummary
|
|
79
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
// src/lib/Accordion.tsx
|
|
2
|
+
import MuiAccordion from "@mui/material/Accordion";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
var Accordion = forwardRef((props, ref) => /* @__PURE__ */ jsx(MuiAccordion, {
|
|
6
|
+
...props,
|
|
7
|
+
ref
|
|
8
|
+
}));
|
|
9
|
+
|
|
10
|
+
// src/lib/AccordionActions.tsx
|
|
11
|
+
import MuiAccordionActions from "@mui/material/AccordionActions";
|
|
12
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
13
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
14
|
+
var AccordionActions = forwardRef2((props, ref) => /* @__PURE__ */ jsx2(MuiAccordionActions, {
|
|
15
|
+
...props,
|
|
16
|
+
ref
|
|
17
|
+
}));
|
|
18
|
+
|
|
19
|
+
// src/lib/AccordionDetails.tsx
|
|
20
|
+
import MuiAccordionDetails from "@mui/material/AccordionDetails";
|
|
21
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
22
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
23
|
+
var AccordionDetails = forwardRef3((props, ref) => /* @__PURE__ */ jsx3(MuiAccordionDetails, {
|
|
24
|
+
...props,
|
|
25
|
+
ref
|
|
26
|
+
}));
|
|
27
|
+
|
|
28
|
+
// src/lib/AccordionSummary.tsx
|
|
29
|
+
import MuiAccordionSummary from "@mui/material/AccordionSummary";
|
|
30
|
+
import { TriangleExpandIcon } from "@availity/mui-icon";
|
|
31
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
32
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
33
|
+
var AccordionSummary = forwardRef4((props, ref) => /* @__PURE__ */ jsx4(MuiAccordionSummary, {
|
|
34
|
+
...props,
|
|
35
|
+
expandIcon: /* @__PURE__ */ jsx4(TriangleExpandIcon, {}),
|
|
36
|
+
ref
|
|
37
|
+
}));
|
|
38
|
+
export {
|
|
39
|
+
Accordion,
|
|
40
|
+
AccordionActions,
|
|
41
|
+
AccordionDetails,
|
|
42
|
+
AccordionSummary
|
|
43
|
+
};
|
package/jest.config.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@availity/mui-accordion",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Availity MUI Accordion Component - part of the @availity/element design system",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react",
|
|
7
|
+
"typescript",
|
|
8
|
+
"availity",
|
|
9
|
+
"mui"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://availity.github.io/element/?path=/docs/components-accordion-introduction--docs",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/Availity/element/issues"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "https://github.com/Availity/element.git",
|
|
18
|
+
"directory": "packages/accordion"
|
|
19
|
+
},
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"author": "Availity Developers <AVOSS@availity.com>",
|
|
22
|
+
"browser": "./dist/index.js",
|
|
23
|
+
"main": "./dist/index.js",
|
|
24
|
+
"module": "./dist/index.mjs",
|
|
25
|
+
"types": "./dist/index.d.ts",
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
28
|
+
"dev": "tsup src/index.ts --format esm,cjs --watch --dts",
|
|
29
|
+
"clean": "rm -rf dist",
|
|
30
|
+
"clean:nm": "rm -rf node_modules",
|
|
31
|
+
"publish": "yarn npm publish --tolerate-republish --access public",
|
|
32
|
+
"publish:canary": "yarn npm publish --access public --tag canary"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"@availity/mui-icon": "0.8.0"
|
|
36
|
+
},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@mui/material": "^5.11.9",
|
|
39
|
+
"react": "18.2.0",
|
|
40
|
+
"react-dom": "18.2.0",
|
|
41
|
+
"tsup": "^5.12.7",
|
|
42
|
+
"typescript": "^4.6.4"
|
|
43
|
+
},
|
|
44
|
+
"peerDependencies": {
|
|
45
|
+
"@mui/material": "^5.11.9",
|
|
46
|
+
"react": ">=16.3.0"
|
|
47
|
+
},
|
|
48
|
+
"publishConfig": {
|
|
49
|
+
"access": "public"
|
|
50
|
+
}
|
|
51
|
+
}
|
package/project.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "mui-accordion",
|
|
3
|
+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
4
|
+
"sourceRoot": "packages/accordion/src",
|
|
5
|
+
"projectType": "library",
|
|
6
|
+
"tags": [],
|
|
7
|
+
"targets": {
|
|
8
|
+
"lint": {
|
|
9
|
+
"executor": "@nrwl/linter:eslint",
|
|
10
|
+
"options": {
|
|
11
|
+
"eslintConfig": ".eslintrc.json",
|
|
12
|
+
"lintFilePatterns": ["packages/accordion/**/*.{js,ts}"],
|
|
13
|
+
"silent": false,
|
|
14
|
+
"fix": false,
|
|
15
|
+
"cache": true,
|
|
16
|
+
"cacheLocation": "./node_modules/.cache/accordion/.eslintcache",
|
|
17
|
+
"maxWarnings": -1,
|
|
18
|
+
"quiet": false,
|
|
19
|
+
"noEslintrc": false,
|
|
20
|
+
"hasTypeAwareRules": true,
|
|
21
|
+
"cacheStrategy": "metadata"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"test": {
|
|
25
|
+
"executor": "@nrwl/jest:jest",
|
|
26
|
+
"outputs": ["coverage/accordion"],
|
|
27
|
+
"options": {
|
|
28
|
+
"jestConfig": "packages/accordion/jest.config.js",
|
|
29
|
+
"passWithNoTests": true
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"version": {
|
|
33
|
+
"executor": "@jscutlery/semver:version",
|
|
34
|
+
"options": {
|
|
35
|
+
"preset": "conventional",
|
|
36
|
+
"commitMessageFormat": "chore(${projectName}): release version ${version} [skip ci]",
|
|
37
|
+
"tagPrefix": "@availity/${projectName}@",
|
|
38
|
+
"trackDeps": true
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// Each exported component in the package should have its own stories file
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
+
import { Accordion, AccordionActions, AccordionDetails, AccordionSummary, AccordionProps } from '..';
|
|
5
|
+
import Button from '@mui/material/Button';
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof Accordion> = {
|
|
8
|
+
title: 'Components/Accordion/Accordion',
|
|
9
|
+
component: Accordion,
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
export const _Accordion: StoryObj<typeof Accordion> = {
|
|
16
|
+
render: (args: AccordionProps) => (
|
|
17
|
+
<Accordion {...args}>
|
|
18
|
+
<AccordionSummary aria-controls="panel-content" id="panel-header">
|
|
19
|
+
Accordion
|
|
20
|
+
</AccordionSummary>
|
|
21
|
+
<AccordionDetails>
|
|
22
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
23
|
+
lobortis eget.
|
|
24
|
+
</AccordionDetails>
|
|
25
|
+
<AccordionActions>
|
|
26
|
+
<Button>Cancel</Button>
|
|
27
|
+
<Button>Agree</Button>
|
|
28
|
+
</AccordionActions>
|
|
29
|
+
</Accordion>
|
|
30
|
+
),
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const _States: StoryObj<typeof Accordion> = {
|
|
34
|
+
render: (args: AccordionProps) => (
|
|
35
|
+
<div>
|
|
36
|
+
<Accordion {...args} defaultExpanded>
|
|
37
|
+
<AccordionSummary aria-controls="defaultexpanded-content" id="defaultexpanded-header">
|
|
38
|
+
Default Expanded
|
|
39
|
+
</AccordionSummary>
|
|
40
|
+
<AccordionDetails>
|
|
41
|
+
<Accordion>
|
|
42
|
+
<AccordionSummary aria-controls="defaultexpanded-nested-content" id="defaultexpanded-nested-header">
|
|
43
|
+
Nested Accordion
|
|
44
|
+
</AccordionSummary>
|
|
45
|
+
<AccordionDetails>
|
|
46
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
|
|
47
|
+
leo lobortis eget.
|
|
48
|
+
</AccordionDetails>
|
|
49
|
+
</Accordion>
|
|
50
|
+
</AccordionDetails>
|
|
51
|
+
</Accordion>
|
|
52
|
+
<Accordion {...args}>
|
|
53
|
+
<AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">
|
|
54
|
+
Focused
|
|
55
|
+
</AccordionSummary>
|
|
56
|
+
<AccordionDetails>
|
|
57
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
58
|
+
lobortis eget.
|
|
59
|
+
</AccordionDetails>
|
|
60
|
+
</Accordion>
|
|
61
|
+
<Accordion {...args} disabled>
|
|
62
|
+
<AccordionSummary aria-controls="disabled-content" id="disabled-header">
|
|
63
|
+
Disabled
|
|
64
|
+
</AccordionSummary>
|
|
65
|
+
<AccordionDetails>
|
|
66
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
67
|
+
lobortis eget.
|
|
68
|
+
</AccordionDetails>
|
|
69
|
+
</Accordion>
|
|
70
|
+
</div>
|
|
71
|
+
),
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export const _AccordionGroup: StoryObj<typeof Accordion> = {
|
|
75
|
+
render: () => (
|
|
76
|
+
<div>
|
|
77
|
+
<Accordion>
|
|
78
|
+
<AccordionSummary aria-controls="panel1-content" id="panel1-header">
|
|
79
|
+
Accordion 1
|
|
80
|
+
</AccordionSummary>
|
|
81
|
+
<AccordionDetails>
|
|
82
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
83
|
+
lobortis eget.
|
|
84
|
+
</AccordionDetails>
|
|
85
|
+
</Accordion>
|
|
86
|
+
<Accordion>
|
|
87
|
+
<AccordionSummary aria-controls="panel2-content" id="panel2-header">
|
|
88
|
+
Accordion 2
|
|
89
|
+
</AccordionSummary>
|
|
90
|
+
<AccordionDetails>
|
|
91
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
92
|
+
lobortis eget.
|
|
93
|
+
</AccordionDetails>
|
|
94
|
+
</Accordion>
|
|
95
|
+
<Accordion>
|
|
96
|
+
<AccordionSummary aria-controls="panel3-content" id="panel3-header">
|
|
97
|
+
Accordion Actions
|
|
98
|
+
</AccordionSummary>
|
|
99
|
+
<AccordionDetails>
|
|
100
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
101
|
+
lobortis eget.
|
|
102
|
+
</AccordionDetails>
|
|
103
|
+
<AccordionActions>
|
|
104
|
+
<Button>Cancel</Button>
|
|
105
|
+
<Button>Agree</Button>
|
|
106
|
+
</AccordionActions>
|
|
107
|
+
</Accordion>
|
|
108
|
+
</div>
|
|
109
|
+
),
|
|
110
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import { Accordion, AccordionSummary } from '..';
|
|
3
|
+
|
|
4
|
+
describe('Accordion', () => {
|
|
5
|
+
test('should render successfully', () => {
|
|
6
|
+
const { getByTestId } = render(
|
|
7
|
+
<Accordion data-testid="test">
|
|
8
|
+
<AccordionSummary>Test</AccordionSummary>
|
|
9
|
+
</Accordion>
|
|
10
|
+
);
|
|
11
|
+
expect(getByTestId('test')).toBeTruthy();
|
|
12
|
+
});
|
|
13
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import MuiAccordion, { AccordionProps as MuiAccordionProps } from '@mui/material/Accordion';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
|
|
4
|
+
export type AccordionProps = Omit<MuiAccordionProps, 'component' | 'TransitionComponent' | 'TransitionProps'>;
|
|
5
|
+
|
|
6
|
+
export const Accordion = forwardRef<HTMLDivElement, AccordionProps>((props, ref) => (
|
|
7
|
+
<MuiAccordion {...props} ref={ref} />
|
|
8
|
+
));
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// Each exported component in the package should have its own stories file
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
+
import { AccordionActions, AccordionActionsProps } from '..';
|
|
5
|
+
import Button from '@mui/material/Button/Button';
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof AccordionActions> = {
|
|
8
|
+
title: 'Components/Accordion/AccordionActions',
|
|
9
|
+
component: AccordionActions,
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default meta;
|
|
14
|
+
|
|
15
|
+
export const _AccordionActions: StoryObj<typeof AccordionActions> = {
|
|
16
|
+
render: (args: AccordionActionsProps) => (
|
|
17
|
+
<AccordionActions {...args}>
|
|
18
|
+
<Button>Cancel</Button>
|
|
19
|
+
<Button>Agree</Button>
|
|
20
|
+
</AccordionActions>
|
|
21
|
+
),
|
|
22
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import { AccordionActions } from './AccordionActions';
|
|
3
|
+
|
|
4
|
+
describe('AccordionActions', () => {
|
|
5
|
+
test('should render successfully', () => {
|
|
6
|
+
const { getByText } = render(<AccordionActions>Test</AccordionActions>);
|
|
7
|
+
expect(getByText('Test')).toBeTruthy();
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import MuiAccordionActions, { AccordionActionsProps as MuiAccordionActionsProps } from '@mui/material/AccordionActions';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
|
|
4
|
+
export type AccordionActionsProps = MuiAccordionActionsProps;
|
|
5
|
+
|
|
6
|
+
export const AccordionActions = forwardRef<unknown, AccordionActionsProps>((props, ref) => (
|
|
7
|
+
<MuiAccordionActions {...props} ref={ref} />
|
|
8
|
+
));
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// Each exported component in the package should have its own stories file
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
+
import { AccordionDetails, AccordionDetailsProps } from '..';
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof AccordionDetails> = {
|
|
7
|
+
title: 'Components/Accordion/AccordionDetails',
|
|
8
|
+
component: AccordionDetails,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
|
|
14
|
+
export const _AccordionDetails: StoryObj<typeof AccordionDetails> = {
|
|
15
|
+
render: (args: AccordionDetailsProps) => (
|
|
16
|
+
<AccordionDetails {...args}>
|
|
17
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
|
|
18
|
+
lobortis eget.
|
|
19
|
+
</AccordionDetails>
|
|
20
|
+
),
|
|
21
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import { AccordionDetails } from './AccordionDetails';
|
|
3
|
+
|
|
4
|
+
describe('AccordionDetails', () => {
|
|
5
|
+
test('should render successfully', () => {
|
|
6
|
+
const { getByText } = render(<AccordionDetails>Test</AccordionDetails>);
|
|
7
|
+
expect(getByText('Test')).toBeTruthy();
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import MuiAccordionDetails, { AccordionDetailsProps as MuiAccordionDetailsProps } from '@mui/material/AccordionDetails';
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
|
|
4
|
+
export type AccordionDetailsProps = MuiAccordionDetailsProps;
|
|
5
|
+
|
|
6
|
+
export const AccordionDetails = forwardRef<unknown, AccordionDetailsProps>((props, ref) => (
|
|
7
|
+
<MuiAccordionDetails {...props} ref={ref} />
|
|
8
|
+
));
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// Each exported component in the package should have its own stories file
|
|
2
|
+
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
4
|
+
import { AccordionSummary, AccordionSummaryProps } from '..';
|
|
5
|
+
|
|
6
|
+
const meta: Meta<typeof AccordionSummary> = {
|
|
7
|
+
title: 'Components/Accordion/AccordionSummary',
|
|
8
|
+
component: AccordionSummary,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
|
|
14
|
+
export const _AccordionSummary: StoryObj<typeof AccordionSummary> = {
|
|
15
|
+
render: (args: AccordionSummaryProps) => (
|
|
16
|
+
<AccordionSummary aria-controls="panel1-content" id="panel1-header" {...args}>
|
|
17
|
+
Accordion 1
|
|
18
|
+
</AccordionSummary>
|
|
19
|
+
),
|
|
20
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { render } from '@testing-library/react';
|
|
2
|
+
import { AccordionSummary } from './AccordionSummary';
|
|
3
|
+
|
|
4
|
+
describe('AccordionSummary', () => {
|
|
5
|
+
test('should render successfully', () => {
|
|
6
|
+
const { getByText } = render(<AccordionSummary>Test</AccordionSummary>);
|
|
7
|
+
expect(getByText('Test')).toBeTruthy();
|
|
8
|
+
});
|
|
9
|
+
});
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import MuiAccordionSummary, { AccordionSummaryProps as MuiAccordionSummaryProps } from '@mui/material/AccordionSummary';
|
|
2
|
+
import { TriangleExpandIcon } from '@availity/mui-icon';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
|
|
5
|
+
export type AccordionSummaryProps = Omit<
|
|
6
|
+
MuiAccordionSummaryProps,
|
|
7
|
+
| 'centerRipple'
|
|
8
|
+
| 'component'
|
|
9
|
+
| 'disableRipple'
|
|
10
|
+
| 'disableTouchRipple'
|
|
11
|
+
| 'expandIcon'
|
|
12
|
+
| 'focusRipple'
|
|
13
|
+
| 'focusVisibleClassname'
|
|
14
|
+
| 'onFocusVisible'
|
|
15
|
+
| 'TouchRippleProps'
|
|
16
|
+
| 'touchRippleRef'
|
|
17
|
+
>;
|
|
18
|
+
|
|
19
|
+
export const AccordionSummary = forwardRef<HTMLDivElement, AccordionSummaryProps>((props, ref) => (
|
|
20
|
+
<MuiAccordionSummary {...props} expandIcon={<TriangleExpandIcon />} ref={ref} />
|
|
21
|
+
));
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "./tsconfig.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "../../dist/out-tsc",
|
|
5
|
+
"module": "commonjs",
|
|
6
|
+
"types": ["jest", "node", "@testing-library/jest-dom"],
|
|
7
|
+
"allowJs": true
|
|
8
|
+
},
|
|
9
|
+
"include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
|
|
10
|
+
}
|