Merge dee073b into b894948

stone-payments · Oct 18, 2018 · 2111a97 · 2111a97
2 parents b894948 + dee073b
commit 2111a97
Show file tree

Hide file tree

Showing 13 changed files with 4,639 additions and 4,137 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/sling-web-component-label/.npmignore b/packages/sling-web-component-label/.npmignore
@@ -0,0 +1,2 @@
+node_modules/
+dev/
diff --git a/packages/sling-web-component-label/README.md b/packages/sling-web-component-label/README.md
@@ -0,0 +1,50 @@
+# sling-web-component-label
+
+## Install
+
+```
+npm instal sling-web-component-label
+```
+
+## Tag
+
+```HTML
+  <sling-label></sling-label>
+```
+
+## Dependencies
+
+* **sling-framework**
+* **sling-helpers**
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|type|String|**fill**|:heavy_check_mark:|
+|color|String|**green**|:heavy_check_mark:|
+|size|String|**small**|:heavy_check_mark:|
+|imageName|String| |:heavy_check_mark:|
+|showBullet|Boolean|**false**|:heavy_check_mark:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|type|Sets the layout type of label, can be fill, outline and text.|
+|color|Sets the color's label, can be red, yellow, gray, green and purple.|
+|size|Sets the the size's label, can be small, medium and big.|
+|imageName|Sets an image left of the text, can be any `sling-web-component-icon` name.|
+|showBullet|Sets a bullet before of the text, setted false by default.|
+
+## Events
+
+This component have no events.
+
+### Usage
+
+All content that is used inside the tag automatically goes to the body of the label.
+
+```HTML
+<sling-label size="small" color="red" type="text" imageName="success">LABEL</sling-label>
+```
diff --git a/packages/sling-web-component-label/package-lock.json b/packages/sling-web-component-label/package-lock.json
diff --git a/packages/sling-web-component-label/package.json b/packages/sling-web-component-label/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "sling-web-component-label",
+  "version": "1.0.0",
+  "description": "Sling Label",
+  "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.8.0",
+    "sling-web-component-icon": "^1.8.0"
+  }
+}
diff --git a/packages/sling-web-component-label/public/index.css b/packages/sling-web-component-label/public/index.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css?family=Heebo:400,500');
+
+body {
+  font-family: 'Heebo', sans-serif;
+}
+
+body > * {
+  margin: 5px;
+}
+
+div {
+  margin: 10px;
+}
+
+div > * {
+  margin: 10px;
+}
diff --git a/packages/sling-web-component-label/public/index.html b/packages/sling-web-component-label/public/index.html
@@ -0,0 +1,152 @@
+<!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-label</title>
+  </head>
+  <body>
+
+    <h1>Small Label</h1>
+    <div>
+      Fill:
+      <sling-label size="small" color="red">LABEL</sling-label>
+      <sling-label size="small" color="yellow">LABEL</sling-label>
+      <sling-label size="small" color="gray">LABEL</sling-label>
+      <sling-label size="small" color="green">LABEL</sling-label>
+      <sling-label size="small" color="purple">LABEL</sling-label>
+    </div>
+
+    <div>
+      Outline: 
+      <sling-label size="small" color="red" type="outline">LABEL</sling-label>
+      <sling-label size="small" color="yellow" type="outline">LABEL</sling-label>
+      <sling-label size="small" color="gray" type="outline">LABEL</sling-label>
+      <sling-label size="small" color="green" type="outline">LABEL</sling-label>
+      <sling-label size="small" color="purple" type="outline">LABEL</sling-label>
+    </div>
+
+    <div>
+      Only text: 
+      <sling-label size="small" color="red" type="text">LABEL</sling-label>
+      <sling-label size="small" color="yellow" type="text">LABEL</sling-label>
+      <sling-label size="small" color="gray" type="text">LABEL</sling-label>
+      <sling-label size="small" color="green" type="text">LABEL</sling-label>
+      <sling-label size="small" color="purple" type="text">LABEL</sling-label>
+    </div>
+
+    <div>
+      With bullet:
+      <sling-label size="small" color="red" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="small" color="yellow" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="small" color="gray" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="small" color="green" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="small" color="purple" type="text" showBullet="true">LABEL</sling-label>
+    </div>
+
+    <div>
+      With Icon:
+      <sling-label size="small" color="red" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="small" color="yellow" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="small" color="gray" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="small" color="green" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="small" color="purple" type="text" imageName="success">LABEL</sling-label>
+    </div>
+
+    <h1>Medium Label</h1>
+    <div>
+      Fill:
+      <sling-label size="medium" color="red">LABEL</sling-label>
+      <sling-label size="medium" color="yellow">LABEL</sling-label>
+      <sling-label size="medium" color="gray">LABEL</sling-label>
+      <sling-label size="medium" color="green">LABEL</sling-label>
+      <sling-label size="medium" color="purple">LABEL</sling-label>
+    </div>
+
+    <div>
+      Outline:
+      <sling-label size="medium" color="red" type="outline">LABEL</sling-label>
+      <sling-label size="medium" color="yellow" type="outline">LABEL</sling-label>
+      <sling-label size="medium" color="gray" type="outline">LABEL</sling-label>
+      <sling-label size="medium" color="green" type="outline">LABEL</sling-label>
+      <sling-label size="medium" color="purple" type="outline">LABEL</sling-label>
+    </div>
+
+    <div>
+      Only text: 
+      <sling-label size="medium" color="red" type="text">LABEL</sling-label>
+      <sling-label size="medium" color="yellow" type="text">LABEL</sling-label>
+      <sling-label size="medium" color="gray" type="text">LABEL</sling-label>
+      <sling-label size="medium" color="green" type="text">LABEL</sling-label>
+      <sling-label size="medium" color="purple" type="text">LABEL</sling-label>
+    </div>
+
+    <div>
+      With bullet:
+      <sling-label size="medium" color="red" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="medium" color="yellow" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="medium" color="gray" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="medium" color="green" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="medium" color="purple" type="text" showBullet="true">LABEL</sling-label>
+    </div>
+
+    <div>
+      With Icon:
+      <sling-label size="medium" color="red" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="medium" color="yellow" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="medium" color="gray" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="medium" color="green" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="medium" color="purple" type="text" imageName="success">LABEL</sling-label>
+    </div>
+
+    <h1>Big Label</h1>
+    <div>
+      Fill:
+      <sling-label size="big" color="red">LABEL</sling-label>
+      <sling-label size="big" color="yellow">LABEL</sling-label>
+      <sling-label size="big" color="gray">LABEL</sling-label>
+      <sling-label size="big" color="green">LABEL</sling-label>
+      <sling-label size="big" color="purple">LABEL</sling-label>
+    </div>
+
+    <div>
+      Outline:
+      <sling-label size="big" color="red" type="outline">LABEL</sling-label>
+      <sling-label size="big" color="yellow" type="outline">LABEL</sling-label>
+      <sling-label size="big" color="gray" type="outline">LABEL</sling-label>
+      <sling-label size="big" color="green" type="outline">LABEL</sling-label>
+      <sling-label size="big" color="purple" type="outline">LABEL</sling-label>
+    </div>
+
+    <div>
+      Only text: 
+      <sling-label size="big" color="red" type="text">LABEL</sling-label>
+      <sling-label size="big" color="yellow" type="text">LABEL</sling-label>
+      <sling-label size="big" color="gray" type="text">LABEL</sling-label>
+      <sling-label size="big" color="green" type="text">LABEL</sling-label>
+      <sling-label size="big" color="purple" type="text">LABEL</sling-label>
+    </div>
+
+    <div>
+      With bullet:
+      <sling-label size="big" color="red" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="big" color="yellow" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="big" color="gray" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="big" color="green" type="text" showBullet="true">LABEL</sling-label>
+      <sling-label size="big" color="purple" type="text" showBullet="true">LABEL</sling-label>
+    </div>
+
+    <div>
+      With Icon:
+      <sling-label size="big" color="red" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="big" color="yellow" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="big" color="gray" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="big" color="green" type="text" imageName="success">LABEL</sling-label>
+      <sling-label size="big" color="purple" type="text" imageName="success">LABEL</sling-label>
+    </div>
+
+  </body>
+</html>
diff --git a/packages/sling-web-component-label/src/assets/Label.css b/packages/sling-web-component-label/src/assets/Label.css
@@ -0,0 +1,135 @@
+.common-label {
+	font-weight: 900;
+	letter-spacing: 1px;
+	border-radius: 50px;
+	padding: 6px 10px;
+	color: white;
+    display: inline-block;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.small-label {
+	font-size: 10px;
+	line-height: 12px;
+}
+
+.medium-label {
+	font-size: 11px;
+	line-height: 13px;
+}
+
+.big-label {
+	font-size: 12px;
+	line-height: 14px;
+}
+
+/*
+	Inlines
+*/
+.red-fill-label { 
+	background-color: #e74c3c;
+}
+
+.yellow-fill-label {
+	background-color: #f9bf09;
+}
+
+.gray-fill-label {
+	background-color: #c3c8d2;
+}
+
+.green-fill-label {
+	background-color: #2ecc71;
+}
+
+.purple-fill-label {
+	background-color: #8036dc;
+}
+
+/*
+	Outlines
+*/
+.red-outline-label {
+	background-color: white;
+	border: 1px solid #e74c3c;
+	color: #e74c3c;
+}
+
+.yellow-outline-label {
+	background-color: white;
+	border: 1px solid #f9bf09;
+	color: #f9bf09;
+}
+
+.gray-outline-label {
+	background-color: white;
+	border: 1px solid #c3c8d2;
+	color: #c3c8d2;
+}
+
+.green-outline-label {
+	background-color: white;
+	border: 1px solid #2ecc71;
+	color: #2ecc71;
+}
+
+.purple-outline-label {
+	background-color: white;
+	border: 1px solid #8036dc;
+	color: #8036dc;
+}
+
+/*
+	Bullet
+*/
+
+.bullet-label-true:before {
+	content: "•";
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0 5px;
+}
+
+.red-text-label {
+	color: #e74c3c;
+}
+
+.yellow-text-label {
+	color: #f9bf09;
+}
+
+.gray-text-label {
+	color: #c3c8d2;
+}
+
+.green-text-label {
+	color: #2ecc71;
+}
+
+.purple-text-label {
+	color: #8036dc;
+}
+
+/*
+	Icons
+*/
+
+.icons {
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+.icons.md-small {
+	width: 18px;
+}
+
+.icons.md-medium {
+	width: 21px;
+}
+
+.icons.md-big {
+	width: 24px;
+}
diff --git a/packages/sling-web-component-label/src/assets/host.css b/packages/sling-web-component-label/src/assets/host.css