Merge f7f0b1d into b894948

stone-payments · Oct 17, 2018 · 170539a · 170539a
2 parents b894948 + f7f0b1d
commit 170539a
Show file tree

Hide file tree

Showing 16 changed files with 5,928 additions and 5,212 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sling-web-component-form/package-lock.json b/packages/sling-web-component-form/package-lock.json
diff --git a/packages/sling-web-component-input/package-lock.json b/packages/sling-web-component-input/package-lock.json
diff --git a/packages/sling-web-component-login/package-lock.json b/packages/sling-web-component-login/package-lock.json
diff --git a/packages/sling-web-component-table/package-lock.json b/packages/sling-web-component-table/package-lock.json
diff --git a/packages/sling-web-component-tooltip/.npmignore b/packages/sling-web-component-tooltip/.npmignore
@@ -0,0 +1,2 @@
+node_modules/
+dev/
diff --git a/packages/sling-web-component-tooltip/README.md b/packages/sling-web-component-tooltip/README.md
@@ -0,0 +1,45 @@
+# sling-web-component-tooltip
+
+The tooltip component is a simple and customizable tooltip that receives an text and a position.
+
+
+## Install      
+```
+npm instal sling-web-component-tooltip
+```
+
+## Tag
+
+```HTML
+<sling-tooltip></sling-tooltip>
+```    
+
+## Dependencies        
+
+  sling-web-framework     
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|position|String|**right**|:heavy_check_mark:|
+|tooltiptext|String|**undefined**|:heavy_check_mark:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|position |Defines where the tooltip should show.|
+|tooltiptext|Set the tooltip text.|
+
+## Events
+
+This component have no events.
+
+### Usage
+
+The tooltip will hover the content inside the tag
+
+```HTML
+<sling-tooltip position="right" tooltiptext="Tooltip">Hover me</sling-tooltip>
+```
diff --git a/packages/sling-web-component-tooltip/package.json b/packages/sling-web-component-tooltip/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "sling-web-component-tooltip",
+  "version": "1.8.0",
+  "description": "Sling Tooltip",
+  "module": "src/index.js",
+  "main": "dist/cjs/es5/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "author": "Stone Pagamentos",
+  "dependencies": {
+    "sling-framework": "^1.8.0",
+    "sling-helpers": "^1.0.0"
+  }
+}
diff --git a/packages/sling-web-component-tooltip/public/index.css b/packages/sling-web-component-tooltip/public/index.css
@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css?family=Heebo:400,500');
+
+body {
+  font-family: 'Heebo', sans-serif;
+}
+
+body > * {
+  margin: 20px;
+}
diff --git a/packages/sling-web-component-tooltip/public/index.html b/packages/sling-web-component-tooltip/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <script src="../../../scripts/helpers/injectDependencies.js"></script>
+  <link rel="stylesheet" href="index.css">
+  <title>sling-tooltip</title>
+</head>
+
+<body>
+  <sling-tooltip  position="right" tooltiptext="Tooltip">Hover me</sling-tooltip>
+</body> 
+
+</html>
diff --git a/packages/sling-web-component-tooltip/src/assets/Tooltip.css b/packages/sling-web-component-tooltip/src/assets/Tooltip.css
@@ -0,0 +1,97 @@
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+    visibility: hidden;
+    background-color: #0c1219;
+    color: #fff;
+    text-align: center;
+    padding: 8px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 1s;
+    font-size: 12px;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+    white-space: nowrap;
+}
+
+.tooltip .tooltiptext.right{
+    top: -5px;
+    left: 100%; 
+    margin-left: 8px;
+}
+
+.tooltip .tooltiptext.right::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent #0c1219 transparent transparent;
+}
+
+.tooltip .tooltiptext.left{
+    top: -5px;
+    right: 100%; 
+    margin-right: 8px;
+}
+
+.tooltip .tooltiptext.left::after {
+    content: " ";
+    position: absolute;
+    top: 50%;
+    left: 100%; /* To the right of the tooltip */
+    margin-top: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent transparent #0c1219;
+}
+
+.tooltip .tooltiptext.top{
+    bottom: 100%;
+    margin-bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.tooltip .tooltiptext.top::after {
+    content: " ";
+    position: absolute;
+    top: 100%; /* At the bottom of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #0c1219 transparent transparent transparent;
+}
+
+
+.tooltip .tooltiptext.bottom {
+    top: 100%;
+    margin-top: 8px;
+    left: 50%;
+    transform: translateX(-50%)
+}
+
+.tooltip .tooltiptext.bottom::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #0c1219 transparent;
+}
diff --git a/packages/sling-web-component-tooltip/src/assets/host.css b/packages/sling-web-component-tooltip/src/assets/host.css
diff --git a/packages/sling-web-component-tooltip/src/component/Tooltip.js b/packages/sling-web-component-tooltip/src/component/Tooltip.js
@@ -0,0 +1,34 @@
+import { html, SlingElement } from 'sling-framework';
+
+export class Tooltip extends SlingElement {
+  static get properties() {
+    return {
+      position: {
+        type: String,
+        reflectToAttribute: true,
+      },
+      tooltiptext: {
+        type: String,
+        reflectToAttribute: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.position = 'right';
+  }
+
+  render() {
+    return html`
+      <style>
+        @import url('sling-web-component-tooltip/src/index.css');
+      </style>
+      
+      <div class="tooltip">
+      <slot></slot>
+        <span className="tooltiptext ${this.position}">${this.tooltiptext}</span>
+      </div>
+    `;
+  }
+}
diff --git a/packages/sling-web-component-tooltip/src/component/Tooltip.test.js b/packages/sling-web-component-tooltip/src/component/Tooltip.test.js
@@ -0,0 +1,27 @@
+import { registerComponent } from 'sling-helpers';
+import { Tooltip } from './Tooltip.js';
+
+registerComponent('sling-tooltip', Tooltip);
+
+let $tooltip;
+
+describe('Tooltip', () => {
+  beforeEach(() => {
+    $tooltip = document.createElement('sling-tooltip');
+    document.body.appendChild($tooltip);
+  });
+
+  afterEach(() => {
+    document.body.removeChild($tooltip);
+    $tooltip = undefined;
+  });
+
+  it('Should reflect "position", "tooltiptext", ' +
+  'attribute to property ', () => {
+    $tooltip.setAttribute('position', 'right');
+    $tooltip.setAttribute('tooltiptext', 'test');
+
+    expect($tooltip.position).eq('right');
+    expect($tooltip.tooltiptext).eq('test');
+  });
+});
diff --git a/packages/sling-web-component-tooltip/src/index.css b/packages/sling-web-component-tooltip/src/index.css
@@ -0,0 +1,2 @@
+@import url('assets/Tooltip.css');
+@import url('assets/host.css');
diff --git a/packages/sling-web-component-tooltip/src/index.js b/packages/sling-web-component-tooltip/src/index.js
@@ -0,0 +1,4 @@
+import { registerComponent } from 'sling-helpers';
+import { Tooltip } from './component/Tooltip.js';
+
+registerComponent('sling-tooltip', Tooltip);