diff --git a/Gemfile b/Gemfile index da84d04a..a8d1dc0f 100644 --- a/Gemfile +++ b/Gemfile @@ -1,5 +1,3 @@ source 'https://rubygems.org' -gem "jekyll", "~> 4.0", ">= 4.0.0" -gem "jekyll-sitemap", ">= 1.3.1" -gem "jekyll-redirect-from" +gem "jekyll", "~> 4.3.2" diff --git a/Gemfile.lock b/Gemfile.lock index 2614b825..94dc93fa 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,73 +1,72 @@ GEM remote: https://rubygems.org/ specs: - addressable (2.8.0) - public_suffix (>= 2.0.2, < 5.0) + addressable (2.8.4) + public_suffix (>= 2.0.2, < 6.0) colorator (1.1.0) - concurrent-ruby (1.1.9) - em-websocket (0.5.2) + concurrent-ruby (1.2.2) + em-websocket (0.5.3) eventmachine (>= 0.12.9) - http_parser.rb (~> 0.6.0) + http_parser.rb (~> 0) eventmachine (1.2.7) - ffi (1.15.3) + ffi (1.15.5) forwardable-extended (2.6.0) - http_parser.rb (0.6.0) - i18n (1.8.10) + google-protobuf (3.23.2) + http_parser.rb (0.8.0) + i18n (1.14.0) concurrent-ruby (~> 1.0) - jekyll (4.2.0) + jekyll (4.3.2) addressable (~> 2.4) colorator (~> 1.0) em-websocket (~> 0.5) i18n (~> 1.0) - jekyll-sass-converter (~> 2.0) + jekyll-sass-converter (>= 2.0, < 4.0) jekyll-watch (~> 2.0) - kramdown (~> 2.3) + kramdown (~> 2.3, >= 2.3.1) kramdown-parser-gfm (~> 1.0) liquid (~> 4.0) - mercenary (~> 0.4.0) + mercenary (>= 0.3.6, < 0.5) pathutil (~> 0.9) - rouge (~> 3.0) + rouge (>= 3.0, < 5.0) safe_yaml (~> 1.0) - terminal-table (~> 2.0) - jekyll-redirect-from (0.16.0) - jekyll (>= 3.3, < 5.0) - jekyll-sass-converter (2.1.0) - sassc (> 2.0.1, < 3.0) - jekyll-sitemap (1.4.0) - jekyll (>= 3.7, < 5.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) jekyll-watch (2.2.1) listen (~> 3.0) - kramdown (2.3.1) + kramdown (2.4.0) rexml kramdown-parser-gfm (1.1.0) kramdown (~> 2.0) - liquid (4.0.3) - listen (3.7.0) + liquid (4.0.4) + listen (3.8.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) mercenary (0.4.0) pathutil (0.16.2) forwardable-extended (~> 2.6) - public_suffix (4.0.6) - rb-fsevent (0.11.0) + public_suffix (5.0.1) + rake (13.0.6) + rb-fsevent (0.11.2) rb-inotify (0.10.1) ffi (~> 1.0) rexml (3.2.5) - rouge (3.26.0) + rouge (4.1.2) safe_yaml (1.0.5) - sassc (2.4.0) - ffi (~> 1.9) - terminal-table (2.0.0) - unicode-display_width (~> 1.1, >= 1.1.1) - unicode-display_width (1.7.0) + sass-embedded (1.62.1) + google-protobuf (~> 3.21) + rake (>= 10.0.0) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.4.2) + webrick (1.8.1) PLATFORMS ruby DEPENDENCIES - jekyll (~> 4.0, >= 4.0.0) - jekyll-redirect-from - jekyll-sitemap (>= 1.3.1) + jekyll (~> 4.3.2) BUNDLED WITH - 2.2.20 + 2.4.12 diff --git a/_config.yml b/_config.yml index 49449519..3ef2344c 100644 --- a/_config.yml +++ b/_config.yml @@ -1,36 +1,19 @@ title: Login.gov Design System description: A place for designers and developers to see components available for use on Login.gov sites. github_repo_url: https://github.com/18F/identity-design-system -url: https://design.login.gov -domain: design.login.gov source: docs destination: dist keep_files: - assets -plugins: - - jekyll-sitemap - - jekyll-redirect-from - collections: components: output: true - permalink: /:collection/:name/ - utilities: - output: true - permalink: /:collection/:name/ + permalink: /:name/ defaults: - scope: path: '' values: - layout: main - - scope: - type: components - values: - sidenav: components - - scope: - type: utilities - values: - sidenav: utilities + layout: base diff --git a/docs/404.md b/docs/404.md deleted file mode 100644 index c4e870fd..00000000 --- a/docs/404.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -layout: 404 ---- diff --git a/docs/_components/index.md b/docs/_components/index.md new file mode 100644 index 00000000..6dcf914a --- /dev/null +++ b/docs/_components/index.md @@ -0,0 +1,4 @@ +--- +permalink: / +title: Components +--- diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml deleted file mode 100644 index 0c80fa41..00000000 --- a/docs/_data/nav.yml +++ /dev/null @@ -1,8 +0,0 @@ -primary: - - href: /brand/ - - href: /components/accordions/ - text: Components - - href: /security-experience-principles/ - text: Security Experience Principles - - href: /utilities/color/ - text: Utilities diff --git a/docs/_includes/banner.html b/docs/_includes/banner.html deleted file mode 100644 index 24230f85..00000000 --- a/docs/_includes/banner.html +++ /dev/null @@ -1,47 +0,0 @@ -Skip to main content - -
-
-
-
-
- U.S. flag -
-
-

