Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: updated readme to include fw-popover, fw-list-options, fw-select-option and their dependencies #257

Merged
merged 3 commits into from
Nov 3, 2021
Merged

chore: updated readme to include fw-popover, fw-list-options, fw-select-option and their dependencies #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ebeb5da
docs(crayons): updated readme and package-lock for popover component
kishore-kumar-E3682 Nov 3, 2021
f279cab
chore: merge with monorepo
kishore-kumar-E3682 Nov 3, 2021
e1e720e
revert: reverted package-lock.json
kishore-kumar-E3682 Nov 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/crayons-core/src/components/datepicker/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ fw-datepicker displays an input box with a calendar that enables selecting a dat

### Depends on

- [fw-popover](../popover)
- [fw-input](../input)
- [fw-select](../select)
- [fw-select-option](../select-option)
Expand All @@ -49,13 +50,17 @@ fw-datepicker displays an input box with a calendar that enables selecting a dat
### Graph
```mermaid
graph TD;
fw-datepicker --> fw-popover
fw-datepicker --> fw-input
fw-datepicker --> fw-select
fw-datepicker --> fw-select-option
fw-datepicker --> fw-button
fw-input --> fw-icon
fw-select --> fw-tag
fw-select --> fw-select-option
fw-select --> fw-popover
fw-select --> fw-list-options
fw-list-options --> fw-select-option
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
style fw-datepicker fill:#f9f,stroke:#333,stroke-width:4px
Expand Down
2 changes: 2 additions & 0 deletions packages/crayons-core/src/components/input/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ Type: `Promise<void>`

- [fw-datepicker](../datepicker)
- [fw-dropdown-button](../dropdown-button)
- [fw-list-options](../options-list)

### Depends on

Expand All @@ -109,6 +110,7 @@ graph TD;
fw-input --> fw-icon
fw-datepicker --> fw-input
fw-dropdown-button --> fw-input
fw-list-options --> fw-input
style fw-input fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
79 changes: 79 additions & 0 deletions packages/crayons-core/src/components/options-list/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# fw-list-options



<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------ |
| `filterText` | `filter-text` | The text to filter the options. | `any` | `undefined` |
| `isCheckbox` | `is-checkbox` | Place a checkbox. | `boolean` | `false` |
| `max` | `max` | Works with `multiple` enabled. Configures the maximum number of options that can be selected with a multi-select component. | `number` | `Number.MAX_VALUE` |
| `multiple` | `multiple` | Enables selection of multiple options. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `notFoundText` | `not-found-text` | Default option to be shown if the option doesn't match the filterText. | `string` | `'No items Found'` |
| `options` | -- | Value corresponding to the option, that is saved when the form data is saved. | `any[]` | `[]` |
| `searchText` | `search-text` | Placeholder to placed on the search text box. | `string` | `'Search...'` |
| `searchable` | `searchable` | Enables the input with in the popup for filtering the options. | `boolean` | `false` |
| `value` | -- | Value of the option that is displayed as the default selection, in the list box. Must be a valid value corresponding to the fw-select-option components used in Select. | `any[]` | `[]` |
| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` |


## Events

| Event | Description | Type |
| ---------- | --------------------------------------------------------------------------- | ------------------ |
| `fwChange` | Triggered when a value is selected or deselected from the list box options. | `CustomEvent<any>` |


## Methods

### `getSelectedOptions() => Promise<any>`



#### Returns

Type: `Promise<any>`



### `setSelectedValues(values: string[]) => Promise<any>`



#### Returns

Type: `Promise<any>`




## Dependencies

### Used by

- [fw-select](../select)

### Depends on

- [fw-select-option](../select-option)
- [fw-input](../input)

