Merge pull request #870 from kanselarij-vlaanderen/feature/KAS-2533-a…

…uk-avatar-styling-sync

Feature/kas 2533 auk avatar styling sync

app/pods/styleguide/avatar/route.js

@@ -0,0 +1,9 @@
+import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
+import Route from '@ember/routing/route';
+
+export default class AvatarRoute extends Route.extend(AuthenticatedRouteMixin) {
+  model() {
+    // Normally we would query store here, but for now, we get the mocks
+    return null;
+  }
+}

app/pods/styleguide/avatar/template.hbs

@@ -0,0 +1,51 @@
+{{!-- template-lint-disable  --}}
+<ComponentPageIntro @title="Avatar" />
+
+<StyleguideSample
+        @title="Small"
+        @snippet="avatar-small.hbs"
+>
+  {{!-- BEGIN-SNIPPET avatar-small --}}
+  <div class="auk-avatar auk-avatar--default auk-avatar--small">
+    <WebComponents::AuIcon @name="user" @size="small" />
+  </div>
+  {{!-- END-SNIPPET --}}
+</StyleguideSample>
+
+<StyleguideSample
+        @title="Regular"
+        @snippet="avatar-regular.hbs"
+>
+  {{!-- BEGIN-SNIPPET avatar-regular --}}
+  <div class="auk-avatar auk-avatar--default auk-avatar--regular">
+    <WebComponents::AuIcon @name="user" />
+  </div>
+  {{!-- END-SNIPPET --}}
+</StyleguideSample>
+
+<StyleguideSample
+        @title="Image"
+        @snippet="avatar-image.hbs"
+>
+  {{!-- BEGIN-SNIPPET avatar-image --}}
+  <div class="auk-avatar auk-avatar--img auk-avatar--regular">
+    <img src="/assets/icons/avatar-hilde-crevits.jpg" alt="avatar" />
+  </div>
+  {{!-- END-SNIPPET --}}
+</StyleguideSample>
+
+<StyleguideSample
+        @title="Avatar & text"
+        @snippet="avatar-avatar-and-text.hbs"
+>
+  {{!-- BEGIN-SNIPPET avatar-avatar-and-text --}}
+  <div class="auk-avatar-and-text">
+    <div class="auk-avatar auk-avatar--default auk-avatar--small">
+      <WebComponents::AuIcon @name="user" @size="small" />
+    </div>
+    <div class="auk-avatar-and-text__text">
+      <p>Jan Jambon</p>
+    </div>
+  </div>
+  {{!-- END-SNIPPET --}}
+</StyleguideSample>

app/pods/styleguide/template.hbs

@@ -109,6 +109,9 @@
 
         <h4 class="br-styleguide-bordered-list-header">{{t "style-guide-static-html-components"}}</h4>
         <ul class="br-styleguide-bordered-list  br-styleguide-bordered-list--on-gray-100">
+          <li>
+            <LinkTo @route="styleguide.avatar">Avatar</LinkTo>
+          </li>
           <li>
             <LinkTo @route="styleguide.pagination">Pagination</LinkTo>
           </li>

app/router.js

@@ -104,6 +104,7 @@ Router.map(function() {
     this.route('alert-skins');
     this.route('alert-types');
     this.route('alert-stack');
+    this.route('avatar');
     this.route('brand');
     this.route('badge');
     this.route('button-loading');

package.json

@@ -39,7 +39,7 @@
     "@ember/render-modifiers": "^1.0.2",
     "@glimmer/component": "^1.0.0",
     "@glimmer/tracking": "^1.0.0",
-    "@kanselarij-vlaanderen/au-kaleidos-css": "^1.20.0",
+    "@kanselarij-vlaanderen/au-kaleidos-css": "^1.20.1",
     "@kanselarij-vlaanderen/au-kaleidos-icons": "^1.3.2",
     "@lblod/ember-acmidm-login": "^1.1.1",
     "@lblod/ember-mock-login": "^0.4.8",