@ebay/skin 16.0.0 → 16.1.0

package/src/less/calendar/stories/calendar.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Calendar' };
+export default { title: "Calendar" };
 
 export const base = () => /* HTML */ `
     <div class="calendar">
@@ -24,76 +24,104 @@ export const base = () => /* HTML */ `
                             <td colspan="4"></td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >1<span class="clipped"> - inactive</span></span
+                                    >1<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >2<span class="clipped"> - inactive</span></span
+                                    >2<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >3<span class="clipped"> - inactive</span></span
+                                    >3<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >4<span class="clipped"> - inactive</span></span
+                                    >4<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >5<span class="clipped"> - inactive</span></span
+                                    >5<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >6<span class="clipped"> - inactive</span></span
+                                    >6<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >7<span class="clipped"> - inactive</span></span
+                                    >7<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >8<span class="clipped"> - inactive</span></span
+                                    >8<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >9<span class="clipped"> - inactive</span></span
+                                    >9<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >10<span class="clipped"> - inactive</span></span
+                                    >10<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >11<span class="clipped"> - inactive</span></span
+                                    >11<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >12<span class="clipped"> - inactive</span></span
+                                    >12<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >13<span class="clipped"> - inactive</span></span
+                                    >13<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--current"
-                                    >14<span class="clipped"> - today</span></span
+                                    >14<span class="clipped">
+                                        - today</span
+                                    ></span
                                 >
                             </td>
                             <td><span>15</span></td>
@@ -116,21 +144,35 @@ export const base = () => /* HTML */ `
                                 >
                             </td>
                             <td class="calendar__range">
-                                <span>24<span class="clipped"> - in range</span></span>
+                                <span
+                                    >24<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                         </tr>
                         <tr>
                             <td class="calendar__range">
-                                <span>25<span class="clipped"> - in range</span></span>
+                                <span
+                                    >25<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>26<span class="clipped"> - in range</span></span>
+                                <span
+                                    >26<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--end"
                             >
                                 <span
-                                    >27<span class="clipped"> - selected - end of range</span></span
+                                    >27<span class="clipped">
+                                        - selected - end of range</span
+                                    ></span
                                 >
                             </td>
                             <td><span>28</span></td>
@@ -200,25 +242,46 @@ export const interactive = () => /* HTML */ `
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--start"
                             >
-                                <button tabindex="-1" aria-label="23 - selected - start of range">
+                                <button
+                                    tabindex="-1"
+                                    aria-label="23 - selected - start of range"
+                                >
                                     23
                                 </button>
                             </td>
                             <td class="calendar__range">
-                                <button tabindex="-1" aria-label="24 - in range">24</button>
+                                <button
+                                    tabindex="-1"
+                                    aria-label="24 - in range"
+                                >
+                                    24
+                                </button>
                             </td>
                         </tr>
                         <tr>
                             <td class="calendar__range">
-                                <button tabindex="-1" aria-label="25 - in range">25</button>
+                                <button
+                                    tabindex="-1"
+                                    aria-label="25 - in range"
+                                >
+                                    25
+                                </button>
                             </td>
                             <td class="calendar__range">
-                                <button tabindex="-1" aria-label="26 - in range">26</button>
+                                <button
+                                    tabindex="-1"
+                                    aria-label="26 - in range"
+                                >
+                                    26
+                                </button>
                             </td>
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--end"
                             >
-                                <button tabindex="-1" aria-label="27 - selected - end of range">
+                                <button
+                                    tabindex="-1"
+                                    aria-label="27 - selected - end of range"
+                                >
                                     27
                                 </button>
                             </td>
@@ -281,76 +344,104 @@ export const header = () => /* HTML */ `
                             <td colspan="4"></td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >1<span class="clipped"> - inactive</span></span
+                                    >1<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >2<span class="clipped"> - inactive</span></span
+                                    >2<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >3<span class="clipped"> - inactive</span></span
+                                    >3<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >4<span class="clipped"> - inactive</span></span
+                                    >4<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >5<span class="clipped"> - inactive</span></span
+                                    >5<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >6<span class="clipped"> - inactive</span></span
+                                    >6<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >7<span class="clipped"> - inactive</span></span
+                                    >7<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >8<span class="clipped"> - inactive</span></span
+                                    >8<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >9<span class="clipped"> - inactive</span></span
+                                    >9<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >10<span class="clipped"> - inactive</span></span
+                                    >10<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >11<span class="clipped"> - inactive</span></span
+                                    >11<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >12<span class="clipped"> - inactive</span></span
+                                    >12<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >13<span class="clipped"> - inactive</span></span
+                                    >13<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--current"
-                                    >14<span class="clipped"> - today</span></span
+                                    >14<span class="clipped">
+                                        - today</span
+                                    ></span
                                 >
                             </td>
                             <td><span>15</span></td>
@@ -373,21 +464,35 @@ export const header = () => /* HTML */ `
                                 >
                             </td>
                             <td class="calendar__range">
-                                <span>24<span class="clipped"> - in range</span></span>
+                                <span
+                                    >24<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                         </tr>
                         <tr>
                             <td class="calendar__range">
-                                <span>25<span class="clipped"> - in range</span></span>
+                                <span
+                                    >25<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>26<span class="clipped"> - in range</span></span>
+                                <span
+                                    >26<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--end"
                             >
                                 <span
