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

wix-style-react

export const _height = `
<RichTextInputArea minHeight="120px" maxHeight="400px" />;
`;

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

export const _statusMessage = `
<RichTextInputArea
  placeholder="Hover the mouse on status icon"
  status="error"
  statusMessage="Message explaining the status"
/>;
`;

export const _disabled = `
<RichTextInputArea placeholder="Disabled" disabled />;
`;

export const _textFormat = `
<StorybookComponents.Stack flexDirection="column">
  <RichTextInputArea initialValue='<strong>Bold text</strong>' />
  <RichTextInputArea initialValue='<em>Italic text</em>' />
  <RichTextInputArea initialValue='<u>Underline text</u>' />
  <RichTextInputArea initialValue='<a target="_blank" href="http://www.wix.com">Link</a>' />
  <RichTextInputArea initialValue='<ul><li>Bullet list item</li><li>Bullet list item</li><li>Bullet list item</li></ul>' />
  <RichTextInputArea initialValue='<ol><li>Number list item</li><li>Number list item</li><li>Number list item</li></ol>' />
</StorybookComponents.Stack>;
`;

export const _customButtonLabels = `
<RichTextInputArea
  placeholder="Hover the mouse on toolbar actions"
  texts={{
    toolbarButtons: {
      boldButtonLabel: 'Bold',
      italicButtonLabel: 'Italic',
      underlineButtonLabel: 'Underline',
      linkButtonLabel: 'Link',
      bulletedListButtonLabel: 'Bulleted list',
      numberedListButtonLabel: 'Numbered list',
    },
  }}
/>;
`;

export const _spellCheck = `
<RichTextInputArea spellCheck initialValue="This text is mispeled. Click to see red underline." />;
`;

export const _form = `
<Card>
  <Card.Header title="About Your Event (Optional)" />
  <Card.Divider />
  <Card.Content>
    <FormField label="What is this event about?">
      <RichTextInputArea minHeight="120px" placeholder="Use this space to tell guests more about this event, e.g., event schedule, speakers, important info & more." />
    </FormField>
  </Card.Content>
</Card>;
`;