Contact Section

AC:
Given a user clicks:

• Business owners: then open a blank Chakra modal (content added in later story)
• General Inquiry: mailto: (email to be provided later)
• Volunteers: Discord link (join.rebuildblackbusiness.com)

Desktop:

Mobile:

Not sure if it's not set up yet or maybe the name changed, but the backend trello link in the README leads to a 'Board Not Found' error https://trello.com/b/034hEV4X/rebuild-black-business-backend-dev

In our PrimaryNav component: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/PrimaryNav.js

Primarily I believe we need to add a couple of aria roles to the navigation (nav is only toggled on smaller screens).

aria-controls should be added to the <button> within the <Box> component wrapping the Hamburger menu. This should point to the ID of the navigation.

aria-expanded should be added to the <button> within the <Box> and toggled when the button is clicked.

aria-hidden should be applied to the <NavMenu> component. On desktop this will be set to false, but on mobile this should be toggled when the hamburger nav is clicked.

Zip Codes

One of the primary goals of the RBB site is to ensure that we can quickly and effectively connect people with black owned businesses near them. In order to do this, we do our best to accurately generate location based data for users to filter by.

Currently in the DB we are collecting zip codes of businesses that have a storefront. Some businesses do not have a storefront and are therefore tagged as an "Online" business.

If a business has a storefront, we need to take their zip code, and display it as "City, ST" on the frontend. For example, a business has the zip code of 80219, the front end should display "Denver, CO".

This should be a utility function that we can pass an integer to, and have it return the "City, ST" format.

Explore using https://www.npmjs.com/package/zipcodes - this has features that we would like to leverage in the future as well.

Lighthouse was failing for Background and foreground colors do not have a sufficient contrast ratio.

AC:
Update rbb-orange to #F05F37

ContentBlock

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57

Leveraging Chakra UI components, we need to build out a ContentBlock component that can accept a few parameters in order to output the different variations on the home page.

Customization Options

The content block should be a single Higher Order Component that allows us to add any content within it. Primarily this content will be Headings, Paragraphs, and Buttons.

As a Developer, I should be able to customize the background color that is used on an individual block and whether it is a fade, or tint.

As a Developer I should be able to customize the image that appears as the background for this block.

As a Developer I should be able to choose to have the text appear on the left, right or in the center of the block.

Customization Examples

Left aligned content, black background that fades over a custom img src, Heading, Paragraph, and 2 Buttons as children of the Higher Order Component.

Desktop

Right aligned content, white background that fades over a custom img src, Heading, Paragraph with an inline link, and 2 buttons as children of the Higher Order Component

Desktop

Center aligned content, color tint over a custom img src, Paragraph, and one button that spans the width of the content

Responsive

The ContentBlock should be responsive, the content will center, span the full width, and the background color will become a tint over the background image on smaller screens

Mobile

Hi there, I lead the Open Source Initiative as well as open source at Salesforce and I'd love to be able to contribute to your project. However, in getting acquainted with the project I noticed that the various repositories lack a clear license.

Would you mind adding a LICENSE file to your repos?

I have no opinions on what license should be used (of course prefer an open source license), but a quick scan of the vendored code in this particular repo suggests MIT would be a reasonable choice. https://opensource.org/licenses/MIT

Thanks so much!

Upgrade graphql-playground-html to version 1.6.22 or later.

Since this is a dependency of Gatsby this will be achieved by updating gatsby

Use npm ls graphql-playground-html to verify

Global Header

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=427%3A670

The GlobalHeader component should consist of a SVG version of the RBB logo that when clicked, navigates to the home page.

Pages in the navigation should follow this structure:

Home (slug: "/")
About (slug: "/about")
Businesses (slug: "/businesses")
Allies (slug: "/allies")
Resources (slug: "/resources")

Desktop

Small Screens

As screen size is reduced, the navigation within the GlobalHeader should become hidden behind a hotdog menu. Upon click of the hotdog, the navigation will appear in a row layout.

Related to search on Business and Ally pages.

Example:

• 02215 should stay 02215 and not become 2215 when sent to search

Add a link to the terms page

Gradients don't match what is in Figma and they're far too harsh.

On the /businesses page upon search if no businesses are matched - the pagination should be hidden.

Screenshot for reference:

Link Styles

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=585%3A351

Leveraging Chakra UI components, we need to setup link styles for default, hover, active, an visited states.

Note: The orange link should only be used for flagging businesses/allies

Mobile:

Trello: https://trello.com/c/g5OZn1z8

The ResultCard has two variations:

ResultCard Default State

The ResultCard default state should output the following data from Airtable:

• Business Image - Does not exist in Airtable currently, read on.
  • Use image if available. If no image available, pull from fallback asset for the business category.
  • This data does not currently exist in the database. Write conditionals to prepare for this, leverage a random unsplash image https://source.unsplash.com/random as a stub for the fallback.
