SDC Components

This module adds a bunch of components that you can use with the Drupal Canvas module. They are based on the Bootstrap framework, so you need to have a theme that includes Bootstrap for these components to render and work well.

Most of the components can be animated by using the AOS (Animate On Scroll) library. This is all included: you only need to click on the desired animation icon to have your component animated, like fade in and move to the left, and you can select an animation speed.

It also improves the editor experience: Instead of selecting a button style from a dropdown in the component options where you dont quite know the effect until the button on the canvas is refreshed with the selected button style, you can see all possible button styles directly, visually instead of the old select element. Now you know how your button will look before you click on the desired button style. This is also done for the widgets for setting font size, text color, background color, alignment, aspect ratio, etc.
Some property select elements have been turned into a slider, like choosing a margin or padding, or selecting max and default zoom level on the map component.

These widget UX improvements were done by converting component field widgets from options_select into options_buttons. This renders them as radios. Now by adding specific (css) libraries to specific widgets, we can style those radios to improve the ux.

Installation

I recommend using canvas dev version and patch from #3591716 in your project. This is because there currently is a bug in the drupal canvas module that causes prop values to not properly be saved or loaded, causing an issue where changing one prop can lead to sudden changes in other props.
So for example add this to your composer patches section:

            "drupal/canvas": {
                "#3591716": "https://git.drupalcode.org/-/project/19391/uploads/5aa71dc6f06d20aa668e15d8d2c4e4b4/canvas-fix-checkbox-and-radios-default-values-3591716.patch"
            }

And use the canvas dev version:
composer require 'drupal/canvas:1.x-dev@dev'

Side note: please comment the simplest way to have canvas dev and 'build' it so you can use it to create and edit pages without having the intention to actually develop/change/improve the canvas module. For now, I use this command after installing canvas dev, which works for me:

npm --prefix web/modules/contrib/canvas install && \
npm --prefix web/modules/contrib/canvas run build --workspaces --if-present && \
drush cr

For installing this module:
composer require 'drupal/sdc_components:^1.0'

Enable the module:
drush en sdc_components

Probably not necessary, but I usually clear caches after installing a module:
drush cr

Now this module is enabled and you should be able to see and use all the components provided by this module in the canvas ui (when creating/editing a canvas page).

Last but not least: make sure to convert the necessary component property widgets to buttons and sliders using this command:
drush ev "\Drupal::service('sdc_components.componentservice')->convertWidgetsToRadios();"

Components

The components are organized into groups within the Canvas UI. Here is a list of the included components and the possible component settings.

Basic components

Button

Set text, url, target, button color/style, button size, add arrow inside, center, set margins, add animation, add extra classes

Heading

Set content, tag (h1, h2, etc), display size (larger text styles), url, color, icon before text, text alignment, margin, add animation, add extra classes

Horizontal line

Set full width or shoter line, line width, line color, add margin, add animation

Icon

Select (svg) icon from media library, select fill color, enter css color value for fill, set width, set height, add extra css styles, add margin, add animation, add extrsa classes

Image

Select image from media library, set fixed width, set aspect ratio, set fetch priority, set loading, set to cover parent, add popup to original when clicking it, add popup to a video when clicking it, add url, center align, add margins, add animation, add extra classes

Text

Set wysiwyg content, color, display size (larger text styles), text alignment, margin, add animation, add extra classes

Video

Select video from media library, set youtube url, set poster image, set aspect ratio, fit to available size, show controls, autoplay on load, autoplay when scrolled into view, muted, loop, add margins, add animation, add extra classes

Advanced components

Accordion

Simpler style option, set margins, add animation, add extra classes. Drag Accordion Items first, then drag desired content into the desired Accordion Items.

Alert

Set alert type/style, Include a title, set content, set icon, add close button, set margins, add animation, add extra classes.

Badge

Set content, color, shape, font size, add margins, add animation, add extra classes.

Card

Set image, title, content, url, button text, add arrow to button text, make entire card clickable, set direction to horizontal card, shrink and fit image, center text, set image position, border color, border width, background color, text color, border radius, add margins, add animation, add extra classes.

