Created custom button variants

[ryandotfurrer]

Closes issue #124

Change Description(s)

-Edited Button component to customize to our colors

• Commented out the initial "default" and "outline" variants and made my own.
• Our design currently only uses one type of button, but I thought it wise to at least add one other variant.
• 
• I also edited the base button component, not just our variants, to be the full-width of their container as no part of our design has a button that is not as wide as the parent container.

  Finished Results

  Below is a screenshot of their buttons. I placed them inside a div with a border and some padding so you could see that they are the full-width of the parent container (minus the padding).

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
gridiron-survivor	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2024 1:47am
gridiron-survivor-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2024 1:47am

[ryandotfurrer]

Everything looks good to me! Although you should look into the PR failing the Vercel check.

Buh, it was still running when I last checked and didn't see it failed. I'll have to look into why.

[CorinaMurg]

@ryandotfurrer
I'm very new to Next and shadcn, and in general working with component libraries, but this looks good to me.

[shashilo]

@ryandotfurrer please adjust the Storybook story to reflect and show these variants as well. This is the way @jasinn will review design implementation. Also, add unit test for these components to ensure the variants are showing the correct styles. We should look into adding visual tests with Storybook 8 as well.

[ryandotfurrer]

@ryandotfurrer please adjust the Storybook story to reflect and show these variants as well. This is the way @jasinn will review design implementation. Also, add unit test for these components to ensure the variants are showing the correct styles. We should look into adding visual tests with Storybook 8 as well.

I will make these updates (and your above-mentioned ones) by EoD 4/16/24.

[ryandotfurrer]

@ryandotfurrer please adjust the Storybook story to reflect and show these variants as well. This is the way @jasinn will review design implementation. Also, add unit test for these components to ensure the variants are showing the correct styles. We should look into adding visual tests with Storybook 8 as well.

Breaking down into separate tasks:

• [X] Adjust Storybook to reflect and show these variants.
• [X] Add unit test to ensure the variants are showing the correct styles using React Testing Library with Jest.
• [ ] Look into adding visual tests within Storybook 8.

[ryandotfurrer]

@ryandotfurrer please adjust the Storybook story to reflect and show these variants as well. This is the way @jasinn will review design implementation. Also, add unit test for these components to ensure the variants are showing the correct styles. We should look into adding visual tests with Storybook 8 as well.

I will make these updates (and your above-mentioned ones) by EoD 4/16/24.

@shashilo Please re-review when you get a chance. I need to get to bed but will work on the following tomorrow during lunch and after work:

• [X] Add unit test to ensure the variants are showing the correct styles using React Testing Library with Jest.
• [ ] Look into adding visual tests within Storybook 8.

[ryandotfurrer]

I was able to run pnpm run build locally without a problem, not sure why I am getting errors with Vercel when I push...