From 1311e43501e3c6f6afdcae4b4eff35867eb6b8bf Mon Sep 17 00:00:00 2001 From: adsathye Date: Wed, 31 Aug 2022 22:06:39 -0700 Subject: [PATCH 01/23] Initial changes for adding close button on banner and new cookie image. --- README.md | 3 ++- src/index.ts | 21 +++++++++++++++------ src/interfaces/Options.ts | 1 + src/styles.scss | 31 +++++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 764766f..13474c4 100644 --- a/README.md +++ b/README.md @@ -90,7 +90,8 @@ let textResources: ITextResources = { acceptLabel: "Accept", rejectLabel: "Reject", saveLabel: "Save changes", - resetLabel: "Reset all" + resetLabel: "Reset all", + bannerCloseLabel: "Close banner" }; let callBack = function(obj: any) { console.log(obj); }; diff --git a/src/index.ts b/src/index.ts index c1846a4..fbb9746 100644 --- a/src/index.ts +++ b/src/index.ts @@ -72,7 +72,8 @@ export class ConsentControl { acceptLabel: "Accept", rejectLabel: "Reject", saveLabel: "Save changes", - resetLabel: "Reset all" + resetLabel: "Reset all", + bannerCloseLabel: "Close banner" }; constructor(containerElementOrId: string | HTMLElement, @@ -193,14 +194,15 @@ export class ConsentControl { this.hideBanner(); let infoIcon = ` - - - - - + + + `; const bannerInnerHtml = ` +
+ +
${ infoIcon }

@@ -232,6 +234,9 @@ export class ConsentControl { let rejectAllBtn = document.getElementsByClassName(styles.bannerButton)[1]; rejectAllBtn?.addEventListener('click', () => this.onRejectAllClicked(cookieCategoriesPreferences)); + + let bannerCloseBtn = document.getElementsByClassName(styles.closeBannerIcon)[0]; + bannerCloseBtn?.addEventListener('click', () => this.onBannerCloseClicked()); } /** @@ -331,6 +336,10 @@ export class ConsentControl { this.preferencesCtrl = null; } + private onBannerCloseClicked(): void { + this.hideBanner(); + } + /** * Set the container that will be used for the banner * diff --git a/src/interfaces/Options.ts b/src/interfaces/Options.ts index b6f0946..4c6db0c 100644 --- a/src/interfaces/Options.ts +++ b/src/interfaces/Options.ts @@ -65,4 +65,5 @@ export interface ITextResources { rejectLabel?: string; saveLabel?: string; resetLabel?: string; + bannerCloseLabel?: string; } diff --git a/src/styles.scss b/src/styles.scss index 63323d0..e41595c 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -69,6 +69,13 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); top: 8px; bottom: 8px; } + + @include rtlDesign(0, 8px 5% 8px 0); +} + +.bannerClose { + + padding-bottom: 5%; @include rtlDesign(0, 8px 5% 8px 0); } @@ -196,6 +203,26 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); @include rtlDesign(2px, 12px, left); } +.closeBannerIcon +{ + float: right; + z-index: 1; + border: none; + cursor: pointer; + @include bannerFont(normal, 13px); + line-height: 22px; + width: 22px; + display: flex; + align-items: center; + text-align: center; + color: $close-button-color; + background-color: transparent; + position: absolute; + right: 5%; + + @include rtlDesign(2px, 12px, left); +} + .modalBody { position: static; margin : { @@ -596,6 +623,10 @@ input[type="radio"].cookieItemRadioBtn { padding: 3%; } + .closeBannerIcon { + padding: 3%; + } + .modalBody { margin : { top: 3%; From ef83ba33f850aa8a23369ac115df0e8b852460f7 Mon Sep 17 00:00:00 2001 From: adsathye Date: Thu, 1 Sep 2022 15:36:21 -0700 Subject: [PATCH 02/23] Updated the colors for the button border, button text, close button icon. Added test for close banner icon and themes changes. --- README.md | 3 +- src/index-themes.test.ts | 76 +++++++++++++++++++++++----------- src/index.test.ts | 35 ++++++++++------ src/interfaces/Options.ts | 1 + src/styles.scss | 25 +++++++++-- src/themes/_theme.scss | 10 +++-- src/themes/theme-styles.ts | 15 ++++--- src/themes/themesController.ts | 11 +++++ 8 files changed, 125 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 13474c4..4dc7ca3 100644 --- a/README.md +++ b/README.md @@ -324,6 +324,8 @@ interface ITheme { "secondary-button-color": string; "secondary-button-disabled-color": string; "secondary-button-border": string; + "banner-close-button-color": string; +} // All optional properties "background-color-between-page-and-dialog"?: string; @@ -347,7 +349,6 @@ interface ITheme { "radio-button-hover-background-color"?: string; "radio-button-disabled-color"?: string; "radio-button-disabled-border-color"?: string; -} ``` ### Provided methods diff --git a/src/index-themes.test.ts b/src/index-themes.test.ts index d7d4665..d963d60 100644 --- a/src/index-themes.test.ts +++ b/src/index-themes.test.ts @@ -75,7 +75,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#131313", "radio-button-hover-background-color": "rgba(1, 1, 1, 0.6)", "radio-button-disabled-color": "rgba(16, 16, 16, 0.3)", - "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)" + "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)", + "banner-close-button-color": "#000000" }; let darkTheme = { @@ -113,7 +114,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#200011", "radio-button-hover-background-color": "rgba(16, 0, 17, 0.7)", "radio-button-disabled-color": "rgba(130, 250, 221, 0.4)", - "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)" + "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)", + "banner-close-button-color": "#E3E3E3" }; let highContrastTheme = { @@ -151,7 +153,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#D2B48C", "radio-button-hover-background-color": "rgba(150, 95, 125, 1)", "radio-button-disabled-color": "rgba(145, 85, 105, 0.73)", - "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)" + "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)", + "banner-close-button-color": "#E3E3E3" }; let callBack = function() { return; }; @@ -206,7 +209,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#200011", "radio-button-hover-background-color": "rgba(16, 0, 17, 0.7)", "radio-button-disabled-color": "rgba(130, 250, 221, 0.4)", - "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)" + "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)", + "banner-close-button-color": "#000000" }; let highContrastTheme = { @@ -244,7 +248,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#D2B48C", "radio-button-hover-background-color": "rgba(150, 95, 125, 1)", "radio-button-disabled-color": "rgba(145, 85, 105, 0.73)", - "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)" + "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)", + "banner-close-button-color": "#000000" }; let callBack = function() { return; }; @@ -292,7 +297,9 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#0067B8", "radio-button-hover-background-color": "rgba(0, 0, 0, 0.8)", "radio-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)" + "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)", + "banner-close-button-color": "#000000" + }); expect(cc.themes.dark).toEqual(darkTheme); @@ -335,7 +342,9 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#131313", "radio-button-hover-background-color": "rgba(1, 1, 1, 0.6)", "radio-button-disabled-color": "rgba(16, 16, 16, 0.3)", - "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)" + "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)", + "banner-close-button-color": "#E3E3E3" + }; let highContrastTheme = { @@ -373,7 +382,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#D2B48C", "radio-button-hover-background-color": "rgba(150, 95, 125, 1)", "radio-button-disabled-color": "rgba(145, 85, 105, 0.73)", - "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)" + "radio-button-disabled-border-color": "rgba(148, 77, 255, 0.73)", + "banner-close-button-color": "#E3E3E3" }; let callBack = function() { return; }; @@ -423,7 +433,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#4DB2FF", "radio-button-hover-background-color": "rgba(227, 227, 227, 0.8)", "radio-button-disabled-color": "rgba(227, 227, 227, 0.2)", - "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)" + "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)", + "banner-close-button-color": "#E3E3E3" }); expect(cc.themes["high-contrast"]).toEqual(highContrastTheme); @@ -465,7 +476,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#131313", "radio-button-hover-background-color": "rgba(1, 1, 1, 0.6)", "radio-button-disabled-color": "rgba(16, 16, 16, 0.3)", - "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)" + "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)", + "banner-close-button-color": "#E3E3E3" }; let darkTheme = { @@ -503,7 +515,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#200011", "radio-button-hover-background-color": "rgba(16, 0, 17, 0.7)", "radio-button-disabled-color": "rgba(130, 250, 221, 0.4)", - "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)" + "radio-button-disabled-border-color": "rgba(157, 237, 220, 0.4)", + "banner-close-button-color": "#E3E3E3" }; let callBack = function() { return; }; @@ -554,7 +567,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "yellow", "radio-button-hover-background-color": "rgba(255, 255, 255, 0.8)", "radio-button-disabled-color": "rgba(255, 255, 255, 0.2)", - "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)" + "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)", + "banner-close-button-color": "#E3E3E3" }); }); @@ -599,7 +613,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#0067B8", "radio-button-hover-background-color": "rgba(0, 0, 0, 0.8)", "radio-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)" + "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)", + "banner-close-button-color": "#000000" }); expect(cc.themes.dark).toEqual({ @@ -637,7 +652,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#4DB2FF", "radio-button-hover-background-color": "rgba(227, 227, 227, 0.8)", "radio-button-disabled-color": "rgba(227, 227, 227, 0.2)", - "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)" + "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)", + "banner-close-button-color": "#E3E3E3" }); expect(cc.themes["high-contrast"]).toEqual({ @@ -675,7 +691,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "yellow", "radio-button-hover-background-color": "rgba(255, 255, 255, 0.8)", "radio-button-disabled-color": "rgba(255, 255, 255, 0.2)", - "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)" + "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)", + "banner-close-button-color": "#E3E3E3" }); }); @@ -719,7 +736,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-background-color": "rgba(1, 1, 1, 0.6)", "radio-button-disabled-color": "rgba(16, 16, 16, 0.3)", "radio-button-disabled-border-color": "rgba(15, 15, 15, 0.3)", - "third-button-hover-color": "rgba(100, 200, 50, 0.7)" + "third-button-hover-color": "rgba(100, 200, 50, 0.7)", + "banner-close-button-color": "#000000" }; let callBack = function() { return; }; @@ -770,7 +788,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#DB7093", "radio-button-hover-background-color": "rgba(160, 2, 205, 0.91)", "radio-button-disabled-color": "rgba(175, 95, 95, 0.43)", - "radio-button-disabled-border-color": "rgba(118, 97, 155, 0.43)" + "radio-button-disabled-border-color": "rgba(118, 97, 155, 0.43)", + "banner-close-button-color": "#F0FFFF" }; let callBack = function() { return; }; @@ -819,7 +838,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#0067B8", "radio-button-hover-background-color": "rgba(0, 0, 0, 0.8)", "radio-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)" + "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)", + "banner-close-button-color": "#000000" }); expect(cc.themes.dark).toEqual({ @@ -857,7 +877,9 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#4DB2FF", "radio-button-hover-background-color": "rgba(227, 227, 227, 0.8)", "radio-button-disabled-color": "rgba(227, 227, 227, 0.2)", - "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)" + "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)", + "banner-close-button-color": "#E3E3E3" + }); expect(cc.themes["high-contrast"]).toEqual({ @@ -895,7 +917,9 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "yellow", "radio-button-hover-background-color": "rgba(255, 255, 255, 0.8)", "radio-button-disabled-color": "rgba(255, 255, 255, 0.2)", - "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)" + "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)", + "banner-close-button-color": "#E3E3E3" + }); }); @@ -935,7 +959,8 @@ describe("Test themes in constructor", () => { "radio-button-hover-border-color": "#DB7093", "radio-button-hover-background-color": "rgba(160, 2, 205, 0.91)", "radio-button-disabled-color": "rgba(175, 95, 95, 0.43)", - "radio-button-disabled-border-color": "rgba(118, 97, 155, 0.43)" + "radio-button-disabled-border-color": "rgba(118, 97, 155, 0.43)", + "banner-close-button-color": "#F0FFFF" }; let callBack = function() { return; }; @@ -961,7 +986,8 @@ describe("Test themes in constructor", () => { "text-color": "#191970", "secondary-button-color": "#9370DB", "secondary-button-disabled-color": "#FF00FF", - "secondary-button-border": "1px dashed black" + "secondary-button-border": "1px dashed black", + "banner-close-button-color": "#000000" } ThemesController.createTheme(currentTheme, currentTheme); @@ -1008,7 +1034,8 @@ describe("Test themes in constructor", () => { "text-color": provider2, "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none" + "secondary-button-border": "none", + "banner-close-button-color": "#666666" }; let currentTheme2: ITheme = { @@ -1025,7 +1052,8 @@ describe("Test themes in constructor", () => { "text-color": provider3, "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none" + "secondary-button-border": "none", + "banner-close-button-color": "#666666" }; ThemesController.createTheme(currentTheme1, currentTheme1); diff --git a/src/index.test.ts b/src/index.test.ts index e4e2242..53a0890 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -214,18 +214,6 @@ describe("Test show and hide banner", () => {

`; - function testRemovingBanner(): void { - let bannerBody = document.getElementsByClassName(styles.bannerBody); - expect(bannerBody.length).toBe(0); - - expect(document.getElementsByClassName(styles.bannerInform).length).toBe(0); - expect(document.getElementsByClassName(styles.infoIcon).length).toBe(0); - expect(document.getElementsByClassName(styles.bannerInformBody).length).toBe(0); - - expect(document.getElementsByClassName(styles.buttonGroup).length).toBe(0); - expect(document.getElementsByClassName(styles.bannerButton).length).toBe(0); - } - beforeEach(() => { let newDiv = document.createElement("div"); newDiv.setAttribute("id", testId); @@ -362,6 +350,18 @@ describe("Test show and hide banner", () => { }); }); +function testRemovingBanner(): void { + let bannerBody = document.getElementsByClassName(styles.bannerBody); + expect(bannerBody.length).toBe(0); + + expect(document.getElementsByClassName(styles.bannerInform).length).toBe(0); + expect(document.getElementsByClassName(styles.infoIcon).length).toBe(0); + expect(document.getElementsByClassName(styles.bannerInformBody).length).toBe(0); + + expect(document.getElementsByClassName(styles.buttonGroup).length).toBe(0); + expect(document.getElementsByClassName(styles.bannerButton).length).toBe(0); +} + describe("Test show and hide preferences dialog", () => { let testId: string = "app"; let testElementBanner = ` @@ -808,4 +808,15 @@ describe("Test setRadioBtnState()", () => { testRadioBtnState(cc, cc.preferencesCtrl!.cookieCategoriesPreferences); }); + + test("Test if the banner close button is present",()=>{ + expect(document.getElementsByClassName(styles.closeBannerIcon).length).toBe(1); + }); + + test("Test the banner removal after close banner is clicked",()=>{ + let closeBannerIcon: HTMLElement = document.getElementsByClassName(styles.closeBannerIcon)[0]; + closeBannerIcon.click(); + + testRemovingBanner(); + }); }); \ No newline at end of file diff --git a/src/interfaces/Options.ts b/src/interfaces/Options.ts index 4c6db0c..54250ba 100644 --- a/src/interfaces/Options.ts +++ b/src/interfaces/Options.ts @@ -29,6 +29,7 @@ export interface ITheme { "secondary-button-color": string; "secondary-button-disabled-color": string; "secondary-button-border": string; + "banner-close-button-color": string; "background-color-between-page-and-dialog"?: string; "dialog-border-color"?: string; diff --git a/src/styles.scss b/src/styles.scss index e41595c..29e9245 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -21,6 +21,8 @@ $radio-button-hover-background-color: rgba(0, 0, 0, 0.8); $radio-button-disabled-color: rgba(0, 0, 0, 0.2); $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); +$banner-close-button-color: #000000; + @mixin bannerFont($weight, $size, $style: normal) { font : { family: Segoe UI, SegoeUI, Arial, sans-serif; @@ -60,6 +62,11 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); @at-root div[dir="rtl"]#{ & } { text-align: right; } + + padding: { + top: 15px; + bottom: 15px; + }; } .bannerInform { @@ -69,14 +76,15 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); top: 8px; bottom: 8px; } + align-self: center; @include rtlDesign(0, 8px 5% 8px 0); } .bannerClose { - - padding-bottom: 5%; - + padding : { + bottom: 110px; + } @include rtlDesign(0, 8px 5% 8px 0); } @@ -215,7 +223,7 @@ $radio-button-disabled-border-color: rgba(0, 0, 0, 0.2); display: flex; align-items: center; text-align: center; - color: $close-button-color; + color: $banner-close-button-color; background-color: transparent; position: absolute; right: 5%; @@ -603,6 +611,11 @@ input[type="radio"].cookieItemRadioBtn { @include rtlDesign(0 0 12px 0, 0); } + + .bannerClose{ + padding-bottom: 40px; + padding-top: 10px; + } } /* For landscape orientation: */ @@ -627,6 +640,10 @@ input[type="radio"].cookieItemRadioBtn { padding: 3%; } + .bannerClose { + padding-bottom: 40px; + padding-top: 10px; + } .modalBody { margin : { top: 3%; diff --git a/src/themes/_theme.scss b/src/themes/_theme.scss index 4441734..6c06ab7 100644 --- a/src/themes/_theme.scss +++ b/src/themes/_theme.scss @@ -8,25 +8,27 @@ $primary-button-hover-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); $primary-button-color: #0067B8; $secondary-button-color: #EBEBEB; $secondary-button-disabled-color: rgba(0, 0, 0, 0.2); -$secondary-button-border: none; +$secondary-button-border: 2px solid #0067B8 ; $text-color: #000000; $hyperlink-font-color: #0067B8; $secondary-button-hover-color: #DBDBDB; -$secondary-button-hover-border: none; +$secondary-button-hover-border: 2px solid #0067B8; $secondary-button-disabled-border: none; $secondary-button-focus-border-color: #000000; -$secondary-button-text-color: #000000; +$secondary-button-text-color: #0067B8; $secondary-button-disabled-text-color: rgba(0, 0, 0, 0.2); $primary-button-hover-color: #0067B8; $primary-button-disabled-color: rgba(0, 120, 215, 0.2); -$primary-button-border: none; +$primary-button-border: 2px solid #0067B8; $primary-button-focus-border-color: #000000; $primary-button-text-color: #FFFFFF; $primary-button-disabled-text-color: rgba(0, 0, 0, 0.2); +$banner-close-button-color: #000000; + .textColorTheme { color: $text-color; } diff --git a/src/themes/theme-styles.ts b/src/themes/theme-styles.ts index 046ec94..c785706 100644 --- a/src/themes/theme-styles.ts +++ b/src/themes/theme-styles.ts @@ -14,15 +14,15 @@ export const DEFAULT_THEMES = { "text-color": "#000000", "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(255, 255, 255, 0.6)", "dialog-border-color": "#0067B8", "hyperlink-font-color": "#0067B8", "secondary-button-hover-color": "#DBDBDB", - "secondary-button-hover-border": "none", + "secondary-button-hover-border": "2px solid #0067B8", "secondary-button-disabled-border": "none", "secondary-button-focus-border-color": "#000000", - "secondary-button-text-color": "#000000", + "secondary-button-text-color": "#0067B8", "secondary-button-disabled-text-color": "rgba(0, 0, 0, 0.2)", "primary-button-hover-color": "#0067B8", "primary-button-disabled-color": "rgba(0, 120, 215, 0.2)", @@ -35,7 +35,8 @@ export const DEFAULT_THEMES = { "radio-button-hover-border-color": "#0067B8", "radio-button-hover-background-color": "rgba(0, 0, 0, 0.8)", "radio-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)" + "radio-button-disabled-border-color": "rgba(0, 0, 0, 0.2)", + "banner-close-button-color": "#000000" }, darkTheme: { @@ -73,7 +74,8 @@ export const DEFAULT_THEMES = { "radio-button-hover-border-color": "#4DB2FF", "radio-button-hover-background-color": "rgba(227, 227, 227, 0.8)", "radio-button-disabled-color": "rgba(227, 227, 227, 0.2)", - "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)" + "radio-button-disabled-border-color": "rgba(227, 227, 227, 0.2)", + "banner-close-button-color": "#E3E3E3" }, highContrast: { @@ -111,7 +113,8 @@ export const DEFAULT_THEMES = { "radio-button-hover-border-color": "yellow", "radio-button-hover-background-color": "rgba(255, 255, 255, 0.8)", "radio-button-disabled-color": "rgba(255, 255, 255, 0.2)", - "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)" + "radio-button-disabled-border-color": "rgba(255, 255, 255, 0.2)", + "banner-close-button-color": "#E3E3E3" } }; diff --git a/src/themes/themesController.ts b/src/themes/themesController.ts index 0947800..b423c23 100644 --- a/src/themes/themesController.ts +++ b/src/themes/themesController.ts @@ -92,6 +92,11 @@ export class ThemesController { destTheme["secondary-button-focus-border-color"] = secondaryBtnBorderElement[secondaryBtnBorderElement.length - 1]; } + //determined by + if (!srcTheme["banner-close-button-color"]) { + destTheme["banner-close-button-color"] = srcTheme["text-color"]; + } + } /** @@ -131,6 +136,10 @@ export class ThemesController { let newHyperLinkStyle = `.${ styles.hyperLinkTheme } a { color: ${ theme["hyperlink-font-color"] } !important; }`; + + let newBannerCloseStyle = `.${ styles.closeBannerIcon } { + color: ${ theme["banner-close-button-color"] } !important; + }`; newStyles += newHyperLinkStyle; newStyles += this.buildDialogStyle(theme); @@ -138,6 +147,8 @@ export class ThemesController { newStyles += this.buildSecondaryBtnStyle(theme); newStyles += this.buildRadioBtnStyle(theme); + newStyles += newBannerCloseStyle; + document.getElementById('ms-consent-banner-theme-styles')!.textContent = newStyles; } From 1a179d5d390a0dc680167fd25d52db45836c2e12 Mon Sep 17 00:00:00 2001 From: adsathye Date: Tue, 6 Sep 2022 11:47:31 -0700 Subject: [PATCH 03/23] Changes for the floating css changes and theme. --- src/index-constructor.test.ts | 126 ++++++++++++++++++++++++++-------- src/index-themes.test.ts | 32 ++++----- src/index.test.ts | 80 +++++++++++++++------ src/index.ts | 13 +++- src/styles.scss | 10 ++- 5 files changed, 190 insertions(+), 71 deletions(-) diff --git a/src/index-constructor.test.ts b/src/index-constructor.test.ts index 2781678..1a32868 100644 --- a/src/index-constructor.test.ts +++ b/src/index-constructor.test.ts @@ -50,7 +50,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let options: IOptions = {}; @@ -103,7 +104,8 @@ describe("Test constructor", () => { acceptLabel: "Accept", rejectLabel: "Reject", saveLabel: "Save changes", - resetLabel: "Reset all" + resetLabel: "Reset all", + bannerCloseLabel: "Close banner" }); }); @@ -126,7 +128,8 @@ describe("Test constructor", () => { complex: { id: "c", name: "1. Essential" - } + }, + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -171,7 +174,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -187,7 +191,9 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" + }; let callBack = function() { return; }; @@ -255,7 +261,8 @@ describe("Test constructor", () => { acceptLabel: "Accept", rejectLabel: "Reject", saveLabel: "Save changes", - resetLabel: "Reset all" + resetLabel: "Reset all", + bannerCloseLabel: "Close banner" }); }); @@ -270,7 +277,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -314,7 +322,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -328,7 +337,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -348,7 +358,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -363,7 +374,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -383,7 +395,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -398,7 +411,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -418,7 +432,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -433,7 +448,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -453,7 +469,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -468,7 +485,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -488,7 +506,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -503,7 +522,8 @@ describe("Test constructor", () => { preferencesDialogDescHtml: "This is preferences dialog text", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -523,7 +543,8 @@ describe("Test constructor", () => { acceptLabel: "Accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -538,7 +559,8 @@ describe("Test constructor", () => { preferencesDialogDescHtml: "This is preferences dialog text", acceptLabel: "This is accept", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -558,7 +580,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "Reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -573,7 +596,8 @@ describe("Test constructor", () => { preferencesDialogDescHtml: "This is preferences dialog text", acceptLabel: "This is accept", rejectLabel: "This is reject", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -593,7 +617,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "Save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -609,6 +634,7 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -628,7 +654,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "Reset all" + resetLabel: "Reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -641,7 +668,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -685,7 +713,8 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "This is reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }); }); @@ -699,7 +728,8 @@ describe("Test constructor", () => { preferencesDialogDescHtml: "This is preferences dialog text", acceptLabel: "This is accept", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" }; let callBack = function() { return; }; @@ -719,7 +749,45 @@ describe("Test constructor", () => { acceptLabel: "This is accept", rejectLabel: "Reject", saveLabel: "This is save changes", - resetLabel: "This is reset all" + resetLabel: "This is reset all", + bannerCloseLabel: "This is close banner" + }); + }); + + test("No close banner, textResources without bannerCloseLabel", () => { + let textResources = { + bannerMessageHtml: "We use optional cookies to provide... read here.", + acceptAllLabel: "This is accept all", + rejectAllLabel: "This is reject all", + moreInfoLabel: "This is more info", + preferencesDialogCloseLabel: "This is Close", + preferencesDialogTitle: "This is preferences dialog title", + preferencesDialogDescHtml: "This is preferences dialog text", + acceptLabel: "This is accept", + rejectLabel: "This is reject", + saveLabel: "This is save changes", + resetLabel: "This is reset all", + }; + + let callBack = function() { return; }; + let options: IOptions = { }; + options.textResources = textResources; + + let cc = new ConsentControl(testId, "en", callBack, undefined, options); + + expect(cc.textResources).toEqual({ + bannerMessageHtml: "We use optional cookies to provide... read here.", + acceptAllLabel: "This is accept all", + rejectAllLabel: "This is reject all", + moreInfoLabel: "This is more info", + preferencesDialogCloseLabel: "This is Close", + preferencesDialogTitle: "This is preferences dialog title", + preferencesDialogDescHtml: "This is preferences dialog text", + acceptLabel: "This is accept", + rejectLabel: "This is reject", + saveLabel: "This is save changes", + resetLabel: "This is reset all", + bannerCloseLabel: "Close banner" }); }); }); \ No newline at end of file diff --git a/src/index-themes.test.ts b/src/index-themes.test.ts index d963d60..700d39b 100644 --- a/src/index-themes.test.ts +++ b/src/index-themes.test.ts @@ -62,7 +62,7 @@ describe("Test themes in constructor", () => { "secondary-button-hover-border": "1px dashed red", "secondary-button-disabled-border": "1px dashed white", "secondary-button-focus-border-color": "#C71585", - "secondary-button-text-color": "#FF4500", + "secondary-button-text-color": "#0067B8", "secondary-button-disabled-text-color": "#FF5411", "primary-button-hover-color": "#00FFFF", "primary-button-disabled-color": "#6495ED", @@ -101,7 +101,7 @@ describe("Test themes in constructor", () => { "secondary-button-hover-border": "1px dashed #FF00FF", "secondary-button-disabled-border": "none", "secondary-button-focus-border-color": "#B22222", - "secondary-button-text-color": "#4B0082", + "secondary-button-text-color": "#4DB2FF", "secondary-button-disabled-text-color": "#0000CD", "primary-button-hover-color": "#ADFF2F", "primary-button-disabled-color": "#DAA520", @@ -188,7 +188,7 @@ describe("Test themes in constructor", () => { "text-color": "#2F4F4F", "secondary-button-color": "#DCDCDC", "secondary-button-disabled-color": "#FFFAF0", - "secondary-button-border": "1px dashed #696969", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(240, 237, 255, 0.5)", "dialog-border-color": "#0000FF", "hyperlink-font-color": "#8A2BE2", @@ -227,7 +227,7 @@ describe("Test themes in constructor", () => { "text-color": "#800000", "secondary-button-color": "#00FA9A", "secondary-button-disabled-color": "#7B68EE", - "secondary-button-border": "1px dashed #969696", + "secondary-button-border": "2px solid yellow", "background-color-between-page-and-dialog": "rgba(0, 0, 0, 0.6)", "dialog-border-color": "#ADD8E6", "hyperlink-font-color": "#B0E0E6", @@ -276,15 +276,15 @@ describe("Test themes in constructor", () => { "text-color": "#000000", "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(255, 255, 255, 0.6)", "dialog-border-color": "#0067B8", "hyperlink-font-color": "#0067B8", "secondary-button-hover-color": "#DBDBDB", - "secondary-button-hover-border": "none", + "secondary-button-hover-border": "2px solid #0067B8", "secondary-button-disabled-border": "none", "secondary-button-focus-border-color": "#000000", - "secondary-button-text-color": "#000000", + "secondary-button-text-color": "#0067B8", "secondary-button-disabled-text-color": "rgba(0, 0, 0, 0.2)", "primary-button-hover-color": "#0067B8", "primary-button-disabled-color": "rgba(0, 120, 215, 0.2)", @@ -321,7 +321,7 @@ describe("Test themes in constructor", () => { "text-color": "#191970", "secondary-button-color": "#9370DB", "secondary-button-disabled-color": "#FF00FF", - "secondary-button-border": "1px dashed black", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(250, 235, 215, 0.6)", "dialog-border-color": "#A52A2A", "hyperlink-font-color": "#FF00FF", @@ -361,7 +361,7 @@ describe("Test themes in constructor", () => { "text-color": "#800000", "secondary-button-color": "#00FA9A", "secondary-button-disabled-color": "#7B68EE", - "secondary-button-border": "1px dashed #969696", + "secondary-button-border": "2px solid yellow", "background-color-between-page-and-dialog": "rgba(0, 0, 0, 0.6)", "dialog-border-color": "#ADD8E6", "hyperlink-font-color": "#B0E0E6", @@ -592,15 +592,15 @@ describe("Test themes in constructor", () => { "text-color": "#000000", "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(255, 255, 255, 0.6)", "dialog-border-color": "#0067B8", "hyperlink-font-color": "#0067B8", "secondary-button-hover-color": "#DBDBDB", - "secondary-button-hover-border": "none", + "secondary-button-hover-border": "2px solid #0067B8", "secondary-button-disabled-border": "none", "secondary-button-focus-border-color": "#000000", - "secondary-button-text-color": "#000000", + "secondary-button-text-color": "#0067B8", "secondary-button-disabled-text-color": "rgba(0, 0, 0, 0.2)", "primary-button-hover-color": "#0067B8", "primary-button-disabled-color": "rgba(0, 120, 215, 0.2)", @@ -817,15 +817,15 @@ describe("Test themes in constructor", () => { "text-color": "#000000", "secondary-button-color": "#EBEBEB", "secondary-button-disabled-color": "rgba(0, 0, 0, 0.2)", - "secondary-button-border": "none", + "secondary-button-border": "2px solid #0067B8", "background-color-between-page-and-dialog": "rgba(255, 255, 255, 0.6)", "dialog-border-color": "#0067B8", "hyperlink-font-color": "#0067B8", "secondary-button-hover-color": "#DBDBDB", - "secondary-button-hover-border": "none", + "secondary-button-hover-border": "2px solid #0067B8", "secondary-button-disabled-border": "none", "secondary-button-focus-border-color": "#000000", - "secondary-button-text-color": "#000000", + "secondary-button-text-color": "#0067B8", "secondary-button-disabled-text-color": "rgba(0, 0, 0, 0.2)", "primary-button-hover-color": "#0067B8", "primary-button-disabled-color": "rgba(0, 120, 215, 0.2)", @@ -938,7 +938,7 @@ describe("Test themes in constructor", () => { "text-color": "#AFEEEE", "secondary-button-color": "#FF5299", "secondary-button-disabled-color": "#FFC2E0", - "secondary-button-border": "1px dotted #FFC9B6", + "secondary-button-border": "2px solid yellow", "background-color-between-page-and-dialog": "rgba(102, 102, 153, 0.62)", "dialog-border-color": "#D4FF7D", "hyperlink-font-color": "#D175A3", diff --git a/src/index.test.ts b/src/index.test.ts index 53a0890..f8a5127 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -16,6 +16,7 @@ function testShowingBanner(dir: string): void { expect(document.getElementsByClassName(styles.buttonGroup).length).toBe(1); expect(document.getElementsByClassName(styles.bannerButton).length).toBe(3); + expect(document.getElementsByClassName(styles.closeBannerIcon).length).toBe(1); } function testRadioBtnState(cc: ConsentControl, cookieCategoriePreferences: ICookieCategoriesPreferences): number { @@ -121,6 +122,9 @@ describe("Test show and hide banner", () => { let testId: string = "app"; let testElementString = `