Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Footer Component #142 #146

Merged
merged 9 commits into from
May 22, 2020
Merged

feat: Footer Component #142 #146

merged 9 commits into from
May 22, 2020

Conversation

haworku
Copy link
Contributor

@haworku haworku commented May 11, 2020

<Footer />

Resolves #142

Add the USWDS 2.0Footer component with slim, medium, and big footer types . Also adds other sub-components used in the stories. New components:

  • Address
  • Footer [main]
  • FooterNav
  • FooterExtendedNavList
  • Logo
  • SocialLinks

This is a merge of the feature branch. PRs coming into this branch have been reviewed.

To test:

Compare markup and behavior from USWDS - Footer documentaiton.

Copy link
Contributor

@suzubara suzubara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good! There is one thing which I will leave up to you if you want to address in this PR or create a new issue for it, but the Big footer at mobile sizes actually collapses the nav items into show/hide blocks. Maybe we can provide some way for the user to pass in a prop that tells the footer whether it's "mobile" or not to enable this functionality..?

image

Topic
</h4>,
...Array(2).fill(
<a className="usa-footer__secondary-link" href="#">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I realize this is inconsistent with the primary links in the slim/medium footer, but according to the markup at https://designsystem.digital.gov/components/footer/ it looks like the usa-footer__secondary-link class is not on the <a> tags at all (just on the enclosing <li>). I wonder if this will resolve the issue you were having with the hover styles?

Copy link
Contributor Author

@haworku haworku May 13, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yay nice catch -- thank you 🔍 . Yes, strange its not consistent.

Still doesn't fix the hover styles thing unfortunately. I keep seeing the blue color in the styles being applied by a:hover { color: #1a4480; } coming from typography.scss (which creates @mixin typeset) . I'll keep looking around but I may ask to pair later today. Confused if we these mixins applying or not in our code.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is now documented in #191

@haworku haworku added the status: wip Work in progress - not ready for code review label May 13, 2020
@haworku
Copy link
Contributor Author

haworku commented May 13, 2020

@suzubara uhhhh, yeah forgot again about mobile. I've created a branch where I'm doing that work now hw-footer-mobile.

This back to wip until then. Will open a PR from that branch so we can discuss mobile stuff there.

@haworku haworku marked this pull request as draft May 13, 2020 20:55
@haworku haworku removed the status: wip Work in progress - not ready for code review label May 22, 2020
* Add footer, slim footer story example
* Add Logo, static file loading
* Add Address
* Add FooterNav, SocialLinks components
* Add medium Footer story
* Add medium styles to Logo, Address components
* Add extended nav behavior inside FooterNav
* Add SignupForm
* Organize stories in subdirectories and add info
- remove static file handling, load images from uswds
- cleanup FooterNav props handling
- remove SignUpForm
Cleanup from bad merge
- refactor out FooterExtendedNavList
- add more tests
@haworku haworku marked this pull request as ready for review May 22, 2020 16:25
Copy link
Contributor

@suzubara suzubara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 awesome work on this!

@haworku haworku merged commit 94c3ed8 into develop May 22, 2020
@haworku haworku deleted the hw-footer branch May 22, 2020 19:57
suzubara pushed a commit that referenced this pull request May 28, 2020
* Bump standard-version from 7.1.0 to 8.0.0

Bumps [standard-version](https://github.com/conventional-changelog/standard-version) from 7.1.0 to 8.0.0.
- [Release notes](https://github.com/conventional-changelog/standard-version/releases)
- [Changelog](https://github.com/conventional-changelog/standard-version/blob/master/CHANGELOG.md)
- [Commits](conventional-changelog/standard-version@v7.1.0...v8.0.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Created issue templates

Created issue templates for feature request & bug report, with default labels.

* fix: removes the usa-search class name from the form component (#184)

fix #163

* fix: accept id and name props for Search component input field (#183)

* fix: accept id and name props for Search component input field
* fix: qualify id and name props for input field to not clash with form
fix #162

* feat: add dateInput component for forms (#144)

* Added dateInput component and dateInputGroup component for forms

* fix: extends header menu to accept list props for corresponding id (#188)

fix #165

* fix: update gov banner to uswds version 2.7.0

* chore: upgrade uswds to 2.7.0

* docs: add documentation for Trussels (#190)

* docs: add documentation for Trussels

* docs: clean up readme to meet project standards

* docs: add to active maintainers

* docs: add first pass of security policy

Co-authored-by: HANA <hana@truss.works>

* feat: add Footer component #142 (#146)

- adds slim, medium, and big footers with mobile styles
- adds new components, specifically Address, Footer,  FooterNav, FooterExtendedNavList, Logo, SocialLinks

* build(deps-dev): bump @testing-library/jest-dom from 5.7.0 to 5.8.0 (#197)

* build(deps-dev): bump typescript from 3.9.2 to 3.9.3 (#196)

* build(deps-dev): bump @storybook/react from 5.3.18 to 5.3.19 (#198)

* build(deps-dev): bump stylelint from 13.4.1 to 13.5.0 (#199)

* build(deps-dev): bump lint-staged from 10.2.4 to 10.2.6 (#200)

* build(deps-dev): bump @storybook/addon-info from 5.3.18 to 5.3.19 (#201)

* feat(rangeinput): creates form RangeInput component, test, and stories (#194)

* feat(rangeinput): creates form RangeInput component, test, and stories

* feat: add RangeInput component to index.ts for entrypoint export

* feat: remove overalpping interface props with HTMLInputAttributes type

* feat: require id and name props, remove label, remove redundant unpack

* feat: remove unused label import in component, show label usage in story

fixes #81

* docs: add landing page and documentation page template stories (#195)

* docs: add landing page and documentation page template stories

* docs(storybook): add current class to header navigation

* ci: lint PR titles instead of commits #159 (#210)

* chore: add semantic pr workflow

* chore: update workflow

* Remove commitlint hook

* Clarify PR linting requirement

Co-authored-by: HANA <hana@truss.works>

* chore(release): 1.4.0

* Remove duplicate entry from changelog

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Co-authored-by: Duncan <52669884+duncan-truss@users.noreply.github.com>
Co-authored-by: Emily Mahanna <56279459+eamahanna@users.noreply.github.com>
Co-authored-by: HANA <hana@truss.works>
@haworku haworku mentioned this pull request Jun 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants