@getchange/change-drop-in - npm Package Compare versions

Comparing version 0.2.0 to 1.0.0

package.json

 {
   "name": "@getchange/change-drop-in",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "UI element that lets users donate crypto",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -7,21 +7,60 @@ # change-drop-in
 
-### Usage
+### Quick Start
 
+Add the following code to your page.
+
 ```html
-<change-donation-form></change-donation-form>
+<change-donation-form
+  public-key="pk_live_d1acaf4c39ab38273133cb97649ddba0ecd5d76b81c8b1db7039f7ae937f9b33"
+  nonprofit-id="n_B7e7Xu5RFvYHGLHDCSMQ5Yck"
+></change-donation-form>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@getchange/change-drop-in@1/dist/change-donation-form.min.js"></script>
 ```
 
+You now have a donation form for Make-a-Wish 501(c)(3)!
+
+Change the nonprofit by setting the `nonprofit-id` attribute. To find nonprofit ids for over 200K nonprofits, sign up for free at https://api.getchange.io and navigate to the Nonprofits tab. This component will always be free.
+
+Once you've signed up, set the `public-key` to match your account. You can find your account's public key at https://api.getchange.io/developers.
+
 ### Styles
 
-| Attribute | Description |
-| --------- | ----------- |
+You can change the style of the donation form using CSS custom properties. For example:
+
+```html
+<change-donation-form
+  style="
+    --background-color-primary: green;
+    --color-primary: white;
+  "
+></change-donation-form>
+```
+
+#### All style properties
+
+| Property | Description |
+| -------- | ----------- |
 | --color | Text color |
 | --background-color | Component background |
-| --color-primary | Primary button and input color |
-| --color-disabled | Disabled button and input color |
-| --background-color-primary | Primary button background color |
-| --background-color-disabled | Disabled button and input background color |
+| --color-primary | Primary and selected button text color |
+| --color-disabled | Disabled button text color |
+| --background-color-primary | Primary and selected button background color |
+| --background-color-primary-hover | Hovered primary and selected button background color |
+| --background-color-disabled | Disabled button background color |
 | --input-border-color | Input border color |
-| --input-border-radius | Inpu border radius |
+| --input-border-radius | Input border radius |
+| --input-color | Input text color |
+| --input-background-color | Input background color |
+| --input-background-color-hover | Hovered input background color. Only applies to button inputs, not text inputs. |
+| --input-color-hover | Hovered input text color |
+| --input-placeholder-color | Input placeholder color |
 
-## &lt;change-drop-in&gt;
+Here's an example of the default look, alongside a fully customized version:
+
+Default                 |  Customized
+:----------------------:|:---------------------------:
+![](images/default.png) | ![](images/customized.png)
+
+## &lt;change-drop-in&gt;
+
+Documentation coming soon.

src/change-donation-form.ts

@@ -5,2 +5,4 @@ import { LitElement, html, css, svg } from "lit";
 
+interface Settings {}
+
 @customElement("change-donation-form")
@@ -20,2 +22,6 @@ export class ChangeDonationForm extends LitElement {
 
+  VERSION = "1.0.0";
+
+  settings = this.fetchSettings();
+
   render() {
@@ -87,2 +93,20 @@ return html`
 
+  firstUpdated() {
+    this.applySettings();
+  }
+
+  private async fetchSettings() {
+    return fetch(
+      `https://api.getchange.io/api/v1/drop_in/donation_form/settings?component_version=${this.VERSION}`
+    )
+      .then((response) => response.json() as Settings)
+      .catch(() => ({}));
+  }
+
+  private async applySettings() {
+    const settings = await this.settings;
+    // Version 1.0.0 does nothing with settings
+    settings;
+  }
+
   private coinbaseButtonText() {
@@ -161,6 +185,4 @@ switch (this.state) {
     :host {
-      display: block;
       --color: black;
       --background-color: #f7f9fa;
-      background-color: var(--background-color);
       --color-primary: white;
@@ -173,3 +195,11 @@ --color-disabled: #fff;
       --input-border-radius: 0.3em;
+      --input-color: black;
+      --input-background-color: white;
+      --input-background-color-hover: #f5f5f5;
+      --input-color-hover: #f7f7f7;
+      --input-placeholder-color: #999;
+      display: block;
       font-family: sans-serif;
+      background-color: var(--background-color);
+      max-width: 400px;
     }
@@ -182,3 +212,3 @@
       align-items: center;
-      padding: 1em;
+      padding: 1.5em;
     }
@@ -202,2 +232,9 @@ form > * {
     }
+    input {
+      color: var(--input-color);
+      background: var(--input-background-color);
+    }
+    input::placeholder {
+      color: var(--input-placeholder-color);
+    }
 
@@ -212,8 +249,9 @@ #amount-buttons {
       font-weight: bold;
-      background-color: white;
       border: 1px solid var(--input-border-color);
+      color: var(--input-color);
+      background: var(--input-background-color);
       border-right: none;
     }
     .amount-button:hover {
-      background-color: #f7f7f7;
+      background-color: var(--input-background-color-hover);
     }
@@ -227,3 +265,3 @@ .amount-button:first-of-type {
       border-bottom-right-radius: var(--input-border-radius);
-      border-right: 1px solid #ccc;
+      border-right: 1px solid var(--input-border-color);
     }
@@ -252,3 +290,3 @@ .amount-button.selected {
       align-items: center;
-      color: #aaa;
+      color: var(--input-placeholder-color);
     }
@@ -268,3 +306,3 @@
     input {
-      padding: 0.8em 0.6em;
+      padding: 0.8em 0.6em 0.8em 1em;
       border: 1px solid var(--input-border-color);
@@ -284,6 +322,10 @@ border-radius: var(--input-border-radius);
       background-color: rgba(255, 255, 255, 0.5);
-      color: #878787;
+      color: var(--color);
       font-size: 0.8em;
       padding: 1em;
+      margin-top: 0.5em;
     }
+    #powered-by-container span {
+      opacity: 0.5;
+    }
     #powered-by-container img {
@@ -326,6 +368,7 @@ height: 1em;
       border: none;
-      font-size: 1em;
     }
+    button,
     input {
       font-size: 1em;
+      font-family: inherit;
     }
@@ -332,0 +375,0 @@ * {

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

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

Major refactor

Supply chain risk

Package 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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39907

increased by7.59%

Lines of code

535

increased by7.43%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

65

increased by150%

Number of medium supply chain risk alerts

1

decreased by-50%

No dependency changes