Render user icon as a last resort for the VelvetAvatar component

Bagaar · Dec 19, 2023 · c0ff7e3 · c0ff7e3
1 parent abe2aa8
commit c0ff7e3
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 12 deletions.
diff --git a/addon/components/velvet-avatar.hbs b/addon/components/velvet-avatar.hbs
@@ -14,6 +14,6 @@
   {{else if @initials}}
     {{@initials}}
   {{else}}
-    ?
+    <this.VelvetIconUser class="velvet-avatar-icon" />
   {{/if}}
 </div>
diff --git a/addon/components/velvet-avatar.ts b/addon/components/velvet-avatar.ts
@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import VelvetIconUser from "velvet-thunder/components/velvet-icon/user";
 
 interface VelvetAvatarSignature {
   Args: {
@@ -25,6 +26,8 @@ interface VelvetAvatarSignature {
 }
 
 export default class VelvetAvatar extends Component<VelvetAvatarSignature> {
+  VelvetIconUser = VelvetIconUser;
+
   get initials() {
     return (this.args.name || "")
       .split(" ")

diff --git a/addon/components/velvet-button.ts b/addon/components/velvet-button.ts
@@ -11,7 +11,7 @@ interface VelvetButtonSignature {
     /// Indicate if the button discloses content.
     /// @default [false]
     isDisclosure?: boolean;
-    /// Indicate if the button should display a loading state.
+    /// Indicate if the button should render a loading state.
     /// @default [false]
     isLoading?: boolean;
     /// Indicate if the button is pill shaped.

diff --git a/addon/components/velvet-icon-button.ts b/addon/components/velvet-icon-button.ts
@@ -11,7 +11,7 @@ interface VelvetIconButtonSignature {
     /// Indicate if the icon button discloses content.
     /// @default [false]
     isDisclosure?: boolean;
-    /// Indicate if the icon button should display a loading state.
+    /// Indicate if the icon button should render a loading state.
     /// @default [false]
     isLoading?: boolean;
     /// Make the icon button renderless.

diff --git a/addon/components/velvet-icon/user.hbs b/addon/components/velvet-icon/user.hbs
@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  height="16"
+  width="14"
+  viewBox="0 0 448 512"
+  ...attributes
+>
+  <path
+    d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/addon/components/velvet-icon/user.ts b/addon/components/velvet-icon/user.ts
@@ -0,0 +1,7 @@
+import templateOnlyComponent from "@ember/component/template-only";
+
+interface VelvetIconSignature {
+  Element: SVGElement;
+}
+
+export default templateOnlyComponent<VelvetIconSignature>();
diff --git a/addon/components/velvet-select.hbs b/addon/components/velvet-select.hbs
@@ -9,14 +9,14 @@
     (if @isInvalid "velvet-select-invalid")
     (if @isPill "velvet-select-pill")
     (if @isDisabled "velvet-select-disabled")
-    (if this.shouldDisplayPlaceholder "velvet-select-placeholder")
+    (if this.shouldRenderPlaceholder "velvet-select-placeholder")
     "form-select"
   }}
   disabled={{@isDisabled}}
   {{on "change" this.changeHandler}}
   ...attributes
 >
-  {{#if this.shouldDisplayPlaceholder}}
+  {{#if this.shouldRenderPlaceholder}}
     <option disabled selected={{true}}>
       {{@placeholder}}
     </option>

diff --git a/addon/components/velvet-select.ts b/addon/components/velvet-select.ts
@@ -51,7 +51,7 @@ export default class VelvetSelect extends Component<VelvetSelectSignature> {
     return this.args.selected !== undefined && this.args.selected !== null;
   }
 
-  get shouldDisplayPlaceholder() {
+  get shouldRenderPlaceholder() {
     return Boolean(this.args.placeholder) && this.hasSelection === false;
   }
 

diff --git a/app/components/velvet-icon/user.js b/app/components/velvet-icon/user.js
@@ -0,0 +1 @@
+export { default } from "velvet-thunder/components/velvet-icon/user";
diff --git a/docs/components/avatar/index.md b/docs/components/avatar/index.md
@@ -48,9 +48,9 @@
 
 <!-- component-signature: velvet-avatar -->
 
-The order to determine what to display is as follows:
+The order to determine what to render is as follows:
 
-1. If the `@src` argument is provided, the image will be displayed
+1. If the `@src` argument is provided, the image will be rendered
 1. If the `@src` argument is **not** provided, the `@name` argument will be used to determine the initials
-1. If the `@name` argument is **not** provided, the `@initials` argument will be displayed
-1. If the `@initials` argument is **not** provided, a question mark will be displayed as a last resort
+1. If the `@name` argument is **not** provided, the `@initials` argument will be rendered
+1. If the `@initials` argument is **not** provided, a user icon will be rendered as a last resort
diff --git a/tailwind/components/avatar.js b/tailwind/components/avatar.js
@@ -24,5 +24,9 @@ module.exports = () => ({
     "&-round": {
       "@apply rounded-full": {},
     },
+
+    "&-icon": {
+      "@apply h-4 w-4": {},
+    },
   },
 });
diff --git a/tests/integration/components/velvet-avatar-test.ts b/tests/integration/components/velvet-avatar-test.ts
@@ -88,12 +88,12 @@ module("Integration | Component | velvet-avatar", function (hooks) {
     assert.dom(SELECTOR).hasText("JP");
   });
 
-  test("it renders a question mark as a last resort", async function (assert) {
+  test("it renders a user icon as a last resort", async function (assert) {
     await render(hbs`
       <VelvetAvatar />
     `);
 
-    assert.dom(SELECTOR).hasText("?");
+    assert.dom(`${SELECTOR} .velvet-avatar-icon`).exists();
   });
 
   test("`...attributes` works", async function (assert) {