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

wix-style-react

export const _size = `
<StorybookComponents.Stack flexDirection="column">
  <Heading appearance="H1">H1 - Page Title</Heading>
  <Heading appearance="H2">H2 - Page Section Title</Heading>
  <Heading appearance="H3">H3 - Card Title, Modal Title</Heading>
  <Heading appearance="H4">H4 - Card Content Title</Heading>
  <Heading appearance="H5">H5 - Card Section Title</Heading>
  <Heading appearance="H6">H6 - Caption</Heading>
</StorybookComponents.Stack>;
`;

export const _skin = `
<StorybookComponents.Background skin="dark">
  <StorybookComponents.Stack flexDirection="column" padding="30px">
    <Heading appearance="H1" light>
      H1 - Page Title
    </Heading>
    <Heading appearance="H2" light>
      H2 - Page Section Title
    </Heading>
    <Heading appearance="H3" light>
      H3 - Card Title, Modal Title
    </Heading>
    <Heading appearance="H4" light>
      H4 - Card Content Title
    </Heading>
    <Heading appearance="H5" light>
      H5 - Card Section Title
    </Heading>
    <Heading appearance="H6" light>
      H6 - Caption
    </Heading>
  </StorybookComponents.Stack>
</StorybookComponents.Background>;
`;

export const _textOverflow = `
<StorybookComponents.Stack width="400px">
  <Heading ellipsis>
    Hover this heading to see the full title inside of a tooltip
  </Heading>
</StorybookComponents.Stack>;
`;

export const _children = `
() => {
  const renderHeadingWithDifferentColor = () => (
    <Box marginLeft="SP1" color="D40" inline>
      5
    </Box>
  );
  return (
    <Heading>
      Page Title
      {renderHeadingWithDifferentColor()}
    </Heading>
  );
};
`;

export const _contentHierarchy = `
() => {
  const [address, setAddress] = React.useState('Vilnius, Lithuania');

  const renderProfile = () => {
    return (
      <Cell>
        <Layout>
          <Cell span={12}>
            <Card>
              <Card.Header title={<Heading appearance="H3">Profile</Heading>} />
              <Card.Divider />
              <Card.Content>
                <Layout>
                  <Cell span={8}>
                    <FormField label="Name">
                      <Input placeholder="Enter your business name" />
                    </FormField>
                  </Cell>
                  <Cell span={8}>
                    <FormField label="Description">
                      <InputArea
                        placeholder="Describe your business here. What makes it great? Use short catchy text to tell people what do you do or offer."
                        minHeight={120}
                      />
                    </FormField>
                  </Cell>
                </Layout>
              </Card.Content>
            </Card>
          </Cell>
        </Layout>
      </Cell>
    );
  };
  const renderLocationAndAddress = () => (
    <>
      <Cell span={12}>
        <Heading appearance="H5">Location</Heading>
        <Text size="small" secondary>
          Let customers know where your business is based, you can add one or
          multiple locations.
        </Text>
      </Cell>
      <Cell span={8}>
        <FormField label="Address">
          <AddressInput
            value={address}
            border="standard"
            onChange={event => setAddress(event.target.value)}
            onClear={() => setAddress('')}
          />
        </FormField>
      </Cell>
    </>
  );

  const renderContactInfo = () => (
    <>
      <Cell span={12}>
        <Heading appearance="H5">Contact info</Heading>
        <Text size="small" secondary>
          Add your business contact details so people can easily get in touch.
        </Text>
      </Cell>
      <Cell span={4}>
        <FormField label="Email">
          <Input placeholder="Enter your email address" />
        </FormField>
      </Cell>
      <Cell span={4}>
        <FormField label="Phone">
          <Input placeholder="Enter your phone number" />
        </FormField>
      </Cell>
    </>
  );

  const renderBusinessHours = () => (
    <>
      <Cell span={12}>
        <Heading appearance="H5">Business hours</Heading>
        <Text size="small" secondary>
          Tell customers when your business is open.
        </Text>
      </Cell>
      <Cell span={8}>
        <Box
          padding="SP3 SP4"
          border="1px solid #c1e4fe"
          borderRadius="6px"
          verticalAlign="middle"
          align="space-between"
        >
          <Box direction="vertical" gap="3px">
            <Text size="small" weight="bold">
              Everyday
            </Text>
            <Text size="small" secondary>
              6:00AM - 8:00PM
            </Text>
          </Box>
          <Box>
            <TextButton size="small" prefixIcon={<Icons.EditSmall />}>
              Edit
            </TextButton>
          </Box>
        </Box>
      </Cell>
    </>
  );

  const renderLocationAndContactInfo = () => {
    return (
      <Cell>
        <Layout>
          <Cell>
            <Page.Section
              title="Location & Contact Info"
              showDivider
              actionsBar={
                <TextButton prefixIcon={<Icons.Add />}>
                  Add a location
                </TextButton>
              }
            />
          </Cell>
          <Cell span={12}>
            <Card>
              <Card.Header
                title={<Heading appearance="H3">Default Info</Heading>}
              />
              <Card.Divider />
              <Card.Content>
                <Layout>
                  {renderLocationAndAddress()}
                  <Cell span={12}>
                    <Divider />
                  </Cell>
                  {renderContactInfo()}
                  <Cell span={12}>
                    <Divider />
                  </Cell>
                  {renderBusinessHours()}{' '}
                </Layout>
              </Card.Content>
            </Card>
          </Cell>
        </Layout>
      </Cell>
    );
  };

  return (
    <Page>
      <Page.Header title="Business Info"></Page.Header>
      <Page.Content>
        <Layout>
          {renderProfile()}
          {renderLocationAndContactInfo()}
        </Layout>
      </Page.Content>
    </Page>
  );
};

`;