Skip to content

Commit fb4de0a

Browse files
rsmithadhocrsmithadhoc
authored
Merge branch 'main' into external-link-docs
2 parents 4f717e2 + cc721f5 commit fb4de0a

File tree

16 files changed

+118
-55
lines changed

16 files changed

+118
-55
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ node_modules
99
tmp_remote_assets
1010
src/.jekyll-cache
1111
src/assets/stylesheets/component-library.css
12+
src/assets/stylesheets/core.css
13+
src/assets/stylesheets/mobile-typography.css
14+
src/assets/stylesheets/shame.css
15+
src/assets/stylesheets/uswds-typography.css
16+
src/assets/stylesheets/utilities.css
1217
src/formation.min.css
1318
src/vendor
1419
src/_data/component-docs.json

‎config/gulp/css.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,16 @@ gulp.task('copy-web-components-css', function (done) {
1717
return stream;
1818
});
1919

20+
gulp.task('copy-css-library-css', function (done) {
21+
console.log('copying css-library CSS');
22+
var stream = gulp.src('./node_modules/@department-of-veterans-affairs/css-library/dist/stylesheets/*.css')
23+
.pipe(gulp.dest('src/assets/stylesheets/'));
24+
25+
return stream;
26+
});
27+
2028
gulp.task(task, gulp.series(
2129
'copy-formation-css',
22-
'copy-web-components-css'
30+
'copy-web-components-css',
31+
'copy-css-library-css'
2332
));

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme",
2828
"devDependencies": {
29-
"@department-of-veterans-affairs/component-library": "^47.1.0",
29+
"@department-of-veterans-affairs/component-library": "^48.0.2",
3030
"gulp": "^4.0.2",
3131
"gulp-clean": "^0.4.0",
3232
"gulp-rename": "^2.0.0",
@@ -38,9 +38,10 @@
3838
},
3939
"dependencies": {
4040
"@department-of-veterans-affairs/formation": "^11.0.12",
41-
"@department-of-veterans-affairs/css-library": "^0.12.2"
41+
"@department-of-veterans-affairs/css-library": "^0.15.0"
4242
},
4343
"engines": {
4444
"npm": "6.14.8"
45-
}
45+
},
46+
"packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
4647
}

‎src/_about/whats-new.md

+8
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,14 @@ title: What’s new?
1818
* va-file-input: add support for read-only mode by @pennja in #1300
1919
* va-date: add prop to make month optional by @it-harrison in #1377
2020

21+
### New content guidance
22+
* Claims and applications (under Specific topics and programs): New page with general guidance for content about claims and applications #3504
23+
* Email and text notifications: New page with general guidance for email notifications #3406
24+
* Bulleted lists: Clarification on single sentences in lists; crosslink with radio buttons and checkboxes #3268
25+
* Use short sentences (under Plain language): New example and suggested guideline for maximum sentence length #3268
26+
* Sign in and identity verification (under Specific topics and programs): Updates to word list related to sign-in changes and clarification on when and when not to use "verify your identity"
27+
* Word list: New entries for claimant, sponsor, Philippines, and Washington, DC #3513
28+
2129
### Bug fixes
2230
* va-modal: set box-sizing to border-box to prevent text overflow by @powellkerry in #1357
2331
* va-accordion: open accordion when media is print by @ataker in #1363

‎src/_components/header/minimal.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ has-parent: /components/header/
66
contributors: Ben Brasso (Agile 6), Ya-ching Tsao (CivicActions), Zach Park (Agile 6), Kristen McConnell (Ad Hoc)
77
intro-text: The minimal header can be used when navigating away would prevent the user from easily accomplishing their main task.
88
figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=988%3A1384&mode=design&t=jMcVWkPlFhZu3RTh-1
9+
example-link: https://staging.va.gov/mock-form-minimal-header/
910
status: use-with-caution-candidate
1011
web-component: va-header-minimal
1112
anchors:
1213
- anchor: Examples
1314
- anchor: Usage
14-
- anchor: Code usage
1515
- anchor: Content considerations
1616
- anchor: Component checklist
1717
---
@@ -22,6 +22,10 @@ anchors:
2222

2323
{% include storybook-preview.html story="components-va-header-minimal--default" link_text=page.web-component %}
2424

25+
<a class="vads-c-action-link--blue" href="{{ page.example-link }}">
26+
View an example
27+
</a>
28+
2529
### With Subheader
2630

