Skip to content

Commit

Permalink
fix: mdx formatting inside component demo (#3160)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonjoseph
alisonjoseph authored Sep 16, 2022
1 parent 6b5e381 commit 2cf9d87
Show file tree
Hide file tree
Showing 33 changed files with 252 additions and 126 deletions.
12 changes: 8 additions & 4 deletions src/pages/components/breadcrumb/usage.mdx
View file
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
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
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
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
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
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
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
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

1 comment on commit 2cf9d87

@vercel
Copy link

@vercel vercel bot commented on 2cf9d87 Sep 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem-carbon-design-system.vercel.app

Please sign in to comment.