@forter/button - npm Package Compare versions

Comparing version 1.0.1-beta.265 to 1.0.1-beta.292

FcButton.js

 import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
-import { property, html, LitElement } from 'lit-element';
+import { LitElement, property, html } from 'lit-element';
 import { classMap } from 'lit-html/directives/class-map';
@@ -4,0 +4,0 @@ import { styleMap } from 'lit-html/directives/style-map';

FcCopy.js

 import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
-import { property, query, html, LitElement } from 'lit-element';
+import { LitElement, property, query, html } from 'lit-element';
 import '@forter/icon/fc-icon';
@@ -4,0 +4,0 @@ import shared from './fc-button-shared.css';

FcSpeech.js

 import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
-import { property, html, LitElement } from 'lit-element';
+import { LitElement, property, html } from 'lit-element';
 import '@forter/icon/fc-icon';
@@ -4,0 +4,0 @@ import shared from './fc-button-shared.css';

package.json

 {
   "name": "@forter/button",
-  "version": "1.0.1-beta.265+c2193ed",
+  "version": "1.0.1-beta.292+9682982",
   "description": "Button from Forter Components",
@@ -13,5 +13,5 @@ "main": "index.js",
     "clean": "sh ../../scripts/clean.sh",
-    "link": "npm link",
+    "link": "yarn link",
     "postbuild": "sh ../../scripts/postbuild.sh",
-    "prepare": "npm run build",
+    "prepare": "yarn build",
     "test": "echo \"Please run tests from the repository root\" && exit 1"
@@ -52,3 +52,3 @@ },
   },
-  "gitHead": "c2193ed0147763e09beadef1d8b117edd8fef5f6"
+  "gitHead": "9682982c188a9dd0bc4fcdb60a34586f7937f030"
 }

stories/button.stories.js

@@ -6,18 +6,67 @@ import { capitalize } from '@forter/helpers';
 
