Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.38k stars 1.97k forks source link

(3P) Add optional prop to implement a celebratory image to "Site Creation" checklist step #43938

Open getdave opened 3 years ago

getdave commented 3 years ago

Based on comment here let's add a celebratory image to the checklist step for "Site Created".

@danhauk can confirm design. Or possibly @jancavan?

Would it make sense to add an image to this step to bump up the celebratory nature little bit up?

@simison Quite possibly. Seems like a good suggestion. Currently, I'm working to this design by @danhauk. If we want/need to add this then it should probably be in a followup PR.

If @danhauk agrees then I'm happy to raise a separate Issue.

Originally posted by @getdave in https://github.com/Automattic/wp-calypso/pull/43861#issuecomment-654730148

Update: We can add an optional prop that can receive a component so the fireworks image (or whatever else) can be added here.

jancavan commented 3 years ago

Yes, I agree that this one card could be a little bit more celebratory. We can add the illustration back like so:

Screen Shot 2020-07-08 at 9 01 49 AM

I feel like the dark gray pill is a little too close to the heading. I think we should move it down a bit? @getdave @danhauk

danhauk commented 3 years ago

I agree. When this is picked up, could we make the task component have an optional image prop? I'm thinking of an additional use case would be as a video placeholder to open a support doc in a modal (something I was exploring previously as a future enhancement):

image
jancavan commented 3 years ago

@getdave I updated the mockup above. I think the illustration can be made slightly bigger. Thanks.

github-actions[bot] commented 3 years ago

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.