@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/ToggleSwitchExamples.md

@@ -0,0 +1,313 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the component's size using the <code>size</code> prop.  Three sizes are supported:</p><li><code>large</code> is the default used in form layouts.</li><li><code>medium</code> is for card headers and dense layouts.</li><li><code>small</code> should only be used in very concentrated layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <ToggleSwitch size="large" checked />
+  <ToggleSwitch size="medium" checked />
+  <ToggleSwitch size="small" checked />
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Style the component using the <code>skin</code> prop. Four skins are supported:</p><li><code>standard</code> is the default used for all common cases.</li><li><code>success</code> can be used to highlight that a toggle is "available" or "successfully working."</li><li><code>error</code> highlights that a value is destructive or invalid.</li><li><code>urgent</code> highlights the switch for extra attention.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <ToggleSwitch skin="standard" checked />
+  <ToggleSwitch skin="success" checked />
+  <ToggleSwitch skin="error" checked />
+  <ToggleSwitch skin="urgent" checked />
+</StorybookComponents.Stack>;
+```
+
+### States
+- description: <p>Disable the component with the <code>disabled</code> prop.</p><p></p><p>Use the <code>checked</code> prop to show a toggle switch is "on." </p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <StorybookComponents.Stack>
+    <FormField label="Default" stretchContent={false} labelPlacement="right">
+      <ToggleSwitch />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack>
+    <FormField label="Checked" stretchContent={false} labelPlacement="right">
+      <ToggleSwitch checked />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack>
+    <FormField label="Checked Disabled" stretchContent={false} labelPlacement="right">
+      <ToggleSwitch checked disabled />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack>
+    <FormField label="Disabled" stretchContent={false} labelPlacement="right">
+      <ToggleSwitch disabled />
+    </FormField>
+  </StorybookComponents.Stack>
+</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>Show the status message inline, directly below the toggle switch by wrapping it in a <code><FormField/></code> and adding <code>statusMessage</code>.</p><p></p><p>View more inline status message examples in <code><FormField/></code>.</p>
+- example: 
+```jsx 
+<FormField status="error" statusMessage="This is an error message.">
+  <ToggleSwitch />
+</FormField>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### With a label
+- description: <p>Wrap toggle switch in <code><FormField/></code> to:</p><li>Give it a <code>label</code>.</li><li>Mark it as <code>required</code>.</li><li>Give additional information in the hover tooltip.</li>
+- example: 
+```jsx 
+() => {
+  const [toggleChecked, setToggleChecked] = React.useState(true);
+
+  return (
+    <Box>
+      <FormField
+        labelPlacement="right"
+        label="Label"
+        required
+        infoContent="This tooltip provides some additional info about the control."
+        stretchContent={false}
+      >
+        <ToggleSwitch
+          checked={toggleChecked}
+          onChange={() => setToggleChecked(!toggleChecked)}
+        />
+      </FormField>
+    </Box>
+  );
+};
+```
+
+### Settings
+- description: <p>Use toggle switch to turn settings on and off.</p>
+- example: 
+```jsx 
+() => {
+  const renderListItem = ({ title, subtitle, padding, toggleChecked }) => {
+    const [checked, setChecked] = React.useState(toggleChecked);
+
+    return (
+      <Box verticalAlign="middle" align="space-between" padding={padding}>
+        <Box direction="vertical">
+          <Text weight="normal">{title}</Text>
+          <Text secondary size="small">
+            {subtitle}
+          </Text>
+        </Box>
+        <ToggleSwitch checked={checked} onChange={() => setChecked(!checked)} />
+      </Box>
+    );
+  };
+
+  return (
+    <Card>
+      <Card.Header
+        title="Default emails"
+        subtitle="Send default notifications about this event."
+      />
+      <Card.Divider />
+      <Card.Content>
+        <Box direction="vertical">
+          {renderListItem({
+            title: 'Confirmation',
+            subtitle: 'Let guests know their spot is confirmed.',
+            padding: '0px 0px 18px',
+            toggleChecked: false,
+          })}
+          <Divider />
+
+          {renderListItem({
+            title: 'Reminder',
+            subtitle: 'Send a friendly reminder when the event is coming up.',
+            padding: '18px 0px',
+            toggleChecked: true,
+          })}
+          <Divider />
+
+          {renderListItem({
+            title: 'Cancelation',
+            subtitle: 'Notify guests if this event is canceled.',
+            padding: '18px 0px 0px',
+            toggleChecked: true,
+          })}
+        </Box>
+      </Card.Content>
+    </Card>
+  );
+};
+```
+
+### Forms
+- description: <p>Use toggle switch to control the state of items.</p>
+- example: 
+```jsx 
+() => {
+  const [toggleChecked, setToggleChecked] = React.useState(true);
+
+  return (
+    <Card>
+      <Card.Header title="Product info" />
+      <Card.Divider />
+      <Card.Content>
+        <Layout cols={12}>
+          <Cell span={12}>
+            <Heading size="tiny">Basic info</Heading>
+          </Cell>
+          <Cell span={8}>
+            <FormField label="Product name">
+              <Input placeholder=" " />
+            </FormField>
+          </Cell>
+          <Cell span={4}>
+            <FormField label="Ribbon">
+              <Input placeholder="e.g., New Arrival" />
+            </FormField>
+          </Cell>
+          <Cell span={4}>
+            <FormField label="Price">
+              <NumberInput
+                prefix={<Input.Affix>$</Input.Affix>}
+                hideStepper
+                value="12"
+              />
+            </FormField>
+          </Cell>
+          <Cell span={12}>
+            <Box>
+              <FormField stretchContent={false} label="On sale" labelPlacement="right">
+                <ToggleSwitch
+                  checked={toggleChecked}
+                  onChange={() => setToggleChecked(!toggleChecked)}
+                />
+              </FormField>
+            </Box>
+          </Cell>
+          <Cell span={4}>
+            <FormField label="Discount">
+              <NumberInput
+                suffix={<Input.Affix>%</Input.Affix>}
+                hideStepper
+                value="20"
+              />
+            </FormField>
+          </Cell>
+          <Cell span={4}>
+            <FormField label="Sale price">
+              <NumberInput
+                prefix={<Input.Affix>$</Input.Affix>}
+                hideStepper
+                value="12"
+              />
+            </FormField>
+          </Cell>
+          <Cell span={12}>
+            <FormField label="Description">
+              <RichTextInputArea minHeight="120px" />
+            </FormField>
+          </Cell>
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+```
+
+### Required fields
+- description: <p>Use toggle switch to set a field as required or optional.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedOption, setSelectedOption] = React.useState(0);
+  const [value, setValue] = React.useState(2);
+  const [toggleChecked, setToggleChecked] = React.useState(true);
+
+  const options = [
+    { id: 0, value: 'Image' },
+    { id: 1, value: 'Video' },
+    { id: 2, value: 'Image and video' },
+    { id: 3, value: 'Document' },
+    { id: 4, value: 'Audio' },
+  ];
+  return (
+    <SidePanel maxHeight="576px" width="288px" skin="floating">
+      <SidePanel.Header title="Upload Settings" />
+      <SidePanel.Content noPadding>
+        <SidePanel.Field>
+          <FormField label="Supported file type">
+            <Dropdown
+              placeholder="Select"
+              size="small"
+              options={options}
+              onSelect={(option) => setSelectedOption(option.id)}
+              selectedId={selectedOption}
+            />
+          </FormField>
+        </SidePanel.Field>
+        <SidePanel.Field>
+          <FieldSet
+            gap="small"
+            legend="Max number of files"
+            columns="auto 72px"
+          >
+            <Slider
+              onChange={setValue}
+              min={0}
+              max={10}
+              value={value}
+              displayMarks={false}
+            />
+            <Input
+              size="small"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </FieldSet>
+        </SidePanel.Field>
+        <SidePanel.Field>
+          <FormField label="Is required" labelPlacement="left" labelWidth="1fr">
+            <ToggleSwitch
+              checked
+              size="medium"
+              checked={toggleChecked}
+              onChange={() => setToggleChecked(!toggleChecked)}
+            />
+          </FormField>
+        </SidePanel.Field>
+        <SidePanel.Section title="Display settings">
+          <SidePanel.Field>
+            <FormField label="Field title">
+              <Input size="small" placeholder="Enter field title" />
+            </FormField>
+          </SidePanel.Field>
+          <SidePanel.Field>
+            <FormField label="Button text">
+              <Input size="small" value="Choose file" />
+            </FormField>
+          </SidePanel.Field>
+        </SidePanel.Section>
+      </SidePanel.Content>
+    </SidePanel>
+  );
+};
+```
+
+

package/dist/docs/components/TooltipExamples.md

@@ -0,0 +1,201 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>To display a tooltip, two parts need to be defined:</p><li>A trigger element that calls a tooltip when hover or focus occurs (e.g., an <code><IconButton/></code>). The trigger element goes inside the <code><Tooltip/></code> wrapper as its child item.</li><li>The <code>content</code>, which is the text displayed inside of a tooltip.</li>
+- example: 
+```jsx 
+<Tooltip inline content="Tooltip content goes here.">
+  <TextButton>Hover or focus to see tooltip</TextButton>
+</Tooltip>
+
+```
+
+### Size
+- description: <p>Control tooltip dimensions with the <code>size</code> prop:</p><li>For dense layouts (e.g., in a composer), use <code>small</code>.</li><li>The default size used in any other case is <code>medium</code>.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip inline content="This is a small tooltip." size="small">
+    <TextButton>Small tooltip</TextButton>
+  </Tooltip>
+  <Tooltip inline content="This is a medium (default) tooltip.">
+    <TextButton>Medium tooltip</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>;
+```
+
+### Max width
+- description: <p>Control tooltip width with <code>maxWidth</code>. When the maximum width is reached, text inside the tooltip will wrap onto multiple lines.</p><p></p><p>Default <code>maxWidth</code> is <code>204</code> px.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip
+    inline
+    content="This is a tooltip with content wrapped using the default max width."
+  >
+    <TextButton>Default max width</TextButton>
+  </Tooltip>
+  <Tooltip
+    inline
+    content="This is a tooltip with content wrapped using 360px max width."
+    maxWidth={360}
+  >
+    <TextButton>Max width = 360 px</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+### Placement
+- description: <p>Use the <code>placement</code> prop to select the position of a tooltip in relation to its trigger element:</p><li><code>top</code> (default)</li><li><code>right</code></li><li><code>bottom</code></li><li><code>left</code></li><p></p><p>In each of these standard positions, the tooltip aligns itself to the center of the corresponding axis and appears outside the trigger element.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column" alignItems="center">
+  <Tooltip inline content="Top (default)">
+    <TextButton>Top (default)</TextButton>
+  </Tooltip>
+  <Box gap="24">
+    <Tooltip inline content="Left" placement="left">
+      <TextButton>Left</TextButton>
+    </Tooltip>
+    <Tooltip inline content="Right" placement="right">
+      <TextButton>Right</TextButton>
+    </Tooltip>
+  </Box>
+  <Tooltip inline content="Bottom" placement="bottom">
+    <TextButton>Bottom</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+### Text alignment
+- description: <p>The <code>textAlign</code> prop controls how tooltip content is aligned:</p><li><code>start</code> (default) </li><li><code>center</code> </li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip inline content="Content is aligned to the left (default).">
+    <TextButton>Start (default)</TextButton>
+  </Tooltip>
+  <Tooltip inline content="Content is aligned to the center." textAlign="center">
+    <TextButton>Center</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+### Delay
+- description: <p>Delay the showing or hiding of a tooltip, for a specific amount of time, by using <code>enterDelay</code> and <code>exitDelay</code>.</p><p></p><p>Delay times are counted by milliseconds and both are 0 by default.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip inline content="Tooltip was shown after 450 ms." enterDelay={450}>
+    <TextButton>Enter delay</TextButton>
+  </Tooltip>
+  <Tooltip inline content="Tooltip will fade after 450 ms." exitDelay={450}>
+    <TextButton>Exit delay</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+### Interactive
+- description: <p>Decide whether tooltip can be hovered on not by using <code>interactive</code> prop.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip
+    inline
+    content={
+      <Text size="small" skin="light">
+        This is an interactive tooltip. <a>Learn more</a>
+      </Text>
+    }
+  >
+    <TextButton>Interactive</TextButton>
+  </Tooltip>
+  <Tooltip
+    inline
+    interactive={false}
+    content="This is a non-interactive tooltip."
+  >
+    <TextButton>Non-Interactive</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+### On disabled trigger elements
+- description: <p>By default, disabled trigger elements (e.g., <code><Button disabled/></code>) do not show tooltips on mouse hover or keyboard focus.</p><p></p><p>To show a tooltip on mouse hover, set the <code>disabled</code> prop to <code>false</code>.</p><p></p><p><em>Note</em>: such tooltip content will not be accessible to keyboard focus, so it's best not to use tooltip to give additional information on a disabled component. Instead, use <code><InfoIcon/></code>, <code><Text/></code> <a href="https://www.wix-style-react.com/storybook/?path=/story/components-form--infoicon"></a><a href="https://www.wix-style-react.com/storybook/?path=/story/components-typography-text--text"></a>or other components near the disabled component.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Tooltip inline content="Tooltip content will not be shown">
+    <TextButton disabled>No tooltip (default)</TextButton>
+  </Tooltip>
+  <Tooltip
+    inline
+    content="Tooltip content is shown on mouse hover"
+    disabled={false}
+  >
+    <TextButton disabled>Tooltip on mouse hover</TextButton>
+  </Tooltip>
+</StorybookComponents.Stack>
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### To label icon buttons
+- description: <p>Show a text label or other brief helpful information for an <code><IconButton/></code><a href="https://www.wix-style-react.com/storybook/?path=/story/components-actions--iconbutton"></a> in a tooltip.</p>
+- example: 
+```jsx 
+<Card>
+  <Box direction="horizontal">
+    <Image
+      height="120px"
+      width="180px"
+      borderRadius="8px 0px 0px 8px"
+      src="running_man.png"
+    />
+    <Box
+      direction="vertical"
+      borderRadius="0px 8px 8px 0px"
+      verticalAlign="space-between"
+      padding="18px 24px"
+      backgroundColor="D80"
+      flexGrow={1}
+    >
+      <Box verticalAlign="space-between" flexGrow={1}>
+        <Box direction="vertical" gap="3px">
+          <Heading size="small">Running for beginners program</Heading>
+          <Text size="small" secondary>
+            Scheduled | 57 days
+          </Text>
+        </Box>
+        <Tooltip content="Edit program">
+          <IconButton priority="secondary" size="small">
+            <Icons.Edit />
+          </IconButton>
+        </Tooltip>
+      </Box>
+      <Box marginRight={3}>
+        <Text size="small" secondary>
+          Created on September 26, 2022
+        </Text>
+      </Box>
+    </Box>
+  </Box>
+</Card>;
+```
+
+