Coding-Coach / coding-coach

This is the landing page :)
https://codingcoach.io/
MIT License
452 stars 161 forks source link

Components - Icons #259

Closed emmabostian closed 5 years ago

emmabostian commented 5 years ago

image

Assets

All icons & color codes can be found on the Sketch cloud: https://sketch.cloud/s/xVR5A/paKjK7A

Details

Given that we are going to use our own custom svg icons, we need to remove @fortawesome from our dependencies: https://github.com/Coding-Coach/coding-coach/blob/develop/package.json#L28-L31

We already have an Icon component to render svg icons, let's use this approach for all new icons.

This task also includes migrating the current icons in the home page from fortawesome to the new Icon component that we have.

Edit: The design contains two states for the icons (active, inactive), that should be handled by the navigation component (We don't have it yet), this task doesn't include that. Only adding the icons to our icons catalog, we might want to create a storybook for all the available icons we already have.

steoneill commented 5 years ago

I can take this if that’s ok? :)

crysfel commented 5 years ago

All yours! Just ask @emmawedekind to add you to the organization so I can officially assign it to you.

As mentioned in the details section, this tasks also includes removing fortawesome, we already have icons for facebook, twitter and isntagram inside src/components/icon, let's use that in the landing page as well.

Let me know if you have additional questions.

steoneill commented 5 years ago

@emmawedekind could you add me to the organisation please? :)

steoneill commented 5 years ago

@crysfel i believe i've been added now :)

emmabostian commented 5 years ago

Added! Sorry about the delay :)

emmabostian commented 5 years ago

Hi, what's the status @steoneill

devictoribero commented 5 years ago

@steoneill image

steoneill commented 5 years ago

Hi guys!

Sorry for the delay, had a very sick 6 month old so haven't progressed as quick as I thought!

Will get this pushed ASAP!

(Feel free to move it to someone else, i'd 10000% understand)

trent-boyd commented 5 years ago

@emmawedekind I don't mind taking this over so @steoneill can focus on taking care of his sick kiddo. 👶 😷

I think though, that I might need the actual SVG assets exported from Sketch. I don't see a way to access them on the link you posted. Or maybe I need to sign up for Sketch cloud?

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

devictoribero commented 5 years ago

@emmawedekind I don't mind taking this over so @steoneill can focus on taking care of his sick kiddo.

I think though, that I might need the actual SVG assets exported from Sketch. I don't see a way to access them on the link you posted. Or maybe I need to sign up for Sketch cloud?

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

ow... I did not know about its existence! It's cool

crysfel commented 5 years ago

@crysfel, do you think we could use this cool new feature of react-scripts 2.0 to automagically import SVG icons as React components? Looks like it could be pretty simple to add new icons in the future.

We are using it in some parts of our application, however... for the icons we do have react components for that where we just define the vectors in a variable or if there are several elements we can define as many nodes as needed.

https://github.com/Coding-Coach/coding-coach/blob/develop/src/components/icon/Twitter.js

trent-boyd commented 5 years ago

@crysfel: I saw that, but I don't think the approach in Icon.js will work for multicolored icons, which will have more multiple paths than won't fit into the vectors prop.

I don't have any of these SVG assets yet, but here's an example from an old project I worked on. Note that there's multiple<path> nodes, and a <mask>.

emmabostian commented 5 years ago

Can you grab the assets from Sketch Cloud? That's the easiest way @trent-boyd

crysfel commented 5 years ago

The Icon component also accepts any number of children, specifically for this scenario:

<Icon {...props}>
   <g path="abc....." />
   <g path="abc....." />
   <g path="abc....." />
</Icons>
trent-boyd commented 5 years ago

Hmm. Sketch Cloud requires me to have Sketch to get these SVGs out of the document. Hopefully I can resolve this before the demo is up. I've exported these each on an 80x80 artboard. If there's some standard for this, let me know.

image

trent-boyd commented 5 years ago

@crysfel: Let me know what you think about this. It's probably easier to focus on this commit since the raw SVGs make a lot of green in the diff view.

emmabostian commented 5 years ago

I put all the SVG icons up on the Invision board! Let me know if you can't download them for whatever reason: https://projects.invisionapp.com/boards/UF3Q7E6QEZM/

emmabostian commented 5 years ago

Hi... any update on this @trent-boyd ? :) We need this to move forward with other tasks!

emmabostian commented 5 years ago

Linked with PR #291

trent-boyd commented 5 years ago

@emmawedekind: Sorry about that. I've been prepping for some upcoming interviews lately, and haven't had as much time as I'd like to contribute. Hoping to find some time in the next couple of days. 🤞

emmabostian commented 5 years ago

Great thanks! :) Just please update the issue when you're ready!

trent-boyd commented 5 years ago

Hey @emmawedekind, I'm not adding a specific Notifications icon since the red numbered indicator should be dynamic and can be created pretty easily with plain HTML & CSS.

image

devictoribero commented 5 years ago

How is this going @trent-boyd? Too much to do? Need help?

trent-boyd commented 5 years ago

@tureey: I'm done with the PR, just waiting for feedback from @emmawedekind and @crysfel.

https://github.com/Coding-Coach/coding-coach/pull/291

emmabostian commented 5 years ago

Super thanks!