Carousel

Create a slider from any component type. Add controls, indicators, enable touch swiping, generate thumbnails (if images), set autoplay and interval, display up to 3 items at once, set custom prev/next icons, set svg fill color for those icons, add margins, add animation, add extra classes.

Collapsible text

Set title, collapsible content (wysiwyg), text color, display size (larger text styles), text alignment, add margins, add animation, add extra classes.

Hero

Large header sections with slots for additional content. Set background image, background position, background video from media library or youtube url, aspect ratio, url, add overlay, parallax effect, scroll down button, add margins, add animation, add extra classes.

Icon with text

Set (svg) icon, text, icon position (next to or above text), icon color, icon width, icon height, extra css style, border color, add margins, add animation, add extra classes.

Iframe

Set iframe src, title, width, height, add margins, add extra classes.

Image Gallery

Display a gallery of image thumbnails that open original in a modal when clicked. Add images, set thumbnail width, heigt and margin, loop, transition, display alt text as caption, add margins, add animation, add extra classes.

Image with text on top

Set image, drag any content component like header or text, add overlay, set url, add an arrow, disable hover effect, set aspect ratio, add margins, add animation, add extra classes.

Label with text

Handy for a list of specifications. Add horizontal line, set margins, add animation, add extra classes.

Map (Leaflet)

Set map position via latitude and longitude, set width, height, max zoom level, default zoom level, marker popup content, add margins, add animation, add extra classes.

Photosphere

For displaying 360 degree images. Select 360 image from media library, add margins, add animation, add extra classes.

Quote

Set quote text, source, source description, backgorund color, aspect ratio, add padding, add margins, add animation, add extra classes.

Review

Set review text, source, source description, stars out of 5, stars description, general background color, text ballon background color, star color, aspect ratio, add padding, add margins, add animation, add extra classes.

Layout

1 Column

2 Columns

3 Columns

4 Columns

Flexbox

Role Permission Content

This is a wrapper element where you can place any content into and select for which user roles this should be visible.

Tabs

Wrapper

Social Media Links

This is a general component where you can drag specific social media link components into, like Facebook or LinkedIn.
At this moment, those are the only 2 options that have been developed. Feel free to contribute on this!

General

Back to top

Set background color and arrow color, and make it float on the bottom right on the screen.

Company address

Select logo from media library, set logo width, add address text (wysiwyg).

Made by

Add a 'Made by xx' element. Set text, company name or logo (svg), logo position, logo color, logo width, logo height, url.

Navigation

Add existing menu

Enter the menu id (like 'main'), add optional title and title color, set color scheme (light or dark)

Anchor

Add an anchor anywhere on the page you can link or jump to.

Anchor link

Create a link to an anchor on the page

Anchor menu

Create a menu of anchor links

Navigation / Menu

Create a custom menu. Drag menu item components into it. Set item alignment, direction (horizontal or vertical), style, fill, add extra classes.

Navbar

Create a navigation bar that can have branding (logo), slogan, a menu, language switcher, etc. Set color scheme (light or dark), background color, breakpoint, placement (sticky, top or bottom), container, logo, logo width, slogan, add padding, add margins, add extra classes.

Additional Requirements

• Canvas module
• Bootstrap (5.3) based theme

Developer information

New twig function and filter

The module provides a custom Twig function: getSvg that will return the svg code of a given src. If src is not an svg but a regular image, then an < img > element will be returned.
The module also adds an custom Twig filter: addElementAttribute that you can use onto the getSvg so the svg or image element has the extra attributes. Example:
{{ getSvg(icon.src, icon.alt|default('Icon'))|addElementAttribute('width', '200px')|addElementAttribute('height', '50px') }}

Services

sdc_components.componentservice Provides utility logic for component configuration and management. For now it has the important convertWidgetsToRadios() function which will convert all our desired component prop select elements into radios elements.
This can manually be triggered by this command:
drush ev "\Drupal::service('sdc_components.componentservice')->convertWidgetsToRadios();"