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>
    );
  }
}