Bring the Step Component to the Nuxt Library

[Duaner]

The Feature component is one of the basic component of a slicemachine library. It's pretty useful when you want to a grid of argument to present features.

Reference to vanilla JS code:

https://github.com/SaraSoueidan/prismic-slices/tree/master/src/components/tabs-steps

You can see in this folder different version of the component with small changes. We call those changes variations. You can see the different variations by browsing them in this website

https://prismic-sm.netlify.app/

Those variation are dependent on the value of the different fields in prismic.

Default

Vertical

You can have decent example on how to handle those variations and the validation in the Nuxt component that was implemented.

Component structure

You can use the folder structure of the Nuxt component as a reference for your slice

This folder should content:

• Your component code
• A README.md that you can copy
• A mock.json that you can copy for your test
  • A model.json that you can Copy and is the model of the prismic Slice (url)
• A preview.png that you can copy (url)
• An index.stories.js that we will generate

Dependency

To render richtText & the links you will need to use the prismic-reactjs dependency.

Model JSON of the Slice:

WIP

Customization options

CSS Variables :

To detail

Theme options :

To detail