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

wix-style-react

export const _size = `
<StorybookComponents.Stack>
  <InfoIcon size="small" content="Small" />
  <InfoIcon size="medium" content="Medium" />
</StorybookComponents.Stack>;`;

export const _textLink = `
<InfoIcon
  content={
    <Box direction="vertical" gap="6px">
      <Text light size="small">
        Box, Text and TextButton components were used to create this layout
      </Text>
      <TextButton size="small" underline="always" skin="light">
        Learn more
      </TextButton>
    </Box>
  }
/>;`;

export const _usingInfoIcon = `
<Card>
  <Card.Header
    title="Edit Jeniffer Meli's Profile"
    subtitle={
      <Text secondary>
        Note: Make sure your staff has given you the right to add their information and image
        <InfoIcon content="This information will be public and seen by customers" />
      </Text>
    }
  />
  <Divider />
  <Card.Content>
    <Layout>
      <Cell span={6}>
        <FormField label="Title">
          <Input defaultValue="Jeniffer Meli" />
        </FormField>
      </Cell>
      <Cell span={6}>
        <FormField
          label="Description"
          infoContent={
            <Box direction="vertical" gap="6px">
              <Text light size="small">
                Describe your staff member’s role and expertise. Clients will see this in the Staff Members Widget on your site.
              </Text>
              <TextButton size="small" underline="always" skin="light">
                Learn more
              </TextButton>
            </Box>
          }
        >
          <Input />
        </FormField>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;`;