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

wix-style-react

export const _structure = `
<SocialPreview
  title="Title"
  description="Description"
  previewUrl="WWW.SITE-NAME.COM"
  media={
    <Image height="360px" borderRadius="0px"/>
  }
/>;`;

export const _size = `<StorybookComponents.Stack flexDirection="column">
<SocialPreview
  title="Large Size"
  description="Description"
  previewUrl="www.site-name.com"
  media={<Image
    width="100%"
    height="360px"
    borderRadius="0px"
  />}
/>
<SocialPreview
  size="small"
  skin="twitter"
  title="Small Size"
  description="Description"
  previewUrl="www.site-name.com"
  media={<Image
    width="100%"
    height="100%"
    borderRadius="11px 0 0 11px"
  />}
/>
</StorybookComponents.Stack>;`;

export const _skin = `<StorybookComponents.Stack flexDirection="column">
<SocialPreview
  skin="social"
  title="Social Skin"
  description="Description"
  previewUrl="www.site-name.com"
  media={<Image
    width="100%"
    height="360px"
    borderRadius="0px"/>}
/>
<SocialPreview
  skin="twitter"
  title="Twitter Skin"
  description="Description"
  previewUrl="www.site-name.com"
  media={<Image
    width="100%"
    height="360px"
    borderRadius="11px 11px 0 0"/>}
/>
</StorybookComponents.Stack>;`;

export const _blogPostShare = `
<Box direction="vertical" align="left">
  <Text>Preview on Twitter</Text>
  <Tooltip
    fixed
    content={
      <Text light>
        It takes time for changes you make to show live on Twitter. You can also
        manually refresh them. <a>Find out how</a>
      </Text>
    }
  >
    <Text>
      <a>When will changes show live?</a>
    </Text>
  </Tooltip>

  <Box padding="SP1 0 SP4 0" width="100%">
    <SocialPreview
      title="Now You Can Blog from Everywhere!"
      description="We’ve made it quick and convenient for you to manage your blog from anywhere. In this blog post we’ll share the ways you can post to your Wix Blog."
      previewUrl="YOUR-SITE-HERE.COM"
      media={
        <ImageViewer
          height="360px"
          width="100%"
          removeRoundedBorders
          imageUrl="TravelExample7.jpg"
        />
      }
    />
  </Box>

  <Box direction="vertical" width="100%" gap="SP5">
    <FormField label="Social title">
      <Input defaultValue="Now You Can Blog From Everywhere!" />
    </FormField>
    <FormField label="Social description">
      <InputArea
        rows="3"
        defaultValue="We’ve made it quick and convenient for you to manage your blog from anywhere. In this blog post we’ll share the ways you can post to your Wix Blog."
      />
    </FormField>
  </Box>
</Box>;
`;