2731
{% include storybook-preview.html story="components-va-header-minimal--with-subheader" link_text="View va-header-minimal with subheader variation" %}
@@ -46,8 +50,6 @@ anchors:
4650

4751
* **At the top of the page.** The minimal header appears at the top of the page.
4852

49-
{% include component-docs.html component_name=page.web-component %}
50-
5153
## Content considerations
5254

5355
* For form titles:

‎src/_components/link/index.md

+4
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ anchors:
4747

4848
{% include storybook-preview.html story="components-va-link--download" link_text="download va-link" height="50px" %}
4949

50+
### External
51+
52+
{% include storybook-preview.html story="components-va-link--external" link_text="external va-link" height="50px" %}
53+
5054
### Video
5155

5256
{% include storybook-preview.html story="components-va-link--video" link_text="video va-link" height="50px" %}

‎src/_content-style-guide/00_word-list.md

+15
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,9 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
125125
**Civilian Health and Medical Program of the Department of Veterans Affairs (CHAMPVA)**
126126
: Go to [Abbreviations and acronyms]({{ site.baseurl }}/content-style-guide/abbreviations-and-acronyms) for guidance on using acronyms on VA.gov.
127127

128+
**claimant**
129+
: Define the term on the first instance as “person with the claim” or “person applying for this benefit.” When possible, use specific plain language instead, like “Veteran’s spouse” or “Veteran’s child.” Go to [Claims and applications](https://design.va.gov/content-style-guide/specific-topics-and-programs/claims-and-applications) for more guidance related to this word.
130+
128131
**claim exam**
129132
: This is a term VA is working to rebrand. For now, on first mention on a page, use "VA claim exam (also known as a compensation and pension, or C&P, exam)." After first mention, use "VA claim exam" or "claim exam."
130133

@@ -220,6 +223,9 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
220223
**disease**
221224
: Use "illness" unless it's part of a proper name of a specific disease.
222225

226+
**District of Columbia**
227+
: Refer to entry for "Washington, DC."
228+
223229
**dividend**
224230
: Define on first mention in body copy as "cash payments made to policyholders when the company makes a profit" OR as "when life insurance companies make money, they sometimes make cash payments (called dividends) to people who have policies with them." Include definition in another sentence, as a parenthetical, or set off with commas.
225231

@@ -540,6 +546,9 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
540546
**Persian Gulf War era**
541547
: Lowercase "era."
542548

549+
**Philippines**
550+
: Use “Philippines” (without "the") in a list. Use “the Philippines” in the context of a paragraph (like “If you served in the Philippines”).
551+
543552
**PO Box**
544553
: Don't use periods.
545554

@@ -681,6 +690,9 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
681690
**special claim**
682691
: Define on first mention in body copy as "a claim for special needs linked to your service-connected disability." Include definition in another sentence, as a parenthetical, or set off with commas.
683692

693+
**sponsor**
694+
: We use this word in forms and other content to refer to the Veteran who earned the benefits that a family member may be using. It’s OK to use the word sponsor but lead with the plain language definition. Example: the Veteran you’re connected to (called your “sponsor”). Go to [Claims and applications](https://design.va.gov/content-style-guide/specific-topics-and-programs/claims-and-applications) for more guidance related to this word.
695+
684696
**Statement of the Case**
685697
: Capitalize.
686698

@@ -834,6 +846,9 @@ For terms that are not on this list, refer to [Merriam-Webster](https://www.merr
834846

835847
### W
836848

849+
**Washington, DC**
850+
: Default to Washington, DC when referring to the location, the VAMC, or a regional office. In some cases, especially government contexts, "District of Columbia" is also fine ("the government of the District of Columbia").
851+
837852
**website**
838853
: One word, lowercase.
839854

‎src/_data/tokens/vads-font-primitive.csv

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ vads-font-line-length-5,Primitive,vads-size-line-length-5,,uswds-system-font-lin
1515
vads-font-line-length-6,Primitive,vads-size-line-length-6,88ex,uswds-system-font-line-length-6,88ex,From USWDS.
1616
vads-font-line-length-none,Primitive,vads-size-line-length-none,,uswds-system-font-line-length-none,none,From USWDS.
1717
vads-font-size-2xl,Primitive,vads-font-size-2xl,,uswds-system-font-size-14,40px,
18-
vads-font-size-base,Primitive,vads-font-size-base,17px,uswds-system-font-size-6,17px,
18+
font-size-root,Primitive,font-size-root,16px,uswds-system-font-size-6,16px,
19+
vads-font-size-source-sans-normalized,Primitive,vads-font-size-source-sans-normalized,16.96px,uswds-system-font-size-7,16.96px,
1920
vads-font-size-lg,Primitive,vads-font-size-lg,,uswds-system-font-size-8,20px,
2021
vads-font-size-md,Primitive,vads-font-size-md,,uswds-system-font-size-6,17px,
2122
vads-font-size-sm,Primitive,vads-font-size-sm,,uswds-system-font-size-4,15px,

‎src/_data/tokens/vads-font-semantic.csv

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ vads-font-size-body-large,Semantic,vads-font-size-body-large,uswds-system-font-s
66
vads-font-size-body-lead,Semantic,vads-font-size-body-lead,,,vads-font-size-body-large,Lead font size for body text. For lead paragraphs.,20px
77
vads-font-size-body-medium,Semantic,vads-font-size-body-medium,uswds-system-font-size-6,17px,,Medium body font size,
88
vads-font-size-body-small,Semantic,vads-font-size-body-small,uswds-system-font-size-4,15px,,Smallest body font size,
9-
vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-base,Eyebrow is an experimental request which adds type above an h1.,17px
9+
vads-font-size-eyebrow,Semantic,vads-font-size-eyebrow,,,vads-font-size-root,Eyebrow is an experimental request which adds type above an h1.,16px
1010
vads-font-size-heading-level-1,Semantic,vads-font-size-heading-level-1,uswds-system-font-size-14,40px,,Heading level 1. h1 value.,
1111
vads-font-size-heading-level-2,Semantic,vads-font-size-heading-level-2,uswds-system-font-size-12,32px,,Heading level 2. h2 value. Was 30px,
1212
vads-font-size-heading-level-3,Semantic,vads-font-size-heading-level-3,uswds-system-font-size-8,20px,,Heading level 3. h3 value.,

‎src/_data/tokens/vads.tokens.json

+17-2
Original file line numberDiff line numberDiff line change
@@ -2814,7 +2814,7 @@
28142814
}
28152815
}
28162816
},
2817-
"vads-font-size-base": {
2817+
"vads-font-size-root": {
28182818
"type": "dimension",
28192819
"value": "{uswds.font.size.uswds-system-font-size-6}",
28202820
"extensions": {
@@ -2829,6 +2829,21 @@
28292829
}
28302830
}
28312831
},
2832+
"vads-u-font-size--source-sans-normalized": {
2833+
"type": "dimension",
2834+
"value": "{uswds.font.size.uswds-system-font-size-7}",
2835+
"extensions": {
2836+
"org.lukasoppermann.figmaDesignTokens": {
2837+
"mode": "Value",
2838+
"collection": "vads-primitives",
2839+
"scopes": [
2840+
"ALL_SCOPES"
2841+
],
2842+
"variableId": "VariableID:562:4293",
2843+
"exportKey": "variables"
2844+
}
2845+
}
2846+
},
28322847
"vads-font-size-lg": {
28332848
"type": "dimension",
28342849
"value": "{uswds.font.size.uswds-system-font-size-8}",
@@ -3228,7 +3243,7 @@
32283243
},
32293244
"vads-label-font-size": {
32303245
"type": "color",
3231-
"value": "{vads-primitives.font.size.vads-font-size-base}",
3246+
"value": "{vads-primitives.font.size.vads-font-size-root}",
32323247
"extensions": {
32333248
"org.lukasoppermann.figmaDesignTokens": {
32343249
"mode": "Mode 1",

‎src/_foundation/color-palette.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
- anchor: Semantic color tokens
66
- anchor: Component color tokens
77
- anchor: Primitive color tokens
8-
- anchor: v1 colors
98
---
109

1110
<h1 id="icons">{{ page.title }}</h1>
@@ -108,4 +107,4 @@ <h3 class="vads-u-border-bottom--1px vads-u-border-color--gray-lighter vads-u-ma
108107
%}
109108
{% endfor %}
110109
</div>
111-
</div>
110+
</div>

‎src/_foundation/utilities/html/font-size.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
<h2 class="vads-u-font-size--h4">Sizing by name</h2>
22

33
<div class="vads-l-row">
4-
<div class="vads-l-col usa-bitter">
4+
<div class="vads-l-col vads-u-font-family--serif">
55
<p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
6-
<p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
6+
<p class="vads-u-font-size--root">16px .vads-u-font-size--root</p>
7+
<p class="vads-u-font-size--source-sans-normalized">&nbsp;<!-- spacer for alignment --></p>
78
<p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
89
<p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
910
<p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>
1011
<p class="vads-u-font-size--2xl">40px .vads-u-font-size--2xl</p>
1112
</div>
12-
<div class="vads-l-col usa-sans">
13+
<div class="vads-l-col vads-u-font-family--sans">
1314
<p class="vads-u-font-size--sm">15px .vads-u-font-size--sm</p>
1415
<p class="vads-u-font-size--base">16px .vads-u-font-size--base</p>
16+
<p class="vads-u-font-size--source-sans-normalized">16.96px .vads-u-font-size--source-sans-normalized</p>
1517
<p class="vads-u-font-size--md">17px .vads-u-font-size--md</p>
1618
<p class="vads-u-font-size--lg">20px .vads-u-font-size--lg</p>
1719
<p class="vads-u-font-size--xl">30px .vads-u-font-size--xl</p>

‎src/_includes/component-docs.html

+17-14
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
{% for component in site.data.component-docs.components %} {% if component.tag
2-
== include.component_name %}
3-
{% if component.props != empty or component.events != empty %}
1+
{% for component in site.data.component-docs.components %}
2+
{% if component.tag == include.component_name %}
3+
{% if component.props != empty or component.events != empty %}
44
<h2 id="code-usage">Code usage</h2>
5-
{% if component.props != empty %}
5+
{% if component.props != empty %}
66
<h3>Attributes and Properties</h3>
77
<table>
88
<tr>
@@ -13,40 +13,43 @@ <h3>Attributes and Properties</h3>
1313
<th><strong>Description</strong></th>
1414
</tr>
1515
<div>
16-
{% for prop in component.props %}
16+
{% for prop in component.props %}
1717
<tr>
1818
<th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.name }}</code></th>
1919
<th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.attr }}</code></th>
2020
<th>{% if prop.type %}<code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.type }}</code>{% endif %}</th>
2121
<th>{% if prop.default %}<code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.default }}</code>{% endif %}</th>
2222
<th>{{ prop.docs }}</th>
2323
</tr>
24-
{% endfor %}
24+
{% endfor %}
2525
</div>
2626
</table>
27-
{% endif %}
27+
{% endif %}
2828

