From 98b3f6626f5c42d8de1eaca4d5045646b138a624 Mon Sep 17 00:00:00 2001
From: Garth Braithwaite <garthdb@gmail.com>
Date: Wed, 24 Feb 2021 16:09:24 -0700
Subject: [PATCH] feat: added all the avatar sizes in DNA

BREAKING CHANGE: a size class is now required
---
 components/avatar/index.css           | 80 ++++++++++++++++++++++++++-
 components/avatar/metadata/avatar.yml | 57 ++++++++++++++++++-
 components/avatar/package.json        |  4 +-
 3 files changed, 133 insertions(+), 8 deletions(-)

diff --git a/components/avatar/index.css b/components/avatar/index.css
index 832d196e1b..03d838fb8a 100644
--- a/components/avatar/index.css
+++ b/components/avatar/index.css
@@ -10,11 +10,85 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+@import "../vars/css/components/spectrum-avatar.css";
+
+.spectrum-Avatar--size50 {
+  @remapvars {
+    find: /--spectrum-avatar-size-50(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size75 {
+  @remapvars {
+    find: /--spectrum-avatar-size-75(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size100 {
+  @remapvars {
+    find: /--spectrum-avatar-size-100(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size200 {
+  @remapvars {
+    find: /--spectrum-avatar-size-200(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size300 {
+  @remapvars {
+    find: /--spectrum-avatar-size-300(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size400 {
+  @remapvars {
+    find: /--spectrum-avatar-size-400(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size500 {
+  @remapvars {
+    find: /--spectrum-avatar-size-500(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size600 {
+  @remapvars {
+    find: /--spectrum-avatar-size-600(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
+.spectrum-Avatar--size700 {
+  @remapvars {
+    find: /--spectrum-avatar-size-700(.*)/;
+    filter: color;
+    replace: --spectrum-avatar$1;
+  }
+}
+
 .spectrum-Avatar {
-  inline-size: var(--spectrum-avatar-size-50-width);
-  block-size: var(--spectrum-avatar-size-50-height);
+  inline-size: var(--spectrum-avatar-width);
+  block-size: var(--spectrum-avatar-height);
 
-  border-radius: var(--spectrum-avatar-size-50-border-radius);
+  border-radius: var(--spectrum-avatar-border-radius);
   border-style: none;
 
   -webkit-user-drag: none;
diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml
index 020385cd64..7a6ba139a1 100644
--- a/components/avatar/metadata/avatar.yml
+++ b/components/avatar/metadata/avatar.yml
@@ -1,9 +1,60 @@
-id: avatar
 name: Avatar
 status: Verified
+description: An image representing a user.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/
+sections:
+  - name: Migration Guide
+    description: |
+      ### Sizes added to `avatar`.
+      A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`.
 examples:
   - id: avatar
     name: Standard
     markup: |
-      <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
-      <img class="spectrum-Avatar is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+      <div class="spectrum-Examples spectrum-Examples--vertical">
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size50" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size50 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size75" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size75 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size100" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size100 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size200" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size200 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size300" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size300 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size400" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size400 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size500" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size500 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size600" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size600 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+        <div class="spectrum-Examples-item">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
+          <img class="spectrum-Avatar spectrum-Avatar--size700" src="img/example-ava.jpg" alt="Avatar">
+          <img class="spectrum-Avatar spectrum-Avatar--size700 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
+        </div>
+      </div>
diff --git a/components/avatar/package.json b/components/avatar/package.json
index e0e9e78ef9..9c15879d43 100644
--- a/components/avatar/package.json
+++ b/components/avatar/package.json
@@ -16,7 +16,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/vars": "^3.0.0-beta.1"
+    "@spectrum-css/vars": "^3.0.0"
   },
   "devDependencies": {
     "@spectrum-css/component-builder": "^2.0.0",
@@ -27,4 +27,4 @@
     "access": "public"
   },
   "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
\ No newline at end of file
+}