feat(icons): updated star icons, added star ratings

[austingardner]

Description

Updated individual star icons, as well as added the "star ratings" icons - which are rows of stars that allow ratings to be quickly displayed.

Context

One issue I ran into was that certain icons with two colors can't be filled by default, and I'm not sure how I would change their colors with CSS. So I ended up having a "light" mode and a "dark" mode for star-half as well as the "star ratings" icons. Maybe we can come up with a better solution in the future.

References

closes #1473

Screenshots

[ianmcburnie]

I think we'll need to come up with a better approach that leverages pure CSS. Dark mode can only trigger a CSS media query, it can't modify HTML.

How about if the star-half SVG contains two paths (left side and right side), and each path has a class that can be targeted in the media query? Then you can modify its fill/color. You might not need even need class, maybe just nth child selector will do.

If this works we can then delete star-half-dark.

[ianmcburnie]

This seems to work pretty well for both color modes:

<symbol id="icon-star-half" viewBox="0 0 22 22">
  <path d="M11.0438 2.19068C11.3425 1.26977 12.6576 1.26977 12.9563 2.19068L15.0889 9H22C22.9704 9 23.3703 9.97367 22.5883 10.5428L16.9876 14.6188L19.1211 21.1958C19.4191 22.1146 18.3552 22.8737 17.5702 22.3024L12 18.2486L6.42991 22.3024C5.64488 22.8737 4.58098 22.1146 4.879 21.1958L7.01242 14.6188L1.41178 10.5428C0.629732 9.97367 1.04239 9 2.01275 9H8.92386L11.0438 2.19068Z" style="filter: opacity(0.25)"/>
  <path d="M6.42993 22.3024L12.0001 18.2486V1.5C11.5966 1.5 11.1931 1.73023 11.0438 2.19068L8.92388 9H2.01277C1.04241 9 0.62975 9.97367 1.4118 10.5428L7.01244 14.6188L4.87902 21.1958C4.581 22.1146 5.6449 22.8737 6.42993 22.3024Z" />
</symbol>

The trick is style="filter: opacity(0.25)"

Might just need a little fine tuning to get the right shade/opacity.

@austingardner You could apply the same technique to the star ratings and then go ahead and delete all the "dark" versions.

p.s. I also added an update to Gulp which now auto syncs the SVG, without needing to stop the server and rebuild.

[austingardner]

Okay I think they're ready!
here's how things look after applying the filter: opacity(0.25) strategy:

[ianmcburnie]

One general comment is that we might want to start looking into breaking up this large icon file by type, e.g. star series, shipping, navigation, etc. The file is getting pretty huge now (~123kb).

We could do this in a backwards compatible way where @ebay/skin/icon brings in a file with all icons, but also have submodules for specific files, e.g.@ebay/skin/icon/stars, @ebay/skin/icon/shipping.

We'd need a simple package script that would stitch all the individual files together into the large file.

[austingardner]

One general comment is that we might want to start looking into breaking up this large icon file by type, e.g. star series, shipping, navigation, etc. The file is getting pretty huge now (~123kb).

We could do this in a backwards compatible way where @ebay/skin/icon brings in a file with all icons, but also have submodules for specific files, e.g.@ebay/skin/icon/stars, @ebay/skin/icon/shipping.

We'd need a simple package script that would stitch all the individual files together into the large file.

I'd be interested in taking that project on!

[ianmcburnie]

So the more I look at it, I'm not sure that star ratings belong in the icon file. They don't feel like icons. They feel like a different thing altogether. I'm going to either move or comment them out of this PR temporarily and then we can revisit in #1599

[agliga]

So the more I look at it, I'm not sure that star ratings belong in the icon file. They don't feel like icons. They feel like a different thing altogether. I'm going to either move or comment them out of this PR temporarily and then we can revisit in #1599

We can probably do something similar like we did with program-badge and have a star-rating file.

[ianmcburnie]

Yep, I think that's what I'll go with.

[ianmcburnie]

So I separated out the star-rating from icon into its own module. This addresses the non-interactive part of #1599. The interactive star rating can be tackled in a future PR.

Some other cleanup:

• Removed all star rating BEM modifiers, given that they all have the same width and height
• Removed the "foreground-" prefix from icon, program badge and star-rating. This naming is a left over from when we had background icons
• Cleaned up program-badge.less by grouping selectors
• Prettified the program-badge section of website (used same layout as icons section)

[agliga]

Love the new changes! They look great and much cleaner! Bravo!