wix-style-react/src/MarketingLayout/docs/MarketingLayout.examples.js

wix-style-react

export const _structure = `
<MarketingLayout
  title="Title"
  description="Description"
  actions={<Button>Button</Button>}
  image={<Image width="180px" height="120px" />}
/>;
`;

export const _size = `
() => {
  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>
  );
};
`;

export const _imagePosition = `
() => {
  const MarketingLayoutImage = () => (
    <StorybookComponents.Stack>
      <StorybookComponents.Placeholder>
        <StorybookComponents.Stack
          width="120px"
          height="120px"
          justifyContent="center"
          alignItems="center"
        >
          <Heading>M1</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>
  );
};
`;

export const _imageBackground = `
<Card>
  <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>;
`;

export const _badge = `
() => {
  const MarketingLayoutImage = () => (
    <StorybookComponents.Stack>
      <StorybookComponents.Placeholder>
        <StorybookComponents.Stack
          width="120px"
          height="120px"
          justifyContent="center"
          alignItems="center"
        >
          <Heading>M1</Heading>
        </StorybookComponents.Stack>
      </StorybookComponents.Placeholder>
    </StorybookComponents.Stack>
  );

  return (
    <StorybookComponents.Stack flexDirection="column">
      <Card>
        <MarketingLayout
          badge={<Badge size="small">badge</Badge>}
          size="tiny"
          title="With Badge"
          description="Description"
          actions={<Button size="small">Action</Button>}
          image={<MarketingLayoutImage />}
        />
      </Card>
      <Card>
        <MarketingLayout
          hiddenBadge
          size="tiny"
          title="Hidden Badge"
          description="Description"
          actions={<Button size="small">Action</Button>}
          image={<MarketingLayoutImage />}
        />
      </Card>
    </StorybookComponents.Stack>
  );
};
`;

export const _alignItems = `
<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="medium">Action</Button>}
    image={<Image />}
  />
</Card>;
`;

export const _multiColumnLayout = `
<Page>
  <Page.Content>
    <Layout>
      <Cell>
        <PageSection title="Suggested for you" showDivider />
      </Cell>
      <Cell>
        <Box gap="30px">
          <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>
          <Card>
            <MarketingLayout
              title="Create an email campaign"
              description="Send updates, offers or newsletters & keep in touch."
              actions={<Button size="small">Send a Campaign</Button>}
              size="tiny"
              hiddenBadge
              alignItems="stretch"
              image={
                <Box width="100%" align="right">
                  <Image
                    width="120px"
                    src="PromotionalPromoteMarketingHomeEmail.svg"
                    transparent
                  />
                </Box>
              }
            />
          </Card>
        </Box>
      </Cell>
    </Layout>
  </Page.Content>
</Page>;
`;

export const _footnote = `
<Card>
  <MarketingLayout
    title="Add Sessions to Get Booked"
    description="Set when this service is offered and the staff who 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 48px">
    <Text size="tiny" secondary>
      You can also add sessions directly from your <a>Calendar</a>
    </Text>
  </Box>
</Card>;
`;