Merge branch 'main' into fix-double-scroll

packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js

@@ -15,7 +15,7 @@ const twoCardlayout = ({ length }) => {
   }
 };
 
-const Title = withTheme(styled.div`
+const Title = withTheme(styled.h3`
   ${TypeStyles.H3}
   margin-bottom: ${themeGet('space.xxs')};
   display: -webkit-box;
@@ -29,7 +29,7 @@ const Title = withTheme(styled.div`
   }
   @media screen and (min-width: ${themeGet('breakpoints.lg')}) {
     ${TypeStyles.H2}
-    margin-bottom: ${themeGet('space.xxs')};
+    margin-bottom: ${themeGet('space.s')};
   }
 
   ${system}
@@ -41,6 +41,15 @@ const Summary = withTheme(styled.div`
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
+
+  @media screen and (min-width: ${themeGet('breakpoints.lg')}) {
+    ${TypeStyles.LargeBodyText}
+  }
+
+  @media screen and (min-width: ${themeGet('breakpoints.md')}) {
+    ${TypeStyles.BodyText}
+  }
+
   ${system}
 `);
 

packages/web-shared/ui-kit/Typography/_typeStyles.js

@@ -40,8 +40,8 @@ const H1 = () => css`
 const H2 = () => css`
   ${shared}
 
-  font-size: ${utils.rem('44px')};
-  line-height: ${utils.rem('66px')};
+  font-size: ${utils.rem('48px')};
+  line-height: ${utils.rem('56px')};
   font-weight: 700;
 
   @media screen and (max-width: ${themeGet('breakpoints.lg')}) {
@@ -61,7 +61,7 @@ const H2 = () => css`
 const H3 = () => css`
   ${shared}
 
-  font-size: ${utils.rem('24px')};
+  font-size: ${utils.rem('30px')};
   line-height: ${utils.rem('36px')};
   font-weight: 700;
 
@@ -133,6 +133,14 @@ const SmallBodyText = () => css`
   font-weight: 400;
 `;
 
+const LargeBodyText = () => css`
+  ${shared}
+
+  font-size: ${utils.rem('19px')};
+  line-height: ${utils.rem('28px')};
+  font-weight: 400;
+`;
+
 // :: System Text
 const LargeSystemText = () => css`
   ${shared}
@@ -169,6 +177,7 @@ export default {
   H6,
   LargeSystemText,
   SmallBodyText,
+  LargeBodyText,
   SmallSystemText,
   SystemText,
 };

web-embeds/README.md

@@ -9,17 +9,16 @@ Follow the steps below to deploy your apollos-embeds:
 ## Automated
 
 1. Run `npm bump`
-2. Go to https://www.jsdelivr.com/tools/purge and paste in the following to purge the cache on jsdelivr. Otherwise, it could take up to seven days to see our changes in client sites.
-
-`https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.js, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.css, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds`
 
 ## Manual
 
 1. Update the package version in the `package.json` file.
 2. Run `yarn build` to build the new version of the widget.
 3. Commit and push the new JS and CSS build files to GitHub.
 4. Then, run `npm publish`. Note that you need to be a member of the apollosproject organization to publish.
-5. See instructions above to purge cache.
+5. Go to https://www.jsdelivr.com/tools/purge and paste in the following to purge the cache on jsdelivr. Otherwise, it could take up to seven days to see our changes in client sites.
+
+`https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.js, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds@latest/widget/index.css, https://cdn.jsdelivr.net/npm/@apollosproject/apollos-embeds`
 
 The JS file used to embed these widgets is hosted on GitHub and picked up by [jsdelivr.com](https://www.jsdelivr.com/) automatically, as long as the repository is public.
 

web-embeds/flush-cdn-cache.sh

@@ -0,0 +1,10 @@
+curl -X POST \
+  https://purge.jsdelivr.net/ \
+  -H 'content-type: application/json' \
+  -d '{
+        "path": [
+          "/npm/@apollosproject/apollos-embeds@latest/widget/index.js",
+          "/npm/@apollosproject/apollos-embeds@latest/widget/index.css",
+          "/npm/@apollosproject/apollos-embeds"
+        ]
+      }'

web-embeds/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@apollosproject/apollos-embeds",
   "description": "Apollos React embed widgets",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "license": "MIT",
   "eslintIgnore": [
     "/node_modules",
@@ -60,9 +60,10 @@
     "dev": "craco start",
     "build": "node scripts/build.js",
     "test": "craco test",
-    "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish",
+    "bump": "npm version patch && yarn build && git add . && git commit -m 'version bump' && git push && git push --tags && npm publish && npm run flush-cdn",
     "format": "prettier --write .",
-    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint ."
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
+    "flush-cdn": "./flush-cdn-cache.sh"
   },
   "eslintConfig": {
     "extends": [

web-embeds/public/index.html

@@ -38,7 +38,6 @@
         Droid Sans,
         Helvetica Neue,
         sans-serif;
-      background-color: aqua;
     }
   </style>
 </head>
@@ -64,19 +63,21 @@
       data-modal="true"
       class="apollos-widget"
     ></div> -->
-  <div data-church="cedar_creek" data-type="Search" data-search-feed="FeatureFeed:33b34f30-e57c-4c23-9f28-24d31959a3f4"
-    data-modal="true" class="apollos-widget" style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px">
-  </div>
-  <div style="height: 1000px; border: 1px solid red; width: 50vw;">
-
-  </div>
-  <!-- <div
-      data-church="bayside"
-      data-type="Auth"
+  <!-- 
+    <div
+      data-church="cedar_creek"
+      data-type="Search"
+      data-search-feed="FeatureFeed:33b34f30-e57c-4c23-9f28-24d31959a3f4"
       data-modal="true"
       class="apollos-widget"
       style="max-width: 1180px; padding: 40px; margin: auto; margin-top: 20px"
     ></div> -->
+  <div data-type="FeatureFeed" data-church="liquid_church"
+    data-feature-feed="FeatureFeed:04160599-4edf-4824-98c5-02c1a8854c48" data-modal="true" class="apollos-widget">
+  </div>
+  <div data-type="FeatureFeed" data-church="liquid_church"
+    data-feature-feed="FeatureFeed:e5d913ee-0f28-45a3-8f71-f5ce2ae6cb3b" data-modal="true" class="apollos-widget">
+  </div>
   <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.