# @astrouxds/rux-status
> Astro Web Component for status indicator
Latest version **5.3.0** (published 2021-10-21) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @astrouxds/rux-status
pnpm add @astrouxds/rux-status
yarn add @astrouxds/rux-status
bun add @astrouxds/rux-status
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 5.3.0 |
| Published | 2021-10-21 |
| First published | 2018-05-22 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rocket Communications |
| Maintainers | jacob-rocket, dmcalester, joel_perez, rocketmark, sasha-rocket |
## Links
- npm: https://www.npmjs.com/package/@astrouxds/rux-status
- Repository: https://github.com/RocketCommunicationsInc/astro-components/src/master
- Homepage: https://www.astrouxds.com
- Issues: https://github.com/RocketCommunicationsInc/astro-components/issues
- npm.io page: https://npm.io/package/@astrouxds/rux-status
## Dependencies (2)
- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.2.10
## Recent versions
- 5.3.0 (latest) — 2021-10-21
- 4.0.0-3 (next) — 2019-05-21
- 4.0.4 — 2021-06-28
- 4.0.3 — 2020-08-18
- 4.0.2 — 2020-05-12
- 4.0.1 — 2020-04-16
- 4.0.0 — 2019-08-06
- 4.0.0-2 — 2019-05-21
- 4.0.0-1 — 2019-05-21
- 4.0.0-0 — 2019-05-21
- 3.1.1 — 2019-01-24
- 3.1.0 — 2019-01-24
- 3.0.0 — 2018-11-01
- 2.0.2 — 2018-10-29
- 2.0.1 — 2018-10-25
- … 4 more at https://npm.io/package/@astrouxds/rux-status/versions
## README
# Status
The Status Symbol combines color and shape to create a standard and consistent way to indicate the status of a device or feature.
## Guidelines
- [Astro UXDS: Status Symbols](http://www.astrouxds.com/ui-components/status-symbol)
## Web Components Usage
### 1. Installation
#### Install the Astro UXDS Status package via Command Line (Preferred Method)
```sh
npm i --save @astrouxds/rux-status
```
You may use Yarn, NPM, or your Node package manager of choice. The `--save` flag adds this component as a dependency in your `package.json` file.
#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project.
Via CLI:
```sh
git clone https://github.com/RocketCommunicationsInc/astro-components.git
```
Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketCommunicationsInc/astro-components/archive/master.zip)
### 2. Import the Astro Status Web Component
This example assumes you're using the NPM package in `node_modules`. Otherwise, import the component using the path to the Astro Components directory in your project.
```javascript
import { RuxStatus } from '@astrouxds/rux-status/rux-status.js'
```
### 3. Render the Astro Status Web Component
Pass properties as attributes of the Astro Status custom element:
```xml
```
### Properties
| Property | Type | Default | Required | Description |
| -------- | ------ | ------- | -------- | --------------------------------------------------------------------------------------------------------- |
| `status` | String | `''` | Yes | Sets the status symbol, valid options are `critical`, `serious`, `caution`, `normal`, `standby` and `off` |
---
## Basic HTML Usage
### 1. Include the Astro UXDS CSS file
Latest release is available in the [static css directory](https://github.com/RocketCommunicationsInc/astro-components/tree/master/static/css).
```xml
```
### 2. Markup the component using HTML and the Astro CSS classes
Astro CSS classes follow the [BEM-style](http://getbem.com/introduction/) naming convention. Apply attribues as [BEM-style](http://getbem.com/introduction/) class suffixes after `rux-status--`.
```xml
```
### Attributes
| Attribute | Type | Default | Required | Description |
| -------------- | ----- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `rux-status--` | Class | - | Yes | Sets the status symbol, valid options are `rux-status--critical`, `rux-status--serious`, `rux-status--caution`, `rux-status--normal`, `rux-status--standby` and `rux-status--off` |
## Revision History
##### **4.0**
- Replaced SVG status elements with PNG sprite for improved performance
- Moved Advanced Status to its own component, Astro UXDS Monitoring Icon (see [Astro 4 migration note](#astro-4-migration) below)
- Removed `satcom_` prefix from HTML/CSS versions
- Removed `::after` psuedo class in HTML/CSS version in favor of simpler background image
- Removed undocumented small status variant
- Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.
##### **3.0**
- Removed Master Off Button Style
- Replaced various properties with css custom properties to support
- Removed `.satcom` class definition
- Removed `narrow`/`short` definitions
##### **1.4**
- Added `rux_` prefixes and BEM-compatible classes to all `satcom_`-prefixed elements. NOTE: `satcom_` will be removed in a future version
- Disabled user selection of text on all buttons
- Removed redundant background hover from `disabled` state by using `:not()` on the `:hover` state
- Removed redundant background hover from `master off` by using `:not()` on the `:hover` state // deprecate after 1.4
- Fixed Firefox alignment issue where text was misaligned vertically
- Renamed `half-height` to `short` and `half-width` to `narrow` (Note: `rux_` only, `satcom_` retains old syntax)
- Removed `user-select` and placed it in astro.css to apply to all input types
- Embedded master off icon and removed the additional states required to handle icons and gradient backgrounds
## Important Astro 4 Migration Note:
Prior to Astro 4, the Astro UXDS Status Component was responsible for both the [small status indicators](https://astrouxds.com/ui-components/status-symbol) and the more complicated [monitoring icon](https://astrouxds.com/ui-components/icons-and-symbols). Astro 4 separates these two use cases into distinct components. The Astro UXDS Status Component is solely responsible for the status indicators. This component, [Astro UXDS Monitoring Icon Component](../rux-monitoring-icon/), replaces the previous "Advanced Status" features of Astro UXDS Status.
---
_Source: https://npm.io/package/@astrouxds/rux-status · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._