@mysugr/spring-forms
Advanced tools
@mysugr/spring-forms - npm Package Compare versions
Comparing version 0.0.6 to 0.3.1
| { | ||
| "version": "0.0.6", | ||
| "name": "@mysugr/spring-forms", | ||
| "description": "A collection of forms used for primary and secondary actions.", | ||
| "homepage": "https://spring.mysugr.com/", | ||
| "author": "mySugr", | ||
| "license": "", | ||
| "style": "build/build.css", | ||
| "sass": "index.scss", | ||
| "main": "build/index.js", | ||
| "spring": { | ||
| "category": "core", | ||
| "module_type": "components" | ||
| }, | ||
| "files": [ | ||
| "index.scss", | ||
| "lib", | ||
| "build" | ||
| ], | ||
| "repository": "", | ||
| "bugs": { | ||
| "url": "" | ||
| }, | ||
| "scripts": { | ||
| "build": "../../script/npm-run spring-module-build index.scss", | ||
| "prepare": "npm run build" | ||
| }, | ||
| "keywords": [ | ||
| "spring", | ||
| "css", | ||
| "styles", | ||
| "mysugr", | ||
| "design-system", | ||
| "style-guide", | ||
| "forms" | ||
| ], | ||
| "dependencies": { | ||
| "@mysugr/spring-utilities": "^0.0.5" | ||
| } | ||
| "description": "", | ||
| "author": "Florian Eckerstorfer <florian.eckerstorfer@mysugr.com>", | ||
| "homepage": "https://mysugr.com/", | ||
| "repository": "https://github.com/mysugr/spring/tree/master/%40mysugr/spring", | ||
| "license": "UNLICENSED", | ||
| "scripts": {}, | ||
| "version": "0.3.1", | ||
| "main": "index.js", | ||
| "gitHead": "9a2d457493faa79a1a7b280fd6c0bfa20488de26" | ||
| } |
103
README.md
@@ -1,102 +0,3 @@ | ||
| # Spring Forms | ||
| # DEPRECATED | ||
| #### Form typography | ||
| The headings are different than in on the landing page typography. ([Zeplin](https://zpl.io/bzMXx9M), [Dropbox](http://example.com/this-could-be-a-dropbox-link)) | ||
| ```html|white | ||
| <div class="ms-form"> | ||
| <div class="ms-form-item"> | ||
| <h2>Angebot freischalten</h2> | ||
| <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| #### Text input | ||
| Text input and on lose focus an error state. Also a simple example of using JavaScript packaged in the [spring-forms component](https://github.com/mysugr/spring/blob/master/%40mysugr/spring-forms/lib/js/form-validate.js) to validate the field when it loses focus. Select the field, tab to the next one and see the error state. ([Zeplin](https://zpl.io/bzMXx9M), [Dropbox](http://example.com/this-could-be-a-dropbox-link)) | ||
| ```html | ||
| <div class="ms-form"> | ||
| <div class="ms-form-item"> | ||
| <label for="insurance-number" class="control-label">Versicherungsnummer:</label> | ||
| <input type="text" id="insurance-number" value="" placeholder="KK-1234-1234" onblur="ms.textInputValidate(event);" onfocus="ms.textInputFocus(event);"> | ||
| <div class="error-message" id="insurance-number-error">Ungültige Versicherungsnummer</div> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| #### Select | ||
| Here's an example of a new select component styled without Bootstrap. ([Zeplin](https://zpl.io/bzMXx9M), [Dropbox](http://example.com/this-could-be-a-dropbox-link)) | ||
| ```html | ||
| <div class="ms-form"> | ||
| <div class="ms-form-item"> | ||
| <label for="edit-insurance" class="control-label">Deine Versicherung:</label> | ||
| <select required id="edit-insurance"> | ||
| <option disabled selected value>Versicherung</option> | ||
| <option value="gothaer">Gothaer</option> | ||
| <option value="barmenia">Barmenia</option> | ||
| <option value="vkb">VKB (Versicherungskammer Bayern)</option> | ||
| <option value="ukv">UKV (Union Krankenversicherung)</option> | ||
| <option value="other">Andere Versicherung</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| #### Form Buttons | ||
| Form buttons can be different than buttons on the main page (can they really? 🤔). ([Zeplin](https://zpl.io/bzMXx9M), [Dropbox](http://example.com/this-could-be-a-dropbox-link)) | ||
| ```html | ||
| <div class="ms-form"> | ||
| <div class="ms-form-item"> | ||
| <button type="submit" class="ms-btn" id="edit-submit"> | ||
| Los geht´s | ||
| </button> | ||
| <div class="small-print"> | ||
| Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist. | ||
| </small> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| #### Complete form | ||
| Here is an example of how you could compose several elements shown so far into a small, yet complete form. | ||
| ```html | ||
| <div class="ms-form"> | ||
| <div class="ms-form-item"> | ||
| <h2>Angebot freischalten</h2> | ||
| <p>mySugr kooperiert mit Versicherungen, die deine Kosten übernehmen.</p> | ||
| </div> | ||
| <div class="ms-form-item"> | ||
| <label for="edit-insurance" class="control-label">Deine Versicherung:</label> | ||
| <select required id="edit-insurance"> | ||
| <option disabled selected value>Versicherung</option> | ||
| <option value="gothaer">Gothaer</option> | ||
| <option value="barmenia">Barmenia</option> | ||
| <option value="vkb">VKB (Versicherungskammer Bayern)</option> | ||
| <option value="ukv">UKV (Union Krankenversicherung)</option> | ||
| <option value="other">Andere Versicherung</option> | ||
| </select> | ||
| </div> | ||
| <div class="ms-form-item"> | ||
| <label for="insurance-number2" class="control-label">Versicherungsnummer:</label> | ||
| <input type="text" id="insurance-number2" value="" placeholder="KK-1234-1234" onblur="ms.textInputValidate(event);" onfocus="ms.textInputFocus(event);"> | ||
| <div class="error-message" id="insurance-number2-error">Ungültige Versicherungsnummer</div> | ||
| </div> | ||
| <div class="ms-form-item"> | ||
| <button type="submit" class="ms-btn" id="edit-submit"> | ||
| Los geht´s | ||
| </button> | ||
| <div class="small-print"> | ||
| Sieh <u><a href="/de/unterstuetzte-smartphones">hier</a></u> ob dein Smartphone mit dem Accu-Chek<sup>®</sup> Guide kompatibel ist. | ||
| </small> | ||
| </div> | ||
| </div> | ||
| ``` | ||
| > See @mysugr/spring-core |
New alerts
New author
Supply chain riskA 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
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Fixed 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
Misc. License Issues
License(Experimental) A package's licensing information has fine-grained problems.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-100%
0
- Number of medium license alerts
- decreased by-50%
1
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-97.83%
507
- Number of package files
- decreased by-66.67%
3
- Lines of code
- decreased by-99.29%
1
- Number of lines in readme file
- decreased by-96.12%
4
- Number of medium supply chain risk alerts
- increased by100%
2
Dependency changes
- Removed@mysugr/spring-utilities@^0.0.5
- Removed@mysugr/spring-utilities@0.0.5(transitive)