• Business Name
• Business Category
• Business Blurb
  • This data does not currently exist in the database. Write conditionals to prepare for this.
• Business Location
• Business Buttons
  • 1 - 2 buttons
  • Website URL button text dependent on business category
    • Entertainment: Learn more
    • Food and beverage: Order
    • Health and wellness: Learn more
    • Professional services: Contact
    • Retail: Shop
  • If no donate URL, the Website button takes full width.
  • If there is a donate URL provided, second button appears to the right, with button text “Donate”
• Report Link
  • mailto: link, use placeholder email for now.

ResultCard Basic

This variation does not utilize a Business image, but instead leverages a background color.

• Business Name
• Business Location
• Business Blurb
  • This data does not currently exist in the database. Write conditionals to prepare for this.
• Business Button
  • 1 Button
  • Website URL. Button text "Website"
• Report Link
  • mailto: link, use placeholder email for now.

In the /businesses page, the no results card is shown on page load for a small amount of time then the results cards are displayed. On the initial load, maybe a skeleton loader should exist while making the api call to get the search results.

Footer

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57

Desktop

Mobile

The Footer component will be added to our <Layout /> component (https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/Layout.js) and should appear on every page. It is composed of a few sections:

Social List

Individual social icons for various social media properties. For now stub these out with # as the href until we have these properties 100% set up. On hover or focus of each icon, increase size by 10%:

transform: scale(1.1)

Link List

Below the social icons is the link list, this should be the same as the link list in the navigation. A <StaticQuery> should be used to generate this link list. See https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/Layout.js#L17 and https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/components/PrimaryNav.js#L62 for how we're building this in the PrimaryNav component.

Photo Credits

The assets we use on the site are all public domain, and thus must be attributed to the photographer who took the pictures. The menuLinks object within siteMetadata here: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/gatsby-config.js#L33 should be expanded to include the Photographer's name, and URL on a per page basis.

The only photo credits we have approved are the Home page credits:

John Cameron https://unsplash.com/@john_cameron
Kelly Lacy https://instagram.com/kellymlacy
Mike Von thevoncomplex.com

The photo credit should open in a new tab.

Copyright Information

The copyright year in the footer should be dynamic and the "Terms and Conditions" bit should be a link to a (currently not created) "Terms and Conditions" page. The text for Terms and Conditions should contain non-breaking spaces so that it does not wrap in the middle on smaller screens.

Ensure all links can be tab targeted and include focus states.

Pagination

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=579%3A1516

Leveraging Chakra UI components, we need to build out a Pagination component that can support having optional ellipsis for large amounts of pages of results.

• Given a user is on the first page + 4 more (5 pages total), the first set of ellipsis will not be shown.

• Given a user is on the last page - 4 less (5 pages total), the first set of ellipsis will not be shown.

• Given a user is somewhere in the "middle" of the results (not the previous two scenarios) then the
  middle number will be active and both sets of ellipsis will be shown

Mobile:

If it's quick to add, support desktop version as well. If not it's lower priority and should be created as a separate Issue, so notify @racedale & @magnificode
Desktop:

The heading site logo looks quite pixelated on my 4k display. The issue seems to persist across all pages. Please see below for example:

The issue also shows up at mobile size:

BusinessFilter

Since data structure has been finalized we can now work on getting the BusinessFilter functionality wired up. Here's the logic:

As a user, I should be able to optionally filter businesses by category. This field should incorporate the following:

Field type: dropdown select
Field label: Business
Field placeholder option: Select type
Dropdown options:

• Entertainment
• Food and beverage
• Health and wellness
• Professional services
• Retail

As a user, I should be able to optionally filter businesses by City / State OR Zipcode. By leveraging this NPM package we should be able to take in "Atlanta, GA" for example, return an array of zip codes that are associated with that city state string, and return results that match any zip in that array

Field type: Text search (likely will need strict validation to ensure the "Atlanta, GA" format. Searching "Atlanta" or "ATL" will not yield any results in v0). This will accept both city state, or a zip code.

Field label: Location
Field placeholder text : Eg. "Atlanta, GA" or "30301"

As a user, I should be able to filter businesses by their level of need. This is a boolean value in the database. Businesses impacted by current events will be labelled as "In Need" in the database.

Field type: Checkbox (Should be pre-checked for v0)
Field Label: "In Immediate Need" (this is subject to change as designs are fully approved)

Contact Card

Component Screenshot: https://share.getcloudapp.com/P8uedn2L
Figma design: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=161%3A0

The contact card should output the following data:

• URL (or modal trigger)
• Image URL
• Title
• Blurb

The entire card should be clickable and trigger either the URL or a modal popup.

