@wix/design-system 1.193.0 → 1.194.0

package/dist/docs/components/CloseButtonExamples.md

@@ -0,0 +1,145 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Control the size of a button with the size prop. It supports 3 sizes:</p><li><code>large</code> - use in larger size layouts, such as <SidePanel/> or modals.</li><li><code>medium</code> - use in medium size layouts, such as <FloatingNotification/>.</li><li><code>small</code> (default) - use in all common cases.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <CloseButton size="large" />
+  <CloseButton size="medium" />
+  <CloseButton />
+</StorybookComponents.Stack>;
+```
+
+### Skin
+- description: <p>Control the appearance of a button with <code>skin</code> prop. It supports 5 skins:</p><li><code>standard</code> - use on white background.</li><li><code>standardFilled</code> - use on white background when action needs to be emphasised.</li><li><code>transparent</code> - use on colour or image backgrounds.</li><li><code>light</code> - use on dark backgrounds.</li><li><code>dark</code> - use on white or light color backgrounds.</li><p></p><p></p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Box align="center" width="24px" padding="8px" backgroundColor="D80">
+    <CloseButton skin="standard" />
+  </Box>
+  <Box align="center" width="24px" padding="8px" backgroundColor="D80">
+    <CloseButton skin="standardFilled" />
+  </Box>
+  <Box align="center" width="24px" padding="8px" backgroundColor="B20">
+    <CloseButton skin="transparent" />
+  </Box>
+  <Box align="center" width="24px" padding="8px" backgroundColor="D10">
+    <CloseButton skin="light" />
+  </Box>
+  <Box align="center" width="24px" padding="8px" backgroundColor="D80">
+    <CloseButton skin="dark" />
+  </Box>
+</StorybookComponents.Stack>;
+```
+
+### Disabled
+- description: <p>Disable all close button interactions with <code>disabled</code> prop. Use it to highlight unavailable functions.</p>
+- example: 
+```jsx 
+<CloseButton disabled />;
+```
+
+
+
+
+## Developer Examples
+
+
+### Custom HTML tag
+- description: <p>Render close button as any given HTML tag with the <code>as</code> prop. For example, they can be rendered as:</p><li><code><a></code> when attributes like href, target, etc., are needed.</li><li><code><Link> </code>when props like to, replace, etc. are needed.</li><p>All attributes will be passed to the rendered HTML tag.</p>
+- example: 
+```jsx 
+() => {
+  const ReactRouterLink = (props) => <div {...props} />;
+  return (
+    <StorybookComponents.Stack gap="60px">
+      <Box direction="vertical">
+        <CloseButton
+          as="a"
+          href="https://www.wix.com"
+          target="_blank"
+          size="large"
+        />
+        <Text size="small">An <a/> tag</Text>
+      </Box>
+      <Box direction="vertical">
+        <CloseButton
+          as={ReactRouterLink}
+          href="https://www.wix.com"
+          target="_blank"
+          size="large"
+        />
+        <Text size="small">A react router <Link/> tag</Text>
+      </Box>
+      <Box direction="vertical">
+        <CloseButton
+          as="button"
+          href="https://www.wix.com"
+          target="_blank"
+          size="large"
+        />
+        <Text size="small">A native <button/> tag</Text>
+      </Box>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Marketing card
+- description: <p>Allow users to dismiss a promotional marketing card by passing a close button as <code><Card/></code> controls. </p>
+- example: 
+```jsx 
+<Card controls={<CloseButton skin="dark" />}>
+  <MarketingLayout
+    title="Add sessions to get booked"
+    description="Set when this service is offered and which staff member will provide it."
+    actions={
+      <Box gap="6px">
+        <Button size="small">Add Sessions</Button>
+        <Button size="small" skin="inverted">
+          Learn More
+        </Button>
+      </Box>
+    }
+    size="small"
+    image={
+      <Box width="100%" align="right">
+        <Image width="120px" src="PromotionalBookingsUpgrade.svg" transparent />
+      </Box>
+    }
+  />
+</Card>;
+```
+
+### Custom icon
+- description: <p>If a layout requires additional info, pass the help icon as a child element to <code><CloseButton/></code>. Given icon will override default <code>x</code> and will help to maintain consistent appearance of actions.</p><p></p><p>This exception is valid for help action when it is located  next to the close button. For all other needs use <code><IconButton/></code> instead.</p><p></p>
+- example: 
+```jsx 
+<Card
+  controls={
+    <Box>
+      <CloseButton skin="dark" size="medium">
+        <Icons.HelpSmall />
+      </CloseButton>
+      <CloseButton skin="dark" size="medium" />
+    </Box>
+  }
+>
+  <Card.Content>
+    <Box height="90px" />
+  </Card.Content>
+</Card>;
+```
+
+

package/dist/docs/components/CollapseExamples.md

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

package/dist/docs/components/ColorInputExamples.md

@@ -0,0 +1,207 @@
+
+## Feature Examples
+
+
+### Size
+- description: <p>Adjust the component's size using the <code>size</code> prop. It supports 3 sizes:</p><li>Use <code>large</code> to emphasize the input field.</li><li>Use <code>medium</code> for all common cases (default).</li><li>Use  <code>small</code> when the layout is dense and narrow.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <ColorInput placeholder="Large" size="large" />
+  <ColorInput placeholder="Medium" size="medium" />
+  <ColorInput placeholder="Small" size="small" />
+</StorybookComponents.Stack>;
+```
+
+### Status
+- description: <p>Indicate the component's status using the <code>status</code> prop. It has three states:</p><li>Use the <code>error</code> state to indicate an invalid value (e.g., a HEX value that doesn’t exist).</li><li>Use the <code>warning</code> state to highlight a value that can cause an unwanted result (e.g., text color is the same as the background color).</li><li>Use the <code>loading</code> state to show the value is currently being saved or validated.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <ColorInput value="#FF0000" status="error" />
+  <ColorInput value="#FF0000" status="warning" />
+  <ColorInput value="#FF0000" 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. 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.">
+      <ColorInput placeholder="See message below" />
+    </FormField>
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="12px">
+    <Text secondary>For narrow layouts only:</Text>
+    <ColorInput
+      placeholder="Hover on status icon"
+      status="error"
+      statusMessage="This is an error message."
+    />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Disabled
+- description: <p>Prevent the user from using the color input field with the <code>disabled</code> prop. Use it to indicate that the field is unavailable for editing (e.g., if the element already has a pre-defined color that can't be changed). </p>
+- example: 
+```jsx 
+() => {
+  const [presets, setPresets] = React.useState([
+    'midnightblue',
+    'darkmagenta',
+    'lightcoral',
+  ]);
+  return (
+    <ColorInput
+      value="#FF4136"
+      disabled
+      addTooltipContent="Add Color"
+      onAddColor={color => setPresets([...presets, color])}
+      colorPickerChildren={({ changeColor }) => (
+        <Swatches colors={presets} onClick={changeColor} />
+      )}
+    />
+  );
+};
+```
+
+### Popover
+- description: <p>Adjust the placement and behavior of the color picker popover by using any of the properties in <code>popoverProps</code>. Check the <code><Popover/></code> component API <a href="https://www.wix-style-react.com/storybook/?path=/story/components-overlays--popover"></a>for a full list.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="6px">
+    <Text size="small">Popover placement: Left</Text>
+    <ColorInput
+      value="#FF4136"
+      popoverProps={{
+        placement: 'left',
+        appendTo: 'viewport',
+      }}
+    />
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack flexDirection="column" gap="6px">
+    <Text size="small">Animate: true</Text>
+    <ColorInput
+      value="#FF4136"
+      popoverProps={{
+        animate: true,
+      }}
+    />
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Add color presets
+- description: <p>Allow users to add new color presets inside the color picker by clicking an "Add color" button. Use a combination of the <code>colorPickerChildren</code> and the <code>onAddColor</code> properties to add this ability.</p>
+- example: 
+```jsx 
+() => {
+  const [presets, setPresets] = React.useState([
+    'midnightblue',
+    'darkmagenta',
+    'lightcoral',
+  ]);
+  return (
+    <ColorInput
+      value="#FF4136"
+      addTooltipContent="Add Color"
+      onAddColor={color => setPresets([...presets, color])}
+      colorPickerChildren={({ changeColor }) => (
+        <Swatches colors={presets} onClick={changeColor} />
+      )}
+    />
+  );
+};
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Custom text color
+- description: <p>Use color input in a variety of composers to define custom colors for text, background fills, icons, etc.</p>
+- example: 
+```jsx 
+() => {
+  const [color, setColor] = React.useState('#000000');
+  const [alignment, setAlignment] = React.useState(0);
+  const [text, setText] = React.useState('Luna Boutique');
+
+  return (
+    <SidePanel>
+      <SidePanel.Header title="Customise text"></SidePanel.Header>
+      <SidePanel.Content>
+        <Box direction="vertical" gap="30px">
+          <Text size="small" secondary>
+            Change the font, color and more to make your text stand out.
+          </Text>
+          <FormField label="Edit text">
+            <Input value={text} onChange={e => setText(e.target.value)} />
+          </FormField>
+          <FormField label="Font">
+            <Box gap="6px">
+              <Text weight="bold">Playfair Display - 700</Text>
+              <Button size="tiny" priority="secondary">
+                Change Font
+              </Button>
+            </Box>
+          </FormField>
+          <FormField label="Alignment">
+            <Box gap="6px">
+              <ToggleButton
+                labelValue="Left"
+                selected={alignment === 0}
+                onClick={() => setAlignment(0)}
+              >
+                <Icons.TextAlignLeft />
+              </ToggleButton>
+              <ToggleButton
+                labelValue="Center"
+                selected={alignment === 1}
+                onClick={() => setAlignment(1)}
+              >
+                <Icons.TextAlignCenter />
+              </ToggleButton>
+              <ToggleButton
+                labelValue="Right"
+                selected={alignment === 2}
+                onClick={() => setAlignment(2)}
+              >
+                <Icons.TextAlignRight />
+              </ToggleButton>
+            </Box>
+          </FormField>
+          <FormField label="Text color">
+            <ColorInput
+              value={color}
+              onChange={setColor}
+              popoverAppendTo="viewport"
+            />
+          </FormField>
+        </Box>
+      </SidePanel.Content>
+      <SidePanel.Footer>
+        <Box align="right" gap="12px">
+          <Button size="small" priority="secondary">
+            Discard Changes
+          </Button>
+          <Button size="small">Save</Button>
+        </Box>
+      </SidePanel.Footer>
+    </SidePanel>
+  );
+};
+```
+
+

package/dist/docs/components/ColorPickerExamples.md

@@ -0,0 +1,75 @@
+
+## Feature Examples
+
+
+### Structure
+- description: Component consists of a color spectrum canvas, an input area and a `children` area which is used to add swatches.
+        Use the `value` prop to set the initial color.
+- example: 
+```jsx 
+
+```
+
+### Color converter
+- description: Enables to view and edit color codes in HEX/RGB/HSB formats.
+        Converter is visible by default and can be hidden on demand by setting the `showConverter` to false. 
+- example: 
+```jsx 
+
+```
+
+### Color value input
+- description: Forbid manual color code edit by setting `showInput` to false.
+        Input cannot be hidden if the color converter is visible.
+- example: 
+```jsx 
+
+```
+
+### History bar
+- description: Compare the currently active color with a newly picked one before confirming a change with a history bar.
+- example: 
+```jsx 
+
+```
+
+### Accept empty value
+- description: Allow to submit an empty value with `allowEmpty` prop. Use for non-mandatory color selection.
+        Define the placeholder message for HEX value input with `emptyPlaceholder` prop.
+- example: 
+```jsx 
+
+```
+
+### Add color presets
+- description: Add a color to the swatches list by clicking the add color button.
+        Pass `<Swatches/>` component to children and use `onAdd` property to add a new swatch.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Listing color options
+- description: Call out the picker popover on any component click, for example `<Multiselect/>`.
+- example: 
+```jsx 
+
+```
+
+### Color swatches
+- description: Allow users to select a color from a list of presets by adding `<Swatches/>` to the `children` area above the submit actions.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/ComposerButtonExamples.md

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