New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@assecosolutions/fox-badge
Advanced tools
@assecosolutions/fox-badge - 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'; | ||
| declare global { | ||
@@ -7,5 +8,35 @@ interface HTMLElementTagNameMap { | ||
| } | ||
| /** | ||
| * | ||
| * FOX Badge | ||
| * | ||
| * @element fox-button | ||
| * | ||
| * @slot icon - Optional slot for custom icon e.g : if an event on icon needed | ||
| * @slot trailingIcon - Optional slot for custom trailingIcon e.g : if an event on icon needed | ||
| * | ||
| * @cssprop [--fox-badge-text-color=var(--fox-base-grey-100-color, #0f1310)] - Text color of a Badge | ||
| * @cssprop [--fox-badge-primary-color=var(--fox-base-grey-20-color, #f5f7f9)] - Background color of a Badge | ||
| * @cssprop [--fox-badge-icon-color=var(--fox-badge-text-color)] - Icon color of a Badge, default its the text color | ||
| * @cssprop [--fox-badge-outlined-color=var(--fox-base-grey-100-color, #0f1310)] - Text and border color of a Badge in outline state | ||
| * | ||
| * @cssprop [--fox-badge-border=none] - Default Badges dont have border, but it will be overwritten when outlined is set | ||
| * @cssprop [--fox-badge-font-weight=var(--fox-font-weight-semi-bold, 600)] - Font weight of a Badge | ||
| * @cssprop [--fox-badge-font-size=var(--fox-font-size-s, 12px)] - Font size of a Badge | ||
| * @cssprop [--fox-badge-border-radius=10rem] - Border radius of a Badge | ||
| * @cssprop [--fox-badge-height=20px] - Height of a Badge | ||
| * | ||
| */ | ||
| export declare class FoxBadge extends LitElement { | ||
| static styles: import("lit-element").CSSResult[]; | ||
| /** Creates an outlined badge */ | ||
| outlined: boolean; | ||
| /** When true, icon will be displayed after label. */ | ||
| trailingIcon: boolean; | ||
| /** Icon to display, and aria-label value when label is not defined. */ | ||
| icon: any; | ||
| /** Label to display for the button, and aria-label.*/ | ||
| label: any; | ||
| render(): import("lit-element").TemplateResult; | ||
| renderIcon(): import("lit-element").TemplateResult; | ||
| } |
| { | ||
| "name": "@assecosolutions/fox-badge", | ||
| "version": "0.0.1-alpha.7.0.11", | ||
| "public": true, | ||
| "lib": { | ||
| "entryFile": "index.ts" | ||
| }, | ||
| "version": "1.0.1-fox", | ||
| "publishConfig": { | ||
@@ -18,8 +14,9 @@ "registry": "https://registry.npmjs.org" | ||
| "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-icon": "^1.0.1-fox" | ||
| }, | ||
| "main": "./shared-ui-atoms-fox-badge.umd.js", | ||
| "module": "./shared-ui-atoms-fox-badge.esm.js", | ||
| "typings": "./index.d.ts" | ||
| } |
| # 🦊 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-badge | ||
| ``` | ||
| 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-badge'; | ||
| </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-badge>Well done!</fox-badge> | ||
| <fox-badge outline>Well done!</fox-badge> | ||
| ``` | ||
| ### Angular | ||
| ## Further Reading | ||
| 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. | ||
| 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) | ||
| ### Monorepo with Nx Workspace | ||
| ## Contribute | ||
| [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: | ||
| 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). | ||
| 1. **Increase Visibility** | ||
| ## Maintainer | ||
| - _In a nx workspace project a change of a library directly affectes all of its consumers_ | ||
| - _API contracts are clearly visible for all participants_ | ||
| |  |  | <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)) | | ||
| 2. **Reuse Code Directly** | ||
| - _No need for usage of npm link or additional build pipelines._ | ||
| 3. **Consistency of version Numbers** | ||
| - _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
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2441.28%
270062
- Lines of code
- increased by3255.37%
5939
- Number of lines in readme file
- increased by40%
49
Worsened metrics
- 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%
1
Dependency changes
+ Addedlit@^2.0.0-rc.2
+ Added@assecosolutions/fox-icon@1.13.0(transitive)
+ Added@lit-labs/ssr-dom-shim@1.3.0(transitive)
+ Added@lit/reactive-element@1.6.3(transitive)
+ Added@types/trusted-types@2.0.7(transitive)
+ Addedlit@2.8.0(transitive)
+ Addedlit-element@3.3.3(transitive)
+ Addedlit-html@2.8.0(transitive)
- Removedlit-element@^2.4.0
- Removedlit-html@^1.3.0
- Removedlit-element@2.5.1(transitive)
- Removedlit-html@1.4.1(transitive)