Note: Just the rough layout, styling not important yet

As a developer
I want the tests to be passing to be able to ensure quality to our users

There's a few errors around navigation and a11y issues

Note:
npm run test:e2e:ci will execute Cypress tests

We're seeing long initial load times from our images. Going to work on adding some more optimizations from Cloudinary and tweaking until we see less stutter.

On the business page, if a business type is selected, a location entered, and In Urgent Need selected, when search executes nothing displays below in the iframe class=airtable-embeded

AS a user
When I click contact us
I see my email open [email protected]

AC:

• Window opens to email [email protected]
• no longer will be [email protected]

https://trello.com/c/OlCpRADT

https://trello.com/c/u00Xau1t/120-allies-page-breaks-items-on-refresh

Caused by the SSR part of gatsby, any Link works fine

Pagination

Leverage gatsby-node.js to create a pre-filtered page of data per each of the 50 states. This will create some nice SEO opportunities to have a URL per state of black owned businesses. It will also allow us to properly categorize data that does not have complete information, and ensure that they can still be included and searched for on the site.

PrimaryNav

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=427%3A1426
https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1156%3A6458

The alignment of the navigation items, and some small stylistic changes need to be reflected in the code. Changes include:

• Addition of a "Subscribe" button (using our current button components which were merged in #34 )
  • On mobile, the subscribe button should span the full width of the navigation container, and the button text should be centered.
  • Functionality When a user clicks on this Subscribe button, a Modal (https://chakra-ui.com/modal) should pop up. For this task we can leverage dummy content within the modal.
• Primary navigation items should now be aligned left
• Background color of the nav should now be our black-000 variable

• If you go to /businesses the following warning is displayed Warning: Each child in a list should have a unique "key" prop. Check the render method of Pagination. See https://fb.me/react-warning-keys for more information.

Business Filtering

Filters should be created to allow a user to filter results from the BusinessInNeedFeed component by the following criteria:

• Business Type

  • Label: "Business"
  • Type: single select
    • Options: "Entertainment", "Food and beverage", "Health and wellness", "Professional services", "Retail"
  • Placeholder: "Select type"

• Location

  • Label: "Location"
  • Type: text
    • Allow users to type their city. i.e "Denver" should return any business who's location includes "Denver".
  • Placeholder: "Enter city"

• Need

  • Label: "Need"
  • Type: single select
    • For V1 this should be a "disabled" field that pre-populates with an "Impacted by protests" option.
    • For V1 this select field will not affect filtered results. The business filters will only display businesses in need.

• Submit

  • Type: submit
  • Label: "Search"
  • On click of the submit button or on 'enter', the filtered results should appear below the filters without a page refresh.

Resource Filtering

Filters should be created to allow a user to filter results from the SupportingOrgFeed component by the following criteria:

• Resources For

  • Type: single select
    • Options: "Ally", "Business owner"
  • Label: "Resources for"
  • Placeholder: "Who are you?"

• Location

  • Label: "Location"
  • Type: text
    • Allow users to type their city. i.e "Denver" should return any business who's location includes "Denver".
  • Placeholder: "Enter city"

• Submit

  • Type: submit
  • Label: "Search"
  • On click of the submit button or on 'enter', the filtered results should appear below the filters without a page refresh.

Ally Filtering

• Skill

  • Type: single select
  • Label: "Skill"
  • Placeholder text: "What do you need?"
  • Options:
    • Business
    • Marketing
    • Outreach
    • Tech
    • Government

• Location

  • Label: "Location"
  • Type: text
    • Allow users to type their city. i.e "Denver" should return any ally who's location includes "Denver".
  • Placeholder: "Enter city"

• Submit

  • Type: submit
  • Label: "Search"
  • On click of the submit button or on 'enter', the filtered results should appear below the filters without a page refresh.

Filter Results

The results should be dynamically updated upon user hitting "Search" or hitting "return" on their keyboard as any normal form would.

IMPORTANT :: Accessibility needs to be top of mind for the results, please refer to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions to ensure that live updated regions are properly announced to screen readers.

For reference:
#207

Resolve issue from Lighthouse scan:
List items (

Can a formal Code of Conduct be added to this project? https://help.github.com/en/github/building-a-strong-community/adding-a-code-of-conduct-to-your-project

Also, potentially community guidelines as well: https://help.github.com/en/github/building-a-strong-community/setting-guidelines-for-repository-contributors

A dev I want to know if any of the pages have a11y issues, not just the home page

Note:
Either use sitemap like in this article or gatsby-cypress-endpoints

go over the readme and update it since so much has changed over the past few days leading up to launch.

• Remove Discord Invite Link
• Maybe remove links to Trello
• Update terminology

NoResults

Figma Desktop: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A11025
Figma Mobile: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A11093

When a user filters for Businesses or Allies, and their filter yields no results, they should be presented with a component that contains a Heading, Paragraph, and Airtable form embed via iframe src (use a placeholder for the Airtable form for now).

Styling should be handled through the use of ChakraUI components, and theme variables should be used where possible for things like font styles, colors, and spacing.

If possible, this component should be interchangeable between User Types (Businesses, and Allies).

If possible, through props, a Developer should be able to edit the heading, paragraph, and iframe src.

If reuse of this component isn't viable, two separate NoBusinessResults and NoAllyResults can be created, where the content is handled within the components themselves.

Buttons

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=2%3A102

Buttons should extend existing Chakra UI components to achieve the style outlined in the figma document for each state and variation.

Steps

1. Load https://www.rebuildblackbusiness.com/businesses in any browser (I tried FF, Safari and Chrome on macOS)
2. Scroll down to the card for "Wild Haven Botanica LLC"
3. Click the "Learn More" button

Expected

User ends up at https://www.wildhavenbotanica.com

Actual

User ends up at https://www.rebuildblackbusiness.com/www.wildhavenbotanica.com

More details

Seems like some of the business urls in your data (in airtable?) are being treated as relative links because they don't start with the protocol.

Screenshot

Resolve this warning from Chakra UI:
External link https://www.instagram.com/clay.banks was detected in a Link component. Use the Link component only for internal links.

Ally Page Gating

Figma Desktop: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A9992
Figma Mobile: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=1155%3A10056

When a user visits the Allies page for the first time, they should be presented with a popup asking them to agree to our terms and conditions (link TBD). Upon checking the checkbox, the modal will be closed, and the AllyFeed will be rendered.

Functionally, we want to prevent easy scraping of our user's data. So in order to help cut down on that we require folks to accept terms and conditions before they view the list. We need to ensure that no data is shown until the terms and conditions have been clicked, instead, behind this modal we will show a grid of "Skeleton" elements (https://chakra-ui.com/skeleton). Once the checkbox has been clicked, localStorage should be used to ensure that user does not have to accept the terms and conditions again, the modal should close, and the Skeleton elements should be re-rendered with real data.

Setup https://www.gatsbyjs.org/packages/gatsby-plugin-sitemap/ to generate a sitemap for SEO & to be able to have Cypress loop through the whole site to easily scan for a11y issues (in a future Issue)

AS a User
When I see the social links
I want to be able to click them and go to the correct place

AC:
https://www.facebook.com/RebuildingBlack
https://www.instagram.com/rebuildingblack/
https://twitter.com/rebuildingblack
Mailto: [email protected]
Paypal: waiting on, will get by by 6/10

Area: https://d.pr/i/7tbKI6

https://trello.com/c/x7yKO3ce

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=429%3A57

Leveraging Chakra UI components and already existing ContactCard components, we need to layout the home page to match up to UI designs. H2 headers should be used for "who we are", "mission", and "contact" headers

Trello:
https://trello.com/c/TeFxrCVb/43-about-page

Image Assets:

• Cloudinary ID for Fist image: assets/people-protesting-on-street-4552840_gginry
• Cloudinary ID for Contact image1: assets/contact-left
• Cloudinary ID for Contact image2: assets/contact-middle
• Cloudinary ID for Contact image3: assets/contact-right

Desktop:

Responsive

The layout should be responsive, the content will center, span the full width.

Mobile:

Loading

Because of the amount of data we are presenting to users, we want to be sure that between perceived page loads, any component that has to fetch data ( and for example) should present a <Loading /> component.

A simple Chakra UI spinner will suffice for this task https://chakra-ui.com/spinner

Figma: https://www.figma.com/file/Lo1ZcBOO9t4QRbX2I0PwBQ/RBB?node-id=0%3A1

Leveraging Chakra UI components and already existing ContentBlock and PrimaryButton components, we need to layout the home page to match up to UI designs.

Trello:
https://trello.com/c/UfKtiYcc/11-layout-homepage-content

Image Assets:

• Cloudinary ID for Fist image: assets/home-header-bg
• (Alternate) Cloudinary ID for Fist image: assets/home-header-bg-space
• Cloudinary ID for Contact image1: assets/cta1-bg
• Cloudinary ID for Contact image2: assets/cta2-bg
• (Alternate) Cloudinary ID for Contact image2: assets/cta2-bg-space
• Cloudinary ID for Contact image3: assets/cta3-bg

Desktop:

Responsive

The layout should be responsive, the content will center, span the full width.

Mobile:

On the about page, where it mentions Render-Atlanta it should link to the website: https://www.renderatl.com/

The text for the about page can be updated at: https://github.com/Rebuild-Black-Business/RBB-Website/blob/master/src/constants/about.js

This happens on the legal page where we don't have pictures