@commercetools-uikit/primary-action-dropdown 12.2.4 → 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 CHANGED
@@ -1,60 +1,86 @@
1
+ <!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
2
+ <!-- This file is created by the `yarn generate-readme` script. -->
3
+
1
4
  # PrimaryActionDropdown
2
5
 
3
6
  ## Description
4
7
 
5
- A `PrimaryActionDropdown` is a dropdown with any number of action whereas the
6
- first action of the dropdown can be triggered without opening the dropdown
8
+ A `PrimaryActionDropdown` is a dropdown with any number of action whereas the first action of the dropdown can be triggered without opening the dropdown
7
9
  itself.
8
10
 
9
- The primary action, rendered as the head of the dropdown, is always the first
10
- non-disabled `<Option />`. If all `<Option />`s are disabled, the head of the
11
+ The primary action, rendered as the head of the dropdown, is always the first non-disabled `<Option />`. If all `<Option />`s are disabled, the head of the
11
12
  dropdown will be disabled.
12
13
 
14
+ ## Installation
15
+
16
+ ```
17
+ yarn add @commercetools-uikit/primary-action-dropdown
18
+ ```
19
+
20
+ ```
21
+ npm --save install @commercetools-uikit/primary-action-dropdown
22
+ ```
23
+
24
+ Additionally install the peer dependencies (if not present)
25
+
26
+ ```
27
+ yarn add react
28
+ ```
29
+
30
+ ```
31
+ npm --save install react
32
+ ```
33
+
13
34
  ## Usage
14
35
 
15
- ```js
36
+ ```jsx
16
37
  import PrimaryActionDropdown, {
17
- PrimaryActionDropdownOption,
38
+ Option,
18
39
  } from '@commercetools-uikit/primary-action-dropdown';
19
-
20
- <PrimaryActionDropdown>
21
- <PrimaryActionDropdownOption iconLeft={<PlusBoldIcon />} onClick={() => {}}>
22
- Primary option
23
- </PrimaryActionDropdownOption>
24
- <PrimaryActionDropdownOption onClick={() => {}}>
25
- Another option
26
- </PrimaryActionDropdownOption>
27
- <PrimaryActionDropdownOption isDisabled={true} onClick={() => {}}>
28
- Even another option
29
- </PrimaryActionDropdownOption>
30
- </PrimaryActionDropdown>;
40
+ import { PlusBoldIcon } from '@commercetools-uikit/icons';
41
+
42
+ const Example = () => (
43
+ <PrimaryActionDropdown>
44
+ <Option iconLeft={<PlusBoldIcon />} onClick={() => {}}>
45
+ Primary option
46
+ </Option>
47
+ <Option onClick={() => {}}>Another option</Option>
48
+ <Option isDisabled={true} onClick={() => {}}>
49
+ Even another option
50
+ </Option>
51
+ </PrimaryActionDropdown>
52
+ );
53
+
54
+ export default Example;
31
55
  ```
32
56
 
33
- ## Properties
57
+ ## PrimaryActionDropdown
34
58
 
35
- ### PrimaryActionDropdown
59
+ ### Properties
36
60
 
37
- | Props | Type | Required | Values | Default | Description |
38
- | ---------- | ------ | :------: | ------ | ------- | ------------------------------------------------------------------------ |
39
- | `children` | `node` | ✅ | - | - | The options of the dropdown (use the `Option` export from the component) |
61
+ | Props | Type | Required | Default | Description |
62
+ | ---------- | ----------------------------------------------------------------- | :------: | ------- | ------------------ |
63
+ | `children` | `Array: ReactElement[]`<br/>[See signature.](#signature-children) | ✅ | | Any React element. |
40
64
 
41
- ### Option
65
+ ### Signatures
42
66
 
43
- | Props | Type | Required | Values | Default | Description |
44
- | ------------ | -------- | :------: | ------ | ------- | -------------------------------------------------------------------------------------------------- |
45
- | `onClick` | `func` | ✅ | - | - | What will trigger whenever the option is clicked |
46
- | `isDisabled` | `bool` | - | - | `false` | Disables the option within the dropdown. If all options are disabled the dropdown will be disabled |
47
- | `children` | `string` | ✅ | - | - | The label of the option |
48
- | `iconLeft` | `node` | ✅ | - | - | The icon left to the option (only for the primary option) |
67
+ #### Signature `children`
49
68
 
50
- ## Invariants
69
+ ## Option
51
70
 
52
- 1. The `PrimaryActionDropdown` must have at least two `Option` elements as
53
- `children`
71
+ ### Properties
54
72
 
55
- - Use a `PrimaryButton` otherwise
73
+ | Props | Type | Required | Default | Description |
74
+ | ------------ | --------------------------------------------------- | :------: | ------- | --------------------------------------------------------------------------------------------------- |
75
+ | `onClick` | `Function`<br/>[See signature.](#signature-onClick) | ✅ | | Event handler triggers whenever the option is clicked. |
76
+ | `isDisabled` | `boolean` | | `false` | Disables the option within the dropdown. If all options are disabled the dropdown will be disabled. |
77
+ | `children` | `string` | ✅ | | Any string which serves as the label. |
78
+ | `iconLeft` | `ReactNode` | ✅ | | Any React node. |
56
79
 
57
- Main Functions and use cases are:
80
+ ### Signatures
58
81
 
59
- - Export button _example: Default to export all but offer selected to be
60
- exported_
82
+ #### Signature `onClick`
83
+
84
+ ```ts
85
+ () => void
86
+ ```
@@ -0,0 +1,2 @@
1
+ export * from "./declarations/src/index";
2
+ export { default } from "./declarations/src/index";