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
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>
Slots
The ContentCards component makes heavy use of slots in order to surface different states of data retrieval
| Slot name | scoped data | Description |
|---|---|---|
loading | {} | The loading slot can be used by the consuming code to surface a loading state to the user before card data has been retrieved |
default | { cards } | The default slot is used to display the cards when they have been received from the cards source instance, or alternatively injected via the custom-cards prop. |
no-cards | {} | The no-cards slot can be used to surface a message to the user when no cards have been received from the cards source(s) |
error | {} | The error slot can be used by the consuming code to surface a message to the user when an error has been encountered upon initialising the cards source instance |
Configuration
The following props can be used to configure the component:
| Prop | Type | Required | Default | Description | Comment |
|---|---|---|---|---|---|
api-key | string | 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 | string | 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. |
custom-cards | array | false | - | Can be used to inject custom card data in the event that no data is received from braze. | |
pushToDataLayer | function | 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 |
locale | string | true if vue-i18n plugin not used by consuming application | 'en-GB | Locale in lang_COUNTRY format - e.g. en-GB | |
testId | string | false | null | 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. |
Events
The following events can be emitted by the component, with the shape given:
| Event | Description | Example Payload |
|---|---|---|
@voucher-code-click | Emitted when a voucher card contained within the component has been clicked | { "url": "http://example.org/test" } |
@on-metadata-init | Emitted with the cards source instance once it has initialised. | appboy |
@get-card-count | Emitted with a number outlining the total card count once Appboy has initialised. | 3 |
@has-loaded | Emitted with a boolean indicating that the component has initialised. | true |
@on-error | Emitted with an Error object if appboy fails to initialise. | { Error } |
Cards
The following 'cards' are given as named exports by this package, for use by consuming applications within the contained slots:
FirstTimeCustomerCardPromotionCardPostOrderCardSkeletonLoaderTermsAndConditionsCardVoucherCardHomePromotionCard1HomePromotionCard2GroupHeaderCardStampCard1
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 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 97 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 25 Mar 2021
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
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
Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
By Sarah Gooding - Nov 26, 2024