<commit_before># Brightwheel

### About

Brightwheel is a JavaScript library that lets you use [Etch](https://github.com/atom/etch) and [Photon](http://photonkit.com/) to construct and manage the state of user interfaces for [Electron](https://electron.atom.io) applications.

### Getting Started

#### Installation

Add Brightwheel to your project's dependencies.
```shell
> npm install --save brightwheel
```

#### Usage

Include Photon styles in your HTML file's `<head>`.
```html
<script src="path/to/photon.css" charset="utf-8"></script>
```

Import Brightwheel components into your project.
```javascript
// Import and namespace all components
import * as UI from 'brightwheel'

// Import individual components
import { Button } from 'brightwheel'

```

Generate components and add them to your document.
```javascript
let mySubmitButton = new Button({
  type: 'positive',
  size: 'mini',
  text: 'Submit'
  // specify other properties as needed
}, []);

let myCancelButton = new Button({
  type: 'default',
  size: 'mini',
  text: 'Cancel'
  // specify other properties as needed
}, []);


// Nest components within parent components
let myActions = new FormActions({
  // specify properties as needed
}, [
  mySubmitButton,
  myCancelButton
]);

// Nest the elements within the DOM
document.querySelector('#form-1').appendChild(myActions.element);

```

### Components

#### BrightwheelComponent({properties}, [children])

This is the superclass that all other components extend.  It implements a minimal scaffolding of methods that Etch can use to construct, render, update, and destroy the component.

You cannot directly instantiate this component. Instead, extend it and override its methods as needed.


#### ButtonGroup({properties}, [children])

**Properties** _Object_
- `attributes` _Object_
- `classNames` _Array_

**Example**

```javascript
let myButtonGroup = new ButtonGroup(
  {
    classNames: ['pull-left'],
    attributes: {
      id: "group-1"
    }
  },
  [Button, Button...]
);
```

**Output**

```html
<div id="group-1" class="btn-group pull-left">
  <Button>
  <Button>...
</div>
```


#### Button({properties}, [children])

**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `icon` _String_
- `size` _String_
- `text` _String_
- `type` _String_

**Example**

```javascript
let myButton = new Button({
  attributes: {
    id: 'button-1'
  },
  classNames: [
    'active'
  ],
  icon: 'check'
  size: 'mini',
  text: 'My Button'
  type: 'primary'
}, []);
```

**Output**

```html
<button id="button-1" class="btn btn-primary btn-mini active">
  <span class="icon icon-check"></span>
  My Button
</button>
```


#### Checkbox({properties}, [children])

**Properties**
- `attributes` _Object_
- `checked` _Boolean_
- `classNames` _Array_
- `text` _String_

**Example**

```javascript
let myCheckbox = new Checkbox({
  attributes: {
    id: 'checkbox-1'
  },
  classNames: ['my-class'],
  checked: true,
  text: 'Remember me'
}, []);

```

**Output**

```html
<div id="checkbox-1" class="checkbox my-class">
  <label>
    <input type="checkbox" checked>
    Remember me
  </label>
</div>
```


#### FormActions({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_

**Example**

```javascript
let myActions = new FormActions({
  attributes: {
    id: 'actions-1'
  },
  classNames: ['pull-left']
}, [child-components]);
```

**Output**

```html
<div id="actions-1" class="form-actions pull-left">
  <child-component>
  <child-component>...
</div>
```


#### FormGroup({properties}, [children])
**Properties**
- `attributes` _Objects_
- `classNames` _Array_

**Example**

```javascript
let myGroup = new FormGroup({
  attributes: {
    id: 'group-1'
  },
  classNames: ['pull-left']
}, [child-components]);
```

**Output**

```html
<div id="group-1" class="form-group pull-left">
  <child-component>
  <child-component>...
</div>
```


#### Icon({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `icon` _String_

**Example**

```javascript
let myIcon = new Icon({
  attributes: {
    id: 'icon-1'
  },
  classNames: ['my-class']
  icon: 'print'
}, []);
```

**Output**

```html
<span id="icon-1" class="icon icon-print my-class"></span>
```


#### Image({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `isMediaObject` _Boolean_
- `pull` _String_
- `shape` _String_
- `src` _String_

**Example**

```javascript
let myImage = new Image({
  attributes: {
    id: 'image-1'
  },
  classNames: ['my-class'],
  isMediaObject: true,
  pull: 'left',
  shape: 'rounded',
  src: 'images/logo.png'
}, []);
```

**Output**

```html
<img id="image-1" class="img-rounded media-object pull-left" src="images/logo.png">
```


#### Input({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `placeholder` _String_
- `type` _String_

**Example**

```javascript
let myInput = new Input({
  attributes: {
    id: 'input-1'
  },
  classNames: ['my-class'],
  placeholder: 'Enter text here',
  type: 'text'
}, []);
```

**Output**

```html
<input type="text" id="input-1" class="form-control my-class" placeholder="Enter text here">
```


#### Label({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `text` _String_

**Example**

```javascript

```

**Output**

```html

```


#### ListGroupItem({properties}, [children])
**Properties**
- `active` _Boolan_
- `attributes` _Object_
- `classNames` _Array_
- `header` _Boolean_

**Example**

```javascript

```

**Output**

```html
<commit_msg>Add Label example<commit_after># Brightwheel

### About

Brightwheel is a JavaScript library that lets you use [Etch](https://github.com/atom/etch) and [Photon](http://photonkit.com/) to construct and manage the state of user interfaces for [Electron](https://electron.atom.io) applications.

### Getting Started

#### Installation

Add Brightwheel to your project's dependencies.
```shell
> npm install --save brightwheel
```

#### Usage

Include Photon styles in your HTML file's `<head>`.
```html
<script src="path/to/photon.css" charset="utf-8"></script>
```

Import Brightwheel components into your project.
```javascript
// Import and namespace all components
import * as UI from 'brightwheel'

// Import individual components
import { Button } from 'brightwheel'

```

Generate components and add them to your document.
```javascript
let mySubmitButton = new Button({
  type: 'positive',
  size: 'mini',
  text: 'Submit'
  // specify other properties as needed
}, []);

let myCancelButton = new Button({
  type: 'default',
  size: 'mini',
  text: 'Cancel'
  // specify other properties as needed
}, []);


// Nest components within parent components
let myActions = new FormActions({
  // specify properties as needed
}, [
  mySubmitButton,
  myCancelButton
]);

// Nest the elements within the DOM
document.querySelector('#form-1').appendChild(myActions.element);

```

### Components

#### BrightwheelComponent({properties}, [children])

This is the superclass that all other components extend.  It implements a minimal scaffolding of methods that Etch can use to construct, render, update, and destroy the component.

You cannot directly instantiate this component. Instead, extend it and override its methods as needed.


#### ButtonGroup({properties}, [children])

**Properties** _Object_
- `attributes` _Object_
- `classNames` _Array_

**Example**

```javascript
let myButtonGroup = new ButtonGroup(
  {
    classNames: ['pull-left'],
    attributes: {
      id: "group-1"
    }
  },
  [Button, Button...]
);
```

**Output**

```html
<div id="group-1" class="btn-group pull-left">
  <Button>
  <Button>...
</div>
```


#### Button({properties}, [children])

**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `icon` _String_
- `size` _String_
- `text` _String_
- `type` _String_

**Example**

```javascript
let myButton = new Button({
  attributes: {
    id: 'button-1'
  },
  classNames: [
    'active'
  ],
  icon: 'check'
  size: 'mini',
  text: 'My Button'
  type: 'primary'
}, []);
```

**Output**

```html
<button id="button-1" class="btn btn-primary btn-mini active">
  <span class="icon icon-check"></span>
  My Button
</button>
```


#### Checkbox({properties}, [children])

**Properties**
- `attributes` _Object_
- `checked` _Boolean_
- `classNames` _Array_
- `text` _String_

**Example**

```javascript
let myCheckbox = new Checkbox({
  attributes: {
    id: 'checkbox-1'
  },
  classNames: ['my-class'],
  checked: true,
  text: 'Remember me'
}, []);

```

**Output**

```html
<div id="checkbox-1" class="checkbox my-class">
  <label>
    <input type="checkbox" checked>
    Remember me
  </label>
</div>
```


#### FormActions({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_

**Example**

```javascript
let myActions = new FormActions({
  attributes: {
    id: 'actions-1'
  },
  classNames: ['pull-left']
}, [child-components]);
```

**Output**

```html
<div id="actions-1" class="form-actions pull-left">
  <child-component>
  <child-component>...
</div>
```


#### FormGroup({properties}, [children])
**Properties**
- `attributes` _Objects_
- `classNames` _Array_

**Example**

```javascript
let myGroup = new FormGroup({
  attributes: {
    id: 'group-1'
  },
  classNames: ['pull-left']
}, [child-components]);
```

**Output**

```html
<div id="group-1" class="form-group pull-left">
  <child-component>
  <child-component>...
</div>
```


#### Icon({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `icon` _String_

**Example**

```javascript
let myIcon = new Icon({
  attributes: {
    id: 'icon-1'
  },
  classNames: ['my-class']
  icon: 'print'
}, []);
```

**Output**

```html
<span id="icon-1" class="icon icon-print my-class"></span>
```


#### Image({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `isMediaObject` _Boolean_
- `pull` _String_
- `shape` _String_
- `src` _String_

**Example**

```javascript
let myImage = new Image({
  attributes: {
    id: 'image-1'
  },
  classNames: ['my-class'],
  isMediaObject: true,
  pull: 'left',
  shape: 'rounded',
  src: 'images/logo.png'
}, []);
```

**Output**

```html
<img id="image-1" class="img-rounded media-object pull-left" src="images/logo.png">
```


#### Input({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `placeholder` _String_
- `type` _String_

**Example**

```javascript
let myInput = new Input({
  attributes: {
    id: 'input-1'
  },
  classNames: ['my-class'],
  placeholder: 'Enter text here',
  type: 'text'
}, []);
```

**Output**

```html
<input type="text" id="input-1" class="form-control my-class" placeholder="Enter text here">
```


#### Label({properties}, [children])
**Properties**
- `attributes` _Object_
- `classNames` _Array_
- `text` _String_

**Example**

```javascript
let myLabel = new Label({
  attributes: {
    id: 'label-1'
  },
  classNames: ['my-class'],
  text: 'Email Address'
}, []);
```

**Output**

```html
<label id="label-1" class="my-class">Email Address</label>
```


#### ListGroupItem({properties}, [children])
**Properties**
- `active` _Boolan_
- `attributes` _Object_
- `classNames` _Array_
- `header` _Boolean_

**Example**

```javascript

```

**Output**

```html

{'fraction_non_alphanumeric': 0.1890040400491832, 'fraction_numerical': 0.0033374319339539785, 'mean_word_length': 4.313579094727018, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 63, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2042453', 'n_tokens_mistral': 3908, 'n_tokens_neox': 3741, 'n_words': 1016}