29-
{% if component.events != empty %}
29+
{% if component.events != empty %}
3030
<h3>Events</h3>
3131
<table>
3232
<tr>
3333
<th><strong>Name</strong></th>
3434
<th><strong>Description</strong></th>
3535
</tr>
3636
<div>
37-
{% for event in component.events %}
37+
{% for event in component.events %}
3838
<tr>
3939
<th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ event.event }}</code></th>
4040
<th>{{ event.docs }}</th>
4141
</tr>
42-
{% endfor %} {% for listener in component.listeners %} {% assign docs =
43-
component.docsTags | where: "name", listener.event %}
42+
{% endfor %}
43+
{% for listener in component.listeners %}
44+
{% assign docs = component.docsTags | where: "name", listener.event %}
4445
<tr>
4546
<th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ listener.event }}</code></th>
4647
<th>{% for doc in docs %} {{ doc.text }} {% endfor %}</th>
4748
</tr>
48-
{% endfor %}
49+
{% endfor %}
4950
</div>
5051
</table>
51-
{% endif %}
52-
{% endif %} {% endif %} {% endfor %}
52+
{% endif %}
53+
{% endif %}
54+
{% endif %}
55+
{% endfor %}

‎src/_includes/head.html

+1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737

3838
<link rel="stylesheet" href="{{ '/formation.min.css' | prepend: site.baseurl | append: cacheBust }}">
3939
<link rel="stylesheet" href="{{ '/assets/stylesheets/application.css' | prepend: site.baseurl | append: cacheBust }}">
40+
<link rel="stylesheet" href="{{ '/assets/stylesheets/utilities.css' | prepend: site.baseurl | append: cacheBust }}">
4041
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
4142
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
4243

‎src/assets/stylesheets/_layout/_content-wrappers.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
.highlight pre {
2020
margin: 0;
2121
color: $vads-color-base;
22-
font-size: $font-size-base;
22+
font-size: $font-size-root;
2323
line-height: 1.5;
2424
}
2525

0 commit comments

Comments
 (0)