acl-ui

ACL UI

ACL UI Components library, icon font, css and more!

Install

Add this to package.json, where VERSION_NUMBER equals e.g. 3.38.0 (get the version from here):

{
  "dependencies": {
    "@acl-services/acl-ui": "VERSION_NUMBER",
  }
}

Note: We use yarn for faster packages installation and better packages management. If you haven't had yarn installed, you can install it with

$ brew install yarn

and run

$ yarn

** May 2018 ** Current package issues may occur with node-sass and may be resolved using the following commmand

npm install node-sass --registry=http://registry.npm.taobao.org --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

Styling Usage

Assuming you are using Webpack, you can import the base style and mixing helpers in a .scss file using:

// Import mixins and variables to use
@import "~acl-ui/helpers/css/index";

// Basic style using SASS variables
body {
  background-color: $color--black-lighten-80;
  color: $color--black;
  font-family: $font-family--default;
  margin: 0;
  width: 100%;
}

Component Usage

import React from "react";
import PropTypes from "prop-types";
import SidePanel from "acl-ui/components/SidePanel";

class SidePanelExample extends React.Component {
  openPanel() {
    this.refs.panel.open();
  }

  render() {
    return (
      <div>
        <button onClick={this.openPanel.bind(this)}>Open SidePanel</button>
        <SidePanel ref="panel" title="ACL UI is Awesome">
          <h1>Objectives:</h1>
          <ul>
            <li>Happy customers</li>
            <li>Profit</li>
          </ul>
        </SidePanel>
      </div>
    );
  }
}

export default SidePanelExample;

Consuming Services

Most of our services use ACL-UI in some format. The following table indicates those that are using and will also serve as the progress check against the move to ACL-UI 3's structure.

	Pre 2.0	acl-ui 2	acl-ui 3	Notes
Accounts		x	x
Inspirations		x
Communities		x		Static assets
ACL Store [wip]
Project Manager		x	x
Risk Manager		x	x
Results Manager		x	x
Visualizer	x		x
Storyboards		x	x
ACL for Windows	x
Analytic
AX	x
Project Manager Client	x
ADA			x
Scripthub	x
Report Manager
iOS App
Android App
Style Guide			x
Build ACL	x

After making a change, make sure to visually verify in the consuming services. If you are unable to verify the change, please let the respective developers and QAs know.

To generate tokens Markdown, SCSS & JSON from YAML

$ yarn design-tokens

Learn more

Check out the Wiki For more information!

ACL UI’s Storybook online

Viewable within ACL’s network only.

http://acl-ui.aclgrc-s1.com