Create Product::Avatar component
#394
Conversation
web/app/components/doc/thumbnail.ts
Outdated
| @@ -20,6 +25,14 @@ export default class DocThumbnailComponent extends Component<DocThumbnailCompone | |||
| } | |||
| } | |||
|
|
|||
| protected get productAvatarSize() { | |||
There was a problem hiding this comment.
Do we still need sizeIsLarge() with this?
| private get sizeIsMedium() { | ||
| return this.args.size === HermesAvatarSize.Medium; | ||
| } | ||
|
|
||
| private get sizeIsLarge() { | ||
| return this.args.size === HermesAvatarSize.Large; | ||
| } |
There was a problem hiding this comment.
Curious about this pattern vs. checking the value in the template using a more generic getter that just returns the size (like was added in the thumbnail component in this PR) - seems like that could be more scalable?
There was a problem hiding this comment.
Most of it was the convenience of having everything in one file in the early phase. But it's worth noting that Tailwind's dynamic class rules limit our efficiency a bit.* Still, we're past the early phase, so we can be smarter here. I refactored to use CSS classes.
* Of course, there are workarounds. I think safe-listing the w- and h- classes would allow us to do stuff like class="h-{{this.size}}" if that were ever preferable to CSS.
Pending #385 #387
Component-izes the "product badge" (renamed to ProductAvatar). We'll soon expand this to handle products without FlightIcons.