Skip to content

Commit

Permalink
Minor Docs Fixes (#2655)
Browse files Browse the repository at this point in the history
  • Loading branch information
@coliff
coliff committed Jun 28, 2024
1 parent 2ba3bfb commit b370218
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 87 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"hoverable",
"inexplicitly",
"inputmode",
"labelledby",
"Lehner",
"Lemke",
"Leuschke",
Expand Down
2 changes: 1 addition & 1 deletion stencil-workspace/src/components/modus-utility-panel/modus-utility-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@

hr {
border: none;
border-top: 1px solid #ccc;
border-top: 1px solid #cbcdd6;
margin: 0;
}
}
Expand Down
13 changes: 9 additions & 4 deletions ...storybook/stories/components/modus-accordion/modus-accordion-storybook-docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,13 @@ The `<modus-accordion-item>` utilizes the slot element, allowing you to render y
### With Icon

<modus-accordion>
<modus-accordion-item header-text="Item 1" icon="notifications">Content</modus-accordion-item>
<modus-accordion-item header-text="Item 2" icon="notifications">Content</modus-accordion-item>
<modus-accordion-item disabled header-text="Item 3" icon="notifications">
<modus-accordion-item header-text="Item 1" icon="notifications">
Content
</modus-accordion-item>
<modus-accordion-item header-text="Item 2" icon="notifications">
Content
</modus-accordion-item>
<modus-accordion-item disabled header-text="Item 3" icon="notifications">
Content
</modus-accordion-item>
</modus-accordion>
Expand Down Expand Up @@ -93,11 +97,12 @@ The `<modus-accordion-item>` utilizes the slot element, allowing you to render y
| -------------------- | ----------------------------------------------- | --------- | ------------------------------ | --------------- | -------- |
| `aria-label` | The accordion's aria-label | `string` | | | |
| `disabled` | Disables the accordion item | `boolean` | | | |
| `expand-button-type` | The type of expand button | `string` | 'standardArrow' ,'circleArrow'| 'standardArrow' | |
| `expand-button-type` | The type of expand button | `string` | 'standardArrow' ,'circleArrow' | 'standardArrow' | |
| `expanded` | The expanded state of the accordion item | `boolean` | | | |
| `header-text` | The text to render in the accordion item header | `string` | | | |
| `icon` | Takes the icon name and renders the icon | `string` | | | |
| `size` | The size of the accordion item | `string` | 'condensed', 'standard' | 'standard' | |

### DOM Events

