@rocket.chat/fuselage 0.32.0-dev.153 → 0.32.0-dev.154
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import type { ReactNode, AllHTMLAttributes } from 'react';
|
|
2
2
|
declare type VariantType = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
|
|
3
3
|
declare type BannerProps = {
|
|
4
|
-
inline?: boolean;
|
|
5
4
|
actionable?: boolean;
|
|
6
5
|
closeable?: boolean;
|
|
7
6
|
icon?: ReactNode;
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
inline?: boolean;
|
|
8
|
+
link?: string;
|
|
9
|
+
linkText?: string;
|
|
10
10
|
onAction?: () => void;
|
|
11
11
|
onClose?: () => void;
|
|
12
|
+
title?: string;
|
|
13
|
+
variant?: VariantType;
|
|
12
14
|
} & AllHTMLAttributes<HTMLElement>;
|
|
13
|
-
declare const Banner: ({
|
|
15
|
+
declare const Banner: ({ actionable, children, className, closeable, icon, inline, link, linkText, onAction, onClose, title, variant, ...props }: BannerProps) => JSX.Element;
|
|
14
16
|
export default Banner;
|
|
15
17
|
//# sourceMappingURL=Banner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ1D,aAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUzE,aAAK,WAAW,GAAG;IACjB,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/Banner/Banner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAQ1D,aAAK,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAUzE,aAAK,WAAW,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAEnC,QAAA,MAAM,MAAM,8HAcT,WAAW,gBAgFb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -3244,7 +3244,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
3244
3244
|
|
|
3245
3245
|
var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
|
|
3246
3246
|
// Module
|
|
3247
|
-
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n box-sizing: border-box;\n padding-top: 14px;\n padding-bottom: 14px;\n padding-block: 14px;\n padding-left: 16px;\n padding-right: 16px;\n padding-inline: 16px;\n font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n padding-top: 12px;\n padding-bottom: 12px;\n padding-block: 12px;\n}\n.rcx-banner--actionable {\n cursor: pointer;\n}\n.rcx-banner--neutral {\n color: #2f343d;\n color: var(--rcx-banner-colors-neutral-color, var(--rcx-font-default, var(--rcx-color-neutral-800, #2f343d)));\n background-color: #e4e7ea;\n background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n}\n.rcx-banner--info {\n color: #095AD2;\n color: var(--rcx-banner-colors-info-color, var(--rcx-status-fonts-on-info, var(--rcx-color-primary-600, #095AD2)));\n background-color: #D1EBFE;\n background-color: var(--rcx-banner-colors-info-background-color, var(--rcx-status-background-info, var(--rcx-color-primary-200, #D1EBFE)));\n}\n.rcx-banner--success {\n color: #148660;\n color: var(--rcx-banner-colors-success-color, var(--rcx-status-fonts-on-success, var(--rcx-color-success-800, #148660)));\n background-color: #C0F6E4;\n background-color: var(--rcx-banner-colors-success-background-color, var(--rcx-status-background-success, var(--rcx-color-success-200, #C0F6E4)));\n}\n.rcx-banner--warning {\n color: #8E6300;\n color: var(--rcx-banner-colors-warning-color, var(--rcx-status-fonts-on-warning, var(--rcx-color-warning-900, #8E6300)));\n background-color: #FFECAD;\n background-color: var(--rcx-banner-colors-warning-background-color, var(--rcx-status-background-warning, var(--rcx-color-warning-200, #FFECAD)));\n}\n.rcx-banner--danger {\n color: #9B1325;\n color: var(--rcx-banner-colors-danger-color, var(--rcx-status-fonts-on-danger, var(--rcx-color-danger-800, #9B1325)));\n background-color: #FFC1C9;\n background-color: var(--rcx-banner-colors-danger-background-color, var(--rcx-status-background-danger, var(--rcx-color-danger-200, #FFC1C9)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n padding-left: 12px;\n}\n.rcx-banner__icon {\n padding-top: 8px;\n padding-bottom: 8px;\n padding-block: 8px;\n -webkit-padding-end: 12px;\n padding-inline-end: 12px;\n}\n.rcx-banner__icon--inline {\n margin-top: -2px;\n margin-bottom: -2px;\n margin-block: -2px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__content {\n flex-grow: 1;\n align-self: center;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rcx-banner__title {\n margin: 0;\n padding: 0;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 700;\n line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n padding-left: 8px;\n}\n.rcx-banner__title--inline {\n display: inline;\n -webkit-padding-end: 8px;\n padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n padding-top: 6px;\n padding-bottom: 6px;\n padding-block: 6px;\n padding-left: 8px;\n padding-right: 8px;\n padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n margin-top: -4px;\n margin-bottom: -4px;\n margin-block: -4px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAmDA;EACE,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AArDF;AAuDE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AArDJ;AAwDE;EACE,eAAA;AAtDJ;AAyDE;EACE,cAtE0B;EAsE1B,6GAtE0B;EAuE1B,yBAnEqC;EAmErC,4IAnEqC;AAYzC;AA0DE;EACE,cAlEuB;EAkEvB,kHAlEuB;EAmEvB,yBA/DkC;EA+DlC,0IA/DkC;AAOtC;AA2DE;EACE,cA9D0B;EA8D1B,wHA9D0B;EA+D1B,yBA3DqC;EA2DrC,gJA3DqC;AAEzC;AA4DE;EACE,cA1D0B;EA0D1B,wHA1D0B;EA2D1B,yBAvDqC;EAuDrC,gJAvDqC;AAHzC;AA6DE;EACE,cAtDyB;EAsDzB,qHAtDyB;EAuDzB,yBAnDoC;EAmDpC,6IAnDoC;AARxC;AA8DE;EAEE;AA5DJ;AA0DE;EAEE;AA5DJ;AA0DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN;AAgEE;EACE,YAAA;EACA,kBAAA;ECzFF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AD2BF;AA8DI;EC/CF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;ADjBF;AA8DE;EACE,SAAA;EACA,UAAA;ECpGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADwCF;AA2DI;EAGE;AA1DN;AAuDI;EAGE;AA1DN;AAuDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AA1DN;AA8DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/typography.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n 'banner-colors-neutral-color',\n colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n 'banner-colors-neutral-background-color',\n colors.surface(neutral)\n);\n// info\n$banner-colors-info-color: functions.theme(\n 'banner-colors-info-color',\n colors.status-font(on-info)\n);\n$banner-colors-info-background-color: functions.theme(\n 'banner-colors-info-background-color',\n colors.status-background(info)\n);\n// success\n$banner-colors-success-color: functions.theme(\n 'banner-colors-success-color',\n colors.status-font(on-success)\n);\n$banner-colors-success-background-color: functions.theme(\n 'banner-colors-success-background-color',\n colors.status-background(success)\n);\n// warning\n$banner-colors-warning-color: functions.theme(\n 'banner-colors-warning-color',\n colors.status-font(on-warning)\n);\n$banner-colors-warning-background-color: functions.theme(\n 'banner-colors-warning-background-color',\n colors.status-background(warning)\n);\n// danger\n$banner-colors-danger-color: functions.theme(\n 'banner-colors-danger-color',\n colors.status-font(on-danger)\n);\n$banner-colors-danger-background-color: functions.theme(\n 'banner-colors-danger-background-color',\n colors.status-background(danger)\n);\n\n.rcx-banner {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n\n box-sizing: border-box;\n\n padding-block: 14px;\n padding-inline: 16px;\n\n font-family: typography.font-family('sans');\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n &--inline {\n padding-block: 12px;\n }\n\n &--actionable {\n cursor: pointer;\n }\n\n &--neutral {\n color: $banner-colors-neutral-color;\n background-color: $banner-colors-neutral-background-color;\n }\n\n &--info {\n color: $banner-colors-info-color;\n background-color: $banner-colors-info-background-color;\n }\n\n &--success {\n color: $banner-colors-success-color;\n background-color: $banner-colors-success-background-color;\n }\n\n &--warning {\n color: $banner-colors-warning-color;\n background-color: $banner-colors-warning-background-color;\n }\n\n &--danger {\n color: $banner-colors-danger-color;\n background-color: $banner-colors-danger-background-color;\n }\n\n &__icon {\n padding-block: 8px;\n padding-inline-end: 12px;\n\n &--inline {\n margin-block: -2px;\n padding-block: 0;\n }\n }\n\n &__content {\n flex-grow: 1;\n align-self: center;\n\n @include typography.use-font-scale(p2);\n\n &--inline {\n @include typography.use-with-truncated-text;\n }\n }\n\n &__title {\n margin: 0;\n padding: 0;\n @include typography.use-font-scale(h5);\n\n &--inline {\n display: inline;\n\n padding-inline-end: 8px;\n }\n }\n\n &__close-button {\n padding-block: 6px;\n padding-inline: 8px;\n\n &--inline {\n margin-block: -4px;\n padding-block: 0;\n }\n }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n @if not map.has-key(typography.$font-families, $name) {\n @error 'invalid font family name';\n }\n\n @return var(\n --rcx-font-family-#{$name},\n map.get(typography.$font-families, $name)\n );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n $-font-scale: map.get(typography.$font-scales, $name);\n letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n font-size: functions.to-rem(map.get($-font-scale, font-size));\n font-weight: map.get($-font-scale, font-weight);\n line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), letter-spacing)\n );\n}\n\n@function font-size($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), font-size)\n );\n}\n\n@function font-weight($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), line-height)\n );\n}\n\n@mixin use-text-ellipsis {\n overflow: hidden;\n\n text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n @include use-text-ellipsis();\n white-space: nowrap;\n}\n"],"sourceRoot":""}]);
|
|
3247
|
+
___CSS_LOADER_EXPORT___.push([module.id, ".rcx-banner {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n box-sizing: border-box;\n padding-top: 14px;\n padding-bottom: 14px;\n padding-block: 14px;\n padding-left: 16px;\n padding-right: 16px;\n padding-inline: 16px;\n font-family: Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif;\n font-family: var(--rcx-font-family-sans, Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Helvetica Neue\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Meiryo UI\", Arial, sans-serif);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n.rcx-banner--inline {\n padding-top: 12px;\n padding-bottom: 12px;\n padding-block: 12px;\n}\n.rcx-banner--actionable {\n cursor: pointer;\n}\n.rcx-banner--neutral {\n color: #2f343d;\n color: var(--rcx-banner-colors-neutral-color, var(--rcx-font-default, var(--rcx-color-neutral-800, #2f343d)));\n background-color: #e4e7ea;\n background-color: var(--rcx-banner-colors-neutral-background-color, var(--rcx-color-surface-neutral, var(--rcx-color-neutral-400, #e4e7ea)));\n}\n.rcx-banner--info {\n color: #095AD2;\n color: var(--rcx-banner-colors-info-color, var(--rcx-status-fonts-on-info, var(--rcx-color-primary-600, #095AD2)));\n background-color: #D1EBFE;\n background-color: var(--rcx-banner-colors-info-background-color, var(--rcx-status-background-info, var(--rcx-color-primary-200, #D1EBFE)));\n}\n.rcx-banner--success {\n color: #148660;\n color: var(--rcx-banner-colors-success-color, var(--rcx-status-fonts-on-success, var(--rcx-color-success-800, #148660)));\n background-color: #C0F6E4;\n background-color: var(--rcx-banner-colors-success-background-color, var(--rcx-status-background-success, var(--rcx-color-success-200, #C0F6E4)));\n}\n.rcx-banner--warning {\n color: #8E6300;\n color: var(--rcx-banner-colors-warning-color, var(--rcx-status-fonts-on-warning, var(--rcx-color-warning-900, #8E6300)));\n background-color: #FFECAD;\n background-color: var(--rcx-banner-colors-warning-background-color, var(--rcx-status-background-warning, var(--rcx-color-warning-200, #FFECAD)));\n}\n.rcx-banner--danger {\n color: #9B1325;\n color: var(--rcx-banner-colors-danger-color, var(--rcx-status-fonts-on-danger, var(--rcx-color-danger-800, #9B1325)));\n background-color: #FFC1C9;\n background-color: var(--rcx-banner-colors-danger-background-color, var(--rcx-status-background-danger, var(--rcx-color-danger-200, #FFC1C9)));\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__icon {\n padding-right: 12px;\n}\n[dir=\"rtl\"] .rcx-banner__icon {\n padding-left: 12px;\n}\n.rcx-banner__icon {\n padding-top: 8px;\n padding-bottom: 8px;\n padding-block: 8px;\n -webkit-padding-end: 12px;\n padding-inline-end: 12px;\n}\n.rcx-banner__icon--inline {\n margin-top: -2px;\n margin-bottom: -2px;\n margin-block: -2px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__content {\n flex-grow: 1;\n align-self: center;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.25rem;\n}\n.rcx-banner__content--inline {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rcx-banner__title {\n margin: 0;\n padding: 0;\n letter-spacing: 0rem;\n font-size: 0.875rem;\n font-weight: 700;\n line-height: 1.25rem;\n}\nhtml:not([dir=\"rtl\"]) .rcx-banner__title--inline {\n padding-right: 8px;\n}\n[dir=\"rtl\"] .rcx-banner__title--inline {\n padding-left: 8px;\n}\n.rcx-banner__title--inline {\n display: inline;\n -webkit-padding-end: 8px;\n padding-inline-end: 8px;\n}\n.rcx-banner__close-button {\n padding-top: 6px;\n padding-bottom: 6px;\n padding-block: 6px;\n padding-left: 8px;\n padding-right: 8px;\n padding-inline: 8px;\n}\n.rcx-banner__close-button--inline {\n margin-top: -4px;\n margin-bottom: -4px;\n margin-block: -4px;\n padding-top: 0;\n padding-bottom: 0;\n padding-block: 0;\n}\n.rcx-banner__link {\n padding-left: 10px;\n text-decoration: underline;\n color: inherit;\n}", "",{"version":3,"sources":["webpack://./src/components/Banner/Banner.styles.scss","webpack://./src/styles/typography.scss"],"names":[],"mappings":"AAmDA;EACE,aAAA;EACA,qBAAA;EACA,8BAAA;EACA,uBAAA;EACA,cAAA;EAEA,sBAAA;EAEA,iBAAA;EAAA,oBAAA;EAAA,mBAAA;EACA,kBAAA;EAAA,mBAAA;EAAA,oBAAA;EAEA,gNAAA;EAAA,6OAAA;EACA,mCAAA;EACA,kCAAA;AArDF;AAuDE;EACE,iBAAA;EAAA,oBAAA;EAAA,mBAAA;AArDJ;AAwDE;EACE,eAAA;AAtDJ;AAyDE;EACE,cAtE0B;EAsE1B,6GAtE0B;EAuE1B,yBAnEqC;EAmErC,4IAnEqC;AAYzC;AA0DE;EACE,cAlEuB;EAkEvB,kHAlEuB;EAmEvB,yBA/DkC;EA+DlC,0IA/DkC;AAOtC;AA2DE;EACE,cA9D0B;EA8D1B,wHA9D0B;EA+D1B,yBA3DqC;EA2DrC,gJA3DqC;AAEzC;AA4DE;EACE,cA1D0B;EA0D1B,wHA1D0B;EA2D1B,yBAvDqC;EAuDrC,gJAvDqC;AAHzC;AA6DE;EACE,cAtDyB;EAsDzB,qHAtDyB;EAuDzB,yBAnDoC;EAmDpC,6IAnDoC;AARxC;AA8DE;EAEE;AA5DJ;AA0DE;EAEE;AA5DJ;AA0DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,yBAAA;UAAA,wBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN;AAgEE;EACE,YAAA;EACA,kBAAA;ECzFF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;AD2BF;AA8DI;EC/CF,gBAAA;EAEA,uBAAA;EAKA,mBAAA;ADjBF;AA8DE;EACE,SAAA;EACA,UAAA;ECpGF,oBAAA;EAEA,mBAAA;EACA,gBAAA;EACA,oBAAA;ADwCF;AA2DI;EAGE;AA1DN;AAuDI;EAGE;AA1DN;AAuDI;EACE,eAAA;EAEA,wBAAA;UAAA,uBAAA;AA1DN;AA8DE;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,iBAAA;EAAA,kBAAA;EAAA,mBAAA;AA5DJ;AA8DI;EACE,gBAAA;EAAA,mBAAA;EAAA,kBAAA;EACA,cAAA;EAAA,iBAAA;EAAA,gBAAA;AA5DN;AAgEE;EACE,kBAAA;EAEA,0BAAA;EAEA,cAAA;AAhEJ","sourcesContent":["@use 'sass:map';\n@use '../../styles/functions';\n@use '../../styles/colors.scss';\n@use '../../styles/typography.scss';\n\n// neutral\n$banner-colors-neutral-color: functions.theme(\n 'banner-colors-neutral-color',\n colors.font(default)\n);\n$banner-colors-neutral-background-color: functions.theme(\n 'banner-colors-neutral-background-color',\n colors.surface(neutral)\n);\n// info\n$banner-colors-info-color: functions.theme(\n 'banner-colors-info-color',\n colors.status-font(on-info)\n);\n$banner-colors-info-background-color: functions.theme(\n 'banner-colors-info-background-color',\n colors.status-background(info)\n);\n// success\n$banner-colors-success-color: functions.theme(\n 'banner-colors-success-color',\n colors.status-font(on-success)\n);\n$banner-colors-success-background-color: functions.theme(\n 'banner-colors-success-background-color',\n colors.status-background(success)\n);\n// warning\n$banner-colors-warning-color: functions.theme(\n 'banner-colors-warning-color',\n colors.status-font(on-warning)\n);\n$banner-colors-warning-background-color: functions.theme(\n 'banner-colors-warning-background-color',\n colors.status-background(warning)\n);\n// danger\n$banner-colors-danger-color: functions.theme(\n 'banner-colors-danger-color',\n colors.status-font(on-danger)\n);\n$banner-colors-danger-background-color: functions.theme(\n 'banner-colors-danger-background-color',\n colors.status-background(danger)\n);\n\n.rcx-banner {\n display: flex;\n flex-flow: row nowrap;\n justify-content: space-between;\n align-items: flex-start;\n flex: 0 1 auto;\n\n box-sizing: border-box;\n\n padding-block: 14px;\n padding-inline: 16px;\n\n font-family: typography.font-family('sans');\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n &--inline {\n padding-block: 12px;\n }\n\n &--actionable {\n cursor: pointer;\n }\n\n &--neutral {\n color: $banner-colors-neutral-color;\n background-color: $banner-colors-neutral-background-color;\n }\n\n &--info {\n color: $banner-colors-info-color;\n background-color: $banner-colors-info-background-color;\n }\n\n &--success {\n color: $banner-colors-success-color;\n background-color: $banner-colors-success-background-color;\n }\n\n &--warning {\n color: $banner-colors-warning-color;\n background-color: $banner-colors-warning-background-color;\n }\n\n &--danger {\n color: $banner-colors-danger-color;\n background-color: $banner-colors-danger-background-color;\n }\n\n &__icon {\n padding-block: 8px;\n padding-inline-end: 12px;\n\n &--inline {\n margin-block: -2px;\n padding-block: 0;\n }\n }\n\n &__content {\n flex-grow: 1;\n align-self: center;\n\n @include typography.use-font-scale(p2);\n\n &--inline {\n @include typography.use-with-truncated-text;\n }\n }\n\n &__title {\n margin: 0;\n padding: 0;\n @include typography.use-font-scale(h5);\n\n &--inline {\n display: inline;\n\n padding-inline-end: 8px;\n }\n }\n\n &__close-button {\n padding-block: 6px;\n padding-inline: 8px;\n\n &--inline {\n margin-block: -4px;\n padding-block: 0;\n }\n }\n\n &__link {\n padding-left: 10px;\n\n text-decoration: underline;\n\n color: inherit;\n }\n}\n","@use 'sass:map';\n@use '~@rocket.chat/fuselage-tokens/dist/typography.scss';\n@use './functions.scss';\n\n@function font-family($name) {\n @if not map.has-key(typography.$font-families, $name) {\n @error 'invalid font family name';\n }\n\n @return var(\n --rcx-font-family-#{$name},\n map.get(typography.$font-families, $name)\n );\n}\n\n$font-scales: map.keys(typography.$font-scales);\n\n@mixin use-font-scale($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n $-font-scale: map.get(typography.$font-scales, $name);\n letter-spacing: functions.to-rem(map.get($-font-scale, letter-spacing));\n\n font-size: functions.to-rem(map.get($-font-scale, font-size));\n font-weight: map.get($-font-scale, font-weight);\n line-height: functions.to-rem(map.get($-font-scale, line-height));\n}\n\n@function letter-spacing($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), letter-spacing)\n );\n}\n\n@function font-size($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), font-size)\n );\n}\n\n@function font-weight($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return map.get(map.get(typography.$font-scales, $name), font-weight);\n}\n\n@function line-height($name) {\n @if not map.has-key(typography.$font-scales, $name) {\n @error 'invalid font scale name';\n }\n\n @return functions.to-rem(\n map.get(map.get(typography.$font-scales, $name), line-height)\n );\n}\n\n@mixin use-text-ellipsis {\n overflow: hidden;\n\n text-overflow: ellipsis;\n}\n\n@mixin use-with-truncated-text {\n @include use-text-ellipsis();\n white-space: nowrap;\n}\n"],"sourceRoot":""}]);
|
|
3248
3248
|
// Exports
|
|
3249
3249
|
/* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
|
|
3250
3250
|
|
|
@@ -4726,8 +4726,8 @@ var variants = [
|
|
|
4726
4726
|
'danger',
|
|
4727
4727
|
];
|
|
4728
4728
|
var Banner = function (_a) {
|
|
4729
|
-
var _b;
|
|
4730
|
-
var
|
|
4729
|
+
var _b, _c;
|
|
4730
|
+
var actionable = _a.actionable, children = _a.children, className = _a.className, closeable = _a.closeable, icon = _a.icon, _d = _a.inline, inline = _d === void 0 ? false : _d, link = _a.link, _e = _a.linkText, linkText = _e === void 0 ? 'More info' : _e, onAction = _a.onAction, onClose = _a.onClose, title = _a.title, _f = _a.variant, variant = _f === void 0 ? 'neutral' : _f, props = __rest(_a, ["actionable", "children", "className", "closeable", "icon", "inline", "link", "linkText", "onAction", "onClose", "title", "variant"]);
|
|
4731
4731
|
(0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_3__.useStyleSheet)();
|
|
4732
4732
|
(0,_hooks_useStyleSheet__WEBPACK_IMPORTED_MODULE_3__.useStyleSheet)(_Banner_styles_scss__WEBPACK_IMPORTED_MODULE_5__["default"]);
|
|
4733
4733
|
var ref = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
|
|
@@ -4757,7 +4757,8 @@ var Banner = function (_a) {
|
|
|
4757
4757
|
icon && isIconVisible && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__icon')({ inline: inline }) }, icon)),
|
|
4758
4758
|
react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__content')({ inline: inline }) },
|
|
4759
4759
|
title && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("h6", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__title')({ inline: inline }) }, title)),
|
|
4760
|
-
children
|
|
4760
|
+
children,
|
|
4761
|
+
link && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("a", { href: link, target: '_blank', className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__link')((_c = {}, _c[variant] = true, _c)) }, linkText))),
|
|
4761
4762
|
closeable && (react__WEBPACK_IMPORTED_MODULE_1___default().createElement("div", { className: (0,_helpers_composeClassNames__WEBPACK_IMPORTED_MODULE_2__.composeClassNames)('rcx-banner__close-button')({ inline: inline }) },
|
|
4762
4763
|
react__WEBPACK_IMPORTED_MODULE_1___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_4__.IconButton, __assign({ small: true }, closeButtonProps, { onClick: handleCloseButtonClick, icon: 'cross' }))))));
|
|
4763
4764
|
};
|