@jobber/components 2.78.3 → 2.79.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.79.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.3...@jobber/components@2.79.0) (2022-03-25)
+
+
+### Features
+
+* **components:** create statuslabel component ([#870](https://github.com/GetJobber/atlantis/issues/870)) ([cced9b9](https://github.com/GetJobber/atlantis/commit/cced9b9c1af70432b62766e440f445b949bdd236))
+
+
+
+
+
 ## [2.78.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.2...@jobber/components@2.78.3) (2022-03-17)
 
 **Note:** Version bump only for package @jobber/components

package/StatusLabel.d.ts

@@ -0,0 +1 @@
+export * from "./dist/StatusLabel";

package/StatusLabel.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var StatusLabel = require("./dist/StatusLabel");
+
+Object.keys(StatusLabel).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return StatusLabel[key];
+    },
+  });
+});

package/dist/StatusLabel/StatusLabel.d.ts

@@ -0,0 +1,25 @@
+export declare type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
+export interface StatusLabelType {
+    readonly statusLabel: string;
+    readonly statusType?: StatusType;
+}
+interface StatusLabelProps {
+    /**
+     * Text to display
+     */
+    readonly label: string;
+    /**
+     * Alignment of label
+     *
+     * @default "start"
+     */
+    readonly alignment?: "start" | "end";
+    /**
+     * Status color of the indicator beside text
+     *
+     * @default "inactive"
+     */
+    readonly status: StatusType;
+}
+export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
+export {};

package/dist/StatusLabel/index.d.ts

@@ -0,0 +1 @@
+export { StatusLabel } from "./StatusLabel";

package/dist/StatusLabel/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+require('../chunk-b67af3cb.js');
+var React = require('react');
+var React__default = _interopDefault(React);
+var __chunk_2 = require('../chunk-17e02351.js');
+var classnames = _interopDefault(require('classnames'));
+require('../Typography/index.js');
+var index$1 = require('../Text/index.js');
+
+var css = ":root {\n  --statusLabel-icon-diameter: calc(var(--space-base) - var(--space-smaller));\n}\n\n.NUUO4mR41Qn5Pf0pzjhZe {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: row;\n      flex-direction: row;\n  -ms-flex-wrap: nowrap;\n      flex-wrap: nowrap;\n  grid-gap: var(--space-small);\n  grid-gap: var(--space-small);\n  gap: var(--space-small);\n  width: -webkit-fit-content;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n._2XU8xQD0q92o9P2Ej5EdwP {\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: calc(var(--space-base) - var(--space-smaller));\n  width: var(--statusLabel-icon-diameter);\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: calc(var(--space-base) - var(--space-smaller));\n  height: var(--statusLabel-icon-diameter);\n  margin-top: var(--space-smallest);\n  border-radius: var(--radius-base);\n  background-color: var(--color-success);\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n}\n\n._3eQHL9hZlneMfEoGaF0dDv {\n  -ms-flex-direction: row-reverse;\n      flex-direction: row-reverse;\n}\n";
+var styles = {"statusLabelRow":"NUUO4mR41Qn5Pf0pzjhZe","statusIndicator":"_2XU8xQD0q92o9P2Ej5EdwP","labelTextEndAligned":"_3eQHL9hZlneMfEoGaF0dDv"};
+__chunk_2.styleInject(css);
+
+function StatusLabel(_a) {
+    var label = _a.label, _b = _a.alignment, alignment = _b === void 0 ? "start" : _b, _c = _a.status, status = _c === void 0 ? "inactive" : _c;
+    var containerClassNames = classnames(styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
+    return (React__default.createElement("div", { role: "status", className: containerClassNames },
+        React__default.createElement(StatusLabelIcon, { status: status }),
+        React__default.createElement(index$1.Text, { size: "small", align: alignment }, label)));
+}
+function StatusLabelIcon(_a) {
+    var status = _a.status;
+    return (React__default.createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
+}
+
+exports.StatusLabel = StatusLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.78.3",
+  "version": "2.79.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "67a229b18176c2fe701e218a94049fe8a31aa2f9"
+  "gitHead": "d7c9cd86f4cfc7c3d21ef6c6d07773675cad69b7"
 }