-                                    >27<span class="clipped"> - selected - end of range</span></span
+                                    >27<span class="clipped">
+                                        - selected - end of range</span
+                                    ></span
                                 >
                             </td>
                             <td><span>28</span></td>
@@ -426,76 +531,104 @@ export const double = () => /* HTML */ `
                             <td colspan="4"></td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >1<span class="clipped"> - inactive</span></span
+                                    >1<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >2<span class="clipped"> - inactive</span></span
+                                    >2<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >3<span class="clipped"> - inactive</span></span
+                                    >3<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >4<span class="clipped"> - inactive</span></span
+                                    >4<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >5<span class="clipped"> - inactive</span></span
+                                    >5<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >6<span class="clipped"> - inactive</span></span
+                                    >6<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >7<span class="clipped"> - inactive</span></span
+                                    >7<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >8<span class="clipped"> - inactive</span></span
+                                    >8<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >9<span class="clipped"> - inactive</span></span
+                                    >9<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >10<span class="clipped"> - inactive</span></span
+                                    >10<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >11<span class="clipped"> - inactive</span></span
+                                    >11<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >12<span class="clipped"> - inactive</span></span
+                                    >12<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >13<span class="clipped"> - inactive</span></span
+                                    >13<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--current"
-                                    >14<span class="clipped"> - today</span></span
+                                    >14<span class="clipped">
+                                        - today</span
+                                    ></span
                                 >
                             </td>
                             <td><span>15</span></td>
@@ -570,36 +703,70 @@ export const double = () => /* HTML */ `
                                 >
                             </td>
                             <td class="calendar__range">
-                                <span>17<span class="clipped"> - in range</span></span>
+                                <span
+                                    >17<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>18<span class="clipped"> - in range</span></span>
+                                <span
+                                    >18<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>19<span class="clipped"> - in range</span></span>
+                                <span
+                                    >19<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>20<span class="clipped"> - in range</span></span>
+                                <span
+                                    >20<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>21<span class="clipped"> - in range</span></span>
+                                <span
+                                    >21<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                         </tr>
                         <tr>
                             <td class="calendar__range">
-                                <span>22<span class="clipped"> - in range</span></span>
+                                <span
+                                    >22<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>23<span class="clipped"> - in range</span></span>
+                                <span
+                                    >23<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>24<span class="clipped"> - in range</span></span>
+                                <span
+                                    >24<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--end"
                             >
                                 <span
-                                    >25<span class="clipped"> - selected - end of range</span></span
+                                    >25<span class="clipped">
+                                        - selected - end of range</span
+                                    ></span
                                 >
                             </td>
                             <td><span>26</span></td>
@@ -665,76 +832,104 @@ export const doubleWithHeader = () => /* HTML */ `
                             <td colspan="4"></td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >1<span class="clipped"> - inactive</span></span
+                                    >1<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >2<span class="clipped"> - inactive</span></span
+                                    >2<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >3<span class="clipped"> - inactive</span></span
+                                    >3<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >4<span class="clipped"> - inactive</span></span
+                                    >4<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >5<span class="clipped"> - inactive</span></span
+                                    >5<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >6<span class="clipped"> - inactive</span></span
+                                    >6<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >7<span class="clipped"> - inactive</span></span
+                                    >7<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >8<span class="clipped"> - inactive</span></span
+                                    >8<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >9<span class="clipped"> - inactive</span></span
+                                    >9<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >10<span class="clipped"> - inactive</span></span
+                                    >10<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                         </tr>
                         <tr>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >11<span class="clipped"> - inactive</span></span
+                                    >11<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >12<span class="clipped"> - inactive</span></span
+                                    >12<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--disabled"
-                                    >13<span class="clipped"> - inactive</span></span
+                                    >13<span class="clipped">
+                                        - inactive</span
+                                    ></span
                                 >
                             </td>
                             <td>
                                 <span class="calendar__cell--current"
-                                    >14<span class="clipped"> - today</span></span
+                                    >14<span class="clipped">
+                                        - today</span
+                                    ></span
                                 >
                             </td>
                             <td><span>15</span></td>
@@ -809,36 +1004,70 @@ export const doubleWithHeader = () => /* HTML */ `
                                 >
                             </td>
                             <td class="calendar__range">
-                                <span>17<span class="clipped"> - in range</span></span>
+                                <span
+                                    >17<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>18<span class="clipped"> - in range</span></span>
+                                <span
+                                    >18<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>19<span class="clipped"> - in range</span></span>
+                                <span
+                                    >19<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>20<span class="clipped"> - in range</span></span>
+                                <span
+                                    >20<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>21<span class="clipped"> - in range</span></span>
+                                <span
+                                    >21<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                         </tr>
                         <tr>
                             <td class="calendar__range">
-                                <span>22<span class="clipped"> - in range</span></span>
+                                <span
+                                    >22<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>23<span class="clipped"> - in range</span></span>
+                                <span
+                                    >23<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td class="calendar__range">
-                                <span>24<span class="clipped"> - in range</span></span>
+                                <span
+                                    >24<span class="clipped">
+                                        - in range</span
+                                    ></span
+                                >
                             </td>
                             <td
                                 class="calendar__cell--selected calendar__range calendar__range--end"
                             >
                                 <span
-                                    >25<span class="clipped"> - selected - end of range</span></span
+                                    >25<span class="clipped">
+                                        - selected - end of range</span
+                                    ></span
                                 >
                             </td>
                             <td><span>26</span></td>