@wix/design-system 1.193.0 → 1.195.0

package/dist/docs/components/FilePickerExamples.md

@@ -0,0 +1,45 @@
+
+## Feature Examples
+
+
+### Structure
+- description: File upload consists of two labels: `mainLabel` for action text and `subLabel` for a description.
+- example: 
+```jsx 
+
+```
+
+### Supported formats
+- description: Define file types that could be uploaded with the `supportedFormats` prop. Separate formats with a comma.
+- example: 
+```jsx 
+
+```
+
+### Max size
+- description: Define the maximum file size for an upload with the `maxSize` prop.
+- example: 
+```jsx 
+
+```
+
+### Error message
+- description: Describe an error status by using the `errorMessage` prop. Messages will only be revealed when the `error` status is `true`.
+- example: 
+```jsx 
+
+```
+
+### Header
+- description: Add text or any other component in an area above the component using the `header` prop.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+

package/dist/docs/components/FileUploadExamples.md

@@ -0,0 +1,191 @@
+
+## Feature Examples
+
+
+### Basic structure
+- description: <p>A trigger component must be added, so that users can open the upload dialog box. This trigger is defined as a child item of <code>FileUpload</code>.</p>
+- example: 
+```jsx 
+<FileUpload>
+  {({ openFileUploadDialog }) => (
+    <Button onClick={openFileUploadDialog} prefixIcon={<Icons.UploadExport />}>
+      Upload File
+    </Button>
+  )}
+</FileUpload>;
+```
+
+### File type selection
+- description: <p>Select which types of files can be uploaded with the <code>accept</code> prop. The file types are separated by a comma.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <FileUpload accept=".jpeg,.gif,.png">
+    {({ openFileUploadDialog }) => (
+      <Button
+        prefixIcon={<Icons.UploadExport />}
+        onClick={openFileUploadDialog}
+      >
+        Upload Image
+      </Button>
+    )}
+  </FileUpload>
+  <FileUpload accept=".doc,.pdf">
+    {({ openFileUploadDialog }) => (
+      <Button
+        prefixIcon={<Icons.UploadExport />}
+        onClick={openFileUploadDialog}
+      >
+        Upload Document
+      </Button>
+    )}
+  </FileUpload>
+</StorybookComponents.Stack>;
+```
+
+### Multiple files upload
+- description: <p>Let users upload multiple files at once using the <code>multiple</code> prop.</p>
+- example: 
+```jsx 
+<FileUpload multiple>
+  {({ openFileUploadDialog }) => (
+    <Button onClick={openFileUploadDialog} prefixIcon={<Icons.UploadExport />}>
+      Upload Files
+    </Button>
+  )}
+</FileUpload>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Upload files
+- description: <p>Any library component can be used to open an upload dialog box. Nevertheless, it's better to use buttons or viewer components that have predefined interaction states and can be accessed with the keyboard (for accessibility reasons).</p>
+- example: 
+```jsx 
+<FileUpload multiple accept=".jpeg,.gif,.png">
+  {({ openFileUploadDialog }) => (
+    <AddItem
+      size="large"
+      subtitle="Only JPEG, GIF and PNG files up to 5 MB are supported."
+      onClick={openFileUploadDialog}
+    >
+      Upload Media
+    </AddItem>
+  )}
+</FileUpload>;
+```
+
+### Add images
+- description: <p>To let users add images, set <code><ImageViewer/></code> as the trigger component.</p>
+- example: 
+```jsx 
+<FileUpload multiple accept=".jpeg,.gif,.png">
+  {({ openFileUploadDialog }) => (
+    <ImageViewer onAddImage={openFileUploadDialog} />
+  )}
+</FileUpload>;
+```
+
+### Add attachments
+- description: <p>Let users attach files to messages, emails or contact details with the <code><Button/></code> or <code><TextButton/></code> components.</p>
+- example: 
+```jsx 
+() => {
+  const renderAddFileButton = (
+    <FileUpload multiple>
+      {({ openFileUploadDialog }) => (
+        <TextButton
+          size="small"
+          onClick={openFileUploadDialog}
+          prefixIcon={<Icons.Add />}
+        >
+          Attach File
+        </TextButton>
+      )}
+    </FileUpload>
+  );
+
+  return (
+    <Layout>
+      <Cell span={6}>
+        <Card>
+          <Card.Content>
+            <Box direction="vertical" gap={2}>
+              <Box
+                width="100%"
+                align="space-between"
+                marginBottom={4}
+                verticalAlign="middle"
+              >
+                <Text size="medium" secondary weight="bold">
+                  Attachments
+                </Text>
+                {renderAddFileButton}
+              </Box>
+              <Box align="space-between" verticalAlign="middle">
+                <Box gap={2}>
+                  <Icons.Attachment />
+                  <Text secondary>CV.pdf</Text>
+                </Box>
+                <PopoverMenu
+                  textSize="small"
+                  triggerElement={
+                    <Tooltip content="More actions">
+                      <IconButton priority="secondary" size="small">
+                        <Icons.MoreSmall />
+                      </IconButton>
+                    </Tooltip>
+                  }
+                >
+                  <PopoverMenu.MenuItem
+                    text="Download"
+                    prefixIcon={<Icons.DownloadImportSmall />}
+                  />
+                  <PopoverMenu.MenuItem
+                    text="Delete"
+                    prefixIcon={<Icons.DeleteSmall />}
+                  />
+                </PopoverMenu>
+              </Box>
+              <Box align="space-between" verticalAlign="middle">
+                <Box gap={2}>
+                  <Icons.Attachment />
+                  <Text secondary>Contract.pdf</Text>
+                </Box>
+                <PopoverMenu
+                  textSize="small"
+                  triggerElement={
+                    <Tooltip content="More actions">
+                      <IconButton priority="secondary" size="small">
+                        <Icons.MoreSmall />
+                      </IconButton>
+                    </Tooltip>
+                  }
+                >
+                  <PopoverMenu.MenuItem
+                    text="Download"
+                    prefixIcon={<Icons.DownloadImportSmall />}
+                  />
+                  <PopoverMenu.MenuItem
+                    text="Delete"
+                    prefixIcon={<Icons.DeleteSmall />}
+                  />
+                </PopoverMenu>
+              </Box>
+            </Box>
+          </Card.Content>
+        </Card>
+      </Cell>
+    </Layout>
+  );
+};
+```
+
+

