@applique-ui/banner
Advanced tools
@applique-ui/banner - npm Package Compare versions
Comparing version 0.0.53 to 0.0.54
@@ -5,3 +5,7 @@ import { PureComponent } from 'react'; | ||
| data?: { | ||
| type?: 'error' | 'warning' | 'success'; | ||
| /** | ||
| * @deprecated | ||
| */ | ||
| type?: 'error' | 'warning' | 'success' | 'info'; | ||
| color?: 'error' | 'warning' | 'success' | 'info'; | ||
| icon?: IconName; | ||
@@ -8,0 +12,0 @@ header?: string; |
@@ -36,5 +36,5 @@ 'use strict'; | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:4px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-container .aui-banner-icon-info{color:#0046ae}.aui-banner-container.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-container .aui-banner-icon-success{color:#1f845a}.aui-banner-container.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-container .aui-banner-icon-error{color:#b63a2a}.aui-banner-container.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-container .aui-banner-icon-warning{color:#b65c02}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.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-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;display:inline;margin-top:8px}.aui-banner-container .aui-banner-link{padding-left:4px}.aui-banner-container .aui-banner-icon-link{margin-top:2px;font-size:14px}.aui-banner-container .aui-banner-close{margin-top:4px}.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$1 = {"container":"aui-banner-container","info":"aui-banner-info","icon-info":"aui-banner-icon-info","success":"aui-banner-success","icon-success":"aui-banner-icon-success","error":"aui-banner-error","icon-error":"aui-banner-icon-error","warning":"aui-banner-warning","icon-warning":"aui-banner-icon-warning","content":"aui-banner-content","title":"aui-banner-title","icon":"aui-banner-icon","body":"aui-banner-body","link":"aui-banner-link","icon-link":"aui-banner-icon-link","close":"aui-banner-close"}; | ||
@@ -61,5 +61,5 @@ function classnames$1() { | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:4px}.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;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:12px;right:16px}.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(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-container .aui-banner-icon-info{color:#0046ae}.aui-banner-container.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-container .aui-banner-icon-success{color:#1f845a}.aui-banner-container.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-container .aui-banner-icon-error{color:#b63a2a}.aui-banner-container.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-container .aui-banner-icon-warning{color:#b65c02}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.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-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;display:inline;margin-top:8px}.aui-banner-container .aui-banner-link{padding-left:4px}.aui-banner-container .aui-banner-icon-link{margin-top:2px;font-size:14px}.aui-banner-container .aui-banner-close{margin-top:4px}.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-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-actionable .aui-banner-icon-info{color:#0046ae}.aui-banner-actionable.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-actionable .aui-banner-icon-success{color:#1f845a}.aui-banner-actionable.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-actionable .aui-banner-icon-error{color:#b63a2a}.aui-banner-actionable.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-actionable .aui-banner-icon-warning{color:#b65c02}.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:12px;right:16px}.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 = {"container":"aui-banner-container","info":"aui-banner-info","icon-info":"aui-banner-icon-info","success":"aui-banner-success","icon-success":"aui-banner-icon-success","error":"aui-banner-error","icon-error":"aui-banner-icon-error","warning":"aui-banner-warning","icon-warning":"aui-banner-icon-warning","content":"aui-banner-content","title":"aui-banner-title","icon":"aui-banner-icon","body":"aui-banner-body","link":"aui-banner-link","icon-link":"aui-banner-icon-link","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"}; | ||
@@ -150,2 +150,3 @@ function classnames() { | ||
| success: CheckCircleSolid, | ||
| info: ExclamationCircleSolid, | ||
| }; | ||
@@ -166,12 +167,13 @@ const RE_BACKWARD_COMPAT = /^(primary|info)$/; | ||
| return null; | ||
| const { type, icon, header, subHeader, feedback, entityName, entityId, actionToTake, actionButtonText, onClose, onActionClick, } = data; | ||
| const bannerType = type || 'error'; | ||
| const typeName = RE_BACKWARD_COMPAT.test(bannerType) | ||
| ? 'success' | ||
| : bannerType; | ||
| const iconName = icon === undefined ? ICONS[bannerType] : icon; | ||
| const { color, type, icon, header, subHeader, feedback, entityName, entityId, actionToTake, actionButtonText, onClose, onActionClick, } = data; | ||
| const typeName = RE_BACKWARD_COMPAT.test(color) | ||
| ? 'info' | ||
| : color || RE_BACKWARD_COMPAT.test(type) | ||
| ? 'info' | ||
| : type || 'info'; | ||
| const iconName = icon === undefined ? ICONS[typeName] : 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)), | ||
| React__default["default"].createElement(Text__default["default"].h3, null, header), | ||
| React__default["default"].createElement(Text__default["default"].p, null, subHeader)), | ||
| onClose && (React__default["default"].createElement(Button__default["default"], { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
@@ -182,6 +184,6 @@ React__default["default"].createElement("div", { className: classnames('contents-wrapper') }, | ||
| 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), | ||
| React__default["default"].createElement(Text__default["default"].h1, null, feedback), | ||
| React__default["default"].createElement(Text__default["default"].body, { emphasis: "medium" }, entityName), | ||
| React__default["default"].createElement(Text__default["default"].h2, { className: classnames('entity-id') }, entityId), | ||
| React__default["default"].createElement(Text__default["default"].h3, { className: classnames('action-name') }, actionToTake), | ||
| actionButtonText && (React__default["default"].createElement(Button__default["default"] //button type has to be added once new button is added | ||
@@ -196,4 +198,4 @@ , { className: classnames('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| } | ||
| else if (!data.type) { | ||
| throw new Error(`Type not found in data, default will be taken as error.`); | ||
| else if (!data.color) { | ||
| throw new Error(`Color not found in data, default will be taken as info.`); | ||
| } | ||
@@ -203,2 +205,21 @@ }, | ||
| const ChevronRightSolid = () => | ||
| React__default["default"].createElement( | ||
| 'svg', | ||
| { | ||
| 'aria-hidden': 'true', | ||
| focusable: 'false', | ||
| 'data-prefix': 'fas', | ||
| 'data-icon': 'chevron-right', | ||
| role: 'img', | ||
| xmlns: 'http://www.w3.org/2000/svg', | ||
| viewBox: '0 0 320 512', | ||
| }, | ||
| React__default["default"].createElement('path', { | ||
| fill: 'currentColor', | ||
| d: | ||
| 'M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z', | ||
| }) | ||
| ); | ||
| // Design: https://zpl.io/bA7ZRWp | ||
@@ -218,14 +239,15 @@ // Documentation: https://zpl.io/bJGxg6E | ||
| render() { | ||
| const { className, type, icon, title, solid, onClose, noFill, children, ...props } = this.props; | ||
| const typeName = RE_BACKWARD_COMPAT.test(type) ? 'success' : type; | ||
| const { className, icon, title, solid, onClose, noFill, children, link, color, type, ...props } = this.props; | ||
| const typeName = RE_BACKWARD_COMPAT.test(color) || RE_BACKWARD_COMPAT.test(type) | ||
| ? 'info' | ||
| : color || type || 'info'; | ||
| const heading = title || children; | ||
| const body = title ? children : null; | ||
| const iconName = icon === undefined ? ICONS[type] : icon; | ||
| return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames$1('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, | ||
| const iconName = icon === undefined ? ICONS[typeName] : icon; | ||
| return (React__default["default"].createElement("div", Object.assign({}, props, { className: classnames$1('container', typeName, className), role: "alert" }), | ||
| iconName ? (React__default["default"].createElement(Icon__default["default"], { className: classnames$1(`icon-${typeName}`, '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), | ||
| body ? React__default["default"].createElement("div", { className: classnames$1('body') }, body) : null, | ||
| link?.href && (React__default["default"].createElement(Button__default["default"], { type: "link", target: "_blank", href: link.href, secondaryIcon: ChevronRightSolid, className: classnames$1('link'), "data-test-id": "link" }, link.displayText))), | ||
| onClose && (React__default["default"].createElement(Button__default["default"], { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
@@ -235,6 +257,13 @@ } | ||
| Banner.Actionable = Actionable; | ||
| Banner.defaultProps = { | ||
| type: 'error', | ||
| Banner.propTypes = { | ||
| __$validation({ link }) { | ||
| if (link?.href && !link?.displayText) { | ||
| throw new Error(`link should also have a 'displayText'`); | ||
| } | ||
| if (!link?.href && link?.displayText) { | ||
| throw new Error(`link should also have a 'href'`); | ||
| } | ||
| }, | ||
| }; | ||
| exports["default"] = Banner; |
| import { PureComponent } from 'react'; | ||
| import { IconName } from '@applique-ui/icon'; | ||
| import Actionable from './actionable'; | ||
| import { Link } from './constants'; | ||
| export interface Props extends BaseProps { | ||
@@ -8,4 +9,8 @@ /** | ||
| */ | ||
| type?: 'error' | 'warning' | 'success'; | ||
| /** | ||
| * @deprecated | ||
| */ | ||
| type?: 'error' | 'warning' | 'success' | 'info'; | ||
| color?: 'error' | 'warning' | 'success' | 'info'; | ||
| /** | ||
| * | ||
@@ -30,5 +35,5 @@ * _TIP:_ Set `icon` to `null` to remove icon. | ||
| /** | ||
| * Only border based Alert | ||
| * If you need to add link to the banner | ||
| */ | ||
| noFill: boolean; | ||
| link?: Link; | ||
| } | ||
@@ -47,6 +52,8 @@ /** | ||
| static Actionable: typeof Actionable; | ||
| static defaultProps: { | ||
| type: string; | ||
| static propTypes: { | ||
| __$validation({ link }: { | ||
| link: any; | ||
| }): void; | ||
| }; | ||
| render(): JSX.Element; | ||
| } |
@@ -24,5 +24,5 @@ import React, { PureComponent } from 'react'; | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:4px}.aui-banner-container .aui-banner-close svg{width:20px;height:20px}"); | ||
| styleInject$1(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-container .aui-banner-icon-info{color:#0046ae}.aui-banner-container.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-container .aui-banner-icon-success{color:#1f845a}.aui-banner-container.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-container .aui-banner-icon-error{color:#b63a2a}.aui-banner-container.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-container .aui-banner-icon-warning{color:#b65c02}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.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-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;display:inline;margin-top:8px}.aui-banner-container .aui-banner-link{padding-left:4px}.aui-banner-container .aui-banner-icon-link{margin-top:2px;font-size:14px}.aui-banner-container .aui-banner-close{margin-top:4px}.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$1 = {"container":"aui-banner-container","info":"aui-banner-info","icon-info":"aui-banner-icon-info","success":"aui-banner-success","icon-success":"aui-banner-icon-success","error":"aui-banner-error","icon-error":"aui-banner-icon-error","warning":"aui-banner-warning","icon-warning":"aui-banner-icon-warning","content":"aui-banner-content","title":"aui-banner-title","icon":"aui-banner-icon","body":"aui-banner-body","link":"aui-banner-link","icon-link":"aui-banner-icon-link","close":"aui-banner-close"}; | ||
@@ -49,5 +49,5 @@ function classnames$1() { | ||
| styleInject(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-primary{background-color:#4f46c8;border-color:#4f46c8;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-container.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:4px}.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;color:#fff}.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;color:#fff}.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;color:#fff}.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;color:#624a19}.aui-banner-actionable.aui-banner-warning.aui-banner-no-fill{color:#c39232;border-color:#c39232;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:12px;right:16px}.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(".aui-banner-container{padding:16px;border:1px solid;border-radius:4px;display:flex;flex-direction:row;align-items:flex-start}.aui-banner-container.aui-banner-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-container .aui-banner-icon-info{color:#0046ae}.aui-banner-container.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-container .aui-banner-icon-success{color:#1f845a}.aui-banner-container.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-container .aui-banner-icon-error{color:#b63a2a}.aui-banner-container.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-container .aui-banner-icon-warning{color:#b65c02}.aui-banner-container .aui-banner-content{flex:1}.aui-banner-container .aui-banner-title{font-family:Roboto,Helvetica,sans-serif;font-size:16px;font-weight:500}.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-body{font-family:Roboto,Helvetica,sans-serif;font-size:14px;font-weight:400;display:inline;margin-top:8px}.aui-banner-container .aui-banner-link{padding-left:4px}.aui-banner-container .aui-banner-icon-link{margin-top:2px;font-size:14px}.aui-banner-container .aui-banner-close{margin-top:4px}.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-info{color:#000;background-color:#e5eefb;border-color:#e5eefb}.aui-banner-actionable .aui-banner-icon-info{color:#0046ae}.aui-banner-actionable.aui-banner-success{color:#000;background-color:#dffcf0;border-color:#dffcf0}.aui-banner-actionable .aui-banner-icon-success{color:#1f845a}.aui-banner-actionable.aui-banner-error{color:#000;background-color:#fcedeb;border-color:#fcedeb}.aui-banner-actionable .aui-banner-icon-error{color:#b63a2a}.aui-banner-actionable.aui-banner-warning{color:#000;background-color:#fff4e5;border-color:#fff4e5}.aui-banner-actionable .aui-banner-icon-warning{color:#b65c02}.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:12px;right:16px}.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 = {"container":"aui-banner-container","info":"aui-banner-info","icon-info":"aui-banner-icon-info","success":"aui-banner-success","icon-success":"aui-banner-icon-success","error":"aui-banner-error","icon-error":"aui-banner-icon-error","warning":"aui-banner-warning","icon-warning":"aui-banner-icon-warning","content":"aui-banner-content","title":"aui-banner-title","icon":"aui-banner-icon","body":"aui-banner-body","link":"aui-banner-link","icon-link":"aui-banner-icon-link","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"}; | ||
@@ -138,2 +138,3 @@ function classnames() { | ||
| success: CheckCircleSolid, | ||
| info: ExclamationCircleSolid, | ||
| }; | ||
@@ -154,12 +155,13 @@ const RE_BACKWARD_COMPAT = /^(primary|info)$/; | ||
| return null; | ||
| const { type, icon, header, subHeader, feedback, entityName, entityId, actionToTake, actionButtonText, onClose, onActionClick, } = data; | ||
| const bannerType = type || 'error'; | ||
| const typeName = RE_BACKWARD_COMPAT.test(bannerType) | ||
| ? 'success' | ||
| : bannerType; | ||
| const iconName = icon === undefined ? ICONS[bannerType] : icon; | ||
| const { color, type, icon, header, subHeader, feedback, entityName, entityId, actionToTake, actionButtonText, onClose, onActionClick, } = data; | ||
| const typeName = RE_BACKWARD_COMPAT.test(color) | ||
| ? 'info' | ||
| : color || RE_BACKWARD_COMPAT.test(type) | ||
| ? 'info' | ||
| : type || 'info'; | ||
| const iconName = icon === undefined ? ICONS[typeName] : icon; | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames('actionable', typeName) }), | ||
| React.createElement("div", { className: classnames('header') }, | ||
| React.createElement(Text.h3, { color: "light" }, header), | ||
| React.createElement(Text.p, { color: "light" }, subHeader)), | ||
| React.createElement(Text.h3, null, header), | ||
| React.createElement(Text.p, null, subHeader)), | ||
| onClose && (React.createElement(Button, { className: classnames('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })), | ||
@@ -170,6 +172,6 @@ React.createElement("div", { className: classnames('contents-wrapper') }, | ||
| React.createElement(Layout, { type: "row", className: classnames('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.h1, null, feedback), | ||
| React.createElement(Text.body, { emphasis: "medium" }, entityName), | ||
| React.createElement(Text.h2, { className: classnames('entity-id') }, entityId), | ||
| React.createElement(Text.h3, { className: classnames('action-name') }, actionToTake), | ||
| actionButtonText && (React.createElement(Button //button type has to be added once new button is added | ||
@@ -184,4 +186,4 @@ , { className: classnames('action'), inheritTextColor: true, onClick: onActionClick, "data-test-id": "action", label: actionButtonText }))))))); | ||
| } | ||
| else if (!data.type) { | ||
| throw new Error(`Type not found in data, default will be taken as error.`); | ||
| else if (!data.color) { | ||
| throw new Error(`Color not found in data, default will be taken as info.`); | ||
| } | ||
@@ -191,2 +193,21 @@ }, | ||
| const ChevronRightSolid = () => | ||
| React.createElement( | ||
| 'svg', | ||
| { | ||
| 'aria-hidden': 'true', | ||
| focusable: 'false', | ||
| 'data-prefix': 'fas', | ||
| 'data-icon': 'chevron-right', | ||
| role: 'img', | ||
| xmlns: 'http://www.w3.org/2000/svg', | ||
| viewBox: '0 0 320 512', | ||
| }, | ||
| React.createElement('path', { | ||
| fill: 'currentColor', | ||
| d: | ||
| 'M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z', | ||
| }) | ||
| ); | ||
| // Design: https://zpl.io/bA7ZRWp | ||
@@ -206,14 +227,15 @@ // Documentation: https://zpl.io/bJGxg6E | ||
| render() { | ||
| const { className, type, icon, title, solid, onClose, noFill, children, ...props } = this.props; | ||
| const typeName = RE_BACKWARD_COMPAT.test(type) ? 'success' : type; | ||
| const { className, icon, title, solid, onClose, noFill, children, link, color, type, ...props } = this.props; | ||
| const typeName = RE_BACKWARD_COMPAT.test(color) || RE_BACKWARD_COMPAT.test(type) | ||
| ? 'info' | ||
| : color || type || 'info'; | ||
| const heading = title || children; | ||
| const body = title ? children : null; | ||
| const iconName = icon === undefined ? ICONS[type] : icon; | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames$1('container', typeName, className, { | ||
| 'no-fill': noFill, | ||
| }), role: "alert" }), | ||
| iconName ? (React.createElement(Icon, { className: classnames$1('icon', { top: !!body }), name: iconName })) : null, | ||
| const iconName = icon === undefined ? ICONS[typeName] : icon; | ||
| return (React.createElement("div", Object.assign({}, props, { className: classnames$1('container', typeName, className), role: "alert" }), | ||
| iconName ? (React.createElement(Icon, { className: classnames$1(`icon-${typeName}`, '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), | ||
| body ? React.createElement("div", { className: classnames$1('body') }, body) : null, | ||
| link?.href && (React.createElement(Button, { type: "link", target: "_blank", href: link.href, secondaryIcon: ChevronRightSolid, className: classnames$1('link'), "data-test-id": "link" }, link.displayText))), | ||
| onClose && (React.createElement(Button, { className: classnames$1('close'), type: "link", icon: TimesSolid, inheritTextColor: true, onClick: onClose, "data-test-id": "close" })))); | ||
@@ -223,6 +245,13 @@ } | ||
| Banner.Actionable = Actionable; | ||
| Banner.defaultProps = { | ||
| type: 'error', | ||
| Banner.propTypes = { | ||
| __$validation({ link }) { | ||
| if (link?.href && !link?.displayText) { | ||
| throw new Error(`link should also have a 'displayText'`); | ||
| } | ||
| if (!link?.href && link?.displayText) { | ||
| throw new Error(`link should also have a 'href'`); | ||
| } | ||
| }, | ||
| }; | ||
| export { Banner as default }; |
| import { IconName } from '@applique-ui/icon'; | ||
| export declare const ICONS: Record<string, IconName>; | ||
| export interface Link { | ||
| href: string; | ||
| displayText: string; | ||
| } | ||
| export declare const RE_BACKWARD_COMPAT: RegExp; |
| { | ||
| "name": "@applique-ui/banner", | ||
| "version": "0.0.53", | ||
| "version": "0.0.54", | ||
| "main": "dist/banner.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/banner.esm.js", |
@@ -21,3 +21,46 @@ import React from 'react' | ||
| }) | ||
| it('calls `onClick` prop if action Button element is clicked', () => { | ||
| const handleClick = jest.fn() | ||
| const wrapper = shallow( | ||
| <Alert.Actionable | ||
| data={{ | ||
| color: 'info', | ||
| actionButtonText: 'OKAY', | ||
| onActionClick: handleClick, | ||
| }} | ||
| /> | ||
| ) | ||
| wrapper.find('[data-test-id="action"]').simulate('click') | ||
| expect(handleClick).toHaveBeenCalled() | ||
| wrapper.unmount() | ||
| }) | ||
| it('throws error if both href and displayText are not there in link prop', () => { | ||
| const linkProps = { | ||
| link: { | ||
| href: 'https://myntra.com', | ||
| }, | ||
| } | ||
| shallow(<Alert {...linkProps}>Click me</Alert>) | ||
| }) | ||
| it('throws error if data not there in actionable', () => { | ||
| shallow(<Alert.Actionable />) | ||
| }) | ||
| it('throws error if data.color not there in actionable', () => { | ||
| shallow( | ||
| <Alert.Actionable | ||
| data={{ | ||
| feedback: 'Wrong Carton!', | ||
| header: 'Adding MasterBags', | ||
| subHeader: 'Deepak Kumar - New Whitefield', | ||
| }} | ||
| /> | ||
| ) | ||
| }) | ||
| }) | ||
| }) |
@@ -10,4 +10,8 @@ import { IconName } from '@applique-ui/icon' | ||
| success: CheckCircleSolid, | ||
| info: ExclamationCircleSolid, | ||
| } | ||
| export interface Link { | ||
| href: string | ||
| displayText: string | ||
| } | ||
| export const RE_BACKWARD_COMPAT = /^(primary|info)$/ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.02%
48834
- Lines of code
- increased by18.79%
923
No dependency changes