@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/InputExamples.md

@@ -0,0 +1,224 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the size of the input using the <code>size</code> prop. It supports 3 sizes:</p><li>For most common cases, use the default <code>medium.</code></li><li>To emphasize specific inputs in onboarding flows, use <code>large</code>.</li><li>Use <code>small</code> for more dense and compact layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Input size="large" placeholder="Large" />
+  <Input size="medium" placeholder="Medium" />
+  <Input size="small" placeholder="Small" />
+</StorybookComponents.Stack>;
+```
+
+### Border
+- description: <p>Style the input using the <code>border</code> prop. It supports 4 styles:</p><li>For forms and most common cases, use <code>default</code>.</li><li>To build inputs that can be used to filter data, use <code>round</code>.</li><li>Use <code>bottomLine</code> to create an editable, underlined title field.</li><li>When a component provides its own hover and focus styles, such as a table or spreadsheet cells, use <code>none</code>.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Input border="default" placeholder="Default" />
+  <Input border="round" placeholder="Round" />
+  <Input border="bottomLine" placeholder="Bottom line" />
+  <Input border="none" placeholder="None" />
+</StorybookComponents.Stack>;
+```
+
+### Status
+- description: <p>Control the status of the input using the <code>status</code> prop. It supports 3 states:</p><li><code>error</code> demonstrates that a required input is missing something or the entry was invalid.</li><li><code>warning</code>  highlights an input value that might have a significant impact to a user.</li><li><code>loading</code> shows when an input value is being uploaded to the server.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Input status="error" placeholder="Error" />
+  <Input status="warning" placeholder="Warning" />
+  <Input status="loading" placeholder="Loading" />
+</StorybookComponents.Stack>;
+```
+
+### Status message
+- description: <p>Add text that explains the status or what action the user should take with the <code>statusMessage</code> prop.</p><p></p><p>Showing the status message inline, directly below the input is preferred in all default cases.</p><li>To add an accessible inline message, wrap the component in a <code><FormField/></code> and add the <code>statusMessage</code>.</li><li>To add a status message in a tooltip that requires users to hover on the icon, use the <code>statusMessage</code> prop. Control tooltip placement with <code>tooltipPlacement</code> prop.</li><p></p><p>View more inline status message examples in <code><FormField/></code>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For all default cases:</Text>
+    <FormField status="error" statusMessage="This is an error message.">
+      <Input placeholder="See message below" />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For narrow layouts only:</Text>
+    <Input
+      placeholder="Hover on status icon"
+      status="error"
+      statusMessage="This is an error message."
+      tooltipPlacement="top-end"
+    />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Read-only and disabled
+- description: <p>Inputs can also be made read-only or disabled entirely.</p><li><code>readOnly</code> disables adding or editing, but allows the user to copy the current value. Use it to display URLs, code, etc.</li><li><code>disabled</code>removes all interactions and creates a disabled input state. Use it to highlight functions that are unavailable.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Input readOnly value="Read-only" />
+  <Input disabled value="Disabled" />
+</StorybookComponents.Stack>;
+```
+
+### Prefix &amp; suffix
+- description: <p>Add text, icons or a button at the beginning or end of a text field using <code>prefix</code> and <code>suffix</code>.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Input
+    prefix={<Input.Affix>https://</Input.Affix>}
+    suffix={<Input.Affix>.com</Input.Affix>}
+    value=""
+  />
+  <Input
+    prefix={
+      <Input.IconAffix>
+        <Icons.GitHub />
+      </Input.IconAffix>
+    }
+    suffix={
+      <Input.IconAffix>
+        <TextButton>Button</TextButton>
+      </Input.IconAffix>
+    }
+    value=""
+  />
+</StorybookComponents.Stack>;
+```
+
+### Clear button
+- description: <p>Enable a button that lets users easily clear the input value by using the <code>clearButton</code> prop.</p>
+- example: 
+```jsx 
+() => {
+  const [inputText, setInputText] = React.useState(
+    'Click the clear button to erase this value.',
+  );
+
+  return (
+    <Input
+      value={inputText}
+      clearButton
+      onChange={e => setInputText(e.target.value)}
+      onClear={() => setInputText('')}
+    />
+  );
+};
+```
+
+### Text overflow
+- description: <p>Control long text values with the <code>textOverflow</code> prop. There are 2 options:</p><li><code>clip</code> (the default) cuts off text that is longer than the input field. </li><li><code>ellipsis</code> truncates the additional text with an ellipsis. This is especially useful with the <code>bottomLine</code> input style.</li>
+- example: 
+```jsx 
+<Input
+  textOverflow="ellipsis"
+  border="bottomLine"
+  value="This is an extremely long sentence that takes up far more space than can fit inside this input field, so it has to be shortened so that the beginning can be read, but with an ellipsis to indicate there is more text than can be shown at once."
+/>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Compound input
+- description: <p>When multiple inputs represent the same kinds of data, like phone numbers or addresses, fields can be shown together under a single title using the <code><Layout/></code> component.</p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState('');
+
+  const getDisplayValue = value => {
+    const [, group1, group2, group3] = value
+      .replace(/\D/g, '')
+      .match(/(\d{0,2})(\d{0,3})(\d{0,4})/);
+    return (
+      (!group2 ? group1 : group1 + ' ') + group2 + (group3 ? '-' + group3 : '')
+    );
+  };
+
+  const options = [
+    listItemSelectBuilder({ id: 0, title: 'Israel', suffix: '+972' }),
+    listItemSelectBuilder({ id: 1, title: 'Japan', suffix: '+81' }),
+    listItemSelectBuilder({ id: 2, title: 'Australia', suffix: '+61' }),
+  ];
+
+  const onChange = e => {
+    const { value } = e.target;
+    if (value.length < 12) {
+      setValue(getDisplayValue(value));
+    }
+  };
+
+  const renderAutoComplete = () => (
+    <AutoComplete
+      popoverProps={{ placement: 'bottom-start' }}
+      value="+972"
+      options={options}
+    />
+  );
+
+  return (
+    <FormField label="Phone number">
+      <Layout gap={6}>
+        <Cell span={2}>{renderAutoComplete()}</Cell>
+        <Cell span={10}>
+          <Input placeholder="00 000-0000" onChange={onChange} value={value} />
+        </Cell>
+      </Layout>
+    </FormField>
+  );
+};
+```
+
+### Input as a title
+- description: <p>Inputs can also be used as card titles to help organize groups and files. This works best with the <code>bottomLine</code> border.</p>
+- example: 
+```jsx 
+() => {
+  const renderCard = (imageSrc, inputValue) => (
+    <Card>
+      <Box direction="vertical" padding="SP1 SP1 SP2">
+        <Layout gap={12}>
+          <Cell>
+            <Box padding="6px 6px 0px">
+              <Image borderRadius="4px" height="180px" src={imageSrc} />
+            </Box>
+          </Cell>
+
+          <Cell>
+            <Input
+              border="bottomLine"
+              textOverflow="ellipsis"
+              defaultValue={inputValue}
+            />
+          </Cell>
+        </Layout>
+      </Box>
+    </Card>
+  );
+
+  return (
+    <Layout>
+      <Cell span={6}>{renderCard('', 'Empty photo album')}</Cell>
+      <Cell span={6}>{renderCard('example.jpg', 'Cooking recipes album')}</Cell>
+    </Layout>
+  );
+};
+```
+
+

package/dist/docs/components/InputShellExamples.md

@@ -0,0 +1,17 @@
+
+## Feature Examples
+
+
+### No examples available
+- description: No examples available
+- example: 
+```jsx 
+No examples available
+```
+
+
+
+
+    
+
+

package/dist/docs/components/InputWithLabelExamples.md

@@ -0,0 +1,78 @@
+
+## Feature Examples
+
+
+### Status
+- description: Control component status using `status` prop. It supports two states:<br/>
+        &emsp;- `error` - use it to highlight an invalid value<br/>
+        &emsp;- `warning` - use it to highlight a value that impacts user business or can’t be validated <br/>
+        <br/>
+        Explain the status with `statusMessage` prop.
+- example: 
+```jsx 
+
+```
+
+### Status Message
+- description: Explain the status with `statusMessage` prop. The message is revealed when a user mouse hovers the status icon.
+        The placement of a tooltip is controlled with `tooltipPlacement` prop.
+- example: 
+```jsx 
+
+```
+
+### Disabled
+- description: Disable all input interactions with `disabled` prop. Use it to highlight unavailable functions.
+- example: 
+```jsx 
+
+```
+
+### Suffix
+- description: Explain field values with additional information added to the `suffix` area.
+        This prop accepts text, icons and even buttons. It accepts an array of objects as well.
+- example: 
+```jsx 
+
+```
+
+### Type
+- description: Control an acceptable value format with the `type` prop. This component accepts all <a href="https://www.w3schools.com/html/html_form_input_types.asp">native HTML types</a>.
+- example: 
+```jsx 
+
+```
+
+### Max length
+- description: Restrict the number of characters that can be entered into a field with the `maxLength` prop.
+- example: 
+```jsx 
+
+```
+
+### Bottom line border
+- description: Style the component using `border` prop. It supports 2 styles:<br/>
+        &emsp;- `default` - use in all common cases.<br/>
+        &emsp;- `bottomLine` - use as a title which can be edited on the click.<br/>
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Checkout form
+- description: This input with labels can only be used to build a Premium Checkout form.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/InputWithOptionsExamples.md

@@ -0,0 +1,17 @@
+
+## Feature Examples
+
+
+### No examples available
+- description: No examples available
+- example: 
+```jsx 
+No examples available
+```
+
+
+
+
+    
+
+