### Graph
```mermaid
graph TD;
fw-list-options --> fw-select-option
fw-list-options --> fw-input
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-input --> fw-icon
fw-select --> fw-list-options
style fw-list-options fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with ❤ at Freshworks
32 changes: 24 additions & 8 deletions packages/crayons-core/src/components/popover/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | ----------- | --------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
| `boundary` | -- | The area that the popup will be checked for overflow relative to. | `HTMLElement` | `undefined` |
| `distance` | `distance` | Distance defines the distance between the parentRef and the popover along y-axis. | `number` | `0` |
| `fallbackPlacements` | -- | Alternative placement for popover if the default placement is not possible. | `[PopoverPlacementType]` | `['top']` |
| `parentRef` | -- | The reference of the parent element to which the popup should be attached. | `HTMLElement` | `undefined` |
| `placement` | `placement` | Placement of the popover with respect to the parent element (parentRef). | `"bottom" \| "left" \| "right" \| "top"` | `"bottom"` |
| `skidding` | `skidding` | Skidding defines the distance between the parentRef and the popover along x-axis. | `number` | `0` |
| Property | Attribute | Description | Type | Default |
| -------------------- | ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
| `boundary` | -- | The area that the popup will be checked for overflow relative to. | `HTMLElement` | `undefined` |
| `distance` | `distance` | Distance defines the distance between the popover trigger and the popover content along y-axis. | `string` | `'0'` |
| `fallbackPlacements` | -- | Alternative placement for popover if the default placement is not possible. | `[PopoverPlacementType]` | `['top']` |
| `placement` | `placement` | Placement of the popover content with respect to the popover trigger. | `"bottom" \| "left" \| "right" \| "top"` | `'bottom'` |
| `sameWidth` | `same-width` | Whether the popover-content width to be same as that of the popover-trigger. | `boolean` | `true` |
| `skidding` | `skidding` | Skidding defines the distance between the popover trigger and the popover content along x-axis. | `string` | `'0'` |
| `variant` | `variant` | Variant defines the style of the popover-content. | `"date-picker" \| "select"` | `'select'` |


## Methods
Expand All @@ -40,6 +41,21 @@ Type: `Promise<void>`



## Dependencies

### Used by

- [fw-datepicker](../datepicker)
- [fw-select](../select)

### Graph
```mermaid
graph TD;
fw-datepicker --> fw-popover
fw-select --> fw-popover
style fw-popover fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with ❤ at Freshworks
47 changes: 27 additions & 20 deletions packages/crayons-core/src/components/select-option/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,62 +27,69 @@ fw-select-option provides child elements for fw-select, to populate the Select c

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type | Default |
| --------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ |
| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `graphicsProps` | -- | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `{}` | `{}` |
| `graphicsType` | `graphics-type` | Icon or Avatar to be placed on the left side of the option. | `"avatar" \| "icon"` | `undefined` |
| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` |
| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` |
| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` |
| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` |
| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` |
| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` |
| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `string` | `undefined` |
| `variant` | `variant` | Standard is the default option, checkbox is the option with checkbox and graphics is the option with either icon or avatar. | `"checkbox" \| "graphics" \| "standard"` | `'standard'` |
| Property | Attribute | Description | Type | Default |
| --------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------ |
| `disabled` | `disabled` | Sets the state of the option to disabled. The selected option is disabled and greyed out. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `graphicsProps` | `graphics-props` | The props for the graphics variant. ex., icon props in case of graphicsType = 'icon' | `any` | `undefined` |
| `groupName` | `group-name` | Used in grouped list, provides the group in which the option belongs | `string` | `undefined` |
| `html` | `html` | States that the option is an HTML value. If the attribute's value is undefined, the value is set to true. | `boolean` | `false` |
| `htmlContent` | `html-content` | HTML content that is displayed as the option. | `string` | `undefined` |
| `isCheckbox` | `is-checkbox` | Place a checkbox. | `boolean` | `false` |
| `optionText` | `option-text` | Alternate text displayed on the interface, in place of the actual HTML content. | `string` | `undefined` |
| `selected` | `selected` | Sets the state of the option to selected. The selected option is highlighted and a check mark is displayed next to it. If the attribute’s value is undefined, the value is set to false. | `boolean` | `false` |
| `subText` | `sub-text` | Second line text can be description etc. | `string` | `undefined` |
| `text` | `text` | The text to be displayed in the option. | `string` | `undefined` |
| `value` | `value` | Value corresponding to the option, that is saved when the form data is saved. | `string` | `undefined` |
| `variant` | `variant` | Standard is the default option without any graphics other options are icon and avatar which places either the icon or avatar at the beginning of the row. The props for the icon or avatar are passed as an object via the graphicsProps. | `"avatar" \| "icon" \| "standard"` | `'standard'` |


## Events

| Event | Description | Type |
| ------------ | ------------------------------------- | ------------------ |
| `fwSelected` | Triggered when an option is selected. | `CustomEvent<any>` |


## Methods

### `setFocus() => Promise<any>`



#### Returns

Type: `Promise<any>`




## Dependencies

### Used by

- [fw-datepicker](../datepicker)
- [fw-select](../select)
- [fw-timepicker](../timepicker)
- [fw-datepicker](../datepicker)
- [fw-list-options](../options-list)
- [fw-timepicker](../timepicker)

### Depends on

- [fw-icon](../icon)
- [fw-checkbox](../checkbox)

### Graph

```mermaid
graph TD;
fw-select-option --> fw-icon
fw-select-option --> fw-checkbox
fw-datepicker --> fw-select-option
fw-select --> fw-select-option
fw-list-options --> fw-select-option
fw-timepicker --> fw-select-option
style fw-select-option fill:#f9f,stroke:#333,stroke-width:4px
```

---
----------------------------------------------

Built with ❤ at Freshworks
Loading