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: Adds tokens to SlideOver #142

Merged
merged 7 commits into from
Jul 12, 2022
Merged

Conversation

eduardoformiga
Copy link
Member

@eduardoformiga eduardoformiga commented Jul 11, 2022

What's the purpose of this pull request?

Ported from vtex-sites/nextjs.store#145

This PR applies the new Theming structure to SlideOver: new scoped tokens linked to global ones.

It also Adds CSS Modules to the CartSidebar, with themification tokens and Stories.

How does it work?

This PR uses local variables to parameterize the SlideOver, and CartSidebar properties, then connect these scoped tokens to the global ones.

Tokens can be visualized in the storybook.

How to test it?

  • The SlideOver component and its related components should look just as it was before these changes.
  • The CartSidebar component and its related components should look just as it was before these changes.
  • You can check the story on Storybook.

Checklist

Changelog

  • Added an entry in the CHANGELOG.md at the beginning of its due section. The latest version should comes first.
  • Added the PR number with the PR link at the entry in the CHANGELOG.md. E.g., New items in the pull_request_template.md (#4)

PR Description

  • Added a label according to the PR goal - Breaking change, Enhancement, Bug or Chore.
  • Added the component, hook, or pathname in-between backticks (``) - If applicable. E.g., ComponentName component.
  • Identified the function or parameter in the PR - If applicable. E.g., useWindowDimensions hook.

Documentation

  • PR description
  • Added to/Updated the Storybook - if applicable.
  • For documentation changes, ping @ carolinamenezes, @ PedroAntunesCosta or to review and update.

* Uses CSS Modules on SlideOver component with themification

* Extracts FilterSliderComponent

* Extracts FilterSlider components and uses CSS Modules and tokens

* Adds CSS Modules to Accordion

* Adds Accordion theming tokens

* Adds Changelog Entry

* Moves styles to accordion component

* Creates Accordion stories

* Adds Accordion stories

* Adds tokens to facets

* Adds tokens to Filter Slider

* Creates Filter Stories

* Removes unused imports from Filter stories

* Adds Filter facet description

* Creates facets stories

* Removes unused import from facets stories

* Crestes FilterSlider stories

* Adds CHANGELOG entry

* Updates Filter related stories with PriceRange changes

* Updates Filter related components links on storybook

* Extracts Navbar related components and uses CSS Modules

* Updates README navbar example

* Adds tokens to navbar

* Adds tokens to navlinks

* Adds tokens to NavbarSlider

* Tweaks navbar module comments

* Adds CHANGELOG entry

* Tweaks tokens spaces

* Creates Navbar stories

* Creates NavbarSlider stories

* Creates NavLinks stories

* Updates navbar related components links

* Adds tokens to cart sidebar

* Adds CHANGELOG entry

* Adds tokens to cart sidebar

* Moves facets mock to own file

* Creates SlideOver stories

* Tweaks breakpoint tokens

* Removes height token

* Removes some tokens

* Updates SlideOver usage stories and props descriptions

* Tweaks bkg color token

Co-authored-by: Renata Motta <[email protected]>

* Removes full width token

* Uses Button with icon to show SlideOver and Navbar

* uses SectionList on SlideOver stories

* Update src/components/cart/CartSidebar/CartSidebar.tsx

Co-authored-by: Victor Hugo Miranda Pinto <[email protected]>

* Update src/components/ui/SlideOver/SlideOver.tsx

Co-authored-by: Victor Hugo Miranda Pinto <[email protected]>

Co-authored-by: Renata Motta <[email protected]>
Co-authored-by: Victor Hugo Miranda Pinto <[email protected]>
@vercel
Copy link

vercel bot commented Jul 11, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
gatsby-store-storybook ✅ Ready (Inspect) Visit Preview Jul 12, 2022 at 2:30PM (UTC)

@eduardoformiga eduardoformiga added Documentation Improvements or additions to documentation Features New feature or request labels Jul 11, 2022
@eduardoformiga eduardoformiga self-assigned this Jul 11, 2022
@vtex-sites
Copy link

vtex-sites bot commented Jul 11, 2022

Preview is ready

This pull request generated a Preview

👀   Preview: https://sfj-34a91df--gatsby.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit 34a91df

@vtex-sites
Copy link

vtex-sites bot commented Jul 11, 2022

Lighthouse Reports

Here are the Lighthouse reports of this Pull Request

📝 Based on commit 34a91df

Lighthouse Report by page
📎   /
📎   /apple-magic-mouse/p
📎   /office

@eduardoformiga eduardoformiga force-pushed the feat/theming-slide-over-fsss-385 branch from 44d0559 to 2b49f11 Compare July 11, 2022 20:44
@eduardoformiga eduardoformiga marked this pull request as ready for review July 11, 2022 21:03
Copy link
Collaborator

@renatamottam renatamottam left a comment

Choose a reason for hiding this comment

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

Approving cuz it looks the same on NextJS

@eduardoformiga eduardoformiga merged commit 34a91df into main Jul 12, 2022
@eduardoformiga eduardoformiga deleted the feat/theming-slide-over-fsss-385 branch July 12, 2022 14:57
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 Features New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants