@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/ComposerSidebarExamples.md

@@ -0,0 +1,626 @@
+
+## Feature Examples
+
+
+### Size
+- description: Control component size with `size` prop:<br/>
+      &emsp;- `large` - use it when the component needs to be emphasized.<br/>
+      &emsp;- `medium` (default) - use it in all default cases, especially if there are many (5 or more) items to show.<br/>
+      &emsp;- `small` - use in more dense layouts.<br/>
+- example: 
+```jsx 
+
+() => {
+  return (
+    <StorybookComponents.Stack justifyContent="space-around">
+      <ComposerSidebar size="large" items={[
+    {
+      id: 0,
+      label: 'Large',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Large',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      label: 'Large',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Large',
+      icon: <Icons.CutOut />,
+    },
+  ]} />
+      <ComposerSidebar size="medium" items={[
+    {
+      id: 0,
+      label: 'Medium',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Medium',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      label: 'Medium',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Medium',
+      icon: <Icons.CutOut />,
+    },
+  ]} />
+  <ComposerSidebar
+      size="small"
+      items={[
+        {
+          id: 0,
+          label: 'Small',
+          icon: <Icons.CropRotate />,
+        },
+        {
+          id: 1,
+          label: 'Small',
+          icon: <Icons.MagicWand />,
+        },
+        {
+          id: 2,
+          label: 'Small',
+          icon: <Icons.Adjust />,
+        },
+        {
+          id: 3,
+          label: 'Small',
+          icon: <Icons.CutOut />,
+        },
+      ]}
+    />
+    </StorybookComponents.Stack>
+  );
+};
+
+```
+
+### Label Placement
+- description: Control the position of a toggle button labels with `labelPlacement` prop. It supports 2 values:<br/>
+      &emsp;- `end` (default) - use it if there are many (5 or more) items to show. Button width depends on a label length but has a max width of 270 px. Label will be truncated if the limit is reached.<br/>
+      &emsp;- `bottom` - use it with few  items to show. Component's width is fixed to 90 px.<br/>
+      &emsp;- `tooltip` - use it only for professional tools that users are good at and use side actions repeatedly.
+      For example, image editing tools like color fill, text, shape, etc. Configure tooltip's placement and size with `labelTooltipProps`.
+- example: 
+```jsx 
+
+() => {
+  const items = [
+    {
+      id: 0,
+      label: 'Crop & Rotate',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Enhance',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      label: 'Adjust',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Cut Out',
+      icon: <Icons.CutOut />,
+    },
+    {
+      id: 4,
+      label: 'Text',
+      icon: <Icons.Rename />,
+    },
+  ];
+
+  return (
+    <StorybookComponents.Stack justifyContent="space-around">
+      <ComposerSidebar labelPlacement="end" items={items} />
+      <ComposerSidebar labelPlacement="bottom" items={items} />
+      <ComposerSidebar labelPlacement="tooltip" items={items} />
+    </StorybookComponents.Stack>
+  );
+};
+
+```
+
+### Ellipsis
+- description: <p>Use <code>ellipsis</code> prop to change between truncated or wrapped label.</p>
+- example: 
+```jsx 
+() => {
+  const items = [
+    {
+      id: 0,
+      label: 'Item',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Item with a very very long label',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      label: 'Item',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Item',
+      icon: <Icons.CutOut />,
+    },
+    {
+      id: 4,
+      label: 'Item',
+      icon: <Icons.Rename />,
+    },
+  ];
+
+  return (
+    <StorybookComponents.Stack justifyContent="space-around">
+      <ComposerSidebar ellipsis={true} labelPlacement="end" items={items} />
+      <ComposerSidebar ellipsis={false} labelPlacement="end" items={items} />
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Selected Item
+- description: Highlight currently selected item with `selectedId` prop.
+- example: 
+```jsx 
+
+() => {
+  const items = [
+    {
+      id: 0,
+      label: 'Item',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Selected Item',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      label: 'Item',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Item',
+      icon: <Icons.CutOut />,
+    },
+  ];
+
+  return <ComposerSidebar labelPlacement="end" items={items} selectedId={1} />;
+};
+
+```
+
+### Disabled Item
+- description: Show that a certain action or category in a sidebar is not available with `disabled` prop.
+- example: 
+```jsx 
+
+() => {
+  const items = [
+    {
+      id: 0,
+      label: 'Item',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      label: 'Disabled Item',
+      icon: <Icons.MagicWand />,
+      disabled: true,
+    },
+    {
+      id: 2,
+      label: 'Item',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      label: 'Item',
+      icon: <Icons.CutOut />,
+    },
+  ];
+
+  return <ComposerSidebar labelPlacement="end" items={items} />;
+};
+
+```
+
+### Section Title
+- description: Group related items together with sections using `sectionTitle` prop.
+- example: 
+```jsx 
+
+() => {
+  const items = [
+    {
+      id: 0,
+      sectionTitle: 'Section 1',
+      label: 'Item',
+      icon: <Icons.CropRotate />,
+    },
+    {
+      id: 1,
+      sectionTitle: 'Section 1',
+      label: 'Item',
+      icon: <Icons.MagicWand />,
+    },
+    {
+      id: 2,
+      sectionTitle: 'Section 2',
+      label: 'Item',
+      icon: <Icons.Adjust />,
+    },
+    {
+      id: 3,
+      sectionTitle: 'Section 2',
+      label: 'Item',
+      icon: <Icons.CutOut />,
+    },
+  ];
+
+  return <ComposerSidebar labelPlacement="end" items={items} />;
+};
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Composer Settings
+- description: Use the composer sidebar to display available tools and settings in the composer environment.<br/>
+      <br/>
+      Position it below the <a href="https://wix-style-react.com/?path=/story/components-navigation-composer--composerheader">`<ComposerHeader/>`</a> and fix it to the start of the remaining composer content area.
+- example: 
+```jsx 
+
+() => {
+  const [selectedSidebar, setSelectedSidebar] = React.useState(0);
+  const [activeTab, setActiveTab] = React.useState(0);
+  const [toggleImage, setToggleImage] = React.useState(true);
+  const [togglePosts, setTogglePosts] = React.useState(false);
+  const [toggleCommenting, setToggleCommenting] = React.useState(false);
+  const [descriptionValue, setDescriptionValue] = React.useState('');
+  const [authorTags, setAuthorTags] = React.useState([]);
+  const [categories, setCategories] = React.useState([
+    {
+      id: 0,
+      label: 'Other posts',
+      isChecked: false,
+    },
+    {
+      id: 1,
+      label: 'Recipes',
+      isChecked: false,
+    },
+    {
+      id: 2,
+      label: 'Lifestyle',
+      isChecked: false,
+    },
+  ]);
+  const [publishDate, setPublishDate] = React.useState();
+  const [themeTags, setThemeTags] = React.useState([
+    { id: '1', label: 'Sport' },
+    { id: '2', label: 'Routine' },
+  ]);
+  const [author, setAuthor] = React.useState();
+
+  const items = [
+    {
+      id: 0,
+      label: 'Settings',
+      icon: <Icons.Settings />,
+    },
+    {
+      id: 1,
+      label: 'Categories',
+      icon: <Icons.Category />,
+    },
+    {
+      id: 2,
+      label: 'Tags',
+      icon: <Icons.Tag />,
+    },
+  ];
+
+  const authorOptions = [
+    listItemSelectBuilder({
+      id: 0,
+      prefix: <Avatar size="size18" />,
+      title: 'Doe John',
+      label: 'Doe John',
+    }),
+    listItemSelectBuilder({
+      id: 1,
+      prefix: <Avatar size="size18" />,
+      title: 'John Doe',
+      label: 'John Doe',
+    }),
+    listItemActionBuilder({
+      title: 'New Author',
+      prefixIcon: <Icons.Add />,
+    }),
+  ];
+
+  const handleSelectTag = (tag, previousTags, setTags) =>
+    setTags([...previousTags, { id: tag.id, label: tag.value }]);
+
+  const handleRemoveTag = (tag, previousTags, setTags) =>
+    setTags(previousTags.filter(currTag => currTag.id !== tag));
+
+  const handleSidebarClick = id => {
+    setSelectedSidebar(id);
+  };
+
+  const handleCloseSidePanel = () => {
+    setSelectedSidebar();
+  };
+
+  const renderSettingsPanel = () => (
+    <SidePanel width="300px" onCloseButtonClick={handleCloseSidePanel}>
+      <SidePanel.Header title="Post Settings">
+        <Tabs
+          items={[
+            { id: 0, title: 'General' },
+            { id: 1, title: 'Advanced' },
+          ]}
+          activeId={activeTab}
+          type="uniformSide"
+          width="114px"
+          onClick={value => setActiveTab(value.id)}
+        />
+      </SidePanel.Header>
+      <SidePanel.Content>
+        {activeTab === 0 && (
+          <Box direction="vertical" gap="24px">
+            <FormField label="Display cover image" labelPlacement="left">
+              <ToggleSwitch
+                width="100%"
+                checked={toggleImage}
+                onChange={() => setToggleImage(!toggleImage)}
+              />
+            </FormField>
+            {toggleImage && (
+              <Cell>
+                <Box height="120px">
+                  <AddItem theme="image" tooltipContent="Add Item" />
+                </Box>
+              </Cell>
+            )}
+            <FormField label="Publish date">
+              <DatePicker
+                width="100%"
+                placeholderText="Publish Now"
+                popoverProps={{ appendTo: 'scrollParent' }}
+                autoFocus={false}
+                value={publishDate}
+                onChange={date => setPublishDate(date)}
+              />
+            </FormField>
+            <FormField label="Author">
+              <AutoComplete
+                placeholder="Select Author"
+                options={authorOptions}
+                selectedId={author}
+                popoverProps={{ appendTo: 'window' }}
+                value={author}
+                onSelect={option => setAuthor(option.label)}
+                onChange={event => setAuthor(event.target.value)}
+              />
+            </FormField>
+            <FormField label="Set as featured post" labelPlacement="left">
+              <ToggleSwitch
+                width="100%"
+                checked={togglePosts}
+                onChange={() => setTogglePosts(!togglePosts)}
+              />
+            </FormField>
+          </Box>
+        )}
+        {activeTab === 1 && (
+          <Box direction="vertical" gap="24px">
+            <FormField label="Description">
+              <InputArea
+                placeholder="Add a description..."
+                value={descriptionValue}
+                onChange={e => setDescriptionValue(e.target.value)}
+                maxLength={140}
+                hasCounter
+              />
+            </FormField>
+            <FormField label="Related post">
+              <MultiSelect
+                tags={authorTags}
+                options={[
+                  { id: '1', value: 'British authors' },
+                  { id: '2', value: 'French authors' },
+                ]}
+                customSuffix={
+                  <Box>
+                    <TextButton prefixIcon={<Icons.Add />}>
+                      Add Posts
+                    </TextButton>
+                  </Box>
+                }
+                onSelect={tag =>
+                  handleSelectTag(tag, authorTags, setAuthorTags)
+                }
+                onRemoveTag={tag =>
+                  handleRemoveTag(tag, authorTags, setAuthorTags)
+                }
+              />
+            </FormField>
+            <FormField label="Enable commenting" labelPlacement="left">
+              <ToggleSwitch
+                width="100%"
+                checked={toggleCommenting}
+                onChange={() => setToggleCommenting(!toggleCommenting)}
+              />
+            </FormField>
+          </Box>
+        )}
+      </SidePanel.Content>
+    </SidePanel>
+  );
+
+  const renderTagPanel = () => (
+    <SidePanel width="300px" onCloseButtonClick={handleCloseSidePanel}>
+      <SidePanel.Header title="Tags" showDivider={false} />
+      <SidePanel.Content noPadding>
+        <Box
+          direction="vertical"
+          gap="24px"
+          width="252px"
+          padding="0 24px 24px 24px"
+        >
+          <Text>
+            Add tags that describe what your post is about. Readers can use them
+            to find other posts with similar content.
+          </Text>
+          <FormField label="Tags">
+            <MultiSelect
+              tags={themeTags}
+              options={[
+                { id: '1', value: 'Sport' },
+                { id: '2', value: 'Routine' },
+              ]}
+              onSelect={tag => handleSelectTag(tag, themeTags, setThemeTags)}
+              onRemoveTag={tag => handleRemoveTag(tag, themeTags, setThemeTags)}
+            />
+          </FormField>
+        </Box>
+      </SidePanel.Content>
+    </SidePanel>
+  );
+
+  const renderCheckboxes = () => {
+    return categories.map(item => {
+      const handleChecked = id => {
+        const updatedCategories = [...categories];
+        const index = categories.findIndex(c => c.id === id);
+        updatedCategories[index].isChecked = !updatedCategories[index]
+          .isChecked;
+        setCategories(updatedCategories);
+      };
+
+      return (
+        <Checkbox
+          checked={item.isChecked}
+          onChange={() => handleChecked(item.id)}
+          id={item.id}
+        >
+          {item.label}
+        </Checkbox>
+      );
+    });
+  };
+
+  const renderCategoryPanel = () => {
+    return (
+      <SidePanel width="300px" onCloseButtonClick={handleCloseSidePanel}>
+        <SidePanel.Header title="Categories" showDivider={false} />
+        <SidePanel.Content noPadding>
+          <Box
+            direction="vertical"
+            gap="24px"
+            width="252px"
+            padding="0 24px 24px 24px"
+          >
+            <Text>
+              Let readers browse your posts by topic, e.g. food, lifestyle &
+              travel.
+            </Text>
+            <FormField label="Assign a category">
+              <Box direction="vertical" gap="12px">
+                {renderCheckboxes()}
+                <TextButton prefixIcon={<Icons.Add />}>
+                  Create category
+                </TextButton>
+              </Box>
+            </FormField>
+          </Box>
+        </SidePanel.Content>
+      </SidePanel>
+    );
+  };
+
+  return (
+    <Layout gap={0}>
+      <Cell>
+        <ComposerHeader backButtonValue="Back">
+          <ComposerHeader.Actions justifyContent="flex-end">
+            <ToggleButton labelValue="Undo">
+              <Icons.Undo />
+            </ToggleButton>
+            <ToggleButton labelValue="Redo">
+              <Icons.Redo />
+            </ToggleButton>
+          </ComposerHeader.Actions>
+          <ComposerHeader.MainActions>
+            <Button skin="inverted">Preview</Button>
+            <Button>Publish</Button>
+          </ComposerHeader.MainActions>
+        </ComposerHeader>
+      </Cell>
+      <Cell>
+        <Box direction="vertical">
+          <Box gap="0" height="600px">
+            <ComposerSidebar
+              labelPlacement="bottom"
+              items={items}
+              selectedId={selectedSidebar}
+              onClick={(_, { id }) => handleSidebarClick(id)}
+            />
+
+            {selectedSidebar === 0 && renderSettingsPanel()}
+            {selectedSidebar === 1 && renderCategoryPanel()}
+            {selectedSidebar === 2 && renderTagPanel()}
+
+            <Box backgroundColor="D70" width="100%">
+              <Box width="100%" padding={4}>
+                <StorybookComponents.Placeholder>
+                  <Box verticalAlign="middle" align="center" height="100%">
+                    <Text>Composer content area</Text>
+                  </Box>
+                </StorybookComponents.Placeholder>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Cell>
+    </Layout>
+  );
+};
+
+```
+
+

package/dist/docs/components/CopyClipboardExamples.md

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