feat(result): more status

demo/documentation/components/result/enUS/error.md

@@ -0,0 +1,8 @@
+# Error
+```html
+<n-result status="error" title="Error" description="Alway related to a great mother.">
+  <template v-slot:footer>
+    <n-button>But I Don't Like It</n-button>
+  </template>
+</n-result>
+```

demo/documentation/components/result/enUS/index.md

@@ -4,4 +4,8 @@ s404
 s403
 s500
 s418
+info
+success
+warning 
+error
 ```

demo/documentation/components/result/enUS/info.md

@@ -0,0 +1,8 @@
+# Info
+```html
+<n-result status="info" title="Information" description="In this era, info is about money and money is about info.">
+  <template v-slot:footer>
+    <n-button>I Want Information</n-button>
+  </template>
+</n-result>
+```

demo/documentation/components/result/enUS/s418.md

@@ -6,7 +6,7 @@
   description="In Chinese, teapot is read as 'Beiju', which means 'tragedy'."
 >
   <template v-slot:footer>
-    <n-button>It is easy to take the truth</n-button>
+    <n-button>It Is Easy to Take the Truth</n-button>
   </template>
 </n-result>
 ```

demo/documentation/components/result/enUS/success.md

@@ -0,0 +1,8 @@
+# Success
+```html
+<n-result status="success" title="Success" description="Son or daughter of failure, in many countries.">
+  <template v-slot:footer>
+    <n-button>I Care Nothing About Its Gender</n-button>
+  </template>
+</n-result>
+```

demo/documentation/components/result/enUS/warning.md

@@ -0,0 +1,8 @@
+# Warning
+```html
+<n-result status="warning" title="Warning" description="People seldom see it until it comes true.">
+  <template v-slot:footer>
+    <n-button>Hmm, Truly Sad, Isn't It?</n-button>
+  </template>
+</n-result>
+```

packages/common/Result/src/main.vue

@@ -2,7 +2,8 @@
   <div
     class="n-result"
     :class="{
-      [`n-${synthesizedTheme}-theme`]: synthesizedTheme
+      [`n-${synthesizedTheme}-theme`]: synthesizedTheme,
+      [`n-result--${status}-status`]: status
     }"
   >
     <div class="n-result-icon">
@@ -10,6 +11,18 @@
       <img v-else-if="status === 403 || status === '403'" class="n-result-icon__status-image" src="./403.svg">
       <img v-else-if="status === 500 || status === '500'" class="n-result-icon__status-image" src="./500.svg">
       <img v-else-if="status === 481 || status === '418'" class="n-result-icon__status-image" src="./418.svg">
+      <n-icon v-else-if="status === 'success'" size="80">
+        <ios-checkmark-circle />
+      </n-icon>
+      <n-icon v-else-if="status === 'info'" size="80">
+        <ios-information-circle />
+      </n-icon>
+      <n-icon v-else-if="status === 'warning'" size="80">
+        <ios-alert />
+      </n-icon>
+      <n-icon v-else-if="status === 'error'" size="80">
+        <ios-close-circle />
+      </n-icon>
     </div>
     <div class="n-result-header">
       <div class="n-result-header__title">
@@ -31,9 +44,21 @@
 <script>
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
+import iosCheckmarkCircle from '../../../icons/ios-checkmark-circle'
+import iosAlert from '../../../icons/ios-alert'
+import iosInformationCircle from '../../../icons/ios-information-circle'
+import iosCloseCircle from '../../../icons/ios-close-circle'
+import NIcon from '../../Icon'
 
 export default {
   name: 'NResult',
+  components: {
+    iosCheckmarkCircle,
+    iosAlert,
+    iosInformationCircle,
+    iosCloseCircle,
+    NIcon
+  },
   mixins: [ withapp, themeable ],
   props: {
     status: {

styles/Alert.scss

@@ -50,9 +50,13 @@
           font-size: 16px;
           line-height: 19px;
           font-weight: 700;
+          & + {
+            @include e(content) {
+              margin-top: 9px;
+            }
+          }
         }
         @include e(content) {
-          margin-top: 9px;
           transition: color .3s $default-cubic-bezier;
           font-size: 14px;
         }

styles/Result.scss

@@ -4,7 +4,29 @@
   @include b(result) {
     font-size: 14px;
     color: $--n-secondary-text-color;
+    transition: color .3s $default-cubic-bezier;
+    @include m(success-status) {
+      @include b(result-icon) {
+        fill: $--success-6;
+      }
+    }
+    @include m(info-status) {
+      @include b(result-icon) {
+        fill: $--info-6;
+      }
+    }
+    @include m(warning-status) {
+      @include b(result-icon) {
+        fill: $--warning-6;
+      }
+    }
+    @include m(error-status) {
+      @include b(result-icon) {
+        fill: $--error-6;
+      }
+    }
     @include b(result-icon) {
+      transition: fill .3s $default-cubic-bezier;
       display: flex;
       justify-content: center;
       @include e(status-image) {
@@ -18,6 +40,7 @@
         font-size: 32px;
         font-weight: 700;
         color: $--n-text-color;
+        transition: color .3s $default-cubic-bezier;
         text-align: center;
       }
       @include e(description) {