Stabilizing follow-us plugin

[jmealing]

• Remove provisional classes
• Adjustment to margins in lists to have better aligned spacing and touch target areas
• Remove margin on h2 that is causing it to have a large gap on mobile

To do:

• DTO to update html file for the Institutional Landing page to add a margin to make things align better
• DTO to create guidance page
• DTO EN: PR Update social-media-channels.md canada-ca/design-system#308
• DTO FR: PR in progress

[jmealing]

Unfortunately I can't get the local preview working on my devices, but I coded the page elsewhere to validate these edits should work to improve the design spacing

[duboisp]

@Garneauma when you have time this week, can you build a site demo + link to where to download the compiled version in .zip.

[Garneauma]

@jmealing Unfortunately, some of the changes you made are breaking the older pattern of the follow us plugin (.followus). Is the intent to stop supporting the older pattern?

Secondly, I think this stabilization will require us to create a documentation for the follow us plugin in order for us to test and track upcoming changes. Are you interested in creating this documentation or are you relying on us to create it? If you are relying on us, we will most likely create a separate PR that would include your few change suggestions regarding margins.

Finally, could you send the link to the guidance for this plugin?

Thank you!

[jmealing]

@Garneauma The intention is to stop supporting the older pattern and replace it with this one

I'll discuss the other items with the DTO team and get back to you

The guidance is in staging here: https://deploy-preview-308--design-system-canada-ca.netlify.app/common-design-patterns/social-media-channels

[jmealing]

@Garneauma Could you clarify what changes would be breaking between the new pattern and the old? They use two entirely different classes gc-followus vs followus

[Garneauma]

@Garneauma Could you clarify what changes would be breaking between the new pattern and the old? They use two entirely different classes gc-followus vs followus

They indeed use a different class. However, they use the same pseudo-class to build the styles in SASS (%social-media-icons-followus-logo-properties). Since you removed "provisional" from the pseudo-class name at line 71, it now overwrites the pseudo-class defined at line 5 (which now has the exact same name). I have suggested changes to fix the issue.

[jmealing]

@Garneauma Thanks for clarifying, I see what happened now. I accepted your changes

[Garneauma]

@jmealing The old pattern looks good now. Thank you.

I was comparing the output of GCWeb with your latest changes vs the guidance and noticed the spacing is a little different for the stacked version and very different for the inline version. Is this intentional?

GCWeb stacked:

Guidance stacked:

GCWeb inline:

Guidance inline:

[jmealing]

@Garneauma You're right, there shouldn't be that much spacing between the heading and the icons for inline. I am not able to preview my edits reliably which makes it a challenge. It's about more than double what it should be.

The guidance draft image does need to be updated too. The slightly increased spacing between the individual icons themselves is correct, and a bit more space between header and icons than that pictured is intended.

[Garneauma]

@jmealing The following change should fix the issue.

[jmealing]

@Garneauma Thank you! Changes accepted

[Garneauma]

@jmealing This component will need a documentation page and working examples (for stacked and inline).

Are you willing to try the new data-first approach for the documentation? If so, you can start with the sites/date-modified files and edit it for gc-follow-us. You will only need the 2 HTML files and the JSON-LD file. Don't bother with the "changesets" and "iterations" properties in the JSON-LD as they can be a bit tricky. I can suggest the content for those once you are done.

If not, we can discuss another approach. Thanks!

[jmealing]

@Garneauma guidance and examples have been created in the sites folder. Please let me know if we need additional changes. I flagged some items to send to translation

[duboisp]

Pre-approved upon review and testing

[duboisp]

Reviewed and tested, everything work as expected.

The following will need to be completed, we will do it after this is merged considering this is only documentation related

• Documents the to be deprecated asset "twitter.svg"
• Document the new asset "x.svg"

Changes was reviewed and addressed by Garneauma