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: Add Avatar Component to Storybook #30

Merged
merged 5 commits into from
Jul 9, 2022
Merged

Conversation

pixelsbyeryc
Copy link
Contributor

What type of PR is this? (check all applicable)

  • πŸ• Feature
  • πŸ› Bug Fix
  • πŸ“ Documentation Update
  • 🎨 Style
  • πŸ§‘β€πŸ’» Code Refactor
  • πŸ”₯ Performance Improvements
  • βœ… Test
  • πŸ€– Build
  • πŸ” CI
  • πŸ“¦ Chore (Release)
  • ⏩ Revert

Description

This PR adds Avatar as a component.

It currently supports the following props:

  • avatarURL: sets the URL of the avatar
  • alt: sets the alt attribute for the image
  • size: sets both the width and height

Related Tickets & Documents

Fixes #19

Mobile & Desktop Screenshots/Recordings

Screen Shot 2022-07-09 at 5 50 43 AM

Added tests?

  • πŸ‘ yes
  • πŸ™… no, because they aren't needed
  • πŸ™‹ no, because I need help

Added to documentation?

  • πŸ“œ README.md
  • πŸ““ docs.opensauced.pizza
  • πŸ• dev.to/opensauced
  • πŸ“• storybook
  • πŸ™… no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

@pixelsbyeryc pixelsbyeryc self-assigned this Jul 9, 2022
@netlify
Copy link

netlify bot commented Jul 9, 2022

βœ… Deploy Preview for oss-insights ready!

Name Link
πŸ”¨ Latest commit 2649650
πŸ” Latest deploy log https://app.netlify.com/sites/oss-insights/deploys/62c9418366c26f000880b230
😎 Deploy Preview https://deploy-preview-30--oss-insights.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.

Copy link
Contributor

@chadstewart chadstewart left a comment

Choose a reason for hiding this comment

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

LGTM. Could you change the PR's title to sometthing that describes what you're doing rather than the component you're working on?

Copy link
Member

@bdougie bdougie left a comment

Choose a reason for hiding this comment

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

LGTM

@bdougie
Copy link
Member

bdougie commented Jul 9, 2022

Could you change the PR's title to something that describes what you're doing rather than the component you're working on?

I am going to add the Compliance workflow to start checking titles. This will be needed for automated changelogs and release notes. Because we have not started that yet, the title is fine. In the future, we will need to append, feat:, fix: or similar to it.

My hope is that changelogs will be easily shared with our early users.

@bdougie bdougie mentioned this pull request Jul 9, 2022
19 tasks
@chadstewart chadstewart changed the title Components/atoms/avatar feat: Add Avatar Component to Storybook Jul 9, 2022
@chadstewart
Copy link
Contributor

LGTM. Could you change the PR's title to sometthing that describes what you're doing rather than the component you're working on?

Nevermind. I just realized I could change the title.

@chadstewart chadstewart merged commit 7b662c7 into main Jul 9, 2022
@pixelsbyeryc pixelsbyeryc deleted the components/atoms/Avatar branch July 12, 2022 23:21
github-actions bot pushed a commit that referenced this pull request Aug 10, 2022
## 1.0.0 (2022-08-10)

### ⚠ BREAKING CHANGES

