Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

hotfix/fix readme link #141

Merged
merged 1 commit into from
Jun 15, 2021
Merged

hotfix/fix readme link #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/__rux-template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/components/rux-accordion/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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
Expand Down
21 changes: 11 additions & 10 deletions src/components/rux-button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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
Expand All @@ -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
</rux-button>
```

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
Expand All @@ -62,19 +63,18 @@ Also, you can use [Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Compo
Slotted icon button
</rux-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. |

---

Expand Down Expand Up @@ -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**
Expand Down
42 changes: 26 additions & 16 deletions src/components/rux-classification-marking/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:

Expand All @@ -37,40 +35,52 @@ 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

Pass properties as attributes of the Astro Classification custom element:

```javascript
<rux-classification-marking classification="controlled" label=""></rux-classification-marking>
<rux-classification-marking
classification="controlled"
label=""
></rux-classification-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 |

| 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
<rux-classification-marking classification="controlled"></rux-classification-marking>
<rux-classification-marking classification="controlled"></rux-classification-marking>
```

##### Tag Marking Type

```javascript
<rux-classification-marking classification="controlled" tag></rux-classification-marking>
<rux-classification-marking
classification="controlled"
tag
></rux-classification-marking>
```

#### 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
<rux-classification-marking classification="controlled" label="//custom/label"></rux-classification-marking>
```
<rux-classification-marking
classification="controlled"
label="//custom/label"
></rux-classification-marking>
```
Loading