sling-web-component-message - npm Package Compare versions

Comparing version 0.17.0 to 1.3.0

package.json

 {
   "name": "sling-web-component-message",
-  "version": "0.17.0",
+  "version": "1.3.0",
   "description": "Sling Message component",
+  "module": "src/index.js",
+  "main": "dist/cjs/es6/index.js",
+  "jsnext:main": "dist/es/es6/index.js",
+  "browser": "dist/iife/es6/index.js",
   "author": "Stone Pagamentos",
-  "main": "dist/cjs/index.js",
-  "jsnext:main": "dist/es/index.js",
   "dependencies": {
-    "sling-web-framework": "^0.17.0",
-    "sling-web-helpers": "^0.17.0"
+    "sling-framework": "^1.3.0",
+    "sling-helpers": "^1.3.0"
   }
 }

README.md

 # sling-web-component-message
 
 Sling Message Basic Component.
+
+The message component is a static bar that indicates, through prevailing icons and colors, to the user some state.
+
+## Install
+
+```
+npm instal sling-web-component-message
+```
+
+## Tag
+
+```HTML
+  <sling-message></sling-message>
+```
+
+## Dependencies
+
+* **sling-framework**
+* **sling-helpers**
+
+## Attributes and properties
+
+|Name|Type|Default Values|ReflectToAttribute|Observer|callSdk|
+|:--|:--|:--|:--:|:--|:--:|
+|srcdata|String||:heavy_check_mark:|
+|aim|String||:heavy_check_mark:|
+
+### Description
+
+|Name|Description|
+|:---|:---|
+|srcdata|This is the message that will be shown in the component|
+|aim|Defines the message objective, can be `danger`, `success` or `warning`.|
+
+## Events
+
+This component have no event.
+
+## Examples
+
+All component examples can be emulated using the `npm start sling-web-component-message` command.
+
+### Use
+
+```HTML
+<sling-message aim="error"></sling-message>
+<sling-message aim="success"></sling-message>
+<sling-message aim="alert"></sling-message>
+<sling-message aim="standby"></sling-message>
+<script>
+  srcdata = ['Some message.', 'Some other message.'];
+  const components = Array.from(document.querySelectorAll('sling-message'));
+  components.map(component => component.srcdata = srcdata);
+</script>
+```
+
+![image](https://user-images.githubusercontent.com/22959060/45894417-a8dad500-bda4-11e8-83b5-afa3df2e8d00.png)

src/component/Message.js

@@ -1,2 +0,2 @@
-import { html, SlingElement } from '../../node_modules/sling-web-framework/src/index.js';
+import { html, SlingElement } from 'sling-framework';
 
@@ -99,3 +99,3 @@ export class Message extends SlingElement {
       <style>
-        @import url('../sling-web-component-message/src/index.css');
+        @import url('sling-web-component-message/src/index.css');
       </style>
@@ -102,0 +102,0 @@ <div className="${className}" style="${!data.length ? 'display: none' : ''}">

src/component/Message.test.js

@@ -1,4 +0,37 @@
-/* eslint-disable */
+import { registerComponent } from 'sling-helpers';
 import { Message } from './Message.js';
 
-// TODO Write me!
+registerComponent('sling-message', Message);
+
+let $message;
+
+describe('Message', () => {
+  beforeEach(() => {
+    $message = document.createElement('sling-message');
+    document.body.appendChild($message);
+  });
+
+  afterEach(() => {
+    document.body.removeChild($message);
+    $message = undefined;
+  });
+
+  it('Should reflect "layout" and "aim" attribute to property ', () => {
+    $message.setAttribute('layout', 'outline');
+    $message.setAttribute('aim', 'danger');
+
+    expect($message.layout).to.equal('outline');
+    expect($message.aim).to.equal('danger');
+  });
+
+  it('Should reflect "layout" and "aim" property to attribute ', (done) => {
+    $message.layout = 'outline';
+    $message.aim = 'sucess';
+
+    setTimeout(() => {
+      expect($message.getAttribute('layout')).to.equal('outline');
+      expect($message.getAttribute('aim')).to.equal('sucess');
+      done();
+    });
+  });
+});

src/index.js

@@ -1,4 +0,4 @@
-import { domHelper } from '../node_modules/sling-web-helpers/src/index.js';
+import { registerComponent } from 'sling-helpers';
 import { Message } from './component/Message.js';
 
-domHelper.registerComponent('sling-message', Message);
+registerComponent('sling-message', Message);

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

518676

increased by1597.46%

Number of package files

20

increased by33.33%

Lines of code

12536

increased by2234.45%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

61

increased by1425%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedsling-framework@^1.3.0

• + Addedsling-helpers@^1.3.0

• + Addedis-plain-object@2.0.4(transitive)

• + Addedisobject@3.0.1(transitive)

• + Addedmoment@2.30.1(transitive)

• + Addedsling-framework@1.12.5(transitive)

• + Addedsling-helpers@1.12.5(transitive)

• + Addedtimm@1.7.1(transitive)

• - Removedsling-web-framework@^0.17.0

• - Removedsling-web-helpers@^0.17.0

• - Removed@babel/runtime@7.26.7(transitive)

• - Removedimask@3.4.0(transitive)

• - Removedredux@4.2.1(transitive)

• - Removedredux-thunk@2.4.2(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedsling-web-component-sdk-connect@0.17.0(transitive)

• - Removedsling-web-framework@0.17.0(transitive)

• - Removedsling-web-helpers@0.17.0(transitive)

• - Removedsling-web-sdk@0.17.0(transitive)

• - Removedsling-web-storage@0.17.0(transitive)