Skip to content

Commit

Permalink
Testing/vote 2497 testing (#908)
Browse files Browse the repository at this point in the history
* VOTE-464 Initialize redesign votegov theme

* VOTE-464 resolve phplint errors with new theme

* VOTE-414: scaffolding for header

* Header refinements

* Update text formats for wysiwyg content

* Add ordered list to simple text format

* VOTE-499 configure main menu
VOTE-497 configure sitewide alert

* VOTE-415 Configure footer

* VOTE-528: state page title scaffolding

* revert block placement

* VOTE-525: add breadcrumb module

* VOTE-418: Homepage template scaffolding (#445)

* add nvrf block to state page nodes

* fix page title

* create registration type template suggestions

* satisfy phplint

* state page main content scaffolding

* votegov theme refinements

* Remove unused files from bixal_uswds theme

* Update CI/CD and references to new theme

* Move drupal_breadcrumb enable to right config dir

* testing rolling deploy on test

* testing

---------

Co-authored-by: Ray Estrada <raymond.estrada@gsa.gov>
Co-authored-by: mlloydbixal <amanda.lloyd@gsa.gov>
Co-authored-by: Christian Medders - Bixal <88721460+clmedders@users.noreply.github.com>
  • Loading branch information
4 people authored Aug 7, 2024
1 parent a79001b commit 15b5aff
Show file tree
Hide file tree
Showing 99 changed files with 5,077 additions and 1 deletion.
12 changes: 12 additions & 0 deletions config/sync/bixal_uswds.settings.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
_core:
default_config_hash: cI-Pl1vK4EZIlVhkBeRB-LcoEoKTUgI5gdJ7paB8cQk
favicon:
use_default: true
features:
comment_user_picture: true
comment_user_verification: true
favicon: true
node_user_picture: true
logo:
use_default: true
time_picker_style: html5_time_picker
32 changes: 32 additions & 0 deletions config/sync/block.block.bixal_uswds_breadcrumbs.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
uuid: 9d925d66-c067-4f97-b040-543c96e23916
langcode: en
status: true
dependencies:
module:
- node
- system
theme:
- bixal_uswds
_core:
default_config_hash: W00dRxBD1MUkvdrG5GCp5ucRMano3bszsmhxU8gkn4E
id: bixal_uswds_breadcrumbs
theme: bixal_uswds
region: breadcrumb
weight: 0
provider: null
plugin: system_breadcrumb_block
settings:
id: system_breadcrumb_block
label: Breadcrumbs
label_display: '0'
provider: system
visibility:
'entity_bundle:node':
id: 'entity_bundle:node'
negate: false
context_mapping:
node: '@node.node_route_context:node'
bundles:
article: article
bx_update: bx_update
page: page
22 changes: 22 additions & 0 deletions config/sync/block.block.bixal_uswds_content.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
uuid: 2b0e2fb8-f0e6-4673-aa12-57a4701ff740
langcode: en
status: true
dependencies:
module:
- system
theme:
- bixal_uswds
_core:
default_config_hash: 2G5FjlDbZWWDTiD3NUntBHFuQ4sFrp1VsMH2kKIDB2I
id: bixal_uswds_content
theme: bixal_uswds
region: content
weight: -6
provider: null
plugin: system_main_block
settings:
id: system_main_block
label: 'Main page content'
label_display: '0'
provider: system
visibility: { }
22 changes: 22 additions & 0 deletions config/sync/block.block.bixal_uswds_local_tasks.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
uuid: fce6a776-e80f-4975-9fe8-8eb25533bcb4
langcode: en
status: true
dependencies:
theme:
- bixal_uswds
_core:
default_config_hash: ezVrmCOm0kkrQu3AkWTHOJo9DOQPkTDQcpUqjCx3QIQ
id: bixal_uswds_local_tasks
theme: bixal_uswds
region: help
weight: -5
provider: null
plugin: local_tasks_block
settings:
id: local_tasks_block
label: Tabs
label_display: '0'
provider: core
primary: true
secondary: true
visibility: { }
22 changes: 22 additions & 0 deletions config/sync/block.block.bixal_uswds_messages.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
uuid: 1b705334-213b-40ad-87d1-41af9695f461
langcode: en
status: true
dependencies:
module:
- system
theme:
- bixal_uswds
_core:
default_config_hash: KIRJdxuSar1WHKnHKfD-tAyAp6I6yTPBfDS9A6tBaTg
id: bixal_uswds_messages
theme: bixal_uswds
region: help
weight: -6
provider: null
plugin: system_messages_block
settings:
id: system_messages_block
label: 'Status messages'
label_display: '0'
provider: system
visibility: { }
20 changes: 20 additions & 0 deletions config/sync/block.block.bixal_uswds_page_title.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
uuid: ece2eb22-ccef-481a-9c95-71e72789e613
langcode: en
status: true
dependencies:
theme:
- bixal_uswds
_core:
default_config_hash: Y1X3ac5Q9KbzE_7p4d5WMA3P1WtvzLi4I56Cf_pddy8
id: bixal_uswds_page_title
theme: bixal_uswds
region: help
weight: -3
provider: null
plugin: page_title_block
settings:
id: page_title_block
label: 'Page title'
label_display: '0'
provider: core
visibility: { }
2 changes: 1 addition & 1 deletion scripts/pipeline/cloud-gov-post-deploy-upkeep.sh
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ if [[ ${CIRCLE_BRANCH} = "prod" ]]; then
fi

echo "Running upkeep..."
cf ssh ${project}-drupal-${CIRCLE_BRANCH} --command "PATH=/home/vcap/deps/1/bin:/home/vcap/deps/0/bin:/usr/local/bin:/usr/bin:/bin:/home/vcap/app/php/bin:/home/vcap/app/php/sbin:/home/vcap/app/php/bin:/home/vcap/app/vendor/drush/drush app/scripts/upkeep >/dev/null 2>&1 && echo 'Successfully completed upkeep!' || echo 'Failed to complete upkeep!'"
cf ssh ${project}-drupal-${CIRCLE_BRANCH} --command "ENV=${CIRCLE_BRANCH} PATH=/home/vcap/deps/1/bin:/home/vcap/deps/0/bin:/usr/local/bin:/usr/bin:/bin:/home/vcap/app/php/bin:/home/vcap/app/php/sbin:/home/vcap/app/php/bin:/home/vcap/app/vendor/drush/drush app/scripts/upkeep >/dev/null 2>&1 && echo 'Successfully completed upkeep!' || echo 'Failed to complete upkeep!'"

## Clean up.
if [[ ${CIRCLE_BRANCH} = "prod" ]]; then
Expand Down
117 changes: 117 additions & 0 deletions web/themes/custom/bixal_uswds/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
# Bixal USWDS v3 Theme

## General methodology

The idea behind this theme is to present a basis for using USWDS 3 in Drupal while at the same time following all the best practices that USWDS suggests to be followed with the advent of version 3 being released during the summer of 2022.

## Follow USWDS 3 best practices

More information is provided below but as a general rule, the idea here is to not write custom CSS unless you are building a custom component. There are few exceptions, for example in `bixal_uswds/src/sass/uswds-overrides` where there were a few cases of there not being a specific setting from USWDS. Even so, these files use USWDS mixins and functions.

## Use Lando and USWDS Compile!

It's imperative that you at least use USWDS compile which is in the `package.json` file and for an enhanced experience, use the provided Lando file in the `example-settings` folder. Then, you can run lando gulp and everything should just work. This theme was built with all that in mind so as to give everyone a uniform experience. If you go off the rails and do your own thing with the front-end build, it may be hard to provide support.

## Get Started

Once you setup Lando with the Lando file provided in the `example-settings` folder, cd into the theme folder and run `lando gulp`. That is all you need to do to start making CSS and USWDS theme updates.

When you run lando gulp you will see 2 URLs that come up in terminal with a port number appended. If you visit one of these URLs, you will get automatic reloading on save via BrowserSync. Note that compiling USWDS CSS can take up to 30 seconds.

## Overview of things to keep in mind.

Keep theme Sass files lean and simple. That is to say, think before you write custom css. There may be a setting for what you are trying to change. In fact there are hundreds of settings that can be used to override something in USWDS core listed on [the USWDS settings page](https://designsystem.digital.gov/documentation/settings/). And by core, we mean whatever is within `bixal_uswds/node_modules/@uswds/uswds`.

## The old vs the new method

The old method in version 2 seemed to be to copy all those sass files from the `node_modules` folder and then modify those as you liked. There were many downsides to that method but now with USWDS 3, we do not need to do that anymore.

At the heart of the theme is the file, `bixal_uswds/src/sass/_uswds-theme.scss`. This is where you will do any overrides from known settings from the aforementioned USWDS settings page. If you cannot find a setting for what you’d like to override, there are a few options in order of importance.

- Search the USWDS documentation

1. [Components overview](https://designsystem.digital.gov/components/overview/)
2. [Design Tokens](https://designsystem.digital.gov/design-tokens/)
3. [Utilities](https://designsystem.digital.gov/utilities/)
4. [Settings](https://designsystem.digital.gov/documentation/settings/)

If there is not an explicit setting for what you need to do, it may be that the maintainers of USWDS do not want you to change whatever you are trying to change. You may need to check with them to clarify things.

## Drupal USWDS theming principles

Here is a list of best practices for theming USWDS within Drupal

- Use Twig field Value and Twig Tweak within entity templates. By using these theming helper modules, you can remove drupal field templates. This is a good thing as field templates will often get in the way of adhering to USWDS markup. For example, in a Paragraphs template, you might have a field called `field_bx_title_eyebrow`. Using Twig field value, you would write that as `{{ content.field_bx_title_eyebrow | field_value }}`.

```twig
{% if content.field_bx_title_eyebrow %}
<span class="usa-hero__heading--alt">
{{ content.field_bx_title_eyebrow | field_value }}
</span>
{{ content.field_bx_title | field_value }}
{% endif %}
```

This method generally cuts out Drupal field templates and greatly simplifies the HTML markup as well as reducing the DOM load.

## Custom USWDS CSS examples

If you do get to the point of needing to write custom CSS, you will have built in tools to help. You can first search the node modules folder for a mixin or other function to use which will most likely work inside the `bixal_uswds` theme. So for example, let’s say you wanted to change the font size of `usa-hero__heading`.

Rather than this:

```css
.usa-hero__heading {
font-size: 22px;
}
```

Do one of these below:

```css
.usa-hero__heading {
@include typeset-h3;
}
```

Or:

```css
.usa-hero__heading {
font-size: font-size($theme-header-font-family, 7);
}
```

Or:

```css
.usa-hero__heading {
font-size: font-size($theme-header-font-family, "lg");
}
```

## Custom USWDS CSS mixin examples

Here is an example of using USWDS mixins, the example below is a bit nonsensical but it shows off the capabilities of the mixins.

```css
.my-element {
@include u-display("flex");
@include u-flex("column", "wrap");
@include u-border-bottom(2px, "solid", "primary");
@include u-text("primary");
@include u-bg("white");
@include u-padding-top(3);
@include u-margin-bottom(3);
}
```

You can view the USWDS documentation for utilities to see more examples at [https://designsystem.digital.gov/utilities/](https://designsystem.digital.gov/utilities/). Each page within this section has documentation for mixins. You can also look in USWDS core for other examples.

## Resources

- [USWDS](https://designsystem.digital.gov/)
- [Components overview](https://designsystem.digital.gov/components/overview/)
- [Design Tokens](https://designsystem.digital.gov/design-tokens/)
- [Utilities](https://designsystem.digital.gov/utilities/)
- [Settings](https://designsystem.digital.gov/documentation/settings/)
66 changes: 66 additions & 0 deletions web/themes/custom/bixal_uswds/bixal_uswds.breakpoints.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
bixal_uswds.images.small:
label: small
mediaQuery: ''
weight: 0
multipliers:
- 1x
- 2x
group: bixal_uswds.images

bixal_uswds.images.narrow:
label: narrow
mediaQuery: '(min-width: 480px)'
weight: 1
multipliers:
- 1x
- 2x
group: bixal_uswds.images

bixal_uswds.images.narrow_plus:
label: narrow
mediaQuery: '(min-width: 640px)'
weight: 1
multipliers:
- 1x
- 2x
group: bixal_uswds.images

bixal_uswds.images.medium:
label: medium
mediaQuery: '(min-width: 768px)'
weight: 3
multipliers:
- 1x
group: bixal_uswds.images

bixal_uswds.images.large:
label: wide
mediaQuery: '(min-width: 1024px)'
weight: 5
multipliers:
- 1x
group: bixal_uswds.images

bixal_uswds.images.large_plus:
label: wide
mediaQuery: '(min-width: 1140px)'
weight: 5
multipliers:
- 1x
group: bixal_uswds.images

bixal_uswds.images.wide:
label: wide
mediaQuery: '(min-width: 1280px)'
weight: 5
multipliers:
- 1x
group: bixal_uswds.images

bixal_uswds.images.wide_plus:
label: ultrawide
mediaQuery: '(min-width: 1400px)'
weight: 7
multipliers:
- 1x
group: bixal_uswds.images
30 changes: 30 additions & 0 deletions web/themes/custom/bixal_uswds/bixal_uswds.info.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
name: Bixal USWDS Theme (version 3.2.0)
type: theme
description: "Custom Drupal theme based on USWDS 3."
package: Core
core_version_requirement: "^9.4 || ^10"
base theme: stable
dependencies:
- drupal:twig_tweak
- drupal:twig_field_value
- drupal:admin_toolbar

regions:
preface: "Preface"
highlighted: "Highlighted"
breadcrumb: "breadcrumb"
help: "Help"
content: "Content"
sidebar: "Sidebar"
postscript: "Postscript"
footer: "Footer"
no_region: "Blocks for Twig Tweak, hidden, or other purposes"

## unset any unwanted CSS or JS.
libraries-override:
system/base: false
core/drupal.announce: false
paragraphs/drupal.paragraphs.unpublished: false
olivero/tabs:
js:
js/tabs.js: false
28 changes: 28 additions & 0 deletions web/themes/custom/bixal_uswds/bixal_uswds.libraries.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
global:
version: VERSION
css:
theme:
dist/css/styles.css: { minified: true }
js:
dist/js/uswds.min.js: { minified: true }
dist/js/bx-global.js: { minified: true }
dependencies:
- core/once
- core/drupal.active-link

form_range:
version: VERSION
js:
dist/js/bx-form-range.js: { minified: true }

# https://github.com/AgnosticUI/a11y-tabs
a11y_tabs:
version: VERSION
js:
dist/vendor/js/a11y-tabs.min.js: { minified: true }
dist/js/bx-a11y-tabs-init.js: { minified: true }

remote_video:
version: VERSION
js:
dist/js/bx-remote-video.js: { minified: true }
Loading

0 comments on commit 15b5aff

Please sign in to comment.