boltdesignsystem · remydenton · Sep 26, 2018 · Aug 16, 2018 · Aug 16, 2018 · Aug 22, 2018
diff --git a/apps/bolt-site/templates/_site-head.twig b/apps/bolt-site/templates/_site-head.twig
@@ -38,8 +38,22 @@
     <meta name="msapplication-config" content="/browserconfig.xml?v=LbyzAXRqNz">
     <meta name="theme-color" content="#1f2656">
 
-    <!-- Default OG Tag examples (related to Bolt Share Component) -->
-    {% include "@bolt-components-share/src/_share-meta-example.twig" %}
+    <!-- OG Tags -->
+    <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" />
 
     <link rel="stylesheet" href="{{ assets["bolt-global.css"] | default("/build/bolt-global.css") }}" media="all" />
 
@@ -54,4 +68,4 @@
     </script>
 
   </head>
-  <body class="c-bds-layout c-bolt-site {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}}">
+  <body class="c-bds-layout c-bolt-site {% if currentUrl == 'index.html' %} t-bolt-xdark {% endif %} c-bds-layout--{{ urlChunks | length >= 2 ? urlChunks|first : 'parent' }} {{ hasSidebar ? 'c-bds-layout--has-sidebar' : ''}}">
diff --git a/apps/pattern-lab/src/_meta/_00-head.twig b/apps/pattern-lab/src/_meta/_00-head.twig
@@ -47,8 +47,22 @@
     <meta name="msapplication-config" content="/browserconfig.xml?v=LbyzAXRqNz">
     <meta name="theme-color" content="#1f2656">
 
-    <!-- Default OG Tag examples (related to Bolt Share Component) -->
-    {% include "@bolt-components-share/src/_share-meta-example.twig" %}
+    <!-- OG Tags -->
+    <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" />
 
     <!-- async load PL's CSS -->
     <link rel="preload" href="/pattern-lab/styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

diff --git a/apps/pattern-lab/src/_patterns/02-components/share/00-share-docs.twig b/apps/pattern-lab/src/_patterns/02-components/share/00-share-docs.twig
@@ -1,5 +1,5 @@
 {% set usage %}{% verbatim %}
