slate/pages/_/system/typography.js

import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";

import { css } from "@emotion/react";

import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";

const STYLES_CSS_LABEL = css`
  display: block;
  letter-spacing: 0.2px;
  font-size: 12px;
  color: ${Constants.system.darkGray};
  margin-bottom: 8px;
`;

const STYLES_TYPE_JETBRAINS = css`
  font-family: ${Constants.font.code};
`;

const STYLES_BOLD = css`
  font-family: ${Constants.font.text};
  font-weight: bold;
`;

const STYLES_ITALIC = css`
  font-style: italic;
`;

const STYLES_UNDERLINE = css`
  text-decoration: underline;
`;

export default class SystemPageTypography extends React.Component {
  render() {
    return (
      <SystemPage
        title="SDS: Typography"
        description="..."
        url="https://fps.onrender.com/system/typography"
      >
        <System.H1>
          Typography <ViewSourceLink file="system/typography.js" />
        </System.H1>
        <br />
        <br />
        <System.P>
          The Filecoin Client uses{" "}
          <a href="https://rsms.me/inter/" target="_blank">
            Inter
          </a>{" "}
          and{" "}
          <a href="https://www.jetbrains.com/lp/mono/" target="_blank">
            Jet Brains
          </a>
          .
        </System.P>
        <br />
        <br />
        <br />
        <System.H2>Imports</System.H2>
        <hr />
        <br />
        <System.P>
          Import React and the typography components. If needed, import the ViewSourceLink
          component.
        </System.P>
        <br />
        <CodeBlock>
          {`import { H1, H2, H3, H4, P, UL, OL, LI } from "slate-react-system";
import ViewSourceLink from "~/components/system/ViewSourceLink";`}
        </CodeBlock>
        <br />
        <br />
        <System.H2>Typescale</System.H2>
        <hr />
        <br />
        <span css={STYLES_CSS_LABEL}>1.953rem &nbsp; Semi Bold</span>
        <System.H1>This is heading level 1</System.H1>
        <br />
        <span css={STYLES_CSS_LABEL}>1.563rem &nbsp; Medium</span>
        <System.H2>This is heading level 2</System.H2>
        <br />
        <span css={STYLES_CSS_LABEL}>1.25rem &nbsp; Medium</span>
        <System.H3>This is heading level 3</System.H3>
        <br />
        <span css={STYLES_CSS_LABEL}>1rem &nbsp; Medium</span>
        <System.H4>This is heading level 4</System.H4>
        <br />
        <br />
        <CodeBlock>
          {`<H1>This is heading level 1</H1>

<H2>This is heading level 2</H2>

<H3>This is heading level 3</H3>

<H4>This is heading level 4</H4>`}
        </CodeBlock>
        <br />
        <br />
        <System.H2>Type Styles</System.H2>
        <hr />
        <br />
        <System.P css={STYLES_BOLD}>This text is bold</System.P>
        <System.P css={STYLES_ITALIC}>This text is italic</System.P>
        <System.P css={STYLES_UNDERLINE}>This text is underlined</System.P>
        <br />
        <br />
        <CodeBlock>
          {`<P css={STYLES_BOLD}>This text is bold</P>

<P css={STYLES_ITALIC}>This text is italic</P>

<P css={STYLES_UNDERLINE}>This text is underlined</P>`}
        </CodeBlock>
        <br />
        <br />
        <System.H2>Typefaces</System.H2>
        <hr />
        <br />
        <System.H3>Inter</System.H3>
        <System.P>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P>
        <System.P>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P>
        <System.P>0 1 2 3 4 5 6 7 8 9</System.P>
        <br />
        <br />
        <System.H3>Jet Brains</System.H3>
        <System.P css={STYLES_TYPE_JETBRAINS}>
          a b c d e f g h i j k l m n o p q r s t u v w x y z
        </System.P>
        <System.P css={STYLES_TYPE_JETBRAINS}>
          A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
        </System.P>
        <System.P css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P>
        <br />
        <br />
        <System.H2>Ordered and Unordered Lists</System.H2>
        <hr />
        <br />
        <System.OL>
          <System.LI>Rainbow</System.LI>
          <System.LI>Cloud</System.LI>
          <System.LI>Cake</System.LI>
        </System.OL>
        <br />
        <System.UL>
          <System.LI>Cloud</System.LI>
          <System.LI>Cake</System.LI>
          <System.LI>Rainbow</System.LI>
        </System.UL>
        <br />
        <br />
        <CodeBlock>
          {`<OL>
  <LI>Rainbow</LI>
  <LI>Cloud</LI>
  <LI>Cake</LI>
</OL>

<UL>
  <LI>Cloud</LI>
  <LI>Cake</LI>
  <LI>Rainbow</LI>
</UL>`}
        </CodeBlock>
        <br />
        <br />
        <System.H2>Hyperlinks</System.H2>
        <hr />
        <br />
        <System.P>
          Internal References{" "}
          <a href="https://slate.host" target="_blank">
            Link to a page
          </a>
        </System.P>
        <System.P>
          External References <ViewSourceLink file="system/typography.js" />
        </System.P>
        <br />
        <br />
        <CodeBlock>
          {`<P>
  <a href="https://slate.host"
  target="_blank">
    Link to a page
  </a>
</P>

<P>
  <ViewSourceLink file="system/typography.js" />
</P>`}
        </CodeBlock>
        <br />
        <br />
      </SystemPage>
    );
  }
}