From 2739b514dae35b77009cbc602e586d8d55db8a72 Mon Sep 17 00:00:00 2001
From: Herrington Darkholme
 <2883231+HerringtonDarkholme@users.noreply.github.com>
Date: Fri, 24 Jul 2020 22:22:21 +0800
Subject: [PATCH] feat: add badge component

---
 .storybook/preview.js                  | 16 ++++++--
 packages/badge/__tests__/badge.spec.ts | 15 +++++++
 packages/badge/doc/basic.vue           | 21 ++++++++++
 packages/badge/doc/index.stories.ts    | 10 +++++
 packages/badge/index.ts                |  5 +++
 packages/badge/package.json            | 13 +++++++
 packages/badge/src/index.vue           | 54 ++++++++++++++++++++++++++
 packages/button/doc/index.stories.ts   |  9 ++---
 8 files changed, 133 insertions(+), 10 deletions(-)
 create mode 100644 packages/badge/__tests__/badge.spec.ts
 create mode 100644 packages/badge/doc/basic.vue
 create mode 100644 packages/badge/doc/index.stories.ts
 create mode 100644 packages/badge/index.ts
 create mode 100644 packages/badge/package.json
 create mode 100644 packages/badge/src/index.vue

diff --git a/.storybook/preview.js b/.storybook/preview.js
index f0278a3744..8a08259bf8 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -22,10 +22,18 @@ const Wrapper = (template) => {
  * @param {Story} content
  * @return {HTMLElement}
  */
-function CustomDecorator(content) {
-  const { template, installer } = content();
-  const app = createApp(Wrapper(template));
-  installer(app);
+function CustomDecorator(content, context) {
+  const templateOrComponent = content();
+  const app = typeof templateOrComponent === 'string'
+    ? createApp(Wrapper(templateOrComponent))
+    : createApp(templateOrComponent)
+
+  const installers = context?.parameters?.component
+  if (Array.isArray(installers)) {
+    installers.forEach(installer => installer(app))
+  } else {
+    installers?.(app)
+  }
   const entry = document.createElement('div');
   entry.className = 'element-plus-previewer';
   app.mount(entry);
diff --git a/packages/badge/__tests__/badge.spec.ts b/packages/badge/__tests__/badge.spec.ts
new file mode 100644
index 0000000000..9795d6c7f6
--- /dev/null
+++ b/packages/badge/__tests__/badge.spec.ts
@@ -0,0 +1,15 @@
+import {mount} from '@vue/test-utils'
+import Badge from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('Badge.vue', () => {
+  test('render test', () => {
+    const instance = mount(Badge, {
+      slots: {
+        default: AXIOM
+      },
+    })
+    expect(instance.text()).toEqual(AXIOM)
+  })
+})
diff --git a/packages/badge/doc/basic.vue b/packages/badge/doc/basic.vue
new file mode 100644
index 0000000000..7ee68db537
--- /dev/null
+++ b/packages/badge/doc/basic.vue
@@ -0,0 +1,21 @@
+<template>
+  <el-badge :value="12" class="item">
+    <el-button size="small">comments</el-button>
+  </el-badge>
+  <el-badge :value="3" class="item">
+    <el-button size="small">replies</el-button>
+  </el-badge>
+  <el-badge :value="1" class="item" type="primary">
+    <el-button size="small">comments</el-button>
+  </el-badge>
+  <el-badge :value="2" class="item" type="warning">
+    <el-button size="small">replies</el-button>
+  </el-badge>
+</template>
+
+<style>
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+</style>
diff --git a/packages/badge/doc/index.stories.ts b/packages/badge/doc/index.stories.ts
new file mode 100644
index 0000000000..bc9d758ebe
--- /dev/null
+++ b/packages/badge/doc/index.stories.ts
@@ -0,0 +1,10 @@
+import Basic from './basic.vue'
+import ElBadge from '../index'
+import ElButton from '@element-plus/button'
+
+export default {
+  title: "Badge",
+  component: [ElButton, ElBadge]
+}
+
+export const BasicUsage = () => Basic
diff --git a/packages/badge/index.ts b/packages/badge/index.ts
new file mode 100644
index 0000000000..53a4a6ef3a
--- /dev/null
+++ b/packages/badge/index.ts
@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Badge from './src/index.vue'
+export default (app: App) => {
+  app.component(Badge.name, Badge)
+}
diff --git a/packages/badge/package.json b/packages/badge/package.json
new file mode 100644
index 0000000000..6bcb5dde23
--- /dev/null
+++ b/packages/badge/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "@element-plus/badge",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@element-plus/button": "^0.0.0",
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}
diff --git a/packages/badge/src/index.vue b/packages/badge/src/index.vue
new file mode 100644
index 0000000000..c83e1401cb
--- /dev/null
+++ b/packages/badge/src/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <transition name="el-zoom-in-center">
+      <sup
+        v-show="!hidden && (content || content === 0 || isDot)"
+        v-text="content"
+        class="el-badge__content"
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
+      </sup>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed} from 'vue'
+
+export default {
+  name: 'ElBadge',
+  props: {
+    value: [String, Number],
+    max: Number,
+    isDot: Boolean,
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
+  },
+  setup(props) {
+    const content = computed(() => {
+      if (props.isDot) {
+        return
+      }
+      const {value, max} = props
+        if (typeof value === 'number' && typeof max === 'number') {
+          return max < value ? `${max}+` : value
+        }
+        return value
+    })
+    return {
+      content
+    }
+  }
+}
+</script>
diff --git a/packages/button/doc/index.stories.ts b/packages/button/doc/index.stories.ts
index e0389e5aa8..92d9ecbc71 100644
--- a/packages/button/doc/index.stories.ts
+++ b/packages/button/doc/index.stories.ts
@@ -2,11 +2,8 @@ import ElButton from '../index';
 
 export default {
   title: 'Button',
+  component: ElButton,
 };
 
-export const NormalButton = () => {
-  return { template: '<el-button>With Text</el-button>', installer: ElButton };
-};
-export const ButtonTwo = () => {
-  return { template: '<el-button>button two</el-button>', installer: ElButton };
-};
+export const NormalButton = () => '<el-button>With Text</el-button>'
+export const ButtonTwo = () => '<el-button>button two</el-button>'