@ons/design-system 70.0.11 → 70.0.12

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

@@ -22,7 +22,6 @@
     {% 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 %}>
     {%- for item in params.itemsList -%}
@@ -48,7 +47,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 params.iconType == 'check' }}"
+                    {% if listEl != 'ol' %}aria-hidden="true"{% endif %}
+                >
                     {%- if item.prefix -%}
                         {{- item.prefix -}}.
                     {% elif params.iconPosition == 'before' %}
@@ -87,7 +89,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 params.iconType == '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) -%}

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