@linzjs/lui 17.52.2 → 17.53.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [17.53.0](https://github.com/linz/lui/compare/v17.52.3...v17.53.0) (2023-05-05)
+
+
+### Features
+
+* Update LuiBadge to do Same Colour fill and added info type ([#938](https://github.com/linz/lui/issues/938)) ([75d88f1](https://github.com/linz/lui/commit/75d88f1b19bfbb73a2a24534a84fad4a13732896))
+
+## [17.52.3](https://github.com/linz/lui/compare/v17.52.2...v17.52.3) (2023-05-02)
+
+
+### Bug Fixes
+
+* added styling for text input with :disabled attribute ([#935](https://github.com/linz/lui/issues/935)) ([cd4fb16](https://github.com/linz/lui/commit/cd4fb16b03188ff6a6ec19c1e8d20cb30ec16acc))
+
 ## [17.52.2](https://github.com/linz/lui/compare/v17.52.1...v17.52.2) (2023-04-26)
 
 

package/dist/components/LuiBadge/LuiBadge.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+declare type LuiBadgeFillVariation = 'outline' | 'fill';
 export interface ILuiBadge {
     children: React.ReactNode;
     size?: 'sm' | 'default' | 'lg';
     backgroundFill?: boolean;
-    variation?: 'default' | 'warning';
+    variation?: 'default' | 'warning' | 'info';
     ariaRoleDescription: string;
+    fillVariation?: LuiBadgeFillVariation;
 }
-export declare const LuiBadge: (props: ILuiBadge) => JSX.Element;
+export declare const LuiBadge: ({ size, variation, backgroundFill, ariaRoleDescription, fillVariation, children, }: ILuiBadge) => JSX.Element;
+export {};

package/dist/index.js

@@ -55008,7 +55008,7 @@ var LuiModalHeader = function (props) {
                 React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-var css_248z$6 = "@keyframes react-loading-skeleton {\n    100% {\n        transform: translateX(100%);\n    }\n}\n\n.react-loading-skeleton {\n    --base-color: #ebebeb;\n    --highlight-color: #f5f5f5;\n    --animation-duration: 1.5s;\n    --animation-direction: normal;\n    --pseudo-element-display: block; /* Enable animation */\n\n    background-color: var(--base-color);\n\n    width: 100%;\n    border-radius: 0.25rem;\n    display: inline-flex;\n    line-height: 1;\n\n    position: relative;\n    overflow: hidden;\n    z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n    content: ' ';\n    display: var(--pseudo-element-display);\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    background-repeat: no-repeat;\n    background-image: linear-gradient(\n        90deg,\n        var(--base-color),\n        var(--highlight-color),\n        var(--base-color)\n    );\n    transform: translateX(-100%);\n\n    animation-name: react-loading-skeleton;\n    animation-direction: var(--animation-direction);\n    animation-duration: var(--animation-duration);\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: infinite;\n}\n";
+var css_248z$6 = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--base-color),\n    var(--highlight-color),\n    var(--base-color)\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
 styleInject(css_248z$6);
 
 /**
@@ -60223,7 +60223,19 @@ function useClickedOutsideElement(refElement, handleClickOutside) {
     }, []);
 }
 
-var LuiBadge = function (props) { return (React__default["default"].createElement("p", { className: clsx('LuiBadge', props.size === 'sm' && 'LuiBadge--sm', props.size === 'lg' && 'LuiBadge--lg', props.backgroundFill && 'LuiBadge--fill', props.variation === 'warning' && 'LuiBadge--warning'), "aria-roledescription": props.ariaRoleDescription }, props.children)); };
+var getFillClassName = function (fillVariation, backgroundFill) {
+    if (backgroundFill) {
+        return 'LuiBadge--fill';
+    }
+    else if (fillVariation === 'fill') {
+        return 'LuiBadge--fill-color';
+    }
+    return 'LuiBadge--outline';
+};
+var LuiBadge = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'default' : _b, _c = _a.variation, variation = _c === void 0 ? 'default' : _c, backgroundFill = _a.backgroundFill, ariaRoleDescription = _a.ariaRoleDescription, _d = _a.fillVariation, fillVariation = _d === void 0 ? 'outline' : _d, children = _a.children;
+    return (React__default["default"].createElement("p", { className: clsx('LuiBadge', "LuiBadge--".concat(size), getFillClassName(fillVariation, backgroundFill), "LuiBadge--variation-".concat(variation)), "aria-roledescription": ariaRoleDescription }, children));
+};
 
 var LuiSidePanelContext = React__default["default"].createContext({ setProps: function () { return undefined; } });
 var LuiSidePanel = function (_a) {