feat(ui): add Note component

egoist · Dec 17, 2018 · 73fb4a9 · 73fb4a9
1 parent 4e720ad
commit 73fb4a9
Show file tree

Hide file tree

Showing 7 changed files with 315 additions and 66 deletions.
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
@@ -1,9 +1,9 @@
 <template functional>
   <span
-    class="badge"
-    :class="props.type"
+    :class="['badge', `is-${props.type}`]"
     :style="{backgroundColor: props.color}"
-    ><slot></slot>
+  >
+    <slot></slot>
   </span>
 </template>
 
@@ -12,12 +12,42 @@ export default {
   name: 'Badge',
   props: {
     type: {
-      type: String,
-      default: 'tip'
+      type: String
     },
     color: {
       type: String
     }
   }
 }
 </script>
+
+<style>
+.badge {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 12px;
+  height: 18px;
+  line-height: 18px;
+  border-radius: 9px;
+  padding: 0 6px;
+  color: #fff;
+  margin-right: 5px;
+  background: #666;
+
+  &.is-tip {
+    background: var(--tip-color);
+  }
+
+  &.is-warning {
+    background: var(--warning-color);
+  }
+
+  &.is-danger {
+    background: var(--danger-color);
+  }
+
+  &.is-success {
+    background: var(--success-color);
+  }
+}
+</style>
diff --git a/src/components/Note.vue b/src/components/Note.vue
@@ -0,0 +1,80 @@
+<template functional>
+  <div :class="['note', `is-${props.type}`]">
+    <span class="note-label" v-if="props.label"
+      >{{ props.label === true ? props.type : props.label }}:</span
+    >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Note',
+  props: {
+    type: {
+      type: String,
+      default: 'note'
+    },
+    label: {
+      type: [String, Boolean],
+      default: true
+    }
+  }
+}
+</script>
+
+<style>
+.note {
+  line-height: 1;
+  padding: 20px 24px;
+  border-radius: 4px;
+  border: 1px solid rgb(221, 221, 221);
+  margin: 20px 0;
+
+  & > *:not(.note-label) {
+    line-height: 1.7;
+  }
+
+  & > *:first-child {
+    margin-top: 0;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0;
+  }
+
+  &.is-tip {
+    border-color: var(--tip-color);
+    & .note-label {
+      color: var(--tip-color);
+    }
+  }
+
+  &.is-danger {
+    border-color: var(--danger-color);
+    & .note-label {
+      color: var(--danger-color);
+    }
+  }
+
+  &.is-warning {
+    border-color: var(--warning-color);
+    & .note-label {
+      color: var(--warning-color);
+    }
+  }
+
+  &.is-success {
+    border-color: var(--success-color);
+    & .note-label {
+      color: var(--success-color);
+    }
+  }
+}
+
+.note-label {
+  text-transform: uppercase;
+  font-weight: bold;
+  display: inline-block;
+}
+</style>
diff --git a/src/css/main.css b/src/css/main.css
@@ -29,28 +29,3 @@ a {
     margin: 0 auto;
   }
 }
-
-/** Badge */
-.badge {
-  display: inline-block;
-  vertical-align: top;
-  font-size: 13px;
-  height: 18px;
-  line-height: 18px;
-  border-radius: 9px;
-  padding: 0 5px;
-  color: #fff;
-  margin-right: 5px;
-
-  &.tip {
-    background: #42b983;
-  }
-
-  &.warn, &.warning {
-    background: #e7c000;
-  }
-
-  &.danger {
-    background: #d82f2f;
-  }
-}
diff --git a/src/css/vars.css b/src/css/vars.css
@@ -6,4 +6,9 @@
   --border-color: #eaeaea;
   --header-height: 60px;
   --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
+
+  --tip-color: rgb(6, 125, 247);
+  --success-color: #42b983;
+  --warning-color: #ff9800;
+  --danger-color: rgb(255, 0, 31);
 }
diff --git a/src/index.js b/src/index.js
@@ -8,6 +8,7 @@ import alternativeComponents from './utils/alternativeComponents'
 import ImageZoom from './components/ImageZoom.vue'
 import Badge from './components/Badge.vue'
 import DocuteSelect from './components/DocuteSelect.vue'
+import Note from './components/Note.vue'
 import ExternalLinkIcon from './components/icons/ExternalLinkIcon.vue'
 
 // Built-in plugins
@@ -18,6 +19,7 @@ import versionsPlugin from './plugins/versions'
 Vue.component(ImageZoom.name, ImageZoom)
 Vue.component(Badge.name, Badge)
 Vue.component(DocuteSelect.name, DocuteSelect)
+Vue.component(Note.name, Note)
 Vue.component(ExternalLinkIcon.name, ExternalLinkIcon)
 Vue.use(alternativeComponents)
 

diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
@@ -6,14 +6,16 @@ Docute comes with a set of built-in Vue components.
 
 Use medium-style zoom effect to display certain image.
 
-|Prop|Type|Default|Description|
-|---|---|---|---|
-|url|`string`|N/A|URL to image|
-|alt|`string`|N/A|Placeholder text|
-|border|`boolean`|`false`|Show border around image|
-|width|`string`|N/A|Image width|
+| Prop   | Type      | Default | Description              |
+| ------ | --------- | ------- | ------------------------ |
+| url    | `string`  | N/A     | URL to image             |
+| alt    | `string`  | N/A     | Placeholder text         |
+| border | `boolean` | `false` | Show border around image |
+| width  | `string`  | N/A     | Image width              |
 
-Example: 
+<br>
+
+Example:
 
 ```markdown
 <ImageZoom 
@@ -25,30 +27,107 @@ Example:
 
 <ImageZoom url="https://i.loli.net/2018/09/24/5ba8e878850e9.png" :border="true" width="300"/>
 
-
 ## `<Badge>`
 
 A small count and labeling component.
 
-|Prop|Type|Default|Description|
-|---|---|---|---|
-|type|<code>'tip' &#x7C; 'warning' &#x7C; 'danger'</code>|`'tip'`|Badge type|
-|color|`string`|N/A|Custom background color|
-|children|`string`|N/A|Badge text|
+| Prop     | Type                                                | Default | Description             |
+| -------- | --------------------------------------------------- | ------- | ----------------------- |
+| type     | <code>'tip' &#x7C; 'success' &#x7C; 'warning' &#x7C; 'danger'</code> | N/A | Badge type              |
+| color    | `string`                                            | N/A     | Custom background color |
+| children | `string`                                            | N/A     | Badge text              |
+
+<br>
 
 Example:
 
 ```markdown
-- Feature 1 <Badge>Stable</Badge>
-- Feature 2 <Badge type="warning">Beta</Badge>
-- Feature 3 <Badge type="danger">Deprecated</Badge>
-- Feature 4 <Badge color="magenta">Custom Color</Badge>
+- Feature 1 <Badge>Badge</Badge>
+- Feature 2 <Badge type="tip">Tip</Badge>
+- Feature 3 <Badge type="success">Success</Badge>
+- Feature 4 <Badge type="warning">Warning</Badge>
+- Feature 5 <Badge type="danger">Danger</Badge>
+- Feature 6 <Badge color="magenta">Custom Color</Badge>
 ```
 
-- Feature 1 <Badge>Stable</Badge>
-- Feature 2 <Badge type="warning">Beta</Badge>
-- Feature 3 <Badge type="danger">Deprecated</Badge>
-- Feature 4 <Badge color="magenta">Custom Color</Badge>
+- Feature 1 <Badge>Badge</Badge>
+- Feature 2 <Badge type="tip">Tip</Badge>
+- Feature 3 <Badge type="success">Success</Badge>
+- Feature 4 <Badge type="warning">Warning</Badge>
+- Feature 5 <Badge type="danger">Danger</Badge>
+- Feature 6 <Badge color="magenta">Custom Color</Badge>
+
+## `<Note>`
+
+Colored note blocks, to emphasize part of your page.
+
+| Prop     | Type                                                                | Default             | Description                                       |
+| -------- | ------------------------------------------------------------------- | ------------------- | ------------------------------------------------- |
+| type     | <code>'tip' &#x7C; 'warning' &#x7C; 'alert' &#x7C; 'success'</code> | N/A                 | Note type                                         |
+| label    | `string` `boolean`                                                  | The value of `type` | Custom note label text, use `false` to hide label |
+| children | `string`                                                            | N/A                 | Note content                                      |
+
+<br>
+
+Examples:
+
+```markdown
+<Note>
+
+This is a note that details something important.<br>
+[A link to helpful information.](https://docute.org)
+
+</Note>
+
+<!-- Tip Note -->
+<Note type="tip">
+
+This is a tip for something that is possible.
+
+</Note>
+
+<!-- Warning Note -->
+<Note type="warning">
+
+This is a warning for something very important.
+
+</Note>
+
+<!-- Danger Note -->
+<Note type="danger">
+
+This is a danger for something to take action for.
+
+</Note>
+```
+
+<Note>
+
+This is a note that details something important.<br>
+[A link to helpful information.](https://docute.org)
+
+</Note>
+
+<!-- Tip Note -->
+<Note type="tip">
+
+This is a tip for something that is possible.
+
+</Note>
+
+<!-- Warning Note -->
+<Note type="warning">
+
+This is a warning for something very important.
+
+</Note>
+
+<!-- Danger Note -->
+<Note type="danger">
+
+This is a danger for something to take action for.
+
+</Note>
 
 ## `<v-style>` `<v-script>`