Customize a Varbase Single Directory Components (SDC) In a Custom Theme

The components folder contains various Single Directory Components (SDC). To enhance the default components, Projects are using the components provided by Varbase Components module.

To replace any component from the Varbase Components module, follow the example below:

Example:

Suppose we have a custom style for the Alert component on our site, which differs from the default style. Here are the steps to implement the custom style:

Copy the Varbase Component to the Custom theme

Copy the alert folder from Varbase Components to your project's theme folder:

cd PATH_TO_THE_PROJECT/docroot
cp -r modules/contrib/varbase_components/components/molecules/alert themes/custom/PROJECT_THEME/components/molecules/alert

Add replaces to the Copied Component

Edit the alert.component.yml file in your PROJECT_THEME folder.

Add the following line after name: Alert in the YAML file:

replaces: 'varbase_components:alert'

The updated alert.component.yml should look like this:

name: Alert
replaces: 'varbase_components:alert'

Add the Custom SCSS files to the Webpack Config for Components

Uncomment the following line in the PROJECT_THEME/webpack.config.components.js file:

    './components/molecules/alert/alert': ['./components/molecules/alert/alert.scss'],

Note: As a custom theme, Developers and themers have the authority to modify any part of the "status-messages.html.twig" template file, which is the default system template in Drupal.

You can also make changes to the SASS, TWIG, and JavaScript files in the components/molecules/alert folder.

Compile `SASS` to `CSS` files for components

yarn components:build

These steps will allow you to incorporate your custom style for the Alert component, using the Varbase Components module as a base.

Change the SDC Component to Customize

Add JS file, or more JS files to dependencies
Add more SCSS/CSS files
Change the custom component twig template

Defining Schemas for SDC Component Metadata

Following with Draft 4 of JSON Schema, which is a declarative language that allows you to annotate and validate JSON documents.

The draft has been seamlessly integrated with YAML in SDC Components within the Drupal core. This integration now serves as the backbone for all front-end and web components, providing a unified and efficient system.

Required in modules
Optional in themes (file presence needed)

Add the Schema Metadata

$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json

In all SDC components in Varbase Components or custom myproject_components module.

To follow with metadata.schema.json selected by Drupal Core team https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json

The will read the schema file to understand the syntax for fixes and enable autocomplete.

Drafts of JSON Schema

Front End frameworks are using a selected draft to create their custom schema metadata for components.

http://json-schema.org/draft-01/schema# http://json-schema.org/draft-02/schema# http://json-schema.org/draft-03/schema# http://json-schema.org/draft-04/schema# ( Used by Drupal core SDC module) http://json-schema.org/draft-05/schema# http://json-schema.org/draft-06/schema# http://json-schema.org/draft-07/schema#

Storybook JSON Schema Addon to integrate with that

Integration of Varbase with Storybook

Options to custom

Clone the custom card component, which is targeted for a selected content type, and have the custom changes for with styles(css) and scripts(js), or even with custom props and slots.
Switch to use the starterkit/recipes for the provided Varbase Cards from Varbase Components directly from the display mode for an entity.
Clone the Varbase Card component and customize it in a custom theme

Proof of Concept: Custom Varbase Blog Card Components

While Varbase Blog will retain the use of the standard Varbase Card Components, This is an proof of concept example with a selection of custom components.

Varbase Blog serves as an exemplary model for understanding how to effectively manage various elements such as Content types, View modes, Layout Libraries, Views, site section pages, categories, and tags using the comprehensive range of "assembled" Varbase Components, modules, and "Starterkit/Recipes" configs.

Offering an Example Avenue

Explore customizing card components for specific content types. Our present example revolves around the Varbase Blog content type.

varbase-blog-card-impressed-medium.zip
varbase-blog-card-featured-small.zip
varbase-blog-card-featured-xsmall.zip
varbase-blog-card-text-small.zip

You're welcome to download the components and tailor them according to your chosen view mode and content type's requirements.

Make the transition from the inline CSS class placement method for UI patterns to using custom Card components. Additionally, enhance organization and readability by integrating Custom Cards as stories within Varbase Storybook.

Example: Use the General Cards/Teasers

view modes for your site, and if necessary, you can utilize or clone the Varbase Cards Starterkit/Recipe.

Incorporate custom Card components when working with specific Content types like the Varbase Blog
This approach streamlines the development workflow, enabling smooth collaboration between Design, Storybook, Front-End development with SDC components and stories, and the mapping process in the theme. The Back-end team can also effortlessly integrate components into the site structure.
The Site builder gains the flexibility to associate SDC components with both UI Pattern and SDC Display, ensuring a cohesive and efficient implementation.

Field mapping with Components

Can be managed in number of approaches

Example first approach: Use the SDC Display module. Select a component for a field display from the UI, and map values to props and slots. Example second approach: Create a card-text-body-field component and use the component with the twig template in Vartheme BS5 suggestion for the field body.

( Building the list of components for fields can be now in projects or products ) Then later SDC Display can map them from the UI.

Example: Impressed Card as a View Mode for a Content Type

Example: Impressed Card with style size of medium, card border, Equal height, Anchoring all the card, media position to the top, and passing an extra Bootstrap ~5.3.0 utility classes for light background and large shadow over the used card
The component files are in ( varbase-blog-card-impressed-medium.zip )
Which only has the following in varbase-blog-card-impressed-medium.twig file:
{% include 'varbase_components:card-impressed' with {
  style_size: 'medium',
  card_border: true,
  equal_height: true,
  anchor_all: true,
  media_position: 'top',
  utility_classes: ['bg-light', 'shadow-lg'],
  media_utility_classes: [],
  content_utility_classes: [],
  media: media,
  content: content,
} only %}

The equivalent in Storybook using the custom Varbase Impressed Card -medium

Which is the equivalent of using the default Impressed Card - medium - with Read more story with the default standard Impressed Card in the storybook - but without the light background and no shadows.

More Info and FAQ about SDC

SDC Examples

SDC Examples module

Component Libraries: Components Examples

Have a look at the code and README.md for list of props, slots, and example how to use.

Varbase Components module

Button , Close Button, Badge, Alert, Progress Bar ...

PreviousIntegration of Varbase with Storybook NextLocal Tasks and Moderation Sidebar

Last updated 6 months ago