@wix/design-system 1.192.0 → 1.194.0

package/dist/docs/components/MarketingLayoutExamples.md

@@ -0,0 +1,313 @@
+
+## Feature Examples
+
+
+### Structure
+- description: <p>This component consists of <code>title</code>, <code>description</code>, <code>actions</code> and <code>image</code> container areas. </p><li>These areas accept any component as a child element.</li><li>Each area is optional, so the component can be customized according to your needs.</li><p></p><p>Marketing layout should be wrapped inside a <code><Card/></code>, which provides a white background.</p>
+- example: 
+```jsx 
+<MarketingLayout
+  title="Title"
+  description="Description"
+  actions={<Button size="small">Button</Button>}
+  image={<Image width="180px" height="120px" />}
+/>;
+```
+
+### Size
+- description: <p>Adjust the component's size using the <code>size</code> property. It supports three values:</p><li><code>tiny</code> is used for promoting optional or ancillary features, or when multiple layouts are displayed in the same row.</li><li><code>small</code> is the default, and is used in all common cases.</li><li><code>medium</code> is for promoting core or mandatory releases. Use it in spacious layouts only.</li>
+- example: 
+```jsx 
+() => {
+  const MarketingLayoutImage = ({ width, height, title }) => (
+    <StorybookComponents.Stack width="100%" justifyContent="flex-end">
+      <StorybookComponents.Placeholder width={width} height={height}>
+        <StorybookComponents.Stack
+          justifyContent="center"
+          height="100%"
+          alignItems="center"
+        >
+          <Heading>{title}</Heading>
+        </StorybookComponents.Stack>
+      </StorybookComponents.Placeholder>
+    </StorybookComponents.Stack>
+  );
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <Card>
+        <MarketingLayout
+          size="tiny"
+          title="Tiny"
+          description="Description"
+          actions={<Button size="small">Small Button</Button>}
+          image={<MarketingLayoutImage width="96px" height="96px" title="S2" />}
+        />
+      </Card>
+      <Card>
+        <MarketingLayout
+          size="small"
+          title="Small"
+          description="Description"
+          actions={<Button size="small">Small Button</Button>}
+          image={
+            <MarketingLayoutImage width="180px" height="120px" title="M2" />
+          }
+        />
+      </Card>
+      <Card>
+        <MarketingLayout
+          size="medium"
+          title="Medium"
+          description="Description"
+          actions={<Button>Medium Button</Button>}
+          image={
+            <MarketingLayoutImage width="240px" height="156px" title="L1" />
+          }
+        />
+      </Card>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Image position
+- description: <p>Change the image's position from right to left with the <code>inverted</code>  property.</p>
+- example: 
+```jsx 
+() => {
+  const MarketingLayoutImage = () => (
+    <StorybookComponents.Stack>
+      <StorybookComponents.Placeholder>
+        <StorybookComponents.Stack
+          width="180px"
+          height="120px"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Heading>M2</Heading>
+        </StorybookComponents.Stack>
+      </StorybookComponents.Placeholder>
+    </StorybookComponents.Stack>
+  );
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <Card>
+        <MarketingLayout
+          title="Default layout"
+          description="This layout has an image on the right side."
+          actions={<Button size="small">Button</Button>}
+          image={<MarketingLayoutImage />}
+        />
+      </Card>
+      <Card>
+        <MarketingLayout
+          inverted
+          title="Inverted layout"
+          description="This layout has an image on the left side."
+          actions={<Button size="small">Button</Button>}
+          image={<MarketingLayoutImage />}
+        />
+      </Card>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Image background color
+- description: <p>Add a background color to an image with <code>imageBackgroundColor</code>.</p>
+- example: 
+```jsx 
+<Card hideOverflow>
+  <MarketingLayout
+    title="Title"
+    description="Description"
+    actions={<Button size="small">Action</Button>}
+    imageBackgroundColor="B40"
+    image={
+      <StorybookComponents.Stack>
+        <StorybookComponents.Placeholder>
+          <StorybookComponents.Stack
+            width="180px"
+            height="120px"
+            justifyContent="center"
+            alignItems="center"
+          >
+            <Heading>M2</Heading>
+          </StorybookComponents.Stack>
+        </StorybookComponents.Placeholder>
+      </StorybookComponents.Stack>
+    }
+  />
+</Card>;
+```
+
+### Badge
+- description: <p>Emphasize new or top items with a customizable label in the top left corner using the <code>badge</code> property. </p><p></p><p>Note that adding a badge increases the marketing layout's height. To keep layouts that are displayed in a row aligned, you can use the <code>hiddenBadge</code> property to add extra height to other layouts.</p>
+- example: 
+```jsx 
+() => {
+  const MarketingLayoutImage = () => (
+    <StorybookComponents.Stack>
+      <StorybookComponents.Placeholder>
+        <StorybookComponents.Stack
+          width="180px"
+          height="120px"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Heading>M2</Heading>
+        </StorybookComponents.Stack>
+      </StorybookComponents.Placeholder>
+    </StorybookComponents.Stack>
+  );
+
+  return (
+    <StorybookComponents.Stack flexDirection="column">
+      <Card>
+        <MarketingLayout
+          badge={<Badge size="small">badge</Badge>}
+          title="With badge"
+          description="Description"
+          actions={<Button size="small">Action</Button>}
+          image={<MarketingLayoutImage />}
+        />
+      </Card>
+      <Card>
+        <MarketingLayout
+          hiddenBadge
+          title="Hidden badge"
+          description="Description"
+          actions={<Button size="small">Action</Button>}
+          image={<MarketingLayoutImage />}
+        />
+      </Card>
+    </StorybookComponents.Stack>
+  );
+};
+```
+
+### Vertical alignment
+- description: <p>Control how content is vertically aligned with the <code>alignItems</code> property. It supports two values:</p><li><code>center</code> (default) centers the content vertically.</li><li><code>stretch</code> vertically stretches content to match the height of the image.</li>
+- example: 
+```jsx 
+<StorybookComponents.Stack flexDirection="column">
+  <Card>
+    <MarketingLayout
+      title="Centered"
+      description="This layout  centers its content vertically to the image on the right"
+      actions={<Button size="small">Action</Button>}
+      image={<Image height="180px" />}
+    />
+  </Card>
+  <Card>
+    <MarketingLayout
+      alignItems="stretch"
+      title="Stretched"
+      description="This layout  stretches its content to fill the container instead of the default centered alignment."
+      actions={<Button size="small">Action</Button>}
+      image={<Image height="180px" />}
+    />
+  </Card>
+</StorybookComponents.Stack>;
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Multi-column layout
+- description: Display multiple marketing layouts in the same row to promote multiple features at the same time.
+- example: 
+```jsx 
+<Page>
+  <Page.Content>
+    <Layout>
+      <Cell>
+        <PageSection title="Suggested for you" showDivider />
+      </Cell>
+      <Cell span={6}>
+        <Card>
+          <MarketingLayout
+            title="Get found on Google"
+            description="Boost your site's SEO with the SEO Wiz. Follow your step-by-step plan."
+            actions={<Button size="small">Start Now</Button>}
+            size="tiny"
+            badge={<Badge size="small">Essential</Badge>}
+            image={
+              <Box width="100%" align="right">
+                <Image
+                  width="120px"
+                  src="PromotionalPromoteMarketingHomeSEO.svg"
+                  transparent
+                />
+              </Box>
+            }
+          />
+        </Card>
+      </Cell>
+      <Cell span={6}>
+        <Card>
+          <MarketingLayout
+            title="Create an email campaign"
+            description="Send updates, offers or newsletters & keep in touch."
+            actions={<Button size="small">Send Campaign</Button>}
+            size="tiny"
+            hiddenBadge
+            alignItems="stretch"
+            image={
+              <Box width="100%" align="right">
+                <Image
+                  width="120px"
+                  src="PromotionalPromoteMarketingHomeEmail.svg"
+                  transparent
+                />
+              </Box>
+            }
+          />
+        </Card>
+      </Cell>
+    </Layout>
+  </Page.Content>
+</Page>;
+```
+
+### Footnote
+- description: <p>Append a footnote containing notes or conditions by adding a divider and a box to the same card the <code><MarketingLayout/></code> is wrapped in.</p>
+- example: 
+```jsx 
+<Card>
+  <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>
+    }
+  />
+  <Divider />
+  <Box align="left" padding="12px 30px">
+    <Text size="tiny" secondary>
+      You can also add sessions directly from your <a>Calendar</a>.
+    </Text>
+  </Box>
+</Card>;
+```
+
+

package/dist/docs/components/MarketingPageLayoutContentExamples.md

@@ -0,0 +1,49 @@
+
+## Feature Examples
+
+
+### Structure
+- description: The component consists of `outline`, `title`, `subtitle`, `content` and `actions` areas.
+        Each area is optional and highly customizable.
+- example: 
+```jsx 
+
+```
+
+### Size
+- description: Adjust the size of the content with `size` prop. It supports two sizes: <br/>
+        &emsp;- `large` (default) - use it in larger screens sizes.<br/>
+        &emsp;- `medium` - use it in smaller screen sizes.<br/>
+        <br/>
+        Read more about screen sizes in
+        <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--marketingpagelayout">`<MarketingPageLayout/>`</a>.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Bulleted list
+- description: This component is highly customizable and supports complex layouts.
+        This example shows how to add a bulleted list to the content area and a footnote to the actions area.
+- example: 
+```jsx 
+
+```
+
+### Marketing page
+- description: `<MarketingPageLayoutContent/>` should be used as a building part of a marketing page.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/MarketingPageLayoutExamples.md

@@ -0,0 +1,69 @@
+
+## Feature Examples
+
+
+### Structure
+- description: Control the option label type by passing relevant compound components as child items. It accepts 2 types:<br/>
+        &emsp;- `content` - use it to add textual content using `<MarketingPageLayoutContent/>` component.<br/>
+        &emsp;- `image` - use it to show a preview of a promoted product.<br/>
+        &emsp;- `footer` - use it to list key features or user testimonials.<br/>
+- example: 
+```jsx 
+
+```
+
+### Content
+- description: Use
+        <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--marketingpagelayoutcontent" target="_blank">\<MarketingPageLayoutContent/></a>
+        component to layout text inside a content area. It consists of outline, title, subtitle, content and actions areas.
+- example: 
+```jsx 
+
+```
+
+### Padding
+- description: Control side paddings of a page with `horizontalSize` prop. It supports 2 values:<br/>
+        &emsp;- `large` (default) - use for screen sizes with width >1464px.<br/>
+        &emsp;- `medium` - use for screen sizes with width <1464px.<br/>
+        <br/>
+        Control top and bottom paddings of a page with `verticalSize` prop. It supports 2 values:<br/>
+        &emsp;- `large` (default) - use for screen sizes with height >630px.<br/>
+        &emsp;- `medium` - use for screen sizes with height <630px.<br/>
+        
+- example: 
+```jsx 
+
+```
+
+### Full Size Image
+- description: Extend preview image to the edges of a screen by removing paddings for it with `removeImageHorizontalPadding` and `removeImageVerticalPadding` props.
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### List in a footer
+- description: Emphasize product quality and benefits by listing user testimonials or product features in a footer.<br/><br/>
+        Use `<TestimonialList/>` and `<FeatureList/>` components for that.
+- example: 
+```jsx 
+
+```
+
+### Extended Image
+- description: Provide detailed visuals for product marketing by extending the image to the edges of a page.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/MediaOverlayExamples.md

@@ -0,0 +1,121 @@
+
+## Feature Examples
+
+
+### Structure
+- description: Component consists of two main containers:<br/> 
+          &emsp;- `<MediaOverlay>` - a parent container that accepts image or video content via `media` prop.<br/>
+          &emsp;- `<MediaOverlay.Content>` - child container that accepts items that should be displayed on top of a media as child elements.<br/>
+- example: 
+```jsx 
+
+```
+
+### Overlay content placement
+- description: Control the position of overlay elements with placement prop. It supports 5 positions:<br/>
+          &emsp;- `top-start`<br/>
+          &emsp;- `top-end`<br/>
+          &emsp;- `middle`<br/>
+          &emsp;- `bottom-start`<br/>
+          &emsp;- `bottom-end`<br/>
+- example: 
+```jsx 
+
+```
+
+### Initial overlay skin
+- description: Control initial overlay type with `skin` prop. It supports 3 skins:<br/> 
+          &emsp;- `none` (default) - use when no visual overlay is required.<br/>
+          &emsp;- `gradient` - use it when relevant data needs to be visible in a default state of the element.<br/>
+          &emsp;- `dark` - use it when media underneath is less important, e.g. as a last item in galleries with a total number or images on top.<br/>
+- example: 
+```jsx 
+
+```
+
+### Hover overlay skin
+- description: Control hover overlay type with `hoverSkin` prop. It supports 3 skins:<br/> 
+          &emsp;- `none` (default) - use for static media items.<br/>
+          &emsp;- `gradient` - use it when hovered item must remain visible, but overlaid content needs a contrast.<br/>
+          &emsp;- `dark` - use it to bring the maximum contrast of relevant content on interactive element hover.<br/>
+- example: 
+```jsx 
+
+```
+
+### Overlay content visibility
+- description: Specify when overlay content should be revealed for the user with visible prop. It supports 3 values:<br/> 
+          &emsp;- `default` (default) - use it to hide overlay content on element hover.<br/>
+          &emsp;- `hover` - use it to reveal overlay content on element hover.<br/>
+          &emsp;- `always` - use it to display overlay content all the time.<br/>
+- example: 
+```jsx 
+
+```
+
+### Border radius
+- description: Define border radius in pixels with `borderRadius` prop. Get rid of a default border radius with `removeRoundedBorders` prop.
+- example: 
+```jsx 
+
+```
+
+### Custom media element
+- description: Pass a custom `media` element with media prop.
+- example: 
+```jsx 
+
+```
+
+### Drag handle
+- description: Use a compound `<MediaOverlay.DragHandle />` component for reorderable components. Actions should be placed at the top right corner in this scenario. 
+- example: 
+```jsx 
+
+```
+
+
+
+
+    
+
+
+## Common Use Case Examples
+
+
+### Social media gallery
+- description: Use media overlay to place identifying data, such as logo or video duration on top of a media item.
+- example: 
+```jsx 
+
+```
+
+### Item lists
+- description: Use media overlay to list down visual items, such as dishes, that can be edited, marked as favourite or interacted with in any other way.
+- example: 
+```jsx 
+
+```
+
+### Image gallery
+- description: Use media overlay to place static data on top of an image, e.g. to place a counter indicating how many more images there are.
+- example: 
+```jsx 
+
+```
+
+### Content edit
+- description: Use media overlay to store actions related to that media element, such as edit, refresh or delete.
+- example: 
+```jsx 
+
+```
+
+### Reordable list
+- description: Use middle placement at the center to position recordable element indication. This function should use a compound `<MediaOverlay.DragHandle/>` component.
+- example: 
+```jsx 
+
+```
+
+

package/dist/docs/components/MessageBoxFunctionalLayoutExamples.md

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

package/dist/docs/components/MessageBoxMarketerialLayoutExamples.md

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