Add footer, slim footer story example #107

haworku · 2020-04-27T15:08:33Z

`<Footer />`

The footer displays primary content (upper section) and secondary content (lower section). This PR adds the initial component and a story example for displaying the slim footer.

PR (1 of 3) for #78

trussworks-infra-zz · 2020-04-28T17:19:54Z

	Warnings
⚠️	Changes were made to package.json, but not to yarn.lock - Perhaps you need to run `yarn install`?
⚠️	Please add a changelog entry for your changes.

Generated by 🚫 dangerJS against 065d73b

haworku · 2020-04-28T17:20:00Z

src/components/Footer/Footer.tsx

+  secondary: React.ReactNode
+}
+
+// TODO: Add in "Return to Top" handling


How should this be implemented?

returnToTop is an optional prop for the link

This component just renders children

I didn't render children initially because it seemed the Footer should also encapsulate styles, specifically ofprimary and secondary.

I agree that primary and secondary is the way to go, since all of the USWDS footers divide up the content that way pretty explicitly. What if we had an optional onReturnToTop fn prop that, if it exists renders the Return to top link and hooks up the event handler?

Made returnToTop a component when I realized that if I only made the handler a prop I am hardcoding English, and that specific phrase, into our repo. I'll make an issue about lang and i18n so we can discuss.

haworku · 2020-04-28T17:21:12Z

src/components/Footer/Footer.stories.tsx

+  return (
+    <div className={containerClasses}>
+      <div className="grid-col-auto">
+        <img className="usa-footer__logo-img" src="#" alt="img alt text" />


🤔 Should we add a mock logo image file to our library? It might be nicer for use in stories.

Yeah! we could use the empty circle used on USWDS for something easy? https://designsystem.digital.gov/components/footer/

as long as it's only imported to the .stories.tsx file it won't be included in the packaged library.

Just pushed a couple more commits to round out this PR. Ended up adjusting the npm run storybook script to get the static logo image loading properly. Followed this approach.

suzubara · 2020-04-28T17:50:30Z

src/components/Footer/Footer.stories.tsx

+    }
+  )
+
+  const items = Array(4).fill({


🤯 TIL about Array.fill

suzubara

I don't know if maybe you were planning to do this later but we could probably create sub components scoped to the Footer, like Address, Logo, ContactInfo?

looking good!

suzubara · 2020-04-28T17:51:20Z

src/components/Footer/Footer.stories.tsx

+  return (
+    <div className={containerClasses}>
+      <div className="grid-col-auto">
+        <img className="usa-footer__logo-img" src="#" alt="img alt text" />


Yeah! we could use the empty circle used on USWDS for something easy? https://designsystem.digital.gov/components/footer/

as long as it's only imported to the .stories.tsx file it won't be included in the packaged library.

suzubara · 2020-04-28T17:53:56Z

src/components/Footer/Footer.tsx

+  secondary: React.ReactNode
+}
+
+// TODO: Add in "Return to Top" handling


I agree that primary and secondary is the way to go, since all of the USWDS footers divide up the content that way pretty explicitly. What if we had an optional onReturnToTop fn prop that, if it exists renders the Return to top link and hooks up the event handler?

haworku · 2020-04-29T20:14:00Z

@suzubara Yes about refactoring out components. Added Address and Logo for now so everything is together. 🤔 What is ContactInfo- the styled items in Address?

FYI planning to add FooterNavand SocialLinks in later PRs when the medium and big story examples go up.

- serve static files via directory as per storybook docs - include story for slim logo only, other types to be added in future

suzubara

looking real good, I'm approving since this isn't going into develop yet and most of my comments are just ponderings & minor suggestions

suzubara · 2020-05-04T19:04:57Z

src/components/Footer/Footer.tsx

+  )
+
+  return (
+    <footer className={classes}>


do we also want to include {...footerAttributes} here to pass along anything else?

suzubara · 2020-05-04T19:07:06Z

src/components/Footer/Footer.tsx

+      <div className="usa-footer__primary-section">{primary}</div>
+
+      <div className="usa-footer__secondary-section">
+        <div className="grid-container">{secondary}</div>


why not leave <div className="grid-container"> to be part of the secondary prop as well?

Because a grid-container is not always used to wrap the secondary content (in the other size types).

suzubara · 2020-05-04T19:11:58Z

src/components/Footer/Logo/Logo.tsx

+          <div className="grid-col-auto">{heading}</div>
+        </>
+      ) : (
+        <>{image}</>


I think since the container is a grid-row regardless of whether or not there's a heading, the image should still be inside of a <div className="grid-col-auto">?

suzubara · 2020-05-04T19:14:09Z

src/components/Footer/Footer.stories.tsx

+  )
+}
+
+const returnToTop = (


Do you think this should be made a subcomponent as well? it could take an onClick handler (and i18n text)

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku requested review from gidjin, sarboc, suzubara and tinyels as code owners April 27, 2020 15:08

haworku requested a review from eamahanna April 27, 2020 15:58

haworku commented Apr 28, 2020

View reviewed changes

suzubara reviewed Apr 28, 2020

View reviewed changes

src/components/Footer/Footer.stories.tsx

}

)

