{% set prefix = "c-bolt-" %}
{% set componentName = "background-shapes" %}
{% set baseClass = prefix ~ componentName %}

{% set classes = [
  baseClass
] %}

{% set colors = ["yellow", "orange", "teal", "blue"] %}

{% set shapeGroups = source("shape-groups.json") | json_decode %}

{# If a valid shapeGroup was specified, select its shapes.  Otherwise, get the shapes from the default shapeGroup. #}
{% set elements = attribute(shapeGroups, shapeGroup) ? attribute(shapeGroups, shapeGroup) : shapeGroups.A %}

<bolt-{{ componentName }} bolt-component>

  <div class="{{ "#{baseClass}" }}">
    <div class="{{ "#{baseClass}__shapes" }}">
      {% grid "o-bolt-grid--center o-bolt-grid--full" %}
        {% for element in  elements %}
          {% set attributes = create_attribute({}) %}

          {% set classes = [
            baseClass ~ "__shape",
            element.color in colors ? baseClass ~ "__shape--" ~ element.color,
            element.interiorColor in colors ? baseClass ~ "__shape--interior-" ~ element.interiorColor
          ] %}

          {% cell "u-bolt-width-1/3" %}
            <div {{ attributes.addClass(classes) }}>
              {{ source(element.shape ~ '.svg') }}
            </div>
          {% endcell %}
        {% endfor %}
      {% endgrid %}
    </div>
  </div>
</bolt-{{ componentName }}>

{% set prefix = "c-bolt-" %}
{% set componentName = "background-shapes" %}
{% set baseClass = prefix ~ componentName %}

{% set classes = [
  baseClass
] %}

{% set colors = ["yellow", "orange", "teal", "blue"] %}

{% set shapeGroups = source("shape-groups.json") | json_decode %}

{# If a valid shapeGroup was specified, select its shapes.  Otherwise, get the shapes from the default shapeGroup. #}
{% set elements = attribute(shapeGroups, shapeGroup) ? attribute(shapeGroups, shapeGroup) : shapeGroups.A %}

<bolt-{{ componentName }} bolt-component>

  <div class="{{ "#{baseClass}" }}">
    <div class="{{ "#{baseClass}__shapes" }}">
      {% grid "o-bolt-grid--center o-bolt-grid--full" %}
        {% for element in  elements %}
          {% set attributes = create_attribute({}) %}

          {% set classes = [
            baseClass ~ "__shape",
            element.color in colors ? baseClass ~ "__shape--" ~ element.color,
            element.interiorColor in colors ? baseClass ~ "__shape--interior-" ~ element.interiorColor
          ] %}

          {% cell "u-bolt-width-1/3" %}
            <div {{ attributes.addClass(classes) }}>
              {{ source('@bolt/' ~ element.shape ~ '.svg') }}
            </div>
          {% endcell %}
        {% endfor %}
      {% endgrid %}
    </div>
  </div>
</bolt-{{ componentName }}>

Add support for svgs with relative paths
BK-26: Add support for svgs with relative paths
