slate/pages/system/buttons.js

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

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

export default class SystemPageButtons extends React.Component {
  render() {
    return (
      <SystemPage
        title="SDS: Buttons"
        description="..."
        url="https://slate.host/system/buttons"
      >
        <System.H1>
          Buttons <ViewSourceLink file="system/buttons.js" />
        </System.H1>
        <br />
        <br />
        <System.P>
          The Button component is used to trigger an action or event, such as
          submitting a form or saving users information.
        </System.P>
        <br />
        <br />
        <br />
        <System.H2>Imports</System.H2>
        <hr />
        <br />
        <System.P>Import React and the Button Components.</System.P>
        <br />
        <br />
        <CodeBlock>
          {`import * as React from "react";
import {
  ButtonPrimary,
  ButtonPrimaryFull,
  ButtonSecondary,
  ButtonSecondaryFull,
  ButtonDisabled,
  ButtonDisabledFull,
} from "slate-react-system";`}
        </CodeBlock>
        <br />
        <br />
        <System.H2>Regular width</System.H2>
        <hr />
        <br />
        <System.P>
          There are three variations of the regular width button component.
          <br />
          Primary, Secondary and Disabled.
        </System.P>
        <br />
        <System.ButtonPrimary>Primary</System.ButtonPrimary> &nbsp;
        <System.ButtonSecondary>Secondary</System.ButtonSecondary> &nbsp;
        <System.ButtonDisabled>Disabled</System.ButtonDisabled>
        <br />
        <br />
        <CodeBlock>
          {`class ExamplePrimary extends React.Component {
  render() {
    return <ButtonPrimary>Primary Button</ButtonPrimary>;
  }
}

class ExampleSecondary extends React.Component {
  render() {
    return <ButtonSecondary>Secondary Button</ButtonSecondary>;
  }
}

class ExampleDisabled extends React.Component {
  render() {
    return <ButtonDisabled>Disabled Button</ButtonDisabled>;
  }
}`}
        </CodeBlock>
        <br />
        <br />
        <br />
        <System.H2>Full width</System.H2>
        <hr />
        <br />
        <System.P>
          There are three variations of the full width button component. <br />
          Primary, Secondary and Disabled.
        </System.P>
        <br />
        <System.ButtonPrimaryFull>Primary Button Full</System.ButtonPrimaryFull>
        <br />
        <System.ButtonSecondaryFull>
          Secondary Button Full
        </System.ButtonSecondaryFull>
        <br />
        <System.ButtonDisabledFull>
          Disabled Button Full
        </System.ButtonDisabledFull>
        <br />
        <br />
        <CodeBlock>
          {`class ExamplePrimaryFull extends React.Component {
  render() {
    return <ButtonPrimaryFull>Primary Button Full</ButtonPrimaryFull>;
  }
}

class ExampleSecondaryFull extends React.Component {
  render() {
    return <ButtonSecondaryFull>Secondary Button Full</ButtonSecondaryFull>;
  }
}

class ExampleDisabledFull extends React.Component {
  render() {
    return <ButtonDisabledFull>Disabled Button Full</ButtonDisabledFull>;
  }
}`}
        </CodeBlock>
        <br />
        <br />
        <br />
        <System.H2>Labels</System.H2>
        <hr />
        <br />
        <System.P>
          You can add the <i>type='label'</i> property to convert any of the
          above buttons into a label.
        </System.P>
        <br />
        <System.ButtonPrimary type="label">
          Primary Label
        </System.ButtonPrimary>{" "}
        &nbsp;
        <System.ButtonSecondary type="label">
          Secondary Label
        </System.ButtonSecondary>{" "}
        &nbsp;
        <System.ButtonDisabled type="label">
          Disabled Label
        </System.ButtonDisabled>
        <br />
        <br />
        <CodeBlock>
          {`class ExamplePrimaryLabel extends React.Component {
  render() {
    return <ButtonPrimary type="label">Primary Button Label</ButtonPrimary>;
  }
}

class ExampleSecondaryLabel extends React.Component {
  render() {
    return (
      <ButtonSecondary type="label">Secondary Button Label</ButtonSecondary>
    );
  }
}

class ExampleDisabledLabel extends React.Component {
  render() {
    return <ButtonDisabled type="label">Disabled Button Label</ButtonDisabled>;
  }
}`}
        </CodeBlock>
      </SystemPage>
    );
  }
}