Styles Variations

[00:00] A question you might ask yourself as a developer is "What constitutes a new variation?". One good rule is that a variation should be created when there's a general change of structure that you might want to show to your content authors using the screenshot of the Slice.

[00:13] So for our final variation, for the 'Split Image Text' Slice, we want to recreate the Hero component and enforce some of the styling changes for that component. We'll have to make some structural changes to do that.

[00:25] Let me show you what I mean. When you look at the settings for the text field that is used in all the other variations, all the text formatting options are available for the Hero slice. This isn't what we want. We want there to always be a h1 title and a paragraph. So to enforce this, we can specify these fields to only have those formatting options, but we'll need two fields for that.

[00:48] So create a new variation called 'Hero Section' duplicated from 'Split Buttons right'. Delete the text field and add a new Rich Text field called 'Title'. Click the pencil icon to edit the settings and unselect all formatting options except the h1 tag.

[01:04] Next, add another Rich Text field called 'Paragraph'. Click the pencil icon to edit the settings and unselect all formatting options. Except the P tag and some basics like bold, italics, and links. Copy the code for these two Rich Text fields and add them to the component file.

[01:28] Now in the component code, add a conditional to show the two fields for the 'Hero Section' variation and the single text field for every other variation.

{["heroSection"].includes(slice.variation) ?
  <>
    <PrismicRichText field={slice.primary.title} />
    <PrismicRichText field={slice.primary.paragraph} />
  </> :
  <PrismicRichText field={slice.primary.text} />
}

[01:53] Let's ensure extra parting for this Hero Section by conditionally updating the styling.

<div className={`${slice.variation === "heroSection" ? 'pt-12 pb-24' : ''} flex justify-center items-center w-screen bg-greenGrey`}>

[02:15] Also, update the includes array for the button to include the Hero Section variation.

["splitButtonLeft", "splitButtonRight", "heroSection"]

[02:20] Then save your work to the file system.

[02:30] So what about the options that don't affect the structure? Well, for those you use the dropdown field.

[02:36] For example, we saw on the original website that all the sections had different background colors. If we want to give Mr. McDonald the power to control that, we can create a select field called 'Background Color', which contains the values 'Grey' and 'Green'. We could provide the respective Tailwind classes as values here, but this makes for a better authoring experience. As Mr. McDonald doesn't know. Tailwind, open the settings for the field and add these values.

[03:06] In your Slice component. Add a variable that will contain the respective Tailwind classes for the background colors. You can update this variable later. If you want to add more colors.

const backgroundColor = {
  Grey: 'bg-grey',
  Green: 'bg-greenGrey',
}

[03:20] Then do a conditional on the select field value and output the relative Tailwind classes based on this. We also set the default background color as bg-grey. If nothing is selected:

<div className={`${slice.variation === "heroSection" ? 'pt-12 pb-24' : ''} flex justify-center items-center w-screen ${slice.primary.background_color ? backgroundColor[slice.primary.background_color] : backgroundColor.Grey}`}>

[03:37] Easy as pie. So because that's not a big change that will affect the previous screenshot, there's no need for a new variation. Yet the changes are still easy to manage for everyone. Just remember to add the dropdown to all of your variations and Slices. You can adjust the order of these fields so the dropdown appears at the top of the Slice.

[03:55] Another use case to use a select dropdown would be if we want to give our content authors the option to change the text alignment in the CSS of the Text Slice. So navigate to the Slice in Slice Machine. Create a select field called 'Text Align', which contains strings that reflect the Tailwind classes, 'text-center' and 'text-left'.

[04:15] Then add this to the 'Text Slice' code as so:

<div className={`py-24 gap-16 inline-flex flex-col items-center w-screen bg-greenGrey ${slice.primary.text_align || 'text-center'}`}>

[04:32] Now look at you, you've gone and saved all those lives of code and become an efficient Slice creator. You're almost an expert. I can feel it.

[04:40] Connect this Slice to your homepage type and save your changes.