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

wix-style-react

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

export const _message = `
  <StatusIndicator message="Message in a tooltip explains the status" />;`;

export const _tooltipPlacement = `
<StorybookComponents.Stack>
  Top:
  <StatusIndicator message="top" tooltipPlacement="top" />
  Left:
  <StatusIndicator message="left" tooltipPlacement="left" />
  Bottom:
  <StatusIndicator message="bottom" tooltipPlacement="bottom" />
  Right:
  <StatusIndicator message="right" tooltipPlacement="right" />
</StorybookComponents.Stack>;`;

export const _formElements = `
<Box direction="vertical" gap="30px">
  <Input
    status="error"
    placeholder="Enter product name"
    statusMessage="This field is mandatory"
  />
  <AddressInput status="loading" value=" 24 Sillwood St, Brighton" />
  <AutoComplete status="warning" placeholder="Select colour" />
</Box>;`;