us-cbp / cbp-style-guide Goto Github PK

Need to add Font style samples to the right of font names. Should this be live or as a png?

per @HMcFabulous

Where are the "Full Brand Palette Colors"- need to be added back in?

Per @HMcFabulous

[Breadcrumbs]

C11 - Under "Description" replace text with the following:
Breadcrumbs display the current path to a particular page relative to the starting point. Breadcrumbs provide a means for users to understand their current context in a hierarchical structure and the ability to navigate up the structure easily.

• Breadcrumbs display the current path as links separated by carets to indicate each level
• The navigation root is the first element on the left, the current location is the last element to the right
• The current location is not clickable
• Clicking on a link takes you to that screen

Depending on the complexity of the navigational hierarchy and the type of page or application, it may make sense for the breadcrumb to represent only part of the hierarchy while sub tabs/trees/navigation represent the remaining hierarchy.

[Buttons]
C12 - Replace the paragraph under "Buttons" with the following text:
Buttons are used as action triggers. Depending on the use case, buttons contain a label and/or an icon. There are a variety of styles, sizes, and variations that can be used for different situations.

All button labels are sentence case. Labels should be as short as possible while clearly explaining what will happen when the button is clicked.

C13 - Change "Button styles" to "Button Styles"
C14 - Change "Button sizes" to "Button Sizes"
C15 - Change the text under Button Sizes to:

• Large - use the btn-lg class
• Normal - no extra classes necessary
• Small - use the btn-sm class
• Extra small - use the btn-xs class

C16 - Change "Block level buttons" to "Block Level Buttons"
C17 - Change "Button groups" to "Button Groups"
C18 - Change "Toggle buttons" to "Toggle Buttons"
C19 - Change the copy from "Add the active class and the aria-pressed="true" attribute to a button." to "Add the active class and the aria-pressed="true" attribute to a button to visually hold a depressed state."
C20 - Change "Dropdown buttons" to "Dropdown Buttons"
C21 - Change "Split buttons" to "Split Buttons"
C22 - Change "Icon buttons" to "Icon Buttons"
C23 - Change text from "For an icon without chrome, use a btn-hover." to "For an icon without a border, use a btn-hover."

As a user, I would like to see approved or illegal instead of icons with regards to the 508 color combinations so that the page can be more accessible.

Colors are not mapped to theme.

per @HMcFabulous

Let's discuss whether we want to use the other filter examples from USPTO design patterns.

As a developer, I would like the language for the patterns sections to be updated with language and code examples so that I have a better understanding of best practices as it relates to various patterns like Tours, Headers, etc.

As a developer, I would like example layouts using the cbp-them so that I can determine which layout to use.

The current layout examples are using the old theme.

Page Layout png's don't line up with sections.

per @HMcFabulous

Layout examples have this:

     <footer role="banner" class="cbp-banner"></footer>

Which doesn't do anything.

Fonts need to be shown in style of actual font.

Per @HMcFabulous

Fix justification on 4th example alert. This is the red, double line alert.

As a user, I would like to see more examples of Cards so that I have a better understanding on where and when to apply the pattern.

For muted text: It is not compliant against white background, but we need to discuss use of muted text. Also, in context of disabled fields.

On the Style Guide Foundations > Icons page there are examples of using circles with icons. The styles are inline and should be replaced with stacked icons from font awesome.

Examples should include the same colors as well.

https://us-cbp.github.io/cbp-style-guide/docs/foundation/icons.html
http://fontawesome.io/examples/

Introduction of subtle colors that are derivations of primary hues. These are the colors found in alerts, labels and badges.
.tag-danger.subtle {
color: #a00000;
background-color: #f8ecec;
border: 1px solid #f1d9dd;
}

.label-danger.subtle {
color: #a00000;
background-color: #f8ecec;
border: 1px solid #f1d9dd;
}

.alert-danger {
background-color: #f8ecec;
border-color: #f1d9dd;
color: #a00000;
}

$state-success-bg: #ecf5ec !default;
$state-info-bg: #edf3f9 !default;
$state-warning-bg: #fef7ed !default;
$state-danger-bg: #f8ecec !default;
$state-primary-bg: #ecf1f4 !default;

As a developer, I need the CI build to build the Style Guide, run checks, and publish the Style Guide to GitHub pages, so that we can ship changes faster.

As a developer, I expect the examples from the kitchen sink to have examples that are in alignment with a11y and the CBP Theme, so that I can use them for development with confidence.