const items = Array(4).fill({

Copy link

Contributor

suzubara Apr 28, 2020

Choose a reason for hiding this comment

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

🤯 TIL about Array.fill

suzubara reviewed Apr 28, 2020

View reviewed changes

haworku force-pushed the hw-footer-slim branch from ce0f57e to 99d929f Compare April 29, 2020 20:06

haworku requested a review from suzubara April 29, 2020 20:21

haworku linked an issue Apr 30, 2020 that may be closed by this pull request

USWDS Component: Footer #78

Closed

haworku added 4 commits April 30, 2020 16:04

Add footer, slim footer story example

bb9213e

Add HTMLAttributes prop types

1564e7e

Add Logo, static file loading

adb0fd9

- serve static files via directory as per storybook docs - include story for slim logo only, other types to be added in future

Add Address, add ReturnToTop, cleanup Footer

4727be4

haworku force-pushed the hw-footer-slim branch from 99d929f to 4727be4 Compare April 30, 2020 21:06

suzubara approved these changes May 4, 2020

View reviewed changes

Code review

065d73b

haworku merged commit 4907181 into hw-footer May 5, 2020

haworku added a commit that referenced this pull request May 5, 2020

Add footer, slim footer story example (#107)

ece06f2

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku added a commit that referenced this pull request May 5, 2020

Add footer, slim footer story example (#107)

379788f

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku added a commit that referenced this pull request May 11, 2020

Add footer, slim footer story example (#107)

815e55e

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku added a commit that referenced this pull request May 11, 2020

feat: Slim footer (#107)

e507d43

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku deleted the hw-footer-slim branch May 18, 2020 22:51

haworku added a commit that referenced this pull request May 19, 2020

feat: Slim footer (#107)

377c343

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

haworku added a commit that referenced this pull request May 22, 2020

feat: Slim footer (#107)

e2bb6a7

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

suzubara pushed a commit that referenced this pull request May 22, 2020

feat: Slim footer (#107)

d6f2ff1

* Add footer, slim footer story example * Add Logo, static file loading * Add Address

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add footer, slim footer story example #107

Add footer, slim footer story example #107

haworku commented Apr 27, 2020 •

edited

Loading

trussworks-infra-zz commented Apr 28, 2020 •

edited

Loading

haworku Apr 28, 2020 •

edited

Loading

suzubara Apr 28, 2020

haworku Apr 29, 2020

haworku Apr 28, 2020

suzubara Apr 28, 2020

haworku Apr 29, 2020

suzubara Apr 28, 2020

suzubara left a comment

suzubara Apr 28, 2020

suzubara Apr 28, 2020

haworku commented Apr 29, 2020 •

edited

Loading

suzubara left a comment

suzubara May 4, 2020

suzubara May 4, 2020

haworku May 5, 2020 •

edited

Loading

suzubara May 4, 2020

suzubara May 4, 2020

Add footer, slim footer story example #107

Add footer, slim footer story example #107

Conversation

haworku commented Apr 27, 2020 • edited Loading

<Footer />

trussworks-infra-zz commented Apr 28, 2020 • edited Loading

haworku Apr 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

suzubara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haworku commented Apr 29, 2020 • edited Loading

suzubara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haworku May 5, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

haworku commented Apr 27, 2020 •

edited

Loading

`<Footer />`

trussworks-infra-zz commented Apr 28, 2020 •

edited

Loading

haworku Apr 28, 2020 •

edited

Loading

haworku commented Apr 29, 2020 •

edited

Loading

haworku May 5, 2020 •

edited

Loading