@ebay/skin 15.3.0-0 → 15.4.0-0

package/src/less/listbox-button/stories/form.stories.js

@@ -0,0 +1,97 @@
+export default { title: 'Listbox Button/Form' };
+
+export const enabled = () => `
+<span class="listbox-button listbox-button--form">
+    <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__label">Color: </span>
+            <span class="btn__text">-</span>
+            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-dropdown"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Red</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Blue</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Yellow</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Green</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+    <select hidden="" class="listbox__native">
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+    </select>
+</span>
+`;
+
+export const disabled = () => `
+<span class="listbox-button listbox-button--form">
+    <button class="btn btn--form" aria-expanded="false" aria-haspopup="listbox" disabled>
+        <span class="btn__cell">
+            <span class="btn__label">Color: </span>
+            <span class="btn__text">-</span>
+            <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-dropdown"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox">
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Red</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Blue</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Yellow</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Green</span>
+                <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
+                    <use href="#icon-tick-small"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+    <select hidden="" class="listbox__native">
+        <option value="1"></option>
+        <option value="2"></option>
+        <option value="3"></option>
+        <option value="4"></option>
+    </select>
+</span>
+`;

package/src/less/menu/stories/fake-menu.stories.js

@@ -37,7 +37,7 @@ export const linksSelected = () => `
             <a aria-current="page" class="fake-menu__item" href="http://www.ebay.com">
                 <span>Link 1</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </a>
         </li>
@@ -54,7 +54,7 @@ export const buttonsSelected = () => `
             <button aria-current="page" class="fake-menu__item">
                 <span>Button 1</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </button>
         </li>
@@ -71,7 +71,7 @@ export const linksDisabled = () => `
             <a aria-current="page" class="fake-menu__item">
                 <span>Link 1</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </a>
         </li>
@@ -88,7 +88,7 @@ export const buttonsDisabled = () => `
             <button aria-current="page" class="fake-menu__item" disabled>
                 <span>Button 1</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </button>
         </li>

package/src/less/menu/stories/multiSelect.stories.js

@@ -6,19 +6,19 @@ export const unselected = () => `
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false" tabindex="0">
             <span>Item 1</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
             <span>Item 2</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="false">
             <span>Item 3</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
     </div>
@@ -31,19 +31,19 @@ export const selected = () => `
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" tabindex="0">
             <span>Item 1</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
             <span>Item 2</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true">
             <span>Item 3</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
     </div>
@@ -56,19 +56,19 @@ export const disabled = () => `
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true" tabindex="0">
             <span>Item 1</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span>Item 2</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
         <div class="menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
             <span>Item 3</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </div>
     </div>

package/src/less/menu-button/stories/base.stories.js

@@ -6,7 +6,7 @@ export const collapsed = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -32,7 +32,7 @@ export const disabled = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -58,7 +58,7 @@ export const expanded = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -84,7 +84,7 @@ export const collapsedForm = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -110,7 +110,7 @@ export const expandedForm = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -136,7 +136,7 @@ export const badged = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -162,7 +162,7 @@ export const expandedDisabledItem = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -188,7 +188,7 @@ export const radioItems = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -197,19 +197,19 @@ export const radioItems = () => `
             <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 20000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
         </div>
@@ -223,7 +223,7 @@ export const radioItemsDisabledItem = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -232,19 +232,19 @@ export const radioItemsDisabledItem = () => `
             <div class="menu-button__item" role="menuitemradio" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio" tabindex="0">
                 <span>Item 20000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemradio">
                 <span>Item 30000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
         </div>
@@ -258,7 +258,7 @@ export const checkboxItems = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -267,19 +267,19 @@ export const checkboxItems = () => `
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0" aria-checked="true">
                 <span>Item 10000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox">
                 <span>Item 20000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
         </div>
