@applique-ui/banner
Advanced tools
@applique-ui/banner - npm Package Compare versions
Comparing version 0.0.19 to 0.0.20
@@ -5,18 +5,13 @@ 'use strict'; | ||
| function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } | ||
| var React = require('react'); | ||
| var Icon = require('@applique-ui/icon'); | ||
| var Button = require('@applique-ui/button'); | ||
| var React__default = _interopDefault(React); | ||
| var Icon = _interopDefault(require('@applique-ui/icon')); | ||
| var Button = _interopDefault(require('@applique-ui/button')); | ||
| var uikitUtils = require('@applique-ui/uikit-utils'); | ||
| var Layout = require('@applique-ui/layout'); | ||
| var Text = require('@applique-ui/text'); | ||
| var Layout = _interopDefault(require('@applique-ui/layout')); | ||
| var Text = _interopDefault(require('@applique-ui/text')); | ||
| function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
| var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon); | ||
| var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button); | ||
| var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout); | ||
| var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text); | ||
| function styleInject$1(css) { | ||
| function styleInject(css) { | ||
| if (!css || typeof document === 'undefined') return | ||
@@ -37,11 +32,11 @@ | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| const locals$1 = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close"}; | ||
| const locals = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close"}; | ||
| function classnames$1() { | ||
| return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
| function classnames() { | ||
| return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
| } | ||
| function styleInject(css) { | ||
| function styleInject$1(css) { | ||
| if (!css || typeof document === 'undefined') return | ||
@@ -62,12 +57,12 @@ | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable{padding:16px;z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff}.aui-banner-actionable.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-actionable.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-actionable.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-actionable.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-actionable.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-actionable.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-actionable.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-actionable .aui-banner-header{margin-left:32px}.aui-banner-actionable .aui-banner-contents-wrapper{position:relative;width:100vw;height:100vh;padding-left:8px}.aui-banner-actionable .aui-banner-feedback-contain{margin-left:20px}.aui-banner-actionable .aui-banner-contents{position:absolute;top:28%}.aui-banner-actionable .aui-banner-entity-id{margin-top:-8px}.aui-banner-actionable .aui-banner-action-name{width:70vw;padding-top:8px;margin-top:28px;border-top:1px solid #fff}.aui-banner-actionable .aui-banner-close{position:absolute;top:4px;right:12px}.aui-banner-actionable .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable .aui-banner-action{width:100px;min-width:100px;padding:12px;margin-top:20px;font-size:16px;font-weight:600;color:rgba(0,0,0,.6);border:none;border-radius:4px}.aui-banner-actionable .aui-banner-icon{width:28px;height:28px;margin-top:8px;transform:scale(1.5)}"); | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable{padding:16px;z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff}.aui-banner-actionable.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-actionable.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-actionable.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-actionable.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-actionable.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-actionable.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-actionable.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-actionable .aui-banner-header{margin-left:32px}.aui-banner-actionable .aui-banner-contents-wrapper{position:relative;width:100vw;height:100vh;padding-left:8px}.aui-banner-actionable .aui-banner-feedback-contain{margin-left:20px}.aui-banner-actionable .aui-banner-contents{position:absolute;top:28%}.aui-banner-actionable .aui-banner-entity-id{margin-top:-8px}.aui-banner-actionable .aui-banner-action-name{width:70vw;padding-top:8px;margin-top:28px;border-top:1px solid #fff}.aui-banner-actionable .aui-banner-close{position:absolute;top:4px;right:12px}.aui-banner-actionable .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable .aui-banner-action{width:100px;min-width:100px;padding:12px;margin-top:20px;font-size:16px;font-weight:600;color:rgba(0,0,0,.6);border:none;border-radius:4px}.aui-banner-actionable .aui-banner-icon{width:28px;height:28px;margin-top:8px;transform:scale(1.5)}"); | ||
| const locals = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close","actionable":"aui-banner-actionable","header":"aui-banner-header","contents-wrapper":"aui-banner-contents-wrapper","feedback-contain":"aui-banner-feedback-contain","contents":"aui-banner-contents","entity-id":"aui-banner-entity-id","action-name":"aui-banner-action-name","action":"aui-banner-action"}; | ||
| const locals$1 = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close","actionable":"aui-banner-actionable","header":"aui-banner-header","contents-wrapper":"aui-banner-contents-wrapper","feedback-contain":"aui-banner-feedback-contain","contents":"aui-banner-contents","entity-id":"aui-banner-entity-id","action-name":"aui-banner-action-name","action":"aui-banner-action"}; | ||
| function classnames() { | ||
| return uikitUtils.classnames.apply(null, arguments).use(locals) | ||
| function classnames$1() { | ||
| return uikitUtils.classnames.apply(null, arguments).use(locals$1) | ||
| } | ||
| const TimesSolid = () => | ||
| React__default["default"].createElement( | ||
| React__default.createElement( | ||
| 'svg', | ||
@@ -83,3 +78,3 @@ { | ||
| }, | ||
| React__default["default"].createElement('path', { | ||
| React__default.createElement('path', { | ||
| fill: 'currentColor', | ||
@@ -92,3 +87,3 @@ d: | ||
| const ExclamationTriangleSolid = () => | ||
| React__default["default"].createElement( | ||
| React__default.createElement( | ||
| 'svg', | ||
@@ -104,3 +99,3 @@ { | ||
| }, | ||
| React__default["default"].createElement('path', { | ||
| React__default.createElement('path', { | ||
| fill: 'currentColor', | ||
@@ -113,3 +108,3 @@ d: | ||
| const ExclamationCircleSolid = () => | ||
| React__default["default"].createElement( | ||
| React__default.createElement( | ||
| 'svg', | ||
@@ -125,3 +120,3 @@ { | ||
| }, | ||
| React__default["default"].createElement('path', { | ||
| React__default.createElement('path', { | ||
| fill: 'currentColor', | ||
@@ -134,3 +129,3 @@ d: | ||
| const CheckCircleSolid = () => | ||
| React__default["default"].createElement( | ||
| React__default.createElement( | ||
| 'svg', | ||
@@ -146,3 +141,3 @@ { | ||
| }, | ||
| React__default["default"].createElement('path', { | ||
| React__default.createElement('path', { | ||
| fill: 'currentColor', | ||
@@ -179,17 +174,17 @@ d: | ||
| const iconName = icon === undefined ? ICONS[bannerType] : icon; | ||
| return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames('actionable', typeName) }), | ||
| React__default["default"].createElement("div", { className: classnames('header') }, | ||
| React__default["default"].createElement(Text__default["default"].h3, { color: "light" }, header), | ||
| React__default["default"].createElement(Text__default["default"].p, { color: "light" }, subHeader)), | ||
| onClose && (React__default["default"].createElement(Button__default["default"], { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
| React__default["default"].createElement("div", { className: classnames('contents-wrapper') }, | ||
| React__default["default"].createElement(Layout__default["default"], { type: "stack", className: classnames('contents') }, | ||
| React__default["default"].createElement(Icon__default["default"], { className: classnames('icon'), name: iconName }), | ||
| React__default["default"].createElement(Layout__default["default"], { type: "row", className: classnames('feedback-contain') }, | ||
| React__default["default"].createElement(Text__default["default"].h1, { color: "light" }, feedback), | ||
| React__default["default"].createElement(Text__default["default"].body, { color: "light", emphasis: "medium" }, entityName), | ||
| React__default["default"].createElement(Text__default["default"].h2, { className: classnames('entity-id'), color: "light" }, entityId), | ||
| React__default["default"].createElement(Text__default["default"].h3, { className: classnames('action-name'), color: "light" }, actionToTake), | ||
| actionButtonText && (React__default["default"].createElement(Button__default["default"] //button type has to be added once new button is added | ||
| , { className: classnames('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| return (React__default.createElement("div", Object.assign({}, props, { className: classnames$1('actionable', typeName) }), | ||
| React__default.createElement("div", { className: classnames$1('header') }, | ||
| React__default.createElement(Text.h3, { color: "light" }, header), | ||
| React__default.createElement(Text.p, { color: "light" }, subHeader)), | ||
| onClose && (React__default.createElement(Button, { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
| React__default.createElement("div", { className: classnames$1('contents-wrapper') }, | ||
| React__default.createElement(Layout, { type: "stack", className: classnames$1('contents') }, | ||
| React__default.createElement(Icon, { className: classnames$1('icon'), name: iconName }), | ||
| React__default.createElement(Layout, { type: "row", className: classnames$1('feedback-contain') }, | ||
| React__default.createElement(Text.h1, { color: "light" }, feedback), | ||
| React__default.createElement(Text.body, { color: "light", emphasis: "medium" }, entityName), | ||
| React__default.createElement(Text.h2, { className: classnames$1('entity-id'), color: "light" }, entityId), | ||
| React__default.createElement(Text.h3, { className: classnames$1('action-name'), color: "light" }, actionToTake), | ||
| actionButtonText && (React__default.createElement(Button //button type has to be added once new button is added | ||
| , { className: classnames$1('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| } | ||
@@ -227,10 +222,10 @@ } | ||
| const iconName = icon === undefined ? ICONS[type] : icon; | ||
| return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames$1('container', typeName, className, { | ||
| return (React__default.createElement("div", Object.assign({}, props, { className: classnames('container', typeName, className, { | ||
| 'no-fill': noFill, | ||
| }), role: "alert" }), | ||
| iconName ? (React__default["default"].createElement(Icon__default["default"], { className: classnames$1('icon', { top: !!body }), name: iconName })) : null, | ||
| React__default["default"].createElement("div", { className: classnames$1('content') }, | ||
| React__default["default"].createElement("div", { className: classnames$1('title') }, heading), | ||
| body ? React__default["default"].createElement("div", { className: classnames$1('body') }, body) : null), | ||
| onClose && (React__default["default"].createElement(Button__default["default"], { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
| iconName ? (React__default.createElement(Icon, { className: classnames('icon', { top: !!body }), name: iconName })) : null, | ||
| React__default.createElement("div", { className: classnames('content') }, | ||
| React__default.createElement("div", { className: classnames('title') }, heading), | ||
| body ? React__default.createElement("div", { className: classnames('body') }, body) : null), | ||
| onClose && (React__default.createElement(Button, { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
| } | ||
@@ -243,2 +238,2 @@ } | ||
| exports["default"] = Banner; | ||
| exports.default = Banner; |
@@ -8,3 +8,3 @@ import React, { PureComponent } from 'react'; | ||
| function styleInject$1(css) { | ||
| function styleInject(css) { | ||
| if (!css || typeof document === 'undefined') return | ||
@@ -25,11 +25,11 @@ | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| const locals$1 = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close"}; | ||
| const locals = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close"}; | ||
| function classnames$1() { | ||
| return classnames$2.apply(null, arguments).use(locals$1) | ||
| function classnames() { | ||
| return classnames$2.apply(null, arguments).use(locals) | ||
| } | ||
| function styleInject(css) { | ||
| function styleInject$1(css) { | ||
| if (!css || typeof document === 'undefined') return | ||
@@ -50,8 +50,8 @@ | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable{padding:16px;z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff}.aui-banner-actionable.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-actionable.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-actionable.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-actionable.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-actionable.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-actionable.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-actionable.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-actionable .aui-banner-header{margin-left:32px}.aui-banner-actionable .aui-banner-contents-wrapper{position:relative;width:100vw;height:100vh;padding-left:8px}.aui-banner-actionable .aui-banner-feedback-contain{margin-left:20px}.aui-banner-actionable .aui-banner-contents{position:absolute;top:28%}.aui-banner-actionable .aui-banner-entity-id{margin-top:-8px}.aui-banner-actionable .aui-banner-action-name{width:70vw;padding-top:8px;margin-top:28px;border-top:1px solid #fff}.aui-banner-actionable .aui-banner-close{position:absolute;top:4px;right:12px}.aui-banner-actionable .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable .aui-banner-action{width:100px;min-width:100px;padding:12px;margin-top:20px;font-size:16px;font-weight:600;color:rgba(0,0,0,.6);border:none;border-radius:4px}.aui-banner-actionable .aui-banner-icon{width:28px;height:28px;margin-top:8px;transform:scale(1.5)}"); | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start;color:#fff}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-container.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-container.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-container.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-container.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-container.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-container.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-icon{width:12px;height:12px;margin-right:16px;transform:scale(1.5);transform-origin:0 -2px}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.aui-banner-container .aui-banner-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;margin-top:8px}.aui-banner-container .aui-banner-close{margin-top:-12px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable{padding:16px;z-index:9;position:fixed;top:0;right:0;bottom:0;left:0;color:#fff}.aui-banner-actionable.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8}.aui-banner-actionable.aui-banner-primary.aui-banner-no-fill{color:#4f46c8;background-color:transparent}.aui-banner-actionable.aui-banner-success{background-color:#48c76e;border-color:#48c76e}.aui-banner-actionable.aui-banner-success.aui-banner-no-fill{color:#48c76e;background-color:transparent}.aui-banner-actionable.aui-banner-error{background-color:#c84646;border-color:#c84646}.aui-banner-actionable.aui-banner-error.aui-banner-no-fill{color:#c84646;background-color:transparent}.aui-banner-actionable.aui-banner-warning{background-color:#efaa1f;border-color:#efaa1f}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#efaa1f;background-color:transparent}.aui-banner-actionable .aui-banner-header{margin-left:32px}.aui-banner-actionable .aui-banner-contents-wrapper{position:relative;width:100vw;height:100vh;padding-left:8px}.aui-banner-actionable .aui-banner-feedback-contain{margin-left:20px}.aui-banner-actionable .aui-banner-contents{position:absolute;top:28%}.aui-banner-actionable .aui-banner-entity-id{margin-top:-8px}.aui-banner-actionable .aui-banner-action-name{width:70vw;padding-top:8px;margin-top:28px;border-top:1px solid #fff}.aui-banner-actionable .aui-banner-close{position:absolute;top:4px;right:12px}.aui-banner-actionable .aui-banner-close svg{width:20px;height:20px}.aui-banner-actionable .aui-banner-action{width:100px;min-width:100px;padding:12px;margin-top:20px;font-size:16px;font-weight:600;color:rgba(0,0,0,.6);border:none;border-radius:4px}.aui-banner-actionable .aui-banner-icon{width:28px;height:28px;margin-top:8px;transform:scale(1.5)}"); | ||
| const locals = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close","actionable":"aui-banner-actionable","header":"aui-banner-header","contents-wrapper":"aui-banner-contents-wrapper","feedback-contain":"aui-banner-feedback-contain","contents":"aui-banner-contents","entity-id":"aui-banner-entity-id","action-name":"aui-banner-action-name","action":"aui-banner-action"}; | ||
| const locals$1 = {"container":"aui-banner-container","primary":"aui-banner-primary","no-fill":"aui-banner-no-fill","success":"aui-banner-success","error":"aui-banner-error","warning":"aui-banner-warning","content":"aui-banner-content","icon":"aui-banner-icon","title":"aui-banner-title","body":"aui-banner-body","close":"aui-banner-close","actionable":"aui-banner-actionable","header":"aui-banner-header","contents-wrapper":"aui-banner-contents-wrapper","feedback-contain":"aui-banner-feedback-contain","contents":"aui-banner-contents","entity-id":"aui-banner-entity-id","action-name":"aui-banner-action-name","action":"aui-banner-action"}; | ||
| function classnames() { | ||
| return classnames$2.apply(null, arguments).use(locals) | ||
| function classnames$1() { | ||
| return classnames$2.apply(null, arguments).use(locals$1) | ||
| } | ||
@@ -160,17 +160,17 @@ | ||
| const iconName = icon === undefined ? ICONS[bannerType] : icon; | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames('actionable', typeName) }), | ||
| React.createElement("div", { className: classnames('header') }, | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames$1('actionable', typeName) }), | ||
| React.createElement("div", { className: classnames$1('header') }, | ||
| React.createElement(Text.h3, { color: "light" }, header), | ||
| React.createElement(Text.p, { color: "light" }, subHeader)), | ||
| onClose && (React.createElement(Button, { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
| React.createElement("div", { className: classnames('contents-wrapper') }, | ||
| React.createElement(Layout, { type: "stack", className: classnames('contents') }, | ||
| React.createElement(Icon, { className: classnames('icon'), name: iconName }), | ||
| React.createElement(Layout, { type: "row", className: classnames('feedback-contain') }, | ||
| onClose && (React.createElement(Button, { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
| React.createElement("div", { className: classnames$1('contents-wrapper') }, | ||
| React.createElement(Layout, { type: "stack", className: classnames$1('contents') }, | ||
| React.createElement(Icon, { className: classnames$1('icon'), name: iconName }), | ||
| React.createElement(Layout, { type: "row", className: classnames$1('feedback-contain') }, | ||
| React.createElement(Text.h1, { color: "light" }, feedback), | ||
| React.createElement(Text.body, { color: "light", emphasis: "medium" }, entityName), | ||
| React.createElement(Text.h2, { className: classnames('entity-id'), color: "light" }, entityId), | ||
| React.createElement(Text.h3, { className: classnames('action-name'), color: "light" }, actionToTake), | ||
| React.createElement(Text.h2, { className: classnames$1('entity-id'), color: "light" }, entityId), | ||
| React.createElement(Text.h3, { className: classnames$1('action-name'), color: "light" }, actionToTake), | ||
| actionButtonText && (React.createElement(Button //button type has to be added once new button is added | ||
| , { className: classnames('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| , { className: classnames$1('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| } | ||
@@ -208,10 +208,10 @@ } | ||
| const iconName = icon === undefined ? ICONS[type] : icon; | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames$1('container', typeName, className, { | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames('container', typeName, className, { | ||
| 'no-fill': noFill, | ||
| }), role: "alert" }), | ||
| iconName ? (React.createElement(Icon, { className: classnames$1('icon', { top: !!body }), name: iconName })) : null, | ||
| React.createElement("div", { className: classnames$1('content') }, | ||
| React.createElement("div", { className: classnames$1('title') }, heading), | ||
| body ? React.createElement("div", { className: classnames$1('body') }, body) : null), | ||
| onClose && (React.createElement(Button, { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
| iconName ? (React.createElement(Icon, { className: classnames('icon', { top: !!body }), name: iconName })) : null, | ||
| React.createElement("div", { className: classnames('content') }, | ||
| React.createElement("div", { className: classnames('title') }, heading), | ||
| body ? React.createElement("div", { className: classnames('body') }, body) : null), | ||
| onClose && (React.createElement(Button, { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
| } | ||
@@ -224,2 +224,2 @@ } | ||
| export { Banner as default }; | ||
| export default Banner; |
| { | ||
| "name": "@applique-ui/banner", | ||
| "version": "0.0.19", | ||
| "version": "0.0.20", | ||
| "main": "dist/banner.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/banner.esm.js", |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.78%
42533
- Lines of code
- decreased by-0.51%
773
No dependency changes