cloud-gov / cg-style Goto Github PK

Having two similarly named and purposed files is sort of confusing, which makes errors and bugs more likely. For example, #70 is required because override_vars.scss was never imported even though vars.scss was.

Considering that the content of override_vars.scss is a super set of the content in vars.scss, I think we should consolidate into a single file called vars.scss

The content in the <code> blocks on some content pages should likely have a different background color and some spacing separation to ensure they're visually separated from surrounding content. Example here: https://docs-staging.apps.cloud.gov/ops/creating-a-local-dev-environment-in-Virtual-Box/

I'm not familiar with stylelint, and not sure if this kind of rule is even possible.
#225 (comment)

In order for 18F developers to use cg-style and receive the newest fixes from WDS, cg-style should be using the latest version of WDS rather then an old branch.

Acceptance criteria

• cg-style should be install WDS directly from npm
• cg-style should be using version of WDS higher then 0.10.0.
• cg-docs should be upgraded to newest version of cg-style with no breaking changes
• cg-dashboard should be upgraded to newest version of cg-style with no breaking changes
• cg-landing should be upgraded to newest version of cg-style with no breaking changes.

I'm trying to install the cg-landing project locally in order to try and resolve this issue.

I originally opened an issue in the cg-landing project, but I haven't heard back in a few days and thought it might be more relevant to post here also, as I'm getting the error with the cg-style installation.

I followed the instructions at an updated Readme file for cg-style - in a pending pull request.

1. Ran gem install github-pages
2. Ran jekyll serve --baseurl='' -w
3. I already have the cg-style repository cloned.
4. From the cg-style directory, I ran npm install cloudgov-style --save and then got a bunch of errors in the Terminal, starting with:

