Update purchase frequency to use radio buttons

jamesncox commented 3 years ago

Description

Refactors the purchase frequency to use radio buttons instead of a drop down select, to better match our Figma design.

Related Issue

Closes #32

Acceptance Criteria

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

The main bulk of the work was creating the Tailwind utility classes and wrapping each clock SVG, input type radio and label in divs to be able to lay out each option as visually identical to our Figma design as possible.

Uses radio buttons instead of check boxes because radio buttons are more semantically correct in this situation when only one option is required. Updated the stylings with Tailwind utility classes to make each radio button look like our Figma design:
Includes Heroicon clock icon SVG as JSX next to each radio input type.

Refactored purchaseFrequency to have an initial state of null

const [purchaseFrequency, setPurchaseFrequency] = useState(null);

Refactored the Sweet Alert to alert the user if they forgot to select a radio button purchase frequency.

} else if (!itemName || !purchaseFrequency) {
Swal.fire({
title: 'UH OH!',
text: 'Must have an item name and purchase frequency',
icon: 'warning',
});

Visual Changes

	Before	After
Mobile Nav
Desktop

Sweet Alert activates if one of the purchase frequencies is not selected. new-sweet-alert-add-item

Testing Steps / QA Criteria

On main run git pull
Run git checkout update-purchase-frequency-checkboxes
Run npm install
Run npm start
Notice the new radio buttons and how you can use your keyboard to tab to them, and then your arrow keys to move up and down to select which one you prefer.

github-actions[bot] commented 3 years ago

Visit the preview URL for this PR (updated for commit 2ac2d2b):

https://tcl-23-shopping-list--pr48-update-purchase-freq-hb3jczi9.web.app

_{(expires Tue, 01 Jun 2021 22:59:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

jssckbl commented 3 years ago

This looks ready to merge to me 👍

the-collab-lab / tcl-23-smart-shopping-list