An official website of the United States government

- -
- -
-
-
-
-
- Dot gov -
-

- Official websites use .gov -
- A .gov website belongs to an official government organization in the United States. -

-
-
-
- Https -
-

- Secure .gov websites use HTTPS -
- A lock ( - -) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. -

-
-
-
-
-
-
diff --git a/docs/_includes/dap.html b/docs/_includes/dap.html deleted file mode 100644 index 5bde99d6..00000000 --- a/docs/_includes/dap.html +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html deleted file mode 100644 index 4de60bd1..00000000 --- a/docs/_includes/footer.html +++ /dev/null @@ -1,80 +0,0 @@ - -
-
-
-
- -
-
-

{{ site.domain }}

-

- An official website of the General Services Administration -

-
-
-
- -
-
-
- Looking for U.S. government information and services? -
- - Visit USA.gov - -
-
-
diff --git a/docs/_includes/google_analytics.html b/docs/_includes/google_analytics.html deleted file mode 100644 index a76b88cd..00000000 --- a/docs/_includes/google_analytics.html +++ /dev/null @@ -1,20 +0,0 @@ - - diff --git a/docs/_includes/helpers/color.html b/docs/_includes/helpers/color.html deleted file mode 100644 index 541b4767..00000000 --- a/docs/_includes/helpers/color.html +++ /dev/null @@ -1,9 +0,0 @@ -
-
- {{ include.hex }} -
-
- {{ include.name }}
- {{ include.code }} -
-
diff --git a/docs/_includes/nav/list.html b/docs/_includes/nav/list.html index 4f9cad1f..8cf96543 100644 --- a/docs/_includes/nav/list.html +++ b/docs/_includes/nav/list.html @@ -1,9 +1,5 @@ {% for link in include.links -%} - {% if link.href -%} - {% assign jekyll_page = link.href | resolve_permalink %} - {% else -%} - {% assign jekyll_page = nil %} - {% endif %} + {% assign jekyll_page = link.href | resolve_permalink %}
  • {% if jekyll_page -%} {% diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html deleted file mode 100644 index 73170dfc..00000000 --- a/docs/_includes/navbar.html +++ /dev/null @@ -1,27 +0,0 @@ -
    - - diff --git a/docs/_layouts/404.html b/docs/_layouts/404.html deleted file mode 100644 index f26aacf9..00000000 --- a/docs/_layouts/404.html +++ /dev/null @@ -1,113 +0,0 @@ - - - - - - This page is no longer available | Login.gov - - - - -
    -
    -
    -
    -
    - - login.gov logo - -
    -
    -
    -

    - This page is no longer available. -

    -

    - Here are some links that might be helpful: -

    -
    - -
    -
    -
    - - diff --git a/docs/_layouts/base.html b/docs/_layouts/base.html index 42c5d351..2b6e5183 100644 --- a/docs/_layouts/base.html +++ b/docs/_layouts/base.html @@ -1,79 +1,39 @@ - - + - - - - - + {{ page.title }} + + + +
    +
    +
    + - {% unless site.branch == "main" %} - - {% endunless %} - - {% assign title = '' - | split: '' - | push: page.title - | push: site.title - | compact - | join: ' | ' - %} - {{ title }} - - {% assign desc = page.description - | default: page.lead - | default: site.description - | strip_html - | strip - | xml_escape - %} - {% if desc -%} - - - {% endif %} - - - - {% assign metas = '' | split: '' %} - {% for meta in site.meta %}{% assign metas = metas | push: meta[0] %}{% endfor %} - {% for meta in page.meta %}{% assign metas = metas | push: meta[0] %}{% endfor %} - {% assign metas = metas | unique %} - {% for meta in metas -%} - {% assign val = page.meta[meta] | default: site.meta[meta] %} - {% if meta contains 'image' %}{% assign val = val | absolute_url %}{% endif %} - - {% endfor %} - {% if site.url %} - - - {% endif %} - - - - - - - +
    +

    {{ page.title }}

    - - - - - - - - + {% if page.lead %} +

    {{ page.lead }}

    + {% endif %} - - - - {{ content }} + {{ content }} +
    +
    +
    +
    - {% include dap.html %} - {% include google_analytics.html %} diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html deleted file mode 100644 index be77e72d..00000000 --- a/docs/_layouts/home.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -layout: base ---- - -{% include banner.html %} - -{% include navbar.html %} - -
    - {{ content }} -
    - -{% include footer.html %} diff --git a/docs/_layouts/main.html b/docs/_layouts/main.html deleted file mode 100644 index ad0714ee..00000000 --- a/docs/_layouts/main.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -layout: base ---- - -{% include banner.html %} - -{% include navbar.html %} - -{% assign sidenav = site.data.nav[page.sidenav] | default: page.sidenav %} - -
    -
    - {% if sidenav %} -
    - - -
    -

    {{ page.title }}

    - - {% if page.lead %} -

    {{ page.lead }}

    - {% endif %} - - {{ content }} -
    - - -
    - {% else %} -
    -

    {{ page.title }}

    - - {% if page.lead %} -

    {{ page.lead }}

    - {% endif %} - - {{ content }} -
    - {% endif %} -
    -
    - -{% include footer.html %} diff --git a/docs/_plugins/generate_nav_for_components.rb b/docs/_plugins/generate_nav_for_components.rb index 178476a5..12f37ae4 100644 --- a/docs/_plugins/generate_nav_for_components.rb +++ b/docs/_plugins/generate_nav_for_components.rb @@ -2,8 +2,8 @@ Jekyll::Hooks.register :site, :post_read do |site| site.collections.each do |name, collection| - site.data['nav'][name] = collection.docs.map do |doc| - { 'href' => doc.url } - end + site.data['nav'] = collection.docs. + filter { |doc| doc.basename != 'index.md'}. + map { |doc| { 'href' => doc.url } } end end diff --git a/docs/_plugins/package_json_version.rb b/docs/_plugins/package_json_version.rb deleted file mode 100644 index fea8b2c0..00000000 --- a/docs/_plugins/package_json_version.rb +++ /dev/null @@ -1,14 +0,0 @@ -require 'json' - -Jekyll::Hooks.register :site, :after_init do |site| - package_json = JSON.parse(File.read('package.json')) - package_lock_json = JSON.parse(File.read('package-lock.json')) - - versions = package_lock_json['dependencies'].map do |name, details| - ["#{name}_version", details['version']] - end.to_h - - versions['this_version'] = package_json['version'] - - site.config['package_json'] = versions -end diff --git a/docs/_utilities/color.md b/docs/_utilities/color.md deleted file mode 100644 index d2400a81..00000000 --- a/docs/_utilities/color.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -title: Color -lead: > - These official colors connect the Login.gov brand across products — use them when possible. -redirect_from: - - /color/ ---- - -The color codes listed beneath each name indicate what names can be used with the U.S. Web Design System’s color utility classes. For example: - -
    - This element has classes bg-primary-lighter and text-primary-dark. -
    - -Read more about [the U.S. Web Design System’s color utility classes](https://designsystem.digital.gov/utilities/color/). - -## Featured palette -
    -
    - {% include helpers/color.html - name="Darker Blue / Navy" - code="primary-darker" - hex="#112e51" - text-color="white" - %} - {% include helpers/color.html - name="Blue" - code="primary" - hex="#0071bb" - text-color="white" - %} - {% include helpers/color.html - name="Lighter Blue" - code="primary-lighter" - hex="#ebf3fa" - text-color="black" - %} - {% include helpers/color.html - name="Red" - code="secondary" - hex="#e21c3d" - text-color="white" - %} -
    -
    - -## Extended palette - -
    - -### Primary - -
    - {% include helpers/color.html - name="Lightest Blue" - code="primary-lightest" - hex="#f2f9ff" - text-color="black" - %} - {% include helpers/color.html - name="Lighter Blue" - code="primary-lighter" - hex="#ebf3fa" - text-color="black" - %} - {% include helpers/color.html - name="Light Blue" - code="primary-light" - hex="#cedced" - text-color="black" - %} - {% include helpers/color.html - name="Blue" - code="primary" - hex="#0071bb" - text-color="white" - %} - {% include helpers/color.html - name="Dark Blue" - code="primary-dark" - hex="#205493" - text-color="white" - %} - {% include helpers/color.html - name="Darker Blue / Navy" - code="primary-darker" - hex="#112e51" - text-color="white" - %} - {% include helpers/color.html - name="Darkest Blue" - code="primary-darkest" - hex="#0c213a" - text-color="white" - %} -
    - -### Secondary - -
    - {% include helpers/color.html - name="Lightest Red" - code="secondary-lightest" - hex="#fff0f3" - text-color="black" - %} - {% include helpers/color.html - name="Lighter Red" - code="secondary-lighter" - hex="#f3b8be" - text-color="black" - %} - {% include helpers/color.html - name="Light Red" - code="secondary-light" - hex="#ea7b85" - text-color="black" - %} - {% include helpers/color.html - name="Red" - code="secondary" - hex="#e21c3d" - text-color="white" - %} - {% include helpers/color.html - name="Dark Red" - code="secondary-dark" - hex="#ab142f" - text-color="white" - %} - {% include helpers/color.html - name="Darker Red" - code="secondary-darker" - hex="#8b0a21" - text-color="white" - %} - {% include helpers/color.html - name="Darkest Red" - code="secondary-darkest" - hex="#680617" - text-color="white" - %} -
    - -### Base - -
    - {% include helpers/color.html - name="Lightest Grey" - code="base-lightest" - hex="#f0f0f0" - text-color="black" - %} - {% include helpers/color.html - name="Lighter Grey" - code="base-lighter" - hex="#dedede" - text-color="black" - %} - {% include helpers/color.html - name="Light Grey" - code="base-light" - hex="#adadad" - text-color="black" - %} - {% include helpers/color.html - name="Grey" - code="base" - hex="#767676" - text-color="white" - %} - {% include helpers/color.html - name="Dark Grey" - code="base-dark" - hex="#5c5c5c" - text-color="white" - %} - {% include helpers/color.html - name="Darker Grey" - code="base-darker" - hex="#454545" - text-color="white" - %} - {% include helpers/color.html - name="Darkest Grey" - code="base-darkest" - hex="#1b1b1b" - text-color="white" - %} -
    - -
    - {% include helpers/color.html - name="Ink Grey" - code="ink" - hex="#454545" - text-color="white" - %} -
    - -### Accent cool - -
    - {% include helpers/color.html - name="Lightest Teal" - code="accent-cool-lightest" - hex="#ecfcff" - text-color="black" - %} - {% include helpers/color.html - name="Lighter Teal" - code="accent-cool-lighter" - hex="#b7dde9" - text-color="black" - %} - {% include helpers/color.html - name="Light Teal" - code="accent-cool-light" - hex="#7bbfd6" - text-color="black" - %} - {% include helpers/color.html - name="Teal" - code="accent-cool" - hex="#00a2c4" - text-color="black" - %} - {% include helpers/color.html - name="Dark Teal" - code="accent-cool-dark" - hex="#008099" - text-color="white" - %} - {% include helpers/color.html - name="Darker Teal" - code="accent-cool-darker" - hex="#007187" - text-color="white" - %} - {% include helpers/color.html - name="Darkest Teal" - code="accent-cool-darkest" - hex="#006175" - text-color="white" - %} -
    - -## State palette - -
    -
    - The state color palette is divided into five high-level role-based color families: info, error, warning, success, and disabled. -
    -
    - -### Info - -
    - {% include helpers/color.html - name="Lighter Info Teal" - code="info-lighter" - hex="#ecfcff" - text-color="black" - %} - {% include helpers/color.html - name="Light Info Teal" - code="info-light" - hex="#b7dde9" - text-color="black" - %} - {% include helpers/color.html - name="Info Teal" - code="info" - hex="#00a2c4" - text-color="black" - %} - {% include helpers/color.html - name="Dark Info Teal" - code="info-dark" - hex="#007187" - text-color="white" - %} - {% include helpers/color.html - name="Darker Info Teal" - code="info-darker" - hex="#006175" - text-color="white" - %} -
    - -### Error - -
    - {% include helpers/color.html - name="Lighter Error Red" - code="error-lighter" - hex="#fff0f3" - text-color="black" - %} - {% include helpers/color.html - name="Light Error Red" - code="error-light" - hex="#f3b8be" - text-color="black" - %} - {% include helpers/color.html - name="Error Red" - code="error" - hex="#e21c3d" - text-color="white" - %} - {% include helpers/color.html - name="Dark Error Red" - code="error-dark" - hex="#8b0a21" - text-color="white" - %} - {% include helpers/color.html - name="Darker Error Red" - code="error-darker" - hex="#680617" - text-color="white" - %} -
    - -### Warning - -
    - {% include helpers/color.html - name="Lighter Warning Yellow" - code="warning-lighter" - hex="#fffdd7" - text-color="black" - %} - {% include helpers/color.html - name="Light Warning Yellow" - code="warning-light" - hex="#fcf197" - text-color="black" - %} - {% include helpers/color.html - name="Warning Yellow" - code="warning" - hex="#f5d600" - text-color="black" - %} - {% include helpers/color.html - name="Dark Warning Yellow" - code="warning-dark" - hex="#847122" - text-color="white" - %} - {% include helpers/color.html - name="Darker Warning Yellow" - code="warning-darker" - hex="#504332" - text-color="white" - %} -
    - -### Success - -
    - {% include helpers/color.html - name="Lighter Success Green" - code="success-lighter" - hex="#ebfcef" - text-color="black" - %} - {% include helpers/color.html - name="Light Success Green" - code="success-light" - hex="#a6d5af" - text-color="black" - %} - {% include helpers/color.html - name="Success Green" - code="success" - hex="#18852e" - text-color="white" - %} - {% include helpers/color.html - name="Dark Success Green" - code="success-dark" - hex="#0e581e" - text-color="white" - %} - {% include helpers/color.html - name="Darker Success Green" - code="success-darker" - hex="#094316" - text-color="white" - %} -
    - -### Disabled - -
    - {% include helpers/color.html - name="Light Disabled Grey" - code="disabled-light" - hex="#f0f0f0" - text-color="black" - %} - {% include helpers/color.html - name="Disabled Grey" - code="disabled" - hex="#767676" - text-color="white" - %} - {% include helpers/color.html - name="Dark Disabled Grey" - code="disabled-dark" - hex="#454545" - text-color="white" - %} -
    diff --git a/docs/_utilities/images.md b/docs/_utilities/images.md deleted file mode 100644 index cbe68261..00000000 --- a/docs/_utilities/images.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Images -lead: This guidance is intended to help you use images effectively in Login.gov products. -redirect_from: - - /accessibility/policies/ - - /images/ ---- - -## Illustrations - -Login.gov uses illustrations throughout our products and services to help create an easy to follow guidance of our products and services. Below is guidance on how to use and create imagery that is in line with our brand. - -### Be useful - -Illustration provides context, adds clarity, builds consistency, and lead users to their next step. Ultimately, any illustration should provide a deeper understanding of the application or brand. - -### Be consistent - -Being consistent in illustration means considering details of a single illustration, as well as looking at the body of illustration work as a whole. Consistency speaks to quality: of the illustration and of the product it represents. - -### Be focused - -Illustration is most effective when it is precise in choosing a single message to deliver. With every narrative that is built there needs to be a focal point, a hierarchy of elements that contribute to the single, pointed message. With every illustration, we ask ourselves “what are we trying to say?” - -
    - Security key illustration - Failure illustration -
    - -### Be accessible - -Illustrations are often decorative images. A decorative image does not add information to the content of a page. Unlike an informative image, a decorative image can be hidden from screen readers. We set decorative images as "hidden" from screen readers to help prevent a confusing, redundant and/or a tedious experience. - -For decorative images, the `alt` attribute should be set as empty. Avoid ommitting the `alt` attribute altogether. If the `alt` attribute is not used, a screen reader will read out the full filename to the user, which is not an accessible or good user experience. - -**Additional resources on decorative images:** - -- [18F Accessibility Guide: Images](https://accessibility.18f.gov/images/) -- [Accessibility for Teams: UX Design - Images](https://accessibility.digital.gov/ux/images/) -- [W3.org - Decorative Images](https://www.w3.org/WAI/tutorials/images/decorative/) -- [W3.org - Tips and Tricks for Text Alternatives](https://www.w3.org/WAI/tutorials/images/tips/) -- [W3.org WAI-ARIA - 5.2.7 Accessible Name Calculation](https://www.w3.org/WAI/PF/aria/complete#namecalculation) (When working with an aria-label attribute) -- [WebAIM: Alternative Text - Context is Everything](https://webaim.org/techniques/alttext/#context) diff --git a/docs/_utilities/typography.md b/docs/_utilities/typography.md deleted file mode 100644 index 15c1f490..00000000 --- a/docs/_utilities/typography.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Typography -lead: > - When writing longform text (a page like this), wrap the text in div.usa-prose to activate these styles. -redirect_from: - - /typography/ ---- - -## Display, headings, and lead - -Use div.usa-prose to indicate that the immediately containing headings and paragraphs should be considered a longform text document. - -
    -
    How Login.gov keeps personal information private (div.usa-display)
    - -

    Login.gov encrypts the personal information of each user separately, using a unique value generated from each user’s password. Our encryption method works like a safe deposit box in a bank vault. Only the user has the key. Only the user can open the box to reveal the contents. Only the user knows the password, and only the user can decrypt their information. (p.usa-intro)

    - -

    The vault (h1)

    - -

    It’s hard to break into the “vault” or database. Login.gov implements the latest National Institute of Standards and Technology (NIST) standards for secure authentication and verification. Our plans for ongoing security include regular penetration testing and external security reviews.

    - -

    The safe deposit box (h2)

    - -

    Individual accounts get a double layer of security. We require two-factor authentication as well as strong passwords that meet new NIST requirements. Two factor authentication requires that you login with your password and a code that we send to your phone.

    - -

    We will evaluate and implement new authentication methods as they become widely available to make sure that Login.gov remains accessible and secure.

    - -

    Your personal key (h3)

    - -

    Encrypting personal data separately means that Login.gov cannot share any information with other government entities without users’ permission. Not even database administrators can decrypt a user’s personal information without the user’s password.

    - -

    Join us on GitHub (h4)

    - -

    We welcome external review of our privacy-protection measures. All of our code is available for public inspection in an open-source repository. Our goal: make sure that at every step users know their privacy is being protected by design.

    - -
    More information on Login.gov (h5)
    - -

    For more information, please visit the Login.gov Help Center or contact us. You can also visit our open-source repository.

    - -
    Simple and secure (h6)
    - -

    Dedicated teams of design and security experts will continuously improve it.

    - - -
    diff --git a/docs/accessibility.md b/docs/accessibility.md deleted file mode 100644 index 7fd70f6b..00000000 --- a/docs/accessibility.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -permalink: /accessibility/ -title: Accessibility -redirect_to: https://login.gov/accessibility/ ---- diff --git a/docs/brand.md b/docs/brand.md deleted file mode 100644 index 90918aed..00000000 --- a/docs/brand.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -permalink: /brand/ -title: Brand -sidenav: - - text: Logo - href: "#logo" - - text: Logo usage - href: "#logo-usage" - - text: Tagline - href: "#tagline" -lead: > - When working with the Login.gov brand, follow these guidelines to ensure you're representing the product in a consistent way across all mediums. ---- - -## Logo - -Consistent and repeated use of the logo and lockups will establish equity and strengthen the visual identity of Login.gov. To ensure consistency, it is critical that every person who uses the logo does so in accordance with the guidelines that follow, regardless of personal preference. - -### The shield and wordmark - -The Login.gov logo is the cornerstone of our brand. Whenever possible, the red and blue version should be used. A white (or reverse) version can be used on a dark background. - -Login.gov logo - -Login.gov logo - -### Whitespace - -The logo should always be surrounded by generous white space. The diagram below defines the minimum amount of clear space needed, which is based on the cap-height of the typography. - -Login.gov logo spacing diagram - -### Minimum size - -Establishing a minimum size ensures that the impact and legibility of the logo is not compromised in application. - -Login.gov logo minimum size diagram - -## Logo Usage - -### Incorrect color usage - -For optimum legibility and brand consistency, the logo should never be used in white with a light background. Conversely, the standard logo should never appear on a dark background. - -Login.gov logo - -Login.gov logo - -### Do not modify the logo - -
    -
    - Do not outline. - Login.gov logo outlined -
    -
    - Do not skew. - Login.gov logo skewed -
    -
    - Do not apply effects. - Login.gov logo with effects -
    -
    - Do not adjust spacing. - Login.gov logo spaced -
    -
    - Do not apply drop shadows. - Login.gov logo shadowed -
    -
    - Do not distort. - Login.gov logo distorted -
    -
    - Do not apply brand colors. - Login.gov logo brand colored -
    -
    - Do not apply gradients. - Login.gov logo gradiented -
    -
    - Do not rotate. - Login.gov logo rotated -
    -
    - Do not mask images or graphics. - Login.gov logo masked -
    -
    - Do not use additional colors. - Login.gov logo colored -
    -
    - Do not separate the shield from the wordmark. - Login.gov logo separated -
    -
    - -## Tagline - -Taglines help to create a continued, consistent brand messaging. Login.gov has created a plain language tagline: - -**"The public's one account for government."** - -This tagline is meant to be used alongside our logo and other marketing materials to simply describe our program. diff --git a/docs/img/login-gov-logo-brand-colored.svg b/docs/img/login-gov-logo-brand-colored.svg deleted file mode 100644 index 2bb1cf70..00000000 --- a/docs/img/login-gov-logo-brand-colored.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 16@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-colored.svg b/docs/img/login-gov-logo-colored.svg deleted file mode 100644 index eafa54df..00000000 --- a/docs/img/login-gov-logo-colored.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 18@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-distorted.svg b/docs/img/login-gov-logo-distorted.svg deleted file mode 100644 index 67e81f18..00000000 --- a/docs/img/login-gov-logo-distorted.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 12@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-gradiented.svg b/docs/img/login-gov-logo-gradiented.svg deleted file mode 100644 index 8c11c1b8..00000000 --- a/docs/img/login-gov-logo-gradiented.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 13@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-masked.svg b/docs/img/login-gov-logo-masked.svg deleted file mode 100644 index 404d15c7..00000000 --- a/docs/img/login-gov-logo-masked.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 20@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-minimum-size.svg b/docs/img/login-gov-logo-minimum-size.svg deleted file mode 100644 index e882caee..00000000 --- a/docs/img/login-gov-logo-minimum-size.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - Group 4 - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-outlined.svg b/docs/img/login-gov-logo-outlined.svg deleted file mode 100644 index 8b580ba1..00000000 --- a/docs/img/login-gov-logo-outlined.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 9@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-rotated.svg b/docs/img/login-gov-logo-rotated.svg deleted file mode 100644 index b0fbc0d3..00000000 --- a/docs/img/login-gov-logo-rotated.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 10@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-shadowed.svg b/docs/img/login-gov-logo-shadowed.svg deleted file mode 100644 index 6397566f..00000000 --- a/docs/img/login-gov-logo-shadowed.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 11@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-skewed.svg b/docs/img/login-gov-logo-skewed.svg deleted file mode 100644 index 177b7f6d..00000000 --- a/docs/img/login-gov-logo-skewed.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 14@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-spaced.svg b/docs/img/login-gov-logo-spaced.svg deleted file mode 100644 index d8de6ea3..00000000 --- a/docs/img/login-gov-logo-spaced.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 19@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-spacing.svg b/docs/img/login-gov-logo-spacing.svg deleted file mode 100644 index eeb395b0..00000000 --- a/docs/img/login-gov-logo-spacing.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - Group 2 - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-logo-with-effects.svg b/docs/img/login-gov-logo-with-effects.svg deleted file mode 100644 index 4af77f61..00000000 --- a/docs/img/login-gov-logo-with-effects.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Asset 17@2x - Created with Sketch. - - - - \ No newline at end of file diff --git a/docs/img/login-gov-shield.svg b/docs/img/login-gov-shield.svg deleted file mode 100644 index cac9baee..00000000 --- a/docs/img/login-gov-shield.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - Group 9 - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/docs/index.md b/docs/index.md deleted file mode 100644 index 2d3347b1..00000000 --- a/docs/index.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -permalink: / -layout: home -title: Overview -lead: > - Use the Login.gov Design System when developing Login.gov sites to consistently identify the Login.gov brand. ---- - -
    -
    -
    -
    -
    - The key to a strong brand
    is consistency. -
    -

    {{ page.lead }}

    - See installation instructions on GitHub -
    -
    -
    -
    - -
    -
    -
    -
    -
    - -# Installs in seconds - -Install images, stylesheets, and script files in both their original and compiled forms with npm. - -
    -
    -
    -
    - -# Built with USWDS - -The {{ site.title }} is built using the [U.S. Web Design System](https://designsystem.digital.gov/) for a consistent appearance across government sites. - -
    -
    -
    -
    - -# A work in progress - -The latest version is {{ site.package_json.this_version }} which uses uswds@{{ site.package_json['@uswds/uswds_version'] }}. Spot an issue? We’d love to hear about it [on GitHub](https://github.com/18F/identity-design-system/issues). - -
    -
    -
    -
    -
    diff --git a/docs/security-experience-principles.md b/docs/security-experience-principles.md deleted file mode 100644 index 10d6c867..00000000 --- a/docs/security-experience-principles.md +++ /dev/null @@ -1,45 +0,0 @@ ---- -permalink: /security-experience-principles/ -title: Security Experience Principles -lead: > - Login.gov is a human-centered design product and service with a specific focus on creating an optimal security experience for the public. ---- - -Our team leverages the following principles to guide us to create the best security product for the public. - -We also leverage the [U.S. Web Design System’s design principles](https://designsystem.digital.gov/design-principles/) to guide our work. - -## Security experience is everyone’s job. - -**Creating a secure, usable experience is a priority for everyone at Login.gov.** We are all responsible for maintaining the integrity of our products and services. We prioritize protecting the public’s data in sync with our practice of continuously improving our product. As users use Login.gov, we should ensure their security awareness is raised. We want to affect users to keep their entire digital presence secure, not just their Login.gov presence. [You can read more about our security and privacy practices](https://login.gov/policy/our-security-practices/). - -### Key considerations - -- Will a change to the visual design or content of our product impact the users' understanding of the security of the product? -- What are we doing to keep track of the security implications for any changes made to Login.gov? -- What are we doing to continue the practice of keeping our data private? -- Are users given options to show/hide sensitive data? -- Will a change to visual design or content require storing new data via the server or the browser? -- Does this change share new data not previously shared? Or share that data with a new audience? -- Will error states or displayed messages reveal too much information and create a security risk? - -## The public controls their data, not us. - -**Users are in control of their data. We prioritize user privacy and do not profit from sharing user data.** Personally Identifiable Information (PII) is only shared as needed and all sensitive data is encrypted. Our encryption methods are like putting data in a safety deposit box and only users have the key. Users have the ability to share or hide sensitive information, give or revoke consent to share that data or delete that data at any time. - -### Key considerations - -- Are users aware of what data they are sharing, who they are sharing it with and how it is used? -- Is language around consent for sharing their data written in [plain language](https://www.plainlanguage.gov/) and [accessible](https://login.gov/accessibility/)? -- Does the public understand that they have the right to revoke consent of the sharing of their data? - -## Simple, secure login for everyone. - -**Using our product is simple and secure.** Whether users interact with our product once or multiple times a day, their experience with Login.gov will be seamless. Design and content facilitates ease of use and allows users to focus on the task they are trying to complete with our partner agencies. - -### Key considerations - -- Is our design and content helping or hindering users from completing the task at hand? -- Are we consistently testing our designs and content with the public? -- Are we looking for things to remove or streamline to help users quickly get on their way to the partner site? -- Are we guiding users with low security awareness towards the most secure options? diff --git a/test/accessibility.test.js b/test/accessibility.test.js index 7b9ca0e3..4acde1d7 100644 --- a/test/accessibility.test.js +++ b/test/accessibility.test.js @@ -1,12 +1,13 @@ /* eslint-disable no-await-in-loop */ import path from 'path'; -import { getURLsFromSitemap } from './support/sitemap'; +const LOCAL_HOST = `http://localhost:${process.env.JEST_PORT}`; const MESSAGE_TYPE_ERROR = 1; test('accessibility', async () => { - const urls = await getURLsFromSitemap(); + await page.goto(LOCAL_HOST); + const urls = await page.$$eval('.usa-nav__link', (links) => links.map((link) => link.href)); for (const url of urls) { await page.goto(url); diff --git a/test/color.test.js b/test/color.test.js deleted file mode 100644 index 8345b739..00000000 --- a/test/color.test.js +++ /dev/null @@ -1,26 +0,0 @@ -const host = `http://localhost:${process.env.JEST_PORT}`; - -const rgb2hex = (rgb) => { - const [, red, green, blue] = /rgb\((\d+), (\d+), (\d+)\)/.exec(rgb); - const parts = [red, green, blue].map((d) => `0${Number(d).toString(16)}`.slice(-2)); - return `#${parts.join('')}`; -}; - -test('hex codes match background color on the color documentation page', async () => { - await page.goto(`${host}/utilities/color/`); - const colors = await page.$$eval("[data-test='color-swatch']", (els) => - [...els].map((el) => { - const text = el.innerText.trim(); - const background = window.getComputedStyle(el).backgroundColor; - - return { text, background }; - }), - ); - - expect(colors.length).toBe(56); - - colors.forEach((swatch) => { - const backgroundColor = rgb2hex(swatch.background); - expect(swatch.text).toBe(backgroundColor); - }); -}); diff --git a/test/screenshot.test.js b/test/screenshot.test.js index 52334e08..9890e3bc 100644 --- a/test/screenshot.test.js +++ b/test/screenshot.test.js @@ -5,7 +5,6 @@ const { join } = require('path'); const assert = require('assert'); const { PNG } = require('pngjs'); const match = require('pixelmatch'); -const { getURLsFromSitemap } = require('./support/sitemap'); const { writeFile, mkdir } = fsPromises; @@ -80,7 +79,9 @@ function fillImageToSize(image, width, height) { } test('screenshot visual regression', async () => { - const paths = (await getURLsFromSitemap()).map(getURLPath); + await page.goto(LOCAL_HOST); + const urls = await page.$$eval('.usa-nav__link', (links) => links.map((link) => link.href)); + const paths = urls.map(getURLPath); for (const path of paths) { const local = await getScreenshot(LOCAL_HOST + path); diff --git a/test/support/sitemap.js b/test/support/sitemap.js deleted file mode 100644 index dcf66e15..00000000 --- a/test/support/sitemap.js +++ /dev/null @@ -1,12 +0,0 @@ -const LOCAL_HOST = `http://localhost:${process.env.JEST_PORT}`; -const REMOTE_HOST = 'https://design.login.gov'; - -function getNormalizedURL(url) { - return url.replace(REMOTE_HOST, LOCAL_HOST); -} - -export async function getURLsFromSitemap() { - await page.goto(`${LOCAL_HOST}/sitemap.xml`); - const urls = await page.$$eval('url loc', (locs) => locs.map((loc) => loc.textContent)); - return urls.map(getNormalizedURL); -}