@assecosolutions/fox-button
Advanced tools
@assecosolutions/fox-button - npm Package Compare versions
Comparing version 0.0.1-alpha.7.0.11 to 1.0.1-fox
| import { LitElement } from 'lit-element'; | ||
| import '@assecosolutions/fox-icon'; | ||
| import '@assecosolutions/fox-progress'; | ||
| declare global { | ||
@@ -7,15 +9,34 @@ interface HTMLElementTagNameMap { | ||
| } | ||
| /** | ||
| * This is a Button | ||
| * | ||
| * @element fox-button | ||
| * | ||
| * @slot icon - For manuel icon placement if wanted | ||
| * @slot trailingIcon - For manuel trailingIcon placement if wanted | ||
| * | ||
| * @cssprop [--fox-button-font-weight=600] | ||
| * @cssprop [--fox-button-font-size=14px] | ||
| * @cssprop [--fox-button-font-family="Nunito, Roboto, sans-serif"] | ||
| * @cssprop [--fox-button-text-color-rgb="15, 19, 16"] | ||
| * @cssprop [--fox-button-primary-color-rgb="231, 236, 240"] | ||
| * @cssprop [--fox-button-text-on-primary-color-rgb="15, 19, 16"] | ||
| */ | ||
| export declare class FoxButton extends LitElement { | ||
| static styles: import("lit-element").CSSResult[]; | ||
| ghost: boolean; | ||
| small: boolean; | ||
| primary: boolean; | ||
| raised: boolean; | ||
| outlined: boolean; | ||
| disabled: boolean; | ||
| trailingIcon: boolean; | ||
| loading: boolean; | ||
| success: boolean; | ||
| fullwidth: boolean; | ||
| icon: string; | ||
| label: string; | ||
| buttonElement: HTMLButtonElement; | ||
| render(): import("lit-element").TemplateResult; | ||
| progress: boolean; | ||
| buttonElement: HTMLElement; | ||
| protected createRenderRoot(): ShadowRoot; | ||
| protected render(): import("lit-element").TemplateResult; | ||
| protected renderIcon(): import("lit-element").TemplateResult; | ||
| protected renderProgress(): import("lit-element").TemplateResult; | ||
| } |
| { | ||
| "name": "@assecosolutions/fox-button", | ||
| "version": "0.0.1-alpha.7.0.11", | ||
| "version": "1.0.1-fox", | ||
| "public": true, | ||
@@ -18,8 +18,14 @@ "lib": { | ||
| "license": "MIT", | ||
| "main": "index.ts", | ||
| "module": "index.ts", | ||
| "dependencies": { | ||
| "lit-element": "^2.4.0", | ||
| "lit-html": "^1.3.0" | ||
| "lit": "^2.0.0-rc.2", | ||
| "@assecosolutions/fox-progress": "^1.0.1-fox", | ||
| "@assecosolutions/fox-icon": "^1.0.1-fox" | ||
| }, | ||
| "main": "./shared-ui-atoms-fox-button.umd.js", | ||
| "module": "./shared-ui-atoms-fox-button.esm.js", | ||
| "typings": "./index.d.ts", | ||
| "peerDependencies": { | ||
| "@material/mwc-circular-progress": "^0.21.0", | ||
| "@material/mwc-linear-progress": "^0.21.0" | ||
| } | ||
| } |
| # 🦊 Fox - Future Open Experience | ||
| This webcomponent is made by 🦊🧙. | ||
| This monorepo is the home of all applications and libraries build by the 🦊 Fox team. | ||
| ## Installation | ||
| ## Tech Stack - From Web-Components to Dev-Containers | ||
| ```bash | ||
| npm i @assecosolutions/fox-button | ||
| ``` | ||
| In the following sections we describe our tech stack and how it all fits together. | ||
| ## Usage | ||
| ### Web-Components | ||
| ```html | ||
| <script type="module"> | ||
| import '@assecosolutions/fox-button'; | ||
| </script> | ||
| We are using [Lit-Element](https://github.com/Polymer/lit-element) and [Lit-HTML](https://github.com/Polymer/lit-html) | ||
| to write [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components). Web Components enables us to | ||
| ship cross browser compatible, framework / library independent and reusable custom elements. All of our web components | ||
| are used within our very own applications and are well tested. If you would like to use one of our components just add | ||
| it as follows e.g. `npm install @fox/button --save` or `yarn add @fox/button` and you are good to go. You can find an | ||
| overview of all our available components in our [Storybook](https://fox.assecosolutions.com/fox-web-components/?path=/story/atoms-foxbutton--default). | ||
| <fox-button>Klick me!</fox-button> | ||
| <fox-button label="Klick me!"></fox-button> | ||
| <fox-button tertiary label="Klick me!"></fox-button> | ||
| <fox-button outlined label="Klick me!"></fox-button> | ||
| ### Angular | ||
| State | ||
| <fox-button disabled label="Klick me!"></fox-button> | ||
| <fox-button small label="Klick me!"></fox-button> | ||
| As an engine for our applications and to bring our web components to life we decided to go for [Angular](https://angular.io/). | ||
| Angular is a web application framework / platfrom which is developed by google, and provides everything needed to build robust | ||
| enterprise web applications. | ||
| Icon | ||
| <fox-button label="Klick me!" icon="edit"></fox-button> | ||
| <fox-button label="Klick me!" icon="edit" trailingIcon="true"></fox-button> | ||
| ### Monorepo with Nx Workspace | ||
| Loading | ||
| <fox-button loading label="Klick me!"></fox-button> | ||
| <fox-button success label="Klick me!"></fox-button> | ||
| ``` | ||
| [Nx-Workspace](https://nx.dev/angular) and its sophisticated tools enables our team to manage the complexity of having all of our application components in one giant git repository. This approach, called monorepo, was inspired by google and comes with a lot of | ||
| advantages: | ||
| ## Further Reading | ||
| 1. **Increase Visibility** | ||
| Please, also check the documentations about the [API](https://github.com/assecosolutions/fox/blob/master/api/README.md) and our [client](https://github.com/assecosolutions/fox/blob/master/client/README.md) | ||
| - _In a nx workspace project a change of a library directly affectes all of its consumers_ | ||
| - _API contracts are clearly visible for all participants_ | ||
| ## Contribute | ||
| 2. **Reuse Code Directly** | ||
| If you would like to contribute please make sure that you have read our [development guidelines](https://github.com/assecosolutions/fox/blob/master/docs/3_DEV_GUIDELINES.md). | ||
| - _No need for usage of npm link or additional build pipelines._ | ||
| ## Maintainer | ||
| 3. **Consistency of version Numbers** | ||
| |  |  | <img src="https://avatars0.githubusercontent.com/u/17983201?s=100&v=3" width="100" alt="Julia Nissen" /> | | ||
| | :----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------: | | ||
| | Burak Topal ([@biggisb](https://github.com/Biggisb)) | Jari Möllenbernd ([@jarmee](https://github.com/jarmee)) | Julia Nissen ([@JuliaNssn](https://github.com/JuliaNssn)) | | ||
| - _One package.json for all your applications and libraries_ | ||
| Furthermore you can even build multi framework or fullstack applications side by side all in one nx-workspace. To get more insights on | ||
| nx-workspace please see the [documentation](https://nx.dev/latest/angular/getting-started/why-nx) of nrwl. | ||
| ### Dev-Container | ||
| To decrease time for dev machine setup to a minimum and to prevent complicated os specific installations we leverage [Docker](https://www.docker.com/) and [VS Code](https://code.visualstudio.com/) to make it a breeze to get your dev machine ready to code. Just install the | ||
| [Remote Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension for VS Code and you are ready to contribute to 🦊 Fox. For more information see the documentation about [Dev-Container](https://code.visualstudio.com/docs/remote/containers). |
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
Major refactor
Supply chain riskPackage 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
Uses eval
Supply chain riskPackage uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
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
Improved metrics
- Total package byte prevSize
- increased by985.94%
308842
- Lines of code
- increased by2070.03%
7096
Worsened metrics
- Dependency count
- increased by150%
5
- Number of package files
- decreased by-61.9%
8
- Number of low supply chain risk alerts
- increased byInfinity%
3
- Number of medium supply chain risk alerts
- increased byInfinity%
3
Dependency changes
+ Addedlit@^2.0.0-rc.2
+ Added@assecosolutions/fox-icon@1.12.0(transitive)
+ Added@assecosolutions/fox-progress@1.12.0(transitive)
+ Added@lit-labs/ssr-dom-shim@1.2.1(transitive)
+ Added@lit/reactive-element@1.6.3(transitive)
+ Added@material/mwc-base@0.21.00.26.1(transitive)
+ Added@material/mwc-circular-progress@0.21.00.26.1(transitive)
+ Added@material/mwc-linear-progress@0.21.00.26.1(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@2.4.03.3.3(transitive)
+ Addedlit-html@2.8.0(transitive)
+ Addedtslib@2.7.0(transitive)
- Removedlit-element@^2.4.0
- Removedlit-html@^1.3.0
- Removedlit-element@2.5.1(transitive)