Merge pull request #775 from BY00565233/SURF-2067

feat(beacon): implement override option for default styles

Author: 100stacks

docs/components/beacon/beacon-demo.js

@@ -70,4 +70,49 @@ import Util from '../../_util';
             },
         });
     }//vue-beacon-inline-styles
+
+    if (document.getElementById('vue-beacon-Override-styles')) {
+        new Vue({
+            el: '#vue-beacon-Override-styles',
+            data: {
+                beaconOverrideStyles: 'top: 42%; left: 24px; --hxBeacon: #d32f2f;',
+                isOpen: false,
+                isDismissed: false,
+            },
+            methods: {
+                onEvent: function () {
+                    this.isOpen = true;
+                    this.isDismissed = true;
+                },
+
+            },
+            computed: {
+                beaconOverrideSnippet: function () {
+                    if (this.isDismissed) {
+                        return '';
+                    } else {
+                        return `<hx-beacon style="${this.beaconOverrideStyles}"></hx-beacon>`;
+                    }
+                },
+                snippetOverrideStyles: function () {
+                    return Util.snippet(`
+                        <!-- Providing a border around the <div> for illustration -->
+                        <div style="position: relative;">
+                          ${this.beaconOverrideSnippet}
+                          <hx-disclosure class="hxBtn" aria-controls="overrideMenuId">
+                            <hx-icon type="cog"></hx-icon>
+                            <span>Actions</span>
+                            <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+                          </hx-disclosure>
+                          <hx-menu id="overrideMenuId">
+                            <hx-menuitem>Action 1</hx-menuitem>
+                            <hx-menuitem>Action 2</hx-menuitem>
+                            <hx-menuitem>Action 3</hx-menuitem>
+                          </hx-menu>
+                        </div>
+                    `);
+                },
+            },
+        });
+    }//vue-beacon-Override-styles
 })();

docs/components/beacon/index.html

@@ -36,7 +36,6 @@ <h2 id="basic-beacon">Basic Beacon</h2>
     </div>
   </section>
 
-
   <section>
     <header>
       <h2 id="beacon-with-inline-styles">Beacon with Inline Styles</h2>
@@ -100,4 +99,66 @@ <h2 id="beacon-with-inline-styles">Beacon with Inline Styles</h2>
       </footer>
     </div>
   </section>
+
+  <section>
+    <header>
+      <h2 id="beacon-with-color-override">Beacon with Color Override</h2>
+    </header>
+    <p>
+      This is an example implementation of <code>&lt;hx-beacon&gt;</code>
+      With color override.
+      Hexidecimal or named color values are valid, though hex values are
+      best practice for consistency.
+    </p>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="exclamation-triangle"></hx-icon>
+        User can use <b>--hxBeacon</b> property for overriding the default Beacon
+        component color.
+        (Example:<b>--hxBeacon:#d32f2f or --hxBeacon:red</b>)
+    </p>
+    <div class="example" id="vue-beacon-Override-styles" v-cloak>
+      <header>
+        <form class="beta-hxForm">
+          <fieldset>
+            <hx-text-control>
+              <input
+                id="txtBeaconOverrideStyles"
+                type="text"
+                v-model="beaconOverrideStyles"
+              />
+              <label for="txtBeaconOverrideStyles">
+                Beacon Inline Styles
+              </label>
+            </hx-text-control>
+            <p class="hxSubdued hxSubBody">
+              <hx-icon type="info-circle"></hx-icon>
+              Hexadecimal and named colors are valid values.
+            </p>
+          </fieldset>
+        </form>
+      </header>
+
+      <div style="position: relative; border: 1px dashed black;"> <!-- demo snippet -->
+        <hx-beacon
+          @dismiss="onEvent"
+          :style="beaconOverrideStyles"
+        >
+        </hx-beacon>
+        <hx-disclosure class="hxBtn" aria-controls="overrideMenuId">
+          <hx-icon type="cog"></hx-icon>
+          <span>Actions</span>
+          <hx-icon class="hxPrimary" type="angle-down"></hx-icon>
+        </hx-disclosure>
+        <hx-menu id="overrideMenuId" :open="isOpen">
+          <hx-menuitem>Action 1</hx-menuitem>
+          <hx-menuitem>Action 2</hx-menuitem>
+          <hx-menuitem>Action 3</hx-menuitem>
+        </hx-menu>
+      </div>
+
+      <footer>
+        <pre><code v-text="snippetOverrideStyles"></code></pre>
+      </footer>
+    </div>
+  </section>
 {% endblock %}

src/elements/hx-beacon/_shadow.scss

@@ -11,7 +11,7 @@
       -webkit-animation: hx-pulse 2s infinite linear;
       animation: hx-pulse 2s infinite linear;
       border-radius: 3rem;
-      box-shadow: 0 0 1px 1px $gray-750;
+      box-shadow: 0 0 1px 1px var(--hxBeacon, $gray-750);
       content: "";
       height: 1rem;
       left: 0;

src/scss/components/beacon/index.scss

@@ -3,9 +3,9 @@
 
 /// ========== hxBeacon ========== ///
 hx-beacon {
-  background-color: $gray-0;
+  background-color: var(--hxBeacon, $gray-0);
   border-radius: 1rem;
-  box-shadow: 0 0 2px 2px $gray-600;
+  box-shadow: 0 0 2px 2px var(--hxBeacon, $gray-600);
   display: block;
   height: 1rem;
   margin: 0;