@jobber/components 2.78.1 → 2.79.0

package/CHANGELOG.md

@@ -8,6 +8,33 @@ 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
+
+
+
+
+
+## [2.78.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.1...@jobber/components@2.78.2) (2022-03-16)
+
+**Note:** Version bump only for package @jobber/components
+
+
+
+
+
 ## [2.78.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.78.0...@jobber/components@2.78.1) (2022-03-10)
 
 

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/Popover/index.js

@@ -18,7 +18,7 @@ var hooks = require('@jobber/hooks');
 var index$1$1 = require('../ButtonDismiss/index.js');
 var reactPopper = require('react-popper');
 
-var css = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.bmcwfoRgxW9uxv0uyXH04 {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TjIegPUFwvTBnPHT-hzfN {\n  float: right;\n  padding: calc(var(--base-unit) / 4);\n  padding: calc(var(--base-unit) / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z {\n  z-index: var(--elevation-base);\n  width: 100%;\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  font-size: var(--base-unit);\n  line-height: normal;\n  background: var(--color-surface);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.ZBY5pcUZw7V-86CZwsJcF {\n  visibility: hidden;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF,\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  position: absolute;\n  width: var(--base-unit);\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  content: \"\";\n  visibility: visible;\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  bottom: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"bottom\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  top: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  right: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  left: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
+var css = ":root {\n  --card--base-padding: var(--space-base);\n  --popover--padding: var(--space-base);\n  --popover--width: calc(var(--base-unit) * 21.875);\n  --dismiss--button-padding: calc(var(--base-unit) / 4);\n}\n\n.bmcwfoRgxW9uxv0uyXH04 {\n  display: -ms-flexbox;\n  display: flex;\n  position: \"relative\";\n  padding: var(--space-base);\n  padding: var(--space-base);\n  padding: var(--popover--padding);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.TjIegPUFwvTBnPHT-hzfN {\n  float: right;\n  padding: calc(var(--base-unit) / 4);\n  padding: calc(var(--base-unit) / 4);\n  padding: var(--dismiss--button-padding);\n  text-align: right;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z {\n  z-index: var(--elevation-tooltip);\n  width: -webkit-max-content;\n  width: -moz-max-content;\n  width: max-content;\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: calc(var(--base-unit) * 21.875);\n  max-width: var(--popover--width);\n  box-shadow: var(--shadow-base);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-base);\n  font-size: var(--base-unit);\n  line-height: normal;\n  background: var(--color-surface);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z > * {\n  --public-content--padding: var(--card--base-padding);\n}\n\n.ZBY5pcUZw7V-86CZwsJcF {\n  visibility: hidden;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF,\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  position: absolute;\n  width: var(--base-unit);\n  height: var(--base-unit);\n  background: inherit;\n}\n\n.ZBY5pcUZw7V-86CZwsJcF::before {\n  content: \"\";\n  visibility: visible;\n  border: var(--border-base) solid var(--color-border);\n  -webkit-transform: rotate(45deg);\n          transform: rotate(45deg);\n  -webkit-transform-origin: center;\n          transform-origin: center;\n  -webkit-clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n          clip-path: polygon(-4px -4px, 15.3px 0, 0 15.3px);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  bottom: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"top\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-135deg);\n          transform: rotate(-135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"bottom\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  top: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  right: -5px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"left\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(135deg);\n          transform: rotate(135deg);\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF {\n  left: -7px;\n}\n\n._1v-Ekqld7VhWiu8_bFt62z[data-popper-placement^=\"right\"] > .ZBY5pcUZw7V-86CZwsJcF::before {\n  -webkit-transform: rotate(-45deg);\n          transform: rotate(-45deg);\n}\n";
 var classes = {"header":"bmcwfoRgxW9uxv0uyXH04","dismissButton":"TjIegPUFwvTBnPHT-hzfN","popover":"_1v-Ekqld7VhWiu8_bFt62z","arrow":"ZBY5pcUZw7V-86CZwsJcF"};
 __chunk_2.styleInject(css);
 

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.1",
+  "version": "2.79.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "f831c9ee07030075c7f17652bc9412533f403f5a"
+  "gitHead": "d7c9cd86f4cfc7c3d21ef6c6d07773675cad69b7"
 }