az-digital / arizona-bootstrap Goto Github PK

Cameron - We are waiting on departmental NetIDs for using Proxima Nova. 7/30

Motivation

Currently, Arizona Bootstrap partly follows arbitrary recent changes to the upstream Twitter Bootstrap v4-dev branch, and partly numbered upstream releases.

Is your feature request related to a problem? Please describe.

Arizona Bootstrap developers don't have a clear upstream reference for any significant changes (for example the feature/93 restoration of JS tooling).

Proposed Resolution

Describe the solution you'd like

Explicitly tie the routine housekeeping Arizona Bootstrap updates (needed to keep ahead of security issues and upstream bug fixes) to tagged upstream releases.

Motivation

The mobile menu will be more usable if we are able to have multiple sections open at the same time.

Is your feature request related to a problem? Please describe.

Currently, when you expand a menu item, it will close the other expanded item. This can cause you to lose your place in the menu if the expanded item is above your scrolled location.

Proposed Resolution

Describe the solution you'd like

Expanding additional sections of the menu will not close currently expanded sections.

Additional context

The current design mockups include multiple sections expanded at once.

Problem/Motivation

It appears that the transparent background classes might have been accidentally overlooked in recent changes to the text color + background color CSS.

Also noticed that the .sans class it not working. Will also correct that while I'm fixing this bug.

Describe the bug

Transparent background colors are no longer receiving the proper text color to ensure accessibility/contrast. Possibly related to #22 but haven't verified yet.

To Reproduce