package/dist/docs/components/FillButtonExamples.md

@@ -0,0 +1,66 @@
+
+## Feature Examples
+
+
+### Icon size
+- description: Control plus icon size inside of a button:<br/>
+        &emsp;- `small` (default) - use it when the button’s width is 30 pixels or smaller.<br/>
+        &emsp;- `medium` - use it when the button's width is larger than 30 pixels.
+- example: 
+```jsx 
+
+```
+
+### Fill
+- description: Set the button's fill-in HEX color or linear gradient. Component allows control of the gradient direction.
+- example: 
+```jsx 
+
+```
+
+### Disabled
+- description: Restrict button interactions with `disabled` prop. This will prevent users from adding a new swatch.
+- example: 
+```jsx 
+
+```
+
+### Tooltip
+- description: Explain the action with a message in a tooltip.
+        Control the tooltip position and behaviour by passing relevant properties via `tooltipProps`.
+- example: 
+```jsx 
+
+```
+
+### Icon
+- description: Display a custom icon inside of a button using icon prop.<br/>
+      <br/>
+      Default icon is a plus and is displayed all the time unless specified otherwise.<br/>
+      <br/>
+      Overridden icon size cannot be controlled using `iconSize` property. Size has to be controlled manually.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Adding custom swatch
+- description: Use a fill button to add new fill options to the existing list.
+        It’s recommended to place it as the first item on the list, because it won’t be moved down when new colors appear, letting the user always find it.<br/>
+        <br/>
+        It can be used with `<FileUpload/>` to open a native file picker to upload images.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/FillPreviewExamples.md

