@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/VariableInputExamples.md

@@ -0,0 +1,272 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the component size using the <code>size</code> prop. It supports 3 sizes:</p><li><code>large</code> - use when the input needs emphasis.</li><li><code>medium</code> (default) - use for all common cases.</li><li><code>small</code> - use in dense and narrow layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VariableInput
+    initialValue="{{size}} is large"
+    size="large"
+    variableParser={(value) => (value === 'size' ? 'Size' : false)}
+  />
+  <VariableInput
+    initialValue="{{size}} is medium"
+    size="medium"
+    variableParser={(value) => (value === 'size' ? 'Size' : false)}
+  />
+  <VariableInput
+    initialValue="{{size}} is small"
+    size="small"
+    variableParser={(value) => (value === 'size' ? 'Size' : false)}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Status
+- description: <p>Control the component status using the <code>status</code> prop. It supports 3 states:</p><li><code>error</code> - use to highlight an invalid input.</li><li><code>warning</code> - use to highlight inputs that impact users or can’t be validated.</li><li><code>loading</code> - use to show that the value is being uploaded to the server.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VariableInput
+    initialValue="{{status}} is error"
+    variableParser={(value) => (value === 'status' ? 'Status' : false)}
+    status="error"
+  />
+  <VariableInput
+    initialValue="{{status}} is warning"
+    variableParser={(value) => (value === 'status' ? 'Status' : false)}
+    status="warning"
+  />
+  <VariableInput
+    initialValue="{{status}} is loading"
+    variableParser={(value) => (value === 'status' ? 'Status' : false)}
+    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 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.</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.">
+      <VariableInput
+        initialValue="See message {{below}}"
+        variableParser={(value) => (value === 'below' ? 'below' : false)}
+      />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For narrow layouts only:</Text>
+    <VariableInput
+      initialValue="{{hover}} on status icon"
+      variableParser={(value) => (value === 'hover' ? 'Hover' : false)}
+      status="error"
+      statusMessage="This is an error message."
+    />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Read-only and disabled
+- description: <p>Control input interaction with:</p><li><code>readOnly</code> - disables writing new values, but allows to copy the current value.</li><li><code>disabled</code> - disables all input interactions. Use to highlight unavailable functions.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VariableInput
+    initialValue="{{interactions}} are read only"
+    variableParser={(value) =>
+      value === 'interactions' ? 'Interactions' : false
+    }
+    readOnly
+  />
+  <VariableInput
+    initialValue="{{interactions}} are disabled"
+    variableParser={(value) =>
+      value === 'interactions' ? 'Interactions' : false
+    }
+    disabled
+  />
+</StorybookComponents.Stack>;
+```
+
+### Rows
+- description: <p>Set the height of a component to fit a specified number of text lines with <code>rows</code> prop.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VariableInput
+    rows={1}
+    initialValue="Example with 1 {{rows}}"
+    variableParser={(value) => (value === 'rows' ? 'row' : false)}
+  />
+  <VariableInput
+    rows={5}
+    initialValue="Example with 5 {{rows}}"
+    variableParser={(value) => (value === 'rows' ? 'rows' : false)}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Multiline
+- description: <p>Control content scroll direction with the <code>multiline</code> prop.</p><p></p><p>Multiline is allowed by default. Disabling it results in content scrolling horizontally inside of an input.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <StorybookComponents.Stack width="50%">
+    <VariableInput
+      initialValue="Field that have {{multiline}} enabled scroll content vertically"
+      multiline={true}
+      variableParser={(value) => (value === 'multiline' ? 'multiline' : false)}
+    />
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack width="50%">
+    <VariableInput
+      initialValue="Field that have {{multiline}} disabled scroll content horizontally"
+      multiline={false}
+      variableParser={(value) => (value === 'multiline' ? 'multiline' : false)}
+    />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Manual embed
+- description: <p>Use a button outside of an input to allow user to embed variables from a predefined list manually.</p>
+- example: 
+```jsx 
+
+() => {
+  const bodyRef = React.useRef();
+  const variables = [
+    {
+      key: 'event.date',
+      value: 'Event date',
+    },
+    {
+      key: 'last.name',
+      value: 'Guest last name',
+    },
+    {
+      key: 'first.name',
+      value: 'Guest first name',
+    },
+    {
+      key: 'event.location',
+      value: 'Event location',
+    },
+    {
+      key: 'event.name',
+      value: 'Event name',
+    },
+  ];
+
+  const insertVariable = variable =>
+    bodyRef.current.insertVariable(variable.key);
+
+  return (
+    <Box gap="10px">
+      <VariableInput
+        placeholder="Pick variables and/ or enter strings..."
+        variableParser={value => {
+          const variable = variables.find(item => item.key === value);
+
+          return variable ? variable.value : false;
+        }}
+        ref={bodyRef}
+        rows={3}
+      />
+      <PopoverMenu triggerElement={<TextButton>Insert Variable</TextButton>}>
+        {variables.map(variable => (
+          <PopoverMenu.MenuItem
+            text={variable.value}
+            onClick={() => insertVariable(variable)}
+          />
+        ))}
+      </PopoverMenu>
+    </Box>
+  );
+};
+
+```
+
+### Automations
+- description: Use the variable input to send personalized messages and updates.
+- example: 
+```jsx 
+
+() => {
+  const [selectedAction, setSelectedAction] = React.useState(1);
+
+  return (
+    <Card>
+      <Card.Header
+        title="Action"
+        subtitle="Do this: send a message"
+      ></Card.Header>
+      <Card.Divider></Card.Divider>
+      <Card.Content>
+        <Layout>
+          <Cell>
+            <Layout gap="12px">
+              <Cell span={4}>
+                <Thumbnail
+                  selected={selectedAction === 1}
+                  onClick={() => setSelectedAction(1)}
+                  title="Send a chat message"
+                  size="small"
+                />
+              </Cell>
+              <Cell span={4}>
+                <Thumbnail
+                  selected={selectedAction === 2}
+                  onClick={() => setSelectedAction(2)}
+                  title="Get notified by email"
+                  size="small"
+                />
+              </Cell>
+              <Cell span={4}>
+                <Thumbnail
+                  selected={selectedAction === 3}
+                  onClick={() => setSelectedAction(3)}
+                  title="Send email to contacts"
+                  size="small"
+                />
+              </Cell>
+            </Layout>
+          </Cell>
+
+          <Cell>
+            <FormField label="Message" required>
+              <VariableInput
+                rows={5}
+                initialValue="Hey {{user.name}}! Thanks for reaching out. We'll be right with you."
+                variableParser={value =>
+                  value === 'user.name' ? 'Name' : false
+                }
+              />
+            </FormField>
+          </Cell>
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+
+```
+
+

package/dist/docs/components/VerticalTabsExamples.md

@@ -0,0 +1,132 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control the tab size with the <code>size</code> prop:</p><p></p><li><code>medium</code> (default) is the standard used in common cases. </li><li><code>small</code> fits into smaller elements and compact designs.</li><li><code>tiny</code> is used for dense layouts. </li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" width="200px">
+  <VerticalTabs onChange={(/*id*/) => {}}>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Medium tab 1
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Medium tab 2
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Medium tab 3
+      </VerticalTabs.TabItem>
+  </VerticalTabs>
+  <VerticalTabs size="small" onChange={(/*id*/) => {}}>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Small tab 1
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Small tab 2
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Small tab 3
+      </VerticalTabs.TabItem>
+  </VerticalTabs>
+    <VerticalTabs size="tiny" onChange={(/*id*/) => {}}>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Tiny tab 1
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Tiny tab 2
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+        Tiny tab 3
+      </VerticalTabs.TabItem>
+  </VerticalTabs>
+</StorybookComponents.Stack>;
+```
+
+### Group title
+- description: <p>Group related tabs together  under a title by using a  <code><VerticalTabs.TabsGroup/></code> wrapper.</p>
+- example: 
+```jsx 
+<div style={{ width: 200 }}>
+  <VerticalTabs onChange={(/*id*/) => {}}>
+    <VerticalTabs.TabsGroup title="Group Title">
+      <VerticalTabs.TabItem>
+        Tab 1
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem>
+        Tab 2
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem>
+        Tab 3
+      </VerticalTabs.TabItem>
+    </VerticalTabs.TabsGroup>
+  </VerticalTabs>
+</div>;
+```
+
+### Selected tab
+- description: <p>Specify which tab is currently selected with the <code>activeTabId</code> prop.</p>
+- example: 
+```jsx 
+<div style={{ width: 200 }}>
+  <VerticalTabs activeTabId={0} onChange={(/*id*/) => {}}>
+    <VerticalTabs.TabsGroup title="Group Title">
+      <VerticalTabs.TabItem id={0}>
+       Tab 1
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={1}>
+        Tab 2
+      </VerticalTabs.TabItem>
+      <VerticalTabs.TabItem id={2}>
+        Tab 3
+      </VerticalTabs.TabItem>
+    </VerticalTabs.TabsGroup>
+  </VerticalTabs>
+</div>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Sidebar in a custom modal
+- description: <p>Place tabs inside a <code></CustomModalLayout></code> to create a sidebar with structured content.</p>
+- example: 
+```jsx 
+<CustomModalLayout
+  showFooterDivider
+  showHeaderDivider
+  primaryButtonText="Save"
+  secondaryButtonText="Cancel"
+  onCloseButtonClick={() => {}}
+  title="Account settings"
+  removeContentPadding
+  content={
+    <Box>
+      <Box width="200px" direction="vertical" paddingBottom="16px">
+        <VerticalTabs size="small" onChange={(/*id*/) => {}}>
+          <VerticalTabs.TabsGroup title="Settings">
+            <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+              Account info
+            </VerticalTabs.TabItem>
+            <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+              Login info
+            </VerticalTabs.TabItem>
+            <VerticalTabs.TabItem suffixIcon={<Icons.ChevronRight />}>
+              Email preferences
+            </VerticalTabs.TabItem>
+          </VerticalTabs.TabsGroup>
+        </VerticalTabs>
+      </Box>
+      <Divider direction="vertical"></Divider>
+    </Box>
+  }
+/>;
+```
+
+

package/dist/docs/components/VerticalTabsIconItemExamples.md

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

package/dist/docs/components/VerticalTabsItemExamples.md

@@ -0,0 +1,40 @@
+
+## Feature Examples
+
+
+### Types 
+- description: <p>Use the <code>type</code> prop to change the behavior of the tab item:</p><p></p><li><code>tab</code> can be used to organize settings into logical categories. </li><li><code>action</code> can be used as a button. </li><li><code>title</code> can be used to maintain structure between tab elements.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VerticalTabsItem type="tab">Vertical Tab</VerticalTabsItem>
+  <VerticalTabsItem type="action"> Vertical Tab Action </VerticalTabsItem>
+  <VerticalTabsItem type="title">Vertical Tab Title</VerticalTabsItem>
+</StorybookComponents.Stack>;
+```
+
+### Affix
+- description: <p>Add more context to actions with affix icons:</p><p></p><li>Emphasize the tab action with a <code>prefixIcon</code>.</li><li>Indicate that the tab will open a popover or navigate users to another page with a <code>suffixIcon</code>.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <VerticalTabsItem prefixIcon={<Icons.Add />}>Prefix icon</VerticalTabsItem>
+  <VerticalTabsItem suffixIcon={<Icons.ChevronRight />}>
+    Suffix icon
+  </VerticalTabsItem>
+</StorybookComponents.Stack>;
+```
+
+### Disabled
+- description: <p>Use the <code>disabled</code> prop to indicate that a tab can't be selected.</p>
+- example: 
+```jsx 
+<VerticalTabsItem disabled>Disabled tab</VerticalTabsItem>
+```
+
+
+
+
+    
+
+

package/dist/docs/components/WixDesignSystemProviderExamples.md

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

package/dist/docs/components/WixDesignSystemProviderProps.md

@@ -0,0 +1,6 @@
+
+### No props available
+- type: No props available
+- description: No props available
+
+

package/dist/docs/components/WixStyleReactEnvironmentProviderExamples.md

@@ -0,0 +1,17 @@
+
+## Feature Examples
+
+
+### Locale
+- description: Setting the `locale` prop will make any component in the library to use that locale automatically without the need to configure each component separately. The list of possible locales is listed in the component's API
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+

package/dist/docs/components/WixStyleReactMaskingProviderExamples.md

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

package/dist/docs/components/WixStyleReactMaskingProviderProps.md

@@ -0,0 +1,6 @@
+
+### No props available
+- type: No props available
+- description: No props available
+
+