From 5a6d2e06dc1a60ef1994d673f5eafb252ddbccad Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 6 Sep 2017 17:14:10 -0300
Subject: [PATCH] comp(MdAvatar): create avatar component (#15)

---
 build/new-component.js                        |  9 +-
 docs/app/i18n/en-US.js                        |  3 +
 docs/app/pages/Components/Avatar/Avatar.vue   | 75 ++++++++++++++++
 .../Avatar/examples/Placeholder.vue           | 41 +++++++++
 .../Components/Avatar/examples/Regular.vue    | 25 ++++++
 .../Components/Avatar/examples/Sizes.vue      | 69 +++++++++++++++
 docs/app/routes.js                            |  5 ++
 docs/app/template/MainNavContent.vue          |  1 +
 src/components/MdAvatar/MdAvatar.test.js      | 17 ++++
 src/components/MdAvatar/MdAvatar.vue          | 85 +++++++++++++++++++
 src/components/MdAvatar/index.js              |  7 ++
 src/components/MdAvatar/theme.scss            | 27 ++++++
 src/components/index.js                       |  2 +
 src/theme/all.scss                            |  2 +-
 14 files changed, 363 insertions(+), 5 deletions(-)
 create mode 100644 docs/app/pages/Components/Avatar/Avatar.vue
 create mode 100644 docs/app/pages/Components/Avatar/examples/Placeholder.vue
 create mode 100644 docs/app/pages/Components/Avatar/examples/Regular.vue
 create mode 100644 docs/app/pages/Components/Avatar/examples/Sizes.vue
 create mode 100644 src/components/MdAvatar/MdAvatar.test.js
 create mode 100644 src/components/MdAvatar/MdAvatar.vue
 create mode 100644 src/components/MdAvatar/index.js
 create mode 100644 src/components/MdAvatar/theme.scss

diff --git a/build/new-component.js b/build/new-component.js
index 24cd1c6be..09094835e 100644
--- a/build/new-component.js
+++ b/build/new-component.js
@@ -139,6 +139,11 @@ const writeToEndOfFile = (contents, file) => {
 }
 
 const [name] = process.argv.slice(2)
+
+if (!name) {
+  exit('Please provide the file name. Example: npm new-component \'MdComponent\'')
+}
+
 const singleName = name.replace('Md', '')
 const camelCasedName = toCamelCase(singleName.replace('Md', ''))
 const rootDir = join(__dirname, '..')
@@ -149,10 +154,6 @@ const docsPath = 'docs/app/pages/components/' + singleName
 const docsRoutePath = 'docs/app/routes.js'
 const navPath = 'docs/app/template/MainNavContent.vue'
 
-if (!name) {
-  exit('Please provide the file name. Example: npm new-component \'MdComponent\'')
-}
-
 if (!test('-e', componentsPath)) {
   mkdir('-p', componentsPath)
   cd(componentsPath)
diff --git a/docs/app/i18n/en-US.js b/docs/app/i18n/en-US.js
index b2560b980..8448c39f0 100644
--- a/docs/app/i18n/en-US.js
+++ b/docs/app/i18n/en-US.js
@@ -28,6 +28,9 @@ export default {
     app: {
       title: 'App'
     },
+    avatar: {
+      title: 'Avatar'
+    },
     card: {
       title: 'Card'
     },
diff --git a/docs/app/pages/Components/Avatar/Avatar.vue b/docs/app/pages/Components/Avatar/Avatar.vue
new file mode 100644
index 000000000..f71111a95
--- /dev/null
+++ b/docs/app/pages/Components/Avatar/Avatar.vue
@@ -0,0 +1,75 @@
+<example src="./examples/Regular.vue" />
+<example src="./examples/Sizes.vue" />
+<example src="./examples/Placeholder.vue" />
+
+<template>
+  <page-container centered :title="$t('pages.avatar.title')">
+    <div class="page-container-section">
+      <p>Avatars can be used to represent people. When used with a specific logo, avatars can also be used to represent brand. They also can be a placeholder when there is no image to be shown, showing a initial letter of a name on contacts that have to picture yet, for example.</p>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Avatar</h2>
+
+      <p>Avatars can show a single image by default but can also display a icon (using the <code>md-icon</code> component):</p>
+      <code-example title="Default" :component="examples['regular']" />
+      <api-item title="API - md-avatar">
+        <p>The following option can be applied to any avatar:</p>
+
+        <api-table :headings="regular.headings" :props="regular.props" slot="classes" />
+      </api-item>
+    </div>
+
+    <div class="page-container-section">
+      <h2>Letter as a placeholder</h2>
+
+      <p>Let's assume that you want to show a list of contacts, but some of them do not have a picture in your database. You can use a initial letter of the contact name as a placeholder. It can even show 2 letters (for compound names) without problem:</p>
+      <code-example title="Placeholder" :component="examples['placeholder']" />
+    </div>
+
+    <div class="page-container-section">
+      <h2>Multiple sizes</h2>
+
+      <p>You can specify three different sizes, if you want: Regular, Small or Large. By default the avatar have a regular size.</p>
+      <code-example title="Sizes" :component="examples['sizes']" />
+      <api-item title="API - md-avatar">
+        <p>The following options will change the size of a avatar:</p>
+
+        <api-table :headings="sizes.headings" :props="sizes.props" slot="classes" />
+      </api-item>
+    </div>
+  </page-container>
+</template>
+
+<script>
+import examples from 'docs-mixins/docsExample'
+
+export default {
+  name: 'Avatar',
+  mixins: [examples],
+  data: () => ({
+    regular: {
+      headings: ['Name', 'Description'],
+      props: [
+        {
+          name: 'md-avatar-icon',
+          description: 'Create a avatar that can show a icon.'
+        }
+      ]
+    },
+    sizes: {
+      headings: ['Name', 'Description'],
+      props: [
+        {
+          name: 'md-small',
+          description: 'Make a small avatar, changing the size of image, icon or text.'
+        },
+        {
+          name: 'md-large',
+          description: 'Make a large avatar. Commonly used as the current user avatar inside a left md-drawer.'
+        }
+      ]
+    }
+  })
+}
+</script>
diff --git a/docs/app/pages/Components/Avatar/examples/Placeholder.vue b/docs/app/pages/Components/Avatar/examples/Placeholder.vue
new file mode 100644
index 000000000..28224e434
--- /dev/null
+++ b/docs/app/pages/Components/Avatar/examples/Placeholder.vue
@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <div class="separator">
+      <md-avatar class="md-avatar-icon">A</md-avatar>
+      <md-avatar class="md-avatar-icon md-primary">A</md-avatar>
+      <md-avatar class="md-avatar-icon md-accent">A</md-avatar>
+    </div>
+
+    <div class="separator">
+      <md-avatar class="md-avatar-icon md-small">B</md-avatar>
+      <md-avatar class="md-avatar-icon md-small md-primary">B</md-avatar>
+      <md-avatar class="md-avatar-icon md-small md-accent">B</md-avatar>
+    </div>
+
+    <div class="separator">
+      <md-avatar class="md-avatar-icon md-large">
+        <md-ripple>CA</md-ripple>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-large md-primary">
+        <md-ripple>CA</md-ripple>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-large md-accent">
+        <md-ripple>CA</md-ripple>
+      </md-avatar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Placeholder'
+}
+</script>
+
+<style lang="scss" scoped>
+  .separator + .separator {
+    margin-top: 24px;
+  }
+</style>
diff --git a/docs/app/pages/Components/Avatar/examples/Regular.vue b/docs/app/pages/Components/Avatar/examples/Regular.vue
new file mode 100644
index 000000000..9e7d8593e
--- /dev/null
+++ b/docs/app/pages/Components/Avatar/examples/Regular.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <md-avatar>
+      <img src="assets/examples/avatar.png" alt="Avatar">
+    </md-avatar>
+
+    <md-avatar class="md-avatar-icon">
+      <md-icon>home</md-icon>
+    </md-avatar>
+
+    <md-avatar class="md-avatar-icon md-primary">
+      <md-icon>folder</md-icon>
+    </md-avatar>
+
+    <md-avatar class="md-avatar-icon md-accent">
+      <md-icon>favorite</md-icon>
+    </md-avatar>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Regular'
+}
+</script>
diff --git a/docs/app/pages/Components/Avatar/examples/Sizes.vue b/docs/app/pages/Components/Avatar/examples/Sizes.vue
new file mode 100644
index 000000000..d0b50865f
--- /dev/null
+++ b/docs/app/pages/Components/Avatar/examples/Sizes.vue
@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <div class="separator">
+      <md-avatar class="md-small">
+        <img src="assets/examples/avatar.jpg" alt="People">
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-small">
+        <md-icon>home</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-small md-primary">
+        <md-icon>folder</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-small md-accent">
+        <md-icon>favorite</md-icon>
+      </md-avatar>
+    </div>
+
+    <div class="separator">
+      <md-avatar>
+        <img src="assets/examples/avatar.png" alt="Avatar">
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon">
+        <md-icon>home</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-primary">
+        <md-icon>folder</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-accent">
+        <md-icon>favorite</md-icon>
+      </md-avatar>
+    </div>
+
+    <div class="separator">
+      <md-avatar class="md-large">
+        <img src="assets/examples/avatar-2.jpg" alt="People">
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-large">
+        <md-icon>home</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-large md-primary">
+        <md-icon>folder</md-icon>
+      </md-avatar>
+
+      <md-avatar class="md-avatar-icon md-large md-accent">
+        <md-icon>favorite</md-icon>
+      </md-avatar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sizes'
+}
+</script>
+
+<style lang="scss" scoped>
+  .separator + .separator {
+    margin-top: 24px;
+  }
+</style>
diff --git a/docs/app/routes.js b/docs/app/routes.js
index 18c152363..fcf05fad5 100644
--- a/docs/app/routes.js
+++ b/docs/app/routes.js
@@ -4,6 +4,11 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 export const routes = [
+  {
+    path: '/components/avatar',
+    name: 'components/avatar',
+    component: () => import(/* webpackChunkName: "avatar" */ './pages/Components/Avatar/Avatar.vue')
+  },
   {
     path: '/components/speed-dial',
     name: 'components/speed-dial',
diff --git a/docs/app/template/MainNavContent.vue b/docs/app/template/MainNavContent.vue
index 9e70df745..0171e9c31 100644
--- a/docs/app/template/MainNavContent.vue
+++ b/docs/app/template/MainNavContent.vue
@@ -6,6 +6,7 @@
     <router-link to="/components">{{ $t('pages.components.title') }}</router-link>
     <div class="main-nav-level">
       <router-link to="/components/app">{{ $t('pages.app.title') }}</router-link>
+      <router-link to="/components/avatar">{{ $t('pages.avatar.title') }}</router-link>
       <router-link to="/components/button">{{ $t('pages.button.title') }}</router-link>
       <router-link to="/components/card">{{ $t('pages.card.title') }}</router-link>
       <router-link to="/components/content">{{ $t('pages.content.title') }}</router-link>
diff --git a/src/components/MdAvatar/MdAvatar.test.js b/src/components/MdAvatar/MdAvatar.test.js
new file mode 100644
index 000000000..c09a83aae
--- /dev/null
+++ b/src/components/MdAvatar/MdAvatar.test.js
@@ -0,0 +1,17 @@
+import mountTemplate from 'test/utils/mountTemplate'
+import MdAvatar from './MdAvatar.vue'
+
+test('should render the avatar', async () => {
+  const template = '<md-avatar>Lorem ipsum</md-avatar>'
+  const wrapper = await mountTemplate(MdAvatar, template)
+
+  expect(wrapper.hasClass('md-avatar')).toBe(true)
+  expect(wrapper.text()).toBe('Lorem ipsum')
+})
+
+test('should render the theme class', async () => {
+  const template = '<md-avatar md-theme="alt">Lorem ipsum</md-avatar>'
+  const wrapper = await mountTemplate(MdAvatar, template)
+
+  expect(wrapper.hasClass('md-theme-alt')).toBe(true)
+})
diff --git a/src/components/MdAvatar/MdAvatar.vue b/src/components/MdAvatar/MdAvatar.vue
new file mode 100644
index 000000000..7c71c540a
--- /dev/null
+++ b/src/components/MdAvatar/MdAvatar.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="md-avatar" :class="[$mdActiveTheme]">
+    <slot />
+  </div>
+</template>
+
+<script>
+import MdComponent from 'core/MdComponent'
+
+export default new MdComponent({
+  name: 'MdAvatar'
+})
+</script>
+
+<style lang="scss">
+  @import "~components/MdAnimation/variables";
+
+  $md-avatar-size: 40px;
+  $md-avatar-large-size: 64px;
+  $md-avatar-large-icon: 40px;
+  $md-avatar-small-size: 24px;
+  $md-avatar-small-icon: 16px;
+
+  .md-avatar {
+    width: $md-avatar-size;
+    height: $md-avatar-size;
+    margin: auto;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+    position: relative;
+    border-radius: $md-avatar-size;
+    transition: $md-transition-default;
+    transition-property: color, background-color;
+    will-change: color, background-color;
+    font-size: 24px;
+    letter-spacing: -.03em;
+    vertical-align: middle;
+
+    &.md-large {
+      min-width: $md-avatar-large-size;
+      min-height: $md-avatar-large-size;
+      border-radius: $md-avatar-large-size;
+      font-size: $md-avatar-large-icon;
+
+      .md-icon {
+        font-size: $md-avatar-large-icon !important;
+      }
+    }
+
+    &.md-small {
+      width: $md-avatar-small-size;
+      height: $md-avatar-small-size;
+      border-radius: $md-avatar-small-size;
+      font-size: $md-avatar-small-icon - 2px;
+
+      .md-icon {
+        font-size: $md-avatar-small-icon !important;
+      }
+    }
+
+    .md-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .md-ripple {
+      cursor: pointer;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+    }
+  }
+</style>
diff --git a/src/components/MdAvatar/index.js b/src/components/MdAvatar/index.js
new file mode 100644
index 000000000..4ee66c022
--- /dev/null
+++ b/src/components/MdAvatar/index.js
@@ -0,0 +1,7 @@
+import init from 'vue-material/material'
+import MdAvatar from './MdAvatar'
+
+export default Vue => {
+  init(Vue)
+  Vue.component(MdAvatar.name, MdAvatar)
+}
diff --git a/src/components/MdAvatar/theme.scss b/src/components/MdAvatar/theme.scss
new file mode 100644
index 000000000..f2f882af5
--- /dev/null
+++ b/src/components/MdAvatar/theme.scss
@@ -0,0 +1,27 @@
+@mixin md-avatar-icon-spec ($color) {
+  &.md-avatar-icon {
+    @include md-theme-property(background-color, $color);
+    @include md-theme-property(color, text-primary, $color);
+
+    .md-icon {
+      @include md-theme-property(color, text-primary, $color);
+      @include md-theme-property(fill, text-primary, $color);
+    }
+  }
+}
+
+.md-avatar {
+  @include md-theme-component() {
+    @include md-avatar-icon-spec(icon-disabled);
+
+    &.md-primary {
+      @include md-theme-property(background-color, primary);
+      @include md-avatar-icon-spec(primary);
+    }
+
+    &.md-accent {
+      @include md-theme-property(background-color, accent);
+      @include md-avatar-icon-spec(accent);
+    }
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 2f9828436..1d280baca 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,4 +1,5 @@
 import MdApp from './MdApp'
+import MdAvatar from './MdAvatar'
 import MdSpeedDial from './MdSpeedDial'
 import MdButton from './MdButton'
 import MdCard from './MdCard'
@@ -20,6 +21,7 @@ import MdToolbar from './MdToolbar'
 
 export {
   MdSpeedDial,
+  MdAvatar,
   MdApp,
   MdButton,
   MdCard,
diff --git a/src/theme/all.scss b/src/theme/all.scss
index c1ed37ae0..a2cf20e35 100644
--- a/src/theme/all.scss
+++ b/src/theme/all.scss
@@ -13,4 +13,4 @@
 @import "../components/MdSubheader/theme";
 @import "../components/MdSwitch/theme";
 @import "../components/MdToolbar/theme";
-@import "../components/MdSpeedDial/theme";
\ No newline at end of file
+@import "../components/MdSpeedDial/theme";@import "../components/MdAvatar/theme";
\ No newline at end of file