@cultureamp/kaizen-component-library - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

draft/TitleBlock/README.md

@@ -12,8 +12,8 @@ # TitleBlock Component
 | ✓         | Design Review          |          |
-|           | Elm Version            |          |
+| ✓         | Elm Version            |          |
 | ✓         | React Version          |          |
 |           | Elm Unit Tests         |          |
 |           | React Unit Tests       |          |
-|           | Elm Examples           |          |
-|           | React Examples         |          |
+| ✓         | Elm Examples           |          |
+| ✓         | React Examples         |          |
 |           | Cross Browser Testing  |          |
@@ -20,0 +20,0 @@ |           | Accessibility          |          |

draft/TitleBlock/TitleBlock.js

 "use strict";
-// @flow
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -15,41 +14,63 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 const Icon_1 = __importDefault(require("@cultureamp/kaizen-component-library/components/Icon/Icon"));
+const Tag_1 = __importDefault(require("@cultureamp/kaizen-component-library/draft/Tag/Tag"));
 const arrow_backward_svg_1 = __importDefault(require("@cultureamp/kaizen-component-library/icons/arrow-backward.svg"));
 const arrow_forward_svg_1 = __importDefault(require("@cultureamp/kaizen-component-library/icons/arrow-forward.svg"));
+const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const react_1 = require("react");
+const react_media_1 = __importDefault(require("react-media"));
+const NavigationButtons_1 = __importDefault(require("./NavigationButtons"));
 const styles = require("./TitleBlock.scss");
