feat(Badge): added Badge

packages/api-generator/src/Badge.json

@@ -0,0 +1,206 @@
+{
+  "version": 3,
+  "name": "Badge",
+  "data": [
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "class",
+      "kind": "const",
+      "static": false,
+      "readonly": true,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "localName": "klass"
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "value",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "defaultValue": ""
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "active",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": true
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "bordered",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "dot",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "tile",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "bottom",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "left",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "boolean",
+        "type": "boolean"
+      },
+      "defaultValue": false
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "label",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "string",
+        "type": "string"
+      },
+      "defaultValue": "Badge"
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "transition",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "any",
+        "type": "any"
+      }
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "offsetX",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "number",
+        "type": "number"
+      },
+      "defaultValue": 6
+    },
+    {
+      "visibility": "public",
+      "description": null,
+      "keywords": [],
+      "name": "offsetY",
+      "kind": "let",
+      "static": false,
+      "readonly": false,
+      "type": {
+        "kind": "type",
+        "text": "number",
+        "type": "number"
+      },
+      "defaultValue": 6
+    }
+  ],
+  "computed": [],
+  "methods": [],
+  "components": [],
+  "description": null,
+  "keywords": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    },
+    {
+      "name": "badge",
+      "description": null,
+      "visibility": "public",
+      "parameters": []
+    }
+  ],
+  "refs": []
+}

packages/api-generator/src/all.json

@@ -3,6 +3,7 @@
     "Alert",
     "AppBar",
     "Avatar",
+    "Badge",
     "Breadcrumbs",
     "Button",
     "ButtonGroup",
@@ -45,8 +46,8 @@
     "Tabs",
     "Textarea",
     "TextField",
-    "VirtualList",
     "Window",
-    "WindowItem"
+    "WindowItem",
+    "VirtualList"
   ]
 }

packages/api-generator/src/index.js

@@ -2,6 +2,7 @@ export { default as all } from './all.json';
 export { default as Alert } from './Alert.json';
 export { default as AppBar } from './AppBar.json';
 export { default as Avatar } from './Avatar.json';
+export { default as Badge } from './Badge.json';
 export { default as Breadcrumbs } from './Breadcrumbs.json';
 export { default as Button } from './Button.json';
 export { default as ButtonGroup } from './ButtonGroup.json';
@@ -44,6 +45,6 @@ export { default as TabContent } from './TabContent.json';
 export { default as Tabs } from './Tabs.json';
 export { default as Textarea } from './Textarea.json';
 export { default as TextField } from './TextField.json';
-export { default as VirtualList } from './VirtualList.json';
 export { default as Window } from './Window.json';
 export { default as WindowItem } from './WindowItem.json';
+export { default as VirtualList } from './VirtualList.json';

packages/docs/src/examples/components/badges/basic.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Icon, Badge } from 'svelte-materialify/src';
+</script>
+
+<div class="d-flex pt-4 pb-4 justify-space-around">
+  <Badge class="success-color" value={2}>
+    <Icon class="mdi mdi-home" />
+  </Badge>
+  <Badge class="primary-color" dot left>
+    <Icon class="mdi mdi-account" />
+  </Badge>
+</div>

packages/docs/src/examples/components/badges/index.js

@@ -0,0 +1,3 @@
+export { default as basic } from './basic.svelte';
+export { default as notifications } from './notifications.svelte';
+export { default as offset } from './offset.svelte';

packages/docs/src/examples/components/badges/notifications.svelte

@@ -0,0 +1,25 @@
+<script>
+  import { Icon, Badge, Button } from 'svelte-materialify/src';
+
+  let value = 1;
+</script>
+
+<div class="d-flex pt-4 pb-4 justify-space-around align-center">
+  <Button
+    class="success-color"
+    on:click={() => {
+      value += 1;
+    }}>
+    Notify
+  </Button>
+  <Button
+    class="error-color"
+    on:click={() => {
+      value = 0;
+    }}>
+    Clear Notifications
+  </Button>
+  <Badge class="primary-color" active={value !== 0} {value}>
+    <Icon class="mdi mdi-home" />
+  </Badge>
+</div>

packages/docs/src/examples/components/badges/offset.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { Button, Badge, Avatar, Icon } from 'svelte-materialify/src';
+</script>
+
+<div class="d-flex pt-4 pb-4 justify-space-around">
+  <Badge class="error-color" bordered offsetX={10} offsetY={10}>
+    <Button class="error-color">Button</Button>
+    <span slot="badge">
+      <Icon class="mdi mdi-lock" />
+    </span>
+  </Badge>
+  <Badge class="primary-color" dot bottom offsetX={10} offsetY={10}>
+    <Avatar><img src="//picsum.photos/50" alt="profile" /></Avatar>
+  </Badge>
+  <Badge class="primary-color" bordered value={2} offsetX={16} offsetY={16}>
+    <Avatar><img src="//picsum.photos/50" alt="profile" /></Avatar>
+  </Badge>
+</div>

packages/docs/src/helpers/routes.js

@@ -45,6 +45,7 @@ export default [
       { text: 'Avatars', href: '/components/avatars/' },
       { text: 'Breadcrumbs', href: '/components/breadcrumbs/' },
       { text: 'Buttons', href: '/components/buttons/' },
+      { text: 'Badges', href: '/components/badges/' },
       {
         text: 'Groups',
         open: false,

packages/docs/src/routes/components/badges.svx

@@ -0,0 +1,49 @@
+---
+title: Badges
+related:
+  - Icons: /components/icons/
+  - Alerts: /components/alerts/
+---
+
+<script context="module">
+  export async function preload() {
+    let sources = await this.fetch('examples/components/badges.json');
+    sources = await sources.json();
+    return { sources };
+  }
+</script>
+
+<script>
+  import { API, Example, setExamples } from '@shared';
+  import * as Examples from '@examples/components/badges';
+  import { Badge as doc } from 'svelte-materialify-api';
+  export let sources;
+  setExamples([sources, Examples]);
+</script>
+
+# Badges
+
+The `Badge` component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons.
+
+## API
+
+<API {doc} />
+
+## Examples
+
+Below is a collection of simple to complex examples.
+
+### Basic
+
+This is how to use basic badges.
+<Example name="basic" />
+
+### Dynamic Notifications
+
+You can incorporate badges with dynamic content to make things such as a notification system.
+<Example name="notifications" />
+
+### Offset
+
+The `Badge` component is flexible and can be used in a variety of use-cases over numerous elements. Options to tweak the location are also available through the `offsetX` and `offsetY` props.
+<Example name="offset" />