Fix: Line wrapping with long string

Author: dchyun

packages/components/src/styles/components/code-block/index.scss

@@ -55,6 +55,7 @@ $hds-code-block-code-footer-height: 48px;
 .hds-code-block--has-line-wrapping {
   .hds-code-block__code,
   .hds-code-block__code code {
+    display: block;
     white-space: pre-wrap;
     overflow-wrap: break-word;
   }

showcase/app/templates/components/code-block.hbs

@@ -260,7 +260,10 @@ function assertObjectsEqual (actual, expected, testName) {
       {{! template-lint-enable no-whitespace-for-layout }}
     </SG.Item>
 
-    <SG.Item @label="maxHeight='130px', title, description, and copy button" @forceMinWidth={{true}}>
+    <SG.Item
+      @label="maxHeight='130px', title, description, and copy button, highlight lines 4 & 10"
+      @forceMinWidth={{true}}
+    >
       {{! template-lint-disable no-whitespace-for-layout }}
       <Hds::CodeBlock
         @language="javascript"
@@ -294,6 +297,38 @@ function assertObjectsEqual (actual, expected, testName) {
       {{! template-lint-enable no-whitespace-for-layout }}
     </SG.Item>
 
+    <SG.Item @label="maxHeight='130px', hasLineWrapping=true, highlight line 2" @forceMinWidth={{true}}>
+      {{! template-lint-disable no-whitespace-for-layout }}
+      <Hds::CodeBlock
+        @language="javascript"
+        @maxHeight="130px"
+        @hashasLineNumbers={{true}}
+        @hasLineWrapping={{true}}
+        @highlightLines="2"
+        @value="function convertObjectToArray (obj) {
+  let codeLang='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam';
+  let arr = Object
+    .keys(obj) // return object's keys as an array
+    .map(key => {return [key, obj[key] ]}) // map a function on each array item
+    .flat()
+    .sort()
+  ;
+  return arr;
+}
+function assertObjectsEqual (actual, expected, testName) {
+  let actualStr = JSON.stringify( convertObjectToArray(actual) );
+  let expectedStr = JSON.stringify( convertObjectToArray(expected) );
+  console.log(`ACTUAL: ${actualStr}  EXPECTED: ${expectedStr}`);
+  if (actualStr === expectedStr) {
+    console.log('passed');
+  } else {
+    console.log(`FAILED [${testName}] Expected ${JSON.stringify(expected)}, but got ${JSON.stringify(actual)}`);
+  }
+}"
+      />
+      {{! template-lint-enable no-whitespace-for-layout }}
+    </SG.Item>
+
     <SG.Item @label="maxHeight='130px, hasLineNumbers=false" @forceMinWidth={{true}}>
       {{! template-lint-disable no-whitespace-for-layout }}
       <Hds::CodeBlock