cc1plus: error: unrecognized command line option "-std=c++11"
cc1plus: error: unrecognized command line option "-stdlib=libc++"
make: *** [Release/obj.target/libsass/src/libsass/src/ast.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2

Here's the output from the Terminal.

And the full npm-debug.log file.

I'm on Mac OS 10.6, node v4.4.3, npm v2.15.1
Thanks for any insight.

Only the src files should be checked in, the rest should technically be generated with the build.

To make the implementation of atomic design easier throughout cloud.gov projects by using Fractal, a component library framework.

Acceptance criteria:

• As a user, I should be able to find and implement atomic designs from cloud.gov styles into my project.
• As a user, I should have sample code options available to me so that I can easily use cloud.gov atomic designs on my chosen web framework.
• As a user, I should be able to visit a url to view these code samples and documentation.

Currently the compiled CSS files is called cg_style.css while the compiled js file is called cg-style.js and neither have the correct minified file in the folder. Change both of them to cloudgov-style.{js,css} and add a minified file with -min.

Why
In order to preserve a seamless experience from dashboard to docs — and to better frame the dashboard — the content frame should have a consistent top border.

Acceptance Criteria

• The top border of the main content frame should be the same in the dashboard as in the docs
• The lead header of the content frame should be a consistent h2

Before

After

The usage of the navbar component isn't documented in the Jekyll site but should be for easier reference.

The documentation should also note that it requires some Javascript.

This would allow for different site structures for site's that are using the library.

And possibly rename

As pointed out in cloud-gov/cg-landing#58, the link text color in the .usa-disclaimer component has a contrast ratio (against the background) of 4.03:1 when it needs to be 4.5:1. HTML_CodeSniffer recommends using a background color of #fefefe but that is quite dark and would introduce contrast issues with the rest of the text.

We need @thisisdano or @vz3 to recommend another color for the disclaimer link text.

Current background color: #f1f1f1
Current link text color: #277cb2

Screenshot:

As seen on the continuous deployment page of the docs:

Confirmed that it's not an issue with the Markdown.

I looked through the existing documentation but don't see anything particularly useful to port to the pattern library. I think as we work with building new components or updating existing components, they can be added to the pattern library.

• Remove jekyll documentation
• Remove jekyll dependencies
• Remove jekyll references from README

Acceptance criteria:

• Documentation contains no references to Jekyll
• Dependencies on Jekyll are not able to be found
• README contains no references to Jekyll
• CONTRIBUTING contains a note that adding/updating UI components should also require that you add/update the component in the pattern library

I believe this is a regression where the padding on hover of the "SPACES" link is incorrect.

I don't think that the hard-coded Google Analytics code should exist in this repo. It requires a release of this package in order to update any of that code. And the level of indirection here makes it hard for less technically-savvy folks to determine the proper order of operations and exact steps to update it.

I propose that we can remove it from this repo and add it as a layouts/partial/*.html in the cg-site repository instead.

💭 thoughts welcome!

Reproduce:

• Go to the page of one of the components/features listed. These can be found in the left navigation bar.
• Click on the <> HTML link in the second, bottom window of the component window.
  See that the window says <!-- Error rendering component: --> and does not correctly render the component HTML

What to expect:
The HTML window should show the full HTML markup of the component, without any template tags as seen in the View window.

Problematic components

• Breadcrumbs
• Trigger
• Card
• Count status
• Count status grid
• Panel overview org
• Panel your orgs

Most of the links on the left sidebar of https://styleguide.fr.cloud.gov/ return Nginx 404 pages.

It would be nice when developing on the pattern library to use npm run watch so changes to cg-style styles are automatically picked up in the pattern library. Currently an extra step npm run build-library is necessary to pick up the changes.

Acceptance criteria:

• A script that makes it simple to publish the library to the npm registry and to Ruby Gems

I'm hoping whatever tool I use will be able to determine whether the image is an svg or a png and make two different output image files for each.

https://github.com/2createStudio/postcss-sprites

In order for the front end developer team to continue style development on the deck, some small UI issues should be fixed so the cg-deck site looks more presentable.

Acceptance criteria

• Ensure nested tables don't have un-even padding.
• The main content on cg sites should have white as background color.
• Ensure buttons aren't the wrong size

Our pattern library is currently at https://pages.18f.gov/cg-style but there's a slow movement to get all the 18f-pages onto federalist. This also gives us the ability to customize the domain.

PR #176 gives us a deploy script which pushes a static site. It's pretty simple to move this from 18f-pages to federalist simply by adding the cg-style repo to federalist with 18f-pages as the custom branch. Then we only need to add a custom domain to host it at something like cg-style.apps.cloud.gov.

As a stretch, it would be great to document this in the federalist docs so folks moving other 18f-pages have simple instructions on how to do it.

We should remove snyk.io integration in favour of @dependabot.

As a designer or developer, I want access to current WDS features including search, headers, and navigation structure.

Updating cg-style to leverage v0.12.1 of the Standards for the new headers code.

Acceptance criteria

• cg-style should be install WDS directly from npm
• cg-style should be using version of WDS higher then 0.12.1.
• cg-docs should be upgraded to newest version of cg-style with no breaking changes
• cg-dashboard should be upgraded to newest version of cg-style with no breaking changes
• cg-landing should be upgraded to newest version of cg-style with no breaking changes.

In order to show users a cohesive form experience, form elements should be sized correctly relative to each other and the rest of the UI elements.

This would mean you could import one JS file with webpack and get the CSS and possibly images.

In order to release cg-style quicker, fix the issue with the gem dependency

When a developer releases cg-style, they have to deploy the gem first and then update the Gemfile.lock in cg-style in order to successfully deploy a release. This is related to having two separate repos for the npm module and the gem, which may be the solution.

Bringing over issue cloud-gov/cg-dashboard#304 to track in this repo. Currently, checkboxes and their labels are on separate lines. For easier context and a better UI, we want them to be inline by default.

Acceptance criteria:

• The <label> should be on the same line and visual connected to the checkbox that controls it.

Screenshot:

In order for cloud.gov team members to have visibility into what's going on with cloudgov style, we should manually (for now as our slack apps are broken) announce when a new cloudgov-style release happens.

This issue came out in the 6/15/2016 sprint review.

Would probably be the hex part of the cloud.gov logo and an ico file that the site's can use.

In order for developers to quickly release cg-style, the creation of the github release should be automated.

This issue was discussed at the 06/15/2016 sprint review.

There's currently a a bug in travis which prevents a developer from whitelisting branches and allowing tags.
travis-ci/travis-ci#2111

Once this is resolved, we should undo part of this #32

remote: Total 136 (delta 16), reused 126 (delta 14), pack-reused 0
Receiving objects: 100% (136/136), 1.24 MiB | 114.00 KiB/s, done.
fatal: unable to open /home/adborden/projects/cg/cg-style/gem/.git/objects/pack/tmp_pack_yVFjip: No such file or directory
fatal: index-pack failed

Here's the log https://gist.github.com/adborden/766d7e61333d3dc0eb7e44970d40d788
It looks like a git clone for ./gem is already in progress, so then we rm -rf ./gem while the clone is in progress.

Repro

1. npm run watch
2. Save your scss file over and over a handful of times.

There's many places on the site that use the pill on the left side of UI as a status. This could be repeatable with a component or a mixin.

In order for cloud.gov developers to easily release a new version of cg-style, there should be a list of release steps