Merge pull request #163 from ably/use-new-code-styling-on-code-component

Use new code styling on code component

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (6.10.0)
+    ably-ui (6.10.0.dev.67b3652)
       view_component (>= 2.33, < 2.50)
 
 GEM

cypress/integration/core/code/__snapshots__/snapshots.js.snap

@@ -2,7 +2,7 @@ exports[`Code Snapshot Test > react > test case common to both #0`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="javascript"
-  ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+  ><code class="language-javascript ui-text-code"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
 <span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -16,7 +16,7 @@ exports[`Code Snapshot Test > react > test case common to both #1`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="swift"
-  ><code class="language-swift ui-text-code1"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+  ><code class="language-swift ui-text-code"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
 <span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -30,7 +30,7 @@ exports[`Code Snapshot Test > react > test case common to both #2`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="java"
-  ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+  ><code class="language-java ui-text-code">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
 Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
 
 <span class="hljs-comment">/* Subscribe to messages on channel */</span>
@@ -50,7 +50,7 @@ exports[`Code Snapshot Test > view component > test case common to both #0`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="javascript"
-  ><code class="language-javascript ui-text-code1"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
+  ><code class="language-javascript ui-text-code"><span class="hljs-keyword">var</span> ably = <span class="hljs-keyword">new</span> Ably.Realtime(<span class="hljs-string">'1WChTA.mc0Biw:kNfiYG4KiPgmHHgH'</span>);
 <span class="hljs-keyword">var</span> channel = ably.channels.get(<span class="hljs-string">'web-pal'</span>);
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -64,7 +64,7 @@ exports[`Code Snapshot Test > view component > test case common to both #1`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="swift"
-  ><code class="language-swift ui-text-code1"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
+  ><code class="language-swift ui-text-code"><span class="hljs-keyword">let</span> ably <span class="hljs-operator">=</span> <span class="hljs-type">ARTRealtime</span>(key: <span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>)
 <span class="hljs-keyword">let</span> channel <span class="hljs-operator">=</span> ably.channels.get(<span class="hljs-string">"web-pal"</span>)
 
 <span class="hljs-comment">// Subscribe to messages on channel</span>
@@ -78,7 +78,7 @@ exports[`Code Snapshot Test > view component > test case common to both #2`] = `
 <div class="hljs overflow-auto p-32 " data-id="code">
   <pre
     lang="java"
-  ><code class="language-java ui-text-code1">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
+  ><code class="language-java ui-text-code">AblyRealtime ably = <span class="hljs-keyword">new</span> AblyRealtime(<span class="hljs-string">"1WChTA.mc0Biw:kNfiYG4KiPgmHHgH"</span>);
 Channel channel = ably.channels.get(<span class="hljs-string">"web-pal"</span>);
 
 <span class="hljs-comment">/* Subscribe to messages on channel */</span>

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '6.10.0'
+  VERSION = '6.10.0.dev.67b3652'
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.10.0",
+  "version": "6.10.0-dev.67b3652",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

preview/Gemfile

@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '6.10.0', require: 'ably_ui'
+gem 'ably-ui', '6.10.0.dev.67b3652', require: 'ably_ui'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (6.10.0)
+    ably-ui (6.10.0.dev.67b3652)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -169,7 +169,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 6.10.0)
+  ably-ui (= 6.10.0.dev.67b3652)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)

preview/package.json

@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "6.10.0",
+    "@ably/ui": "6.10.0-dev.67b3652",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",

preview/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ably/[email protected]":
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.10.0.tgz#7739f51256cf74f36517eeb2775a094da47745ce"
-  integrity sha512-K4eziY4YPeKoDLj7LkBqmhjXJOaldFyChEswvmZxS7hf1UvD8CRuph96bft+fmp5qRNQBiR7e7VpAHJ/Jyj0qQ==
+"@ably/[email protected]-dev.67b3652":
+  version "6.10.0-dev.67b3652"
+  resolved "https://registry.yarnpkg.com/@ably/ui/-/ui-6.10.0-dev.67b3652.tgz#18bc5ec08a35dd5f4a8b01cc689170031c1a520f"
+  integrity sha512-EHdUDWzxE1/Cy+gYzDNRMCMfIlkwKaKmcsZ+KX/5x6acce2clVzdcA8n0vOkEVN6Q0quOqYihIriVSYIYAn6lQ==
   dependencies:
     array-flat-polyfill "^1.0.1"
     deepmerge "^4.2.2"

src/core/Code/component.jsx

@@ -4,7 +4,7 @@ import T from "prop-types";
 import "./component.css";
 import { highlight } from "./component.js";
 
-const Code = ({ language, snippet, textSize = "ui-text-code1", padding = "p-32", additionalCSS = "" }) => {
+const Code = ({ language, snippet, textSize = "ui-text-code", padding = "p-32", additionalCSS = "" }) => {
   const HTMLraw = highlight(language, `${snippet}`.trim());
   const className = `language-${language} ${textSize}`;
   return (

src/core/Code/component.rb

@@ -2,7 +2,7 @@ module AblyUi
   module Core
     class Code < ViewComponent::Base
       include AblyUi::Core::Util
-      def initialize(language:, snippet:, text_size: 'ui-text-code1')
+      def initialize(language:, snippet:, text_size: 'ui-text-code')
         @language = language
         @snippet = snippet.try(:strip)
         @text_size = text_size