# labs-ui

> NYC Planning Labs Ember.js Components

Latest version **1.2.0** (published 2023-01-04) · CC0 license · 0 weekly downloads

## Install

```sh
npm install labs-ui
pnpm add labs-ui
yarn add labs-ui
bun add labs-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-01-04 |
| First published | 2018-08-20 |
| Weekly downloads | 0 |
| License | CC0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 10.* \|\| >= 12 |
| Dependencies | 14 |
| Unpacked size | 53.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | NYC Planning Labs |
| Maintainers | mattayo, allthesignals, godfreyyeung, rtblair, andycochran, julialucy1 |
| Keywords | ember-addon |

## Links

- npm: https://www.npmjs.com/package/labs-ui
- npm.io page: https://npm.io/package/labs-ui

## Dependencies (14)

- [ember-cli-sass](https://npm.io/package/ember-cli-sass.md) ^11.0.1
- [ember-tooltips](https://npm.io/package/ember-tooltips.md) ^3.1.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^7.18.0
- [ember-flatpickr](https://npm.io/package/ember-flatpickr.md) ^3.0.1
- [foundation-sites](https://npm.io/package/foundation-sites.md) ^6.6.1
- [ember-cli-htmlbars](https://npm.io/package/ember-cli-htmlbars.md) ^4.2.3
- [ember-power-select](https://npm.io/package/ember-power-select.md) 4.0.0
- [ember-cli-what-input](https://npm.io/package/ember-cli-what-input.md) ^1.0.0
- [ember-cli-autoprefixer](https://npm.io/package/ember-cli-autoprefixer.md) ^1.0.0
- [nyc-planning-style-guide](https://npm.io/package/nyc-planning-style-guide.md) ^1.0.5
- [@fortawesome/ember-fontawesome](https://npm.io/package/@fortawesome/ember-fontawesome.md) ^0.2.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) 5.12.0
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) ^5.2.0
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^5.1.0

## Recent versions

- 1.2.0 (latest) — 2023-01-04
- 0.0.27 — 2023-01-03
- 1.1.0 — 2020-09-15
- 1.0.2 — 2020-07-30
- 1.0.1 — 2020-04-01
- 1.0.0 — 2020-03-31
- 0.0.26 — 2019-08-05
- 0.0.25 — 2019-03-19
- 0.0.24 — 2019-02-08
- 0.0.23 — 2019-02-08
- 0.0.22 — 2019-02-07
- 0.0.21 — 2019-02-06
- 0.0.20 — 2019-02-05
- 0.0.19 — 2019-02-05
- 0.0.18 — 2019-01-30
- … 17 more at https://npm.io/package/labs-ui/versions

## README

# Labs UI

## NYC Planning Labs Ember.js Components

Labs UI is an Ember.js addon containing common components and design patterns used across [NYC Planning Labs](https://planninglabs.nyc/) digital products, incorporating styles from our [Digital Style Guide](https://nyc-planning-style-guide.netlify.com/).

### Compatibility

* Ember.js v3.12 or above
* Ember CLI v2.13 or above
* Node.js v10 or above

---

### Component documentation

https://ui.planninglabs.nyc/

---

### Installation


##### A) Requirements:

Install Ember Truth Helpers.
```
ember install ember-truth-helpers
```


##### B) Install Labs UI:

```
ember install labs-ui
```


##### C) Configure build options:

Add `sassOptions` to `ember-cli-build.js` to define which directories Sass should look in when trying to import files.

Enable `autoprefixer` to add vendor prefixes in the compiled CSS.

```
let app = new EmberApp(defaults, {
  sassOptions: {
    includePaths: [
      'node_modules/foundation-sites/scss',
      'node_modules/nyc-planning-style-guide/dist/assets/scss',
    ],
    sourceMapEmbed: true,
  },
  autoprefixer: {
    enabled: true,
    cascade: true,
    sourcemap: true,
  },
});
```


##### C) Edit `app.scss`:

Import the required files and include mixins in the right order so consuming app's `app.scss` looks something like this:
```
// Foundation utilities
@import 'util/util';

// Labs UI variables
@import 'nyc-planning-variables';

// Foundation mixins
@import 'foundation';

// Foundation components (include all or some)
@include foundation-everything;

// NYC Planning Style Guide modules (import all or some)
@import 'modules/nyc-planning-all-modules';

// Labs UI modules (import all or some)
@import 'labs-ui/all-modules';

// Ember Power Select (if needed)
@import "ember-power-select";

// Custom app modules and styles
@import 'layouts/_my-custom-app-module';
.peanut-butter {
  color: $orange-muted;
}
```


##### D) Add Font Awesome and its icon sets:

```
ember install @fortawesome/ember-fontawesome
```


##### E) Add Font Awesome icons to your ENV:
```
fontawesome: {
  icons: {
    'free-brands-svg-icons': 'all',
    'free-regular-svg-icons': 'all',
    'free-solid-svg-icons': 'all',
  },
},
```

---

# Contributing

### Installation

* `git clone <repository-url>`
* `cd labs-ui`
* `yarn`

### Linting

* `npm run lint:hbs`
* `npm run lint:js`
* `npm run lint:js -- --fix`

### Running tests

* `ember test` – Runs the test suite on the current Ember version
* `ember test --server` – Runs the test suite in "watch mode"
* `yarn test` – Runs `ember try:each` to test your addon against multiple Ember versions

### Running the dummy application

* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200)

For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

### Deploying the docs (dummy application)

* The `master` branch is automatically deployed via Netlify. See the docs at [ui.planninglabs.nyc](https://ui.planninglabs.nyc/).

---
_Source: https://npm.io/package/labs-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._