npm - @mirai/ui - Versions diffs - 1.0.218 → 1.1.0-beta - Mend

@mirai/ui 1.0.218 → 1.1.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/build/components/Notification/__tests__/__snapshots__/Notification.test.js.snap CHANGED Viewed

@@ -2,10 +2,10 @@
 exports[`component:<Notification> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined mirai"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -25,22 +25,22 @@ exports[`component:<Notification> inherit:className 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:error 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification error outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -60,22 +60,22 @@ exports[`component:<Notification> prop:error 1`] = `
           d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text error"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification info inline"
+  <ui_view
+    class="view row notification info inline inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -95,22 +95,22 @@ exports[`component:<Notification> prop:info & inline 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification info outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1 icon"
     >
       <svg
@@ -130,22 +130,22 @@ exports[`component:<Notification> prop:info & large 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification info outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph icon"
     >
       <svg
@@ -165,22 +165,22 @@ exports[`component:<Notification> prop:info & small 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text small text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:info 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification info outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -200,22 +200,22 @@ exports[`component:<Notification> prop:info 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification inline"
+  <ui_view
+    class="view row notification inline inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -235,22 +235,22 @@ exports[`component:<Notification> prop:inline 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:large & prop:inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification inline large"
+  <ui_view
+    class="view row notification inline inline large"
   >
-    <span
+    <ui_icon
       class="icon headline-1 icon"
     >
       <svg
@@ -270,22 +270,22 @@ exports[`component:<Notification> prop:large & prop:inline 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1 icon"
     >
       <svg
@@ -305,23 +305,23 @@ exports[`component:<Notification> prop:large 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:onClose 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined"
     data-testid="mirai-onClose"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -341,17 +341,18 @@ exports[`component:<Notification> prop:onClose 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-    <div
+    </ui_text>
+    <ui_pressable
       class="pressable pressable icon"
       data-testid="mirai-onClose-button-close"
+      tabindex="0"
     >
-      <span
+      <ui_icon
         class="icon headline-3"
       >
         <svg
@@ -371,18 +372,18 @@ exports[`component:<Notification> prop:onClose 1`] = `
             d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
           />
         </svg>
-      </span>
-    </div>
-  </div>
+      </ui_icon>
+    </ui_pressable>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:small & prop:inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification inline small"
+  <ui_view
+    class="view row notification inline inline small"
   >
-    <span
+    <ui_icon
       class="icon paragraph icon"
     >
       <svg
@@ -402,22 +403,22 @@ exports[`component:<Notification> prop:small & prop:inline 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text small text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph icon"
     >
       <svg
@@ -437,22 +438,22 @@ exports[`component:<Notification> prop:small 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text small text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification success inline"
+  <ui_view
+    class="view row notification success inline inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -472,22 +473,22 @@ exports[`component:<Notification> prop:success & inline 1`] = `
           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text success"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification success outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1 icon"
     >
       <svg
@@ -507,22 +508,22 @@ exports[`component:<Notification> prop:success & large 1`] = `
           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text success"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification success outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph icon"
     >
       <svg
@@ -542,22 +543,22 @@ exports[`component:<Notification> prop:success & small 1`] = `
           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text small text success"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:success 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification success outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -577,22 +578,22 @@ exports[`component:<Notification> prop:success 1`] = `
           d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text success"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & inline 1`] = `
 <DocumentFragment>
-  <div
-    class="view row notification warning inline"
+  <ui_view
+    class="view row notification warning inline inline"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -608,22 +609,22 @@ exports[`component:<Notification> prop:warning & inline 1`] = `
           d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text warning"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & large 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification warning outlined large"
   >
-    <span
+    <ui_icon
       class="icon headline-1 icon"
     >
       <svg
@@ -639,22 +640,22 @@ exports[`component:<Notification> prop:warning & large 1`] = `
           d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text warning"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning & small 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification warning outlined small"
   >
-    <span
+    <ui_icon
       class="icon paragraph icon"
     >
       <svg
@@ -670,22 +671,22 @@ exports[`component:<Notification> prop:warning & small 1`] = `
           d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text small text warning"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:warning 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification warning outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -701,22 +702,22 @@ exports[`component:<Notification> prop:warning 1`] = `
           d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text warning"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> prop:wide 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined wide"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -736,22 +737,22 @@ exports[`component:<Notification> prop:wide 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> renders 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -771,23 +772,23 @@ exports[`component:<Notification> renders 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;
 exports[`component:<Notification> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_view
     class="view row notification outlined"
     data-testid="mirai"
   >
-    <span
+    <ui_icon
       class="icon headline-3 icon"
     >
       <svg
@@ -807,12 +808,12 @@ exports[`component:<Notification> testId 1`] = `
           d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
         />
       </svg>
-    </span>
-    <span
+    </ui_icon>
+    <ui_text
       class="text paragraph text"
     >
       Lorem Ipsum...
-    </span>
-  </div>
+    </ui_text>
+  </ui_view>
 </DocumentFragment>
 `;