breaking change: rename Info to Badge

src/badge/index.js

@@ -0,0 +1,21 @@
+import { isDef, createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('badge');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    badge: [Number, String],
+  },
+
+  render() {
+    const { dot, badge } = this;
+    const showBadge = isDef(badge) && badge !== '';
+
+    if (!dot && !showBadge) {
+      return;
+    }
+
+    return <div class={bem({ dot })}>{dot ? '' : badge}</div>;
+  },
+});

src/badge/index.less

@@ -0,0 +1,29 @@
+@import '../style/var';
+
+.van-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  min-width: @badge-size;
+  padding: @badge-padding;
+  color: @badge-color;
+  font-weight: @badge-font-weight;
+  font-size: @badge-font-size;
+  font-family: @badge-font-family;
+  line-height: 1.2;
+  text-align: center;
+  background-color: @badge-background-color;
+  border: @badge-border-width solid @white;
+  border-radius: @badge-size;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+
+  &--dot {
+    width: @badge-dot-size;
+    min-width: 0;
+    height: @badge-dot-size;
+    background-color: @badge-dot-color;
+    border-radius: 100%;
+  }
+}

src/badge/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when badge is empty string 1`] = ``;
+
+exports[`should not render when badge is empty undefined 1`] = ``;
+
+exports[`should render when badge is zero 1`] = `<div class="van-badge">0</div>`;

src/badge/test/index.spec.js

@@ -0,0 +1,32 @@
+import Badge from '..';
+import { mount } from '../../../test';
+
+test('should not render when badge is empty string', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: '',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should not render when badge is empty undefined', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: undefined,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should render when badge is zero', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: 0,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});