@wix/design-system 1.193.0 → 1.195.0

package/dist/docs/components/ImageViewerExamples.md

@@ -0,0 +1,125 @@
+
+## Feature Examples
+
+
+### Dimensions
+- description: <p>Specify the component's dimensions in pixels or by percentage using the <code>width</code> and <code>height</code> properties.</p>
+- example: 
+```jsx 
+<ImageViewer width="35%" height="240px" />;
+```
+
+### Status
+- description: <p>Control the component's status using the <code>status</code> prop. It supports three states:</p><li><code>error</code> indicates when an image failed to upload.</li><li><code>warning</code> highlights that the media can’t be validated.</li><li><code>loading</code> shows that the media file is loading.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <ImageViewer status="error" />
+  <ImageViewer status="warning" />
+  <ImageViewer status="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 image viewer 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.">
+      <ImageViewer />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For narrow layouts only:</Text>
+    <ImageViewer status="error" statusMessage="This is an error message." />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### States
+- description: <p>Supports two states:</p><li>No image source - uses <AddItem/> component to upload media in a required way. Use <code>addImageInfo</code> to specify a message to display in a tooltip when users hover over the component.</li><li>With image source - use <code>imageUrl</code> prop to pass a link to a media file.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <ImageViewer />
+  <ImageViewer imageUrl="example.jpg" />
+</StorybookComponents.Stack>;
+```
+
+### Border radius
+- description: <p>Remove default corner radius with the <code>removeRoundedBorders</code> prop. Use it when component is used as a part of another widget.</p>
+- example: 
+```jsx 
+<ImageViewer imageUrl="example.jpg" removeRoundedBorders />;
+```
+
+### Disabled
+- description: <p>Disable all viewer interactions with the <code>disabled</code> prop. Use it to highlight unavailable functions.</p><p></p><p>Customize the tooltip's style with all common <code>tooltipProps</code>.</p>
+- example: 
+```jsx 
+<ImageViewer disabled addImageInfo="Message explaining disabled item status" />;
+```
+
+### Actions
+- description: <p>Control which actions are visible with the <code>showUpdateButton</code>, <code>showDownloadButton</code> and <code>showRemoveButton</code> props. Tooltip messages explaining the actions can be customized according to their need.</p>
+- example: 
+```jsx 
+<ImageViewer
+  imageUrl="example.jpg"
+  showUpdateButton={true}
+  showDownloadButton={true}
+  showRemoveButton={true}
+  updateImageInfo="Change image"
+  downloadImageInfo="Download image"
+  removeImageInfo="Delete image"
+  moreImageInfo="More actions"
+/>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Form
+- description: <p>Use image viewer in forms where only a single image can be uploaded at a time, e.g., a cover for an event, group or program.</p>
+- example: 
+```jsx 
+<Card>
+  <Card.Header title="Program info" />
+  <Card.Divider />
+  <Card.Content>
+    <Layout>
+      <Cell span={8}>
+        <Box direction="vertical" gap="12px">
+          <FormField label="Program name" required>
+            <Input value="Sugar Reset" />
+          </FormField>
+          <FormField label="Description">
+            <InputArea
+              value="Want to feel better, have more energy and trim down your waistline at the same time? Removing refined and added sugar from your diet is for you!"
+              resizable
+              maxLength={100}
+              hasCounter
+              minHeight={120}
+            />
+          </FormField>
+        </Box>
+      </Cell>
+      <Cell span={4}>
+        <FormField label="Cover image">
+          <ImageViewer imageUrl="FoodExample1.jpg" height="218px" />
+        </FormField>
+      </Cell>
+    </Layout>
+  </Card.Content>
+</Card>;
+```
+
+

package/dist/docs/components/InfoIconExamples.md

