Skip to content
This repository has been archived by the owner on Jun 2, 2022. It is now read-only.

feat(ui): create postal code bar component #424

Merged
merged 72 commits into from Apr 20, 2022

Conversation

saranicoly
Copy link
Contributor

@saranicoly saranicoly commented Mar 25, 2022

What's the purpose of this pull request?

This PR intends to create a "postal code bar" like this:
image
Since the behavior varies depending on the device, we have two different components: RegionalizationButton (Desktop) and RegionalizationBar (mobile).

How does it work?

The initial state of the components is as shown above, but if the user sets a location, the current location must be shown instead of "Set your location" message:

image

This is made using a content prop:

image

  • The classes prop informs if the component will be shown on mobile (in case of RegionalizationBar) or desktop (in case of RegionalizationButton).

Mobile:
image

Desktop:

image

How to test it?

You have a few options to do that.

Option 1: Deploy Preview

  • Use the deploy preview to see how the new component is working.

Option 2: Running locally

  • clone the repository and update your local branch
  • run the server and open it on your browser
  • test the component's behavior in Mobile and Desktop devices

Extra:

  • You can also try to call the components with a content prop.

References

Checklist

  • CHANGELOG entry added

@netlify
Copy link

netlify bot commented Mar 25, 2022

Deploy Preview for basestore ready!

Name Link
🔨 Latest commit 0329f89
🔍 Latest deploy log https://app.netlify.com/sites/basestore/deploys/623e33bbf9353d0008699bc3
😎 Deploy Preview https://deploy-preview-424--basestore.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@vtex-sites
Copy link

vtex-sites bot commented Mar 25, 2022

Preview is ready

This pull request generated a Preview

👀   Preview: https://preview-424--base.preview.vtex.app
🔬   Go deeper by inspecting the Build Logs
📝   based on commit c46b8b1

@gatsby-cloud
Copy link

gatsby-cloud bot commented Mar 25, 2022

Gatsby Cloud Build Report

🚩 Your build failed. See the build logs here

Errors

It looks like you were trying to add the config file? Please rename "gatsby-config.ts" to "gatsby-config.js"

@saranicoly saranicoly marked this pull request as ready for review March 31, 2022 22:43
@eduardoformiga
Copy link
Member

Hey @saranicoly, to solve the Cummulative Layout Shift (CLS) on Lighthouse CI we need to get the changes after #472 was merged.

Filipe W. Lima and others added 10 commits April 13, 2022 15:56
Conflicts:
- src/styles/global/components.scss
* Removes `RegionalizationProvider`

* Moves `RegionalizationProvider` logic to `ModalProvider`

* Separates `RegionalizationComponents` into different
folders and files to keep project structure

* Uses specific states for each modal
when opening/closing `RegionalizationModal`
@saranicoly saranicoly force-pushed the fss-232-create-postal-code-bar branch from 31ced5a to 9890463 Compare April 19, 2022 21:10
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants