Bring the Feature 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/features

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 variations

With Button

With Icons

With Icons & Button

Full cards

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

https://github.com/prismicio/vue-essential-slices/tree/master/src/slices/AlternateGrid

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-vue dependency.

Model JSON of the Slice:

"FeatureGrid": {
            "type": "Slice",
            "fieldset": "Feature Grid component",
            "description": "A predesigned Grid of argument",
            "icon": "filter_list",
            "display": "list",
            "non-repeat": {
              "eyebrow_headline": {
                "type": "StructuredText",
                "config": {
                  "multi": "paragraph, preformatted, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "allowTargetBlank": true,
                  "label": "Eyebrow headline"
                }
              },
              "title": {
                "type": "StructuredText",
                "config": {
                  "single": "heading1, heading2, heading3, heading4, heading5, heading6",
                  "label": "title"
                }
              }
            },
            "repeat": {
              "optional_icon": {
                "type": "Image",
                "config": {
                  "constraint": {},
                  "thumbnails": [],
                  "label": "Optional Icon"
                }
              },
              "title": {
                "type": "StructuredText",
                "config": {
                  "single": "heading3",
                  "label": "title"
                }
              },
              "description": {
                "type": "StructuredText",
                "config": {
                  "multi": "paragraph, preformatted, strong, em, hyperlink, image, embed, list-item, o-list-item, o-list-item",
                  "allowTargetBlank": true,
                  "label": "description"
                }
              },
              "optional_link": {
                "type": "Link",
                "config": {
                  "label": "Optional Link"
                }
              },
              "button_label": {
                "type": "StructuredText",
                "config": {
                  "multi": "paragraph",
                  "label": "Button label"
                }
              }
            }
          },

Customization options

CSS Variables :

To detail

Theme options :

To detail