2.24.0

Share

Share Component in Bolt

Published

History: View changes
Install: yarn add @bolt/components-share
Source code: View on Github
Dependencies: @bolt/components-copy-to-clipboard @bolt/components-icon @bolt/components-list @bolt/core-v3.x

Overview

Share block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM

npm install @bolt/components-share

Description

The share component provides the user a visual queue to share the content with relevant peers, as well as an easy mechanism to actively do the sharing.

OG Tags

OG tags MUST be present for share functionality to work correctly (see example below)
The only currently supported share methods are:
- Facebook
- Twitter
- LinkedIn
- Email
- Copy to Clipboard (component)
Facebook only needs u (URL) to scrap the page's OG Tags
- Facebook Sharing API resources: https://developers.facebook.com/docs/sharing/reference/share-dialog#params_share
- Facebook Open Graph Debuger: https://developers.facebook.com/tools/debug/
Twitter Needs at least one of the following query vars:
- url (recommended -- URL included with the Twee)
- text (recommended -- re-populated text highlighted in the Tweet composer)
- via (Attribute the source of a Tweet to a Twitter username, no @ needed)
- hashtags (A comma-separated list of hashtags to be appended to default Tweet text)
- Twitter Tweet API resources: https://dev.twitter.com/web/tweet-button/parameters#tweet-content-parameters
- Twitter card validator: https://cards-dev.twitter.com/validator
LinkedIn only needs url to scrap the page's OG Tags, but also can include:
- title
- summary
- source
- LinkedIn Sharing API resources: https://developer.linkedin.com/docs/share-on-linkedin (click "Customized URL")
Email Recommended query vars:
- subject
- body

Example

<meta property="og:type" content="article" />
<meta property="og:title" content="Bolt Design System: Page Title" />
<meta property="og:description" content="Sample description" />
<meta property="og:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="480" />
<meta property="og:image:height" content="480" />
<meta property="og:url" content="https://boltdesignsystem.com/some-page-title-here" />
<meta property="og:site_name" content="Bolt Design System" />
<!-- Twitter specific tags -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Bolt Design System: Page Title" />
<meta name="twitter:description" content="Sample description" />
<meta name="twitter:image" content="https://boltdesignsystem.com/images/500x500-480.jpg" />
<meta name="twitter:site" content="@pega" />

Best Practices

Don't use the share tool with a page's related sections
Implement any "stickiness" and placement functionality on the platform the component is being used in
For larger screens, ease-in opacity from 0% to 100% on scroll. The placement should be lower right-hand side and fixed until the main page content is scrolled pass
Don't have the fixed position of the component overlap any "related content"

Overview

Usage

Schema

Edit this page

Testing Steps

Usage

{% include "@bolt-components-share/share.twig" with { sources: [ { name: "facebook", url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse" }, { name: "twitter", url: "https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!" }, { name: "linkedin", url: "https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com" }, { name: "email", url: "mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com" } ], copy_to_clipboard: { text_to_copy: "https://boltdesignsystem.com" }, } only %}

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
text	Defines the label text in front of the social icons.	`string`	`Share this page`	—
size	Controls the size of icons and spacing.	`string`	`medium`	`small` or `medium`
align	Controls the horizontal alignment of label text and icons.	`string`	`start`	`start`, `center`, `end`
opacity	Controls the overall transparency of the share tool.	`integer`	`100`	`100`, `80`, `60`, `40`, `20`
sources	Social media sources to share to.	`array`	—	[items]: Type: `object` Properties: `name` Name of the social media source. Type: `string` Enum: `facebook`, `twitter`, `linkedin`, `email` `url` The specifically formed share URL with query string. Type: `string`
copy_to_clipboard		`object`	—	@bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml > Object details `attributes` A Drupal-style attributes object with extra attributes to append to this component. Type: object — `text` This property has been renamed trigger_text Type: string — `copiedText` Use the custom_confirmation property instead if you need to change the confirmation text. Type: string — `iconSize` Use custom_trigger, custom_transition, and custom_confirmation properties if you need to change icon size. Type: string — `url` This property has been renamed text_to_copy Type: string — `trigger_text` Text to use for the inital copy button. Ignored if the custom_trigger property is used. Type: string — `text_to_copy` The text to copy to the clipboard. Type: string — `custom_trigger` (optional) Custom content to show for the initial copy trigger. If you pass a link, set the URL to '#!' since it should not being followed. Type: string, object, array — `custom_transition` (optional) Custom content to show while copy is in progress. This content will be rotated while the copying happens, so it's recommended to pass an icon. Type: string, object, array — `custom_confirmation` (optional) Custom content to show after a successful copy. Type: string, object, array —
inline	Button version has been removed so this prop is no longer needed.		—	—
copyToClipboard	Please use copy_to_clipboard.		—	—

Small Size

Medium Size

Opacity will make the share tool semi-transparent, and transparency goes away if user hovers over it. This should be used if you don't want the share tool to create too much distractions on first impression.

share

share docs Expand Collapse

Share

Published

Overview

Install via NPM

Description

OG Tags

Example

Best Practices

Usage

Schema

share Expand Collapse

share size variations Expand Collapse

Small Size

Medium Size

share opacity variations Expand Collapse

Opacity: 100

Opacity: 80

Opacity: 60

Opacity: 40

Opacity: 20

share align variations Expand Collapse

Align: start

Align: center

Align: end

share custom label Expand Collapse

share theme variations Expand Collapse

xdark

dark

light

xlight

share docs

share

share size variations

share opacity variations

share align variations

share custom label

share theme variations