Skip to content

Commit

Permalink
fix: add time picker to website (#1906)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonjoseph
alisonjoseph authored Oct 21, 2020
1 parent ef3f114 commit 9bacfa7
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 16 deletions.
51 changes: 43 additions & 8 deletions src/pages/components/date-picker/code.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,16 @@ usage documentation, see the Storybooks for each framework below.
id: 'range-calendar',
label: 'Range with calendar',
},
,
{
id: 'time-picker',
label: 'Time picker',
},
]}>
<ComponentVariant id="default-datepicker" knobs={{
DatePicker: ['light']
<ComponentVariant
id="default-datepicker"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -86,8 +93,10 @@ usage documentation, see the Storybooks for each framework below.
/>
</DatePicker>
`}</ComponentVariant>
<ComponentVariant id="single-calendar" knobs={{
DatePicker: ['light']
<ComponentVariant
id="single-calendar"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -107,8 +116,10 @@ usage documentation, see the Storybooks for each framework below.
/>
</DatePicker>
`}</ComponentVariant>
<ComponentVariant id="range-calendar" knobs={{
DatePicker: ['light']
<ComponentVariant
id="range-calendar"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -134,5 +145,29 @@ usage documentation, see the Storybooks for each framework below.
/>
</DatePicker>
`}</ComponentVariant>

</ComponentDemo>
<ComponentVariant
id="time-picker"
knobs={{
TimePicker: ['light'],
}}
links={{
React:
'https://react.carbondesignsystem.com/?path=/story/timepicker--default',
Angular:
'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
Vue:
'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
}}>{`
<TimePicker id="time-picker">
<TimePickerSelect id="time-picker-select-1">
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
<TimePickerSelect id="time-picker-select-2" >
<SelectItem value="Time zone 1" text="Time zone 1" />
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>
`}</ComponentVariant>
</ComponentDemo>
51 changes: 43 additions & 8 deletions src/pages/components/date-picker/usage.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,16 @@ for scheduling tasks.
id: 'range-calendar',
label: 'Range with calendar',
},
,
{
id: 'time-picker',
label: 'Time picker',
},
]}>
<ComponentVariant id="default-datepicker" knobs={{
DatePicker: ['light']
<ComponentVariant
id="default-datepicker"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -86,8 +93,10 @@ for scheduling tasks.
/>
</DatePicker>
`}</ComponentVariant>
<ComponentVariant id="single-calendar" knobs={{
DatePicker: ['light']
<ComponentVariant
id="single-calendar"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -107,8 +116,10 @@ for scheduling tasks.
/>
</DatePicker>
`}</ComponentVariant>
<ComponentVariant id="range-calendar" knobs={{
DatePicker: ['light']
<ComponentVariant
id="range-calendar"
knobs={{
DatePicker: ['light'],
}}
links={{
React:
Expand All @@ -134,8 +145,32 @@ for scheduling tasks.
/>
</DatePicker>
`}</ComponentVariant>

</ComponentDemo>
<ComponentVariant
id="time-picker"
knobs={{
TimePicker: ['light'],
}}
links={{
React:
'https://react.carbondesignsystem.com/?path=/story/timepicker--default',
Angular:
'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
Vue:
'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
}}>{`
<TimePicker id="time-picker">
<TimePickerSelect id="time-picker-select-1">
<SelectItem value="AM" text="AM" />
<SelectItem value="PM" text="PM" />
</TimePickerSelect>
<TimePickerSelect id="time-picker-select-2" >
<SelectItem value="Time zone 1" text="Time zone 1" />
<SelectItem value="Time zone 2" text="Time zone 2" />
</TimePickerSelect>
</TimePicker>
`}</ComponentVariant>
</ComponentDemo>

## Formatting

Expand Down

1 comment on commit 9bacfa7

@vercel
Copy link

@vercel vercel bot commented on 9bacfa7 Oct 21, 2020

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:

Please sign in to comment.