@ons/design-system 70.0.10 → 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/address-output/example-address-output.njk

@@ -0,0 +1,11 @@
+{% from "components/address-output/_macro.njk" import onsAddressOutput %}
+{{
+    onsAddressOutput({
+        "unit": 'Unit 5',
+        "organisation": 'Trescos',
+        "line1": 'Abingdon Road',
+        "line2": 'Goathill',
+        "town": 'Barry',
+        "postcode": 'AB12 6UH'
+    })
+}}

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/document-list/{document-list.scss → _document-list.scss}

@@ -113,7 +113,7 @@
 
     &__item-image--file & {
         &__image-link {
-            border-color: var(--ons-color-borders-document-image);
+            border-color: var(--ons-color-borders);
 
             &--placeholder {
                 height: 136px;
@@ -128,16 +128,16 @@
         width: 100%;
 
         &:focus {
-            background-color: var(--ons-color-image-placeholder) !important;
+            background-color: var(--ons-color-placeholder) !important;
             border: 2px solid var(--ons-color-borders-document-image-focus);
             box-shadow: none;
             outline: 4px solid var(--ons-color-focus) !important;
-            outline-offset: 0;
+            outline-offset: 0 !important;
         }
 
         &--placeholder {
             background-clip: padding-box;
-            background-color: var(--ons-color-borders-document-image);
+            background-color: var(--ons-color-placeholder);
             background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
             background-position: center;
             background-repeat: no-repeat;