Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@forter/button
Advanced tools
@forter/button - npm Package Compare versions
Comparing version 4.0.6 to 4.0.7
@@ -6,2 +6,10 @@ # Change Log | ||
| ## [4.0.7](https://github.com/forter/web-components/compare/@forter/button@4.0.6...@forter/button@4.0.7) (2019-12-05) | ||
| **Note:** Version bump only for package @forter/button | ||
| ## [4.0.6](https://github.com/forter/web-components/compare/@forter/button@4.0.5...@forter/button@4.0.6) (2019-11-28) | ||
@@ -8,0 +16,0 @@ |
@@ -20,2 +20,3 @@ import { css } from 'lit-element'; | ||
| --fc-icon-fill: var(--fc-button-icon-color, var(--gray-9)); | ||
| --fc-button-box-shadow: 0 1px 3px 1px rgba(183, 203, 206, 0.25); | ||
@@ -28,3 +29,7 @@ /* active style */ | ||
| --fc-button-active-box-shadow: none; | ||
| --fc-button-active-box-shadow: 0 2px 6px 2px rgba(183, 203, 206, 0.25); | ||
| /* hover style */ | ||
| --fc-button-hover-box-shadow: 0 2px 6px 2px rgba(183, 203, 206, 0.25); | ||
| /* focus styles */ | ||
@@ -43,3 +48,3 @@ --fc-button-focus-border-color: #74c0fc; | ||
| border: 0; | ||
| box-shadow: var(--fc-button-box-shadow, 0 2px 6px 2px rgba(183, 203, 206, 0.25)); | ||
| box-shadow: var(--fc-button-box-shadow); | ||
| box-sizing: border-box; | ||
@@ -59,2 +64,4 @@ color: inherit; | ||
| padding-top: 0; | ||
| padding-right: 7px; | ||
| padding-left: 7px; | ||
| position: relative; | ||
@@ -85,3 +92,3 @@ text-align: center; | ||
| color: var(--fc-button-hover-color, var(--cyan-6)); | ||
| box-shadow: var(--fc-button-hover-box-shadow, 0 1px 2px 1px rgba(var(--gray-6), 0.25)); | ||
| box-shadow: var(--fc-button-hover-box-shadow, 0 1px 2px 1px rgba(var(--gray-6-rgb), 0.25)); | ||
@@ -91,2 +98,6 @@ --fc-icon-fill: var(--fc-button-hover-icon-color, var(--cyan-6)); | ||
| :host([flat]) #button { | ||
| box-shadow: none !important; | ||
| } | ||
| #button:focus:enabled, | ||
@@ -93,0 +104,0 @@ #button:hover:focus:enabled { |
196
FcButton.js
@@ -15,154 +15,13 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| /** | ||
| * By default, Forter buttons represents UI interactions which are not transactional. | ||
| * An element by Forter | ||
| * | ||
| * Examples: | ||
| * ## Usage | ||
| * | ||
| * ```html | ||
| * <fc-button icon="search">Open Advanced Search</fc-button> | ||
| * ``` | ||
| * <script> | ||
| * import '@forter/button'; | ||
| * </script> | ||
| * | ||
| * ```html | ||
| * <fc-button secondary-icon="3dots" disabled>Show More</fc-button> | ||
| * <fc-button>Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button>Refresh Filters</fc-button> | ||
| * ``` | ||
| * | ||
| * ## Intents | ||
| * Forter buttons may have an `intent`, which represents a UI interactions which is transactional. | ||
| * | ||
| * ### Apply | ||
| * The `apply` intent represents confirmation of a personal transactional operation. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply">Edit Metric</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Search for the Current Order"> | ||
| * <fc-button intent="apply" icon="search">Search</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" | ||
| * secondary-icon="resolved" | ||
| * disabled | ||
| * >Save Settings</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Cancel | ||
| * The `cancel` intent represents cancellation or termination of a personal transactional operation. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="cancel" label="Restore Defaults"></fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Cancel the Chargeback for this Transaction"> | ||
| * <fc-button intent="cancel" icon="cancel">Cancel Chargeback</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="cancel" | ||
| * secondary-icon="close" | ||
| * disabled | ||
| * >Close Feedback</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Success | ||
| * The `success` intent represents confirmation of a transactional operation which affects a merchant's site. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="success">Update SSO File</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Release the Order on Forter and on Merchant's ERP"> | ||
| * <fc-button intent="success" icon="confirmed">Release Order</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="success" | ||
| * secondary-icon="webhook" | ||
| * disabled | ||
| * >Fire Webhook</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Danger | ||
| * The `danger` intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention, | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="danger">Force Decline</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Cancel the Order on Forter and on Merchant's ERP"> | ||
| * <fc-button intent="danger" label="Cancel Order" icon="cancel"></fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="danger" | ||
| * secondary-icon="black-list" | ||
| * disabled | ||
| * >Add To Blacklist</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Warning | ||
| * The `warning` intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Remove this User from Forter's Portal"> | ||
| * <fc-button intent="warn" icon="user">Delete User</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="warn" | ||
| * secondary-icon="cancel" | ||
| * disabled | ||
| * >Delete Saved View</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="warn">Disable Webhook</fc-button> | ||
| * ``` | ||
| * | ||
| * ## Layout and Styling | ||
| * | ||
| * ### Width | ||
| * Button's width is auto by default, however you can set it by the `width` prop as pixels or `small`,`medium` and `large` | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="small">Narrow Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="medium">Medium Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="large">Wide Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="35px">35px Wide Button</fc-button> | ||
| * ``` | ||
| * | ||
| * @element fc-button | ||
@@ -175,3 +34,3 @@ * | ||
| * @cssprop --fc-button-active-icon-color - icon colour when active. | ||
| * @cssprop --fc-button-background-color - button background colour. | ||
| * @cssprop --fc-button-background-color - button background colour. example: `aqua` | ||
| * @cssprop --fc-button-border-radius - button border radius. | ||
@@ -185,3 +44,3 @@ * @cssprop --fc-button-box-shadow - button box shadow. | ||
| * @cssprop --fc-button-hover-icon-color - icon colour when hovered. | ||
| * @cssprop --fc-button-icon-color - icon colour. | ||
| * @cssprop --fc-button-icon-color - icon colour. example: `coral` | ||
| * @cssprop --fc-button-inner-margin - button inner margin. | ||
@@ -191,2 +50,3 @@ * @cssprop --fc-button-min-width - button min-width. default: 35px; | ||
| * @cssprop --fc-button-text-transform - button text transform. | ||
| * @slot - like: `<span> My Button </span>` | ||
| */ | ||
@@ -258,3 +118,3 @@ | ||
| })], | ||
| key: "disabled", | ||
| key: "flat", | ||
@@ -271,3 +131,3 @@ value() { | ||
| })], | ||
| key: "active", | ||
| key: "disabled", | ||
@@ -284,3 +144,3 @@ value() { | ||
| })], | ||
| key: "loading", | ||
| key: "active", | ||
@@ -293,9 +153,2 @@ value() { | ||
| kind: "field", | ||
| decorators: [property({ | ||
| type: String | ||
| })], | ||
| key: "width", | ||
| value: void 0 | ||
| }, { | ||
| kind: "field", | ||
| static: true, | ||
@@ -328,3 +181,3 @@ key: "is", | ||
| /** | ||
| * The button's icon | ||
| * The button's icon. example: `admin`, default: `forter` | ||
| * @type {String} | ||
@@ -348,3 +201,3 @@ * @attr | ||
| /** | ||
| * The button's secondary icon | ||
| * The button's secondary icon. example: `edit` | ||
| * @type {String} | ||
@@ -355,3 +208,3 @@ * @attr secondary-icon | ||
| /** | ||
| * If the button is disabled | ||
| * flatness of the button | ||
| * @type {Boolean} | ||
@@ -362,3 +215,3 @@ * @attr | ||
| /** | ||
| * If the button is active | ||
| * If the button is disabled | ||
| * @type {Boolean} | ||
@@ -369,3 +222,3 @@ * @attr | ||
| /** | ||
| * If the button represents a loading state | ||
| * If the button is active | ||
| * @type {Boolean} | ||
@@ -375,8 +228,2 @@ * @attr | ||
| /** | ||
| * The button's width in px or 'small', 'medium', or 'large' | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| /** @inheritdoc */ | ||
@@ -389,3 +236,2 @@ function render() { | ||
| label, | ||
| loading, | ||
| secondaryIcon | ||
@@ -401,9 +247,7 @@ } = this; | ||
| aria-label="${ifDefined(label)}"> | ||
| <div class="layout-row layout-align-space-between-center"> | ||
| <div class="layout-row"> | ||
| <!-- loading --> | ||
| ${!loading ? '' : html`<fc-spin-loader></fc-spin-loader>`} | ||
| <!-- Icon --> | ||
| ${!(icon && !loading) ? '' : html` | ||
| ${!icon ? '' : html` | ||
| <div class="layout-row layout-align-center-center mrg-item"> | ||
@@ -422,3 +266,3 @@ <fc-icon icon="${icon}"></fc-icon> | ||
| <!-- Right Icon --> | ||
| ${!(secondaryIcon && !loading) ? '' : html` | ||
| ${!secondaryIcon ? '' : html` | ||
| <div class="layout-row layout-align-center-center mrg-item"> | ||
@@ -425,0 +269,0 @@ <fc-icon class="mrg-item" icon="${secondaryIcon}"></fc-icon> |
@@ -5,2 +5,3 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js'; | ||
| import shared from './fc-button-shared.css'; | ||
| import './fc-button.js'; | ||
| import bound from 'bound-decorator'; | ||
@@ -11,5 +12,15 @@ import '@forter/icon/icons/microphone.svg.js'; | ||
| /** | ||
| * # `<fc-speech>` | ||
| * An element by Forter | ||
| * | ||
| * TODO: slot in fc-button | ||
| * ## Usage | ||
| * | ||
| * ```html | ||
| * <script> | ||
| * import '@forter/button'; | ||
| * </script> | ||
| * | ||
| * <fc-speech></fc-speech> | ||
| * ``` | ||
| * @element fc-speech | ||
| * @fires result - the outcome of voice recording | ||
| */ | ||
@@ -127,5 +138,4 @@ | ||
| <div class="ring2"></div> | ||
| <button id="button" title="Search by voice" @click="${this.toggle}"> | ||
| <fc-icon icon="microphone"></fc-icon> | ||
| </button> | ||
| <fc-button icon-size="34" icon="microphone" label="Search by voice" @click="${this.toggle}"> | ||
| </fc-button> | ||
| `; | ||
@@ -132,0 +142,0 @@ } |
| import './fc-button.js'; | ||
| import './fc-icon-button.js'; | ||
| import './fc-copy.js'; | ||
| import './fc-speech.js'; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "@forter/button", | ||
| "version": "4.0.6", | ||
| "version": "4.0.7", | ||
| "description": "Button from Forter Components", | ||
@@ -51,3 +51,3 @@ "main": "index.js", | ||
| "@forter/core": "^2.0.1", | ||
| "@forter/icon": "^3.2.3", | ||
| "@forter/icon": "^3.2.4", | ||
| "@forter/mixins": "^3.0.0", | ||
@@ -59,3 +59,3 @@ "@forter/styles": "^3.2.1", | ||
| }, | ||
| "gitHead": "3892455c25a8e3295c4c78c18c145e051774367f" | ||
| "gitHead": "c4f3eb919c39032467f00517739bcde25aece187" | ||
| } |
219
README.md
| # fc-button | ||
| By default, Forter buttons represents UI interactions which are not transactional. | ||
| An element by Forter | ||
| Examples: | ||
| ## Usage | ||
| ```html | ||
| <fc-button icon="search">Open Advanced Search</fc-button> | ||
| ``` | ||
| <script> | ||
| import '@forter/button'; | ||
| </script> | ||
| ```html | ||
| <fc-button secondary-icon="3dots" disabled>Show More</fc-button> | ||
| <fc-button>Button</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-button>Refresh Filters</fc-button> | ||
| ``` | ||
| ## Intents | ||
| Forter buttons may have an `intent`, which represents a UI interactions which is transactional. | ||
| ### Apply | ||
| The `apply` intent represents confirmation of a personal transactional operation. | ||
| Examples: | ||
| ```html | ||
| <fc-button intent="apply">Edit Metric</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-tooltip tooltip="Search for the Current Order"> | ||
| <fc-button intent="apply" icon="search">Search</fc-button> | ||
| </fc-tooltip> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="apply" | ||
| secondary-icon="resolved" | ||
| disabled | ||
| >Save Settings</fc-button> | ||
| ``` | ||
| ### Cancel | ||
| The `cancel` intent represents cancellation or termination of a personal transactional operation. | ||
| Examples: | ||
| ```html | ||
| <fc-button intent="cancel" label="Restore Defaults"></fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-tooltip tooltip="Cancel the Chargeback for this Transaction"> | ||
| <fc-button intent="cancel" icon="cancel">Cancel Chargeback</fc-button> | ||
| </fc-tooltip> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="cancel" | ||
| secondary-icon="close" | ||
| disabled | ||
| >Close Feedback</fc-button> | ||
| ``` | ||
| ### Success | ||
| The `success` intent represents confirmation of a transactional operation which affects a merchant's site. | ||
| Examples: | ||
| ```html | ||
| <fc-button intent="success">Update SSO File</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-tooltip tooltip="Release the Order on Forter and on Merchant's ERP"> | ||
| <fc-button intent="success" icon="confirmed">Release Order</fc-button> | ||
| </fc-tooltip> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="success" | ||
| secondary-icon="webhook" | ||
| disabled | ||
| >Fire Webhook</fc-button> | ||
| ``` | ||
| ### Danger | ||
| The `danger` intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention, | ||
| Examples: | ||
| ```html | ||
| <fc-button intent="danger">Force Decline</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-tooltip tooltip="Cancel the Order on Forter and on Merchant's ERP"> | ||
| <fc-button intent="danger" label="Cancel Order" icon="cancel"></fc-button> | ||
| </fc-tooltip> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="danger" | ||
| secondary-icon="black-list" | ||
| disabled | ||
| >Add To Blacklist</fc-button> | ||
| ``` | ||
| ### Warning | ||
| The `warning` intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention. | ||
| Examples: | ||
| ```html | ||
| <fc-tooltip tooltip="Remove this User from Forter's Portal"> | ||
| <fc-button intent="warn" icon="user">Delete User</fc-button> | ||
| </fc-tooltip> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="warn" | ||
| secondary-icon="cancel" | ||
| disabled | ||
| >Delete Saved View</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="warn">Disable Webhook</fc-button> | ||
| ``` | ||
| ## Layout and Styling | ||
| ### Width | ||
| Button's width is auto by default, however you can set it by the `width` prop as pixels or `small`,`medium` and `large` | ||
| Examples: | ||
| ```html | ||
| <fc-button intent="apply" width="small">Narrow Button</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="apply" width="medium">Medium Button</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="apply" width="large">Wide Button</fc-button> | ||
| ``` | ||
| ```html | ||
| <fc-button intent="apply" width="35px">35px Wide Button</fc-button> | ||
| ``` | ||
| ## Properties | ||
@@ -161,10 +21,15 @@ | ||
| | `disabled` | `disabled` | `boolean` | false | If the button is disabled | | ||
| | `icon` | `icon` | `string` | | The button's icon | | ||
| | `flat` | `flat` | `boolean` | false | flatness of the button | | ||
| | `icon` | `icon` | `string` | | The button's icon. example: `admin`, default: `forter` | | ||
| | `iconSize` | `icon-size` | `string \| number` | 18 | The icon's icon-size | | ||
| | `intent` | `intent` | `"success" \| "apply" \| "danger" \| "cancel" \| "warn"` | | The button's intent. See Intents in README. | | ||
| | `label` | `label` | `string` | | The button's label, used when accessible content is not slotted in. | | ||
| | `loading` | `loading` | `boolean` | false | If the button represents a loading state | | ||
| | `secondaryIcon` | `secondary-icon` | `string` | "" | The button's secondary icon | | ||
| | `width` | `width` | `string` | | The button's width in px or 'small', 'medium', or 'large' | | ||
| | `secondaryIcon` | `secondary-icon` | `string` | "" | The button's secondary icon. example: `edit` | | ||
| ## Slots | ||
| | Name | Description | | ||
| |------|----------------------------------| | ||
| | | like: `<span> My Button </span>` | | ||
| ## CSS Custom Properties | ||
@@ -179,3 +44,3 @@ | ||
| | `--fc-button-active-icon-color` | icon colour when active. | | ||
| | `--fc-button-background-color` | button background colour. | | ||
| | `--fc-button-background-color` | button background colour. example: `aqua` | | ||
| | `--fc-button-border-radius` | button border radius. | | ||
@@ -189,3 +54,3 @@ | `--fc-button-box-shadow` | button box shadow. | | ||
| | `--fc-button-hover-icon-color` | icon colour when hovered. | | ||
| | `--fc-button-icon-color` | icon colour. | | ||
| | `--fc-button-icon-color` | icon colour. example: `coral` | | ||
| | `--fc-button-inner-margin` | button inner margin. | | ||
@@ -197,20 +62,2 @@ | `--fc-button-min-width` | button min-width. default: 35px; | | ||
| # fc-copy | ||
| An Element that provides a copy-to-clipboard button. | ||
| ## Properties | ||
| | Property | Attribute | Type | Description | | ||
| |-------------|-------------|---------------|------------------| | ||
| | `clipboard` | `clipboard` | `string` | The text to copy | | ||
| | `selection` | | `HTMLElement` | | | ||
| ## Events | ||
| | Event | Description | | ||
| |--------|---------------------------------| | ||
| | `copy` | copy event with the copied text | | ||
| # fc-icon-button | ||
@@ -258,1 +105,33 @@ | ||
| | `--fc-button-text-transform` | button text transform. | | ||
| # fc-speech | ||
| An element by Forter | ||
| ## Usage | ||
| ```html | ||
| <script> | ||
| import '@forter/button'; | ||
| </script> | ||
| <fc-speech></fc-speech> | ||
| ``` | ||
| ## Properties | ||
| | Property | Attribute | Type | Description | | ||
| |----------------------|----------------------|-----------|--------------------------------------------------| | ||
| | `completeTranscript` | `completeTranscript` | `string` | The completed transcript | | ||
| | `continuous` | `continuous` | `boolean` | If recording should be continuous | | ||
| | `interimResults` | `interim-results` | `boolean` | If results should be streamed as they are produced | | ||
| | `language` | `language` | `string` | The language to use when recognizing | | ||
| | `recognizing` | `recognizing` | `any` | Whether the component is recognizing speech | | ||
| | `transcript` | `transcript` | `any` | | | ||
| ## Events | ||
| | Event | Description | | ||
| |----------|--------------------------------| | ||
| | `result` | the outcome of voice recording | |
@@ -17,154 +17,13 @@ import { LitElement, html, property } from 'lit-element'; | ||
| /** | ||
| * By default, Forter buttons represents UI interactions which are not transactional. | ||
| * An element by Forter | ||
| * | ||
| * Examples: | ||
| * ## Usage | ||
| * | ||
| * ```html | ||
| * <fc-button icon="search">Open Advanced Search</fc-button> | ||
| * ``` | ||
| * <script> | ||
| * import '@forter/button'; | ||
| * </script> | ||
| * | ||
| * ```html | ||
| * <fc-button secondary-icon="3dots" disabled>Show More</fc-button> | ||
| * <fc-button>Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button>Refresh Filters</fc-button> | ||
| * ``` | ||
| * | ||
| * ## Intents | ||
| * Forter buttons may have an `intent`, which represents a UI interactions which is transactional. | ||
| * | ||
| * ### Apply | ||
| * The `apply` intent represents confirmation of a personal transactional operation. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply">Edit Metric</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Search for the Current Order"> | ||
| * <fc-button intent="apply" icon="search">Search</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" | ||
| * secondary-icon="resolved" | ||
| * disabled | ||
| * >Save Settings</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Cancel | ||
| * The `cancel` intent represents cancellation or termination of a personal transactional operation. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="cancel" label="Restore Defaults"></fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Cancel the Chargeback for this Transaction"> | ||
| * <fc-button intent="cancel" icon="cancel">Cancel Chargeback</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="cancel" | ||
| * secondary-icon="close" | ||
| * disabled | ||
| * >Close Feedback</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Success | ||
| * The `success` intent represents confirmation of a transactional operation which affects a merchant's site. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="success">Update SSO File</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Release the Order on Forter and on Merchant's ERP"> | ||
| * <fc-button intent="success" icon="confirmed">Release Order</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="success" | ||
| * secondary-icon="webhook" | ||
| * disabled | ||
| * >Fire Webhook</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Danger | ||
| * The `danger` intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention, | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="danger">Force Decline</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Cancel the Order on Forter and on Merchant's ERP"> | ||
| * <fc-button intent="danger" label="Cancel Order" icon="cancel"></fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="danger" | ||
| * secondary-icon="black-list" | ||
| * disabled | ||
| * >Add To Blacklist</fc-button> | ||
| * ``` | ||
| * | ||
| * ### Warning | ||
| * The `warning` intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention. | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-tooltip tooltip="Remove this User from Forter's Portal"> | ||
| * <fc-button intent="warn" icon="user">Delete User</fc-button> | ||
| * </fc-tooltip> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="warn" | ||
| * secondary-icon="cancel" | ||
| * disabled | ||
| * >Delete Saved View</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="warn">Disable Webhook</fc-button> | ||
| * ``` | ||
| * | ||
| * ## Layout and Styling | ||
| * | ||
| * ### Width | ||
| * Button's width is auto by default, however you can set it by the `width` prop as pixels or `small`,`medium` and `large` | ||
| * | ||
| * Examples: | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="small">Narrow Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="medium">Medium Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="large">Wide Button</fc-button> | ||
| * ``` | ||
| * | ||
| * ```html | ||
| * <fc-button intent="apply" width="35px">35px Wide Button</fc-button> | ||
| * ``` | ||
| * | ||
| * @element fc-button | ||
@@ -177,3 +36,3 @@ * | ||
| * @cssprop --fc-button-active-icon-color - icon colour when active. | ||
| * @cssprop --fc-button-background-color - button background colour. | ||
| * @cssprop --fc-button-background-color - button background colour. example: `aqua` | ||
| * @cssprop --fc-button-border-radius - button border radius. | ||
@@ -187,3 +46,3 @@ * @cssprop --fc-button-box-shadow - button box shadow. | ||
| * @cssprop --fc-button-hover-icon-color - icon colour when hovered. | ||
| * @cssprop --fc-button-icon-color - icon colour. | ||
| * @cssprop --fc-button-icon-color - icon colour. example: `coral` | ||
| * @cssprop --fc-button-inner-margin - button inner margin. | ||
@@ -193,3 +52,6 @@ * @cssprop --fc-button-min-width - button min-width. default: 35px; | ||
| * @cssprop --fc-button-text-transform - button text transform. | ||
| * @slot - like: `<span> My Button </span>` | ||
| */ | ||
| export class FcButton extends DelegatesFocusMixin(LitElement) { | ||
@@ -204,3 +66,3 @@ /** | ||
| /** | ||
| * The button's icon | ||
| * The button's icon. example: `admin`, default: `forter` | ||
| * @type {String} | ||
@@ -227,3 +89,3 @@ * @attr | ||
| /** | ||
| * The button's secondary icon | ||
| * The button's secondary icon. example: `edit` | ||
| * @type {String} | ||
@@ -234,30 +96,24 @@ * @attr secondary-icon | ||
| /** | ||
| * If the button is disabled | ||
| * flatness of the button | ||
| * @type {Boolean} | ||
| * @attr | ||
| */ | ||
| @property({ type: Boolean, reflect: true }) disabled = false; | ||
| @property({ type: Boolean, reflect: true }) flat = false; | ||
| /** | ||
| * If the button is active | ||
| * If the button is disabled | ||
| * @type {Boolean} | ||
| * @attr | ||
| */ | ||
| @property({ type: Boolean, reflect: true }) active = false; | ||
| @property({ type: Boolean, reflect: true }) disabled = false; | ||
| /** | ||
| * If the button represents a loading state | ||
| * If the button is active | ||
| * @type {Boolean} | ||
| * @attr | ||
| */ | ||
| @property({ type: Boolean, reflect: true }) loading = false; | ||
| @property({ type: Boolean, reflect: true }) active = false; | ||
| /** | ||
| * The button's width in px or 'small', 'medium', or 'large' | ||
| * @type {String} | ||
| * @attr | ||
| */ | ||
| @property({ type: String }) width; | ||
| static is = 'fc-button'; | ||
@@ -281,3 +137,2 @@ | ||
| label, | ||
| loading, | ||
| secondaryIcon, | ||
@@ -292,9 +147,7 @@ } = this; | ||
| aria-label="${ifDefined(label)}"> | ||
| <div class="layout-row layout-align-space-between-center"> | ||
| <div class="layout-row"> | ||
| <!-- loading --> | ||
| ${!loading ? '' : html`<fc-spin-loader></fc-spin-loader>`} | ||
| <!-- Icon --> | ||
| ${!(icon && !loading) ? '' : html` | ||
| ${!(icon) ? '' : html` | ||
| <div class="layout-row layout-align-center-center mrg-item"> | ||
@@ -313,3 +166,3 @@ <fc-icon icon="${icon}"></fc-icon> | ||
| <!-- Right Icon --> | ||
| ${!(secondaryIcon && !loading) ? '' : html` | ||
| ${!(secondaryIcon) ? '' : html` | ||
| <div class="layout-row layout-align-center-center mrg-item"> | ||
@@ -316,0 +169,0 @@ <fc-icon class="mrg-item" icon="${secondaryIcon}"></fc-icon> |
| import { LitElement, html, property } from 'lit-element'; | ||
| import bound from 'bound-decorator'; | ||
| import './fc-button'; | ||
| import '@forter/icon/fc-icon'; | ||
@@ -12,6 +12,17 @@ import '@forter/icon/icons/microphone.svg.js'; | ||
| /** | ||
| * # `<fc-speech>` | ||
| * An element by Forter | ||
| * | ||
| * TODO: slot in fc-button | ||
| * ## Usage | ||
| * | ||
| * ```html | ||
| * <script> | ||
| * import '@forter/button'; | ||
| * </script> | ||
| * | ||
| * <fc-speech></fc-speech> | ||
| * ``` | ||
| * @element fc-speech | ||
| * @fires result - the outcome of voice recording | ||
| */ | ||
| export class FcSpeech extends LitElement { | ||
@@ -60,5 +71,4 @@ /** | ||
| <div class="ring2"></div> | ||
| <button id="button" title="Search by voice" @click="${this.toggle}"> | ||
| <fc-icon icon="microphone"></fc-icon> | ||
| </button> | ||
| <fc-button icon-size="34" icon="microphone" label="Search by voice" @click="${this.toggle}"> | ||
| </fc-button> | ||
| `; | ||
@@ -65,0 +75,0 @@ } |
| export * from './fc-button'; | ||
| export * from './fc-icon-button'; | ||
| export * from './fc-copy'; | ||
| export * from './fc-speech'; |
@@ -1,70 +0,35 @@ | ||
| import markdown from '../README.md'; | ||
| import { html } from 'lit-html'; | ||
| import { ifDefined } from 'lit-html/directives/if-defined'; | ||
| import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook'; | ||
| import { withKnobs, boolean, color, number, select, text } from '@storybook/addon-knobs'; | ||
| import { enumerateProperties } from '../../../lib/storybook-helpers'; | ||
| import '../src'; | ||
| import { FcButton } from '../src/FcButton'; | ||
| const story = enumerateProperties(FcButton); | ||
| import markdown from '../README.md'; | ||
| const INTENT_OPTIONS = { | ||
| Apply: 'apply', | ||
| Cancel: 'cancel', | ||
| Danger: 'danger', | ||
| Success: 'success', | ||
| Warn: 'warn', | ||
| None: null, | ||
| }; | ||
| import {markdownToStories} from '../../../lib/storybook-helpers'; | ||
| export function attributesAndStyles() { | ||
| return story(html` | ||
| <style> | ||
| fc-button { | ||
| font-size: ${number('font-size', 14, { range: true, min: 10, max: 72, step: 1 }, 'Styles')}px; | ||
| font-weight: ${number('font-weight', 500, { range: true, min: 100, max: 900, step: 100 }, 'Styles')}; | ||
| color: ${color('color', '#495057', 'Styles')}; | ||
| export const { | ||
| defaultProperties, | ||
| flat, | ||
| icon, | ||
| disabled, | ||
| active, | ||
| label, | ||
| apply, | ||
| success, | ||
| danger, | ||
| cancel, | ||
| warn, | ||
| iconColor, | ||
| backgroundColor | ||
| /* colours */ | ||
| --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')}; | ||
| //intent -- TODO breaks storybook ATM | ||
| // add attributes or properties names or css variables suffixes | ||
| // example: --fc-fc-example-element-disabled-color as disabledColor | ||
| } = markdownToStories(FcButton, markdown); | ||
| /* 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-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; | ||
| --fc-icon-size: ${number('--fc-icon-size', 18, { range: true, min: 12, max: 48 }, 'Attributes')}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'))}" | ||
| secondary-icon="${ifDefined(text('secondary-icon', undefined, 'Attributes'))}" | ||
| >${text('text content', 'Button')}</fc-button> | ||
| `); | ||
| } | ||
| export default { | ||
| title: 'Controls|Button', | ||
| decorators: [withKnobs], | ||
| parameters: { | ||
| notes: { markdown }, | ||
| options: { selectedPanel: 'storybooks/knobs/panel' }, | ||
| }, | ||
| }; | ||
| component: 'fc-button', | ||
| decorators: [withKnobs, withWebComponentsKnobs], | ||
| parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }, | ||
| } |
| import { html } from 'lit-html'; | ||
| import { withKnobs } from '@storybook/addon-knobs'; | ||
| import { action } from '@storybook/addon-actions'; | ||
| import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook'; | ||
| import { enumerateProperties } from '../../../lib/storybook-helpers'; | ||
| import '../src'; | ||
| import { FcSpeech } from '../src/FcSpeech'; | ||
| const story = enumerateProperties(FcSpeech); | ||
| import markdown from '../README.md'; | ||
| const resultsChange = action('results-change'); | ||
| const transcriptChange = action('transcript-change'); | ||
| const onResult = ({ detail: { results, transcript } }) => { | ||
| resultsChange(results); | ||
| transcriptChange(transcript); | ||
| document.getElementById('transcript').innerText = transcript; | ||
| document.getElementById('results').innerText = JSON.stringify(results, null, 2); | ||
| }; | ||
| import {markdownToStories} from '../../../lib/storybook-helpers'; | ||
| export function elementProperties() { | ||
| return story(html` | ||
| <fc-speech @result="${onResult}"></fc-speech> | ||
| <dl> | ||
| <dt>Transcript</dt> | ||
| <dd><output id="transcript"></output></dd> | ||
| </dl> | ||
| `); | ||
| } | ||
| export const { | ||
| defaultProperties, | ||
| result | ||
| //intent -- TODO breaks storybook ATM | ||
| // add attributes or properties names or css variables suffixes | ||
| // example: --fc-fc-example-element-disabled-color as disabledColor | ||
| } = markdownToStories(FcSpeech, markdown); | ||
| export default { | ||
| title: 'Controls|Speech', | ||
| decorators: [withKnobs], | ||
| parameters: { | ||
| notes: { markdown }, | ||
| options: { selectedPanel: 'storybooks/knobs/panel' }, | ||
| }, | ||
| }; | ||
| component: 'fc-speech', | ||
| decorators: [withKnobs, withWebComponentsKnobs], | ||
| parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } }, | ||
| } |
@@ -6,4 +6,4 @@ { | ||
| "name": "fc-button", | ||
| "description": "By default, Forter buttons represents UI interactions which are not transactional.\n\nExamples:\n\n```html\n<fc-button icon=\"search\">Open Advanced Search</fc-button>\n```\n\n```html\n<fc-button secondary-icon=\"3dots\" disabled>Show More</fc-button>\n```\n\n```html\n<fc-button>Refresh Filters</fc-button>\n```\n\n## Intents\nForter buttons may have an `intent`, which represents a UI interactions which is transactional.\n\n### Apply\nThe `apply` intent represents confirmation of a personal transactional operation.\n\nExamples:\n\n```html\n<fc-button intent=\"apply\">Edit Metric</fc-button>\n```\n\n```html\n<fc-tooltip tooltip=\"Search for the Current Order\">\n <fc-button intent=\"apply\" icon=\"search\">Search</fc-button>\n</fc-tooltip>\n```\n\n```html\n<fc-button intent=\"apply\"\n secondary-icon=\"resolved\"\n disabled\n>Save Settings</fc-button>\n```\n\n### Cancel\nThe `cancel` intent represents cancellation or termination of a personal transactional operation.\n\nExamples:\n\n```html\n<fc-button intent=\"cancel\" label=\"Restore Defaults\"></fc-button>\n```\n\n```html\n<fc-tooltip tooltip=\"Cancel the Chargeback for this Transaction\">\n <fc-button intent=\"cancel\" icon=\"cancel\">Cancel Chargeback</fc-button>\n</fc-tooltip>\n```\n\n```html\n<fc-button intent=\"cancel\"\n secondary-icon=\"close\"\n disabled\n>Close Feedback</fc-button>\n```\n\n### Success\nThe `success` intent represents confirmation of a transactional operation which affects a merchant's site.\n\nExamples:\n\n```html\n<fc-button intent=\"success\">Update SSO File</fc-button>\n```\n\n```html\n<fc-tooltip tooltip=\"Release the Order on Forter and on Merchant's ERP\">\n <fc-button intent=\"success\" icon=\"confirmed\">Release Order</fc-button>\n</fc-tooltip>\n```\n\n```html\n<fc-button intent=\"success\"\n secondary-icon=\"webhook\"\n disabled\n>Fire Webhook</fc-button>\n```\n\n### Danger\nThe `danger` intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention,\n\nExamples:\n\n```html\n<fc-button intent=\"danger\">Force Decline</fc-button>\n```\n\n```html\n<fc-tooltip tooltip=\"Cancel the Order on Forter and on Merchant's ERP\">\n <fc-button intent=\"danger\" label=\"Cancel Order\" icon=\"cancel\"></fc-button>\n</fc-tooltip>\n```\n\n```html\n<fc-button intent=\"danger\"\n secondary-icon=\"black-list\"\n disabled\n>Add To Blacklist</fc-button>\n```\n\n### Warning\nThe `warning` intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention.\n\nExamples:\n\n```html\n<fc-tooltip tooltip=\"Remove this User from Forter's Portal\">\n <fc-button intent=\"warn\" icon=\"user\">Delete User</fc-button>\n</fc-tooltip>\n```\n\n```html\n<fc-button intent=\"warn\"\n secondary-icon=\"cancel\"\n disabled\n>Delete Saved View</fc-button>\n```\n\n```html\n<fc-button intent=\"warn\">Disable Webhook</fc-button>\n```\n\n## Layout and Styling\n\n### Width\nButton's width is auto by default, however you can set it by the `width` prop as pixels or `small`,`medium` and `large`\n\nExamples:\n\n```html\n<fc-button intent=\"apply\" width=\"small\">Narrow Button</fc-button>\n```\n\n```html\n<fc-button intent=\"apply\" width=\"medium\">Medium Button</fc-button>\n```\n\n```html\n<fc-button intent=\"apply\" width=\"large\">Wide Button</fc-button>\n```\n\n```html\n<fc-button intent=\"apply\" width=\"35px\">35px Wide Button</fc-button>\n```", | ||
| "jsDoc": "/**\n * By default, Forter buttons represents UI interactions which are not transactional.\n *\n * Examples:\n *\n * ```html\n * <fc-button icon=\"search\">Open Advanced Search</fc-button>\n * ```\n *\n * ```html\n * <fc-button secondary-icon=\"3dots\" disabled>Show More</fc-button>\n * ```\n *\n * ```html\n * <fc-button>Refresh Filters</fc-button>\n * ```\n *\n * ## Intents\n * Forter buttons may have an `intent`, which represents a UI interactions which is transactional.\n *\n * ### Apply\n * The `apply` intent represents confirmation of a personal transactional operation.\n *\n * Examples:\n *\n * ```html\n * <fc-button intent=\"apply\">Edit Metric</fc-button>\n * ```\n *\n * ```html\n * <fc-tooltip tooltip=\"Search for the Current Order\">\n * <fc-button intent=\"apply\" icon=\"search\">Search</fc-button>\n * </fc-tooltip>\n * ```\n *\n * ```html\n * <fc-button intent=\"apply\"\n * secondary-icon=\"resolved\"\n * disabled\n * >Save Settings</fc-button>\n * ```\n *\n * ### Cancel\n * The `cancel` intent represents cancellation or termination of a personal transactional operation.\n *\n * Examples:\n *\n * ```html\n * <fc-button intent=\"cancel\" label=\"Restore Defaults\"></fc-button>\n * ```\n *\n * ```html\n * <fc-tooltip tooltip=\"Cancel the Chargeback for this Transaction\">\n * <fc-button intent=\"cancel\" icon=\"cancel\">Cancel Chargeback</fc-button>\n * </fc-tooltip>\n * ```\n *\n * ```html\n * <fc-button intent=\"cancel\"\n * secondary-icon=\"close\"\n * disabled\n * >Close Feedback</fc-button>\n * ```\n *\n * ### Success\n * The `success` intent represents confirmation of a transactional operation which affects a merchant's site.\n *\n * Examples:\n *\n * ```html\n * <fc-button intent=\"success\">Update SSO File</fc-button>\n * ```\n *\n * ```html\n * <fc-tooltip tooltip=\"Release the Order on Forter and on Merchant's ERP\">\n * <fc-button intent=\"success\" icon=\"confirmed\">Release Order</fc-button>\n * </fc-tooltip>\n * ```\n *\n * ```html\n * <fc-button intent=\"success\"\n * secondary-icon=\"webhook\"\n * disabled\n * >Fire Webhook</fc-button>\n * ```\n *\n * ### Danger\n * The `danger` intent represents confirmation of a transactional operation which affects a merchant's data and therefore requires the user's attention,\n *\n * Examples:\n *\n * ```html\n * <fc-button intent=\"danger\">Force Decline</fc-button>\n * ```\n *\n * ```html\n * <fc-tooltip tooltip=\"Cancel the Order on Forter and on Merchant's ERP\">\n * <fc-button intent=\"danger\" label=\"Cancel Order\" icon=\"cancel\"></fc-button>\n * </fc-tooltip>\n * ```\n *\n * ```html\n * <fc-button intent=\"danger\"\n * secondary-icon=\"black-list\"\n * disabled\n * >Add To Blacklist</fc-button>\n * ```\n *\n * ### Warning\n * The `warning` intent represents confirmation of a transactional operation which affects a merchant's site and therefore requires the user's attention.\n *\n * Examples:\n *\n * ```html\n * <fc-tooltip tooltip=\"Remove this User from Forter's Portal\">\n * <fc-button intent=\"warn\" icon=\"user\">Delete User</fc-button>\n * </fc-tooltip>\n * ```\n *\n * ```html\n * <fc-button intent=\"warn\"\n * secondary-icon=\"cancel\"\n * disabled\n * >Delete Saved View</fc-button>\n * ```\n *\n * ```html\n * <fc-button intent=\"warn\">Disable Webhook</fc-button>\n * ```\n *\n * ## Layout and Styling\n *\n * ### Width\n * Button's width is auto by default, however you can set it by the `width` prop as pixels or `small`,`medium` and `large`\n *\n * Examples:\n *\n * ```html\n * <fc-button intent=\"apply\" width=\"small\">Narrow Button</fc-button>\n * ```\n *\n * ```html\n * <fc-button intent=\"apply\" width=\"medium\">Medium Button</fc-button>\n * ```\n *\n * ```html\n * <fc-button intent=\"apply\" width=\"large\">Wide Button</fc-button>\n * ```\n *\n * ```html\n * <fc-button intent=\"apply\" width=\"35px\">35px Wide Button</fc-button>\n * ```\n *\n * @element fc-button\n *\n * @cssprop --fc-button-active-background-color - button background colour when active.\n * @cssprop --fc-button-active-border-color - button border colour when active.\n * @cssprop --fc-button-active-box-shadow - button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)\n * @cssprop --fc-button-active-color - button colour when active.\n * @cssprop --fc-button-active-icon-color - icon colour when active.\n * @cssprop --fc-button-background-color - button background colour.\n * @cssprop --fc-button-border-radius - button border radius.\n * @cssprop --fc-button-box-shadow - button box shadow.\n * @cssprop --fc-button-focus-border-color - button border colour when focused.\n * @cssprop --fc-button-height - button height.\n * @cssprop --fc-button-hover-background-color - button background colour when hovered.\n * @cssprop --fc-button-hover-box-shadow - button box-shadow colour when hovered.\n * @cssprop --fc-button-hover-color - button box-shadow colour when hovered.\n * @cssprop --fc-button-hover-icon-color - icon colour when hovered.\n * @cssprop --fc-button-icon-color - icon colour.\n * @cssprop --fc-button-inner-margin - button inner margin.\n * @cssprop --fc-button-min-width - button min-width. default: 35px;\n * @cssprop --fc-button-outer-margin - button outer margin.\n * @cssprop --fc-button-text-transform - button text transform.\n */", | ||
| "description": "An element by Forter\n\n## Usage\n\n```html\n<script>\n import '@forter/button';\n</script>\n\n<fc-button>Button</fc-button>\n```", | ||
| "jsDoc": "/**\n * An element by Forter\n *\n * ## Usage\n *\n * ```html\n * <script>\n * import '@forter/button';\n * </script>\n *\n * <fc-button>Button</fc-button>\n * ```\n * @element fc-button\n *\n * @cssprop --fc-button-active-background-color - button background colour when active.\n * @cssprop --fc-button-active-border-color - button border colour when active.\n * @cssprop --fc-button-active-box-shadow - button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)\n * @cssprop --fc-button-active-color - button colour when active.\n * @cssprop --fc-button-active-icon-color - icon colour when active.\n * @cssprop --fc-button-background-color - button background colour. example: `aqua`\n * @cssprop --fc-button-border-radius - button border radius.\n * @cssprop --fc-button-box-shadow - button box shadow.\n * @cssprop --fc-button-focus-border-color - button border colour when focused.\n * @cssprop --fc-button-height - button height.\n * @cssprop --fc-button-hover-background-color - button background colour when hovered.\n * @cssprop --fc-button-hover-box-shadow - button box-shadow colour when hovered.\n * @cssprop --fc-button-hover-color - button box-shadow colour when hovered.\n * @cssprop --fc-button-hover-icon-color - icon colour when hovered.\n * @cssprop --fc-button-icon-color - icon colour. example: `coral`\n * @cssprop --fc-button-inner-margin - button inner margin.\n * @cssprop --fc-button-min-width - button min-width. default: 35px;\n * @cssprop --fc-button-outer-margin - button outer margin.\n * @cssprop --fc-button-text-transform - button text transform.\n * @slot - like: `<span> My Button </span>`\n */", | ||
| "attributes": [ | ||
@@ -18,4 +18,4 @@ { | ||
| "name": "icon", | ||
| "description": "The button's icon", | ||
| "jsDoc": "/**\n * The button's icon\n * @type {String}\n * @attr\n */", | ||
| "description": "The button's icon. example: `admin`, default: `forter`", | ||
| "jsDoc": "/**\n * The button's icon. example: `admin`, default: `forter`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -37,7 +37,13 @@ }, | ||
| "name": "secondary-icon", | ||
| "description": "The button's secondary icon", | ||
| "jsDoc": "/**\n * The button's secondary icon\n * @type {String}\n * @attr secondary-icon\n */", | ||
| "description": "The button's secondary icon. example: `edit`", | ||
| "jsDoc": "/**\n * The button's secondary icon. example: `edit`\n * @type {String}\n * @attr secondary-icon\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "flat", | ||
| "description": "flatness of the button", | ||
| "jsDoc": "/**\n * flatness of the button\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
@@ -53,14 +59,2 @@ "description": "If the button is disabled", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "loading", | ||
| "description": "If the button represents a loading state", | ||
| "jsDoc": "/**\n * If the button represents a loading state\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "width", | ||
| "description": "The button's width in px or 'small', 'medium', or 'large'", | ||
| "jsDoc": "/**\n * The button's width in px or 'small', 'medium', or 'large'\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| } | ||
@@ -77,4 +71,4 @@ ], | ||
| "name": "icon", | ||
| "description": "The button's icon", | ||
| "jsDoc": "/**\n * The button's icon\n * @type {String}\n * @attr\n */", | ||
| "description": "The button's icon. example: `admin`, default: `forter`", | ||
| "jsDoc": "/**\n * The button's icon. example: `admin`, default: `forter`\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
@@ -96,7 +90,13 @@ }, | ||
| "name": "secondaryIcon", | ||
| "description": "The button's secondary icon", | ||
| "jsDoc": "/**\n * The button's secondary icon\n * @type {String}\n * @attr secondary-icon\n */", | ||
| "description": "The button's secondary icon. example: `edit`", | ||
| "jsDoc": "/**\n * The button's secondary icon. example: `edit`\n * @type {String}\n * @attr secondary-icon\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "flat", | ||
| "description": "flatness of the button", | ||
| "jsDoc": "/**\n * flatness of the button\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
@@ -112,14 +112,8 @@ "description": "If the button is disabled", | ||
| "type": "boolean" | ||
| }, | ||
| } | ||
| ], | ||
| "slots": [ | ||
| { | ||
| "name": "loading", | ||
| "description": "If the button represents a loading state", | ||
| "jsDoc": "/**\n * If the button represents a loading state\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "width", | ||
| "description": "The button's width in px or 'small', 'medium', or 'large'", | ||
| "jsDoc": "/**\n * The button's width in px or 'small', 'medium', or 'large'\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| "name": "", | ||
| "description": "like: `<span> My Button </span>`" | ||
| } | ||
@@ -146,3 +140,3 @@ ], | ||
| "name": "--fc-button-icon-color", | ||
| "description": "icon colour." | ||
| "description": "icon colour. example: `coral`" | ||
| }, | ||
@@ -183,3 +177,3 @@ { | ||
| "name": "--fc-button-background-color", | ||
| "description": "button background colour." | ||
| "description": "button background colour. example: `aqua`" | ||
| }, | ||
@@ -209,34 +203,2 @@ { | ||
| { | ||
| "name": "fc-copy", | ||
| "description": "An Element that provides a copy-to-clipboard button.", | ||
| "jsDoc": "/**\n * An Element that provides a copy-to-clipboard button.\n *\n * @element fc-copy\n * @fires copy - copy event with the copied text\n */", | ||
| "attributes": [ | ||
| { | ||
| "name": "clipboard", | ||
| "description": "The text to copy", | ||
| "jsDoc": "/**\n * The text to copy\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| } | ||
| ], | ||
| "properties": [ | ||
| { | ||
| "name": "clipboard", | ||
| "description": "The text to copy", | ||
| "jsDoc": "/**\n * The text to copy\n * @type {String}\n * @attr\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "selection", | ||
| "jsDoc": "/**\n * @protected\n * @type {HTMLElement}\n * @prop\n */", | ||
| "type": "HTMLElement" | ||
| } | ||
| ], | ||
| "events": [ | ||
| { | ||
| "name": "copy", | ||
| "description": "copy event with the copied text" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "name": "fc-icon-button", | ||
@@ -375,4 +337,87 @@ "description": "Accessible icon button with discreet default styles\n\n## Usage\n\n```html\n<fc-icon-button icon=\"user\" label=\"Profile Page\"></fc-icon-button>\n```", | ||
| ] | ||
| }, | ||
| { | ||
| "name": "fc-speech", | ||
| "description": "An element by Forter\n\n## Usage\n\n```html\n <script>\n import '@forter/button';\n</script>\n\n<fc-speech></fc-speech>\n```", | ||
| "jsDoc": "/**\n * An element by Forter\n *\n * ## Usage\n *\n * ```html\n * <script>\n * import '@forter/button';\n * </script>\n *\n * <fc-speech></fc-speech>\n * ```\n * @element fc-speech\n * @fires result - the outcome of voice recording\n */", | ||
| "attributes": [ | ||
| { | ||
| "name": "completeTranscript", | ||
| "description": "The completed transcript", | ||
| "jsDoc": "/**\n * The completed transcript\n * @readonly\n * @type {String}\n * @prop\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "continuous", | ||
| "description": "If recording should be continuous", | ||
| "jsDoc": "/**\n * If recording should be continuous\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "interim-results", | ||
| "description": "If results should be streamed as they are produced", | ||
| "jsDoc": "/**\n * If results should be streamed as they are produced\n * @type {Boolean}\n * @attr interim-results\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "language", | ||
| "description": "The language to use when recognizing", | ||
| "jsDoc": "/** The language to use when recognizing */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "recognizing", | ||
| "description": "Whether the component is recognizing speech", | ||
| "jsDoc": "/** Whether the component is recognizing speech */", | ||
| "type": "any" | ||
| }, | ||
| { | ||
| "name": "transcript", | ||
| "type": "any" | ||
| } | ||
| ], | ||
| "properties": [ | ||
| { | ||
| "name": "completeTranscript", | ||
| "description": "The completed transcript", | ||
| "jsDoc": "/**\n * The completed transcript\n * @readonly\n * @type {String}\n * @prop\n */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "continuous", | ||
| "description": "If recording should be continuous", | ||
| "jsDoc": "/**\n * If recording should be continuous\n * @type {Boolean}\n * @attr\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "interimResults", | ||
| "description": "If results should be streamed as they are produced", | ||
| "jsDoc": "/**\n * If results should be streamed as they are produced\n * @type {Boolean}\n * @attr interim-results\n */", | ||
| "type": "boolean" | ||
| }, | ||
| { | ||
| "name": "language", | ||
| "description": "The language to use when recognizing", | ||
| "jsDoc": "/** The language to use when recognizing */", | ||
| "type": "string" | ||
| }, | ||
| { | ||
| "name": "recognizing", | ||
| "description": "Whether the component is recognizing speech", | ||
| "jsDoc": "/** Whether the component is recognizing speech */", | ||
| "type": "any" | ||
| }, | ||
| { | ||
| "name": "transcript", | ||
| "type": "any" | ||
| } | ||
| ], | ||
| "events": [ | ||
| { | ||
| "name": "result", | ||
| "description": "the outcome of voice recording" | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-18.94%
141480
- Number of package files
- decreased by-15.79%
64
- Lines of code
- decreased by-22.45%
2398
- Number of lines in readme file
- decreased by-47.64%
133
Dependency changes
Updated@forter/icon@^3.2.4