From 7097438b00baacbc9bc2a93b9239b6bd193423c9 Mon Sep 17 00:00:00 2001 From: amalyah <62966980+amalyah@users.noreply.github.com> Date: Thu, 27 May 2021 14:15:08 -0400 Subject: [PATCH 1/4] Updated Forms and Validation link text and URL. --- src/documentation/input-fields-README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/documentation/input-fields-README.md b/src/documentation/input-fields-README.md index 5ca1fd95..c9d56a55 100644 --- a/src/documentation/input-fields-README.md +++ b/src/documentation/input-fields-README.md @@ -5,7 +5,7 @@ Input Fields allow users to enter text or numeric data. ## Guidelines - [Astro UXDS: Input Fields](https://www.astrouxds.com/ui-components/input-field) -- [Astro UXDS: Form and Input Validation](https://www.astrouxds.com/ui-components/validation) +- [Astro UXDS: Forms and Validation](https://www.astrouxds.com/patterns/forms-and-validation/) ## Basic HTML Usage From 97bd7ad49398609f15c793f77546c420c37244b5 Mon Sep 17 00:00:00 2001 From: Aleksandr Antonov Date: Wed, 2 Jun 2021 13:12:27 -0600 Subject: [PATCH 2/4] copy icons svg on prepublish --- bin/astro-icon-export/index.js | 4 +--- gulpfile.js | 6 ++++++ src/components/rux-icon/package.json | 5 +++-- src/components/rux-icon/rux-icon.js | 6 +----- 4 files changed, 11 insertions(+), 10 deletions(-) diff --git a/bin/astro-icon-export/index.js b/bin/astro-icon-export/index.js index 810fbf76..56b95e3e 100644 --- a/bin/astro-icon-export/index.js +++ b/bin/astro-icon-export/index.js @@ -142,9 +142,7 @@ class AstroIconExport extends Core { this.svgo_inst.optimize(data).then((res) => { res.data = this.cleanUpIds(res.data); - const fileName = prompt("Please enter desired file name: ", 'astro.svg'); - - fs.writeFile(this.iconsPath + fileName, res.data, (err) => { + fs.writeFile(`${this.iconsPath}astro.svg`, res.data, (err) => { if (err) throw err; this.notify('warning', 'Modify svg viewBox to the size of exported icons'); this.notify('success', "The svg file successfully generated!"); diff --git a/gulpfile.js b/gulpfile.js index 1e7f4aff..569fa79f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -18,6 +18,12 @@ gulp.task('rux-core-static', () => { .pipe(gulp.dest(packageDist + '/static')); }); +gulp.task('rux-icon-svg', () => { + const folders = ['fonts', 'icons']; + return gulp.src('./static/icons/astro.svg', {base: './static/'}) + .pipe(gulp.dest('./src/components/rux-icon')); +}); + gulp.task('rux-core-scss', () => { return gulp.src('./src/scss/**/*.scss', {base: './src/scss'}) .pipe(gulp.dest(packageDist + '/scss')); diff --git a/src/components/rux-icon/package.json b/src/components/rux-icon/package.json index 586df65f..0ab04278 100755 --- a/src/components/rux-icon/package.json +++ b/src/components/rux-icon/package.json @@ -22,11 +22,12 @@ "module": "rux-icon.js", "name": "@astrouxds/rux-icon", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "prepublish": "gulp rux-icon-svg" }, "publishConfig": { "access": "public" }, - "version": "5.0.0", + "version": "5.0.1", "gitHead": "4bba0d8002ae689eae718e188328d4e564aa94b0" } diff --git a/src/components/rux-icon/rux-icon.js b/src/components/rux-icon/rux-icon.js index 9ce1f3bd..cc4a14cb 100644 --- a/src/components/rux-icon/rux-icon.js +++ b/src/components/rux-icon/rux-icon.js @@ -36,7 +36,7 @@ export class RuxIcon extends LitElement { constructor() { super(); - this.library = '/icons/astro.svg'; + this.library = './icons/astro.svg'; /* TODO: a non-presumptive way to assign a better default label if the user doesn’t provide one */ this.label = 'icon'; this.viewBox = '0 0 24 24'; @@ -72,10 +72,6 @@ export class RuxIcon extends LitElement { fill: var(--iconColor); } - .rux-button--outline rux-icon { - - } - :host([size='extra-small']) { height: 1rem; width: 1rem; From 9cb1f2f3e3b5530be479aad31736662a464bd176 Mon Sep 17 00:00:00 2001 From: Joel Perez Date: Wed, 9 Jun 2021 14:32:42 -0600 Subject: [PATCH 3/4] separated monitoring progress readme and applied to story --- .../MonitoringProgressReadme.md | 146 ++++++++++++++++++ src/components/rux-monitoring-icon/README.md | 104 ------------- stories/rux-icons-and-symbols.stories.js | 3 +- 3 files changed, 148 insertions(+), 105 deletions(-) create mode 100644 src/components/rux-monitoring-icon/MonitoringProgressReadme.md diff --git a/src/components/rux-monitoring-icon/MonitoringProgressReadme.md b/src/components/rux-monitoring-icon/MonitoringProgressReadme.md new file mode 100644 index 00000000..ea4dd436 --- /dev/null +++ b/src/components/rux-monitoring-icon/MonitoringProgressReadme.md @@ -0,0 +1,146 @@ +# Monitoring Progress Icon + +The Monitoring Progress Icon is a unique instance of the Monitoring Icon for displaying live progress of a monitored item. The Monitoring Progress Icon uses a "donut"-style progress meter rather than a specific icon. + +## Guidelines + +- [Astro UXDS: Icons and Symbols](https://astrouxds.com/ui-components/icons-and-symbols) + +## Web Components Usage + +### 1. Installation + +#### Install the Astro UXDS Monitoring Icon package via Command Line (Preferred Method) + +```sh +npm i --save @astrouxds/rux--monitoring-icon +``` + +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/src/master/) source to your project. + +Via CLI: + +```sh +git clone https://github.com/RocketCommunicationsInc/astro-components.git +``` + +Or, [download Astro UXDS Components as a .zip](https://github.com/RocketCommunicationsInc/astro-components/archive/master.zip) + +### 2. Import the Astro Monitoring Progress Icon 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. Status is assigned via a range object. + +```javascript +import { RuxMonitoringProgressIcon } from "@astrouxds/rux-monitoring-icon/rux-monitoring-progress-icon.js"; +``` + +### 3. Render the Astro Monitoring Progress Icon Web Component + +Pass properties as attributes of the Astro Monitoring Progress Icon custom element: + +```xml + + +``` + +### Properties (for the Monitoring Progress Icon) + +| Property | Type | Default | Required | Description | +| --------------- | ------ | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `label` | String | `'icon'` | Yes | Displays a label below the icon | +| `progress` | Number | `0` | Yes | Displays this value as a percentage in the center of the donut graph, and styles a proportional segment of the graph. Progress can be positive or negative (the later useful for countdowns). The progress value must exist within the thresholds specified in the `range` property below. | +| `range` | Array | (see default array below) | No | Items in this Array define thresholds for changing the status style of the progress icon. For each item in the Array, the icon will be styled with the given status while the `progress` value is less than the Array item’s `threshold` and equal to or greater than the next largest item‘s `threshold`. Both `progress` and the Array items’ `threshold` values can be positive or negative, so long as they are consistent and the `threshold` values span no more than 100 numbers. The component assumes the Array's first status threshold begins at `0`. | +| `sublabel` | String | `''` | No | Displays a smaller label underneath the icon label | +| `notifications` | Number | `0` | No | If provided and greater than `0`, displays an outlined number badge at the bottom right of the icon. Numbers above `9999` are abbreviated to `'10K'` or `'100K'` for numbers in the thousands, `'1.5M'` for millions, and `'1.5B'` for billions. The badge uses `'∞'` for one trillion or higher. | + +### Sample `range` Array + +A sample of a `range` Array. This sample is also the default value for `range`. Note: `range` Arrays can have as few as one threshold for items that may need progress observation, but won't have an associated status. + +```json +[ + { + // for progress values from 0 to 16: + "threshold": 17, + "status": "off" + }, + { + // for progress values from 17 to 32: + "threshold": 33, + "status": "standby" + }, + { + // for progress values from 33 to 48: + "threshold": 49, + "status": "normal" + }, + { + // for progress values from 49 to 64: + "threshold": 65, + "status": "caution" + }, + { + // for progress values from 64 to 80: + "threshold": 81, + "status": "serious" + }, + { + // for progress values from 81 to 99: + "threshold": 100, + "status": "critical" + } +] +``` + +### `range` Array Item Properties + +| Property | Type | Default | Required | Description | +| ----------- | ------ | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `threshold` | Number | — | Yes | This value is the upper limit, exclusive, of the range for which the `status` below will style the progress icon. | +| `status` | String | `normal` | Yes | Styles the icon according to the Astro Status colors. Valid options are the Astro statuses `critical`, `serious`, `caution`, `normal`, `standby`, and `off` | + +## Revision History + +##### **4.1** + +- Added `library` property to the Monitoring Icon component, enabling the use of custom SVG icon libraries. + +##### **4.0** + +- Moved Advanced Status to its own component, Astro UXDS Monitoring Icon (see [Astro 4 migration note](#astro-4-migration) below) +- Added the Monitoring Progress Icon 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. + + + +## 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 seperates these two use cases into distinct components. The [Astro UXDS Status Component](../rux-status/) is solely responsible for the status indicators. This component, Astro UXDS Monitoring Icon, replaces the previous "Advanced Status" features of Astro UXDS Status. + +To upgrade to Astro 4, any instance of `` used as an "Advanced Status" or "Monitoring Icon" should replace `` with ``. For example: + +```xml + + +``` + +Would become this + +```xml + + +``` diff --git a/src/components/rux-monitoring-icon/README.md b/src/components/rux-monitoring-icon/README.md index 4cad3922..178ea862 100644 --- a/src/components/rux-monitoring-icon/README.md +++ b/src/components/rux-monitoring-icon/README.md @@ -61,110 +61,6 @@ Pass properties as attributes of the Astro Monitoring Icon custom element: | `sublabel` | String | `''` | No | Displays a smaller label underneath the icon label | | `notifications` | Number | `0` | No | If provided and greater than `0`, displays an outlined number badge at the bottom right of the icon. Numbers above `9999` are abbreviated to `'10K'` or `'100K'` for numbers in the thousands, `'1.5M'` for millions, and `'1.5B'` for billions. The badge uses `'∞'` for one trillion or higher. | -# Monitoring Progress Icon - -The Monitoring Progress Icon is a unique instance of the Monitoring Icon for displaying live progress of a monitored item. The Monitoring Progress Icon uses a "donut"-style progress meter rather than a specific icon. - -## Guidelines - -- [Astro UXDS: Icons and Symbols](https://astrouxds.com/ui-components/icons-and-symbols) - -## Web Components Usage - -### 1. Installation - -#### Install the Astro UXDS Monitoring Icon package via Command Line (Preferred Method) - -```sh -npm i --save @astrouxds/rux--monitoring-icon -``` - -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/src/master/) source to your project. - -Via CLI: - -```sh -git clone https://github.com/RocketCommunicationsInc/astro-components.git -``` - -Or, [download Astro UXDS Components as a .zip](https://github.com/RocketCommunicationsInc/astro-components/archive/master.zip) - -### 2. Import the Astro Monitoring Progress Icon 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. Status is assigned via a range object. - -```javascript -import { RuxMonitoringProgressIcon } from '@astrouxds/rux-monitoring-icon/rux-monitoring-progress-icon.js'; -``` - -### 3. Render the Astro Monitoring Progress Icon Web Component - -Pass properties as attributes of the Astro Monitoring Progress Icon custom element: - -```xml - - -``` - -### Properties (for the Monitoring Progress Icon) - -| Property | Type | Default | Required | Description | -| --------------- | ------ | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `label` | String | `'icon'` | Yes | Displays a label below the icon | -| `progress` | Number | `0` | Yes | Displays this value as a percentage in the center of the donut graph, and styles a proportional segment of the graph. Progress can be positive or negative (the later useful for countdowns). The progress value must exist within the thresholds specified in the `range` property below. | -| `range` | Array | (see default array below) | No | Items in this Array define thresholds for changing the status style of the progress icon. For each item in the Array, the icon will be styled with the given status while the `progress` value is less than the Array item’s `threshold` and equal to or greater than the next largest item‘s `threshold`. Both `progress` and the Array items’ `threshold` values can be positive or negative, so long as they are consistent and the `threshold` values span no more than 100 numbers. The component assumes the Array's first status threshold begins at `0`. | -| `sublabel` | String | `''` | No | Displays a smaller label underneath the icon label | -| `notifications` | Number | `0` | No | If provided and greater than `0`, displays an outlined number badge at the bottom right of the icon. Numbers above `9999` are abbreviated to `'10K'` or `'100K'` for numbers in the thousands, `'1.5M'` for millions, and `'1.5B'` for billions. The badge uses `'∞'` for one trillion or higher. | - -### Sample `range` Array - -A sample of a `range` Array. This sample is also the default value for `range`. Note: `range` Arrays can have as few as one threshold for items that may need progress observation, but won't have an associated status. - -```json -[ - { - // for progress values from 0 to 16: - "threshold": 17, - "status": "off" - }, - { - // for progress values from 17 to 32: - "threshold": 33, - "status": "standby" - }, - { - // for progress values from 33 to 48: - "threshold": 49, - "status": "normal" - }, - { - // for progress values from 49 to 64: - "threshold": 65, - "status": "caution" - }, - { - // for progress values from 64 to 80: - "threshold": 81, - "status": "serious" - }, - { - // for progress values from 81 to 99: - "threshold": 100, - "status": "critical" - } -] -``` - -### `range` Array Item Properties - -| Property | Type | Default | Required | Description | -| ----------- | ------ | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `threshold` | Number | — | Yes | This value is the upper limit, exclusive, of the range for which the `status` below will style the progress icon. | -| `status` | String | `normal` | Yes | Styles the icon according to the Astro Status colors. Valid options are the Astro statuses `critical`, `serious`, `caution`, `normal`, `standby`, and `off` | ## Revision History diff --git a/stories/rux-icons-and-symbols.stories.js b/stories/rux-icons-and-symbols.stories.js index 86121d20..3f45c4de 100644 --- a/stories/rux-icons-and-symbols.stories.js +++ b/stories/rux-icons-and-symbols.stories.js @@ -6,6 +6,7 @@ import { RuxMonitoringIcon } from '../src/components/rux-monitoring-icon/rux-mon import { RuxMonitoringProgressIcon } from '../src/components/rux-monitoring-icon/rux-monitoring-progress-icon.js'; import Readme from '../src/components/rux-icon/README.md'; import ReadmeMonitoring from '../src/components/rux-monitoring-icon/README.md'; +import ReadmeMonitoringProgress from '../src/components/rux-monitoring-icon/MonitoringProgressReadme.md'; import ruxIconsJson from '../static/json/rux-icons.json'; @@ -274,7 +275,7 @@ ProgressIcon.story = { html, }, readme: { - sidebar: Readme, + sidebar: ReadmeMonitoringProgress, }, }, }; From 14144edb40c7e357426e8b56c9eb49cb29fa5ddd Mon Sep 17 00:00:00 2001 From: NicDominguez Date: Tue, 15 Jun 2021 08:27:25 -0700 Subject: [PATCH 4/4] fix: updates component library url on github --- src/components/__rux-template/README.md | 4 +- src/components/rux-accordion/README.md | 4 +- src/components/rux-button/README.md | 21 +++---- .../rux-classification-marking/README.md | 42 ++++++++----- src/components/rux-clock/README.md | 21 +++---- .../rux-global-status-bar/README.md | 4 +- src/components/rux-icon/README.md | 7 ++- src/components/rux-log/README.md | 26 ++++---- src/components/rux-modal/README.md | 20 ++++--- .../MonitoringProgressReadme.md | 2 +- src/components/rux-monitoring-icon/README.md | 23 ++++---- src/components/rux-notification/README.md | 4 +- src/components/rux-pop-up-menu/README.md | 16 ++--- src/components/rux-progress/README.md | 5 +- src/components/rux-push-button/README.md | 4 +- src/components/rux-segmented-button/README.md | 59 +++++++++++-------- src/components/rux-slider/README.md | 8 ++- src/components/rux-status/README.md | 5 +- src/components/rux-tabs/README.md | 4 +- src/components/rux-tree/README.md | 28 ++++----- 20 files changed, 169 insertions(+), 138 deletions(-) diff --git a/src/components/__rux-template/README.md b/src/components/__rux-template/README.md index 3002a6ff..16a92f21 100644 --- a/src/components/__rux-template/README.md +++ b/src/components/__rux-template/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-template 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download Astro UXDS Components as a .zip](https://github.com/RocketCommunic This example assumes you're using the NPM package in `node_modules`. Otherwise, import the component using the path to the Astro UXDS Components directory in your project. ```javascript -import { RuxTemplate } from '@astrouxds/rux-template/rux-template.js'; +import { RuxTemplate } from "@astrouxds/rux-template/rux-template.js"; ``` ### 3. Render the Astro Template Web Component diff --git a/src/components/rux-accordion/README.md b/src/components/rux-accordion/README.md index f81a6ed9..4a2ea0ca 100644 --- a/src/components/rux-accordion/README.md +++ b/src/components/rux-accordion/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-accordion 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxAccordion } from '@astrouxds/rux-accordion/rux-accordion.js'; +import { RuxAccordion } from "@astrouxds/rux-accordion/rux-accordion.js"; ``` ### 3. Render the Astro Accordion Web Component diff --git a/src/components/rux-button/README.md b/src/components/rux-button/README.md index 183e4298..2923d385 100644 --- a/src/components/rux-button/README.md +++ b/src/components/rux-button/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-button 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxButton } from '@astrouxds/rux-button/rux-button.js'; +import { RuxButton } from "@astrouxds/rux-button/rux-button.js"; ``` ### 3. Render the Astro Button Web Component @@ -54,6 +54,7 @@ The component auto-imports the default Astro Icon Web Component for icons, if yo Button with icon using astro UXDS icon web component ``` + Also, you can use [Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots) to define icons within buttons. This method is best if you need to override the default icon library SVG file: ```xml @@ -62,19 +63,18 @@ Also, you can use [Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Compo Slotted icon button ``` -In this situation, you do not need to specify a size for the icon component -- the button's size attribute will define the appropriate size of the icon. - +In this situation, you do not need to specify a size for the icon component -- the button's size attribute will define the appropriate size of the icon. ### Properties -| Property | Type | Default | Required | Description | -| ---------- | ------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | Boolean | `false` | No | Disables the button via HTML `disabled` attribute. Icon takes on a distinct visual state. Cursor uses the `not-allowed` system replacement and all keyboard and mouse events are ignored. | -| `outline` | Boolean | `false` | No | Displays an outlined visual treatment suitable for secondary actions, such as a non-preferred alternative to an action identified by a standard button. For example, use an outline button for the less preferred option in Ok/Cancel button pairings. | -| `iconOnly` | Boolean | `false` | No | Visually hides all text on the button, suitable for use cases where space is at a premium and the button intent is unambiguous, like a Play/Pause button. Requires the `icon` attribute to be set as well. | +| Property | Type | Default | Required | Description | +| ---------- | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `disabled` | Boolean | `false` | No | Disables the button via HTML `disabled` attribute. Icon takes on a distinct visual state. Cursor uses the `not-allowed` system replacement and all keyboard and mouse events are ignored. | +| `outline` | Boolean | `false` | No | Displays an outlined visual treatment suitable for secondary actions, such as a non-preferred alternative to an action identified by a standard button. For example, use an outline button for the less preferred option in Ok/Cancel button pairings. | +| `iconOnly` | Boolean | `false` | No | Visually hides all text on the button, suitable for use cases where space is at a premium and the button intent is unambiguous, like a Play/Pause button. Requires the `icon` attribute to be set as well. | | `icon` | String | `''` | No | Displays an Astro icon matching this string to the left of the button text. For a [full list of available icons, see the Icons section in Astro UXDS Guidelines](https://astrouxds.com/ui-components/icons-and-symbols). Required when the `iconOnly` attribute is `true`. Note that you can also use the Slot to add an icon. | -| `size` | String | `''` | No | Displays the button as a `'small'` or `'large'` variant. | +| `size` | String | `''` | No | Displays the button as a `'small'` or `'large'` variant. | --- @@ -139,6 +139,7 @@ For more information about AstroUXDS usage outside of a Web Component environmen ## Revision History ##### **4.1** + - Add styles for and example of using slots for Icon child component ##### **4.0** diff --git a/src/components/rux-classification-marking/README.md b/src/components/rux-classification-marking/README.md index 60e2cceb..11d51cc8 100644 --- a/src/components/rux-classification-marking/README.md +++ b/src/components/rux-classification-marking/README.md @@ -4,12 +4,10 @@ Classification and control markings are required for digital products created fo For the most up-to-date policies, see the [ISOO Training Aids](https://www.archives.gov/isoo/training/training-aids) for classification marking policies and the [CUI Registry](https://www.archives.gov/cui) for control marking policies. In addition to these requirements, each government agency may have their own rules to use for classification and control markings. - ## Guidelines - [Astro UXDS: Classification Markings](https://www.astrouxds.com/components/readme/) - ## Web Components Usage ### 1. Installation @@ -22,7 +20,7 @@ npm i --save @astrouxds/rux-classification-marking 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -37,7 +35,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxClassification } from '@astrouxds/rux-classification-marking/rux-classification-marking.js'; +import { RuxClassification } from "@astrouxds/rux-classification-marking/rux-classification-marking.js"; ``` ### 3. Render the Classification Markings Component @@ -45,32 +43,44 @@ import { RuxClassification } from '@astrouxds/rux-classification-marking/rux-cla Pass properties as attributes of the Astro Classification custom element: ```javascript - + ``` -| Property | Type | Default | Required | Description | -|---------------- |-------- |---------- |---------- |------------- | -| Classification | String | `'unclassified'` | Yes | This property | -| Tag | Boolean | `false` | No | This property defines the marking as a`tag` rather than the default banner | -| Label | String | `null` | No | This property allows additional text labels to be added to the a marking | - +| Property | Type | Default | Required | Description | +| -------------- | ------- | ---------------- | -------- | -------------------------------------------------------------------------- | +| Classification | String | `'unclassified'` | Yes | This property | +| Tag | Boolean | `false` | No | This property defines the marking as a`tag` rather than the default banner | +| Label | String | `null` | No | This property allows additional text labels to be added to the a marking | #### Marking Type Declaration - By default classification markings rendered in banner format. Applying the ```tag``` property attribute sets the marking type. The `tag` attribute property defines the classification marking as a tag. + +By default classification markings rendered in banner format. Applying the `tag` property attribute sets the marking type. The `tag` attribute property defines the classification marking as a tag. ##### Banner Marking Type + ```javascript - + ``` ##### Tag Marking Type + ```javascript - + ``` #### Custom Marking Labels + Applying the `label` property attribute to the classification custom element adds `label` text value to the marking in addition to its classification text. ```javascript - -``` \ No newline at end of file + +``` diff --git a/src/components/rux-clock/README.md b/src/components/rux-clock/README.md index 1dab5394..695b23a4 100644 --- a/src/components/rux-clock/README.md +++ b/src/components/rux-clock/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-clock 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxClock } from '@astrouxds/rux-clock/rux-clock.js'; +import { RuxClock } from "@astrouxds/rux-clock/rux-clock.js"; ``` ### 3. Render the Astro Clock Web Component @@ -52,18 +52,19 @@ Define AOS and LOS with valid [Unix Time Stamp](http://pubs.opengroup.org/online ### Properties -| Property | Type | Default | Required | Description | -| -------------- | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `aos` | String | — | No | When supplied with a valid [date string or value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#syntax) displays a timestamp labeled "AOS" next to the standard clock. | -| `los` | String | — | No | When supplied with a valid [date string or value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#syntax), displays a timestamp labeled "LOS" next to the standard clock. | -| `timezone` | String | `'UTC'` | No | Accepts the [IANA timezone string format](https://www.iana.org/time-zones) such as `'America/Los_Angeles'` or any single-character designation for a [military timezones](https://en.wikipedia.org/wiki/List_of_military_time_zones) (`'A'` through `'Z'`, excluding `'J'`), both case-insensitive. If no value for timezone is provided, the clock will use `'UTC'`. See [`toLocaleString()` on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#Parameters) for more details. | -| `hideTimezone` | Boolean | `false` | No | Hides the timezone in the main 24-hour clock. Timezone does not display on AOS/LOS. | -| `hideDate` | Boolean | `false` | No | Hides the day of the year. | -| `small` | Boolean | `false` | No | Applies a smaller clock style. Previously `compact` | +| Property | Type | Default | Required | Description | +| -------------- | ------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `aos` | String | — | No | When supplied with a valid [date string or value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#syntax) displays a timestamp labeled "AOS" next to the standard clock. | +| `los` | String | — | No | When supplied with a valid [date string or value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#syntax), displays a timestamp labeled "LOS" next to the standard clock. | +| `timezone` | String | `'UTC'` | No | Accepts the [IANA timezone string format](https://www.iana.org/time-zones) such as `'America/Los_Angeles'` or any single-character designation for a [military timezones](https://en.wikipedia.org/wiki/List_of_military_time_zones) (`'A'` through `'Z'`, excluding `'J'`), both case-insensitive. If no value for timezone is provided, the clock will use `'UTC'`. See [`toLocaleString()` on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString#Parameters) for more details. | +| `hideTimezone` | Boolean | `false` | No | Hides the timezone in the main 24-hour clock. Timezone does not display on AOS/LOS. | +| `hideDate` | Boolean | `false` | No | Hides the day of the year. | +| `small` | Boolean | `false` | No | Applies a smaller clock style. Previously `compact` | ## Revision History ##### **4.1** + - Added moment.js for date/time calculations, fixing Day of Year count error at EOD - Added the 24 military timezone designations diff --git a/src/components/rux-global-status-bar/README.md b/src/components/rux-global-status-bar/README.md index 24628b75..55af4dcb 100644 --- a/src/components/rux-global-status-bar/README.md +++ b/src/components/rux-global-status-bar/README.md @@ -18,7 +18,7 @@ npm i -save @astrouxds/rux-global-status-bar 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxGlobalStatusBar } from '@astrouxds/rux-global-status-bar/rux-global-status-bar.js'; +import { RuxGlobalStatusBar } from "@astrouxds/rux-global-status-bar/rux-global-status-bar.js"; ``` ### 3. Render the Astro Global Status Bar Web Component diff --git a/src/components/rux-icon/README.md b/src/components/rux-icon/README.md index eb0187da..7f668262 100644 --- a/src/components/rux-icon/README.md +++ b/src/components/rux-icon/README.md @@ -22,7 +22,7 @@ npm i --save @astrouxds/rux-icon 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 Component Library](https://github.com/RocketCommunicationsInc/astro-components/src/master/) source to your project. +#### **Alternatively**, download the [Astro Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -37,7 +37,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxIcon } from '@astrouxds/rux-icon/rux-icon.js'; +import { RuxIcon } from "@astrouxds/rux-icon/rux-icon.js"; ``` ### 3. Render the Astro Icon Web Component @@ -88,6 +88,7 @@ In the SVG icon library file: ## Important Astro 4 Migration Note: + Prior to Astro 4.0, the Astro UXDS Icon Component imported icons from a single SVG file where icons were identified by `id` under specific groups. In that method, icons were accessed via a namespaced value for the `icon` property, such as `"group-id:icon-id"`. ### Prior to Astro 4.0: @@ -109,4 +110,4 @@ In Astro 4.0, these groups have been flattened, and each icon is now imported di ```xml -``` \ No newline at end of file +``` diff --git a/src/components/rux-log/README.md b/src/components/rux-log/README.md index d63f16f0..be9e39b3 100644 --- a/src/components/rux-log/README.md +++ b/src/components/rux-log/README.md @@ -19,7 +19,7 @@ npm i --save @astrouxds/rux-log 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -34,7 +34,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxLog } from '@astrouxds/rux-log/rux-log.js'; +import { RuxLog } from "@astrouxds/rux-log/rux-log.js"; ``` ### 3. Render the Astro Log Web Component @@ -78,28 +78,28 @@ render() { [ { timestamp: new Date(1557503698781), // date from Unix Time Stamp number - status: 'off', - message: 'Antenna DGS 1 went offline.', + status: "off", + message: "Antenna DGS 1 went offline.", }, { - timestamp: new Date('2019-05-10T16:21:12.000Z'), // date from ISO 8601 string format - status: 'serious', - message: 'USA-177 experienced solar panel misalignment.', + timestamp: new Date("2019-05-10T16:21:12.000Z"), // date from ISO 8601 string format + status: "serious", + message: "USA-177 experienced solar panel misalignment.", }, { timestamp: new Date(1557503698781), - status: 'caution', - message: 'USA-168 suffered power degradation.', + status: "caution", + message: "USA-168 suffered power degradation.", }, { timestamp: new Date(1557503698781), - status: 'standby', - message: 'Antenna DGS 2 has weak signal.', + status: "standby", + message: "Antenna DGS 2 has weak signal.", }, { timestamp: new Date(1557503698781), - status: 'off', - message: 'Black FEP 121 is offline.', + status: "off", + message: "Black FEP 121 is offline.", }, ]; ``` diff --git a/src/components/rux-modal/README.md b/src/components/rux-modal/README.md index c3889353..59c23084 100644 --- a/src/components/rux-modal/README.md +++ b/src/components/rux-modal/README.md @@ -20,7 +20,7 @@ npm i --save @astrouxds/rux-modal 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -35,7 +35,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxModal } from '@astrouxds/rux-modal/rux-modal.js'; +import { RuxModal } from "@astrouxds/rux-modal/rux-modal.js"; ``` ### 3. Render the Astro Dialog Box Web Component @@ -60,22 +60,26 @@ Pass properties as attributes of the Astro Dialog Box custom element: ### Properties -| Property | Type | Default | Required | Description | -| ------------- | ------ | ----------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `message` | String | `''` | Yes | Displays a text for the message area of the dialog box. | -| `title` | String | `''` | No | Displays a title for the top of the dialog box. | -| `confirmText` | String | `''` | No | Displays a confirmation button with the given text. If both `confirmText` and `denyText` parameters are set, the confirm button will have a solid style and the deny button will have a secondary outline style. If neither `confirmText` or `denyText` parameters are set, a deny button labeled "Cancel" will be provided to the user to dismiss the dialog and emit the close event. | -| `denyText` | String | `''` | No | Displays a deny button with the given text. If both `confirmText` and `denyText` parameters are set, the confirm button will have a solid style and the deny button will have a secondary outline style. If neither `confirmText` or `denyText` parameters are set, a deny button labeled "Cancel" will be provided to the user to dismiss the dialog and emit the close event. | +| Property | Type | Default | Required | Description | +| ------------- | ------ | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `message` | String | `''` | Yes | Displays a text for the message area of the dialog box. | +| `title` | String | `''` | No | Displays a title for the top of the dialog box. | +| `confirmText` | String | `''` | No | Displays a confirmation button with the given text. If both `confirmText` and `denyText` parameters are set, the confirm button will have a solid style and the deny button will have a secondary outline style. If neither `confirmText` or `denyText` parameters are set, a deny button labeled "Cancel" will be provided to the user to dismiss the dialog and emit the close event. | +| `denyText` | String | `''` | No | Displays a deny button with the given text. If both `confirmText` and `denyText` parameters are set, the confirm button will have a solid style and the deny button will have a secondary outline style. If neither `confirmText` or `denyText` parameters are set, a deny button labeled "Cancel" will be provided to the user to dismiss the dialog and emit the close event. | ### Event Listener When closed, the Dialog Box Web Component will emit a message using the `'modalClosed'` event name and a detail message of `confirm` with a value of `true` (confirm) or `false` (deny) depending on whether the user clicks the confirm or deny button. ## Revision History + ##### **5.0** + - Added `--modalTitleColor` color variable for Modal Title Color - Removed CSS Fallback properties + ##### **4.1** + - Removed mention of Icon component ##### **4.0** diff --git a/src/components/rux-monitoring-icon/MonitoringProgressReadme.md b/src/components/rux-monitoring-icon/MonitoringProgressReadme.md index ea4dd436..01ac7fb3 100644 --- a/src/components/rux-monitoring-icon/MonitoringProgressReadme.md +++ b/src/components/rux-monitoring-icon/MonitoringProgressReadme.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux--monitoring-icon 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: diff --git a/src/components/rux-monitoring-icon/README.md b/src/components/rux-monitoring-icon/README.md index 178ea862..0697f0fb 100644 --- a/src/components/rux-monitoring-icon/README.md +++ b/src/components/rux-monitoring-icon/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux--monitoring-icon 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxMonitoringIcon } from '@astrouxds/rux-monitoring-icon/rux-monitoring-icon.js'; +import { RuxMonitoringIcon } from "@astrouxds/rux-monitoring-icon/rux-monitoring-icon.js"; ``` ### 3. Render the Astro Monitoring Icon Web Component @@ -52,19 +52,19 @@ Pass properties as attributes of the Astro Monitoring Icon custom element: ### Properties -| Property | Type | Default | Required | Description | -| --------------- | ------ | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `icon` | String | `''` | Yes | Displays an Astro icon matching this string. For a [full list of available icons, see the Icons section in Astro UXDS Guidelines](https://astrouxds.com/ui-components/icons-and-symbols) | -| `library` | String | `'/icons/astro.svg'` | No | Defines the root-relative path for a specific icon library SVG for this icon. An icon library SVG document has individual icon elements identified by an `id` property on the node (usually on a `` or ``). If a value for `library` is not provided, the icon component assumes the Astro library SVG exists at the default path, and will look for the icon by `id` there. | -| `label` | String | `'icon'` | Yes | Displays a label below the icon | -| `status` | String | `'normal'` | Yes | Styles the icon according to the Astro Status colors. Valid options are the Astro statuses `critical`, `serious`, `caution`, `normal`, `standby` and `off` | -| `sublabel` | String | `''` | No | Displays a smaller label underneath the icon label | -| `notifications` | Number | `0` | No | If provided and greater than `0`, displays an outlined number badge at the bottom right of the icon. Numbers above `9999` are abbreviated to `'10K'` or `'100K'` for numbers in the thousands, `'1.5M'` for millions, and `'1.5B'` for billions. The badge uses `'∞'` for one trillion or higher. | - +| Property | Type | Default | Required | Description | +| --------------- | ------ | -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `icon` | String | `''` | Yes | Displays an Astro icon matching this string. For a [full list of available icons, see the Icons section in Astro UXDS Guidelines](https://astrouxds.com/ui-components/icons-and-symbols) | +| `library` | String | `'/icons/astro.svg'` | No | Defines the root-relative path for a specific icon library SVG for this icon. An icon library SVG document has individual icon elements identified by an `id` property on the node (usually on a `` or ``). If a value for `library` is not provided, the icon component assumes the Astro library SVG exists at the default path, and will look for the icon by `id` there. | +| `label` | String | `'icon'` | Yes | Displays a label below the icon | +| `status` | String | `'normal'` | Yes | Styles the icon according to the Astro Status colors. Valid options are the Astro statuses `critical`, `serious`, `caution`, `normal`, `standby` and `off` | +| `sublabel` | String | `''` | No | Displays a smaller label underneath the icon label | +| `notifications` | Number | `0` | No | If provided and greater than `0`, displays an outlined number badge at the bottom right of the icon. Numbers above `9999` are abbreviated to `'10K'` or `'100K'` for numbers in the thousands, `'1.5M'` for millions, and `'1.5B'` for billions. The badge uses `'∞'` for one trillion or higher. | ## Revision History ##### **4.1** + - Added `library` property to the Monitoring Icon component, enabling the use of custom SVG icon libraries. ##### **4.0** @@ -76,6 +76,7 @@ Pass properties as attributes of the Astro Monitoring Icon custom element: ## 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 seperates these two use cases in to distinct components. The [Astro UXDS Status Component](../rux-status/) is solely responsible for the status indicators. This component, Astro UXDS Monitoring Icon, replaces the previous "Advanced Status" features of Astro UXDS Status. To upgrade to Astro 4 any instance of `` used as an "Advanced Status" or "Monitoring Icon" should replace `` with ``. For example: diff --git a/src/components/rux-notification/README.md b/src/components/rux-notification/README.md index 8728e8eb..b504ba4e 100644 --- a/src/components/rux-notification/README.md +++ b/src/components/rux-notification/README.md @@ -24,7 +24,7 @@ npm i --save @astrouxds/rux-notification 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -39,7 +39,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxNotification } from '@astrouxds/rux-notification/rux-notification.js'; +import { RuxNotification } from "@astrouxds/rux-notification/rux-notification.js"; ``` ### 3. Render the Astro Notification Banner Web Component diff --git a/src/components/rux-pop-up-menu/README.md b/src/components/rux-pop-up-menu/README.md index 1aa163f1..18fe3cb5 100644 --- a/src/components/rux-pop-up-menu/README.md +++ b/src/components/rux-pop-up-menu/README.md @@ -16,7 +16,7 @@ npm i --save @astrouxds/rux-pop-up-menu 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -31,7 +31,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxPopUpMenu } from '@astrouxds/rux-pop-up-menu/rux-pop-up-menu.js'; +import { RuxPopUpMenu } from "@astrouxds/rux-pop-up-menu/rux-pop-up-menu.js"; ``` ### 3. Render the Astro Pop Up Menu Web Component @@ -41,7 +41,7 @@ Pass properties as attributes of the Astro Pop Up Menu custom element: ```xml @@ -70,9 +70,9 @@ Extending Astro Pop Up Menu with custom content. Any additional content that is ### Properties -| Property | Type | Default | Required | Description | -| -------- | ------ | ------- | -------- | -------------------------------------------------------------------------- | -| `id` | String | `-` | Yes | A unique identifier to associate the pop up menu with a triggering element | +| Property | Type | Default | Required | Description | +| -------- | ------ | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| `id` | String | `-` | Yes | A unique identifier to associate the pop up menu with a triggering element | | `data` | Array | `-` | Yes | An array of objects that defines the pop up menu’s labels. **Note:** when used in an Angular environment you may need to stringify the data property | ### Sample `data` Array @@ -114,8 +114,8 @@ Pop Up Menu emits a `pop-up-menu-item-selected` event whenever a user clicks on #### Sample Tree event ```javascript -window.addEventListener('pop-up-menu-item-selected', (e) => { - console.log('Pop Up Menu Item Selected', e.detail.selected); +window.addEventListener("pop-up-menu-item-selected", (e) => { + console.log("Pop Up Menu Item Selected", e.detail.selected); }); ``` diff --git a/src/components/rux-progress/README.md b/src/components/rux-progress/README.md index aec69467..fab34038 100644 --- a/src/components/rux-progress/README.md +++ b/src/components/rux-progress/README.md @@ -16,7 +16,7 @@ npm i --save @astrouxds/rux-progress 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 Component Library](https://github.com/RocketCommunicationsInc/astro-components/src/master/) source to your project. +#### **Alternatively**, download the [Astro Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -31,7 +31,7 @@ Or, [download Astro Components as a .zip](https://github.com/RocketCommunication 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 { RuxProgress } from '@astrouxds/rux-progress/rux-progress.js'; +import { RuxProgress } from "@astrouxds/rux-progress/rux-progress.js"; ``` ### 3. Render the Astro Template Web Component @@ -97,6 +97,7 @@ Indeterminate progress ## Revision History ##### **4.0.2** + - fixed broken property `hideLabel` ##### **4.0** diff --git a/src/components/rux-push-button/README.md b/src/components/rux-push-button/README.md index 7fea1bc1..5ff587e2 100644 --- a/src/components/rux-push-button/README.md +++ b/src/components/rux-push-button/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-push-button 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxPushButton } from '@astrouxds/rux-push-button/rux-push-button.js'; +import { RuxPushButton } from "@astrouxds/rux-push-button/rux-push-button.js"; ``` ### 3. Render the Astro Push Button Web Component diff --git a/src/components/rux-segmented-button/README.md b/src/components/rux-segmented-button/README.md index 9f5ebce0..8e5797bd 100644 --- a/src/components/rux-segmented-button/README.md +++ b/src/components/rux-segmented-button/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-segmented-button 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxSegmentedButton } from '@astrouxds/rux-segmented-button/rux-segmented-button.js'; +import { RuxSegmentedButton } from "@astrouxds/rux-segmented-button/rux-segmented-button.js"; ``` ### 3. Render the Astro Segmented Button Web Component @@ -58,41 +58,49 @@ render() { ### Properties (for the Segmented Button component) -| Property | Type | Default | Required | Description | -| -------- | ----- | ------- | -------- | ------------------------------------------------------- | -| `data` | Array | `[]` | Yes | Items in this Array are the individual button segments. | -| `selected` | String | — | No | When passed in on load, this selects the first button segment with a matching label. When the selected segment changes, this property updates with the currently selected value, which reflects back to the component attribute. If no button segment label matches this string, then no segment is selected. This value takes priority over setting `selected` boolean property on the items in the `data` array. | - +| Property | Type | Default | Required | Description | +| ---------- | ------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `data` | Array | `[]` | Yes | Items in this Array are the individual button segments. | +| `selected` | String | — | No | When passed in on load, this selects the first button segment with a matching label. When the selected segment changes, this property updates with the currently selected value, which reflects back to the component attribute. If no button segment label matches this string, then no segment is selected. This value takes priority over setting `selected` boolean property on the items in the `data` array. | ### Sample Astro UXDS Segmented Button `data` Array ```js -[{ label: 'First segment' }, { label: 'Second segment' }, { label: 'Third segment' }]; +[ + { label: "First segment" }, + { label: "Second segment" }, + { label: "Third segment" }, +]; ``` ### Properties for items within the `data` Array -| Property | Type | Default | Required | Description | -| ---------- | ------- | ------- | -------- | ------------------------------------------------------- | -| `label` | String | — | Yes | Defines the label for the button segment. | -| `selected` | Boolean | — | No | If true, selects this segment rather than the first segment in the `data` Array on mount. If more than one segment has a truthy `selected` value, the earliest one in the Array will register and the rest are ignored. Note that if the `selected` string property of the parent `rux-segmented-button` takes priority. When the selected segment changes within the component, this property updates with `true` or `false` if selected or not selected, on each segment.| +| Property | Type | Default | Required | Description | +| ---------- | ------- | ------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `label` | String | — | Yes | Defines the label for the button segment. | +| `selected` | Boolean | — | No | If true, selects this segment rather than the first segment in the `data` Array on mount. If more than one segment has a truthy `selected` value, the earliest one in the Array will register and the rest are ignored. Note that if the `selected` string property of the parent `rux-segmented-button` takes priority. When the selected segment changes within the component, this property updates with `true` or `false` if selected or not selected, on each segment. | ### Events -| Event Name | Description | -| --- | ---| -| `change` | Fires when a button segment is changed. Inspect the Event target to find the `data` and `selected` component properties. See [HTMLElement `change` event on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) for more information. | - -```js - document.addEventListener('change', (e) => console.log('Target element:', e.target)); - // > Target element: - - document.addEventListener('change', (e) => console.log('Selected Segment:', e.target.selected)); - // > Selected Segment: Second Segment - - document.addEventListener('change', (e) => console.log('Array of Segments:', e.target.data)); - // > Array of Segments: [{ label: "First Segment", selected: false }, { label: "Second Segment", selected: true }, { label: "Third Segment", selected: false }] +| Event Name | Description | +| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `change` | Fires when a button segment is changed. Inspect the Event target to find the `data` and `selected` component properties. See [HTMLElement `change` event on MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) for more information. | +```js +document.addEventListener("change", (e) => + console.log("Target element:", e.target) +); +// > Target element: + +document.addEventListener("change", (e) => + console.log("Selected Segment:", e.target.selected) +); +// > Selected Segment: Second Segment + +document.addEventListener("change", (e) => + console.log("Array of Segments:", e.target.data) +); +// > Array of Segments: [{ label: "First Segment", selected: false }, { label: "Second Segment", selected: true }, { label: "Third Segment", selected: false }] ``` --- @@ -141,6 +149,7 @@ Configure the component using native HTML attributes. For each group of radio bu ## Revision History ##### **4.1** + - Exposed `selected` attribute on component to reflect currently selected segment to an attribute on the component - Added `change` event to notify document of segment selection change within component diff --git a/src/components/rux-slider/README.md b/src/components/rux-slider/README.md index aaeda376..1bd9adc0 100644 --- a/src/components/rux-slider/README.md +++ b/src/components/rux-slider/README.md @@ -19,7 +19,7 @@ npm i -save @astrouxds/rux-slider 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -34,7 +34,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxSlider } from '@astrouxds/rux-slider/rux-slider.js'; +import { RuxSlider } from "@astrouxds/rux-slider/rux-slider.js"; ``` ### 3. Render the Astro Slider Web Component @@ -69,8 +69,10 @@ Pass properties via attributes similar to the native [HTML Input Range](https:// | `disabled` | Boolean | `false` | No | Sets a disabled state on the component, which prevents typical user action from changing the value. | ## Revision History + ##### **5.0** - - Removed fallback CSS properties + +- Removed fallback CSS properties ##### **4.0** diff --git a/src/components/rux-status/README.md b/src/components/rux-status/README.md index 4e65d9c6..1294fd65 100644 --- a/src/components/rux-status/README.md +++ b/src/components/rux-status/README.md @@ -18,7 +18,7 @@ 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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'; +import { RuxStatus } from "@astrouxds/rux-status/rux-status.js"; ``` ### 3. Render the Astro Status Web Component @@ -108,4 +108,5 @@ Astro CSS classes follow the [BEM-style](http://getbem.com/introduction/) naming ## 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. diff --git a/src/components/rux-tabs/README.md b/src/components/rux-tabs/README.md index a0f843f8..247b6200 100644 --- a/src/components/rux-tabs/README.md +++ b/src/components/rux-tabs/README.md @@ -18,7 +18,7 @@ npm i --save @astrouxds/rux-tabs 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/src/master/) source to your project. +#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -33,7 +33,7 @@ Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketComm 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 { RuxTabs } from '@astrouxds/rux-tabs/rux-tabs.js'; +import { RuxTabs } from "@astrouxds/rux-tabs/rux-tabs.js"; ``` ### 3. Render the Astro Tabs Web Component diff --git a/src/components/rux-tree/README.md b/src/components/rux-tree/README.md index a8a0d0eb..875a29e4 100644 --- a/src/components/rux-tree/README.md +++ b/src/components/rux-tree/README.md @@ -20,7 +20,7 @@ npm i --save @astrouxds/rux-tree 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 Component Library](https://github.com/RocketCommunicationsInc/astro-components/src/master/) source to your project. +#### **Alternatively**, download the [Astro Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project. Via CLI: @@ -35,7 +35,7 @@ Or, [download Astro Components as a .zip](https://github.com/RocketCommunication 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 { RuxTree } from '@astrouxds/rux-tree/rux-tree.js'; +import { RuxTree } from "@astrouxds/rux-tree/rux-tree.js"; ``` ### 3. Render the Astro Tree Web Component @@ -48,7 +48,7 @@ import { RuxTree } from '@astrouxds/rux-tree/rux-tree.js'; | Property | Type | Default | Required | Description | | -------- | ----- | ------- | -------- | --------------------------------------------------------------------------- | -| `data` | Array | `[]` | yes | An array of objects defining the tree structure. See a sample object below. | +| `data` | Array | `[]` | yes | An array of objects defining the tree structure. See a sample object below. | #### Sample `data` object @@ -78,14 +78,14 @@ import { RuxTree } from '@astrouxds/rux-tree/rux-tree.js'; ### Object Properties -| Property | Type | Required | Description | -| ---------- | ------ | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -| `label` | String | yes | The label for the tree item | -| `id` | String | no | An optional property to help identify individual tree elements | -| `selected` | Boolean | no | If set to `true`, this item shows a selected style. When a new item is selected by user click, all other selected items are unselected. | -| `expanded` | Boolean | no | If set to `true`, this item is expanded. Multiple items can be expanded at the same time. | -| `status` | String | no | An optional property to assign status. See [Astro Status](http://www.astrouxds.com/library/tree) for valid status options | -| `children` | Array | no | An array of child elements. Children use the same structure as parents and may include their own `children` array to create nested elements | +| Property | Type | Required | Description | +| ---------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `label` | String | yes | The label for the tree item | +| `id` | String | no | An optional property to help identify individual tree elements | +| `selected` | Boolean | no | If set to `true`, this item shows a selected style. When a new item is selected by user click, all other selected items are unselected. | +| `expanded` | Boolean | no | If set to `true`, this item is expanded. Multiple items can be expanded at the same time. | +| `status` | String | no | An optional property to assign status. See [Astro Status](http://www.astrouxds.com/library/tree) for valid status options | +| `children` | Array | no | An array of child elements. Children use the same structure as parents and may include their own `children` array to create nested elements | ### Component Events @@ -94,12 +94,12 @@ Tree emits a `tree-updated` event whenever the selected tree item changes. Event #### Sample Tree event ```javascript -window.addEventListener('tree-updated', (event) => { +window.addEventListener("tree-updated", (event) => { // an array that reflects the current state of the tree - console.log('Tree data', event.detail.data); + console.log("Tree data", event.detail.data); // an object representing the currently selected tree item - console.log('Selected tree item', event.detail.selected); + console.log("Selected tree item", event.detail.selected); }); ```