fix: Fix markup when Javascript is turned off

boltdesignsystem · Nov 21, 2018 · 535ee9c · 535ee9c
1 parent 33c5138
commit 535ee9c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 26 deletions.
diff --git a/packages/components/bolt-list/index.scss b/packages/components/bolt-list/index.scss
@@ -1,2 +1,3 @@
 @import '@bolt/core';
 @import 'src/list.scss';
+@import 'src/_list-item.scss';
diff --git a/packages/components/bolt-list/src/_list-item.js b/packages/components/bolt-list/src/_list-item.js
@@ -32,9 +32,10 @@ class BoltListItem extends withContext(withLitHtml()) {
 
     const classes = cx('c-bolt-list-item', {
       [`c-bolt-list-item--display-${display}`]: display,
-      [`c-bolt-list-item--spacing-${spacing}`]: spacing,
+      [`c-bolt-list-item--spacing-${spacing}`]: spacing !== 'none',
+      [`c-bolt-list-item--separator-${separator}`]: separator !== 'none',
+      [`c-bolt-list-item--last-item`]: last,
       [`c-bolt-list-item--inset`]: inset,
-      [`c-bolt-list-item--separator-${separator}`]: separator && !last,
     });
 
     return html`

diff --git a/packages/components/bolt-list/src/_list-item.scss b/packages/components/bolt-list/src/_list-item.scss
@@ -44,13 +44,17 @@ $bolt-list-separator-styles: solid, dashed;
 }
 
 [class*='c-bolt-list-item--separator'] {
-  &:not(c-bolt-list-item--separator-none) {
+  &:not(.c-bolt-list-item--separator-none) {
     &.c-bolt-list-item--display-block {
-      border-bottom-width: 1px;
+      &:not(.c-bolt-list-item--last-item) {
+        border-bottom-width: 1px;
+      }
     }
 
     &.c-bolt-list-item--display-inline {
-      border-right-width: 1px;
+      &:not(.c-bolt-list-item--last-item) {
+        border-right-width: 1px;
+      }
     }
 
     @each $breakpoint in $bolt-breakpoints {

diff --git a/packages/components/bolt-list/src/list.js b/packages/components/bolt-list/src/list.js
@@ -98,21 +98,6 @@ class BoltList extends withContext(withLitHtml()) {
       [`c-bolt-list--inset`]: inset,
     });
 
-    if (this.slots.default) {
-      const updatedDefaultSlot = [];
-
-      this.slots.default.forEach(item => {
-        if (item.tagName) {
-          updatedDefaultSlot.push(item);
-        }
-      });
-
-      updatedDefaultSlot[updatedDefaultSlot.length - 1].setAttribute(
-        'last',
-        '',
-      );
-    }
-
     let renderedList;
 
     switch (tag) {

diff --git a/packages/components/bolt-list/src/list.twig b/packages/components/bolt-list/src/list.twig
@@ -6,8 +6,10 @@
 
 {# Variables #}
 {% set base_class = "c-bolt-list" %}
+{% set base_item_class = "c-bolt-list-item" %}
 {% set attributes = create_attribute(attributes|default({})) %}
 {% set inner_attributes = create_attribute({}) %}
+{% set item_attributes = create_attribute({}) %}
 
 {# Set up checks to validate that the component's prop values are allowed, based on the component's schema. #}
 {% set tag_options = schema.properties.tag.enum %}
@@ -26,6 +28,13 @@
 {% set valign = valign in valign_options ? valign : schema.properties.valign.default %}
 {% set inset = inset is sameas(true) or inset is sameas(false) ? inset : schema.properties.inset.default %}
 
+{# Conditions for the semantic tag usage #}
+{% if tag == "div" or tag == "span" %}
+  {% set item_tag = "span" %}
+{% else %}
+  {% set item_tag = "li" %}
+{% endif %}
+
 {# List component's custom element wrapper. #}
 <bolt-list
   {% if tag %} tag="{{ tag }}" {% endif %}
@@ -54,12 +63,29 @@
   <remove-html-tag>
     <{{ tag }} {{ inner_attributes.addClass(classes) }}>
       {% for item in items %}
-        <bolt-list-item>
-          {% if item is iterable %}
-            {{ item.content | join }}
-          {% else %}
-            {{ item }}
-          {% endif %}
+
+        {% set last = loop.last %}
+        {% set item_classes = [
+          base_item_class,
+          display in display_options ? "#{base_item_class}--display-#{display}" : "",
+          spacing in spacing_options ? "#{base_item_class}--spacing-#{spacing}" : "",
+          separator in separator_options ? "#{base_item_class}--separator-#{separator}" : "",
+          last ? "#{base_item_class}--last-item",
+          inset ? "#{base_item_class}--inset",
+        ] %}
+
+        <bolt-list-item
+          {% if last %} last {% endif %}
+        >
+          <remove-html-tag>
+            <{{ item_tag }} {{ item_attributes.addClass(item_classes) }}>
+              {% if item is iterable %}
+                {{ item.content | join }}
+              {% else %}
+                {{ item }}
+              {% endif %}
+            </{{ item_tag }}>
+          </remove-html-tag>
         </bolt-list-item>
       {% endfor %}
     </{{ tag }}>