@purpurds/countdown 8.8.0 → 8.9.0

package/src/counter.module.scss

@@ -1,6 +1,10 @@
+@use "@purpurds/tokens/breakpoint/variables" as *;
 @use "@purpurds/heading/src/heading.mixins.scss" as heading;
 @use "@purpurds/paragraph/src/paragraph.mixins.scss" as paragraph;
 
+$countdown-container-queries-selector: "[class*=" purpur-countdown--use-container-queries "]";
+$countdown-media-queries-selector: "[class*=" purpur-countdown--use-media-queries "]";
+
 $root: ".purpur-countdown-counter";
 
 @mixin size {
@@ -13,24 +17,20 @@ $root: ".purpur-countdown-counter";
 }
 
 #{$root} {
-  @include size();
-
   display: grid;
   justify-items: center;
   align-items: center;
-
   padding: var(--purpur-spacing-100);
   border-radius: var(--purpur-border-radius-md);
   background-color: var(--bg-color);
   color: var(--text-color);
-
   overflow: hidden;
 
-  & > #{$root}__number {
-    position: relative;
+  &__number {
+    @include size();
 
+    position: relative;
     width: 100%;
-
     color: inherit;
     text-align: center;
 
@@ -45,18 +45,47 @@ $root: ".purpur-countdown-counter";
           position: absolute;
           bottom: 100%;
           inset-inline: 0;
-
           color: inherit;
-
           animation: tick-animation-pseudo 0.25s forwards;
         }
       }
     }
   }
-  & > #{$root}__label {
+
+  &__label {
     @include paragraph.purpur-additional-100();
 
     color: inherit;
+
+    &--abbr abbr {
+      text-decoration: none;
+    }
+
+    &--full {
+      display: none;
+    }
+
+    @at-root #{$countdown-container-queries-selector} & {
+      @container countdown (min-width: #{$purpur-breakpoint-md}) {
+        &--abbr {
+          display: none;
+        }
+        &--full {
+          display: block;
+        }
+      }
+    }
+
+    @at-root #{$countdown-media-queries-selector} & {
+      @media (min-width: $purpur-breakpoint-md) {
+        &--abbr {
+          display: none;
+        }
+        &--full {
+          display: block;
+        }
+      }
+    }
   }
 }
 

package/src/counter.tsx

@@ -23,8 +23,8 @@ export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
   const ref = useRef<HTMLHeadingElement>(null);
   const id = `${tag}-interval`;
 
-  const [currentTime, setCurrentTime] = useState(getDiffs(end)[tag]);
-  const [nextTime, setNextTime] = useState(getNext(currentTime, tag));
+  const [currentTime, setCurrentTime] = useState(0);
+  const [nextTime, setNextTime] = useState(0);
   const [animationKey, setAnimationKey] = useState(0);
 
   const checktime = useCallback(() => {
@@ -35,6 +35,11 @@ export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
     setCurrentTime(diffs[tag]);
   }, [end, tag]);
 
+  useEffect(() => {
+    checktime();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     intervals.set(id, setInterval(checktime, inMs.second));
     return () => clearInterval(intervals.get(id)!);
@@ -45,6 +50,7 @@ export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
   }, [currentTime]);
 
   const counterTag = counterLabels[tag];
+  const counterTagAbbr = counterLabels[`${tag}Abbr`];
 
   return (
     <div
@@ -54,14 +60,25 @@ export const Counter = ({ tag, size, end, counterLabels }: CounterProps) => {
       data-testid={`counter-${tag}`}
     >
       <Paragraph
-        className={cx(`${rootClassName}__number`, `${rootClassName}--size-${size}`)}
+        className={cx(`${rootClassName}__number`, `${rootClassName}__number--size-${size}`)}
         ref={ref}
         data-tick={nextTime}
         key={animationKey}
       >
         {currentTime}
       </Paragraph>
-      <Paragraph className={cx(`${rootClassName}__label`)}>{counterTag}</Paragraph>
+      {counterTagAbbr && (
+        <Paragraph className={cx(`${rootClassName}__label`, `${rootClassName}__label--abbr`)}>
+          <abbr title={counterTag}>{counterTagAbbr}</abbr>
+        </Paragraph>
+      )}
+      <Paragraph
+        className={cx(`${rootClassName}__label`, {
+          [`${rootClassName}__label--full`]: !!counterTagAbbr,
+        })}
+      >
+        {counterTag}
+      </Paragraph>
     </div>
   );
 };