@@ -293,7 +293,7 @@ export const checkboxItemsDisabledItem = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -302,19 +302,19 @@ export const checkboxItemsDisabledItem = () => `
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
                 <span>Item 10000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" tabindex="0">
                 <span>Item 20000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="menu-button__item" role="menuitemcheckbox" aria-checked="true">
                 <span>Item 30000</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
         </div>
@@ -328,7 +328,7 @@ export const longOptionText = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -354,7 +354,7 @@ export const menuIcons = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -362,7 +362,7 @@ export const menuIcons = () => `
         <div class="menu-button__items" role="menu">
             <div class="menu-button__item" role="menuitem">
                 <svg class="icon icon--settings" focusable="false" aria-label="Settings" role="icon">
-                    <use xlink:href="#icon-settings"></use>
+                    <use href="#icon-settings"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Profile
@@ -370,7 +370,7 @@ export const menuIcons = () => `
             </div>
             <div class="menu-button__item" role="menuitem">
                 <svg class="icon icon--calendar" focusable="false" aria-label="Calendar" role="icon">
-                    <use xlink:href="#icon-calendar"></use>
+                    <use href="#icon-calendar"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Calendar
@@ -378,7 +378,7 @@ export const menuIcons = () => `
             </div>
             <div class="menu-button__item" role="menuitem">
                 <svg class="icon icon--profile" focusable="false" aria-label="Profile" role="icon">
-                    <use xlink:href="#icon-profile"></use>
+                    <use href="#icon-profile"></use>
                 </svg>
                 <span style="margin: auto 5px;">
                     Profile
@@ -395,7 +395,7 @@ export const separator = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>

package/src/less/menu-button/stories/cascade.stories.js

@@ -7,7 +7,7 @@ export const RTL = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -35,7 +35,7 @@ export const colour = () => `
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-dropdown"></use>
+                    <use href="#icon-dropdown"></use>
                 </svg>
             </span>
         </button>
@@ -63,7 +63,7 @@ export const fontSize = () => `
             <span class="btn__cell">
                 <span class="btn__text">Button</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-dropdown"></use>
+                    <use href="#icon-dropdown"></use>
                 </svg>
             </span>
         </button>
@@ -72,19 +72,19 @@ export const fontSize = () => `
                 <div class="menu-button__item" role="menuitemradio" tabindex="0" aria-checked="true">
                     <span>Item 10000</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 20000</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="menu-button__item" role="menuitemradio">
                     <span>Item 30000</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
             </div>

package/src/less/menu-button/stories/dimensions.stories.js

@@ -6,7 +6,7 @@ export const fixedWidth = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>

package/src/less/menu-button/stories/fake-menu-button.stories.js

@@ -6,7 +6,7 @@ export const links = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -36,7 +36,7 @@ export const linksSelected = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -45,7 +45,7 @@ export const linksSelected = () => `
         <a aria-current="page" class="fake-menu-button__item" href="http://www.ebay.com">
             <span>Link 1</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </a>
         </li>
@@ -69,7 +69,7 @@ export const linksDisabled = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -78,7 +78,7 @@ export const linksDisabled = () => `
         <a aria-current="page" class="fake-menu-button__item">
             <span>Link 1</span>
             <svg class="icon icon--tick-small" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-tick-small"></use>
+                <use href="#icon-tick-small"></use>
             </svg>
         </a>
         </li>
@@ -102,7 +102,7 @@ export const linksFixedWidth = () => `
         <span class="btn__cell">
             <span class="btn__text">Button</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>

package/src/less/page-notice/page-notice.less

@@ -26,7 +26,7 @@ span[role="region"].page-notice {
 .page-notice__title {
     font-size: @font-size-regular;
     font-weight: normal;
-    margin: 4px 0 0;
+    margin: 1px 0 0;
 }
 
 /* legacy version with separate bold heading */
@@ -137,12 +137,11 @@ p.page-notice__cta {
 @media (min-width: 601px) {
     section.page-notice,
     div[role="region"].page-notice {
-        flex-wrap: nowrap;
         margin: @spacing-200 0;
     }
 
     .page-notice__title {
-        margin-top: 2px;
+        margin-bottom: 2px;
     }
 
     p.page-notice__cta {
@@ -150,7 +149,7 @@ p.page-notice__cta {
         grid-row: 1;
         justify-self: end;
         margin-bottom: 0;
-        margin-top: 0;
+        margin-top: 1px;
         padding-right: @spacing-200;
     }