Add copy button, text, and card (#437)

* Add copy button, text, and card

* Update to allow semibold as an option

* Remove semibold modifier on button

* Update documentation

app/helpers/elements_helper.rb

@@ -52,6 +52,15 @@ def sage_elements
         react: "todo",
         a11y: "todo"
       },
+      {
+        title: "copy_text",
+        description: "A small set of components to use in places where \"copy\" text is provided such as in a Copy Button or a block of text to be copied elsewhere.", 
+        use_legacy_html_code_source: false,
+        scss: "done",
+        rails: "done",
+        react: "done",
+        a11y: "done",
+      },
       {
         title: "description",
         description: "A description is composed of title and data content and is structured as a definition list.",

app/views/examples/elements/copy_text/_preview.html.erb

@@ -0,0 +1,12 @@
+<h5>Copy Text (inline)</h5>
+<%= sage_component SageCopyText, { value: "me.ns.cloudflare.com", semibold: true } %>
+
+<h5>Copy Text (block)</h5>
+<%= sage_component SageCopyTextCard, {} do %>
+  <p><b>Reply:</b> me.ns.cloudflare.com</p>
+  <p>me.ns.cloudflare.com</p>
+  <p>me.ns.cloudflare.com</p>
+<% end %>
+
+<h5>Copy Button</h5>
+<%= sage_component SageCopyButton, { value: "me.ns.cloudflare.com", semibold: true } %>

app/views/examples/elements/copy_text/_props.html.erb

@@ -0,0 +1,6 @@
+<tr>
+  <td>semibold</td>
+  <td>Wether or not the whole block should be set at the Semibold weight, since a number of implementations use this.</td>
+  <td>Boolean</td>
+  <td>false</td>
+</tr>

app/views/examples/elements/copy_text/_rules_do.html.erb

@@ -0,0 +1,4 @@
+<ul>
+  <li>Use inline <code>&lt;b&gt;</code> tag to add bolding to select portions of these blocks.</li>
+  <li>Provide a local max-width as desired in order to limit overflowing text. Truncation is setup and ready for this.</li>
+</ul>

app/views/examples/elements/copy_text/_rules_dont.html.erb

@@ -0,0 +1,3 @@
+<ul>
+  <li>Manually apply bolding to an entire block of any of these components; use <code>semibold</code> prop to accomplish this effect instead.</li>
+</ul>

lib/sage-frontend/javascript/system/copy-button.js

@@ -14,6 +14,7 @@ Sage.copyButton = (function() {
     el.select();
     document.execCommand('copy');
     document.body.removeChild(el);
+    ev.currentTarget.focus();
   };
 
 

lib/sage-frontend/stylesheets/system/core/_typography.scss

@@ -155,6 +155,11 @@ a {
   }
 }
 
+b,
+strong {
+  font-weight: sage-font-weight(semibold);
+}
+
 hr {
   margin: sage-spacing() 0;
   border: 0;

lib/sage-frontend/stylesheets/system/index.scss

@@ -29,6 +29,7 @@
 @import "patterns/elements/button";
 @import "patterns/elements/checkbox";
 @import "patterns/elements/choice";
+@import "patterns/elements/copy_text";
 @import "patterns/elements/description";
 @import "patterns/elements/form_input";
 @import "patterns/elements/form_select";

lib/sage-frontend/stylesheets/system/patterns/elements/_copy_text.scss

@@ -0,0 +1,71 @@
+/* ==================================================
+  ** copy_text
+  type: element
+
+================================================== */
+
+$-copy-text-border: 1px solid sage-color(grey, 400);
+$-copy-text-color: sage-color(charcoal, 400);
+$-copy-text-color-hover: sage-color(charcoal, 500);
+
+@mixin sage-copy-text() {
+  @extend %t-sage-body-small;
+
+  @include truncate();
+
+  color: sage-color(charcoal, 400);
+  background-color: sage-color(grey, 200);
+  border: $-copy-text-border;
+  border-radius: sage-border(radius);
+}
+
+.sage-copy-text {
+  @include sage-copy-text;
+
+  display: inline-block;
+  padding: 0 sage-spacing(xs);
+
+  .sage-copy-btn & {
+    transition: $sage-transition;
+    transition-property: color, background-color;
+  }
+
+  .sage-copy-btn:hover & {
+    color: $-copy-text-color-hover;
+    background-color: sage-color(grey, 100);
+    border-color: sage-color(grey, 500);
+  }
+}
+
+.sage-copy-text-card {
+  @include sage-grid-stack;
+  @include sage-copy-text;
+
+  padding: $sage-card-padding;
+}
+
+.sage-copy-btn {
+  @include sage-button-style-reset();
+  @include sage-focus-outline($-copy-text-color-hover);
+
+  display: inline-flex;
+  flex-flow: row-reverse;
+  align-items: center;
+  padding-right: sage-spacing(2xs);
+
+  &::before {
+    @include sage-icon-base(copy);
+
+    margin-left: sage-spacing(xs);
+    color: $-copy-text-color;
+  }
+
+  &:hover::before {
+    color: $-copy-text-color-hover;
+  }
+}
+
+.sage-copy-text--semibold,
+.sage-copy-text-card--semibold {
+  @extend %t-sage-body-small-semi;
+}

lib/sage_rails/app/sage_components/sage_copy_button.rb

@@ -0,0 +1,4 @@
+class SageCopyButton < SageComponent
+  attr_accessor :value
+  attr_accessor :semibold
+end

lib/sage_rails/app/sage_components/sage_copy_text.rb

@@ -0,0 +1,4 @@
+class SageCopyText < SageComponent
+  attr_accessor :value
+  attr_accessor :semibold
+end

lib/sage_rails/app/sage_components/sage_copy_text_card.rb

@@ -0,0 +1,3 @@
+class SageCopyTextCard < SageComponent
+  attr_accessor :semibold
+end

lib/sage_rails/app/views/sage_components/_sage_copy_button.html.erb

@@ -0,0 +1,6 @@
+<button
+  class="sage-copy-btn"
+  data-js-copy-button="<%= component.value.html_safe %>"
+>
+  <%= sage_component SageCopyText, { value: component.value, semibold: component.semibold.present? && component.semibold } %>
+</button>

lib/sage_rails/app/views/sage_components/_sage_copy_text.html.erb

@@ -0,0 +1,3 @@
+<span class="sage-copy-text <%= "sage-copy-text--semibold" if component.semibold.present? && component.semibold %>">
+  <%= component.value.html_safe %>
+</span>

lib/sage_rails/app/views/sage_components/_sage_copy_text_card.html.erb

@@ -0,0 +1,3 @@
+<div class="sage-copy-text-card <%= "sage-copy-text-card--semibold" if component.semibold.present? && component.semibold %>">
+  <%= component.content.html_safe %>
+</div>