@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/ThumbnailExamples.md

@@ -0,0 +1,471 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>Component consist of 3 optional content areas:</p><li><code>image</code></li><li><code>title</code></li><li><code>description</code></li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Thumbnail
+    image={<Image />}
+    title={
+      <StorybookComponents.Placeholder>Title</StorybookComponents.Placeholder>
+    }
+    description={
+      <StorybookComponents.Placeholder>
+        Description
+      </StorybookComponents.Placeholder>
+    }
+  />
+</StorybookComponents.Stack>;
+```
+
+### Size
+- description: <p>Adjust the component size using <code>size</code> prop. It supports 3 sizes:</p><li><code>medium</code> (default) - use in all common cases.</li><li><code>small</code> - use in more dense and narrow layouts.</li><li><code>tiny</code> - use in more dense and narrow layouts.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Thumbnail size="medium" title="Medium" description="Size" />
+  <Thumbnail size="small" title="Small" description="Size" />
+  <Thumbnail size="tiny" title="Tiny" description="Size" />
+</StorybookComponents.Stack>;
+```
+
+### Dimensions
+- description: <p>Set thumbnail dimensions in pixels or percentage with <code>height</code> and <code>width</code> properties.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Thumbnail title="Title" width="50%" height="120px" />
+  <Thumbnail title="Title" width="25%" height="60px" />
+</StorybookComponents.Stack>;
+```
+
+### Content alignment
+- description: <p>Control vertical alignment of thumbnail content with <code>contentAlignment</code> prop. It supports 2 options:</p><li><code>center</code> (default) - use in all common cases.</li><li><code>top</code> - use when thumbnail list contain items with different content lengths.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Thumbnail
+    title="Center"
+    description="Alignment"
+    image={<Image width="90px" />}
+    height={240}
+    contentAlignment="center"
+    width={165}
+  />
+  <Thumbnail
+    title="Top"
+    description="Alignment"
+    image={<Image width="90px" />}
+    height={240}
+    contentAlignment="top"
+    width={165}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Text position
+- description: <p>Control thumbnail text position with <code>textPosition</code> prop. Choose between:</p><li><code>inside</code> (default) - use for text only thumbnails or thumbnails that require more emphasis.</li><li><code>outside</code> - use for side panel thumbnails or large group of illustrated thumbnails.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack>
+  <Thumbnail
+    title="Inside"
+    description="Description"
+    image={<Image />}
+    contentAlignment="top"
+    width={165}
+    height={200}
+  />
+    <Thumbnail
+    title="Outside"
+    description="Alignment"
+    image={<Image height="100%"/>}
+    contentAlignment="top"
+    textPosition="outside"
+    width={165}
+    height={200}
+  />
+</StorybookComponents.Stack>;
+```
+
+### Background image
+- description: <p>Render image as a background of a thumbnail with <code>backgroundImage</code> prop.</p><p></p><p>Use it for gallery type selections, such as product cover image selection.</p>
+- example: 
+```jsx 
+<Thumbnail
+  backgroundImage="example.jpg"
+  width={240}
+  height={240}
+  title="Title"
+/>;
+```
+
+### States
+- description: <p>Control the state of a component with:</p><li><code>selected</code> - use it to mark active selection.</li><li><code>disabled</code> - use it to mark item that cannot be selected or deselected.</li><p></p><p>Remove selected item checkmark icon with <code>hideSelectedIcon</code> prop.</p>
+- example: 
+```jsx 
+<StorybookComponents.Stack gap="12px">
+  <Thumbnail title="Default" width={140} />
+  <Thumbnail title="Selected" selected width={140} />
+  <Thumbnail title="Disabled" disabled width={140} />
+  <Thumbnail
+    title="Disabled with image"
+    disabled
+    image={<Image />}
+    width={140}
+  />
+  <Thumbnail
+    title="Disabled with image background"
+    disabled
+    backgroundImage="example.jpg"
+    height={120}
+    width={140}
+  />
+</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 thumbnails 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.">
+  <StorybookComponents.Stack gap="12px">
+    <Thumbnail title="Option 1" width={140} />
+    <Thumbnail title="Option 2" width={140} />
+    <Thumbnail title="Option 3" width={140} />
+  </StorybookComponents.Stack>
+</FormField>;
+```
+
+### Custom content
+- description: <p>Render any component or set of them as a child item to the thumbnail content area.</p><p></p><p>When passed, a title will be displayed below the thumbnail.</p>
+- example: 
+```jsx 
+<Thumbnail title="Title" width="50%">
+  <StorybookComponents.Stack padding="24px">
+    <StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
+  </StorybookComponents.Stack>
+</Thumbnail>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### List of options
+- description: Use a thumbnail to list down a larger list of options using icons as visual clues.
+- example: 
+```jsx 
+
+() => {
+  const [selected, setSelected] = React.useState(0);
+
+  const renderCell = ({ id, title, src }) => (
+    <Cell span={2}>
+      <Thumbnail
+        size="small"
+        title={<Text>{title}</Text>}
+        selected={selected === id}
+        onClick={() => setSelected(id)}
+      >
+        <Proportion>
+          <Box height="100%" width="100%" align="center" verticalAlign="middle">
+            <Image src={src} height="24px" width="24px" transparent />
+          </Box>
+        </Proportion>
+      </Thumbnail>
+    </Cell>
+  );
+
+  return (
+    <Card>
+      <Card.Header title="Add label to contact" />
+      <Divider />
+      <Card.Content>
+        <Layout>
+          <Cell span={12}>
+            <Text>Decide how you want to respond to the trigger</Text>
+          </Cell>
+          {renderCell({
+            id: 0,
+            title: 'Send email to contacts',
+            src: 'contacts.svg',
+          })}
+          {renderCell({
+            id: 1,
+            title: 'Send a chat message',
+            src: 'chat_message.svg',
+          })}
+          {renderCell({
+            id: 2,
+            title: 'Get notified by email',
+            src: 'email_notify.svg',
+          })}
+          {renderCell({
+            id: 3,
+            title: 'Create a task',
+            src: 'task.svg',
+          })}
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+
+```
+
+### Gallery selection
+- description: <p>Use a thumbnail with <code>backgroundImage</code> to construct gallery type selections.</p>
+- example: 
+```jsx 
+() => {
+  const [selected, setSelected] = React.useState(0);
+
+  return (
+    <Layout cols={1}>
+      <FormField label="Cover Image">
+        <Box gap="12px">
+          <Thumbnail
+            backgroundImage="TravelExample1.jpg"
+            width={64}
+            height={64}
+            selected={selected === 0}
+            onClick={() => setSelected(0)}
+          />
+          <Thumbnail
+            backgroundImage="TravelExample2.jpg"
+            width={64}
+            height={64}
+            selected
+            selected={selected === 1}
+            onClick={() => setSelected(1)}
+          />
+          <Thumbnail
+            backgroundImage="TravelExample3.jpg"
+            width={64}
+            height={64}
+            selected={selected === 2}
+            onClick={() => setSelected(2)}
+          />
+          <Thumbnail
+            backgroundImage="TravelExample4.jpg"
+            width={64}
+            height={64}
+            selected={selected === 3}
+            onClick={() => setSelected(3)}
+          />
+          <Thumbnail
+            backgroundImage="TravelExample5.jpg"
+            width={64}
+            height={64}
+            selected={selected === 4}
+            onClick={() => setSelected(4)}
+          />
+        </Box>
+      </FormField>
+    </Layout>
+  );
+};
+```
+
+### Custom content
+- description: <p>Render custom content inside of a thumbnail to provide more details about the selection option.</p><p></p><p>In example, add graphics, images or custom actions such as links to read more. </p>
+- example: 
+```jsx 
+
+() => {
+  const [selected, setSelected] = React.useState(0);
+
+  const renderThumbnail = ({ title, subtitle, id }) => (
+    <Thumbnail selected={selected === id} onClick={() => setSelected(id)}>
+      <Box padding="18px">
+        <Box gap="12px" verticalAlign="middle">
+          <Icons.Public />
+          <Box direction="vertical">
+            <Text size="medium" weight="bold">
+              {title}
+            </Text>
+            <Box>
+              <Text size="small" secondary>
+                {subtitle}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Thumbnail>
+  );
+
+  return (
+    <Card>
+      <Card.Header title="Group info" />
+      <Card.Divider />
+      <Card.Content>
+        <Layout cols={12}>
+          <Cell span={8}>
+            <Layout cols={1}>
+              <FormField label="Name">
+                <Input placeholder="Enter group name" />
+              </FormField>
+              <FormField
+                label="Privacy"
+                infoContent="Choose who can see and join this group"
+              >
+                <Layout cols={1} gap="12px">
+                  {renderThumbnail({
+                    title: 'Public',
+                    subtitle: 'Anyone can view this group',
+                    id: 0,
+                  })}
+                  {renderThumbnail({
+                    title: 'Private',
+                    subtitle: 'Only approved members can view this group',
+                    id: 1,
+                  })}
+                  {renderThumbnail({
+                    title: 'Hidden',
+                    subtitle: 'Group is hidden and requires an invite to join',
+                    id: 2,
+                  })}
+                </Layout>
+              </FormField>
+            </Layout>
+          </Cell>
+        </Layout>
+      </Card.Content>
+    </Card>
+  );
+};
+
+```
+
+### In settings panel
+- description: <p>Use thumbnails with illustrations  to visually clarify the result of the selection the user makes.</p>
+- example: 
+```jsx 
+() => {
+  const [selectedDirection, setSelectedDirection] = React.useState(0);
+  const [selectedAlignment, setSelectedAlignment] = React.useState(1);
+
+  return (
+    <SidePanel onCloseButtonClick={() => {}} skin="floating" width="288px">
+      <SidePanel.Header title="Text Input Layout" />
+      <SidePanel.Content noPadding>
+        <SidePanel.Field>
+          <FieldSet
+            legend="Direction"
+            direction="horizontal"
+            columns="auto auto"
+          >
+            <Thumbnail
+              size="tiny"
+              selected={selectedDirection === 0}
+              onClick={() => setSelectedDirection(0)}
+              hideSelectedIcon
+              height={54}
+              noPadding
+              image={
+                <Image
+                  src="ThumbnailIllustration_LTR.svg"
+                  transparent
+                  fit="none"
+                />
+              }
+              noPadding
+              title="Left to right"
+              textPosition="outside"
+            />
+            <Thumbnail
+              size="tiny"
+              selected={selectedDirection === 1}
+              onClick={() => setSelectedDirection(1)}
+              hideSelectedIcon
+              height={54}
+              noPadding
+              image={
+                <Image
+                  src="ThumbnailIllustration_RTL.svg"
+                  transparent
+                  fit="none"
+                />
+              }
+              noPadding
+              title="Right to left"
+              textPosition="outside"
+            />
+          </FieldSet>
+        </SidePanel.Field>
+        <SidePanel.Field>
+          <FieldSet
+            legend="Alignment"
+            direction="horizontal"
+            columns="38px 38px 38px"
+          >
+            <Thumbnail
+              size="tiny"
+              selected={selectedAlignment === 0}
+              onClick={() => setSelectedAlignment(0)}
+              hideSelectedIcon
+              height={38}
+              noPadding
+              image={
+                <Image
+                  src="ThumbnailIllustration_AlignLeft.svg"
+                  transparent
+                  fit="none"
+                />
+              }
+              noPadding
+              textPosition="outside"
+            />
+            <Thumbnail
+              size="tiny"
+              selected={selectedAlignment === 1}
+              onClick={() => setSelectedAlignment(1)}
+              hideSelectedIcon
+              height={38}
+              noPadding
+              image={
+                <Image
+                  src="ThumbnailIllustration_AlignCenter.svg"
+                  transparent
+                  fit="none"
+                />
+              }
+              noPadding
+              textPosition="outside"
+            />
+            <Thumbnail
+              size="tiny"
+              selected={selectedAlignment === 2}
+              onClick={() => setSelectedAlignment(2)}
+              hideSelectedIcon
+              height={38}
+              noPadding
+              image={
+                <Image
+                  src="ThumbnailIllustration_AlignRight.svg"
+                  transparent
+                  fit="none"
+                />
+              }
+              noPadding
+              textPosition="outside"
+            />
+          </FieldSet>
+        </SidePanel.Field>
+      </SidePanel.Content>
+    </SidePanel>
+  );
+};
+```
+
+