Issue #64: Add scale to swatch.

Esri · May 16, 2020 · bffd87c · bffd87c
1 parent 9e2e180
commit bffd87c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 28 deletions.
diff --git a/src/components/calcite-color-swatch/calcite-color-swatch.scss b/src/components/calcite-color-swatch/calcite-color-swatch.scss
@@ -1,26 +1,33 @@
-$size: 20px;
+$size-s: 16px;
+$size-m: 24px;
+$size-l: 32px;
 
-.swatch {
-  display: inline-block;
-  box-sizing: border-box;
-  height: $size;
-  width: $size;
-  border: 1px solid;
+:host {
+  display: inline-flex;
 }
 
-.swatch--active {
-  border-radius: 50%;
-  border-width: 1px;
-  position: relative;
+:host([scale="s"]) {
+  .swatch {
+    height: $size-s;
+    width: $size-s;
+  }
+}
 
-  &::after {
-    content: "";
-    border: 2px solid var(--calcite-ui-border-3);
-    border-radius: 50%;
-    position: absolute;
-    left: 0px;
-    right: 0px;
-    top: 0px;
-    bottom: 0px;
+:host([scale="m"]) {
+  .swatch {
+    height: $size-m;
+    width: $size-m;
   }
 }
+
+:host([scale="l"]) {
+  .swatch {
+    height: $size-l;
+    width: $size-l;
+  }
+}
+
+.swatch {
+  box-sizing: border-box;
+  border: 1px solid;
+}
diff --git a/src/components/calcite-color-swatch/calcite-color-swatch.tsx b/src/components/calcite-color-swatch/calcite-color-swatch.tsx
@@ -1,6 +1,7 @@
 import { Component, Prop, h, Host, Watch, VNode } from "@stencil/core";
 import Color from "color";
 import { CSS } from "./resources";
+import { Scale } from "../../interfaces/common";
 
 const DEFAULT_COLOR = Color();
 
@@ -37,6 +38,14 @@ export class CalciteColorSwatch {
   })
   isActive = false;
 
+  /**
+   * The component scale.
+   */
+  @Prop({
+    reflect: true,
+  })
+  scale: Exclude<Scale, "xs" | "xl"> = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Private State/Props
@@ -56,23 +65,34 @@ export class CalciteColorSwatch {
   }
 
   render(): VNode {
-    const { internalColor, isActive } = this;
-
+    const { internalColor, isActive, scale } = this;
     const hex = internalColor.hex();
 
     const classes = {
       [CSS.swatch]: true,
-      [CSS.swatchActive]: isActive,
     };
 
-    const style = {
-      "background-color": hex,
-      "border-color": internalColor.darken(0.25).hex(),
-    };
+    const contrastingColor = internalColor.darken(0.25).hex();
 
     return (
       <Host aria-label={hex} title={hex}>
-        <div class={classes} style={style} />
+        {isActive ? (
+          <calcite-icon
+            icon="circle-f"
+            scale={scale}
+            style={{
+              color: contrastingColor,
+            }}
+          />
+        ) : (
+          <div
+            class={classes}
+            style={{
+              backgroundColor: hex,
+              borderColor: contrastingColor,
+            }}
+          />
+        )}
       </Host>
     );
   }