Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
By Sarah Gooding - Dec 03, 2024
Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@justeat/f-content-cards
Advanced tools
f-content-cards
Content cards component
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:
<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
yarn
This package is a lerna monorepo that makes use of yarn workspaces.
yarn can be installed with the following curl script:
curl -o- -L https://yarnpkg.com/install.sh | bash
More information can be found at https://classic.yarnpkg.com/en/docs/install/#mac-stable
Usage
Installation
This package can be installed using npm or yarn:
# npm
$ npm i @justeat/f-content-cards
# yarn
$ yarn add @justeat/f-content-cards
Vue Applications
You can import it in your Vue SFC like this (please note that styles have to be imported separately):
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:
import '@justeat/f-content-cards/dist/f-content-cards.css';
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:
<!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.
brands
Type: array Required: false
List of brands for user's current postcode.
Only required when displaying Home Promotion Card 1 and 2
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-card-types
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.
locale
Type: string Required: true if vue-i18n plugin not used by consuming application
Locale in lang_COUNTRY format - e.g. en-GB
pushToDataLayer
Type: function Required: false
A callback for feeding back analytics regarding content cards to the consuming application
If no function is passed then this will be replaced with a noop function
testId
Type: string Required: false
Indicates the test id attribute of the component root element.
If this is missing or nully, all child components will also be rendered without test id attributes.
showLoadingState
Type: boolean Required: false
Whether or not to show a skeleton loading state whilst initialising Braze. Defaults to true.
For configurations where the enabled card types includes cards other than Post Order cards, the
number of loading state cards shown is limited to the lowest of either 3 or the limit set in
cardLimit
cardLimit
Type: number Required: false
Limit the amount of cards to show. Defaults to -1 which shows all cards.
Events
The following events can be emitted by the component, with the shape given:
@voucherCodeClick
{
"url": "http://example.org/test" // Forwarding Url for the card containing the voucher code that was clicked
}
@custom-cards-callback
Called with a function that can be used by the consuming code to inject custom content cards
@on-braze-init
Called with the appboy instance once appboy has initialised.
@get-card-count
Called with a number outlining the total card count once Appboy has initialised.
@has-loaded
Called with a boolean indicating that the component has initialised.
@on-error
Called with an Error object if appboy fails to initialise.
Development
Start by cloning the repository and installing the required dependencies:
$ git clone git@github.com:justeat/fozzie-components.git
$ cd fozzie-components
$ yarn
Change directory to the f-content-cards package:
$ cd packages/f-content-cards
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.
$ 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.
# cd to the storybook package
$ cd ../storybook
# Run storybook
$ yarn storybook:serve
This will build and serve storybook at http://localhost:6006.
Issues
Feel free to submit issues and enhancement requests.
Please use Fozzie Components Issues specific bugs and errors.
Contributing
- Optional: Fork the repo on github
- Clone the project to your own machine
- Create your own branch (This should follow the pattern component-name@version e.g. f-content-cards@1.0.0).
- Ensure you've bumped the package version and added a CHANGELOG entry.
- Push your work (Commit messages should follow the pattern component-name@version - commit description e.g. f-content-cards@1.0.0 - Update README)
- Submit a pull request
Versioning
Our versioning format is based on Keep a Changelog and this project adheres to Semantic Versioning.
For more information on versioning and previous examples please see the CHANGELOG.
Deployment
Once your change has been merged you must tag, push and deploy your changes using yarn publish or npm publish.
# 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 file for details.
Keywords
FAQs
Fozzie Content Cards
The npm package @justeat/f-content-cards receives a total of 9 weekly downloads. As such, @justeat/f-content-cards popularity was classified as not popular.
We found that @justeat/f-content-cards demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 29 open source maintainers collaborating on the project.
Package last updated on 30 Nov 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
By Socket Research Team - Dec 02, 2024
Security News
Research
Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
By Kirill Boychenko - Nov 27, 2024