Clark Styles

Clark style and pattern library

Getting Started

• You will need to install Yarn for dependency management, if you do not have it already installed.

• Run the yarn command to install node_modules

Local Development Via Yarn Link

Always ensure the react-router-dom version listed here in devDependencies matches up with the version being used in the repo. If not, there will be breaking errors that halt local development until resolved.

Testing library integration locally

To test clark-styles locally, run yarn build. Make sure build/ directory exists and then follow the instructions here.

Testing

We use jest for running our test suite. All new utility functions should be pure and thoroughly unit-tested. Run yarn test to start the test runner

Flow

This project uses flow to do static typechecking. We're using the flowtype eslint plugin to enforce adding flow annotations to all files and stylistic consistency.

Run yarn flow to start the flow server. If you run into unexpected failures, as a first troubleshooting step, run yarn flow stop and then start the server again to bust the cache.

Updating

For convience sake, we use the cut-release project to easily publish to npm and follow SEMVER. Don't forget to update the changelog!

Merge your branch into master, run yarn build, and then run cut-release.

Once you have cut a release remember to bump the version in your project.

Usage

To use the library run yarn add clark-styles.

import React from "react";

import { Grid, Col, Row, COLORS, SPACING } from "clark-styles";
import styled from "styled-components";

const StyledCol = styled(Col)`
  background: ${COLORS.CLARK_PRIMARY};
  height: ${SPACING.S_4};
  margin-top: ${SPACING.S_1};
`;

const App = () => (
  <Grid>
    <Row>
      <StyledCol sm={12} md={12} lg={12} />
    </Row>
    <Row>
      <StyledCol sm={12} md={6} lg={6} />
      <StyledCol sm={12} md={6} lg={6} />
    </Row>
    <Row>
      <StyledCol sm={3} md={3} lg={3} />
      <StyledCol sm={3} md={3} lg={3} />
      <StyledCol sm={3} md={3} lg={3} />
      <StyledCol sm={3} md={3} lg={3} />
    </Row>
    <Row>
      <StyledCol sm={3} md={3} lg={3} lgOffset={6} />
      <StyledCol sm={3} md={3} lg={3} />
    </Row>
  </Grid>
);

Dependencies

• BreadcrumbsHeader component has introduced two additional dependencies lodash and react-router-dom. We may choose to refactor and decouple these dependencies at a later time but for now this works best within our system.
• Button component depends on react-router-dom
• Modal component depends on react-modal

License

MIT © hiclark