Blog: add share buttons

[kristinashu]

Build on the Blog MVP work to fully flesh out capabilities.

• Design has been finalized
• Link to original design ticket: Blog post detail page #2911 (original design ticket)
• Link to related ticket: Blog MVP #3029 (MVP ticket) & Design related content cards and functionality #3086 3030 (post MVP ticket)
• Link to Redpen: https://redpen.io/p/bha12cf7387de4f7e7
• Design changes been merged into the master Sketch file
• Desktop and mobile mockups are included
• Hover state for elements are designed

Requirements Checklist:

• Sticky Side Share buttons (disappears on mobile)
• Share buttons at the bottom of the blog post

Desktop (with hover states):

Tablet & Mobile: see https://redpen.io/p/bha12cf7387de4f7e7 (note that there are no side share buttons)

[mmmavis]

Do we plan to turn these button styles into two new "button group" styles or these are more one-off things?

[kristinashu]

We're exploring that question more here MozillaFoundation/Design#339 but I can see use using these buttons elsewhere (for example on our campaign pages).

[mmmavis]

We're exploring that question more here MozillaFoundation/Design#339 but I can see use using these buttons elsewhere (for example on our campaign pages).

kk I'll treat them as custom style for now until we've decided to move them to the official style guide.

@kristinashu how should each button function? I assume similar to what we have on PNI?

If so do we have default text to share out?

[kristinashu]

Yes same functionality please. Copy can just be:

[Title of blog post] by @mozilla [url to blog post]

[mmmavis]

@kristinashu should we make sure these icons are from set Sabrina designed? I know Twitter icon on Foundation site has been updated but the other three icons still need to be replaced. If you think this is a good idea can you include link to the icon folder? I can generate white icon version myself by editing the source code of the icon SVG.

[kristinashu]

Let's for sure use them! @beccaklam is looking at this right now in the button audit. Becca, do you think the new icons at max 16px will work here too?

[mmmavis]

While we are on this... do we plan to update the pill buttons on PNI to the rectangular ones we are adding to the blog page?

[beccaklam]

Sorry for the late reply on this, I was testing out the icons yesterday but got sidetracked by other work. I actually think 24px will work better for the circular buttons, as the 16px looks too small. As for the PNI share buttons, I don't feel a need to change them. I see PNI as more of a unique instance/microsite than an extension of the Foundation site. But others feel free to weigh in.

[beccaklam]

@kristinashu should we make sure these icons are from set Sabrina designed? I know Twitter icon on Foundation site has been updated but the other three icons still need to be replaced. If you think this is a good idea can you include link to the icon folder? I can generate white icon version myself by editing the source code of the icon SVG.

Yes, I'll get you these icons @mmmavis!

[beccaklam]

So, fidgeted with the icons again and 16px does work after all ... Here are the icons @mmmavis:
share-buttons.zip. I also updated the redpen with the new icons.

[beccaklam]

Ah, hold off on the facebook icon @mmmavis, I need to get you the official one instead. Will update my tomorrow morning!

[mmmavis]

@beccaklam No rush! I have to shift my focus to get the join us modal on Pulse to work first. 😉

[mmmavis]

Blocked on PR #3352 (Added 'share button group' style + example on /styleguide)