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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInputNext size="large" placeholder="Large"  />
  <TimeInputNext size="medium" placeholder="Medium" />
  <TimeInputNext size="small" placeholder="Small" />
</StorybookComponents.Stack>;
`;

export const _width = `
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack>
    <TimeInputNext width="auto" placeholder="Auto" />
  </StorybookComponents.Stack>
  <TimeInputNext width="100%" placeholder="Full width" />
</StorybookComponents.Stack>;
`;

export const _border = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInputNext border="standard" placeholder="Standard"  />
  <TimeInputNext border="round" placeholder="Round" />
  <TimeInputNext border="bottomLine" placeholder="Bottom Line" />
</StorybookComponents.Stack>;
`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInputNext status="error" placeholder="Error" />
  <TimeInputNext status="warning" placeholder="Warning" />
  <TimeInputNext status="loading" placeholder="Loading" />
</StorybookComponents.Stack>;
`;

export const _statusMessage = `
<TimeInputNext
  status="error"
  statusMessage="This field is required"
/>;
`;

export const _disabled = `
<TimeInputNext disabled />;
`;

export const _affix = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInputNext
    prefix={<Input.Affix>From</Input.Affix>}
    suffix={<Input.Affix>GMT+1</Input.Affix>}
  />
</StorybookComponents.Stack>;
`;

export const _locale = `
<StorybookComponents.Stack flexDirection='column'>
  <TimeInputNext locale="en" />
  <TimeInputNext locale="de"/>
</StorybookComponents.Stack>;
`;

export const _timeStyle = `
<StorybookComponents.Stack flexDirection="column">
  <TimeInputNext timeStyle="short" />
  <TimeInputNext timeStyle="long" />
</StorybookComponents.Stack>;
`;

export const _step = `
<StorybookComponents.Stack>
    <StorybookComponents.Stack flexDirection="column" gap="6px">
    15 min (default):
    <TimeInputNext step={15} />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    5 min:
    <TimeInputNext step={5}/>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    30 min:
    <TimeInputNext step={30} />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    60 min:
    <TimeInputNext step={60} />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
`;

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">
          <TimeInputNext />
        </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">
          <TimeInputNext />
        </FormField>
      </Cell>
    </Layout>
  );
};
`;

export const _range = `
<Range>
  <TimeInputNext />
  <TimeInputNext />
</Range>;
`;