-import { withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
-import { withKnobs, color, number, select } from '@storybook/addon-knobs';
+import { withKnobs, boolean, color, number, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/polymer';
 
-import { FcButton } from '../src/FcButton';
-
 import '../src/fc-button';
 import markdown from '../fc-button.md';
+
 const notes = { markdown };
-const options = { selectedPanel: 'storybooks/knobs/panel' }
+const options = { selectedPanel: 'storybooks/knobs/panel' };
 
+const INTENT_OPTIONS = {
+  Apply: 'apply',
+  Cancel: 'cancel',
+  Danger: 'danger',
+  Success: 'success',
+  Warn: 'warn',
+  None: null,
+};
+
+const TOOLTIP_POSITION_OPTIONS = [
+  'top',
+  'bottom',
+  'left',
+  'right',
+];
+
 function elementProperties() {
-  return withClassPropertiesKnobs(FcButton, { template: html`
-    <fc-button></fc-button>
-  `});
+  return html`
+    <style>
+    fc-button {
+      /* colours */
+      --fc-button-color: ${color('--fc-button-color', '#495057', 'Styles')};
+      --fc-button-active-color: ${color('--fc-button-active-color', '#495057', 'Styles')};
+      --fc-button-background-color: ${color('--fc-button-background-color', '#f5f5f5', 'Styles')};
+      --fc-button-icon-color: ${color('--fc-button-icon-color', '#495057', 'Styles')};
+      --fc-button-hover-color: ${color('--fc-button-hover-color', '#495057', 'Styles')};
+
+      /* hover styles */
+      --fc-button-hover-background-color: ${color('--fc-button-hover-background-color', '#e1e1e1', 'Styles')};
+      --fc-button-hover-icon-color: ${color('--fc-button-hover-icon-color', '#5dcdd5', 'Styles')};
+      --fc-button-hover-color: ${color('--fc-button-hover-color', '#495057', 'Styles')};
+
+      /* sizes */
+      --fc-button-border-radius: ${number('--fc-button-border-radius', 20, { range: true, min: 1, max: 100, step: 1 }, 'Styles')}px;
+      --fc-button-font-size: ${number('--fc-button-font-size:', 14, {}, 'Styles')}px;
+      --fc-button-font-weight: ${number('--fc-button-font-weight', 500, { range: true, min: 100, max: 900, step: 100 }, 'Styles')};
+      --fc-button-height: ${number('--fc-button-height:', 35, {}, 'Styles')}px;
+      --fc-button-inner-margin: ${number('--fc-button-inner-margin:', 3, {}, 'Styles')}px;
+      --fc-button-min-width: ${number('--fc-button-min-width:', 35, {}, 'Styles')}px;
+      --fc-button-outer-margin: ${number('--fc-button-outer-margin:', 4, {}, 'Styles')}px;
+    }
+    </style>
+    <fc-button
+        ?disabled="${boolean('disabled', false, 'Attributes')}"
+        ?active="${boolean('active', false, 'Attributes')}"
+        ?loading="${boolean('loading', false, 'Attributes')}"
+        label="${text('label', 'Label', 'Attributes')}"
+        intent="${select('intent', INTENT_OPTIONS, null, 'Attributes')}"
+        icon="${ifDefined(text('icon', undefined, 'Attributes'))}"
+        icon-size="${number('icon-size', 18, { range: true, min: 12, max: 48 }, 'Attributes')}px"
+        secondary-icon="${ifDefined(text('icon', undefined, 'Attributes'))}"
+        tooltip="${ifDefined(text('tooltip', undefined, 'Attributes'))}"
+        tooltip-position="${select('tooltip-position', TOOLTIP_POSITION_OPTIONS, 'top', 'Attributes')}"
+    ></fc-button>
+  `;
 }
@@ -55,70 +104,49 @@
 
-function intentButton() {
-  const intentKnob = select('Intent', {
-    Apply: 'apply',
-    Cancel: 'cancel',
-    Danger: 'danger',
-    Success: 'success',
-    Warn: 'warn',
-    None: null,
-  }, null);
+function intentButton(intent = null, documentation = '') {
+  return function noIntentButton() {
+    const intentKnob = select('Intent', INTENT_OPTIONS, intent);
 
-  console.log(intentKnob)
+    const icon =
+        intentKnob === 'apply' ? 'edit'
+      : intentKnob === 'danger' ? 'delete'
+      : intentKnob === 'cancel' ? 'forter'
+      : intentKnob === 'success' ? 'star-true'
+      : intentKnob === 'warn' ? 'warn'
+      : 'forter';
 
-  const icon =
-      intentKnob === 'apply' ? 'edit'
-    : intentKnob === 'danger' ? 'delete'
-    : intentKnob === 'cancel' ? 'forter'
-    : intentKnob === 'success' ? 'star-true'
-    : intentKnob === 'warn' ? 'warn'
-    : 'forter';
+    const type = intentKnob || intent;
 
-  const type = intentKnob || undefined;
+    const label = !type ? 'No Intent' : capitalize(intentKnob);
 
-  const label = !type ? 'No Intent' : capitalize(intentKnob);
-
-  return html`
-    <fc-button intent="${ifDefined(type)}" label="${label} Button" icon="${icon}"></fc-button>
-  `;
+    return html`${documentation}
+      <fc-button intent="${ifDefined(type)}" label="${label} Button" icon="${icon}"></fc-button>
+    `;
+  };
 }
 
-function customStyles() {
-  return html`
-    <style>
-    fc-button {
-      /* colours */
-      --fc-button-color: ${color('--fc-button-color', '#495057', 'Colors')};
-      --fc-button-active-color: ${color('--fc-button-active-color', '#495057', 'Colors')};
-      --fc-button-background-color: ${color('--fc-button-background-color', '#f5f5f5', 'Colors')};
-      --fc-button-icon-color: ${color('--fc-button-icon-color', '#495057', 'Colors')};
-      --fc-button-hover-color: ${color('--fc-button-hover-color', '#495057', 'Colors')};
+(storiesOf('Buttons|Button', module)
+  .addDecorator(withKnobs)
+  .addParameters({ notes })
+  .add('Attributes and Styles', elementProperties)
+);
 
-      /* hover styles */
-      --fc-button-hover-background-color: ${color('--fc-button-hover-background-color', '#e1e1e1', 'Colors')};
-      --fc-button-hover-icon-color: ${color('--fc-button-hover-icon-color', '#5dcdd5', 'Colors')};
-      --fc-button-hover-color: ${color('--fc-button-hover-color', '#495057', 'Colors')};
+(storiesOf('Buttons|Button/Attributes', module)
+  .addDecorator(withKnobs)
+  .addParameters({ notes, options })
+  .add('Label', withLabel)
+  .add('Icon', withIcon)
+  .add('Icon and Secondary Icon', withIconAndSecondary)
+  .add('Label and Icon', withLabelAndIcon)
+  .add('Label, Icon, and Secondary Icon', withLabelIconAndSecondary)
+);
 
-      /* sizes */
-      --fc-button-border-radius: ${number('--fc-button-border-radius', 20, {range: true, min: 1, max: 100, step: 1}, 'Sizes')}px;
-      --fc-button-font-size: ${number('--fc-button-font-size:', 14, {}, 'Sizes')}px;
-      --fc-button-font-weight: ${number('--fc-button-font-weight', 500, { range: true, min: 100, max: 900, step: 100 }, 'Sizes')};
-      --fc-button-height: ${number('--fc-button-height:', 35, {}, 'Sizes')}px;
-      --fc-button-inner-margin: ${number('--fc-button-inner-margin:', 3, {},  'Sizes')}px;
-      --fc-button-min-width: ${number('--fc-button-min-width:', 35, {}, 'Sizes')}px;
-      --fc-button-outer-margin: ${number('--fc-button-outer-margin:', 4, {}, 'Sizes')}px;
-    }
-    </style>
-    <fc-button label="Stylish Button 💋" icon="add"></fc-button>
-  `;
-}
-(storiesOf('<fc-button>', module)
+(storiesOf('Buttons|Button/Intents', module)
   .addDecorator(withKnobs)
-  .add('ElementProperties', elementProperties, { notes, options })
-  .add('With Label', withLabel, { notes, options })
-  .add('With Icon', withIcon, { notes, options })
-  .add('With Icon and Secondary Icon', withIconAndSecondary, { notes, options })
-  .add('With Label and Icon', withLabelAndIcon, { notes, options })
-  .add('With Label, Icon, and Secondary Icon', withLabelIconAndSecondary, { notes, options })
-  .add('Intent Button', intentButton, { notes, options })
-  .add('Custom Styles', customStyles, { notes, options })
+  .addParameters({ notes, options })
+  .add('No Intent', intentButton())
+  .add('Apply', intentButton('apply'))
+  .add('Success', intentButton('success'))
+  .add('Danger', intentButton('danger'))
+  .add('Warn', intentButton('warn'))
+  .add('Cancel', intentButton('cancel'))
 );

stories/copy.stories.js

@@ -1,2 +0,2 @@
-import { html } from 'lit-html'
+import { html } from 'lit-html';
 import { storiesOf } from '@storybook/polymer';
@@ -13,3 +13,3 @@ import { withKnobs, text } from '@storybook/addon-knobs';
 const notes = { markdown };
-const options = { selectedPanel: 'storybooks/knobs/panel' }
+const options = { selectedPanel: 'storybooks/knobs/panel' };
 
@@ -26,5 +26,5 @@
 
-(storiesOf('<fc-copy>', module)
+(storiesOf('Buttons|Copy', module)
   .addDecorator(withKnobs)
   .add('Element Properties', elementProperties, { notes, options })
 );

stories/speech.stories.js

@@ -12,3 +12,3 @@ import { html } from 'lit-html';
 const notes = { markdown };
-const options = { selectedPanel: 'storybooks/knobs/panel' }
+const options = { selectedPanel: 'storybooks/knobs/panel' };
 
@@ -18,7 +18,7 @@ const resultsChange = action('results-change');
 const onResult = ({ detail: { results, transcript } }) => {
-  resultsChange(results)
-  transcriptChange(transcript)
+  resultsChange(results);
+  transcriptChange(transcript);
   document.getElementById('transcript').innerText = transcript;
   document.getElementById('results').innerText = JSON.stringify(results, null, 2);
-}
+};
 
@@ -35,3 +35,3 @@ function elementProperties() {
     <fc-speech @result="${onResult}"></fc-speech>
-  `})}
+  ` })}
 
@@ -43,7 +43,7 @@ <dl>
   `;
-};
+}
 
-(storiesOf('<fc-speech>', module)
+(storiesOf('Buttons|Speech', module)
   .addDecorator(withKnobs)
   .add('Element Properties', elementProperties, { notes, options })
 );

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the 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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71487

increased by1.32%

Lines of code

1723

increased by1.47%

No dependency changes