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

fix: mdx formatting inside component demo #3160

Merged
merged 2 commits into from
Sep 16, 2022
Merged

fix: mdx formatting inside component demo #3160

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d8c533f
fix: mdx formatting inside component demo
alisonjoseph Sep 15, 2022
af4947c
Merge branch 'main' into mdx-formatting-usage
mattrosno Sep 16, 2022
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
12 changes: 8 additions & 4 deletions src/pages/components/breadcrumb/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,15 @@ type used should be consistent across a product.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
}}
>{`
>
{`
<Breadcrumb noTrailingSlash>
<BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
<BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem isCurrentPage href="/">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="breadcrumb"
links={{
Expand All @@ -99,13 +101,15 @@ type used should be consistent across a product.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-breadcrumb--default',
}}
>{`
>
{`
<Breadcrumb>
<BreadcrumbItem href="/">Breadcrumb 1</BreadcrumbItem>
<BreadcrumbItem href="/">Breadcrumb 2</BreadcrumbItem>
<BreadcrumbItem href="/">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
18 changes: 12 additions & 6 deletions src/pages/components/button/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,11 @@ import { Add } from '@carbon/react/icons';
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
}}
>{`
>
{`
<Button>Button</Button>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="button-with-icon"
knobs={{
Expand All @@ -130,9 +132,11 @@ import { Add } from '@carbon/react/icons';
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-button--default',
}}
>{`
>
{`
<Button renderIcon={Add}>Button</Button>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="icon-only"
knobs={{}}
Expand All @@ -145,11 +149,13 @@ import { Add } from '@carbon/react/icons';
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-button--icon',
}}
>{`
>
{`
<IconButton align='top' label='Icon button' className='cds--btn--icon-only'>
<Add size={16}/>
</IconButton>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
6 changes: 4 additions & 2 deletions src/pages/components/checkbox/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,13 +109,15 @@ set whereas radio buttons allow the user to select only one option.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-checkbox--default',
}}
>{`
>
{`
<fieldset className="cds--fieldset">
<legend className="cds--label">Checkbox heading</legend>
<Checkbox labelText="Checkbox label" id="checked" />
<Checkbox labelText="Checkbox label" id="checked-2" />
</fieldset>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
6 changes: 4 additions & 2 deletions src/pages/components/code-snippet/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,11 +113,13 @@ import {
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
}}
>{`
>
{`
<CodeSnippet type="multi">
{\`${codeSnippet}\`}
</CodeSnippet>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="code-snippet-inline"
knobs={{ CodeSnippet: ['disabled'] }}
Expand Down
18 changes: 12 additions & 6 deletions src/pages/components/code-snippet/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,11 @@ length use cases—inline, single line, and multi-line.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--single-line',
}}
>{`
>
{`
<CodeSnippet type="single">${codeSnippetSingle}</CodeSnippet>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="code-snippet-multi"
knobs={{ CodeSnippet: ['light'] }}
Expand All @@ -104,11 +106,13 @@ length use cases—inline, single line, and multi-line.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--multi-line',
}}
>{`
>
{`
<CodeSnippet type="multi">
{\`${codeSnippet}\`}
</CodeSnippet>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="code-snippet-inline"
knobs={{ CodeSnippet: ['light'] }}
Expand All @@ -121,9 +125,11 @@ length use cases—inline, single line, and multi-line.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-code-snippet--inline',
}}
>{`
>
{`
<CodeSnippet type="inline">${codeSnippetSingle}</CodeSnippet>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
6 changes: 4 additions & 2 deletions src/pages/components/content-switcher/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,13 +87,15 @@ binary decision.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-content-switcher--default',
}}
>{`
>
{`
<ContentSwitcher onChange={console.log}>
<Switch name={'first'} text='First section' />
<Switch name={'second'} text='Second section' />
<Switch name={'third'} text='Third section' />
</ContentSwitcher>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
24 changes: 16 additions & 8 deletions src/pages/components/date-picker/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ You can customize the time picker's format depending on location or need.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
}}
>{`
>
{`
<DatePicker dateFormat="m/d/Y" datePickerType="simple">
<DatePickerInput
id="date-picker-default-id"
Expand All @@ -95,7 +96,8 @@ You can customize the time picker's format depending on location or need.
type="text"
/>
</DatePicker>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="single-calendar"
knobs={{
Expand All @@ -111,7 +113,8 @@ You can customize the time picker's format depending on location or need.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--single-with-calendar',
}}
>{`
>
{`
<DatePicker dateFormat="m/d/Y" datePickerType="single">
<DatePickerInput
id="date-picker-calendar-id"
Expand All @@ -120,7 +123,8 @@ You can customize the time picker's format depending on location or need.
type="text"
/>
</DatePicker>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="range-calendar"
knobs={{
Expand All @@ -136,7 +140,8 @@ You can customize the time picker's format depending on location or need.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--range-with-calendar',
}}
>{`
>
{`
<DatePicker dateFormat="m/d/Y" datePickerType="range">
<DatePickerInput
id="date-picker-range-start"
Expand All @@ -151,7 +156,8 @@ You can customize the time picker's format depending on location or need.
type="text"
/>
</DatePicker>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="time-picker"
knobs={{
Expand All @@ -166,7 +172,8 @@ You can customize the time picker's format depending on location or need.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-date-picker--default',
}}
>{`
>
{`
<TimePicker id="time-picker">
<TimePickerSelect id="time-picker-select-1">
<SelectItem value="AM" text="AM" />
Expand All @@ -177,7 +184,8 @@ You can customize the time picker's format depending on location or need.
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Formatting
Expand Down
24 changes: 16 additions & 8 deletions src/pages/components/dropdown/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,8 @@ documentation, see the Storybooks for each framework below.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-dropdown--default',
}}
>{`
>
{`
<div style={{width: '300px', height: '100px'}}>
<Dropdown
ariaLabel="Dropdown"
Expand All @@ -107,7 +108,8 @@ documentation, see the Storybooks for each framework below.
titleText="Dropdown title"
/>
</div>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="combo-box"
knobs={{
Expand All @@ -122,7 +124,8 @@ documentation, see the Storybooks for each framework below.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-combo-box--default',
}}
>{`
>
{`
<div style={{width: '300px', height: '100px'}}>
<ComboBox
ariaLabel="ComboBox"
Expand All @@ -132,7 +135,8 @@ documentation, see the Storybooks for each framework below.
titleText="Combo box title"
/>
</div>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="multiselect"
knobs={{
Expand All @@ -147,7 +151,8 @@ documentation, see the Storybooks for each framework below.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
}}
>{`
>
{`
<div style={{width: '300px', height: '100px'}}>
<MultiSelect
ariaLabel="MultiSelect"
Expand All @@ -157,7 +162,8 @@ documentation, see the Storybooks for each framework below.
titleText="Multiselect title"
/>
</div>
`}</ComponentVariant>
`}
</ComponentVariant>
<ComponentVariant
id="filter-multiselect"
knobs={{ FilterableMultiSelect: ['size', 'disabled', 'invalid', 'warn'] }}
Expand All @@ -170,7 +176,8 @@ documentation, see the Storybooks for each framework below.
'Web Components':
'https://web-components.carbondesignsystem.com/?path=/story/components-multi-select--default',
}}
>{`
>
{`
<div style={{width: '300px', height: '100px'}}>
<FilterableMultiSelect
ariaLabel="Filterable MultiSelect"
Expand All @@ -180,7 +187,8 @@ documentation, see the Storybooks for each framework below.
titleText="Filterable multiselect title"
/>
</div>
`}</ComponentVariant>
`}
</ComponentVariant>
</ComponentDemo>

## Sample data
Expand Down
Loading