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

wix-style-react

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

export const _height = `
<StorybookComponents.Stack flexDirection="column">
  <InputArea placeholder="Height defined in pixels" minHeight="120px" maxHeight="300px" />
  <InputArea placeholder="Height that fits 4 rows of text" rows={4} />
</StorybookComponents.Stack>;
`;

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

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

export const _disabledAndReadOnly = `
<StorybookComponents.Stack flexDirection='column'>
  <InputArea value="Read only" readOnly />
  <InputArea value="Disabled" disabled />
</StorybookComponents.Stack>;
`;

export const _resize = `
<InputArea
  placeholder="Drag handle in the right bottom corner to change the height of an area"
  resizable
/>;
`;

export const _characterCount = `
() => {
  const [value, setValue] = React.useState(
    'Field values use 52 characters out of an allowed 100',
  );

  return (
    <InputArea
      value={value}
      onChange={e => setValue(e.target.value)}
      maxLength={100}
      hasCounter
    />
  );
};
`;

export const _autoGrow = `
<InputArea
  placeholder="Enter a lengthy text into this area to see how it grows according to content length"
  autoGrow={true}
  minRowsAutoGrow={1}
/>;
`;

export const _autoSelect = `
<InputArea value="Click on a field to select the entire text" autoSelect />;
`;

export const _form = `
() => {
  const [visibleChecked, setVisibleChecked] = React.useState(true);
  const [nameInputValue, setNameInputValue] = React.useState('My New Menu');

  return (
    <CustomModalLayout
      primaryButtonText="Add"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
      title="Add Menu"
    >
      <Layout gap="24px">
        <Cell span={12}>
          <FormField label="Name">
            <Input
              value={nameInputValue}
              onChange={e => setNameInputValue(e.target.value)}
            />
          </FormField>
        </Cell>
        <Cell span={12}>
          <FormField label="Description">
            <InputArea
              placeholder="Get people excited about your menu and your food."
              rows={4}
              maxLength={300}
              hasCounter
              resizable
            />
          </FormField>
        </Cell>
        <Cell span={12}>
          <FormField
            label="Visible to customers"
            labelPlacement="right"
            stretchContent={false}
          >
            <ToggleSwitch
              checked={visibleChecked}
              onChange={() => setVisibleChecked(!visibleChecked)}
            />
          </FormField>
        </Cell>
      </Layout>
    </CustomModalLayout>
  );
};
`;