Add square blue icon share links variant

[AshGDS]

What / Why

• Adds a square blue icon variant of the share links component
• Reasoning: https://trello.com/c/LNOqGMgZ/49-build-social-media-links
• The existing component styles use position: absolute for the icons, which doesn't work nicely when we need them square. This is because the absolutely positioned icons don't affect the width/height of the DOM, so adding square padding just ended up in overlapping and bad overflows.
• Therefore, I've used display: flex along with inline-block to get the styles we want.
• I added a min-width at a certain breakpoint to make the reflow look nicer, though this is mainly to make the icons stack a bit nicer on the page we're going to put this variation on as we know which social icons / length of text they will be, so we can kind of control the reflow with the min-width. Of course it will be a bit of a unnecessary CSS rule if this variation was used on other pages.

Visual Changes

New example added, so will need a Percy review.