This package provides placeholder texts and images.
The file solid-faker
provides a class with several utility functions for generating random / pseudo-random Lorem Ipsum style texts.
// Import the SolidFaker class
import SolidFaker from '@solid-design-system/placeholders';
// Create an instance with an optional seed value as the only argument
const faker = new SolidFaker(123);
// Generate 5 random words (all lowercase)
console.log(faker.words(5));
// Generate 5 random words with first word capitalized
console.log(faker.words(5, 1));
// Generate 5 random words with all words capitalized
console.log(faker.words(5, 2));
// Generate 3 random sentences
console.log(faker.sentences(3));
// Generate 2 random paragraphs
console.log(faker.paragraphs(2));
The src/images
folder contains placeholder images for all projects at Union Investment.
You can find their respective photographer and source below:
- Architecture - Lance Anderson
- Coins - Towfiqu barbhuiya
- Coffeeshop - Brooke Cagle
- Collaboration - Austin Distel
- Family - Nathan Dumlao
- Friends - Chewy
- Skyline - Tobias Reich
- Workspace - Dan Dimmock
The src/videos
folder contains placeholder videos for all projects at Union Investment.
You can find their respective videographer and source below:
npm i @solid-design-system/placeholders
To integrate the images in this package into your Storybook you need to add the following lines of code to the Storybook main.js
file:
staticDirs: [
{
from: '../node_modules/@solid-design-system/placeholders/src/images',
to: '/placeholders/images',
},
{
from: '../node_modules/@solid-design-system/placeholders/src/videos',
to: '/placeholders/videos',
},
],
After adding this package to the staticDirs
of your Storybook the src/images
folder will be included in your storybook
build folder under the subfolder storybook/placeholders/images
.
To reference a image in your story you can follow this example:
'./placeholders/images/collaboration.jpg';