Skip to content

Commit

Permalink
chore(storybook): fix playground, remove test examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@tw15egan
tw15egan committed Nov 3, 2022
1 parent f81465a commit bcc1cd2
Showing 1 changed file with 27 additions and 167 deletions.
194 changes: 27 additions & 167 deletions packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,63 +44,17 @@ export const Simple = () => (
id="date-picker-simple"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="simple">
<FluidDatePickerInput
invalid
invalidText="Error message that is really long can wrap to more lines but should not be excessively long."
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
id="date-picker-simple"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="simple">
<FluidDatePickerInput
warn
warnText="Warning message that is really long can wrap to more lines but should not be excessively long."
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
id="date-picker-simple"
/>
</FluidDatePicker>
</div>
);

export const SingleWithCalendar = () => (
export const Single = () => (
<div style={{ width: '288px' }}>
<FluidDatePicker datePickerType="single">
<FluidDatePickerInput
style={{ width: '288px' }}
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
id="date-picker-single"
size="md"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="single">
<FluidDatePickerInput
invalid
invalidText="Error message that is really long can wrap to more lines but should not be excessively long."
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
id="date-picker-single"
size="md"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="single">
<FluidDatePickerInput
warn
warnText="Warning message that is really long can wrap to more lines but should not be excessively long."
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
id="date-picker-single"
size="md"
/>
</FluidDatePicker>
</div>
Expand All @@ -123,138 +77,51 @@ export const RangeWithCalendar = () => {
size="md"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker
invalid
invalidText="Error message that is really long can wrap to more lines but should not be excessively long."
datePickerType="range">
<FluidDatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
size="md"
/>
<FluidDatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
size="md"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="range">
<FluidDatePickerInput
invalid
invalidText="Error message that is really long can wrap to more lines but should not be excessively long."
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
/>
<FluidDatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="range">
<FluidDatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
/>
<FluidDatePickerInput
invalid
invalidText="Error message that is really long can wrap to more lines but should not be excessively long."
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</FluidDatePicker>
<br />
<br />
</div>
);
};

export const Playground = (args) => {
const { invalid, invalidText, warn, warnText, disabled } = args;
return (
<div style={{ width: '288px' }}>
<FluidDatePicker
datePickerType="range"
warn
warnText="Warning message that is really long can wrap to more lines but should not be excessively long.">
<FluidDatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
/>
invalid={invalid}
invalidText={invalidText}
warn={warn}
warnText={warnText}>
<FluidDatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="range">
<FluidDatePickerInput
warn
warnText="Warning message that is really long can wrap to more lines but should not be excessively long."
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
labelText="Date Picker label"
id="date-picker-range-1"
disabled={disabled}
/>
<FluidDatePickerInput
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
id="date-picker-range-2"
disabled={disabled}
/>
</FluidDatePicker>
<br />
<br />
<FluidDatePicker datePickerType="range">
<FluidDatePickerInput
id="date-picker-input-id-start"
placeholder="mm/dd/yyyy"
labelText={ToggleTip}
/>
<FluidDatePicker datePickerType="single">
<FluidDatePickerInput
warn
warnText="Warning message that is really long can wrap to more lines but should not be excessively long."
id="date-picker-input-id-finish"
placeholder="mm/dd/yyyy"
labelText="End date"
labelText="Date Picker label"
id="date-picker-single"
invalid={invalid}
invalidText={invalidText}
disabled={disabled}
warn={warn}
warnText={warnText}
/>
</FluidDatePicker>
</div>
);
};

export const Playground = (args) => {
const { invalid, invalidText, warn, warnText, disabled, datePickerType } =
args;
return (
<FluidDatePicker
datePickerType={datePickerType}
invalid={invalid}
invalidText={invalidText}
warn={warn}
warnText={warnText}>
<FluidDatePickerInput
placeholder="mm/dd/yyyy"
labelText="Date Picker label"
id="date-picker-single"
disabled={disabled}
/>
{args.datePickerType === 'range' && (
<FluidDatePickerInput
placeholder="mm/dd/yyyy"
labelText="End date"
id="date-picker-input-2"
disabled={disabled}
/>
)}
</FluidDatePicker>
);
};

Playground.argTypes = {
appendTo: {
table: {
Expand Down Expand Up @@ -310,13 +177,6 @@ Playground.argTypes = {
disable: true,
},
},
datePickerType: {
control: {
type: 'select',
},
options: ['single', 'range'],
defaultValue: 'range',
},
disabled: {
control: { type: 'boolean' },
table: {
Expand Down

0 comments on commit bcc1cd2

Please sign in to comment.