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

KIT-93: [react-kit] <Footer /> component #977

Merged
merged 5 commits into from
Dec 11, 2023

Conversation

mitchellmarkoff
Copy link
Contributor

What changes were made?

Adds an implementation of a <Footer /> component to react-kit per the re-theme designs.

Where were the changes made?

react-kit

How have the changes been tested?

Storybook & tests

Additional information

Don't forget to add a changeset if needed!

@mitchellmarkoff mitchellmarkoff added documentation Improvements or additions to documentation react-kit Relating to the react-kit package labels Dec 5, 2023
Copy link

changeset-bot bot commented Dec 5, 2023

🦋 Changeset detected

Latest commit: f6e994a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@pantheon-systems/react-kit Minor
@pantheon-systems/nextjs-kit Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Member

@CobyPear CobyPear left a comment

Choose a reason for hiding this comment

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

image
image

The horizontal space seems off in a few places - looks like the elements should make it 300px tall, currently it's at 156px.

We'll need a white version of the logo. id if it's as easy as copying the current svg and changing the fill colors or if it's more involved, you can export the svg from the Figma file.

The text sizes seem off compared to the design.

packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/props.ts Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
@mitchellmarkoff
Copy link
Contributor Author

Lots of updated to the structure of the component here. I played around with the styles and this should be the correct sizing now (landed at 299px tall after confirming the correct spacing was being used), the text still looks slightly different compared to the designs but I am using the specified text sizes outlined in Figma so I am not sure what that is attributed to exactly.

Copy link
Member

@CobyPear CobyPear left a comment

Choose a reason for hiding this comment

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

Looking much better, still a few px off in a few places:

image

The logo should be 64x64, but it looks to be 64x65.

image

This 14px bottom margin should be 16px.

Almost there though!

packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
packages/react-kit/src/components/Footer/Footer.tsx Outdated Show resolved Hide resolved
Copy link
Member

@CobyPear CobyPear left a comment

Choose a reason for hiding this comment

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

One small thing and I think this is good to go after that. Looks great!

packages/react-kit/src/components/Footer/props.ts Outdated Show resolved Hide resolved
@CobyPear CobyPear merged commit e06ef05 into feat/re-theme Dec 11, 2023
2 checks passed
@CobyPear CobyPear deleted the kit-93-footer-implementation-rk branch December 11, 2023 19:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation react-kit Relating to the react-kit package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants