feat(clock): small analogue clock face (#54)

* feat(clock): small analogue clock face Co-authored-by: dtanp <[email protected]> Co-authored-by: Domrongpon Tanpaibul <[email protected]>
Refinitiv · Nov 3, 2021 · bc4b2a8 · bc4b2a8
1 parent fb6c408
commit bc4b2a8
Show file tree

Hide file tree

Showing 9 changed files with 269 additions and 55 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-clock.less b/packages/elemental-theme/src/custom-elements/ef-clock.less
@@ -1,3 +1,13 @@
+// mixin to allow inherited themes able to customize color of svg
+.default-analog-svg(@color) {
+  background: inline-svg('../resources/images/clock/default.svg', 'svg', 'color: @{color}') no-repeat center center;
+}
+
+.small-analog-svg(@color) {
+  background: inline-svg('../resources/images/clock/small.svg', 'svg', 'color: @{color}') no-repeat center center / cover;
+}
+//
+
 :host {
   font-size: 2.5em;
   user-select: none;
@@ -18,8 +28,9 @@
   }
 
   [part~='am-pm'] {
-    font-size: 35%;
-    line-height: 2em;
+    font-size: 60%;
+    line-height: 1.5em;
+    padding-left: 3px;
   }
 
   [part='increment-button'], [part='decrement-button'] {
@@ -73,64 +84,108 @@
 
   // Analogue clock
   &[analogue] {
-    min-width: 160px;
+    border-radius: 100%;
+    width: 160px;
     max-width: 200px;
-    background: inline-svg('../resources/images/clock/default.svg', 'svg', 'color: @{global-text-color}') no-repeat center center;
-  }
+    .default-analog-svg(@global-text-color);
 
-  [part~="hand"]::after {
-    content: '';
-    position: absolute;
-  }
+    [part=digital] {
+      display: flex;
+      position: absolute;
+      top: 20%;
+      left: 0;
+      right: 0;
+      justify-content: center;
+      font-size: 0.3em;
+      [part~='am-pm'] {
+        font-size: 100%;
+        line-height: 1;
+      }
+    }
 
-  [part~="second"] {
-    &::after {
-      width: 1%;
+    [part=hands]::after {
+      content: '';
+      position: absolute;
+      border-radius: 50%;
+      width: 9%;
+      height: 9%;
+      top: 45.5%;
+      left: 45.5%;
+      border: 2px solid @scheme-color-complementary;
+      box-sizing: border-box;
+      z-index: 1;
+    }
+
+    [part~="hand"]::after {
+      content: '';
+      position: absolute;
+    }
+
+    [part~="second"] {
+      &::after {
+        width: 1%;
+        height: 43%;
+        margin-top: 3%;
+        margin-left: 49.5%;
+        background-color: @scheme-color-primary;
+      }
+    }
+
+    [part~="minute"]::after {
+      width: 3%;
       height: 43%;
       margin-top: 3%;
-      margin-left: 49.5%;
-      background-color: @scheme-color-primary;
+      margin-left: 48.5%;
+      background-color: @scheme-color-complementary;
     }
-  }
 
-  [part~="minute"]::after {
-    width: 3%;
-    height: 43%;
-    margin-top: 3%;
-    margin-left: 48.5%;
-    background-color: @scheme-color-complementary;
-  }
-
-  [part~="hour"] {
-    &::after {
+    [part~="hour"]::after {
       width: 3%;
       height: 28%;
       margin-top: 18%;
       margin-left: 48.5%;
       background-color: @scheme-color-complementary;
     }
-  }
 
-  [part=digital] {
-    display: flex;
-    position: absolute;
-    top: 20%;
-    left: 0;
-    right: 0;
-    justify-content: center;
-    font-size: 0.4em;
-  }
+    &[size="small"] {
+      font-size: 10px;
+      min-width: 50px;
+      .small-analog-svg(@global-text-color);
+      [part=hands]::after {
+        background-color: @scheme-color-complementary;
+      }
 
-  [part=hands]::after {
-    content: '';
-    position: absolute;
-    border-radius: 50%;
-    width: 9%;
-    height: 9%;
-    top: 45.5%;
-    left: 45.5%;
-    border: 2px solid @scheme-color-complementary;
-    box-sizing: border-box;
-    z-index: 1;
+      [part~="second"] {
+        &::after {
+          width: 1.5%;
+          height: 32%;
+          margin-top: 16%;
+        }
+      }
+
+      [part~="minute"]::after {
+        height: 37%;
+        margin-top: 12%;
+      }
+
+      [part~="hour"] {
+        &::after {
+          height: 26%;
+          margin-top: 23%;
+        }
+      }
+
+      [part~='am-pm'] {
+        padding-left: 0;
+        display: flex;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 15%;
+        font-size: 100%;
+        justify-content: center;
+      }
+    }
   }
+
 }
diff --git a/packages/elemental-theme/src/resources/images/clock/small.svg b/packages/elemental-theme/src/resources/images/clock/small.svg
diff --git a/packages/elements/src/clock/__demo__/index.html b/packages/elements/src/clock/__demo__/index.html
@@ -62,7 +62,7 @@
       <ef-clock analogue show-seconds value="10:08:40"></ef-clock>
     </demo-block>
 
-    <demo-block header="Analogue Clock" tags="analogue,am-pm">
+    <demo-block header="Analogue Clock with AM/PM" tags="analogue,am-pm">
       <ef-clock analogue am-pm value="10:08:40"></ef-clock>
       <ef-clock analogue am-pm show-seconds value="10:08:40"></ef-clock>
     </demo-block>
@@ -77,8 +77,20 @@
       <ef-clock analogue interactive show-seconds tick value="10:08:40"></ef-clock>
     </demo-block>
 
-    <demo-block header="Responsive" layout="normal" tags="analogue,responsive">
+    <demo-block header="Responsive" tags="analogue,responsive">
+      <ef-clock analogue style="width:30%; margin-right: 20px;" value="10:08:40" show-seconds tick></ef-clock>
       <ef-clock analogue value="10:08:40" show-seconds tick></ef-clock>
+      <ef-clock style="font-size: 2vw;" show-second am-pm></ef-clock>
+      <ef-clock style="font-size: 5vw;" show-second am-pm></ef-clock>
+      <ef-clock style="font-size: 10vw;" show-second am-pm></ef-clock>
     </demo-block>
+
+    <demo-block header="Small Analogue Clock " tags="analogue, small">
+      <ef-clock style="width: 120px;" analogue show-seconds am-pm value="01:45:00"></ef-clock>
+      <ef-clock style="width: 64px;" analogue show-seconds am-pm value="01:45:00"></ef-clock>
+      <ef-clock style="width: 64px;" analogue show-seconds tick am-pm value="01:45:00"></ef-clock>
+      <ef-clock style="width: 64px; opacity: 0.6;" analogue value="01:45:00"></ef-clock>
+    </demo-block>
+
   </body>
 </html>
diff --git a/packages/elements/src/clock/__snapshots__/Clock.md b/packages/elements/src/clock/__snapshots__/Clock.md
@@ -46,3 +46,21 @@
 
 ```
 
+####   `DOM structure of small size analogue is correct`
+
+```html
+<div part="hands">
+  <div
+    part="hand hour"
+    style="transform: rotate(0deg)"
+  >
+  </div>
+  <div
+    part="hand minute"
+    style="transform: rotate(0deg)"
+  >
+  </div>
+</div>
+
+```
+
diff --git a/packages/elements/src/clock/__test__/clock.analogue.test.js b/packages/elements/src/clock/__test__/clock.analogue.test.js
@@ -1,4 +1,4 @@
-import { fixture, expect, elementUpdated } from '@refinitiv-ui/test-helpers';
+import { fixture, expect, elementUpdated, nextFrame } from '@refinitiv-ui/test-helpers';
 
 import '@refinitiv-ui/elements/clock';
 import '@refinitiv-ui/elemental-theme/light/ef-clock.js';
@@ -37,12 +37,67 @@ describe('clock/Analogue', () => {
 
       expect(getClockHand('second'), 'second hand should appear').to.be.not.null;
     });
+
     it('Shows correct second hand angle when time is set to 15:30:45', async () => {
       el.value = '15:30:45';
       el.showSeconds = true;
       await elementUpdated(el);
 
       expect(getClockHand('second').style.transform, 'seconds hand should have 270 degrees angle').to.be.equal('rotate(270deg)');
     });
+
+    it('Shows small size clock when width is less than 130px', async () => {
+      expect(el.shadowRoot.querySelector('[part="digital"]'), 'digital clock should display inside a default analog clock').not.to.be.null;
+
+      // make size smaller than defined break point
+      el.style.width = '129px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.shadowRoot.querySelector('[part="digital"]'), 'digital clock should not display inside small clock').to.be.null;
+      expect(el.amPm, 'am-pm should be hidden by default on small clock').to.be.equal(false);
+      expect(el.shadowRoot.querySelector('[part="segment am-pm"]'), 'AM/PM should not display by default in small clock').to.be.null;
+    });
+
+    it('Small size clock show AM/PM if it has attribute "am-pm"', async () => {
+      el.style.width = '129px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      // test default behavior
+      expect(el.hasAttribute('am-pm')).to.be.equal(false);
+      expect(el.amPm).to.be.equal(false);
+      expect(el.shadowRoot.querySelector('[part="segment am-pm"]')).to.be.null;
+
+      // test when it has am-pm attribute
+      el = await fixture('<ef-clock analog am-pm></ef-clock>');
+      el.style.width = '129px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.amPm, 'amPm property should be true if am-pm attribute is set').to.be.equal(true);
+      expect(el.shadowRoot.querySelector('[part="segment am-pm"]'), 'AM/PM should display on clock').not.to.be.null;
+
+      // test when am-pm is set programmatically
+      el.amPm = false;
+      await elementUpdated(el);
+      await nextFrame();
+      expect(el.shadowRoot.querySelector('[part="segment am-pm"]'), 'AM/PM should be hidden if set amPm to false').to.be.null;
+    });
+
+    it('Attribute "size=small" should not present if it is not analogue clock', async () => {
+      el = await fixture('<ef-clock></ef-clock>');
+      el.style.width = '150px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.hasAttribute('size'), 'size attribute should not show if not analog').to.be.equal(false);
+
+      el.style.width = '129px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.hasAttribute('size'), 'size attribute should not show if not analog even size is small').to.be.equal(false);
+    });
   });
 });
diff --git a/packages/elements/src/clock/__test__/clock.test.js b/packages/elements/src/clock/__test__/clock.test.js
@@ -2,7 +2,8 @@ import {
   fixture,
   expect,
   elementUpdated,
-  aTimeout
+  aTimeout,
+  nextFrame
 } from '@refinitiv-ui/test-helpers';
 
 import '@refinitiv-ui/elements/clock';
@@ -20,6 +21,14 @@ describe('clock/Clock', () => {
       const el = await fixture('<ef-clock analogue></ef-clock>');
       expect(el).shadowDom.to.equalSnapshot();
     });
+    it('DOM structure of small size analogue is correct', async () => {
+      el = await fixture('<ef-clock analogue></ef-clock>');
+      el.style.width = '129px';
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el).shadowDom.to.equalSnapshot();
+    });
   });
 
   describe('Show seconds', () => {