@@ -0,0 +1,271 @@
+
+## Feature Examples
+
+
+### Fill
+- description: <p>Render preview content with <code>fill</code> prop. It accepts:</p><li>colors</li><li>gradients</li><li>images</li><li>SVGs</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack width="24px">
+  <FillPreview fill="#3399ff" />
+  <FillPreview fill="linear-gradient(to right top, #3399ff, #ffffff)" />
+  <FillPreview fill="https://images.unsplash.com/photo-1559825481-12a05cc00344?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8b2NlYW58ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" />
+  <FillPreview fill={<Icons.HomeSmall />} />
+</StorybookComponents.Stack>;
+```
+
+### Preview ratio
+- description: <p>Control preview ratio with the <code>aspectRatio</code> prop. By default, the component maintains a 1:1 ratio when the width of parent container is defined.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack width="24px">
+  <FillPreview aspectRatio={1 / 4} fill="#3399ff" />
+  <FillPreview aspectRatio={1 / 3} fill="#3399ff" />
+  <FillPreview aspectRatio={1 / 2} fill="#3399ff" />
+  <FillPreview aspectRatio={1} fill="#3399ff" />
+</StorybookComponents.Stack>;
+```
+
+### States
+- description: <p>Control the component state with:</p><li><code>selected</code> - use to highlight active selection.</li><li><code>disabled</code> - use to highlight unavailable option.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack gap="18px">
+  <StorybookComponents.Stack gap="24px" flexDirection="column">
+    <FillPreview />
+    <FillPreview fill="#3399ff" />
+    <FillPreview fill="#3399ff" selected />
+    <FillPreview fill="#3399ff" disabled />
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack gap="24px" flexDirection="column">
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      No value
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      Filled
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      Selected
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      Disabled
+    </StorybookComponents.Stack>
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+### Render as
+- description: <p>Render the preview as another component or DOM tag.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack gap="18px">
+  <StorybookComponents.Stack gap="24px" flexDirection="column">
+    <FillPreview fill="#73d2de" as="a" />
+    <FillPreview fill="#3399ff" as="button" />
+  </StorybookComponents.Stack>
+  <StorybookComponents.Stack gap="24px" flexDirection="column">
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      <p>Rendered as <a/> tag</p>
+    </StorybookComponents.Stack>
+    <StorybookComponents.Stack height="24px" alignItems="center">
+      <p>Rendered as native <button/> tag</p>
+    </StorybookComponents.Stack>
+  </StorybookComponents.Stack>
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Fill type
+- description: <p>Use fill preview to show the options of gradient fill types in forms.</p>
+- example: 
+```jsx 
+() => {
+  const [inputValue, setInputValue] = React.useState('#ffffff');
+  const [selected, setSelected] = React.useState(0);
+  const [fillType, setFillType] = React.useState();
+
+  const solidColors = ['#ffbc42', '#d81159', '#8f2d56', '#218380', '#73d2de'];
+  const gradientColors = [
+    'linear-gradient(45deg, rgba(14,0,255,1) 0%, rgba(0,212,255,1) 80%)',
+    'linear-gradient(45deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)',
+    'linear-gradient(to right top, #dbfd2d, #dd7c00)',
+    'linear-gradient(to right, #00dd83, #22a0c3)',
+    'linear-gradient(to right, #aa99ff, #aa11ff)',
+  ];
+
+  const renderFillPreview = ({ content, color, index }) => (
+    <Tooltip appendTo="scrollParent" content={content}>
+      <Box width="30px">
+        <FillPreview
+          selected={selected === index}
+          onClick={() => setSelected(index)}
+          fill={color}
+        />
+      </Box>
+    </Tooltip>
+  );
+
+  return (
+    <Card>
+      <Card.Header title="Header style" />
+      <Card.Divider />
+      <Card.Content>
+        <Layout>
+          <Cell span={6}>
+            <FormField label="Background fill type">
+              <SegmentedToggle
+                defaultSelected="gradient"
+                selected={fillType}
+                onClick={(_, value) => setFillType(value)}
+              >
+                <SegmentedToggle.Button value="solid">
+                  Solid
+                </SegmentedToggle.Button>
+                <SegmentedToggle.Button value="gradient">
+                  Gradient
+                </SegmentedToggle.Button>
+              </SegmentedToggle>
+            </FormField>
+          </Cell>
+          <Cell span={6}>
+            <FormField label="Background gradient">
+              <Box gap="12px" height="36px" verticalAlign="middle">
+                {fillType === 'solid'
+                  ? solidColors.map((color, index) =>
+                      renderFillPreview({
+                        content: 'Solid color',
+                        color,
+                        index,
+                      }),
+                    )
+                  : gradientColors.map((color, index) =>
+                      renderFillPreview({
+                        content: 'Gradient color',
+                        color,
+                        index,
+                      }),
+                    )}
+              </Box>
+            </FormField>
+          </Cell>
+          <Cell span={12}>
+            <FormField label="Text color">
+              <ColorInput value={inputValue} onConfirm={setInputValue} />
+            </FormField>
+          </Cell>
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+```
+
+### Color selection
+- description: <p>Use <code><FillPreview/></code> to let users select a color for different items.</p>
+- example: 
+```jsx 
+() => {
+  const [value, setValue] = React.useState(50);
+  const [opacity, setOpacity] = React.useState(100);
+  return (
+    <SidePanel
+      skin="floating"
+      width="420px"
+      onCloseButtonClick
+      onHelpButtonClick
+    >
+      <SidePanel.Header title="Wix Comments" />
+      <Box height="480px">
+        <VerticalTabs size="small" activeTabId={2} onChange={() => {}}>
+          <VerticalTabs.TabItem id={0}>Display</VerticalTabs.TabItem>
+          <VerticalTabs.TabItem id={1}>Layout</VerticalTabs.TabItem>
+          <VerticalTabs.TabItem id={2}>Design</VerticalTabs.TabItem>
+          <VerticalTabs.TabItem id={3}>Text</VerticalTabs.TabItem>
+        </VerticalTabs>
+        <Divider direction="vertical" />
+        <SidePanel.Content noPadding>
+          <SidePanel.Field>
+            <Button
+              priority="secondary"
+              size="tiny"
+              prefixIcon={<Icons.ChevronLeft />}
+            >
+              Back
+            </Button>
+          </SidePanel.Field>
+          <SidePanel.Field>
+            <FieldSet legend="Text font and color" columns="auto 30px">
+              <Button
+                priority="secondary"
+                size="small"
+                suffixIcon={<Icons.TextSmall></Icons.TextSmall>}
+              >
+                Heading 1
+              </Button>
+              <FillPreview fill="#839788" aspectRatio={1} />
+            </FieldSet>
+          </SidePanel.Field>
+          
+          <SidePanel.Field>
+            <FieldSet gap="small" legend="Border width" columns="auto 72px">
+              <Slider
+                onChange={setValue}
+                min={0}
+                max={100}
+                value={value}
+                displayMarks={false}
+              />
+              <Input
+                value={value}
+                size="small"
+                suffix={<Input.Affix>px</Input.Affix>}
+                onChange={(e) => setValue(e.target.value)}
+              />
+            </FieldSet>
+       </SidePanel.Field>
+      <SidePanel.Field>
+        <FieldSet
+          legend="Background color"
+          legendSize="small"
+          legendPlacement="top"
+          alignment="center"
+          columns="30px auto 67px"
+        >
+          <FillPreview fill="#000000" aspectRatio={1} />
+          <Box margin="0 8px">
+            <Slider
+              gradientColor="#000000"
+              min={0}
+              max={100}
+              displayMarks={false}
+              onChange={(value) => setOpacity(value)}
+              value={opacity}
+            />
+          </Box>
+          <NumberInput
+            value={opacity}
+            min={0}
+            max={100}
+            onChange={(value) => setOpacity(value)}
+            suffix={<Input.Affix>%</Input.Affix>}
+            size="small"
+            hideStepper
+          />
+        </FieldSet>
+      </SidePanel.Field>
+        </SidePanel.Content>
+      </Box>
+    </SidePanel>
+  );
+};
+```
+
+

package/dist/docs/components/FloatingHelperExamples.md

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

package/dist/docs/components/FloatingHelperProps.md

@@ -14,9 +14,12 @@
 ### onClose
 - type: func
 - description: callback to call when the popover content is requested to be closed (Uncontrolled mode only). NOTE: this callback is called when the close timeout (if exists) starts In Controlled mode - called when the close button is clicked. In Uncontrolled mode - called when the popover is closed
+### skin
+- type: enum
+- description: Skin : `dark` or `light`
 ### appearance
 - type: enum
-- description: Appearance : `dark` or `light`
+- description: No description
 ### initiallyOpened
 - type: bool
 - description: Controls whether the popover's content is initially opened (In Uncontrolled mode only)