@ons/design-system 70.0.11 → 70.0.13

package/README.md

@@ -144,6 +144,42 @@ Generate a build into `./build`.
 yarn build
 ```
 
+## Manually publish to NPM
+
+Make sure you are logged into the CLI with the DS shared npm account
+
+Make sure dependencies are installed:
+
+```bash
+yarn install
+```
+
+Set the version (replacing "<DS release version>" with actual release version e.g. 70.0.0):
+
+```bash
+npm version <DS release version>
+```
+
+Create an NPM package by running:
+
+```bash
+yarn npm-bundle
+```
+
+**_Once you have published to npm, the version you have published can never be used again so you want to make sure you have the right files included to do this run:_**
+
+```bash
+npm pack
+```
+
+Then compare this list with the list of the current version here (https://www.npmjs.com/package/@ons/design-system?activeTab=code)
+
+If these match or have some expected changes then run this to publish:
+
+```bash
+npm publish --access public
+```
+
 ## Recommended Visual Studio Code Extensions for this project
 
 -   [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)

package/components/card/_macro.njk

@@ -2,7 +2,7 @@
     {% set headingLevel = params.headingLevel | default(2) | string %}
     {% set openingHeadingTag = "<h" + headingLevel %}
     {% set closingHeadingTag = "</h" + headingLevel + ">" %}
-    {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL) + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
+    {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
 
     <div class="ons-card">
         <a href="{{ params.url }}" class="ons-card__link">

package/components/hero/_macro.njk

@@ -21,7 +21,7 @@
 
                 {% if params.button %}
                     {% from "components/button/_macro.njk" import onsButton %}
-                    {% set btnClasses = params.button.classes if params.button.classes %}
+                    {% set btnClasses = params.button.classes if params.button.classes else '' %}
                     {% if params.variants and 'dark' in params.variants %}
                         {% set btnClasses = btnClasses + ' ons-btn--ghost' %}
                     {% endif %}

package/components/input/_macro.njk

@@ -103,7 +103,7 @@
                             aria-label="{{ abbr.title }}" role="figure"
                         {% endif %}
                         {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
-                        >{{ abbr.text }}
+                        >{{- abbr.text -}}
                         {{ endTag | safe }}
                     </span>
                 </span>

package/components/list/_list.scss

@@ -107,6 +107,12 @@
             @extend .ons-u-pb-s;
             @extend .ons-u-m-no;
         }
+        .ons-list__prefix,
+        .ons-list__suffix {
+            &--icon-check .ons-icon {
+                fill: var(--ons-color-leaf-green) !important;
+            }
+        }
     }
 }
 

package/components/list/_macro.njk

@@ -20,11 +20,17 @@
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
+
+    {% if listLength < 2 %}
+        {% set attributes = params.itemsList[0].attributes %}
+    {% else %}
+        {% set attributes = params.attributes %}
+    {% endif %}
     {% set openingTag = "<" + listEl %}
     {% set closingTag = "</" + listEl + ">" %}
 
     {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
-    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes or params.itemsList[0].attributes %}{% for attribute, value in (attributes.items() if attributes is mapping and attributes.items else attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
     {%- for item in params.itemsList -%}
         {% set sublistClasses = item.listClasses if item.listClasses %}
         {%
@@ -48,7 +54,10 @@
             {% endif %}
 
             {%- if item.prefix or (params.iconPosition == 'before') -%}
-                <span class="ons-list__prefix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                <span
+                    class="ons-list__prefix{{ ' ons-list__prefix--icon-check' if params.variants == 'summary' and itemIconType == 'check' }}"
+                    {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
+                >
                     {%- if item.prefix -%}
                         {{- item.prefix -}}.
                     {% elif params.iconPosition == 'before' %}
@@ -72,6 +81,7 @@
                         })
                     }}
                 {%- else -%}
+                    {# Remove setting attributes on link in future update #}
                     <a
                         href="{{ item.url }}"
                         class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
@@ -87,7 +97,10 @@
                 {{- itemText | safe -}}
             {%- endif -%}
             {%- if item.suffix or (params.iconPosition == 'after') -%}
-                <span class="ons-list__suffix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                <span
+                    class="ons-list__suffix{{ ' ons-list__suffix--icon-check' if params.variants == 'summary' and itemIconType == 'check' }}"
+                    {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
+                >
                     {%- if item.suffix -%}
                         {{- item.suffix -}}
                     {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
@@ -110,9 +123,11 @@
         {% endset %}
 
         {% if listLength > 1 or listEl == 'ul' %}
+            {# Remove if not item.url in future update #}
             <li
                 class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
                 {% if item.current %}aria-current="true"{% endif %}
+                {% if not item.url %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}{% endif %}
             >
                 {{- listItem | safe -}}
             </li>

package/components/list/_macro.spec.js

@@ -109,6 +109,32 @@ describe('macro: list', () => {
             expect($('.ons-list').hasClass('ons-list--icons')).toBe(true);
         });
 
+        it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is before', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    iconPosition: 'before',
+                    iconType: 'check',
+                    variants: 'summary',
+                }),
+            );
+
+            expect($('.ons-list__prefix').hasClass('ons-list__prefix--icon-check')).toBe(true);
+        });
+
+        it('has the correct icon class when variants is `summary`, `iconType` is `check` and `iconPosition` is `after`', () => {
+            const $ = cheerio.load(
+                renderComponent('list', {
+                    ...EXAMPLE_LIST_TEXT_ITEMS,
+                    iconPosition: 'after',
+                    iconType: 'check',
+                    variants: 'summary',
+                }),
+            );
+
+            expect($('.ons-list__suffix').hasClass('ons-list__suffix--icon-check')).toBe(true);
+        });
+
         it('renders a <ul> element by default', () => {
             const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));