diff --git a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js b/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js index f3e77bee..cd480d19 100644 --- a/packages/web-shared/components/FeatureFeed/Features/HeroListFeature.styles.js +++ b/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} `); diff --git a/packages/web-shared/ui-kit/Typography/_typeStyles.js b/packages/web-shared/ui-kit/Typography/_typeStyles.js index ad317362..a78145fa 100644 --- a/packages/web-shared/ui-kit/Typography/_typeStyles.js +++ b/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, }; diff --git a/web-embeds/README.md b/web-embeds/README.md index db482887..534280cc 100644 --- a/web-embeds/README.md +++ b/web-embeds/README.md @@ -9,9 +9,6 @@ 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 @@ -19,7 +16,9 @@ Follow the steps below to deploy your apollos-embeds: 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. diff --git a/web-embeds/flush-cdn-cache.sh b/web-embeds/flush-cdn-cache.sh new file mode 100755 index 00000000..346a2363 --- /dev/null +++ b/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" + ] + }' diff --git a/web-embeds/package.json b/web-embeds/package.json index 01e0b2ea..d5c7b6c7 100644 --- a/web-embeds/package.json +++ b/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": [ diff --git a/web-embeds/public/index.html b/web-embeds/public/index.html index 8488c3a8..ed60320e 100644 --- a/web-embeds/public/index.html +++ b/web-embeds/public/index.html @@ -38,7 +38,6 @@ Droid Sans, Helvetica Neue, sans-serif; - background-color: aqua; } @@ -64,19 +63,21 @@ data-modal="true" class="apollos-widget" > --> -
-
-
- -
- +
+
+
+