us-cbp / cbp-theme Goto Github PK
View Code? Open in Web Editor NEWUI Theme for U.S. Customs and Border Protection web applications
Home Page: https://us-cbp.github.io/cbp-theme
License: Other
UI Theme for U.S. Customs and Border Protection web applications
Home Page: https://us-cbp.github.io/cbp-theme
License: Other
As a new contributor, I would like a simple way to get started with the project so that I can contribute quickly with minimal friction.
Update the CBP-theme bootstrap aspect from 3 to 4. If there are any gotchas or changes in the use of current bootstrap classes, please document in this issue or the wiki.
Issue with Scoped Search - right border missing
See CBP Style Guide
https://us-cbp.github.io/cbp-style-guide/docs/patterns/search.html
All radio buttons and checkboxes need markup to associate them to their instructions. Label for and ID are the most commonly used form for this. Need exactly matching text in both the label for and ID for any given form control. Applies to radio buttons, checkboxes, and toggles (the toggles are currently correctly marked up).
Currently the sidebar headings have a border-top to mark a separation between filter content sections.
The border is placed at the boundary of padding-top and margin-top, which looks unbalanced at the moment.
We could control it better if we put border-bottom
on filter-group-content
and take out border-top
from filter-group-title
in _filters.scss
.
A descriptive alt text for image needed for Card Example.
As a developer, I would like to see examples of data visualizations such as high charts so that I can ensure it adheres with the look and feel of the CBP theme.
We need to discuss best practices for creating data visualization in general and how to adhere to the theme.
It would be lovely if someone could contribute a dockerfile so contributors could all have a consistent development environment to work with.
.cbp-brand
and .dhs-brand
don't show when styles are turned off. We should add sr-only
content for accessibility.
Edit:
As a developer, I need unit tests to cover the javascript functionality to ensure if I add or modify the cbp-theme that it will still work correctly.
As a user of the CBP Theme, I would like examples of select boxes that are a11y (accessible) so that my application can be more accessible.
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_01
https://make.wordpress.org/accessibility/2015/09/07/accessibility-usertest-select2/
After playing around in the Kitchen Sink, it has come to my attention that the links inside the navbar buttons (in the app-header class) result in an unrecognized expression syntax error when calling the JQuery. I've attached a screenshot example of the issue.
With this in mind, it is not possible to create links in the app-header navbar.
package.json
defines dependencies for jquery and jquery.inputmask.
However, the package dist
directory also contains both of these. We should get rid of one or the other to avoid confusion.
This may already be fixed but is a carry over issue from our previous project:
Card width and z-index is hard-coded and therefore breaks usage of cards in grids and other responsive schemes.
We don't need gzip files for distribution.
To reproduce in a webpack project:
import 'cbp-theme'
This is the error I'm getting:
ERROR in ./~/cbp-theme/dist/js/jquery.inputmask.bundle.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./jquery.inputmask in <truncated>\node_modules\cbp-theme\dist\js
@ ./~/cbp-theme/dist/js/jquery.inputmask.bundle.js 1369:48-99 1476:48-99 1937:48-99 2294:48-99 2342:48-99
ERROR in ./~/cbp-theme/dist/js/cbp-theme.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./jquery.inputmask in <truncated>\node_modules\cbp-theme\dist\js
@ ./~/cbp-theme/dist/js/cbp-theme.js 1997:48-97
@d-amit I think the resolution to this issue is to include jquery.inputmask.js
in the dist directory or re-work the bundling for jquery.inputmask.bundle.js
.
#23 We can fix these issues by moving to Webpack and let it handle the dependency order and inclusion.
The Powerpoint file attached has the 508 non-compliance issues for elements of the style guide. Not being able to tab into the actual style guide elements prevents some of the testing from being completed. Please advise when keyboard access from the left menu into the style guide itself is addressed, and I will complete that part of the testing.
There is still significant work to be done.
Style Guide 508 10-03-16.pptx
Ensure tables are accessible using Chrome Accessibility Tools.
As a developer, I would like the CBP Theme to be published as a webjar so that in an organization that only uses webjar for ui dependencies I will be able to consume it.
As a developer, I would like resources that for open source CBP projects, so that we have a shared understanding of best practices and guidelines for creating and maintaining open source projects for CBP.
Per discussion with @LaurenFormichella and @HMcFabulous, timeline needs to a little polished to be more inline with the look and feel of the overall theme. Some ideas we are still discussing include...
Further discussion is needed!
@HMcFabulous - Final approval on look and feel should come from you.
As a developer, I would like to incorporate security checks, testing, code coverage, static analysis to the continuous integration process so that we can ensure higher quality of code.
We currently use Travis CI and want to enhance the build process so we need to research tools to:
Currently the custom JS in cbp-theme looks for all selectize or select2 components and adds on a change listener to the components to add or remove 'is-dirty' class to apply MDL label animations.
Issue:
If application renders dom on the fly or is using React, the components are not present when the cbp-theme custom js is ran so those components dont have the getDirty method applied to them.
Proposed solution:
If we add logic to the singletons of select2 and selectize ( if they are present), that adds the logic to remove/add 'is-dirty' class on change of value. If anyone has an alternative solutions, please elaborate on this issue. Maybe override onChange to include this logic and extend previous onChange logic.
Current Workaround:
For my case, on the React event componentDidUpdate I run getDirty logic.
There are IE and FF "hacks" adjusting css to make the search example in the kitchen sink page line up properly within the navbar form in the top header. I think I tracked it down to a display: inline-block
that should be a just block
. That would help clean up the hacks a little.
Can we investigate the use of Webpack to bundle the final distribution?
Gulp can get quite convoluted.
Focus should move to the toasts when present for screen readers to recognize and read the message.
Updates to the Kitchen Sink Tables need to be maded based on feedback from our accessibility expert.
All of the tables shown need scope=row added, and some of them also need the scope=col identifier as well. There was one other table, Example A, that looked to be a layout table versus an actual data table. The scope=row needs to be on the most unique column of data to provide the best mapping for a screen reader.
Per feedback from our accessibility expert:
DONE - App Header: The arrow to open the drop down is not keyboard accessible, but it does open with 3 options via mouse. Must have keboard access as well.
DONE - The open and close carets at each section are not keyboard accessible, but the do function with mouse.
DONE - The options under Tags are not keyboard accessible. They can be executed by mouse.
DONE - The arrow to open the drop down is not keyboard accessible, but it does open with 3 options via mouse. Must have keyboard access as well.
Overall issue for ensuring accesibility (Section 508)
As a contributor, I would like to quickly see all the components so that I can quickly experiment, fix and improve the development loop and showcase components to other parties.
The current kitchen sink, the page with all the components, is currently hosted under app/kitchensink. Ideally, we would host it on Github Pages
File Upload examples need descriptive labels and ids.
As a developer, I would like to see the root or Github page home page url https://us-cbp.github.io so that we have a single destinations that describes the project and links to resources.
We need to create a simple home page, index.html, that links to the Kitchen Sink and eventually the CBP Style Guide.
The Mode of Transportation checkboxes on the vertical filters need descriptive and matching labels, ids.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.