@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/link/link.js

@@ -6,30 +6,46 @@ class BdLink extends LitElement {
   static properties = {
     href     : { type: String },
     target   : { type: String },
-    kind     : { type: String, reflect: true },
+    kind     : { type: String,  reflect: true },
     underline: { type: Boolean, reflect: true },
-    disabled : { type: Boolean, reflect: true }
+    disabled : { type: Boolean, reflect: true },
+    fontSize : { type: String,  attribute: "font-size" },
+    color    : { type: String }
   };
 
   constructor() {
     super();
-    this.href = "#";
-    this.target = "_self";
-    this.kind = "primary";
+    this.href      = "#";
+    this.target    = "_self";
+    this.kind      = "primary";
     this.underline = false;
-    this.disabled = false;
+    this.disabled  = false;
+    this.fontSize  = "";
+    this.color     = "";
   }
 
   static styles = [tokens, linkCSS];
 
-  render() {
-    const kindClass = `bd-link--${this.kind}`;
-    const underlineClass = this.underline ? "bd-link--underline" : "";
-    const disabledClass = this.disabled ? "bd-link--disabled" : "";
+  get _classes() {
+    return [
+      "bd-link",
+      `bd-link--${this.kind}`,
+      this.underline ? "bd-link--underline" : "",
+      this.disabled  ? "bd-link--disabled"  : ""
+    ].filter(Boolean).join(" ");
+  }
 
+  get _inlineStyle() {
+    const styles = [];
+    if (this.fontSize) styles.push(`font-size: ${this.fontSize}`);
+    if (this.color)    styles.push(`color: ${this.color}`);
+    return styles.join("; ");
+  }
+
+  render() {
     if (this.disabled) {
       return html`
-        <span class="bd-link ${kindClass} ${underlineClass} ${disabledClass}">
+        <span class="${this._classes}" style="${this._inlineStyle}">
           <slot></slot>
         </span>
       `;
@@ -37,7 +53,8 @@ class BdLink extends LitElement {
 
     return html`
       <a
-        class="bd-link ${kindClass} ${underlineClass} ${disabledClass}"
+        class="${this._classes}"
+        style="${this._inlineStyle}"
         href="${this.href}"
         target="${this.target}"
         @click="${this._handleClick}"