Skip to content
Atomic Design Patternlab in Angular for use with the LEAN Ecosystem
JavaScript Smarty HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
lib
.editorconfig
.eslintrc.json
.gitignore
.sass-lint.yml
.travis.yml
README.md
build.js
gulpfile.js
index.js
license
package.json

README.md

Lean Patterns

An AngularJS module for Lean patterns.

Getting Started

The easiest way to install this package is by using npm from your terminal:

npm install ln-patternlab --save-dev

Configuration

The module tries to load a configuration file at config/patterns.json that you have to create inside your application. If that file exists, it will be used to configure the generation of the components and only the components listed at the enabledComponents array will be generated. Otherwise all available components at the module will be generated.

The config file must have the following structure:

// config/patterns.json
{
  "generatePatternsPage": true,
  "customComponentsLocation": "../../app/",
  "patternsRoute": "#/patterns",
  "examplesRoute": "#/examples",
  "examplesBackgroundColor": "#FFFFFF",
  "enabledComponents": [
    {
      "component": "atoms/h1",
      "custom": false,
      "examples": [
        {
          "name": "Header 1",
          "params": {
            "title": "Title 1"
          }
        },
        {
          "name": "Header 1 - Green",
          "params": {
            "title": "Title 1 - Green",
            "class": "green"
          }
        },
        ...
      ]
    },
    {
      "component": "atoms/h2",
      "custom": false,
      "examples": [
        {
          "name": "Header 2",
          "params": {
            "title": "Title 2"
          }
        },
        ...
      ]
    },
    ...
  ]
}

If generatePatternsPage = true, the module will generate a template page containing all enabled components with their corresponding examples. Each examples object of each enabled component will generate a different example in the patterns page, which corresponds to the component instantiated with the specified name and parameters.

Build

To generate the components just add the ln-patterns binary to one of the scripts at your package.json file. Here is an example using postinstall script:

// package.json
{
  ...
  "scripts": {
    "postinstall": "ln-patterns"
  }
  ...
}

And run it with "npm run":

npm run postinstall

Usage

Then you can add the module as a dependency on your AngularJS application:

require('ln-patternlab');

angular
  .module('app', [
    'lnPatterns'
  ]);

And use the components as you need inside your templates. Here are some examples:

<nav class="{{class}}" ln-m-menu ln-sel-parent-class="{{selParentClass}}" ln-sel-item-class="{{selItemClass}}" ln-parent-icon-class="{{parentIconClass}}" ln-items="items"></nav>

NOTE: To access the patterns page you must setup two AngularJS routes to the following template keys:

Patterns route: /patterns => templates/patterns/template.html
Examples route: /examples/:exampleId => templates/examples/template.html

Those keys are automatically bound to the gererated html on the AngularJS $templateCache.

You can’t perform that action at this time.