Lightning Components for Lightning Design System

An open source library of lightning components for the Lightning Design System. The purpose of this project is to create easy to use generic components that can be used to accelerate the development of a lightning application.

These components are meant to be used programatically using the developer console and are not meant to be using directly in Lightning App Builder or Community Builder.

These components help make your lightning application a little more concise and semantic as compared to using the Lightning Design System by itself. So instead of writing

<a href="#void" class="slds-pill">
  <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-pill__icon">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
  </svg>
  <span class="slds-pill__label">Pill Label</span>
  <button class="slds-button slds-button--icon-bare slds-pill__remove">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
    </svg>
    <span class="slds-assistive-text">Remove</span>
  </button>
</a>

to create a pill. You instead would just write

  <ldsc:pill label="Pill with icon" iconType="standard" iconName="account" onRemove="{! c.removePill }" />

Since the Lightning Design System is still in-flux this is going to be a changing set of components. Pull requests, features and issues are most welcome.

Installation (Alpha 1)

Installation is via a managed package.

Components

• Lightning Design Application
• Grid
• Column
• Badge
• Breadcrumbs
• Button
• Button Group
• Icon
• Tabs
• Tab
• Spinner
• Modal
• Pill
• Alert
• Form Elements
  • Input
  • Text Area
  • Radio Buttons
  • Checkbox
  • Checkboxes
  • Select
  • Multi-Select
  • Lookup
  • Form
• Image
• Media
• Tile
• Tree
• Popover
• Menu
• Page Header

Interfaces

• htmlAttributes - Contains the id and class standard HTML attributes which can be applied to components.
• iconAttributes - These set a list of attributes available for components which use icons internally.

Documentation

Documentation for each of the components can be accessed at the following link (after you install the managed package)

https://BASE_URL/auradocs/reference.app

Where BASE_URL is the url of your instance. Once you reach the standard aura documentation page you can navigate to the ldsc namespace to check the documentation for each of the components.

Releases

• Alpha 2 : Planned (29/05/2016) - Scope

  • Improved documentation - Kitchen Sink and Tutorial Video
  • Ready for Beta release to app exchange
  • Additional Components Data Table, Cards??
  • Upgrade to Summer '16 ??

• Alpha 1 : Completed (30/04/2016)

  • Base Release
  • Basic components from Spring '16 Release