Merge pull request #10814 from overleaf/jel-premium-badge

[web] Use new rich text type on CMS and render premium badge

GitOrigin-RevId: 14b1f5452dfb99cbba907425f3a2ffdafb7d8bb0

package-lock.json

@@ -3925,6 +3925,26 @@
         "is-buffer": "^1.1.5"
       }
     },
+    "node_modules/@contentful/rich-text-html-renderer": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-16.0.2.tgz",
+      "integrity": "sha512-0flmxVixlNk5PMiHXAlABUJ2uURsWxOjbC6ZHhqpEVHU03kHMoIKfDdo6CRZc0S0rMWMO3c14Ei91E97T06T8w==",
+      "dependencies": {
+        "@contentful/rich-text-types": "^16.0.2",
+        "escape-html": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@contentful/rich-text-types": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-16.0.2.tgz",
+      "integrity": "sha512-ovbmCKQjlyGek4NuABoqDesC3FBV3e5jPMMdtT2mpOy9ia31MKO0NSFMRGZu7Q+veZzmDMja8S1i/XeFCUT9Pw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@cypress/react": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/@cypress/react/-/react-6.2.0.tgz",
@@ -38563,6 +38583,8 @@
         "@codemirror/search": "^6.2.3",
         "@codemirror/state": "^6.1.4",
         "@codemirror/view": "^6.5.1",
+        "@contentful/rich-text-html-renderer": "^16.0.2",
+        "@contentful/rich-text-types": "^16.0.2",
         "@lezer/common": "^1.0.1",
         "@lezer/highlight": "^1.1.2",
         "@lezer/lr": "^1.2.4",
@@ -43116,6 +43138,20 @@
         "is-buffer": "^1.1.5"
       }
     },
+    "@contentful/rich-text-html-renderer": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-16.0.2.tgz",
+      "integrity": "sha512-0flmxVixlNk5PMiHXAlABUJ2uURsWxOjbC6ZHhqpEVHU03kHMoIKfDdo6CRZc0S0rMWMO3c14Ei91E97T06T8w==",
+      "requires": {
+        "@contentful/rich-text-types": "^16.0.2",
+        "escape-html": "^1.0.3"
+      }
+    },
+    "@contentful/rich-text-types": {
+      "version": "16.0.2",
+      "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-16.0.2.tgz",
+      "integrity": "sha512-ovbmCKQjlyGek4NuABoqDesC3FBV3e5jPMMdtT2mpOy9ia31MKO0NSFMRGZu7Q+veZzmDMja8S1i/XeFCUT9Pw=="
+    },
     "@cypress/react": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/@cypress/react/-/react-6.2.0.tgz",
@@ -48654,6 +48690,8 @@
         "@codemirror/search": "^6.2.3",
         "@codemirror/state": "^6.1.4",
         "@codemirror/view": "^6.5.1",
+        "@contentful/rich-text-html-renderer": "^16.0.2",
+        "@contentful/rich-text-types": "^16.0.2",
         "@cypress/react": "^6.2.0",
         "@juggle/resize-observer": "^3.3.1",
         "@lezer/common": "^1.0.1",

services/web/frontend/stylesheets/components/labels.less

@@ -36,6 +36,10 @@
   }
 }
 
+.label when(@is-new-css = true) {
+  padding: 0.3em 0.6em;
+}
+
 // Colors
 // Contextual variations (linked labels get darker on :hover)
 
@@ -67,3 +71,18 @@
   color: @ol-type-color;
   font-size: 100%;
 }
+
+.label-premium {
+  background-color: @neutral-20;
+  background-image: url('../../../public/img/material-icons/star-gradient.svg');
+  background-repeat: no-repeat;
+  background-position: 2px 2px;
+  border-radius: 4px;
+  color: @neutral-90;
+  display: inline-block;
+  font-size: 12px;
+  font-family: @font-family-sans-serif;
+  margin-left: 10px;
+  padding: 4px 4px 4px 20px;
+  vertical-align: middle;
+}

services/web/frontend/stylesheets/core/variables.less

@@ -9,6 +9,8 @@
 @gray-lighter: #cfcfcf;
 @gray-lightest: #f0f0f0;
 @white: #ffffff;
+@neutral-20: #e7e9ee;
+@neutral-90: #1b222c;
 
 // Styleguide colors
 @ol-blue-gray-0: #f4f5f8;

services/web/package.json

@@ -79,6 +79,8 @@
     "@codemirror/search": "^6.2.3",
     "@codemirror/state": "^6.1.4",
     "@codemirror/view": "^6.5.1",
+    "@contentful/rich-text-html-renderer": "^16.0.2",
+    "@contentful/rich-text-types": "^16.0.2",
     "@lezer/common": "^1.0.1",
     "@lezer/highlight": "^1.1.2",
     "@lezer/lr": "^1.2.4",

services/web/public/img/material-icons/star-gradient.svg

@@ -0,0 +1,15 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_967_5711" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="17" height="17">
+<rect x="0.396484" y="0.64917" width="16" height="16" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_967_5711)">
+<path d="M8.39636 11.1826L5.9297 13.0659C5.80747 13.1659 5.67414 13.213 5.5297 13.2072C5.38525 13.2019 5.25747 13.1603 5.14636 13.0826C5.03525 13.0048 4.94925 12.8992 4.88836 12.7659C4.82703 12.6326 4.82414 12.4881 4.8797 12.3326L5.8297 9.24923L3.41303 7.53257C3.2797 7.44368 3.19636 7.32701 3.16303 7.18257C3.1297 7.03812 3.13525 6.90479 3.1797 6.78257C3.22414 6.66035 3.30192 6.5519 3.41303 6.45724C3.52414 6.36301 3.65747 6.3159 3.81303 6.3159H6.79636L7.76303 3.1159C7.81859 2.96035 7.90481 2.84079 8.0217 2.75724C8.13814 2.67412 8.26303 2.63257 8.39636 2.63257C8.5297 2.63257 8.65459 2.67412 8.77103 2.75724C8.88792 2.84079 8.97414 2.96035 9.0297 3.1159L9.99636 6.3159H12.9797C13.1353 6.3159 13.2686 6.36301 13.3797 6.45724C13.4908 6.5519 13.5686 6.66035 13.613 6.78257C13.6575 6.90479 13.663 7.03812 13.6297 7.18257C13.5964 7.32701 13.513 7.44368 13.3797 7.53257L10.963 9.24923L11.913 12.3326C11.9686 12.4881 11.9659 12.6326 11.905 12.7659C11.8437 12.8992 11.7575 13.0048 11.6464 13.0826C11.5353 13.1603 11.4075 13.2019 11.263 13.2072C11.1186 13.213 10.9853 13.1659 10.863 13.0659L8.39636 11.1826Z" fill="url(#paint0_linear_967_5711)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_967_5711" x1="13.6511" y1="2.63257" x2="1.37486" y2="8.15906" gradientUnits="userSpaceOnUse">
+<stop stop-color="#214475"/>
+<stop offset="0.295154" stop-color="#254C84"/>
+<stop offset="1" stop-color="#6597E0"/>
+</linearGradient>
+</defs>
+</svg>