Skip to content

Commit

Permalink
Merge branch 'gh-pages-dev' into gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@francisrupert
francisrupert committed Feb 12, 2021
2 parents c2a3613 + 2c5275a commit d0c6cdb
Show file tree
Hide file tree
Showing 49 changed files with 2,081 additions and 6,027 deletions.
4 changes: 1 addition & 3 deletions _includes/preview-and-snippet.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
{% endcomment %}

{% if snippet %}
<div class="ds-preview">
{{ snippet }}
</div>
<div class="ds-preview">{{ snippet }}</div>
```html{{ snippet }}```
{% endif %}

92 changes: 29 additions & 63 deletions components/alerts/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ parent: "Components"
type: "UI Component"
title: "Inline Alerts"
shortName: "component__alerts"
intro: "Inline Alerts help to provide inline, page-level messaging to the User. These may be as the result of a user's specific actions or unsolicited messages."
intro: "Display contextual assistance or response."
jump_menu: true
custom_js: "inline-alert.js"
---
Expand All @@ -24,116 +24,82 @@ Variations are styled with `class="fsa-alert fsa-alert--[type]"`.

### Success

<div class="ds-preview">
<div class="fsa-alert fsa-alert--success" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional success title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
</div>
```html
{% capture snippet %}
<div class="fsa-alert fsa-alert--success" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional success title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Warning

<div class="ds-preview">
<div class="fsa-alert fsa-alert--warning" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional warning title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
</div>
```html
{% capture snippet %}
<div class="fsa-alert fsa-alert--warning" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional warning title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Error

<div class="ds-preview">
<div class="fsa-alert fsa-alert--error" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional error title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
</div>
```html
{% capture snippet %}
<div class="fsa-alert fsa-alert--error" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional error title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Info

<div class="ds-preview">
<div class="fsa-alert fsa-alert--info" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional information title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
</div>
```html
{% capture snippet %}
<div class="fsa-alert fsa-alert--info" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional information title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### No icon

<div class="ds-preview">
<div class="fsa-alert fsa-alert--success fsa-alert--no-icon" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional [type] title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
{% capture snippet %}
<div class="fsa-alert fsa-alert--success fsa-alert--no-icon" role="alert">
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional [type] title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</div>
```html
<div class="fsa-alert fsa-alert--[type] fsa-alert--no-icon" role="alert">
....
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Dismissable

<div class="ds-preview">
<div class="fsa-alert fsa-alert--success" role="alert">
<button class="fsa-alert__close" data-behavior="alert-dismiss" type="button" title="Dismiss this message" aria-label="Dismiss this message"></button>
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional success title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing assumenda harum accusamus nemo non iste quia. Nihil ab tenetur ipsa dolore nisi qui molestias assumenda a perferendis maxime sed do eiusmod.</p>
</div>
</div>
</div>
```html
{% capture snippet %}
<div class="fsa-alert fsa-alert--success" role="alert">
<button class="fsa-alert__close" data-behavior="alert-dismiss" type="button" title="Dismiss this message" aria-label="Dismiss this message"></button>
<div class="fsa-alert__body">
<h3 class="fsa-alert__heading">Optional success title</h3>
<p class="fsa-alert__text">Lorem ipsum <strong>bold text</strong>, consectetur adipiscing assumenda harum accusamus nemo non iste quia. Nihil ab tenetur ipsa dolore nisi qui molestias assumenda a perferendis maxime sed do eiusmod.</p>
</div>
</div>
```
{% endcapture %}

{% include preview-and-snippet.html %}

## Usage

Expand Down
103 changes: 39 additions & 64 deletions components/badges/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ parent: "Components"
type: "UI Component"
title: "Badges"
shortName: "component__badges"
intro: "Badges are used as indicators of an update or action items that have yet to be completed."
intro: "Succinctly display quantified information."
jump_menu: true
relatedItems:
- "Timeline"
---

<div class="ds-preview">
Expand Down Expand Up @@ -35,71 +37,55 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.

### Default

<div class="ds-preview">
<span class="fsa-badge">1</span>
</div>
```html
{% capture snippet %}
<span class="fsa-badge">1</span>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Neutral

