react-led-digit - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

lib/Digit/digit.css.generated.js

@@ -5,3 +5,3 @@ /* This file is auto-generated */
   src: `src/Digit/digit.css`,
-  hash: `3775688054381318`,
+  hash: `2ftmruudz6u`,
   content: `
@@ -22,3 +22,3 @@ /**
   --spacing: var(--segment-spacing, 0.0625em); /* =1px */
-  --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
+  --shift-ad: var(--segment-shift-ad, 0em); /* squeezes segments A and D */
   --opacity-on: var(--segment-opacity-on, 1);
@@ -35,2 +35,3 @@ --opacity-off: var(--segment-opacity-off, 0.1);
   --thick: var(--thickness);
+  --thick-half: calc(var(--thick) * 0.5);
   --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
@@ -47,3 +48,3 @@ --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
   --radius-round: calc(var(--thick) * 0.33);
-  --radius-pill: 100em;
+  --radius-pill: var(--thick-half, 10em);
 
@@ -74,5 +75,6 @@ display: inline-block;
 
+  &.digit,
   .opacity-wrapper,
   .opacity-wrapper .segment {
-    transition-property: background-color, border-color, opacity, visibility;
+    transition-property: all;
     transition-duration: var(--transition-duration);
@@ -153,6 +155,6 @@ }
       &.A {
-        top: calc(var(--filament) + var(--shft));
+        top: calc(var(--shift-ad) + var(--shft));
       }
       &.D {
-        bottom: calc(var(--filament) + var(--shft));
+        bottom: calc(var(--shift-ad) + var(--shft));
       }
@@ -167,5 +169,5 @@ &.G {
       clip-path: polygon(
-        0 50%,
-        var(--th-half) 0,
-        var(--th-half-100) 0,
+        0% 50%,
+        var(--th-half) 0%,
+        var(--th-half-100) 0%,
         100% 50%,
@@ -178,5 +180,5 @@ var(--th-half-100) 100%,
         clip-path: polygon(
-          0 calc(50% - var(--shft)),
-          calc(var(--th-half) - var(--shft)) 0,
-          calc(var(--th-half-100) + var(--shft)) 0,
+          0% calc(50% - var(--shft)),
+          calc(var(--th-half) - var(--shft)) 0%,
+          calc(var(--th-half-100) + var(--shft)) 0%,
           100% calc(50% - var(--shft)),
@@ -190,5 +192,5 @@ calc(var(--th-half-100) - var(--shft)) 100%,
         clip-path: polygon(
-          0 calc(50% + var(--shft)),
-          calc(var(--th-half) + var(--shft)) 0,
-          calc(var(--th-half-100) - var(--shft)) 0,
+          0% calc(50% + var(--shft)),
+          calc(var(--th-half) + var(--shft)) 0%,
+          calc(var(--th-half-100) - var(--shft)) 0%,
           100% calc(50% + var(--shft)),
@@ -202,5 +204,5 @@ calc(var(--th-half-100) + var(--shft)) 100%,
       clip-path: polygon(
-        50% 0,
-        0 var(--th-half),
-        0 var(--th-half-100),
+        50% 0%,
+        0% var(--th-half),
+        0% var(--th-half-100),
         50% 100%,
@@ -213,5 +215,5 @@ 100% var(--th-half-100),
         clip-path: polygon(
-          calc(50% + var(--shft)) 0,
-          0 calc(var(--th-half) + var(--shft)),
-          0 var(--th-half-100),
+          calc(50% + var(--shft)) 0%,
+          0% calc(var(--th-half) + var(--shft)),
+          0% var(--th-half-100),
           50% 100%,
@@ -225,5 +227,5 @@ 100% var(--th-half-100),
         clip-path: polygon(
-          50% 0,
-          0 var(--th-half),
-          0 calc(var(--th-half-100) - var(--shft)),
+          50% 0%,
+          0% var(--th-half),
+          0% calc(var(--th-half-100) - var(--shft)),
           calc(50% + var(--shft)) 100%,
@@ -237,5 +239,5 @@ 100% calc(var(--th-half-100) + var(--shft)),
         clip-path: polygon(
-          50% 0,
-          0 var(--th-half),
-          0 calc(var(--th-half-100) + var(--shft)),
+          50% 0%,
+          0% var(--th-half),
+          0% calc(var(--th-half-100) + var(--shft)),
           calc(50% - var(--shft)) 100%,
@@ -249,5 +251,5 @@ 100% calc(var(--th-half-100) - var(--shft)),
         clip-path: polygon(
-          calc(50% - var(--shft)) 0,
-          0 calc(var(--th-half) - var(--shft)),
-          0 var(--th-half-100),
+          calc(50% - var(--shft)) 0%,
+          0% calc(var(--th-half) - var(--shft)),
+          0% var(--th-half-100),
           50% 100%,
@@ -262,14 +264,24 @@ 100% var(--th-half-100),
   /* segment shapes */
+  &.shape-default .segment.segment,
   &.shape-rect .segment.segment {
-    clip-path: unset;
+    border-radius: 0;
   }
   &.shape-round .segment.segment {
     border-radius: var(--radius-round);
-    clip-path: unset;
   }
   &.shape-pill .segment.segment {
     border-radius: var(--radius-pill);
-    clip-path: unset;
   }
 
+  &.shape-rect,
+  &.shape-round,
+  &.shape-pill {
+    .segment.segment.horizontal {
+      clip-path: polygon(0% 50%, 0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
+    }
+    .segment.segment.vertical {
+      clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 50% 100%, 100% 100%, 100% 0%);
+    }
+  }
+
   &.ampm {
@@ -276,0 +288,0 @@ --digit-width: calc(var(--length) + var(--thick) + var(--spacing));

lib/Digit/Digit.stories.js

@@ -43,3 +43,3 @@ "use strict";
             spacing: '0.25rem',
-            filament: '.0625rem',
+            shiftAD: '.0625rem',
         } })));
@@ -46,0 +46,0 @@ };

lib/Digit/UnstyledDigit.d.ts

@@ -17,3 +17,3 @@ import React, { CSSProperties } from 'react';
     spacing?: CSSProperties['width'];
-    filament?: CSSProperties['width'];
+    shiftAD?: CSSProperties['width'];
     opacityOn?: CSSProperties['opacity'];
@@ -20,0 +20,0 @@ opacityOff?: CSSProperties['opacity'];

lib/Digit/UnstyledDigit.js

@@ -27,3 +27,3 @@ "use strict";
     const segments = type && valueToSegments(value); // {A: true, ...}
-    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-filament': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.filament, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
+    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-shift-ad': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.shiftAD, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
     if (type === 'digit')
@@ -30,0 +30,0 @@ return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({ "aria-label": v }, rest, segments, { style: sx }));

lib/Digit/UnstyledDigit.stories.js

@@ -42,3 +42,3 @@ "use strict";
             spacing: '0.25rem',
-            filament: '.0625rem',
+            shiftAD: '.0625rem',
         } })));
@@ -45,0 +45,0 @@ };

package.json

 {
   "name": "react-led-digit",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

 <img src="images/react-led-digit.gif" width="576" alt="react led digit" />
 
-# React Seven-Segment Digit Component
+# Led Digit (Seven-Segment) React Component
 
-Intended to use in digital clock or calculator.  
-HTML and CSS only.  
 → [Codesandbox playground](https://codesandbox.io/p/sandbox/friendly-dewdney-7jvh5w)
@@ -13,3 +11,2 @@
 import { Digit, BlinkingDigit } from 'react-led-digit';
-import 'react-led-digit/lib/Digit/digit.css';
 
@@ -25,1 +22,28 @@ <div className="digital-clock">
 ```
+
+Segment style example ([sandbox](https://codesandbox.io/p/sandbox/react-led-digit-forked-c4f2v3)):
+
+```tsx
+import { Digit, BlinkingDigit } from 'react-led-digit';
+
+<>
+  <Digit
+    value="0"
+    segmentStyle={{
+      color: 'red',
+      colorOff: 'blue',
+      length: '1em',
+      thickness: '.5em',
+      cornerShift: '-.1em',
+      spacing: '-.1em',
+      shiftAD: '.1em',
+      opacityOn: 1,
+      opacityOff: 0.25,
+      transitionDuration: '.5s',
+    }}
+  />
+  <Digit value="1" shape="rect" />
+  <Digit value="2" shape="pill" />
+  <Digit value="3" shape="round" />
+</>;
+```

No alert changes

Improved metrics

Total package byte prevSize

84240

increased by1.41%

Lines of code

1773

increased by1.26%

Number of lines in readme file

48

increased by100%

No dependency changes