Add a div with a transparent background color (i.e., .bg-transparent-white and add either a heading tag or paragraph tag inside. Text (in this example) will be white instead of being black.

Proposed resolution

Modify the CSS so it's receiving the proper contract check in the Mixin.

Expected behavior

Should act the same as the fully opaque background color classes.

Do not disclose security vulnerabilities here, please email us instead:
[email protected]

Motivation

For the new mobile nav, it needs to have it's own unique styling to match the mockup.

Is your feature request related to a problem? Please describe.

In the off canvas menu, the existing dropdown styles will conflict with the new styles that will be added.

Proposed Resolution

Describe the solution you'd like

Provide additional Arizona Bootstrap styles that are responsible for the look of the off-canvas menu that override the current styling for drop down menus.

Additional context

We can use these styles as a guide:
https://github.com/az-digital/az_quickstart/compare/offcanvas-demo#diff-5a2787674d768a086c71b3298d2d0087

Describe the bug
When compiling arizona-bootstrap locally (npm), all SCSS variables (116 total, currently) error out and ask for the !default flag to be applied. This prevents local work from compiling. This was accidentally removed from .stylelintrc in #13; this PR will add it back in.

To Reproduce
Steps to reproduce the behavior:

1. cd into arizona-bootstrap local repo
2. npm run start (or other method)
3. Make a change to the _custom-variables.scss file
4. Save
5. Wait for re-compile, and list see errors pertaining to $ variables

Expected behavior
Compile without Expected !default flag for $variable-name errors

User Story(s)

As an admin of the Arizona Digital team, I'd like certain CI tasks to be automatically triggered/ran each time code is committed/merged in to the main branch of the AZ Bootstrap code base in order to make it easier for members of the Arizona Digital team to have access to the latest development version of the AZ Bootstrap documentation and assets.
…

Conditions of satisfaction

Should add GitHub Actions configuration that does the following anytime code is committed/merged into the main branch:

• Builds dist assets
• Builds documentation site artifact
• Deploys dist assets to ‘master’ assets CDN directory
• Deploys documentation site artifact to ‘master’ documentation site
• Invalidates assets CDN cache for ‘master’ directory
• Invalidates CDN cache for ‘master’ documentation site
• Strategy for managing cache TTLs for assets is decided upon

The initial version of arizona-bootstrap on GitHub is a close copy of the original Bitbucket repository, including various obsolete hard-coded Bitbucket references that do not make sense on GitHub.

What is the problem that we want to solve?

The general-purpose Docker image used in the builds needs several additional steps that are slow and can be unreliable, particularly for npm install. We should investigate whether derived temporary Docker containers work around this for both local development and GitHub Actions, or whether GitHub Actions can handle the CI aspect, with more work being needed for local development.

Conditions of satisfaction.

• Either a proof-of-concept improved Docker-based environment for CI and local dev.
• Or a GitHub Actions-specific improvement proof-of-concept.
• An estimate of time and effort is provided for the recommendation.

Motivation

Functioning mobile navigation for Bootstrap & AZQS MVP.

Proposed Resolution

Describe the solution you'd like

Provide an off-canvas and on-canvas working example of a mobile navigation. This task will not include style improvements, but will focus on functionality (since design discussions are still in the works).

• Leverage as much existing classes/markup in Bootstrap as possible
• Minimize custom JS
• Add to documentation (similar to what we did for utility links in nav)

Motivation

UA Bootstrap provided undocumented custom styles for "utility links" that were used by UA Zen to style items in the custom uaqs-utility-links menu provided by UA Quickstart.

We need to style the utility links provided by AZ Quickstart the same way. Attendees of the 2020-05-08 AZ Digital meeting agreed that we should come up with a more re-usable way of implementing the utility link styles in Arizona Bootstrap than the UA Bootstrap implementation.

Proposed Resolution

Describe the solution you'd like

Options that were discussed in the 2020-05-08 AZ Digital meeting included:

• Add a new "Utility Links" component to Arizona Bootstrap (and document it)
• Add a nav- class that can be used to apply the "Utility Links" styles to Nav components (and document it)
• Add a navbar- class that can be used apply the "Utility Links" styles to Navbar components (and document it)
• Add a more generic utility class that can be used to apply "Utility Links" styles to more than one type of component (and document it)

Describe alternatives you've considered

We also considered directly copying the styles as currently defined in UA Bootstrap.

Motivation

We've decided to re-vamp our mobile navigation (see #82, #90). In order to support the navigation style/functionality we've decided on, we will need to add a small amount of custom JS to arizona bootstrap however

Is your feature request related to a problem? Please describe.

About a year ago we decided to simplify our existing package.json JS tasks for UADIGITAL-2058 which removed many of the tools/configuration needed to support custom JS in arizona-bootstrap so we'll need to look at adding that back.

Proposed Resolution

Describe the solution you'd like

Add back JS compiling/bundling tooling and configuration (copied from twbs/bootstrap) to arizona-bootstrap.

@camikazegreen commented on Wed May 20 2020

Motivation

Current Quickstart 1.0 menus have white text and no underline on the dropdown menus.

Is your feature request related to a problem? Please describe.

We are trying to match parity of the existing menus.

Proposed Resolution

Describe the solution you'd like

Normal elements on dropdown menus should have white text and no underline.
Active elements on dropdown menus should be inverted with white backgrounds and Arizona Blue text.

@joshuasosa commented on Fri Jun 05 2020

On UA Quickstart, these dropdown menus are styled in UA Bootstrap. In keeping parity, should menu styles be in AZ Bootstrap or in AZ Quickstart? If Bootstrap, then should this issue be moved over to arizona-bootstrap?

@camikazegreen commented on Fri Jun 05 2020

@joshuasosa We are trying to make sure that all necessary styles or classes are available in Arizona Bootstrap so that it is easier for non-Drupal users to make similar menus.
I agree that the issue should be moved over to arizona-bootstrap.

The development dependencies in the Gemfile and package.json (with the corresponding lock files) in the upstream TWBS v4-dev branch have updated since the start of arizona-bootstrap, and should be re-synchronized. At least one of the changes is a security update, and there's also a small correction to one of the scripts in package.json. The changes also have implications for the dependencies specified in the _config.yml jekyll configuration.

Was previously named "Recreate Bitbucket Pipelines as GitHub Actions for Bootstrap"

Now that we've moved this repository to GitHub and replaced references to Bitbucket (#3, #4), we need to recreate all of the automation features we had added with Bitbucket Pipelines (see old bitbucket-pipelines.yml) using GitHub Actions.

Add readme for arizona bootstrap.
Here is the bootstrap 4 readme https://github.com/twbs/bootstrap/blob/master/README.md
We should highlight the differences between BS4 and AZBoostrap, possibly link to ua-bootstrap.

https://jira.arizona.edu/browse/UADIGITAL-2187

Finish going through audit items:https://docs.google.com/spreadsheets/d/1tgGDGHV6Wqts3b88Jp_CbmsUnmMg1O5s0W7zUgeXuLs/edit#gid=0

• Going back through the audit results to finish out "to-do" items and auditing the _custom_overrides.scss file.

Motivation

As of #67, we are now using the same basic aws s3 sync command --cache-control options that were used for UA Bootstrap when uploading Arizona Bootstrap assets to the Arizona Digital CDN. All files are currently getting configured with a max-age value of 691200 seconds (8 days). We should probably be a little more strategic about what TTL values we use for different types of files (e.g. use longer TTLs for image files).

Proposed Resolution

Describe the solution you'd like

Come up with a more granular strategy for setting cache TTLs for files uploaded to the Arizona Digital CDN either by modifying the aws s3 sync commands used in our GitHub Actions workflow(s) or by applying configuration rules to the AWS CloudFront distros / S3 buckets that will allow us to apply different cache lifetimes for different types of files.

Motivation

In some cases Arizona Bootstrap builds use an out-of-date Docker image.

Is your feature request related to a problem? Please describe.

The SHA256 hash used to tag the Docker image that several different Arizona Bootstrap builds can potentially use is supposed to change when any of the image dependencies change, but changes to the scripts subdirectory don't affect it.

Proposed Resolution

Add the contents of the scripts subdirectory to the SHA256 hash computation.

Problem/Motivation

Rather than labelled numbers numbers referencing an issue (bug/..., feature/...) some of the review sites are being identified as ../merge.

Describe the bug

The interpretation of the GITHUB_REF environment variable in the action os incorrect.

Additional context

See the comments on
https://stackoverflow.com/questions/58033366/how-to-get-current-branch-within-github-actions

Describe the bug
Existing scss creates unnecessary/misleading color class combinations.

e.g. Remove unnecessary combinations like this:
.bg-red p.text-color-red

closed as mistake/duplicate az-digital/az_quickstart#81

We need infrastructure to deploy review sites to for pull requests.

Describe the bug
Upstream https://github.com/twbs/bootstrap/tree/v4-dev now includes another set of dev dependency changes, in particular from the pull request twbs/bootstrap#30006 ( I like the phrase in the initial comment “In the past we considered such changes breaking ones.“). For example, there is a move to a new major release version of Jekyll.

To Reproduce
Steps to reproduce the behavior:
View the arizona-bootstrap repository on GitHub: there is now a security warning which does not appear on the upstream repository.
Errors appear in some local development environments.

Motivation

Pull request reviewers have to wait several minutes before new or modified Arizona Bootstrap review sites are ready.

Is your feature request related to a problem? Please describe.

The improvements to speed up Docker support for Arizona Bootstrap builds in local dev environments slow down builds in Github Actions, because the ephemeral images don't persist there.

Proposed Resolution

Start using the GitHub Package Registry to keep copies of the Docker images between builds, but only for Github Actions.

Problem/Motivation

Collapse example on the documentation site is using h3s, which is causing margin issues.

Describe the bug

Margin inside collapse headers, which doesn't need to be there.

To Reproduce

View the accordion example on the docs site, note the margin-top on the header due to the use of an h3 tag.

Proposed resolution

Remove the h3 from the documentation example.

Expected behavior

No margin.

Describe the bug
This is the July 2020 repeat of Issue #24 — upstream https://github.com/twbs/bootstrap/tree/v4-dev now includes another set of dev dependency changes, including fixes for security issues.

To Reproduce
Steps to reproduce the behavior:
View the arizona-bootstrap repository on GitHub: there is now a security warning which does not appear on the upstream repository.
Errors appear in some local development environments.

User Story(s)

As an admin of the Arizona Digital team, I'd like to be able to manually trigger a CI job (GitHub Action) that automatically performs whatever tasks are necessary to create a new AZ Bootstrap release in order to make it easier to release the latest AZ Bootstrap improvements.
…

Conditions of satisfaction

Should add GitHub Actions configuration that provides a job/workflow which can be triggered manually by Arizona Digital team admins that does the following:

• Updates version info in package.json
• Creates a release commit
• Creates and pushes git tag
• Builds dist assets
• Builds documentation site artifact
• Deploys dist assets to release-specific CDN directory
• Deploys dist assets to ‘latest’ CDN directory
• Deploys documentation site artifact to prod documentation site
• Invalidates CDN cache for ‘latest’ directory
• Updates arizona-bootstrap-packagist repo (@kevcooper suggested adding a GitHub actions workflow to the arizona-bootstrap-packagist repo that can be triggered by an arizona-bootstrap release/tag)
• Creates Quickstart PR to update arizona-bootstrap-packagist version (?)

Problem/Motivation

Developers ad CI systems should be able to view and test the generated documentation web site.

Describe the bug

Jekyll breaks in some Docker-based local development environments: the configuration traps the site within the container providing the build environment.

To Reproduce

Steps to reproduce the behavior:

On host

1.1. git clone [email protected]:az-digital/arizona-bootstrap.git
1.2. cd arizona-bootstrap
1.3. docker run --rm -t -i -p 9001:9001 -v $(pwd):/arizona-bootstrap azdigital/az-node-jre-jekyll:0.0.1 /bin/bash

In container

2.1. cd arizona-bootstrap/
2.2. bundle install
2.3. npm install
2.4. npm run start

In browser

3.1. http://localhost:9001/arizona-bootstrap (fails to connect to a working site).

Proposed resolution

The current workaround is sed -i -e 's/"localhost"/0.0.0.0/' _config.yml after step 1.2. above, but this makes a spurious uncommitted git change; it should be switched by an environment variable setting instead.

Problem/Motivation

Nolink styles within the navbar component do not match the styles present for links within the navbar. Should probably add documentation regarding the recommendation that parent items in dropdowns should use nolink.

Also related: an additional ticket should be created for AZ Barrio (maybe?) to change the nolink from a span to a button to ensure it's still tab accessible.
See: https://www.drupal.org/project/drupal/issues/3153394

Describe the bug

Font-weight is defined within reset for all a tags (700). Nolinks (spans) so not receive that same font-weight. Buttons also do not receive this weight. The use of a button also incorporated a default (browser based) background color and border.

To Reproduce in Drupal

1. Add a <nolink> item to your navbar
2. Add a route:<button> item to your navbar
3. Add a link item to your navabr
4. Observe the visual difference between the 3 menu items.

To Reproduce in Bootstrap

1. Edit the navbar on the docs site to include a <span> and a <button> as the parents of 2 different dropdowns.
2. Observe the visual difference between the span and button you added, and regular link items.

Screenshot

Proposed resolution

• Define font-weight on the .nav-link class so that it applies to all items regardless of which HTML tag is used (a, span, button).
• Reset default background color and border for .nav-link.
• Add brief documentation about the preferred use of a button on the .dropdown-toggle in the navbar (since dropdowns open on click rather than hover).

Expected behavior

Link and nolink/button items should look the same in the navbar.

Motivation

As a screen reader user, when I click a button that opens the menu, I want to be informed that the menu is open.

Proposed Resolution

Describe the solution you'd like

This will involve editing the aria-expanded when the menu opens.

Additional context

We can look at how collapse.js (part of Bootstrap 4) modifies the markup when something is opened or closed.

Describe the bug
The npm commands in arizona-bootstrap fail or generate error messages.

To Reproduce
https://uarizona.slack.com/archives/CLWJM4JH2/p1581030340022400
Current state of local development for arizona-bootstrap: this is from testing on MacOS 10.13.6, Node.js v12.15.0, npm 6.13.4, ruby-2.7.0, OpenJDK 1.8.0_242, in a fresh clone of [email protected]:az-digital/arizona-bootstrap.git
npm install worked with minor warnings from ld.
bundle install worked, but started using Bundler 2.1.2, which modified Gemfile.lock (none of the dependencies changed, but it overwrote 1.17.3 with its own version in the “BUNDLED WITH” section).
npm run dist worked as expected, but did show the message “WARNING: Skipping remote @import of “https://cdn.uadigital.arizona.edu/lib/ua-brand-fonts/1.0.0/milo.min.css” as resource is not allowed.”
npm run docs worked, though there were voluminous deprecation warnings from Ruby in the Jekyll build step.
npm run test failed “ERROR: Task not found: “js-test”"
npm run docs-serve worked (with plenty of deprecation warnings from Ruby), but then there were some runtime errors on the terminal (and browser Javascript console when viewing the local site): “ERROR /arizona-bootstrap/docs/0.0/assets/js/vendor/bs-custom-file-input.min.js.map’ not found.” and “ERROR /arizona-bootstrap/docs/0.0/dist/js/bootstrap.bundle.js.map’ not found.”
Just specifying older versions should fix the Ruby deprecation warnings and Bundler version annoyance: that’s not something to do directly in arizona-bootstrap. But the failed npm run test and missing file messages might need a further round of issues and pull requests.

Expected behavior
Using npm run commands in arizona-bootstrap should work in the same way as the upstream (twbs) commands.

User Story(s)

As a member of the Arizona Digital team, I'd like to have a review site automatically generated and deployed when I submit PR in order to make it easier for members to review my proposed changes.
…

Conditions of satisfaction

Should add GitHub Actions configuration that does the following for submitted Pull Requests:

• Builds documentation site artifact
• Deploys documentation site artifact to review site
• Adds link to review site on PR

Problem/Motivation

There are some "hidden" linting errors displaying in the command prompt console when using npm to build a local copy of Arizona Bootstrap. The error doesn't display all the time, which is why it's "hidden". Just some minor syntax errors that don't break anything, but still throw errors.

Describe the bug

"file:/arizona-bootstrap/_site/docs/0.0/deprecated/index.html":791.3-791.154: error: Bad value "350px" for attribute "width" on element "img": Expected a digit but saw "p" instead.
"file:/arizona-bootstrap/_site/docs/0.0/deprecated/index.html":793.3-793.155: error: Bad value "350px" for attribute "width" on element "img": Expected a digit but saw "p" instead.
"file:/arizona-bootstrap/_site/docs/0.0/components/photo-gallery/index.html":487.3-487.145: error: The "aria-labelledby" attribute must point to an element in the same document.
"file:/arizona-bootstrap/_site/docs/0.0/backwards-compatibility/index.html":791.3-791.154: error: Bad value "350px" for attribute "width" on element "img": Expected a digit but saw "p" instead.
"file:/arizona-bootstrap/_site/docs/0.0/backwards-compatibility/index.html":793.3-793.155: error: Bad value "350px" for attribute "width" on element "img": Expected a digit but saw "p" instead.

To Reproduce

npm install
bundle install
npm run dist
npm run docs-review
npm run docs-lint

Proposed resolution

Remove the px unit from the markup.

Expected behavior

Markup should behave exactly the same, but no errors should be thrown by lint.

User Story(s)

As an Arizona Digital developer, I'd like for automatic linting checks to be run against my code changes when I submit a pull request to ensure coding standards are adhered to.
…

Conditions of satisfaction

• Should provide one or more GitHub Actions workflows that can be triggered by pull requests which run linting scripts automatically and prevent a PR from being merged if it introduces linting errors.

Is your feature request related to a problem? Please describe.
As a result of the decision made about replacing the institutional font from Milo to Proxima Nova, arizona-bootstrap should update which font it uses.

Describe the solution you'd like
I would like to easily use Proxima Nova where I used to use Milo in the same way that I use Milo now.

Describe alternatives you've considered
Other alternatives include.
Removing reference for Milo and add instructions on how to obtain and reference your own copy of Proxima Nova for each individual project you work on.
Build Proxima Nova into whatever calls arizona bootstrap.
Provide a shared link that people who work at the University of Arizona can use.

Additional context
We will need to review Typekit font licensing and usage with our needs in mind.

Problem/Motivation

Broken links in README.md

Describe the bug

All links in README.md are broken

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/az-digital/arizona-bootstrap/blob/master/README.md
2. Click on any link

Proposed resolution

Update links. (link to CONTRIBUTING.md should be case sensitive. Other files have been moved)