@@ -0,0 +1,84 @@
+
+## Feature Examples
+
+
+### Size
+- description: Supports two sizes:<br/> 
+        &emsp;- `small` - Use it next to small and tiny texts.<br/>
+        &emsp;- `medium` Use it next to headings and medium texts.<br/>
+- example: 
+```jsx 
+
+<StorybookComponents.Stack>
+  <InfoIcon size="small" content="Small" />
+  <InfoIcon size="medium" content="Medium" />
+</StorybookComponents.Stack>;
+```
+
+### Adding a text link
+- description: Use the `TextButton` with skin `light` when you need to add a link for more information.<br/><br/>
+      The link should lead to Wix Help Center.
+- example: 
+```jsx 
+
+<InfoIcon
+  tooltipProps={{ maxWidth: '240px' }}
+  content={
+    <Box direction="vertical" gap="6px">
+      <Text light size="small">
+        This message explains the purpose of some feature.
+      </Text>
+      <TextButton size="small" underline="always" skin="light">
+        Learn more about this feature
+      </TextButton>
+    </Box>
+  }
+/>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Using InfoIcon in a form
+- description: Some components like `FormField` and `SidePanel` appear with a built-in info icon.
+        In other cases, insert the InfoIcon inline to a Text component. 
+- example: 
+```jsx 
+<Card>
+  <Card.Header
+    title="Edit Jeniffer Meli's Profile"
+    subtitle={
+      <Text secondary>
+        Note: Make sure your staff has given you the right to add their information and image
+        <InfoIcon content="This information will be public and seen by customers" />
+      </Text>
+    }
+  />
+  <Divider />
+  <Card.Content>
+    <Layout>
+      <Cell span={6}>
+        <FormField label="Title">
+          <Input defaultValue="Jeniffer Meli" />
+        </FormField>
+      </Cell>
+      <Cell span={6}>
+        <FormField
+          label="Description"
+          infoContent="Describe your staff member’s role and expertise. Clients will see this in the Staff Members Widget on your site."
+        >
+          <Input />
+        </FormField>
+      </Cell>
+    </Layout>
+  </Card.Content>
+</Card>;
+```
+
+

package/dist/docs/components/InputAreaExamples.md

@@ -0,0 +1,282 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the size of the input using the <code>size</code> prop. It supports 2 sizes:</p><li>For most common cases, use the default <code>medium.</code></li><li>Use <code>small</code> for more dense and compact layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <InputArea placeholder="Medium" size="medium" />
+  <InputArea placeholder="Small" size="small" />
+</StorybookComponents.Stack>;
+```
+
+### Height
+- description: <p>Control the height of an area by defining a minimum or maximum number of pixels, or a certain number of rows.</p><li>To define the minimum and maximum height in pixels, use <code>minHeight</code> and <code>maxHeight</code>.</li><li>Define the height of a specified number of rows with <code>rows</code>.</li>
+- example: 
+```jsx 
+<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>;
+```
+
+### 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">
+  <InputArea placeholder="Error" status="error" />
+  <InputArea placeholder="Warning" status="warning" />
+  <InputArea placeholder="Loading" status="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 component 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.">
+      <InputArea placeholder="See message below" tooltipPlacement="top-end" />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For narrow layouts only:</Text>
+    <InputArea
+      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.</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">
+  <InputArea value="Read-only" readOnly />
+  <InputArea value="Disabled" disabled />
+</StorybookComponents.Stack>;
+```
+
+### Resize
+- description: <p>Allow users to manually adjust the size of the input area by enabling the<code>resizable</code> prop.</p>
+- example: 
+```jsx 
+<InputArea
+  placeholder="Drag the handle in the bottom right corner to change the height of an area."
+  resizable
+/>;
+```
+
+### Character count
+- description: <p>Indicate how many characters the input area contains by enabling the <code>hasCounter</code> prop. To display a counter, specify the <code>maxLength</code> of characters allowed in the field.</p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState(
+    'This is a sentence that uses only some of the allowed characters.',
+  );
+
+  return (
+    <InputArea
+      value={value}
+      onChange={e => setValue(e.target.value)}
+      maxLength={100}
+      hasCounter
+    />
+  );
+};
+```
+
+### Auto grow
+- description: <p>Grow and shrink area size according to the input by enabling <code>autoGrow</code>. Specify the starting height of an area with <code>minRowsAutoGrow</code>.</p>
+- example: 
+```jsx 
+<InputArea
+  placeholder="Enter a lot of text into this area to see how it grows according to the length of content."
+  autoGrow={true}
+  minRowsAutoGrow={1}
+/>;
+```
+
+### Auto select
+- description: <p>Click to select/highlight all the text in the area with the <code>autoSelect</code> prop.</p>
+- example: 
+```jsx 
+<InputArea value="Click on the field to select the entire text." autoSelect />;
+```
+
+
+
+
+## Developer Examples
+
+
+### Controlled
+- description: <p>Component can be used in controlled mode by passing <code>value</code> and <code>onChange</code> props.</p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState(0);
+  return <InputArea value={value} onChange={(e) => setValue(e.target.value)} />;
+};
+
+```
+
+### Force autogrow when controlled externally
+- description: <p>Auto grow feature does not work when component is used in controlled way which means using <code>value</code> and <code>onChange</code> properties. To force auto grow behaviour on state change just call ref method of component called <code>calculateComputedRows</code> which will recalculate rows on every value change.</p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState('');
+  const ref = React.useRef();
+
+  React.useEffect(() => {
+    ref.current?.calculateComputedRows();
+  }, [value]);
+
+  const onInsertText = () => {
+    setValue((prevValue) => prevValue + 'field grows on every click ');
+  };
+
+  return (
+    <StorybookComponents.Stack width="100%" justifyContent="space-between">
+      <Button onClick={onInsertText}>Insert Text</Button>
+      <div style={{ width: '100%' }}>
+        <InputArea
+          ref={ref}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          autoGrow
+          placeholder="Click on Insert Text"
+          minRowsAutoGrow={1}
+        />
+      </div>
+    </StorybookComponents.Stack>
+  );
+};
+
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Forms
+- description: <p>Use input area when the user needs to enter multiple lines of text such as product descriptions and policies.</p><p></p><p>Use <code><FormField/></code> to provide a label for the field.</p>
+- example: 
+```jsx 
+() => {
+  const [visibleChecked, setVisibleChecked] = React.useState(true);
+  const [nameInputValue, setNameInputValue] = React.useState('My New Menu');
+  const [value, setValue] = React.useState('');
+
+  return (
+    <CustomModalLayout
+      primaryButtonText="Create Menu"
+      secondaryButtonText="Cancel"
+      onCloseButtonClick={() => {}}
+      title="Create new 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
+              value={value}
+              onChange={e => setValue(e.target.value)}
+            />
+          </FormField>
+        </Cell>
+        <Cell span={12}>
+          <FormField
+            label="Visible to customers"
+            labelPlacement="right"
+            stretchContent={false}
+          >
+            <ToggleSwitch
+              checked={visibleChecked}
+              onChange={() => setVisibleChecked(!visibleChecked)}
+            />
+          </FormField>
+        </Cell>
+      </Layout>
+    </CustomModalLayout>
+  );
+};
+```
+
+### Settings panel
+- description: <p>Use input area in settings panels to allow users to edit longer descriptions and titles.</p><p></p><p></p><p></p><p></p><p></p><p></p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState('');
+  return (
+    <SidePanel maxHeight="576px" width="288px" skin="floating">
+      <SidePanel.Header title="Text Box Settings" />
+      <SidePanel.Content noPadding>
+        <SidePanel.Field>
+          <FormField label="Description">
+            <InputArea
+              placeholder="This input area is great for longer descriptions with multiple lines of text." size="small"
+              rows={3}
+              maxLength={300}
+              hasCounter
+              resizable
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </FormField>
+        </SidePanel.Field>
+        <SidePanel.Field>
+          <FormField label="What does the button do?">
+            <SegmentedToggle size="small" defaultSelected="Open">
+              <SegmentedToggle.Button value="Open">
+                Expand
+              </SegmentedToggle.Button>
+              <SegmentedToggle.Button value="Closed">
+                Link
+              </SegmentedToggle.Button>
+            </SegmentedToggle>
+          </FormField>
+        </SidePanel.Field>
+        <SidePanel.Field>
+          <FormField label="Link button text">
+            <Input size="small" placeholder="Link to full article" />
+          </FormField>
+        </SidePanel.Field>
+      </SidePanel.Content>
+    </SidePanel>
+  );
+};  
+```
+
+