• We need to carry over the examples from the kitchen sink once the a11y issues are complete.

"Progress and Loading" section not visible on menu

This relates to examples of cbp-theme issue #117, #118, & #119

Too much white space above header. Need a break between sections.

per @HMcFabulous

Under "Icons and Sizes" example icons are not lined up. Need to align to bullets on left.

per @HMcFabulous

[Accordions]
C1 - Change "Expand/collapse behaviors" to "Expand/Collapse Behaviors"

[Contextual alerts]
C2 - Change "Contextual alerts" to "Contextual Alerts"
C3 - Under "Description" replace bulleted text with the following:

• Contextual alerts are positioned above the area or form they relate to
• They are often triggered by a user interaction
• They can be closable and can have other action buttons or links
• Alerts with low importance (info or success) can close automatically after 5 seconds (if desired).
• Alerts with high importance (warning or danger) should not close automatically, unless the situation has been resolved in some other way.

C4 - Replace example Alert copy with the following:

• Press the 'A' key to automatically assign a case. ×
• Case assigned to Jerry [Undo] ×
• Case assigned to Jerry ×
• There are more than 10 cases assigned to John ×
• There was a network error assigning case 90/934,382 [Retry] ×
• Please fix the 3 errors

C5 - Change "System notifications" to "System Notifications"
C6 - Under "Description" remove the period from the bullet "They can be closable and can have other action buttons or links."
C7 - Under "Types:" replace the bulleted text with the following:

• Info notifications can be used for general messages that aren’t particularly critical.
• Success notifications can be used for positive messages that don’t have a context to associate it with.
• Warning notifications can be used for messages that likely require attention.
• Danger notifications can be used for critical messages that require immediate attention.

C8 - Replace example System Notification copy with the following:

• Message sent to Jerry ×
• Jerry added a comment to one of your cases (90/098,881)
  View comment ×
• Case 90/842,381 is due tomorrow
  View case Snooze ×
• Connection has been lost. Retrying in 30 seconds.
  Retry now ×

C9 - Update System Notification code example with (above) grammatical change.
C10 - Double check that the "Toggle notifications" examples of the toast (that appear in the upper right hand corner of the browser) carry the same changes.

As a developer, I want guidance and code examples for using Timelines from the CBP Theme so that I can apply Timelines efficiently and where appropriate.

Increase the indentation between major categories like "Foundations" and sub/child categories like "Colors" in the guide sidebar.

Provide Military Time Examples such as 22:00

As a developer, I would like the language for the components sections to be updated with language and code examples so that I have a better understanding of best practices as it relates to various patterns like Buttons, Cards, etc.

As a user, I would like a higher contrast for the gray icon examples so that it is more accessible.

Check email and URL destination links.

per @HMcFabulous

Update Style Guide/Kitchen Sink to use Vertical Steps

As a user, I would like guidance on Accessibility for each component so that support for Section 508 can be adhered to in a straightforward manner.

Update dependencies that are out of date based on the report:

https://david-dm.org/us-cbp/cbp-style-guide?type=dev

Fonts are not loading correctly as part of upgrade to CBP Theme 1.0.0

As a developer, I would like a common way to create a 'Tour' for the user to showcase application features so that they will have a better user experience.

• We have looked into Hopscotch, Shephard, and Intro.js.

Per our a11y expert:
Items in the style guide are not keyboard accessible. I can’t get focus to move out of the navigation pane and into the actual style guide.

I was browsing the style guide's section on the menu components. While scrolling through the page, I notice that the example menu elements would go over the style guide's navbar / header bar as you scroll down through the page:

As a developer, I would like a data visualization section with guidance and examples so that I can apply data visualization best practices.

• We need to add a section and talk about guidance not necessarily specific libraries.

As a user, I expect that the CBP Theme v.1.1.0 in the Style Guide is the latest version of the CBP Theme.

Error Columns are not lining up properly.

per @HMcFabulous

As a developer, I would like the examples to include source code for the html as well as javascript, so that I can easily recreate the functionality from the Style Guide.

• For all examples where pertinent we need to add html and javascript snippets of code.

The hamburger button and its backing need to align to height left and right of it. Remove space to left between hamburger button and CBP Style Guide block so it appears seamless.

Please add printable CSS to the style guide for hard copies.

Grid Note: Issue of blue "see the layouts" text contrast until actual theme colors are instituted in style guide. Then advise.

per @HMcFabulous

The live modal example disappears without user interaction.