@astrouxds/documentation-components - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/src/RuxDesignTokenPreview.d.ts

@@ -19,2 +19,3 @@ import { LitElement } from 'lit';
     static styles: import("lit").CSSResult;
+    tooltip: HTMLElement;
     type: string;
@@ -45,2 +46,3 @@ name: string;
     getPreview(): import("lit-html").TemplateResult<1>;
+    handleClick(): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -47,0 +49,0 @@ }

dist/src/RuxDesignTokenPreview.js

@@ -8,3 +8,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { html, css, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query } from 'lit/decorators.js';
 export var tokenType;
@@ -220,2 +220,6 @@ (function (tokenType) {
     }
+    handleClick() {
+        navigator.clipboard.writeText(`var(--${this.name})`);
+        this.tooltip.innerHTML = 'Copied';
+    }
     render() {
@@ -231,2 +235,15 @@ return html `
             : ''}
+            <li class="token__css-var">
+              var(--${this.name})
+              <div class="tooltip">
+
+              
+              <button class="token__copy-btn" @click="${this.handleClick}">
+              <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
+                </svg>
+              </button>
+          </div>
+            </li>
           ${this.value
@@ -317,4 +334,58 @@ ? html `<li class="token__value" part="value">${this.value}</li>`
     }
+
+    .token__css-var {
+      display: flex;
+      align-items: center;
+      font-family: ui-monospace;
+
+
+    }
+    .token__css-var button {
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      margin-left: 5px;
+    }
+    .tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 140px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -75px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}    
   `;
 __decorate([
+    query('#myTooltip')
+], RuxDesignTokenPreview.prototype, "tooltip", void 0);
+__decorate([
     property({ type: String })
@@ -321,0 +392,0 @@ ], RuxDesignTokenPreview.prototype, "type", void 0);

package.json

@@ -6,3 +6,3 @@ {
   "author": "Mark Cianfrani",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "public": true,
@@ -9,0 +9,0 @@ "main": "dist/src/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36505

increased by15.75%

Lines of code

449

increased by17.54%

No dependency changes