| Name | Description | Emits |
Expand Down
8 changes: 4 additions & 4 deletions ...ook/stories/components/modus-autocomplete/modus-autocomplete-storybook-docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,8 +185,8 @@ interface ModusAutocompleteOption {

### Events

| Event | Description | Type |
| ---------------- | ---------------------------------------------------------------------------- | --------------------- |
| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent<string>` |
| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent<string>` |
| Event | Description | Type |
| ------------------- | ----------------------------------------------------------------------------- | ----------------------- |
| `optionSelected` | An event that fires when a dropdown option is selected. Emits the option id. | `CustomEvent<string>` |
| `valueChange` | An event that fires when the input value changes. Emits the value string. | `CustomEvent<string>` |
| `selectionsChanged` | An event that fires when an option is selected/removed. Emits the option ids. | `CustomEvent<string[]>` |
50 changes: 35 additions & 15 deletions ...-workspace/storybook/stories/components/modus-autocomplete/modus-autocomplete.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default {
},
dropdownZIndex: {
name: 'dropdown-z-index',
description: 'The dropdown\'s z-index',
description: "The dropdown's z-index",
table: {
defaultValue: { summary: '1' },
type: { summary: 'string' },
Expand Down Expand Up @@ -122,7 +122,7 @@ export default {
table: {
defaultValue: { summary: false },
type: { summary: 'boolean' },
}
},
},
size: {
control: {
Expand All @@ -142,21 +142,18 @@ export default {
},
},
multiple: {
description: "When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input",
description:
'When enabled, multiple options can be selected in the component. And selected options are shown as chips in the input',
table: {
defaultValue: { summary: false },
type: { summary: 'boolean' },
},
}
},
},
parameters: {
controls: { expanded: true, sort: 'requiredFirst' },
actions: {
handles: [
'valueChange',
'optionSelected',
'selectionsChanged'
],
handles: ['valueChange', 'optionSelected', 'selectionsChanged'],
},
docs: {
inlineStories: true,
Expand Down Expand Up @@ -218,8 +215,26 @@ const Template = ({
`;

const defaultOptions = [
'Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Grapes', 'Watermelon', 'Strawberry', 'Blueberry', 'Raspberry',
'Blackberry', 'Cherry', 'Peach', 'Pear', 'Plum', 'Kiwi', 'Lemon', 'Lime', 'Papaya', 'Passion Fruit'
'Apple',
'Banana',
'Orange',
'Mango',
'Pineapple',
'Grapes',
'Watermelon',
'Strawberry',
'Blueberry',
'Raspberry',
'Blackberry',
'Cherry',
'Peach',
'Pear',
'Plum',
'Kiwi',
'Lemon',
'Lime',
'Papaya',
'Passion Fruit',
];

const defaultArgs = {
Expand All @@ -243,12 +258,12 @@ const defaultArgs = {
size: 'medium',
value: '',
options: defaultOptions,
}
};

const customOptions = [
{ id: 'ID0', value: 'Apple' },
{ id: 'ID1', value: 'Banana' },
{ id: 'ID2', value: 'Orange' }
{ id: 'ID2', value: 'Orange' },
];

export const Default = Template.bind({});
Expand All @@ -258,7 +273,12 @@ export const WithOption = Template.bind({});
WithOption.args = { ...defaultArgs, label: 'Autocomplete using option model' };

export const MultipleSelection = Template.bind({});
MultipleSelection.args = { ...defaultArgs, label: 'Autocomplete with multiple selection', multiple: true, options: customOptions };
MultipleSelection.args = {
...defaultArgs,
label: 'Autocomplete with multiple selection',
multiple: true,
options: customOptions,
};

export const WithCustomOption = ({
ariaLabel,
Expand Down Expand Up @@ -334,4 +354,4 @@ WithCustomOption.args = {
showOptionsOnFocus: false,
size: 'medium',
value: '',
}
};
18 changes: 9 additions & 9 deletions ...orybook/stories/components/modus-pagination/modus-pagination-storybook-docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ import { Anchor } from '@storybook/addon-docs';

## Properties

| Property | Attribute | Description | Type | Default |
| -------------------- | ----------------------- | ----------------------------------------------------------------------------------- | -------- | ----------- | -------- | ---------- |
| `activePage` | `active-page` | The pagination's active page | `number` | `1` |
| `ariaLabel` | `aria-label` | The pagination's aria-label | `string` | `undefined` |
| `maxPage` | `max-page` | The pagination's maximum page | `number` | `undefined` |
| `minPage` | `min-page` | The pagination's minimum page | `number` | `undefined` |
| `nextPageButtonText` | `next-page-button-text` | (Optional) The previous page button text. If not set, an icon control will be used. | `string` | `undefined` |
| `prevPageButtonText` | `prev-page-button-text` | (Optional) The next page button text. If not set, an icon control will be used. | `string` | `undefined` |
| `size` | `size` | The pagination's size | `"large" | "medium" | "small"` | `'medium'` |
| Property | Attribute | Description | Type | Default |
| -------------------- | ----------------------- | ----------------------------------------------------------------------------------- | ---------------------------- | ----------- |
| `activePage` | `active-page` | The pagination's active page | `number` | `1` |
| `ariaLabel` | `aria-label` | The pagination's aria-label | `string` | `undefined` |
| `maxPage` | `max-page` | The pagination's maximum page | `number` | `undefined` |
| `minPage` | `min-page` | The pagination's minimum page | `number` | `undefined` |
| `nextPageButtonText` | `next-page-button-text` | (Optional) The previous page button text. If not set, an icon control will be used. | `string` | `undefined` |
| `prevPageButtonText` | `prev-page-button-text` | (Optional) The next page button text. If not set, an icon control will be used. | `string` | `undefined` |
| `size` | `size` | The pagination's size | `"large", "medium", "small"` | `'medium'` |

### DOM Events

Expand Down
14 changes: 7 additions & 7 deletions ...ybook/stories/components/modus-radio-group/modus-radio-group-storybook-docs.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,13 @@ A TypeScript typing has been provided named RadioButton defined as:

### Properties

| Name | Description | Type | Options | Default Value | Required |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------ | ------------- | -------- |
| `checked-id` | The id of the checked radio button | `string` | | | ✔ |
| `name` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) of the radio group. Used to group individual radio elements into one group. | `string` | | | ✔ |
| `radioButtons` | The radio buttons | `RadioButton[]` | | | ✔ |
| `aria-label` | The radio group's aria-label | `string` | | | |
| `size` | The radio group's size | `string` | "small","medium" | "medium" | |
| Name | Description | Type | Options | Default Value | Required |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------- | ---------------- | ------------- | -------- |
| `checked-id` | The id of the checked radio button | `string` | | | ✔ |
| `name` | The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#defining_a_radio_group) of the radio group. Used to group individual radio elements into one group. | `string` | | | ✔ |
| `radioButtons` | The radio buttons | `RadioButton[]` | | | ✔ |
| `aria-label` | The radio group's aria-label | `string` | | | |
| `size` | The radio group's size | `string` | "small","medium" | "medium" | |

### DOM Events

Expand Down

0 comments on commit b370218

Please sign in to comment.