@times-stories/progress-indicator - npm Package Compare versions

Comparing version 1.0.9 to 1.1.0

lib/index.js

@@ -1,19 +0,22 @@
-import React from 'react';
-import StoryContext from '@times-stories/context';
+import React from "react";
+import StoryContext from "@times-stories/context";
 
-const joinClasses = (...classes) => classes.filter(Boolean).join(' ');
+const joinClasses = (...classes) => classes.filter(Boolean).join(" ");
 
-import style from './style.scss';
+import style from "./style.scss";
 export const ProgressIndicator = () => React.createElement(StoryContext.Consumer, null, ({
   activePage,
-  pageCount,
+  pages,
   handlers
 }) => {
-  const isEndPage = activePage === pageCount;
+  const isEndPage = activePage === pages.length + 1;
   return React.createElement("ul", {
     className: joinClasses(style.progressIndicator, isEndPage && style.endPage)
-  }, new Array(pageCount).fill(null).map((_, index) => React.createElement("li", {
-    key: index
-  }, React.createElement("button", {
-    className: joinClasses(activePage >= index + 1 && style.isActive),
+  }, pages.map(({
+    templateType,
+    chapterName = null
+  }, index) => React.createElement("li", {
+    key: index,
+    className: joinClasses(style[templateType], activePage >= index + 1 && style.isActive)
+  }, templateType === "chapter" && chapterName && React.createElement("p", null, chapterName), React.createElement("button", {
     onClick: () => handlers.setActivePage(index + 1)
@@ -20,0 +23,0 @@ }))));

lib/style.scss

@@ -1,2 +0,2 @@
-@import '~@times-stories/style-guide';
+@import "~@times-stories/style-guide";
 
@@ -40,4 +40,42 @@ .progressIndicator {
     height: 0.3rem;
-    margin: 0 0.2rem;
+    margin: 0 0.1rem;
+    position: relative;
 
+    &.chapter {
+      p {
+        position: absolute;
+        top: 3px;
+        left: -1.5px;
+        transform: translateY(-100%);
+        font-size: 0.8rem;
+        line-height: 1.2em;
+        letter-spacing: 0.2px;
+        font-family: "GillSansMTStd-Medium";
+        color: rgba(255, 255, 255, 0);
+        white-space: pre;
+        opacity: 0.4;
+        border-left: 1px solid #fff;
+
+        @media screen and (min-width: $breakpoint-mobile) {
+          top: 0;
+          left: 0px;
+          font-size: 1.3rem;
+          color: rgba(255, 255, 255, 1);
+          border-left: none;
+        }
+      }
+    }
+
+    &.isActive {
+      button {
+        opacity: 1;
+      }
+
+      &.chapter {
+        p {
+          opacity: 1;
+        }
+      }
+    }
+
     button {
@@ -50,8 +88,4 @@ display: block;
       opacity: 0.4;
-
-      &.isActive {
-        opacity: 1;
-      }
     }
   }
 }

package.json

 {
   "name": "@times-stories/progress-indicator",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "main": "lib/index.js",
@@ -26,3 +26,3 @@ "module": "lib/index.js",
   },
-  "gitHead": "c86eedac42f5f21f61a58ccf4c7bd365c5eeef5a"
+  "gitHead": "dd717a4b2544b3dd9a081d4fa125676402a6397b"
 }

No alert changes

Improved metrics

Total package byte prevSize

4200

25.67%

Lines of code

22

15.79%

No dependency changes