Merge branch 'release/10.11.0'

Author: groberts314

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 10.11.0
+_May 23, 2024_
+- Adds a new parent class name for all CSS from the React CM UI library, to assist with controlling styling bundled with Healthy Church widgets.  [PR #495](https://github.com/saddlebackdev/react-cm-ui/pull/495)
+
 ## 10.10.1
 _May 1, 2024_
 - Incorporate change from `10.9.9-hotfix1` into `latest`.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@saddlebackchurch/react-cm-ui",
-  "version": "10.10.1",
+  "version": "10.11.0",
   "description": "React UI for Healthy Church",
   "jsnext:main": "src/",
   "main": "core/",

package.json

@@ -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';

src/global/constants.js

@@ -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';
+
+}

src/style.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
    ========================================================================== */

src/styles/normalize.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);

src/styles/typography.scss

@@ -18,7 +18,7 @@
 
 const versions = {
     'react-cm-ui': {
-        package: '10.10.1',
+        package: '10.11.0',
         components: {
             dataDisplay: {
                 chip: {