Merge pull request #495 from saddlebackdev/features/97569-css-bundle

[release/10.11.0] PBI AB#97569 [Tech Debt] - Healthy Church Widgets Framework - Ensure CSS shipped with widgets CANNOT affect anything on consuming page, outside of widget's container
saddlebackdev · May 23, 2024 · b5aba06 · b5aba06
2 parents 173c684 + c9ab9d7
commit b5aba06
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/src/global/constants.js b/src/global/constants.js
@@ -56,3 +56,5 @@ export const EMAIL_LINK_CLASSES = `${UI_CLASS_NAME} ${BEM_EMAIL_LINK}`;
 export const PERSON_CORE_MILESTONES_CLASSES = `${UI_CLASS_NAME} ${BEM_PERSON_CORE_MILESTONES}`;
 export const PERSON_CONTACT_INFO_CLASSES = `${UI_CLASS_NAME} ${BEM_PERSON_CONTACT_INFO}`;
 export const TELEPHONE_LINK_CLASSES = `${UI_CLASS_NAME} ${BEM_TELEPHONE_LINK}`;
+
+export const UI_LIBRARY_ROOT_CLASS = '.hc-ui';
diff --git a/src/style.scss b/src/style.scss
@@ -1,3 +1,20 @@
+// Source Sans Pro
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,600italic,400italic,700italic);
+
+.hc-ui {
+  @import './styles/colors', './styles/fonts', './styles/fontSizeCalculator';
+
+  color: color(color);
+  font-family: $fontFamily;
+  font-size: em(16px);
+  font-weight: $fontWeightRegular;
+  //letter-spacing: .7px;
+  line-height: 1.375;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+
 // Base
 @import './styles/normalize';
 @import './styles/typography';
@@ -63,3 +80,5 @@
 @import './surfaces/infoBar/infoBar';
 @import './surfaces/modalDeprecated/modalDeprecated';
 @import './surfaces/titleBar/titleBar';
+
+}
diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss
@@ -1,24 +1,28 @@
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-  margin: 0;
-}
+//
+// Need to prevent any impact on html/body elements by react-cm-ui library
+// so that the library works correctly in widgets
+//
+// /**
+//  * 1. Set default font family to sans-serif.
+//  * 2. Prevent iOS text size adjust after orientation change, without disabling
+//  *    user zoom.
+//  */
+
+// html {
+//   font-family: sans-serif; /* 1 */
+//   -ms-text-size-adjust: 100%; /* 2 */
+//   -webkit-text-size-adjust: 100%; /* 2 */
+// }
+
+// /**
+//  * Remove default margin.
+//  */
+
+// body {
+//   margin: 0;
+// }
 
 /* HTML5 display definitions
    ========================================================================== */

diff --git a/src/styles/typography.scss b/src/styles/typography.scss
@@ -1,19 +1,6 @@
 @import './colors', './fonts', './fontSizeCalculator';
 
-// Source Sans Pro
-@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,600italic,400italic,700italic);
 
-html { font-size: 100%; }
-    body {
-        color: color(color);
-        font-family: $fontFamily;
-        font-size: em(16px);
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-weight: $fontWeightRegular;
-        //letter-spacing: .7px;
-        line-height: 1.375;
-    }
         //Links
         a {
             color: color(colorLink);