@forter/icon - npm Package Compare versions

Comparing version 3.2.2 to 3.2.3

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [3.2.3](https://github.com/forter/web-components/compare/@forter/icon@3.2.2...@forter/icon@3.2.3) (2019-11-27)
+
+**Note:** Version bump only for package @forter/icon
+
+
+
+
+
 ## [3.2.2](https://github.com/forter/web-components/compare/@forter/icon@3.2.1...@forter/icon@3.2.2) (2019-09-19)
@@ -8,0 +16,0 @@

fc-icon.css.js

@@ -7,2 +7,3 @@ import { css } from 'lit-element';
   width: var(--fc-icon-size, 20px);
+  margin: 0 auto;
 }
@@ -33,2 +34,6 @@
 }
+
+#copy {
+  padding: 0;
+}
 `;
@@ -35,0 +40,0 @@

FcIcon.js

@@ -9,3 +9,3 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import { FcIconSizeStyle } from './fc-icon-size-style.css.js';
-import style from './fc-icon.css.js';
+import style from './fc-icon.css';
 
@@ -12,0 +12,0 @@ const isMap = x => x instanceof Map;

package.json

 {
   "name": "@forter/icon",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Icon Component from Forter Components",
@@ -44,3 +44,3 @@ "main": "index.js",
   "dependencies": {
-    "@forter/core": "^2.0.0",
+    "@forter/core": "^2.0.1",
     "@forter/directives": "^3.0.0",
@@ -53,3 +53,3 @@ "@forter/functions": "^2.0.0",
   },
-  "gitHead": "0aae1f4ddd21eb0daaab2d0b142f7eb25bd511e1"
+  "gitHead": "26a81b071f7d326de0472263bfd092842d61a9f8"
 }

stories/icon.stories.js

@@ -1,9 +0,16 @@
-import { html } from 'lit-html';
-import { until } from 'lit-html/directives/until';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { withKnobs, boolean, color, number, select, text } from '@storybook/addon-knobs';
+import {html} from 'lit-html';
+import {until} from 'lit-html/directives/until';
+import {ifDefined} from 'lit-html/directives/if-defined';
+import {
+  withKnobs,
+  boolean,
+  color,
+  number,
+  select,
+  text,
+} from '@open-wc/demoing-storybook';
 
-import { enumerateProperties } from '../../../lib/storybook-helpers';
+import {enumerateProperties} from '../../../lib/storybook-helpers';
 import '../src';
-import { FcIcon } from '../src/FcIcon';
+import {FcIcon} from '../src/FcIcon';
 const story = enumerateProperties(FcIcon);
@@ -13,3 +20,3 @@
 
-export function elementProperties({
+function elementProperties({
   originalFill = false,
@@ -20,27 +27,56 @@ hoverable = false,
 } = {}) {
-  return story(html`
+  return html`
     <fc-icon
-        .cache="${ifDefined(cache)}"
-        ?hoverable="${boolean('hoverable', hoverable)}"
-        ?original-fill="${boolean('originalFill', originalFill)}"
-        icon="${text('icon', icon)}"
+      .cache="${ifDefined(cache)}"
+      ?hoverable="${boolean('hoverable', hoverable)}"
+      ?original-fill="${boolean('originalFill', originalFill)}"
+      icon="${text('icon', icon)}"
     ></fc-icon>
-  `);
+  `;
 }
 
+export function defaultProperties() {
+  return story(
+    html`
+      ${elementProperties()}
+    `,
+    {
+      title: 'Default',
+      description: 'The default state of fc-icon when no property is being set',
+    },
+  );
+}
 export function noIconsInCache() {
-  return elementProperties({ icon: null });
+  return story(
+    html`
+      ${elementProperties({icon: null})}
+    `,
+    {
+      title: 'No icons cache',
+      description: 'While there is no cache setted we will see blank icon',
+    },
+  );
 }
 
 export function customStyles() {
-  return html`
-    <style>
-    fc-icon {
-      --fc-icon-fill: ${color('--fc-icon-fill', 'blue')};
-      --fc-icon-size: ${number('size', 18, { range: true, min: 10, max: 500 })}px;
-
-    }
-    </style>
-    ${elementProperties()}
-  `;
+  return story(
+    html`
+      <style>
+        fc-icon {
+          --fc-icon-fill: ${color('--fc-icon-fill', 'blue')};
+          --fc-icon-size: ${number('size', 18, {
+            range: true,
+            min: 10,
+            max: 500,
+          })}px;
+        }
+      </style>
+      ${elementProperties()}
+    `,
+    {
+      title: 'Custom styles',
+      description:
+        'By setting up css variables you can control the style of the fc-icon',
+    },
+  );
 }
@@ -51,38 +87,66 @@
   async function loadCustomCacheTpl() {
-    const cache = new Map(Object.entries({
-      'microphone': await import('../src/icons/microphone.svg.js').then(def),
-      'admin': await import('../src/icons/admin.svg.js').then(def),
-      'device-desktop': await import('../src/icons/feather/monitor.svg.js').then(def),
-    }));
+    const cache = new Map(
+      Object.entries({
+        microphone: await import('../src/icons/microphone.svg.js').then(def),
+        admin: await import('../src/icons/admin.svg.js').then(def),
+        'device-desktop': await import(
+          '../src/icons/feather/monitor.svg.js'
+        ).then(def),
+      }),
+    );
 
-    const iconKnob = select('icon', [
+    const iconKnob = select(
+      'icon',
+      ['device-desktop', 'microphone', 'admin'],
       'device-desktop',
-      'microphone',
-      'admin',
-    ], 'device-desktop');
+    );
 
     return html`
