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

wix-style-react

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <InputWithLabel label="Error" status="error" />
  <InputWithLabel
    label="Error with message"
    status="error"
    statusMessage="Message explaining the status"
  />
</StorybookComponents.Stack>;`;

export const _disabled = `
<InputWithLabel
  label="Field"
  value="Disabled"
  disabled
/>;
`;

export const _suffix = `
<StorybookComponents.Stack flexDirection="column" gap="0">
  <InputWithLabel label="One item" suffix={[<Icons.InfoCircle />]} />
  <InputWithLabel
    label="Two items"
    suffix={[<Icons.Hidden />, <Icons.LockLocked />]}
  />
  <InputWithLabel
    label="Three items"
    suffix={[
      <Box>Suffix</Box>,
      <Icons.LockLocked />,
      <Box color="B10">
        <Icons.ExternalLink style={{ cursor: 'pointer' }} />
      </Box>,
    ]}
  />
  <InputWithLabel
    label="Hover icon to see cursor change"
    suffix={[
      <Box color="B10">
        <Icons.InfoCircle style={{ cursor: 'pointer' }} />
      </Box>,
    ]}
  />
</StorybookComponents.Stack>;
`;

export const _type = `
<StorybookComponents.Stack flexDirection="column" gap="0">
  <InputWithLabel
    label="Text"
    type="text" />
  <InputWithLabel
    label="Number"
    type="number" />
  <InputWithLabel
    label="Password"
    type="password" />
</StorybookComponents.Stack>;
`;

export const _maxLength = `
<InputWithLabel
  label="Start typing to see that field accept no more than 5 characters"
  maxLength={5}
/>
`;

export const _checkoutForm = `
<Card>
  <Card.Content>
    <Layout>
      <Cell>
        <Text>Card Details</Text>
      </Cell>
      <Cell>
        <InputWithLabel label="Card Number" type="number" maxLength={16} />
      </Cell>
      <Cell span={6}>
        <InputWithLabel label="Expiration" type="number" maxLength={5} />
      </Cell>
      <Cell span={6}>
        <InputWithLabel
          label="CVV"
          type="number"
          maxLength={5}
          suffix={[
            <InfoIcon content="Last 3 digits on the back of your card" />,
          ]}
        />
      </Cell>
    </Layout>
  </Card.Content>
</Card>;
`;