@commercetools-uikit/collapsible-panel 12.2.1 → 12.2.5
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/README.md +28 -21
- package/dist/commercetools-uikit-collapsible-panel.cjs.d.ts +2 -0
- package/dist/commercetools-uikit-collapsible-panel.cjs.dev.js +184 -253
- package/dist/commercetools-uikit-collapsible-panel.cjs.prod.js +148 -123
- package/dist/commercetools-uikit-collapsible-panel.esm.js +178 -248
- package/dist/declarations/src/collapsible-panel-header.d.ts +9 -0
- package/dist/declarations/src/collapsible-panel.d.ts +34 -0
- package/dist/declarations/src/collapsible-panel.styles.d.ts +18 -0
- package/dist/declarations/src/header-icon.d.ts +14 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/version.d.ts +2 -0
- package/package.json +20 -17
package/README.md
CHANGED
|
@@ -34,7 +34,6 @@ npm --save install react
|
|
|
34
34
|
## Usage
|
|
35
35
|
|
|
36
36
|
```jsx
|
|
37
|
-
import React from 'react';
|
|
38
37
|
import CollapsiblePanel from '@commercetools-uikit/collapsible-panel';
|
|
39
38
|
import Spacings from '@commercetools-uikit/spacings';
|
|
40
39
|
import Text from '@commercetools-uikit/text';
|
|
@@ -62,26 +61,34 @@ export default Example;
|
|
|
62
61
|
|
|
63
62
|
## Properties
|
|
64
63
|
|
|
65
|
-
| Props | Type
|
|
66
|
-
| ------------------------- |
|
|
67
|
-
| `id` | `string`
|
|
68
|
-
| `header` | `
|
|
69
|
-
| `secondaryHeader` | `
|
|
70
|
-
| `description` | `string`
|
|
71
|
-
| `className` | `string`
|
|
72
|
-
| `isSticky` | `
|
|
73
|
-
| `headerControls` | `
|
|
74
|
-
| `isDisabled` | `
|
|
75
|
-
| `children` | `
|
|
76
|
-
| `tone` | `
|
|
77
|
-
| `theme` | `
|
|
78
|
-
| `condensed` | `
|
|
79
|
-
| `hideExpansionControls` | `
|
|
80
|
-
| `headerControlsAlignment` | `
|
|
81
|
-
| `isDefaultClosed` | `
|
|
82
|
-
| `isClosed` | `
|
|
83
|
-
| `onToggle` | `
|
|
84
|
-
| `horizontalConstraint` | `
|
|
64
|
+
| Props | Type | Required | Default | Description |
|
|
65
|
+
| ------------------------- | -------------------------------------------------------------------------------------------- | :------: | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| `id` | `string` | | `uniqueId()` | An unique id for the panel header, which will also be used to generate a prefixed id for the panel content section.
<br/>
Read about `getPanelContentId` below for more about this. |
|
|
67
|
+
| `header` | `ReactNode` | ✅ | | The title being rendered at top left of the panel |
|
|
68
|
+
| `secondaryHeader` | `ReactNode` | | | A secondary header for the panel (only pass if needed) |
|
|
69
|
+
| `description` | `string` | | | If passed will be shown below the title as more information regarding the panel |
|
|
70
|
+
| `className` | `string` | | | Allow to override the styles by passing a `className` prop.
<br/>
Custom styles can also be passed using the [`css` prop from emotion](https://emotion.sh/docs/css-prop#style-precedence). |
|
|
71
|
+
| `isSticky` | `boolean` | | | Makes the panel's header sticky in regards to the page's scroll |
|
|
72
|
+
| `headerControls` | `ReactNode` | | | Controls at the top right part of the panel |
|
|
73
|
+
| `isDisabled` | `boolean` | | `false` | Disables the panel and all interactions with it |
|
|
74
|
+
| `children` | `ReactNode` | | | The actual content rendered inside the panel |
|
|
75
|
+
| `tone` | `union`<br/>Possible values:<br/>`'urgent' , 'primary'` | | | Indicates the color scheme of the panel. |
|
|
76
|
+
| `theme` | `union`<br/>Possible values:<br/>`'dark' , 'light'` | | `'dark'` | Determines the background color of the panel. |
|
|
77
|
+
| `condensed` | `boolean` | | `false` | Whenever `true` the headers and content itself
will consume less space in that to the borders are smaller and everything has less padding |
|
|
78
|
+
| `hideExpansionControls` | `boolean` | | | Controls the visibility of the expansion controls on the left |
|
|
79
|
+
| `headerControlsAlignment` | `union`<br/>Possible values:<br/>`'left' , 'right'` | | `'right'` | Indicates the position of the control elements in the header component. |
|
|
80
|
+
| `isDefaultClosed` | `boolean` | | | Indicates if the panel's content should be collapsed or shown by default.
<br />
Updates to this value are not respected. Only used for **uncontrolled** mode (when no`onToggle` is passed.) |
|
|
81
|
+
| `isClosed` | `boolean` | | | Indicates if the panel's content should be collapsed or shown.
<br />
Component becomes \*_controlled_ when this is passed. |
|
|
82
|
+
| `onToggle` | `Function`<br/>[See signature.](#signature-onToggle) | | | function to be triggered whenever the user clicks the top area to collapse the panel's content
<br />
Becomes required when `isClosed` is passed.
<br />
Signature: `() => void` |
|
|
83
|
+
| `horizontalConstraint` | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the panel. |
|
|
84
|
+
|
|
85
|
+
## Signatures
|
|
86
|
+
|
|
87
|
+
### Signature `onToggle`
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
() => void
|
|
91
|
+
```
|
|
85
92
|
|
|
86
93
|
## Where to use
|
|
87
94
|
|