Skip to content

Commit e401c53

Browse files
rvsiarvsia
committed
Add texts for Cabon components
1 parent 9c9981b commit e401c53

File tree

18 files changed

+258
-2
lines changed

18 files changed

+258
-2
lines changed

‎packages/react-renderer-demo/src/components/navigation/schemas/mappers.schema.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ const mappersSchema = [
3535
link: 'blueprint-component-mapper',
3636
linkText: 'Blueprint mapper'
3737
},
38+
{
39+
link: 'carbon-component-mapper',
40+
linkText: 'Carbon mapper'
41+
},
3842
{
3943
link: 'mui-component-mapper',
4044
linkText: 'Material UI mapper'

‎packages/react-renderer-demo/src/doc-components/date-picker.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import MuiDatePicker from './examples-texts/mui/mui-date-picker.md';
44
import BlueprintDatePicker from './examples-texts/blueprint/blueprint-date-picker.md';
55
import SuirDatePicker from './examples-texts/suir/suir-date-picker.md';
6+
import CarbonDatePicker from './examples-texts/carbon/carbon-date-picker.md';
67
import GenericMuiComponent from '../helpers/generic-mui-component';
78

89
const DatePicker = ({ activeMapper }) => {
@@ -18,6 +19,10 @@ const DatePicker = ({ activeMapper }) => {
1819
return <SuirDatePicker />;
1920
}
2021

22+
if (activeMapper === 'carbon') {
23+
return <CarbonDatePicker />;
24+
}
25+
2126
return <GenericMuiComponent activeMapper={activeMapper} component="date-picker" />;
2227
};
2328

‎packages/react-renderer-demo/src/doc-components/dual-list-select.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import MuiDualListSelect from './examples-texts/mui/mui-dual-list-select.md';
44
import SuirDualListSelect from './examples-texts/suir/suir-dual-list-select.md';
55
import BlueprintDualListSelect from './examples-texts/blueprint/blueprint-dual-list-select.md';
66
import PF4DualListSelect from './examples-texts/pf4/pf4-dual-list.md';
7+
import CarbonDualListSelect from './examples-texts/carbon/carbon-dual-list-select.md';
78

89
import GenericMuiComponent from '../helpers/generic-mui-component';
910

@@ -24,6 +25,10 @@ const DualListSelect = ({ activeMapper }) => {
2425
return <BlueprintDualListSelect />;
2526
}
2627

28+
if (activeMapper === 'carbon') {
29+
return <CarbonDualListSelect />;
30+
}
31+
2732
return <GenericMuiComponent activeMapper={activeMapper} component="dual-list-select" />;
2833
};
2934

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-date-picker.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Please check the [original component](https://react.carbondesignsystem.com/?path=/docs/datepicker--simple#date-picker), it accepts the same props.
2+
3+
## Props
4+
5+
DatePicker is wrapped in a form group, so it accepts all [form group props](/mappers/component-api#formgroupwrappedcomponents).
6+
7+
|Props|Type|Description|
8+
|-----|----|-----------|
9+
|DatePickerProps|object|Props passed to [DatePicker component](https://react.carbondesignsystem.com/?path=/docs/datepicker--simple#date-picker)|
10+
|datePickerType|string|Shorthand for `DatePickerProps.datePickerType`|

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-dual-list-select.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
This a custom component with a custom design.
2+
3+
## Props
4+
5+
Dual list select is wrapped in a form group, so it accepts all [form group props](/mappers/component-api#formgroupwrappedcomponents).
6+
7+
|Props|Type|Default|Description|
8+
|-----|----|-------|-----------|
9+
|options|array|[]|`[{label, value, ...props}]` *see below*|
10+
|leftTitle|String|'Options'|Title for options|
11+
|rightTitle|String|'Selected'|Title for selected items|
12+
|moveLeftTitle|String|'Move selected to left'|Tooltip for move to left button|
13+
|moveRightTitle|String|'Move selected to right'|Tooltip for move to right button|
14+
|moveAllLeftTitle|String|'Move all to left'|Tooltip for move all to left button|
15+
|moveAllRightTitle|String|'Move all to right'|Tooltip for move all to right button|
16+
|noValueTitle|String|'No selected'|Placeholder for empty value|
17+
|noOptionsTitle|String|'No available options'|Placeholder for empty options|
18+
|filterOptionsTitle|String|'Filter options'|Placeholder for options filter input|
19+
|filterValueTitle|String|'Filter selected value'|Placeholder for value filter input|
20+
|filterValueText|String|'Remove your filter to see all selected'|Placeholder for value when there is no filtered value|
21+
|filterOptionsText|String|'Remove your filter to see all options'|Placeholder for options when there is no filtered option|
22+
23+
### Options
24+
25+
|Props|Type|Description|
26+
|-----|----|-----------|
27+
|value|string|Value of the option|
28+
|label|node|ListItemText primary text|
29+
|ListRowProps|object|Props for [StructuredListRow](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|
30+
|ListCellProps|object|Props for [StructuredListCell](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|
31+
|GridProps|object|Props for [Grid](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
32+
|RowProps|object|Props for [Row](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
33+
|LabelProps|object|Props for [Column](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns) containing the label|
34+
|CheckmarkProps|object|Props for [Column](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns) containing the checkmark|
35+
36+
### Customization
37+
38+
You can modify elements of titles by setting a string with HTML elements:
39+
40+
|Props|
41+
|-----|
42+
|LeftTitleElement|
43+
|RightTitleElement|
44+
45+
All these props are object:
46+
47+
|Props|Component|
48+
|-----|---------|
49+
|LeftTitleProps|depends on LeftTitleElement|
50+
|RightTitleProps|depends on RightTitleElement|
51+
|FormGroupProps|[FormGroup](https://react.carbondesignsystem.com/?path=/docs/form--default)|
52+
|GridProps|[Grid](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
53+
|RowProps|[Row](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
54+
|OptionsColumnProps|[Column](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
55+
|ButtonColumnProps|[Column](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
56+
|ValuesColumnProps|[Column](https://react.carbondesignsystem.com/?path=/docs/grid--auto-columns)|
57+
|AddButtonProps|[Button](https://react.carbondesignsystem.com/?path=/docs/button--default)|
58+
|AddAllButtonProps|[Button](https://react.carbondesignsystem.com/?path=/docs/button--default)|
59+
|RemoveButtonProps|[Button](https://react.carbondesignsystem.com/?path=/docs/button--default)|
60+
|RemoveAllButtonProps|[Button](https://react.carbondesignsystem.com/?path=/docs/button--default)|
61+
|LeftToolbarProps|div|
62+
|RightToolbarProps|div|
63+
|LeftSearchProps|[Search](https://react.carbondesignsystem.com/?path=/docs/search--default)|
64+
|RightSearchProps|[Search](https://react.carbondesignsystem.com/?path=/docs/search--default)|
65+
|LeftSortProps|[TooltipIcon](https://react.carbondesignsystem.com/?path=/docs/tooltipicon--default)|
66+
|RightSortProps|[TooltipIcon](https://react.carbondesignsystem.com/?path=/docs/tooltipicon--default)|
67+
|LeftListProps|[StructuredList](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|
68+
|LeftBodyProps|[StructuredListBody](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|
69+
|RightListProps|[StructuredList](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|
70+
|RightBodyProps|[StructuredListBody](https://react.carbondesignsystem.com/?path=/docs/structuredlist--selection)|

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-field-array.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
## Props
2+
3+
|Prop|Type|Description|
4+
|:---|:--:|----------:|
5+
|label|`node`|Label of the array.|
6+
|description|`node`|Description of the array.|
7+
|fields|`array`|A group of fields, which are being added to the array.|
8+
|defaultItem|`any`|Default item which is inserted into a newly created fields group. If you have nested names, don't forget you need to insert an object!|
9+
|minItems|`number`|Remove button is disabled, if the length of the array is equal or smaller.|
10+
|maxItems|`number`|Add button is disabled, if the length of the array is equal or bigger.|
11+
|noItemsMessage|`node`|A message which is shown, when there are no items in the array.|
12+
|buttonLabels|`object`|`{add: 'ADD', remove: 'REMOVE'}` sets labels of buttons.|
13+
|AddContainerProps|`object`|Props passed to the div wrapping the add button.|
14+
|AddButtonProps|`object`|Props passed to the add [button](https://react.carbondesignsystem.com/?path=/docs/button--default).|
15+
|RemoveButtonProps|`object`|Props passed to the remove [button](https://react.carbondesignsystem.com/?path=/docs/button--default).|
16+
|ArrayItemProps|`object`|Props passed to the div wrapping each field item.|
17+
|FormGroupProps|`object`|Props passed to the [form group](https://react.carbondesignsystem.com/?path=/docs/form--default) component.|
18+
|WrapperProps|`object`|Props passed to the root div.|
19+
20+
## Naming
21+
22+
Fields can contain names, then the value will be handled as array of objects.
23+
24+
```jsx
25+
const fields = [
26+
{ name: 'name', ... },
27+
{ name: 'lastname', ... }
28+
]
29+
30+
[
31+
{ name: value1.name, lastname: value1.lastname },
32+
{ name: value2.name, lastname: value2.lastname },
33+
...
34+
]
35+
```
36+
37+
Or you can put a single field with no name. In this case, values are stored as a simple array.
38+
39+
```jsx
40+
const fields = [
41+
{ component: 'text-field' }
42+
]
43+
44+
[ value1, value2, ... ]
45+
```
46+
47+
## Custom component
48+
49+
To implement a custom component, please take a look [here](/components/field-array).

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-plain-text.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Element
2+
3+
As `element` prop you can use any HTML tag.

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-radio.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Props
2+
3+
This component accepts same props as [the original one](https://react.carbondesignsystem.com/?path=/story/radiobuttongroup--default).
4+
5+
|Props|Description|
6+
|-----|-----------|
7+
|FormGroupProps|Props passed to [FormGroup component](https://react.carbondesignsystem.com/?path=/story/form--default)|

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-sub-form.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
## Props
2+
3+
|Props|Description|default|
4+
|-----|-----------|-------|
5+
|TitleElement|Element wrapping title|h5|
6+
|TitleProps|Props passed to the element wrapping title|{}|
7+
|DescriptionElement|Element wrapping description|p|
8+
|DescriptionProps|Props passed to the element wrapping description|{}|

‎packages/react-renderer-demo/src/doc-components/examples-texts/carbon/carbon-time-picker.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## Props
2+
3+
This component also accepts all other original props, please see [here](https://react.carbondesignsystem.com/?path=/story/timepicker--default)!
4+
5+
|Props|Description|default|
6+
|-----|-----------|-------|
7+
|twelveHoursFormat|boolean - if true an AM/PM selector is shown|false|
8+
|timezones|array of timezones - if not empty, an timezone selector is shown|undefined|
9+
10+
### Timezone
11+
12+
Object of `value`, `label`. Extends [SelectItem component](https://react.carbondesignsystem.com/?path=/story/select--default).

0 commit comments

Comments
 (0)