Fixes #77: Description list missing vertical line when logged in

[mpbixal]

I'm kind of torn on the implementation here, because it took some extra scaffolding but I think it's pretty clean. Instead of adding an extra wrapper around the description list image, I merged the 2 elements. This was required because the outer one added a position relative (for the vertical line) and the inner one (in Drupal) added contextual region class (for Drupal contextual edit links) which also added a position relative. Since they were nested position relatives, the outer one did not work (the vertical line). Now the vertical line class and contextual region class are in the same wrapper (a

in this case).

Also, I've re-implemented description list collection so it can easily be used in Drupal. Basic gist is that:

• SB components should extend a 'base' template.
• The components should use 'set var' for any dynamic content
• The 'base' templates will use those 'set vars'.
• SB will use the component
• Drupal will use only the base component, Drupal will use it's templates (like paragraph templates) to set the vars instead of the SB components.

I've also added another paradigm where components that require a wrapper should be implemented like:

{% if attributes is empty %}
  {% set attributes = create_attribute() %}
{% endif %}

{% set classes = [
  'bix-description-list',
  'bix-description-list--' ~ variant | clean_class,
] %}

<dl{{ attributes.addClass(classes).addClass(additional_classes) }}>

In this way:

• both SB and Drupal can take advantage of the attributes var that Drupal already uses
• SB will define classes that will always wrap a component, then both SB or Drupal can pass the var additional_classes to add more to a wrapper.

Why would Drupal need to add it's own attributes? Because of the extra functionality in Drupal, like contextual edit links. This will allow them to automatically flow into the wrappers of components when they hit Drupal.

[mpbixal]

The only change in this that changes the dom in SB is the use of media-image.html.twig partial. It uses a

wrapper so that you don't need to add an additional wrapper around image. Instead, just pass additional_classes to add more classes to an image. I also change the SB scss so that figure tags have no padding or margin. The rest is just the implementation in Drupal.