@gemeente-denhaag/timeline - npm Package Compare versions

Comparing version 0.2.3-alpha.334 to 0.2.3-alpha.335

dist/cjs/index.d.ts

 import Timeline from './Timeline';
 import './index.scss';
 export default Timeline;
-export * from './Step';
 export * from './StepContent';
@@ -9,1 +8,2 @@ export * from './StepIcon';
 export * from './Timeline';
+export * from './TimelineStep';

dist/cjs/index.js

@@ -83,2 +83,11 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),core=require('@material-ui/core');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n["default"]=e;return Object.freeze(n)}var React__default=/*#__PURE__*/_interopDefaultLegacy(React);var React__namespace=/*#__PURE__*/_interopNamespace(React);function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}function styleInject$1(css, ref) {
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};/**
+ * Represents the content of a Step component in a Stepper component.
+ * @param props The properties of a StepContent component.
+ * @constructor Constructs an instance of StepContent.
+ */
+var StepContent = function (_a) {
+    var TransitionComponent = _a.TransitionComponent, TransitionProps = _a.TransitionProps, transitionDuration = _a.transitionDuration, children = _a.children, _b = _a.id, id = _b === void 0 ? undefined : _b, props = __rest$1(_a, ["TransitionComponent", "TransitionProps", "transitionDuration", "children", "id"]);
+    var rootClassNames = clsx$1('denhaag-timeline__step-content', props.className);
+    return (React__default["default"].createElement(core.StepContent, __assign$1({ id: id, TransitionComponent: TransitionComponent, TransitionProps: TransitionProps, transitionDuration: transitionDuration }, props, { className: rootClassNames }), children));
 };var __assign = function() {
@@ -198,60 +207,2 @@ __assign = Object.assign || function __assign(t) {
 var CheckCircleIcon = function (props) { return buildIcon(MemoSvgCheckCircle, props); };/**
- * Represents a single Step in a Stepper component.
- * @param props The properties of a Step component.
- * @constructor Constructs an instance of Step.
- */
-var Step = function (_a) {
-    var label = _a.label, description = _a.description, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.completed, completed = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.id, id = _e === void 0 ? undefined : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest$1(_a, ["label", "description", "active", "completed", "disabled", "id", "tabIndex"]);
-    var _g = React.useState(false), isExpanded = _g[0], setIsExpanded = _g[1];
-    var hasDescription = description !== undefined;
-    if (active && disabled) {
-        throw new Error('Step cannot be active and disabled at the same time.');
-    }
-    var toggle = function () {
-        if (hasDescription && completed) {
-            setIsExpanded(function (prevState) { return !prevState; });
-        }
-    };
-    // If active has been updated, this indicates that the user is on the next
-    // step, then we want to collapse the StepContent
-    React.useEffect(function () {
-        setIsExpanded(false);
-    }, [active]);
-    // Toggle when element is focussed and 'Enter' is pressed.
-    var handleKeyDown = function (event) {
-        if (event.key === 'Enter') {
-            toggle();
-        }
-    };
-    var descriptionElement = '';
-    if (hasDescription) {
-        descriptionElement = React__default["default"].createElement(StepContent, null, description);
-    }
-    var iconElement = '';
-    var role = undefined;
-    if (hasDescription && completed) {
-        role = 'button';
-        if (isExpanded) {
-            iconElement = React__default["default"].createElement(ChevronUpIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
-        }
-        else {
-            iconElement = React__default["default"].createElement(ChevronDownIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
-        }
-    }
-    var className = clsx$1('denhaag-timeline__step', props.className);
-    return (React__default["default"].createElement(core.Step, __assign$1({ active: active, "aria-expanded": isExpanded, completed: completed, disabled: disabled, expanded: isExpanded, id: id, onClick: toggle, onKeyDown: handleKeyDown, role: role, tabIndex: tabIndex }, props, { className: className }),
-        React__default["default"].createElement(StepLabel, null,
-            label,
-            iconElement),
-        descriptionElement));
-};/**
- * Represents the content of a Step component in a Stepper component.
- * @param props The properties of a StepContent component.
- * @constructor Constructs an instance of StepContent.
- */
-var StepContent = function (_a) {
-    var TransitionComponent = _a.TransitionComponent, TransitionProps = _a.TransitionProps, transitionDuration = _a.transitionDuration, children = _a.children, _b = _a.id, id = _b === void 0 ? undefined : _b, props = __rest$1(_a, ["TransitionComponent", "TransitionProps", "transitionDuration", "children", "id"]);
-    var rootClassNames = clsx$1('denhaag-timeline__step-content', props.className);
-    return (React__default["default"].createElement(core.StepContent, __assign$1({ id: id, TransitionComponent: TransitionComponent, TransitionProps: TransitionProps, transitionDuration: transitionDuration }, props, { className: rootClassNames }), children));
-};/**
  * Displays an icon in a Step component within a Stepper component.
@@ -309,2 +260,51 @@ * @param props The properties of a StepIcon component.
         React__default["default"].createElement("p", { className: "denhaag-timeline__step-label-text" }, children)));
-};exports.Step=Step;exports.StepContent=StepContent;exports.StepIcon=StepIcon;exports.StepLabel=StepLabel;exports.Timeline=Timeline;exports["default"]=Timeline;
+};/**
+ * Represents a single Step in a Stepper component.
+ * @param props The properties of a Step component.
+ * @constructor Constructs an instance of Step.
+ */
+var TimelineStep = function (_a) {
+    var label = _a.label, description = _a.description, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.completed, completed = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.id, id = _e === void 0 ? undefined : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest$1(_a, ["label", "description", "active", "completed", "disabled", "id", "tabIndex"]);
+    var _g = React.useState(false), isExpanded = _g[0], setIsExpanded = _g[1];
+    var hasDescription = description !== undefined;
+    if (active && disabled) {
+        throw new Error('Step cannot be active and disabled at the same time.');
+    }
+    var toggle = function () {
+        if (hasDescription && completed) {
+            setIsExpanded(function (prevState) { return !prevState; });
+        }
+    };
+    // If active has been updated, this indicates that the user is on the next
+    // step, then we want to collapse the StepContent
+    React.useEffect(function () {
+        setIsExpanded(false);
+    }, [active]);
+    // Toggle when element is focussed and 'Enter' is pressed.
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            toggle();
+        }
+    };
+    var descriptionElement = '';
+    if (hasDescription) {
+        descriptionElement = React__default["default"].createElement(StepContent, null, description);
+    }
+    var iconElement = '';
+    var role = undefined;
+    if (hasDescription && completed) {
+        role = 'button';
+        if (isExpanded) {
+            iconElement = React__default["default"].createElement(ChevronUpIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
+        }
+        else {
+            iconElement = React__default["default"].createElement(ChevronDownIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
+        }
+    }
+    var className = clsx$1('denhaag-timeline__step', props.className);
+    return (React__default["default"].createElement(core.Step, __assign$1({ active: active, "aria-expanded": isExpanded, completed: completed, disabled: disabled, expanded: isExpanded, id: id, onClick: toggle, onKeyDown: handleKeyDown, role: role, tabIndex: tabIndex }, props, { className: className }),
+        React__default["default"].createElement(StepLabel, null,
+            label,
+            iconElement),
+        descriptionElement));
+};exports.StepContent=StepContent;exports.StepIcon=StepIcon;exports.StepLabel=StepLabel;exports.Timeline=Timeline;exports.TimelineStep=TimelineStep;exports["default"]=Timeline;

dist/mjs/index.d.ts

 import Timeline from './Timeline';
 import './index.scss';
 export default Timeline;
-export * from './Step';
 export * from './StepContent';
@@ -9,1 +8,2 @@ export * from './StepIcon';
 export * from './Timeline';
+export * from './TimelineStep';

dist/mjs/index.js

@@ -1,2 +0,2 @@
-import*as React from'react';import React__default,{useState,useEffect}from'react';import {Stepper,Step as Step$1,StepContent as StepContent$1}from'@material-ui/core';function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}function styleInject$1(css, ref) {
+import*as React from'react';import React__default,{useState,useEffect}from'react';import {Stepper,StepContent as StepContent$1,Step}from'@material-ui/core';function r$1(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$1(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx$1(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$1(e))&&(n&&(n+=" "),n+=t);return n}function styleInject$1(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -83,2 +83,11 @@ var insertAt = ref.insertAt;
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};/**
+ * Represents the content of a Step component in a Stepper component.
+ * @param props The properties of a StepContent component.
+ * @constructor Constructs an instance of StepContent.
+ */
+var StepContent = function (_a) {
+    var TransitionComponent = _a.TransitionComponent, TransitionProps = _a.TransitionProps, transitionDuration = _a.transitionDuration, children = _a.children, _b = _a.id, id = _b === void 0 ? undefined : _b, props = __rest$1(_a, ["TransitionComponent", "TransitionProps", "transitionDuration", "children", "id"]);
+    var rootClassNames = clsx$1('denhaag-timeline__step-content', props.className);
+    return (React__default.createElement(StepContent$1, __assign$1({ id: id, TransitionComponent: TransitionComponent, TransitionProps: TransitionProps, transitionDuration: transitionDuration }, props, { className: rootClassNames }), children));
 };var __assign = function() {
@@ -198,60 +207,2 @@ __assign = Object.assign || function __assign(t) {
 var CheckCircleIcon = function (props) { return buildIcon(MemoSvgCheckCircle, props); };/**
- * Represents a single Step in a Stepper component.
- * @param props The properties of a Step component.
- * @constructor Constructs an instance of Step.
- */
-var Step = function (_a) {
-    var label = _a.label, description = _a.description, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.completed, completed = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.id, id = _e === void 0 ? undefined : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest$1(_a, ["label", "description", "active", "completed", "disabled", "id", "tabIndex"]);
-    var _g = useState(false), isExpanded = _g[0], setIsExpanded = _g[1];
-    var hasDescription = description !== undefined;
-    if (active && disabled) {
-        throw new Error('Step cannot be active and disabled at the same time.');
-    }
-    var toggle = function () {
-        if (hasDescription && completed) {
-            setIsExpanded(function (prevState) { return !prevState; });
-        }
-    };
-    // If active has been updated, this indicates that the user is on the next
-    // step, then we want to collapse the StepContent
-    useEffect(function () {
-        setIsExpanded(false);
-    }, [active]);
-    // Toggle when element is focussed and 'Enter' is pressed.
-    var handleKeyDown = function (event) {
-        if (event.key === 'Enter') {
-            toggle();
-        }
-    };
-    var descriptionElement = '';
-    if (hasDescription) {
-        descriptionElement = React__default.createElement(StepContent, null, description);
-    }
-    var iconElement = '';
-    var role = undefined;
-    if (hasDescription && completed) {
-        role = 'button';
-        if (isExpanded) {
-            iconElement = React__default.createElement(ChevronUpIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
-        }
-        else {
-            iconElement = React__default.createElement(ChevronDownIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
-        }
-    }
-    var className = clsx$1('denhaag-timeline__step', props.className);
-    return (React__default.createElement(Step$1, __assign$1({ active: active, "aria-expanded": isExpanded, completed: completed, disabled: disabled, expanded: isExpanded, id: id, onClick: toggle, onKeyDown: handleKeyDown, role: role, tabIndex: tabIndex }, props, { className: className }),
-        React__default.createElement(StepLabel, null,
-            label,
-            iconElement),
-        descriptionElement));
-};/**
- * Represents the content of a Step component in a Stepper component.
- * @param props The properties of a StepContent component.
- * @constructor Constructs an instance of StepContent.
- */
-var StepContent = function (_a) {
-    var TransitionComponent = _a.TransitionComponent, TransitionProps = _a.TransitionProps, transitionDuration = _a.transitionDuration, children = _a.children, _b = _a.id, id = _b === void 0 ? undefined : _b, props = __rest$1(_a, ["TransitionComponent", "TransitionProps", "transitionDuration", "children", "id"]);
-    var rootClassNames = clsx$1('denhaag-timeline__step-content', props.className);
-    return (React__default.createElement(StepContent$1, __assign$1({ id: id, TransitionComponent: TransitionComponent, TransitionProps: TransitionProps, transitionDuration: transitionDuration }, props, { className: rootClassNames }), children));
-};/**
  * Displays an icon in a Step component within a Stepper component.
@@ -309,2 +260,51 @@ * @param props The properties of a StepIcon component.
         React__default.createElement("p", { className: "denhaag-timeline__step-label-text" }, children)));
-};export{Step,StepContent,StepIcon,StepLabel,Timeline,Timeline as default};
+};/**
+ * Represents a single Step in a Stepper component.
+ * @param props The properties of a Step component.
+ * @constructor Constructs an instance of Step.
+ */
+var TimelineStep = function (_a) {
+    var label = _a.label, description = _a.description, _b = _a.active, active = _b === void 0 ? false : _b, _c = _a.completed, completed = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.id, id = _e === void 0 ? undefined : _e, _f = _a.tabIndex, tabIndex = _f === void 0 ? 0 : _f, props = __rest$1(_a, ["label", "description", "active", "completed", "disabled", "id", "tabIndex"]);
+    var _g = useState(false), isExpanded = _g[0], setIsExpanded = _g[1];
+    var hasDescription = description !== undefined;
+    if (active && disabled) {
+        throw new Error('Step cannot be active and disabled at the same time.');
+    }
+    var toggle = function () {
+        if (hasDescription && completed) {
+            setIsExpanded(function (prevState) { return !prevState; });
+        }
+    };
+    // If active has been updated, this indicates that the user is on the next
+    // step, then we want to collapse the StepContent
+    useEffect(function () {
+        setIsExpanded(false);
+    }, [active]);
+    // Toggle when element is focussed and 'Enter' is pressed.
+    var handleKeyDown = function (event) {
+        if (event.key === 'Enter') {
+            toggle();
+        }
+    };
+    var descriptionElement = '';
+    if (hasDescription) {
+        descriptionElement = React__default.createElement(StepContent, null, description);
+    }
+    var iconElement = '';
+    var role = undefined;
+    if (hasDescription && completed) {
+        role = 'button';
+        if (isExpanded) {
+            iconElement = React__default.createElement(ChevronUpIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
+        }
+        else {
+            iconElement = React__default.createElement(ChevronDownIcon, { useDefaultClass: false, className: 'denhaag-timeline__step-collapse-icon' });
+        }
+    }
+    var className = clsx$1('denhaag-timeline__step', props.className);
+    return (React__default.createElement(Step, __assign$1({ active: active, "aria-expanded": isExpanded, completed: completed, disabled: disabled, expanded: isExpanded, id: id, onClick: toggle, onKeyDown: handleKeyDown, role: role, tabIndex: tabIndex }, props, { className: className }),
+        React__default.createElement(StepLabel, null,
+            label,
+            iconElement),
+        descriptionElement));
+};export{StepContent,StepIcon,StepLabel,Timeline,TimelineStep,Timeline as default};

package.json

 {
   "name": "@gemeente-denhaag/timeline",
-  "version": "0.2.3-alpha.334",
+  "version": "0.2.3-alpha.335",
   "description": "A Timeline component based on the material Stepper component",
@@ -32,5 +32,5 @@ "bugs": "https://github.com/nl-design-system/denhaag/issues",
   "dependencies": {
-    "@gemeente-denhaag/baseprops": "0.2.3-alpha.334",
-    "@gemeente-denhaag/icons": "0.2.3-alpha.334",
-    "@gemeente-denhaag/typography": "0.2.3-alpha.334",
+    "@gemeente-denhaag/baseprops": "0.2.3-alpha.335",
+    "@gemeente-denhaag/icons": "0.2.3-alpha.335",
+    "@gemeente-denhaag/typography": "0.2.3-alpha.335",
     "@material-ui/core": "4.12.4"
@@ -42,5 +42,5 @@ },
   "devDependencies": {
-    "@gemeente-denhaag/button": "0.2.3-alpha.334"
+    "@gemeente-denhaag/button": "0.2.3-alpha.335"
   },
-  "gitHead": "1583b3a612a64681699dca7cf2c3950ad77c85da"
+  "gitHead": "a01c31abd56eaf304413d7c1467d772ec44788bd"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

319349

increased by0.04%

Worsened metrics

Lines of code

954

decreased by-0.1%

Dependency changes

• + Added@gemeente-denhaag/basedatadisplayprops@0.2.3-alpha.335(transitive)

• + Added@gemeente-denhaag/baseprops@0.2.3-alpha.335(transitive)

• + Added@gemeente-denhaag/icons@0.2.3-alpha.335(transitive)

• + Added@gemeente-denhaag/typography@0.2.3-alpha.335(transitive)

• - Removed@gemeente-denhaag/basedatadisplayprops@0.2.3-alpha.334(transitive)

• - Removed@gemeente-denhaag/baseprops@0.2.3-alpha.334(transitive)

• - Removed@gemeente-denhaag/icons@0.2.3-alpha.334(transitive)

• - Removed@gemeente-denhaag/typography@0.2.3-alpha.334(transitive)

• Updated@gemeente-denhaag/baseprops@0.2.3-alpha.335

• Updated@gemeente-denhaag/icons@0.2.3-alpha.335

• Updated@gemeente-denhaag/typography@0.2.3-alpha.335