-{% include '@bolt-components-share/share.twig' with {
+{% include "@bolt-components-share/share.twig" with {
   sources: [
     {
       name: "facebook",
@@ -18,7 +18,7 @@
       url: "mailto:?&body=Sample%20Text%20--%20https%3A//bolt-design-system.com"
     }
   ],
-  copyToClipboard: {
+  copy_to_clipboard: {
     text_to_copy: "http://pega.com"
   }
 } only %}

diff --git a/apps/pattern-lab/src/_patterns/02-components/share/05-share.twig b/apps/pattern-lab/src/_patterns/02-components/share/05-share.twig
@@ -1,25 +1,23 @@
-<div style="margin: 0 auto; width: 100%; padding: 25rem 0 0;">
-  {% include '@bolt-components-share/share.twig' with {
-    sources: [
-      {
-        name: "facebook",
-        url: "https://www.facebook.com/sharer/sharer.php?u=https://5abd3062df99537b79e29496--bolt-design-system.netlify.com/pattern-lab/patterns/02-components-action-blocks-05-action-blocks/02-components-action-blocks-05-action-blocks.html&amp;src=sdkpreparse"
-      },
-      {
-        name: "twitter",
-        url: "https://twitter.com/intent/tweet?url=https://bolt-design-system.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!"
-      },
-      {
-        name: "linkedin",
-        url: "https://www.linkedin.com/shareArticle?url=https://5abd3062df99537b79e29496--bolt-design-system.netlify.com/pattern-lab/patterns/02-components-action-blocks-05-action-blocks/02-components-action-blocks-05-action-blocks.html"
-      },
-      {
-        name: "email",
-        url: "mailto:?&body=Sample%20Text%20--%20https%3A//bolt-design-system.com"
-      }
-    ],
-    copyToClipboard: {
-      text_to_copy: "http://pega.com"
+{% include "@bolt-components-share/share.twig" with {
+  sources: [
+    {
+      name: "facebook",
+      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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"
     }
-  } only %}
-</div>
+  ],
+  copy_to_clipboard: {
+    text_to_copy: "http://boltdesignsystem.com"
+  },
+} only %}
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/06-share-custom-label.twig b/apps/pattern-lab/src/_patterns/02-components/share/06-share-custom-label.twig
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/10-share-inline.twig b/apps/pattern-lab/src/_patterns/02-components/share/10-share-inline.twig
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/10-share-size-variations.twig b/apps/pattern-lab/src/_patterns/02-components/share/10-share-size-variations.twig
@@ -0,0 +1,29 @@
+{% set schema = bolt.data.components["@bolt-components-share"].schema %}
+
+{% for size in schema.properties.size.enum %}
+  <h3>{{ size|capitalize }} Size</h3>
+  {% include "@bolt-components-share/share.twig" with {
+    size: size,
+    sources: [
+      {
+        name: "facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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: "http://boltdesignsystem.com/#share-size"
+    }
+  } only %}
+{% endfor %}
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/11-share-inline-custom-label.twig b/apps/pattern-lab/src/_patterns/02-components/share/11-share-inline-custom-label.twig
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/15-share-opacity-variations.twig b/apps/pattern-lab/src/_patterns/02-components/share/15-share-opacity-variations.twig
@@ -0,0 +1,31 @@
+{% set schema = bolt.data.components["@bolt-components-share"].schema %}
+
+<p><mark>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.</mark></p>
+
+{% for opacity in schema.properties.opacity.enum %}
+  <h3>Opacity: {{ opacity|capitalize }}</h3>
+  {% include "@bolt-components-share/share.twig" with {
+    opacity: opacity,
+    sources: [
+      {
+        name: "facebook",
+        url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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"
+      }
+    ],
+    copyToClipboard: {
+      text_to_copy: "http://boltdesignsystem.com/#share-opacity"
+    }
+  } only %}
+{% endfor %}
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/20-share-custom-label.twig b/apps/pattern-lab/src/_patterns/02-components/share/20-share-custom-label.twig
@@ -0,0 +1,24 @@
+{% include "@bolt-components-share/share.twig" with {
+  text: "Custom label",
+  sources: [
+    {
+      name: "facebook",
+      url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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: "http://boltdesignsystem.com/#share-label"
+  }
+} only %}
diff --git a/apps/pattern-lab/src/_patterns/02-components/share/25-share-theme-variations.twig b/apps/pattern-lab/src/_patterns/02-components/share/25-share-theme-variations.twig
@@ -0,0 +1,62 @@
+{% set schema = bolt.data.components["@bolt-components-share"].schema %}
+{% set themes = get_data("@bolt/themes.schema.json") %}
+
+{% for theme in themes.properties.colors.enum %}
+  <h3>{{ theme }}</h3>
+  <div class="u-bolt-margin-bottom-medium">
+    {% embed "@utils/theme-demo.twig" %}
+      {% block demo_content %}
+        {% for size in schema.properties.size.enum %}
+          {% include "@bolt-components-share/share.twig" with {
+            size: size,
+            sources: [
+              {
+                name: "facebook",
+                url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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: "http://boltdesignsystem.com/#share-themes"
+            }
+          } only %}
+        {% endfor %}
+        {% include "@bolt-components-share/share.twig" with {
+          opacity: 60,
+          sources: [
+            {
+              name: "facebook",
+              url: "https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;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: "http://boltdesignsystem.com/#share-themes"
+          }
+        } only %}
+      {% endblock %}
+    {% endembed %}
+  </div>
+{% endfor %}
diff --git a/packages/components/bolt-copy-to-clipboard/src/copy-to-clipboard.scss b/packages/components/bolt-copy-to-clipboard/src/copy-to-clipboard.scss
@@ -47,7 +47,7 @@ $bolt-copy-to-clipboard-transition: all $bolt-copy-to-clipboard-animation-durati
         transform: scale(0) rotate(0deg);
       }
       100% {
-        transform: scale(1) rotate(720deg);
+        transform: scale(1) rotate(900deg);
       }
     }
   }
@@ -87,14 +87,16 @@ $bolt-copy-to-clipboard-transition: all $bolt-copy-to-clipboard-animation-durati
 
 .c-bolt-copy-to-clipboard__action,
 .c-bolt-copy-to-clipboard__info {
+  display: inline-flex;
+  align-items: center;
+
   > *:first-child {
     @include bolt-margin-right(xxsmall);
   }
 }
 
 .c-bolt-copy-to-clipboard__action {
-  color: inherit;
-  color: var(--bolt-theme-link, inherit);
+  color: bolt-theme(link);
 
   &:hover {
     opacity: $bolt-global-link-hover-opacity;
@@ -111,8 +113,7 @@ $bolt-copy-to-clipboard-transition: all $bolt-copy-to-clipboard-animation-durati
 }
 
 .c-bolt-copy-to-clipboard__info {
-  color: inherit;
-  color: var(--bolt-theme-text, inherit);
+  color: bolt-theme(text);
   opacity: 0.4;
 }
 
@@ -130,6 +131,5 @@ $bolt-copy-to-clipboard-transition: all $bolt-copy-to-clipboard-animation-durati
 
 .c-bolt-copy-to-clipboard__transition-animation {
   display: inline-block;
-  color: inherit;
-  color: var(--bolt-theme-link, inherit);
+  color: bolt-theme(link);
 }