Skip to content

Latest commit

 

History

History
208 lines (142 loc) · 8.72 KB

DEVELOPER.md

File metadata and controls

208 lines (142 loc) · 8.72 KB

Developer Guide

Installing IDS into your project

Before installing IDS for usage in your project, make sure to install its dependencies:

Download IDS

NPM

You can use NPM (or Yarn) to install from the global NPM registry:

npm install --save ids-enterprise@latest

You can also use ids-enterprise@dev for a nightly (and potentially unstable) development build.

After installation, the pre-built files are accessible in ./node_modules/ids-enterprise/dist

CDN

We now offer the IDS library via CDN. For example, the paths for the 4.10.0 releases would be:

https://cdn.hookandloop.infor.com/sohoxi/4.10.0/js/sohoxi.js
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/js/sohoxi.min.js
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/dark-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/light-theme.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/css/light-theme.min.css
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/svg/svg.html
https://cdn.hookandloop.infor.com/sohoxi/4.10.0/svg/svg-extended.html

Versions available on CDN are: 4.3.2, 4.3.3, 4.3.4, 4.3.5, 4.7.0, 4.8.0, 4.9.0, and 4.10.0.

Note: There may be a cost involved to using this with Infor's Amazon S3 account. Please keep this in mind when using the library this way.

Adding the library to a project

Include the IDS dependencies and the library itself in your page's <head> tag:

<head>
  <link rel="stylesheeet" href="css/light-theme.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/d3.min.js"></script>
  <script src="js/sohoxi.js"></script>
</head>

Next, establish some IDS components using the appropriate HTML markup and CSS styles. For a full list of available components, see our component documentation. Below is an example of what's necessary to create a simple IDS Button component inside of a twelve column layout:

<div class="row">
  <div class="twelve columns">

    <button id="my-button" class="btn-primary">
      <span>This is My Button</span>
    </button>

  </div>
</div>

Finally, in a footer section below the markup on your page, add a <script> tag with some Javascript code that will invoke the Javascript interactions available for each IDS component. One way to do this is to call the generic Initializer on the <body> tag (or whatever block element in which you want to scope IDS):

<script type="text/javascript">
  $('body').initialize();
</script>

It's also possible to manually initialize each individual component:

  $('#my-button').button();

If you've got some specific Javascript code you'd like to run after IDS completely initializes, simply add an event listener for IDS's generic initialized event on the <body> tag:

<script type="text/javascript">
  $('body').on('initialized', function () {
    // extra code runs here
  });
</script>

At this point, IDS should be completely setup in your project!

Building the component bundles

To manually build the contents of the distributable folder (dist/), run the following:

npm run build

It's also possible to run a custom build of IDS with your choice of components. The custom bundler can be run with:

npm run build:custom -- --components=button,input,masks,popupmenu,listview

Running the development server

Install pre-requisites

Node.js

Node.js Version;

All of our build tools run in Node.JS. We are currently pinned to version 10 of node, so be sure to use that version. We have a script that tests for this during npm install. You'll also need all the requirements node-gyp suggests installing for your operating system.

Git

Our project uses Git for version control. Any pull requests made to IDS Enterprise will need to be done in a new branch cut from our latest master branch. See the Git Workflow documentation for more information.

Getting started

If using windows the default for linebreaks is CRLF. This project uses LF. In order to configure this for windows you can run the following command before cloning.

git config core.autocrlf false

Use the following to clone our repo and install dependencies:

git clone https://github.com/infor-design/enterprise.git
cd enterprise
npm i

Optional: We use nvm in development so the team is consistently on the same version of Node. If you want to use the version we've set for development, run nvm use from within the project folder.

Basic commands

See the scripts object in package.json for a full list of commands.

Editor Plugins

This project uses eslint and editorconfig. You may want to add linting plugins to your editor to help comply with our coding standards:

For Atom:

For VSCode:

Additionally, check out our Coding Standards documentation for the code standards that will be enforced by these plugins.

Contributing to Documentation

Documentation from within this project is deployed to design.infor.com whenever a new release is published. Please follow these best practices to keep documentation consistent.

Linking

  • From a component readme and linking to another component's documentation, use a relative link like [Read about buttons](./button). Using a relative link like this will maintain the current version the website visitor has selected.
  • The design system website automatically sets target="_blank" for any code documentation link which contains /demo/ in it. It's not necessary for you to add this within the documentation itself.
  • Paths for demo links use the same URL structure as on the local development app.
    • For example, to create a link to a pattern page, take the URI from the dev app such as /patterns/navigation-breadcrumbs and from a component readme page, create a relative link like [see pattern demo](./demo/patterns/navigation-breadcrumbs).
    • This works for /components/, /patterns/, etc.

Guidelines for creating a new IDS Component

QA Documentation

See the QA Documentation Checklist.

Contributing

See our Contribution Guidelines.