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

wix-style-react

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

`;

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

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

export const _statusMessage = `
<NumberInput
  placeholder="Hover your mouse over the status icon"
  status="error"
  statusMessage="Message explaining the status"
  tooltipPlacement="top-end"
/>;
`;

export const _affix = `
<StorybookComponents.Stack flexDirection="column">
  <NumberInput prefix={<Input.Affix>$</Input.Affix>} value="20.00" />
  <NumberInput suffix={<Input.Affix>%</Input.Affix>} value="10" />
  <NumberInput
    prefix={<Input.IconAffix><Icons.Gift /></Input.IconAffix>}
    value="2"
    suffix={<Input.Affix>Tickets</Input.Affix>}
  />
</StorybookComponents.Stack>;
`;

export const _readOnlyAndDisabled = `
<StorybookComponents.Stack flexDirection="column">
  <NumberInput placeholder="Read-only" readOnly/>
  <NumberInput placeholder="Disabled" disabled/>
</StorybookComponents.Stack>;
`;

export const _clearButton = `
() => {
  const [inputText, setInputText] = React.useState('20');
 
  return (
    <NumberInput
      value={inputText}
      clearButton
      onChange={setInputText}
      onClear={() => setInputText('')}
    />
  );
};
`;

export const _stepper = `
<StorybookComponents.Stack flexDirection="column">
  <NumberInput
  step={20}
  placeholder="Click on stepper arrows to change value by 20 units at a time"
/>
  <NumberInput
  step={20}
  hideStepper
  placeholder="Click up and down arrow keys to change value by 20 when stepper is hidden"
/>
</StorybookComponents.Stack>;
`;

export const _minMax = `
<NumberInput
  min={-5}
  max={5}
  strict
  placeholder="You cannot type beyond 5 or -5 "
/>;
`;

export const _compoundInput = `() => {
  const [value, setValue] = React.useState(20)

  return (
    <FormField
      label="Discount"
      infoContent="The defined amount will be taken out off the price"
    >
      <Box gap="12px" width="100%">
        <Box direction="vertical" width="100%">
          <NumberInput
            prefix={<Input.Affix>$</Input.Affix>}
            onChange={setValue}
            value={value}
          />
        </Box>
        <Box width="102px" direction="vertical">
          <SegmentedToggle defaultSelected="amount">
            <SegmentedToggle.Icon value="amount" tooltipText="Fixed amount">
              $
            </SegmentedToggle.Icon>
            <SegmentedToggle.Icon value="percentage" tooltipText="Percentage">
              %
            </SegmentedToggle.Icon>
          </SegmentedToggle>
        </Box>
      </Box>
    </FormField>
  );
};
`;

export const _disabledStepper = `() => {
  const [value, setValue] = React.useState(20);

  return (
    <FormField label="Ticket Limit" infoContent="Maximum 20 tickets per order">
      <NumberInput
        min={0}
        max={20}
        strict
        value={value}
        onChange={setValue}
        placeholder="Enter ticket limit"
      />
    </FormField>
  );
};
`;