Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@justeat/f-content-cards
Advanced tools
@justeat/f-content-cards - npm Package Compare versions
Comparing version 0.8.2 to 0.9.0
@@ -7,2 +7,10 @@ # Changelog | ||
| v0.9.0 | ||
| ------------------------------ | ||
| *July 2nd, 2020* | ||
| ### Changed | ||
| - README to include details on prerequisites, usage, development, testing and contributions | ||
| v0.8.2 | ||
@@ -9,0 +17,0 @@ ------------------------------ |
| { | ||
| "name": "@justeat/f-content-cards", | ||
| "description": "Fozzie Content Cards", | ||
| "version": "0.8.2", | ||
| "version": "0.9.0", | ||
| "main": "dist/f-content-cards.umd.min.js", | ||
@@ -6,0 +6,0 @@ "files": [ |
244
README.md
@@ -1,2 +0,1 @@ | ||
| <div align="center"> | ||
@@ -17,56 +16,233 @@ <h1>f-content-cards</h1> | ||
| ## Prerequisites | ||
| ### Appboy (Braze SDK) | ||
| This component requires Braze SDK credentials and an associated User ID to invoke calls to the Braze service. | ||
| If credentials are not provided the component will attempt to use any instances of appboy that have been initialised on `window.appboy`. | ||
| ### Vue | ||
| This component requires Vue to render. This can either be implemented as part of an existing Vue application or as a micro front-end. | ||
| If implementing Vue as part of a static application, we recommend using the following CDN: | ||
| ```html | ||
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> | ||
| ``` | ||
| > More information can be found at [https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include](https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include) | ||
| ### yarn | ||
| This package is a lerna monorepo that makes use of yarn workspaces. | ||
| yarn can be installed with the following curl script: | ||
| ```bash | ||
| curl -o- -L https://yarnpkg.com/install.sh | bash | ||
| ``` | ||
| > More information can be found at [https://classic.yarnpkg.com/en/docs/install/#mac-stable](https://classic.yarnpkg.com/en/docs/install/#mac-stable) | ||
| ## Usage | ||
| 1. Install the module using NPM or Yarn: | ||
| #### Installation | ||
| ```bash | ||
| yarn add @justeat/f-content-cards | ||
| ``` | ||
| This package can be installed using npm or yarn: | ||
| ```bash | ||
| npm install @justeat/f-content-cards | ||
| ``` | ||
| ```bash | ||
| # npm | ||
| $ npm i @justeat/f-content-cards | ||
| 2. Import the component | ||
| # yarn | ||
| $ yarn add @justeat/f-content-cards | ||
| ``` | ||
| You can import it in your Vue SFC like this (please note that styles have to be imported separately): | ||
| ### Vue Applications | ||
| ``` | ||
| import ContentCards from '@justeat/f-content-cards'; | ||
| import '@justeat/f-content-cards/dist/f-content-cards.css'; | ||
| You can import it in your Vue SFC like this (please note that styles have to be imported separately): | ||
| export default { | ||
| components: { | ||
| ContentCards | ||
| } | ||
| ```js | ||
| import ContentCards from '@justeat/f-content-cards'; | ||
| import '@justeat/f-content-cards/dist/f-content-cards.css'; | ||
| export default { | ||
| components: { | ||
| ContentCards | ||
| } | ||
| ``` | ||
| } | ||
| ``` | ||
| If you are using Webpack, you can import the component dynamically to separate the header bundle from the main `bundle.client.js`: | ||
| If you are using Webpack, you can import the component dynamically to separate the header bundle from the main `bundle.client.js`: | ||
| ``` | ||
| import '@justeat/f-content-cards/dist/f-content-cards.css'; | ||
| ``` | ||
| import '@justeat/f-content-cards/dist/f-content-cards.css'; | ||
| export default { | ||
| components: { | ||
| ... | ||
| ContentCards: () => import(/* webpackChunkName: "f-content-cards" */ '@justeat/f-content-cards') | ||
| } | ||
| export default { | ||
| components: { | ||
| ... | ||
| ContentCards: () => import(/* webpackChunkName: "f-content-cards" */ '@justeat/f-content-cards') | ||
| } | ||
| } | ||
| ``` | ||
| ``` | ||
| ### Non-Vue Applications | ||
| This module can be ran as a micro front-end for applications that don't make use of the Vue framework. | ||
| The following rudimentary example can be used as a guide for implementing this component in an existing static application: | ||
| ```html | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Content Cards Example</title> | ||
| <link rel="stylesheet" href="node_modules/@justeat/f-content-cards/dist/f-content-cards.css"> | ||
| </head> | ||
| <body> | ||
| <div data-content-card> | ||
| <content-cards /> | ||
| </div> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> | ||
| <script src="node_modules/@justeat/f-content-cards/dist/f-content-cards.umd.min.js"></script> | ||
| <script> | ||
| (function() { | ||
| if (typeof Vue === 'undefined') return null; | ||
| Vue.config.devtools = false; | ||
| Vue.config.productionTip = false; | ||
| return new Vue({ | ||
| el: '[data-content-card]', | ||
| }); | ||
| })() | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Configuration | ||
| The following props can be used to configure the component: | ||
| ### `api-key` | ||
| **Type:** string | ||
| **Required:** false | ||
| The Braze SDK api key. | ||
| > If no apiKey is provided the component will look for an existing appboy implementation at `window.appboy`. | ||
| ### `user-id` | ||
| **Type:** string | ||
| **Required:** false | ||
| The Braze User ID associated to the current authenticated user. | ||
| > If no userId is provided the component will look for an existing appboy implementation at `window.appboy`. | ||
| ### `enabled-content-cards` | ||
| **Type:** array | ||
| **Required:** false | ||
| An array of custom content card types to display. | ||
| > If no array is passed the component will default to showing all supported content card types. | ||
| ## Development | ||
| Running below `yarn` commands from the component folder, starts a development | ||
| server displaying a preview example of the component implementation. | ||
| Start by cloning the repository and installing the required dependencies: | ||
| ```bash | ||
| # cd /packages/f-content-cards | ||
| yarn install | ||
| $ git clone git@github.com:justeat/fozzie-components.git | ||
| $ cd fozzie-components | ||
| $ yarn | ||
| ``` | ||
| # followed by | ||
| yarn demo | ||
| Change directory to the `f-content-cards` package: | ||
| ```bash | ||
| $ cd packages/f-content-cards | ||
| ``` | ||
| ## Documentation to be completed once module is in stable state. | ||
| ### Running the demo | ||
| This package comes with a demo application which can be accessed as follows: | ||
| > Please ensure you are in the f-content-card directory as outlined in the above instructions. | ||
| ```sh | ||
| $ yarn demo | ||
| ``` | ||
| ### Running storybook | ||
| Storybook can be used to develop new and existing components. | ||
| To start storybook: | ||
| > Please ensure you are in the f-content-card directory as outlined in the above instructions. | ||
| ```bash | ||
| # cd to the storybook package | ||
| $ cd ../storybook | ||
| # Run storybook | ||
| $ yarn storybook:serve | ||
| ``` | ||
| This will build and serve storybook at [http://localhost:6006](http://localhost:6006). | ||
| ## Issues | ||
| Feel free to submit issues and enhancement requests. | ||
| Please use [Fozzie Components Issues](https://github.com/justeat/fozzie-components/issues) specific bugs and errors. | ||
| ## Contributing | ||
| 1. Optional: Fork the repo on github | ||
| 2. Clone the project to your own machine | ||
| 3. Create your own branch (This should follow the pattern *component-name@version* e.g. *f-content-cards@1.0.0*). | ||
| 4. Ensure you've bumped the package version and added a CHANGELOG entry. | ||
| 4. Push your work (Commit messages should follow the pattern *component-name@version - commit description* e.g. *f-content-cards@1.0.0 - Update README*) | ||
| 5. Submit a pull request | ||
| ### Versioning | ||
| Our versioning format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). | ||
| For more information on versioning and previous examples please see the [CHANGELOG](CHANGELOG.md). | ||
| ### Deployment | ||
| Once your change has been merged you must tag, push and deploy your changes using `yarn publish` or `npm publish`. | ||
| ```sh | ||
| # Checkout master | ||
| $ git checkout master | ||
| # Check your PR was the last commit | ||
| $ git log | ||
| # Add a tag (Replacing 0.0.0 with the version) | ||
| $ git tag f-content-card@0.0.0 | ||
| # Push tags | ||
| $ git push --tags | ||
| # Optional: cd to f-content-cards package | ||
| $ cd packages/f-content-cards | ||
| # Publish | ||
| $ yarn publish | ||
| ``` | ||
| ## License | ||
| This project is licensed under the Apache v2.0 License - see the [LICENSE](LICENSE) file for details. |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.19%
2633298
- Number of lines in readme file
- increased by244.44%
248
No dependency changes