@biggive/components 0.0.4 → 0.0.7

package/dist/types/components/biggive-campaign-card/biggive-campaign-card.d.ts

@@ -3,54 +3,53 @@
  */
 export declare class BiggiveCampaignCard {
   /**
-   * @param {string} banner Full URL of a banner image.
+   * Full URL of a banner image.
    */
   banner: string;
   /**
-   * @param {string} number (Ceiling of) whole number of days until campaign end.
+   * (Ceiling of) whole number of days until campaign end.
    */
   daysRemaining: number;
   /**
-   * @param {number} totalFundsRaised Target for the campaign including matching but excluding any
-   *                                        tax relief, in major unit of currency e.g. pounds GBP.
+   * Target for the campaign including matching but excluding any
+   * tax relief, in major unit of currency e.g. pounds GBP.
    */
   target: number;
   /**
-   * @param {string} organisationName Display name of the charity or non-profit.
+   * Display name of the charity or non-profit.
    */
   organisationName: string;
   /**
-   * @param {string} organisationName Display name of the charity's specific time-bound fundraising campaign.
+   * Display name of the charity's specific time-bound fundraising campaign.
    */
   campaignTitle: string;
   /**
-   * @param {string} campaignType e.g. "Match Funded".
+   * e.g. "Match Funded".
    */
   campaignType: string;
   /**
-   * @param {string} beneficiaries Pipe (|) -separated list of full category labels.
+   * Array of full beneficiary labels.
    */
-  beneficiaries: string;
+  beneficiaries: string[];
   /**
-   * @param {string} categories Pipe (|) -separated list of full category labels.
+   * Array of full category labels.
    */
-  categories: string;
+  categories: string[];
   /**
-   * @param {number} totalFundsRaised Match funds not yet used or reserved, in major unit of currency
-   *                                        e.g. pounds GBP.
+   * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
    */
   matchFundsRemaining: number;
   /**
-   * @param {number} totalFundsRaised Total the campaign has raised so far including matching but excluding any
-   *                                  tax relief, in major unit of currency e.g. pounds GBP.
+   * Total the campaign has raised so far including matching but excluding any
+   * tax relief, in major unit of currency e.g. pounds GBP.
    */
   totalFundsRaised: number;
   /**
-   * @param {string} callToActionUrl Full URL of a call to action.
+   * Full URL of a call to action.
    */
   callToActionUrl: string;
   /**
-   * @param {string} callToActionLabel Text for the link to `callToActionUrl`.
+   * Text for the link to `callToActionUrl`.
    */
   callToActionLabel: string;
   private getBeneficiaryIcons;

package/dist/types/components.d.ts

@@ -8,51 +8,51 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 export namespace Components {
     interface BiggiveCampaignCard {
         /**
-          * @param banner Full URL of a banner image.
+          * Full URL of a banner image.
          */
         "banner": string;
         /**
-          * @param beneficiaries Pipe (|) -separated list of full category labels.
+          * Array of full beneficiary labels.
          */
-        "beneficiaries": string;
+        "beneficiaries": string[];
         /**
-          * @param callToActionLabel Text for the link to `callToActionUrl`.
+          * Text for the link to `callToActionUrl`.
          */
         "callToActionLabel": string;
         /**
-          * @param callToActionUrl Full URL of a call to action.
+          * Full URL of a call to action.
          */
         "callToActionUrl": string;
         /**
-          * @param organisationName Display name of the charity's specific time-bound fundraising campaign.
+          * Display name of the charity's specific time-bound fundraising campaign.
          */
         "campaignTitle": string;
         /**
-          * @param campaignType e.g. "Match Funded".
+          * e.g. "Match Funded".
          */
         "campaignType": string;
         /**
-          * @param categories Pipe (|) -separated list of full category labels.
+          * Array of full category labels.
          */
-        "categories": string;
+        "categories": string[];
         /**
-          * @param number (Ceiling of) whole number of days until campaign end.
+          * (Ceiling of) whole number of days until campaign end.
          */
         "daysRemaining": number;
         /**
-          * @param totalFundsRaised Match funds not yet used or reserved, in major unit of currency       e.g. pounds GBP.
+          * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
          */
         "matchFundsRemaining": number;
         /**
-          * @param organisationName Display name of the charity or non-profit.
+          * Display name of the charity or non-profit.
          */
         "organisationName": string;
         /**
-          * @param totalFundsRaised Target for the campaign including matching but excluding any       tax relief, in major unit of currency e.g. pounds GBP.
+          * Target for the campaign including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
          */
         "target": number;
         /**
-          * @param totalFundsRaised Total the campaign has raised so far including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
+          * Total the campaign has raised so far including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
          */
         "totalFundsRaised": number;
     }
@@ -89,51 +89,51 @@ declare global {
 declare namespace LocalJSX {
     interface BiggiveCampaignCard {
         /**
-          * @param banner Full URL of a banner image.
+          * Full URL of a banner image.
          */
         "banner"?: string;
         /**
-          * @param beneficiaries Pipe (|) -separated list of full category labels.
+          * Array of full beneficiary labels.
          */
-        "beneficiaries"?: string;
+        "beneficiaries"?: string[];
         /**
-          * @param callToActionLabel Text for the link to `callToActionUrl`.
+          * Text for the link to `callToActionUrl`.
          */
         "callToActionLabel"?: string;
         /**
-          * @param callToActionUrl Full URL of a call to action.
+          * Full URL of a call to action.
          */
         "callToActionUrl"?: string;
         /**
-          * @param organisationName Display name of the charity's specific time-bound fundraising campaign.
+          * Display name of the charity's specific time-bound fundraising campaign.
          */
         "campaignTitle"?: string;
         /**
-          * @param campaignType e.g. "Match Funded".
+          * e.g. "Match Funded".
          */
         "campaignType"?: string;
         /**
-          * @param categories Pipe (|) -separated list of full category labels.
+          * Array of full category labels.
          */
-        "categories"?: string;
+        "categories"?: string[];
         /**
-          * @param number (Ceiling of) whole number of days until campaign end.
+          * (Ceiling of) whole number of days until campaign end.
          */
         "daysRemaining"?: number;
         /**
-          * @param totalFundsRaised Match funds not yet used or reserved, in major unit of currency       e.g. pounds GBP.
+          * Match funds not yet used or reserved, in major unit of currency e.g. pounds GBP.
          */
         "matchFundsRemaining"?: number;
         /**
-          * @param organisationName Display name of the charity or non-profit.
+          * Display name of the charity or non-profit.
          */
         "organisationName"?: string;
         /**
-          * @param totalFundsRaised Target for the campaign including matching but excluding any       tax relief, in major unit of currency e.g. pounds GBP.
+          * Target for the campaign including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
          */
         "target"?: number;
         /**
-          * @param totalFundsRaised Total the campaign has raised so far including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
+          * Total the campaign has raised so far including matching but excluding any tax relief, in major unit of currency e.g. pounds GBP.
          */
         "totalFundsRaised"?: number;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biggive/components",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "Big Give Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -20,11 +20,11 @@
   ],
   "scripts": {
     "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve --port 3939",
+    "start": "stencil build --dev --watch --serve",
     "lint": "eslint src/**/*{.ts,.tsx}",
     "lint:fix": "eslint --fix src/**/*{.ts,.tsx}",
-    "test": "stencil test --spec --e2e --port 3939",
-    "test.watch": "stencil test --spec --e2e --watchAll --port 3939",
+    "test": "stencil test --spec --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",
     "prepare": "husky install",
     "pre-commit": "lint-staged"
@@ -39,6 +39,7 @@
   },
   "devDependencies": {
     "@stencil/eslint-plugin": "^0.4.0",
+    "@stencil/sass": "^1.5.2",
     "@types/jest": "^27.0.3",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

package/readme.md

@@ -22,6 +22,8 @@ npm install
 npm start
 ```
 
+## Development
+
 ### Follow Stencil + repository conventions
 
 CI runs lint checks, but there are tools to help you follow the expected code style so you don't have
@@ -37,6 +39,37 @@ Husky should also set you up a pre-commit hook that fixes anything it can automa
 about anything else. If you don't appear to have this and had already installed packages before this
 feature was set up, run `npm install` again.
 
+### Dependencies and build output
+
+Anything externally managed should be loaded with npm and no copies checked into this codebase. We can use Stencil `copy` tasks and target app build strategies to get things in the right place.
+
+Generated build outputs should similarly be `.gitignore`d.
+
+### Asset dependencies
+
+So far our strategy has been to avoid separate file assets where this is an out-the-box option, but
+to choose copying over more complex build time changes (e.g. base-64-inlining images) otherwise.
+This is to get the simplest working proof of concept up quickly and we may revisit it soon.
+
+For now:
+
+* FontAwesome uses pure SVGs and not fonts. This seems to work well and I suspect is the best option
+  for performance, component interoperability, simplicity and licence compliance.
+* The Euclid font is copied with a Stencil `copy` task and available in the dist output's
+  `assets/fonts`. An Angular app's build, for example, can then use the style with the following
+  addition to an `angular.json` `"styles"` key:
+  `"node_modules/@biggive/components/dist/biggive/assets/fonts/EuclidTriangle/stylesheet.css"`
+* Images are also copied with a Stencil `copy` task, and fixed references use getAssetPath() plus
+  an absolute path, e.g. `getAssetPath('/assets/images/banner.png')`. See the
+  [Stencil asset docs](https://stenciljs.com/docs/assets) for more on this. Angular seems to be
+  able to use this without `setAssetPath()` if we config its `"assets"` key to put files in the same
+  folder as the app's own images. This is the approach taken on [this proof of concept branch](https://github.com/thebiggive/donate-frontend/tree/COM-5-proof-of-concept).
+  Should we find managing image assets messy in apps generally, an alternative approach we might
+  try is importing images to component style and adding [`@rollup/plugin-image`](https://github.com/rollup/plugins/tree/master/packages/image/#readme)
+  to Stencil's build config. Or if there are only a few, we could also investigate
+  whether `assetsDirs` on a `@Component` folds in what's needed in a way that works
+  in Angular et al.
+
 ### Make any required changes to the sample web components
 
 The web components are configured in /src/components
@@ -105,7 +138,7 @@ These can be added to an HTML page with the following code:
   <biggive-grid>
 
     <biggive-campaign-card
-      banner="./assets/img/banner.png"
+      banner="/assets/images/banner.png"
       days-remaining={50}
       target={50000}
       organisation-name="Ardent Theatre Company"