<div class="ds-preview">
<span class="fsa-badge fsa-badge--neutral">8</span>
</div>
```html
{% capture snippet %}
<span class="fsa-badge fsa-badge--neutral">8</span>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### General

<div class="ds-preview">
<span class="fsa-badge fsa-badge--general">11</span>
</div>
```html
{% capture snippet %}
<span class="fsa-badge fsa-badge--general">11</span>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Alert

<div class="ds-preview">
<span class="fsa-badge fsa-badge--alert">11</span> Bugs Found
</div>
```html
{% capture snippet %}
<span class="fsa-badge fsa-badge--alert">11</span> Bugs Found
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Warning

<div class="ds-preview">
<span class="fsa-badge fsa-badge--warning">22</span> Issues Recorded
</div>
```html
{% capture snippet %}
<span class="fsa-badge fsa-badge--warning">22</span> Issues Recorded
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Success

<div class="ds-preview">
<span class="fsa-badge fsa-badge--success">99+</span> Feature Updates
</div>
```html
{% capture snippet %}
<span class="fsa-badge fsa-badge--success">99+</span> Feature Updates
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Large

<div class="ds-preview">
<ul class="fsa-level">
<li><span class="fsa-badge fsa-badge--large">1</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--neutral">8</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--general">8</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--alert">11</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--warning">22</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--success">99+</span></li>
</ul>
</div>
```html
{% capture snippet %}
<ul class="fsa-level">
<li><span class="fsa-badge fsa-badge--large">1</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--neutral">8</span></li>
Expand All @@ -108,21 +94,13 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
<li><span class="fsa-badge fsa-badge--large fsa-badge--warning">22</span></li>
<li><span class="fsa-badge fsa-badge--large fsa-badge--success">99+</span></li>
</ul>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Extra Large

<div class="ds-preview">
<ul class="fsa-level">
<li><span class="fsa-badge fsa-badge--extra-large">1</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--neutral">8</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--general">8</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--alert">11</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--warning">22</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--success">99+</span></li>
</ul>
</div>
```html
{% capture snippet %}
<ul class="fsa-level">
<li><span class="fsa-badge fsa-badge--extra-large">1</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--neutral">8</span></li>
Expand All @@ -131,26 +109,23 @@ Badges are styled with `class="fsa-badge fsa-badge--[type] fsa-badge--[size]"`.
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--warning">22</span></li>
<li><span class="fsa-badge fsa-badge--extra-large fsa-badge--success">99+</span></li>
</ul>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Actionable

Badge styles can be applied to nearly any HTML element, defaulting to non-actionable `<span>` elements as shown above. Below are `<a>` and `<button>` elements:

<div class="ds-preview">
<ul class="fsa-level">
<li><a class="fsa-badge" href="link.html">A</a> Anchor</li>
<li><button class="fsa-badge" type="button">B</button> Button</li>
<li><button class="fsa-badge" type="button" disabled="disabled">Z</button> Disabled</li>
</ul>
</div>
```html
{% capture snippet %}
<ul class="fsa-level">
<li><a class="fsa-badge" href="link.html">A</a> Anchor</li>
<li><button class="fsa-badge" type="button">B</button> Button</li>
<li><button class="fsa-badge" type="button" disabled="disabled">Z</button> Disabled</li>
</ul>
```
{% endcapture %}

{% include preview-and-snippet.html %}

### Example: Dark Background

Expand Down
14 changes: 6 additions & 8 deletions components/box/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@ parent: "Components"
type: "UI Component"
title: "Box"
shortName: "component__box"
intro: ""
intro: "Organize a set of content in a standalone object."
jump_menu: true
---

<div class="ds-preview">
<div class="fsa-box">
<p>Deserunt db excepturi rem asperiores. Sapiente aliquid, hic natus.</p>
</div>
{% capture snippet %}
<div class="fsa-box">
<p>Deserunt excepturi rem asperiores. Sapiente aliquid, hic natus.</p>
</div>
{% endcapture %}

```html
<element class="fsa-box">...</element>
```
{% include preview-and-snippet.html %}

## Variations

Expand Down
Loading

0 comments on commit d0c6cdb

Please sign in to comment.