* Updated routing and removed references to portal in app (#99)
* Updated Atoms to enforce parent props and be easier to use (#70)
* Updating Storybook folder structure. (#41)

### πŸ“ Documentation

* Add a to-do to create an Avatar component ([237a633](237a633))
* Add background to OnboardingButton story ([9e4972e](9e4972e))
* Add Button to storybook ([5926ea6](5926ea6))
* Add Button Types to storybook ([0e28aa6](0e28aa6))
* Add Button with Icons to storybook ([8ac670b](8ac670b))
* Add controls to Avatar storybook ([1fc1d54](1fc1d54))
* Add controls to select the FilterCard icon to Storybook ([e2e96a1](e2e96a1))
* Add FilterCards to Storybook ([041b6d0](041b6d0))
* Add HighlightCard to storybook ([ab11b8e](ab11b8e))
* Add OnboardingButton to storybook ([5517b5f](5517b5f))
* Add pre-defined icon options to storybook ([08acf12](08acf12))
* Add ProgressPie to storybook ([be8bab4](be8bab4))
* Document `metricIncreases` in storybook ([d12e828](d12e828))
* Document new previews for Avatar component ([182c055](182c055))
* Remove filterName attribute from storybook ([e851d03](e851d03))
* Update HighlightCard storybook documentation ([6ba8998](6ba8998))
* Update storybook deployment in the README.md ([#38](#38)) ([4240f40](4240f40))

### 🎨 Styles

* Add flexbox to ToolList Button child span and remove whitespace wrap ([2ce327e](2ce327e))
* Add gap when percentage is over than 0 ([fde77e2](fde77e2))
* Define `max-width` to the HighlightCard ([e23d670](e23d670))
* Orange border only shows when focusing with keyboard ([3fb9fd3](3fb9fd3))
* Remove `overflow-hidden` from ToolList tab ([182104b](182104b))
* Rename ToolList Item class ([95d3bf2](95d3bf2))
* Update card spacing and icon sizes ([903d947](903d947))
* Update OnboardingButton color and font styles ([6a8d785](6a8d785))
* Update ProgressPie orange tone ([210c3ad](210c3ad))
* Use `h1` as the main Heading ([a79ea32](a79ea32))
* Use Tailwind colors instead of hard-coded colors ([6e7aa3e](6e7aa3e))
* Vertically align the Button Icons ([1915aff](1915aff))

### πŸ§‘β€πŸ’» Code Refactoring

* Add text styles to the `Button` in Nav component ([bb189cc](bb189cc))
* Add typeof to Story ([3f32115](3f32115))
* Fix lint in `next.config.js` ([f27c959](f27c959))
* Fix lint issue ([e408f5e](e408f5e))
* Move `isRemovable` conditional only to the `x` icon ([b9c0ee5](b9c0ee5))
* Remove `<progress>` element ([cb88eef](cb88eef))
* Remove `color` and `metric` props from HighlightCard ([a48db58](a48db58))
* Remove disabled from button ([6c80098](6c80098))
* Remove div that wraps the Link component ([09790f1](09790f1))
* Rename `slate-a` to `slate-opacity` ([cddb37c](cddb37c))
* Reorganize AuthSection elements and add flex gap ([fced100](fced100))
* Update Avatar attributes in Auth Section ([5a22ff5](5a22ff5))
* Update FilterCard attributes in Header ([7c01131](7c01131))
* Update FilterCard to not be removable on Header component ([37f2277](37f2277))
* Update icon props ([4d7eb79](4d7eb79))
* Update ProgressPie size ([d97ee92](d97ee92))
* Update ProgressPie size in OnboardingButton ([3fd58e6](3fd58e6))
* Updated Atoms to enforce parent props and be easier to use ([#70](#70)) ([f54b41f](f54b41f))
* Updated routing and removed references to portal in app ([#99](#99)) ([47f6c78](47f6c78))
* Updating Storybook folder structure. ([#41](#41)) ([db231fd](db231fd))
* Use `Text` instead of `StrongText` ([8d2d657](8d2d657))
* Use Nav as a wrapper ([e7ff5bb](e7ff5bb))
* Use storybook documentation code ([401ba90](401ba90))

### πŸ• Features

* Add `isRemovable` attribute to FilterCard ([4463a87](4463a87))
* Add `metricIncreases` prop ([cc70b27](cc70b27))
* Add accessibility attributes to ToolList tab item ([54de569](54de569))
* Add Avatar Component to Storybook ([#30](#30)) ([7b662c7](7b662c7))
* Add border to Avatar component ([ce53adf](ce53adf))
* Add Context Filter component to Header ([#145](#145)) ([0bc29b4](0bc29b4)), closes [#138](#138)
* Add HighlightCard icons ([c5c3477](c5c3477))
* Add icon prop to FilterCard with pre-defined icons ([04b727c](04b727c))
* Add icons to FilterCard component ([982e9c7](982e9c7))
* Add initials and pre-defined sizes to Avatar ([713c61a](713c61a))
* Add link to the `HighlightCard` component ([#130](#130)) ([a6db7d7](a6db7d7))
* Add metricArrow icon ([2058c23](2058c23))
* Add mobile responsiveness to organisms and dashboard ([#81](#81)) ([f9e58ef](f9e58ef))
* Add new props to the component ([b41d179](b41d179))
* Add newly created Storybook components to Tools Display ([#77](#77)) ([45f1a6e](45f1a6e))
* Add OnboardingButton to AuthSection ([58979ce](58979ce))
* Add orange, blue, red, and grass colors ([8d8eb52](8d8eb52))
* Add props to make component dynamic ([3704dcf](3704dcf))
* add release automation ([bd64682](bd64682)), closes [#16](#16)
* Add Slate from Radix Colors ([d9156f4](d9156f4))
* Add top content ([d24dfdd](d24dfdd))
* Add user authentication to app ([#96](#96)) ([81f6208](81f6208))
* Added design updates to app based on a All-Hands discussions and feedback from Terrence ([#1](#1)) ([2db7553](2db7553))
* Added Selectable Table component ([#60](#60)) ([0b77189](0b77189))
* Adds compliance checks to PRs ([#32](#32)) ([7872532](7872532))
* adds template files ([e9b3ece](e9b3ece))
* Change all checkboxes in Selectable Table Component ([#123](#123)) ([b0719c3](b0719c3))
* Change icon color based on which option ([0101d18](0101d18))
* Create `<Button>` component ([9f3c77a](9f3c77a))
* Create `ProgressPie` component ([1cee615](1cee615))
* Create OnboardingButton component ([5056f6d](5056f6d))
* Create progress bar ([fa07ba6](fa07ba6))
* Create styles for button types ([c9a3766](c9a3766))
* create weekly top5 ([#46](#46)) ([41d10bf](41d10bf))
* Implement `<ContextFilter>` component ([#94](#94)) ([18b5707](18b5707))
* Implement ContextThumbnail component ([#35](#35)) ([600463f](600463f))
* Implement Dropdown Component and Auth dropdown list ([#95](#95)) ([ef8a4a7](ef8a4a7))
* Implement Onboarding Flow UI ([#117](#117)) ([9e4d8e4](9e4d8e4))
* Implemented first draft of eChart Scatter Chart ([#65](#65)) ([9f1bc3d](9f1bc3d))
* Set up the HighlightCard component ([597c938](597c938))
* Structure the component ([b765b61](b765b61))
* Structure the main information on HighlightCard ([60a1c56](60a1c56))
* Style removable FilterCards ([83b6c92](83b6c92))
* Update Tool List Nav to be more compatible with Storybook ([#51](#51)) ([745378b](745378b))
* working supabase auth ([#106](#106)) ([186dc84](186dc84))

### πŸ› Bug Fixes

* add link to video ([3b27a69](3b27a69))
* Cleaning up CSS alignment ([#91](#91)) ([b570898](b570898))
* correct missing state dependency ([f3a5e06](f3a5e06))
* Re-implemented disabled functionality on selected tool nav. ([#27](#27)) ([50e3401](50e3401))
* team name ([57530d5](57530d5))
* **storybook:** Update folder convention for storybook builds ([#37](#37)) ([6d819f0](6d819f0))
* Updated auth-section with the new avatar component. ([#47](#47)) ([5b1053c](5b1053c))
* Updated eslint formatter to fix problem of formatter not linting ever… ([#53](#53)) ([b8475ba](b8475ba))
* Updated secondary link to Avatar component to hacktoberfest for now. … ([#34](#34)) ([22671a6](22671a6))

### πŸ” Continuous Integration

* Added Storybook deployment automation script to project. ([#21](#21)) ([d3685d8](d3685d8))
* correct nextjs build location ([0b24025](0b24025))
* correct release workflow dependencies ([461dffd](461dffd))
* default environment to development ([a5c286e](a5c286e))
@github-actions
Copy link

πŸŽ‰ This PR is included in version 1.0.0 πŸŽ‰

The release is available on GitHub release

Your semantic-release bot πŸ“¦πŸš€

ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this pull request Aug 17, 2023
## 1.0.0 (2022-08-10)

### ⚠ BREAKING CHANGES

* Updated routing and removed references to portal in app (#99)
* Updated Atoms to enforce parent props and be easier to use (#70)
* Updating Storybook folder structure. (#41)

### πŸ“ Documentation

* Add a to-do to create an Avatar component ([237a633](open-sauced/app@237a633))
* Add background to OnboardingButton story ([9e4972e](open-sauced/app@9e4972e))
* Add Button to storybook ([5926ea6](open-sauced/app@5926ea6))
* Add Button Types to storybook ([0e28aa6](open-sauced/app@0e28aa6))
* Add Button with Icons to storybook ([8ac670b](open-sauced/app@8ac670b))
* Add controls to Avatar storybook ([1fc1d54](open-sauced/app@1fc1d54))
* Add controls to select the FilterCard icon to Storybook ([e2e96a1](open-sauced/app@e2e96a1))
* Add FilterCards to Storybook ([041b6d0](open-sauced/app@041b6d0))
* Add HighlightCard to storybook ([ab11b8e](open-sauced/app@ab11b8e))
* Add OnboardingButton to storybook ([5517b5f](open-sauced/app@5517b5f))
* Add pre-defined icon options to storybook ([08acf12](open-sauced/app@08acf12))
* Add ProgressPie to storybook ([be8bab4](open-sauced/app@be8bab4))
* Document `metricIncreases` in storybook ([d12e828](open-sauced/app@d12e828))
* Document new previews for Avatar component ([182c055](open-sauced/app@182c055))
* Remove filterName attribute from storybook ([e851d03](open-sauced/app@e851d03))
* Update HighlightCard storybook documentation ([6ba8998](open-sauced/app@6ba8998))
* Update storybook deployment in the README.md ([#38](open-sauced/app#38)) ([4240f40](open-sauced/app@4240f40))

### 🎨 Styles

* Add flexbox to ToolList Button child span and remove whitespace wrap ([2ce327e](open-sauced/app@2ce327e))
* Add gap when percentage is over than 0 ([fde77e2](open-sauced/app@fde77e2))
* Define `max-width` to the HighlightCard ([e23d670](open-sauced/app@e23d670))
* Orange border only shows when focusing with keyboard ([3fb9fd3](open-sauced/app@3fb9fd3))
* Remove `overflow-hidden` from ToolList tab ([182104b](open-sauced/app@182104b))
* Rename ToolList Item class ([95d3bf2](open-sauced/app@95d3bf2))
* Update card spacing and icon sizes ([903d947](open-sauced/app@903d947))
* Update OnboardingButton color and font styles ([6a8d785](open-sauced/app@6a8d785))
* Update ProgressPie orange tone ([210c3ad](open-sauced/app@210c3ad))
* Use `h1` as the main Heading ([a79ea32](open-sauced/app@a79ea32))
* Use Tailwind colors instead of hard-coded colors ([6e7aa3e](open-sauced/app@6e7aa3e))
* Vertically align the Button Icons ([1915aff](open-sauced/app@1915aff))

### πŸ§‘β€πŸ’» Code Refactoring

* Add text styles to the `Button` in Nav component ([bb189cc](open-sauced/app@bb189cc))
* Add typeof to Story ([3f32115](open-sauced/app@3f32115))
* Fix lint in `next.config.js` ([f27c959](open-sauced/app@f27c959))
* Fix lint issue ([e408f5e](open-sauced/app@e408f5e))
* Move `isRemovable` conditional only to the `x` icon ([b9c0ee5](open-sauced/app@b9c0ee5))
* Remove `<progress>` element ([cb88eef](open-sauced/app@cb88eef))
* Remove `color` and `metric` props from HighlightCard ([a48db58](open-sauced/app@a48db58))
* Remove disabled from button ([6c80098](open-sauced/app@6c80098))
* Remove div that wraps the Link component ([09790f1](open-sauced/app@09790f1))
* Rename `slate-a` to `slate-opacity` ([cddb37c](open-sauced/app@cddb37c))
* Reorganize AuthSection elements and add flex gap ([fced100](open-sauced/app@fced100))
* Update Avatar attributes in Auth Section ([5a22ff5](open-sauced/app@5a22ff5))
* Update FilterCard attributes in Header ([7c01131](open-sauced/app@7c01131))
* Update FilterCard to not be removable on Header component ([37f2277](open-sauced/app@37f2277))
* Update icon props ([4d7eb79](open-sauced/app@4d7eb79))
* Update ProgressPie size ([d97ee92](open-sauced/app@d97ee92))
* Update ProgressPie size in OnboardingButton ([3fd58e6](open-sauced/app@3fd58e6))
* Updated Atoms to enforce parent props and be easier to use ([#70](open-sauced/app#70)) ([f54b41f](open-sauced/app@f54b41f))
* Updated routing and removed references to portal in app ([#99](open-sauced/app#99)) ([47f6c78](open-sauced/app@47f6c78))
* Updating Storybook folder structure. ([#41](open-sauced/app#41)) ([db231fd](open-sauced/app@db231fd))
* Use `Text` instead of `StrongText` ([8d2d657](open-sauced/app@8d2d657))
* Use Nav as a wrapper ([e7ff5bb](open-sauced/app@e7ff5bb))
* Use storybook documentation code ([401ba90](open-sauced/app@401ba90))

### πŸ• Features

* Add `isRemovable` attribute to FilterCard ([4463a87](open-sauced/app@4463a87))
* Add `metricIncreases` prop ([cc70b27](open-sauced/app@cc70b27))
* Add accessibility attributes to ToolList tab item ([54de569](open-sauced/app@54de569))
* Add Avatar Component to Storybook ([#30](open-sauced/app#30)) ([7b662c7](open-sauced/app@7b662c7))
* Add border to Avatar component ([ce53adf](open-sauced/app@ce53adf))
* Add Context Filter component to Header ([#145](open-sauced/app#145)) ([0bc29b4](open-sauced/app@0bc29b4)), closes [#138](open-sauced/app#138)
* Add HighlightCard icons ([c5c3477](open-sauced/app@c5c3477))
* Add icon prop to FilterCard with pre-defined icons ([04b727c](open-sauced/app@04b727c))
* Add icons to FilterCard component ([982e9c7](open-sauced/app@982e9c7))
* Add initials and pre-defined sizes to Avatar ([713c61a](open-sauced/app@713c61a))
* Add link to the `HighlightCard` component ([#130](open-sauced/app#130)) ([a6db7d7](open-sauced/app@a6db7d7))
* Add metricArrow icon ([2058c23](open-sauced/app@2058c23))
* Add mobile responsiveness to organisms and dashboard ([#81](open-sauced/app#81)) ([f9e58ef](open-sauced/app@f9e58ef))
* Add new props to the component ([b41d179](open-sauced/app@b41d179))
* Add newly created Storybook components to Tools Display ([#77](open-sauced/app#77)) ([45f1a6e](open-sauced/app@45f1a6e))
* Add OnboardingButton to AuthSection ([58979ce](open-sauced/app@58979ce))
* Add orange, blue, red, and grass colors ([8d8eb52](open-sauced/app@8d8eb52))
* Add props to make component dynamic ([3704dcf](open-sauced/app@3704dcf))
* add release automation ([bd64682](open-sauced/app@bd64682)), closes [#16](open-sauced/app#16)
* Add Slate from Radix Colors ([d9156f4](open-sauced/app@d9156f4))
* Add top content ([d24dfdd](open-sauced/app@d24dfdd))
* Add user authentication to app ([#96](open-sauced/app#96)) ([81f6208](open-sauced/app@81f6208))
* Added design updates to app based on a All-Hands discussions and feedback from Terrence ([#1](open-sauced/app#1)) ([2db7553](open-sauced/app@2db7553))
* Added Selectable Table component ([#60](open-sauced/app#60)) ([0b77189](open-sauced/app@0b77189))
* Adds compliance checks to PRs ([#32](open-sauced/app#32)) ([7872532](open-sauced/app@7872532))
* adds template files ([e9b3ece](open-sauced/app@e9b3ece))
* Change all checkboxes in Selectable Table Component ([#123](open-sauced/app#123)) ([b0719c3](open-sauced/app@b0719c3))
* Change icon color based on which option ([0101d18](open-sauced/app@0101d18))
* Create `<Button>` component ([9f3c77a](open-sauced/app@9f3c77a))
* Create `ProgressPie` component ([1cee615](open-sauced/app@1cee615))
* Create OnboardingButton component ([5056f6d](open-sauced/app@5056f6d))
* Create progress bar ([fa07ba6](open-sauced/app@fa07ba6))
* Create styles for button types ([c9a3766](open-sauced/app@c9a3766))
* create weekly top5 ([#46](open-sauced/app#46)) ([41d10bf](open-sauced/app@41d10bf))
* Implement `<ContextFilter>` component ([#94](open-sauced/app#94)) ([18b5707](open-sauced/app@18b5707))
* Implement ContextThumbnail component ([#35](open-sauced/app#35)) ([600463f](open-sauced/app@600463f))
* Implement Dropdown Component and Auth dropdown list ([#95](open-sauced/app#95)) ([ef8a4a7](open-sauced/app@ef8a4a7))
* Implement Onboarding Flow UI ([#117](open-sauced/app#117)) ([9e4d8e4](open-sauced/app@9e4d8e4))
* Implemented first draft of eChart Scatter Chart ([#65](open-sauced/app#65)) ([9f1bc3d](open-sauced/app@9f1bc3d))
* Set up the HighlightCard component ([597c938](open-sauced/app@597c938))
* Structure the component ([b765b61](open-sauced/app@b765b61))
* Structure the main information on HighlightCard ([60a1c56](open-sauced/app@60a1c56))
* Style removable FilterCards ([83b6c92](open-sauced/app@83b6c92))
* Update Tool List Nav to be more compatible with Storybook ([#51](open-sauced/app#51)) ([745378b](open-sauced/app@745378b))
* working supabase auth ([#106](open-sauced/app#106)) ([186dc84](open-sauced/app@186dc84))

### πŸ› Bug Fixes

* add link to video ([3b27a69](open-sauced/app@3b27a69))
* Cleaning up CSS alignment ([#91](open-sauced/app#91)) ([b570898](open-sauced/app@b570898))
* correct missing state dependency ([f3a5e06](open-sauced/app@f3a5e06))
* Re-implemented disabled functionality on selected tool nav. ([#27](open-sauced/app#27)) ([50e3401](open-sauced/app@50e3401))
* team name ([57530d5](open-sauced/app@57530d5))
* **storybook:** Update folder convention for storybook builds ([#37](open-sauced/app#37)) ([6d819f0](open-sauced/app@6d819f0))
* Updated auth-section with the new avatar component. ([#47](open-sauced/app#47)) ([5b1053c](open-sauced/app@5b1053c))
* Updated eslint formatter to fix problem of formatter not linting ever… ([#53](open-sauced/app#53)) ([b8475ba](open-sauced/app@b8475ba))
* Updated secondary link to Avatar component to hacktoberfest for now. … ([#34](open-sauced/app#34)) ([22671a6](open-sauced/app@22671a6))

### πŸ” Continuous Integration

* Added Storybook deployment automation script to project. ([#21](open-sauced/app#21)) ([d3685d8](open-sauced/app@d3685d8))
* correct nextjs build location ([0b24025](open-sauced/app@0b24025))
* correct release workflow dependencies ([461dffd](open-sauced/app@461dffd))
* default environment to development ([a5c286e](open-sauced/app@a5c286e))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

[Front-End] Implement User Avatar
3 participants