-class TitleBlock extends react_1.Component {
-    renderTitle() {
-        if (this.props.title !== undefined) {
-            return (React.createElement("h2", { "data-automation-id": "TitleBlock__Heading", className: styles.title }, this.props.title));
+const constants_1 = require("@cultureamp/kaizen-component-library/components/NavigationBar/constants");
+const TitleBlock = props => {
+    const renderTitle = () => {
+        if (props.title !== undefined) {
+            return (React.createElement("h2", { "data-automation-id": "TitleBlock__Heading", className: styles.title }, props.title));
         }
-    }
-    renderSubtitle() {
-        const { subtitle } = this.props;
-        if (subtitle !== undefined) {
-            return (React.createElement(react_1.Fragment, null,
-                React.createElement("h3", { className: styles.subtitle, "data-automation-id": "TitleBlock__Subtitle" }, this.props.subtitle)));
-        }
-    }
-    renderBreadcrumb() {
-        if (this.props.breadcrumbHref !== undefined &&
-            this.props.breadcrumbText !== undefined) {
-            const icon = this.props.textDirection === "rtl" ? arrow_forward_svg_1.default : arrow_backward_svg_1.default;
-            return (React.createElement("a", { href: this.props.breadcrumbHref, className: styles.breadcrumb },
-                React.createElement("div", { className: styles.circle },
-                    React.createElement(Icon_1.default, { icon: icon, role: "presentation" })),
-                React.createElement("span", { className: styles.breadcrumbText }, this.props.breadcrumbText)));
-        }
-    }
-    render() {
-        return (React.createElement("div", { className: styles.titleBlock, "data-automation-id": "title-block" },
+    };
+    const renderTag = () => {
+        if (props.surveyStatus == undefined)
+            return;
+        return (React.createElement("div", { className: styles.tag },
+            React.createElement(Tag_1.default, { text: props.surveyStatus.text, color: props.surveyStatus.color, withIcon: props.surveyStatus.showIcon })));
+    };
+    const renderSubtitle = () => {
+        if (props.subtitle == undefined)
+            return;
+        return (React.createElement(react_1.Fragment, null,
+            React.createElement("h3", { className: styles.subtitle, "data-automation-id": "TitleBlock__Subtitle" }, props.subtitle),
+            renderTag()));
+    };
+    const renderBreadcrumb = () => {
+        if (props.breadcrumb == undefined)
+            return;
+        const icon = props.textDirection === "rtl" ? arrow_forward_svg_1.default : arrow_backward_svg_1.default;
+        return (React.createElement("a", { href: props.breadcrumb.path, className: styles.breadcrumb },
+            React.createElement("div", { className: styles.circle },
+                React.createElement(Icon_1.default, { icon: icon, role: "presentation" })),
+            React.createElement("span", { className: styles.breadcrumbText }, props.breadcrumb.text)));
+    };
+    const renderNavigation = () => {
+        if (props.navigationButtons == undefined)
+            return;
+        return (React.createElement("div", { className: styles.navContainer, "data-automation-id": "TitleBlock__Navigation" },
+            React.createElement(NavigationButtons_1.default, { navigationButtons: props.navigationButtons, reversed: props.reversed })));
+    };
+    return (React.createElement("div", { className: classnames_1.default(styles.titleBlockContainer, {
+            [styles.reversed]: props.reversed
+        }) },
+        React.createElement("div", { className: classnames_1.default(styles.titleBlock, {
+                [styles[`reverseColor${props.reverseColor}`]]: props.reverseColor
+            }), "data-automation-id": "TitleBlock__TitleBlock" },
             React.createElement("div", { className: styles.titleBlockInner },
-                this.renderBreadcrumb(),
-                React.createElement("div", { className: styles.titleContainer },
-                    React.createElement("div", { className: styles.textContainer },
-                        this.renderTitle(),
-                        this.renderSubtitle())),
-                React.createElement("div", { className: styles.actionsContainer, "data-automation-id": "title-block--actions" }, this.props.children))));
-    }
-}
+                renderBreadcrumb(),
+                React.createElement("div", { className: styles.leftContent },
+                    React.createElement("div", { className: styles.titleContainer },
+                        React.createElement("div", { className: styles.textContainer, "data-automation-id": "TitleBlock__Text" },
+                            renderTitle(),
+                            renderSubtitle())),
+                    React.createElement(react_media_1.default, { query: constants_1.MOBILE_QUERY }, (matches) => !matches && React.createElement(react_1.Fragment, null, renderNavigation()))),
+                React.createElement("div", { className: styles.actionsContainer, "data-automation-id": "title-block--actions" }, props.children))),
+        React.createElement(react_media_1.default, { query: constants_1.MOBILE_QUERY }, (matches) => matches && React.createElement(react_1.Fragment, null, renderNavigation()))));
+};
 TitleBlock.defaultProps = {
@@ -56,0 +77,0 @@ textDirection: "ltr"

package.json

@@ -5,3 +5,3 @@ {
   "sideEffects": false,
-  "version": "2.0.0",
+  "version": "3.0.0",
   "private": false,
@@ -40,10 +40,13 @@ "license": "MIT",
     "@types/uuid": "^3.4.4",
+    "conventional-changelog-cli": "^2.0.12",
+    "conventional-commits-parser": "^3.0.1",
     "react-testing-library": "^5.9.0",
     "rimraf": "^2.6.3"
-   },
+  },
   "scripts": {
     "build": "yarn clean && tsc --project 'tsconfig.lib.json'",
     "build:watch": "yarn clean && tsc --watch --project 'tsconfig.lib.json'",
-    "clean": "rimraf 'components/**/*.js' 'draft/**/*.js' 'util/**/*.js' 'index.js' 'components/**/*.js.map' 'draft/**/*.js.map' 'util/**/*.js.map' 'index.js.map' 'components/**/*.d.ts' 'draft/**/*.d.ts' 'util/**/*.d.ts' 'index.d.ts'"
+    "clean": "rimraf 'components/**/*.js' 'draft/**/*.js' 'util/**/*.js' 'index.js' 'components/**/*.js.map' 'draft/**/*.js.map' 'util/**/*.js.map' 'index.js.map' 'components/**/*.d.ts' 'draft/**/*.d.ts' 'util/**/*.d.ts' 'index.d.ts'",
+    "changelog": "conventional-changelog -p angular -i \"$(pwd)/CHANGELOG.md\" -s --commit-path \"$(pwd)\""
   }
 }

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

875405

increased by2.55%

Number of package files

428

increased by1.66%

Lines of code

2802

increased by2.86%

Worsened metrics

Dev dependency count

7

increased by40%

No dependency changes