@gp-australia-pacific/gpap-frontend-functions

Supporting frontend library functions for GPAP web infra.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@gp-australia-pacific/gpap-frontend-functions
001.1.8a year ago2 years agoMinified + gzip package size for @gp-australia-pacific/gpap-frontend-functions in KB

Readme

Helper functions & CSS

These get published to NPM and from there to places like UNPKG, e.g. at https://unpkg.com/browse/@gp-australia-pacific/gpap-frontend-functions/
Once on the CDN, can be added to webpages directly.
Add the latest version of the helper scripts & CSS (e.g. in the HTML head):
<script src="https://unpkg.com/@gp-australia-pacific/gpap-frontend-functions@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/@gp-australia-pacific/gpap-frontend-functions@latest/dist/gp-donate.css">

Examples

Disclaimer toggler

In the JavaScript:
var recurringId = 'donate-disclaimer-rg';
var oneOffId = 'donate-disclaimer-oo';
var newFreq = donations.getToggler(oneOffId, recurringId);

In the HTML below the donate form:
<div class="donate-disclaimer-container gp-text-slate">
  <p id="donate-disclaimer-oo" class="gp-hidden">
    Your generous one-time gift helps fund our campaigns for a better and greener future.
  </p>
  <p id="donate-disclaimer-rg" class="gp-hidden">
    Your account will be debited today, then every subsequent 4 weeks. <a href="https://www.greenpeace.org.au/contact/">Get in touch with us to</a> arrange an alternative date.
  </p>
</div>

Documentation

View API docs online or locally via yarn docs:serve.
Generate it:
yarn global add documentation
yarn docs:build
open docs/index.html

Publish it:
yarn docs:publish