wix-style-react/src/TimeInput/docs/TimeInput.examples.js

wix-style-react

export const _width = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInput width="auto" />
  <TimeInput width="100%" />
</StorybookComponents.Stack>;`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <TimeInput status="error" />
    <TimeInput status="error" hideStatusSuffix/>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <TimeInput status="warning" />
    <TimeInput status="warning" hideStatusSuffix/>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack>
    <TimeInput status="loading" />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _statusMessage = `
<TimeInput status="error" statusMessage="This time is invalid" />;`;

export const _disabled = `<StorybookComponents.Stack>
<TimeInput disabled />
<TimeInput disabled dashesWhenDisabled/>
</StorybookComponents.Stack>`;

export const _suffix = `<TimeInput disableAmPm customSuffix="GMT+1" />;`;

export const _format = `<StorybookComponents.Stack flexDirection="column">
<TimeInput />
<TimeInput disableAmPm/>
</StorybookComponents.Stack>;`;

export const _minutesStep = `<StorybookComponents.Stack>
<StorybookComponents.Stack flexDirection="column" gap="6px">
  5 min:
  <TimeInput minutesStep="5" />
</StorybookComponents.Stack>
<StorybookComponents.Stack flexDirection="column" gap="6px">
  15 min:
  <TimeInput minutesStep="15" />
</StorybookComponents.Stack>
<StorybookComponents.Stack flexDirection="column" gap="6px">
  30 min:
  <TimeInput minutesStep="30" />
</StorybookComponents.Stack>
</StorybookComponents.Stack>;`;

export const _seconds = `<TimeInput showSeconds />;`;

export const _scheduling = `() => {
  const [startDate, setStartDate] = React.useState();
  const [endDate, setEndDate] = React.useState();

  return (
    <Layout gap="10px">
      <Cell span={3}>
        <FormField label="Date">
          <DatePicker
            width="100%"
            placeholderText="Select Date"
            value={startDate}
            onChange={value => setStartDate(value)}
          />
        </FormField>
      </Cell>
      <Cell span={3}>
        <FormField label="Time">
          <TimeInput />
        </FormField>
      </Cell>
      <Cell span={3}>
        <FormField label="End Date">
          <DatePicker
            width="100%"
            placeholderText="Select Date"
            value={endDate}
            onChange={value => setEndDate(value)}
          />
        </FormField>
      </Cell>
      <Cell span={3}>
        <FormField label="End Time">
          <TimeInput />
        </FormField>
      </Cell>
    </Layout>
  );
};`;