fix: remove CSS and standardize props

packages/components/bolt-share/share.schema.yml

@@ -8,30 +8,30 @@ properties:
     description: 'Call to action text, like "Share" or "Share this page"'
   sources:
     type: array
-    description: 'Social media sources to share to -- supports facebook, twitter, linkedin, and email'
+    description: Social media sources to share to.
     items:
       type: object
       properties:
         name:
           type: string
-          description: 'The individual source name'
+          description: The individual source name
           enum:
-            - 'facebook'
-            - 'twitter'
-            - 'linkedin'
-            - 'email'
+            - facebook
+            - twitter
+            - linkedin
+            - email
         url:
           type: string
-          description: 'The specifically formed share url with query string'
+          description: The specifically formed share URL with query string.
   copyToClipboard:
     type: object
-    description: The link to be copied when copy to clipboard is clicked
+    description: The URL to be copied when copy to clipboard is clicked.
     ref: '@bolt-components-copy-to-clipboard/copy-to-clipboard.schema.yml'
-  visibility:
+  visuallyhidden:
     type: boolean
-    description: 'Controls share component visibility'
-    default: True
+    description: Visually hide the component. Use this based on individual page needs.
+    default: false
   inline:
     type: boolean
-    description: 'Display as a flat layout, rather than popping out'
-    default: False
+    description: Display in an inline layout instead of a button activating a bubble.
+    default: false

packages/components/bolt-share/src/share.scss

@@ -4,100 +4,3 @@
    Share
 \* ------------------------------------ */
 
-.c-bolt-share {
-  &--hidden {
-    opacity: 0;
-    pointer-events: none;
-  }
-  .c-bolt-link__icon [name='facebook-solid'],
-  .c-bolt-link__icon [name='twitter'],
-  .c-bolt-link__icon [name='linkedin'],
-  .c-bolt-link__icon [name='email'],
-  .c-bolt-link__icon [name='asset-link'] {
-    color: bolt-color(indigo, light);
-  }
-  .c-bolt-link {
-    text-decoration: none;
-    color: bolt-color(gray, xdark);
-  }
-}
-
-.c-bolt-share--normal-layout {
-  .c-bolt-block-list {
-    @include bolt-padding-top(small);
-    @include bolt-padding-bottom(small);
-  }
-
-  .c-bolt-block-list__item {
-    display: table; // fixes the odd 1px line that appears only at some resolutions
-    width: 100%;
-    margin: 0;
-  }
-
-  bolt-copy-to-clipboard { // This is ONLY in context of this share component because we need this element to fill the full space allotted
-    display: block;
-  }
-
-  .c-bolt-link { // nested since this is a component within a component with different styles
-    @include bolt-font-size(large);
-    @include bolt-padding(medium, squished);
-    display: block;
-    margin: 0;
-    background: linear-gradient(to left, transparent 50%, bolt-color(indigo, xlight) 50%);
-    background-size: 200% 100%;
-    background-position: right bottom;
-    transition: all 0.2s ease;
-  }
-
-  .c-bolt-copy-to-clipboard__spinner,
-  .is-copied .c-bolt-copy-to-clipboard__spinner {
-    left: 2rem; // Aligns out absolutely positioned icon correctly with the others
-  }
-
-  .c-bolt-link:hover {
-    background-position: left bottom;
-    color: bolt-color(white);
-  }
-
-  .c-bolt-link__icon:hover {
-    color: bolt-color(white);
-  }
-}
-
-.c-bolt-share--inline-layout {
-  .c-bolt-share--inline-heading {
-    display: inline-block;
-    vertical-align: middle;
-    letter-spacing: 0;
-  }
-
-  .c-bolt-block-list {
-    display: flex;
-  }
-
-  .c-bolt-block-list__item {
-    @include bolt-margin(0);
-    display: inline-block;
-
-    +.c-bolt-block-list__item {
-      @include bolt-margin-left(small);
-    }
-  }
-
-  .c-bolt-link__icon:hover {
-    opacity: 0.8;
-    transition: opacity 0.2s ease;
-  }
-
-  .c-bolt-link__text {
-    display: none;
-  }
-
-  .c-bolt-copy-to-clipboard__copied .c-bolt-link__icon [name='asset-link'] {
-    color: bolt-color(teal, dark);
-  }
-
-  .c-bolt-copy-to-clipboard.is-copied .c-bolt-copy-to-clipboard__spinner {
-    margin: 0;
-  }
-}

packages/components/bolt-share/src/share.twig

@@ -4,15 +4,13 @@
   {{ validate_data_schema(bolt.data.components["@bolt-components-share"].schema, _self) | raw }}
 {% endif %}
 
-{% set visible = visibility is sameas(false) ? false : (visibility is null ? true : visibility) %}
-{% set isFlat = inline is sameas(false) ? false : (inline is null ? false : inline) %}
 {# Default text can't be pulled from the schema because it must be translatable. #}
 {% set text = text | default("Share this page"|t) %}
 
 {% set items = [] %}
 
 {# Share inline #}
-{% if isFlat is sameas(true) %}
+{% if inline %}
   {% set items = items|merge([include("@bolt-components-headline/text.twig", {
     tag: "span",
     text: text,
@@ -64,14 +62,18 @@
 {% set attributes = create_attribute(attributes|default({})) %}
 {% set classes = [
   "c-bolt-share",
-  visibility is sameas(false) ? "c-bolt-share--hidden",
-  isFlat is sameas(false) ? "c-bolt-share--normal-layout" : "c-bolt-share--inline-layout"
+  visuallyhidden ? "u-bolt-visuallyhidden",
+  inline ? "c-bolt-share--inline" : "c-bolt-share--button"
 ] %}
 
 {# Share via button #}
 <bolt-share>
   <div {{ attributes.addClass(classes) }}>
-    {% if isFlat is sameas(false)  %}
+    {% if inline  %}
+      {% include "@bolt-components-block-list/block-list.twig" with {
+        items: items
+      } only %}
+    {% else %}
       {% include "@bolt-components-tooltip/tooltip.twig" with {
         trigger: {
           type: "button",
@@ -87,17 +89,13 @@
           }
         },
         content: include ("@bolt-components-block-list/block-list.twig", {
-          "items" : items
+          items: items
         }),
         position: "up",
         noWrap: true,
         spacing: "none",
         attributes: create_attribute(attributes|default({})).setAttribute("count",items|length)
       } only %}
-    {% else %}
-      {% include "@bolt-components-block-list/block-list.twig" with {
-        items : items
-      } only %}
     {% endif %}
   </div>
 </bolt-share>