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.

Components

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

Features

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!

• Facebook
• LinkedIn

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();"