-    <style>
-      fc-icon {
-        color: ${color('currentColor', 'black')}
-      }
-    </style>
-    <fc-icon
-      .cache="${cache}"
-      ?original-fill="${boolean('original-fill', true)}"
-      icon="${iconKnob}"
-    ></fc-icon>`;
+      <style>
+        fc-icon {
+          color: ${color('currentColor', 'black')};
+        }
+      </style>
+      <fc-icon
+        .cache="${cache}"
+        ?original-fill="${boolean('original-fill', true)}"
+        icon="${iconKnob}"
+      ></fc-icon>
+    `;
   }
-  return html`<output>${until(loadCustomCacheTpl(), html`Loading...`)}</output>`;
+  return story(
+    html`
+      <output
+        >${until(
+          loadCustomCacheTpl(),
+          html`
+            Loading...
+          `
+        )}</output
+      >
+    `,
+    {
+      title: 'Custom cache',
+      description:
+        'You can controle the icons list by setting cache of the fc-icon',
+    },
+  );
 }
 
 export function hoverable() {
-  return html`
-    <style>
-    fc-icon {
-      --fc-icon-fill-hover: ${color('--fc-icon-fill-hover', 'orange')};
-    }
-    </style>
-    ${elementProperties({ hoverable: true })}
-  `;
+  return story(
+    html`
+      <style>
+        fc-icon {
+          --fc-icon-fill-hover: ${color('--fc-icon-fill-hover', 'orange')};
+        }
+      </style>
+      ${elementProperties({hoverable: true})}
+    `,
+    {
+      title: 'Hoverable',
+      description:
+        'You can add customize hoverable color by setting css variable and property of fc-icon',
+    },
+  );
 }
@@ -92,7 +156,6 @@
   title: 'Display Components|Icon',
-  decorators: [withKnobs],
   parameters: {
-    notes: { markdown },
-    options: { selectedPanel: 'storybooks/knobs/panel' },
+    notes: {markdown},
+    options: {selectedPanel: 'storybooks/knobs/panel'},
   },
 };

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

165408

increased by2.34%

Number of package files

144

increased by1.41%

Lines of code

2064

increased by8.98%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@forter/core@^2.0.1