small adjustments

Author: shleewhite

website/app/components/doc/code-group/index.gts

@@ -9,6 +9,7 @@ import { on } from '@ember/modifier';
 import { notEq, eq } from 'ember-truth-helpers';
 import { guidFor } from '@ember/object/internals';
 import type Owner from '@ember/owner';
+import { modifier } from 'ember-modifier';
 
 import { HdsIcon } from '@hashicorp/design-system-components/components';
 import type { HdsIconSignature } from '@hashicorp/design-system-components/components/hds/icon/index';
@@ -42,8 +43,10 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   @tracked copyTimer: ReturnType<typeof setTimeout> | undefined;
   @tracked copyIconName: HdsIconSignature['Args']['name'] = 'clipboard-copy';
   @tracked expandIconName: HdsIconSignature['Args']['name'] = 'unfold-open';
+  @tracked hasScrollbar = false;
 
   componentId = guidFor(this);
+  codeSnippetWrapperElement!: HTMLDivElement;
 
   constructor(owner: Owner, args: DocCodeGroupSignature['Args']) {
     super(owner, args);
@@ -52,6 +55,10 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     }
   }
 
+  registerCodeSnippetWrapper = modifier((element: HTMLDivElement) => {
+    this.codeSnippetWrapperElement = element;
+  });
+
   get unescapedHbsSnippet() {
     return unescapeCode(this.args.hbsSnippet ?? '');
   }
@@ -89,7 +96,7 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   }
 
   get toggleButtonLabel() {
-    return this.isExpanded ? 'Collapse code' : 'Expand code';
+    return this.isExpanded ? 'Collapse .gts snippet' : 'Expand .gts snippet';
   }
 
   get language() {
@@ -142,13 +149,15 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
   handleGtsExpandClick = () => {
     this.isExpanded = !this.isExpanded;
     this.expandIconName = this.isExpanded ? 'unfold-close' : 'unfold-open';
+    this.checkHorizontalScrollbar();
   };
 
   handleLanguageChange = (event: Event) => {
     const input = event.target as HTMLInputElement;
     if (input.checked) {
       this.currentView = input.value;
     }
+    this.checkHorizontalScrollbar();
   };
 
   onSuccess = () => {
@@ -172,6 +181,20 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
     }, 2000);
   }
 
+  checkHorizontalScrollbar() {
+    const codeElement = this.codeSnippetWrapperElement.querySelector(
+      'code',
+    ) as HTMLElement;
+
+    console.log(codeElement);
+
+    if (codeElement.scrollHeight != codeElement.clientHeight) {
+      this.hasScrollbar = true;
+    } else {
+      this.hasScrollbar = false;
+    }
+  }
+
   <template>
     <div class="doc-code-group">
       <div class="doc-code-group__action-bar">
@@ -218,17 +241,24 @@ export default class DocCodeGroup extends Component<DocCodeGroupSignature> {
           />
         </div>
       {{/if}}
-      <div class="doc-code-block__code-snippet-wrapper">
+      <div
+        class="doc-code-block__code-snippet-wrapper"
+        {{this.registerCodeSnippetWrapper}}
+      >
         {{#if (eq this.currentView "gts")}}
-          <button
-            type="button"
-            class="doc-code-group__expand-button"
-            {{on "click" this.handleGtsExpandClick}}
-            aria-label={{this.toggleButtonLabel}}
-            aria-expanded={{this.isExpanded}}
-          >
-            <HdsIcon @name={{this.expandIconName}} />
-          </button>
+          <div class="doc-code-group__expand-button-container">
+            <button
+              type="button"
+              class="doc-code-group__expand-button"
+              {{on "click" this.handleGtsExpandClick}}
+              aria-expanded={{this.isExpanded}}
+            >
+              <HdsIcon @name={{this.expandIconName}} />
+              <span>
+                {{this.toggleButtonLabel}}
+              </span>
+            </button>
+          </div>
         {{/if}}
         <CodeBlock
           @code={{this.currentViewSnippet}}

website/app/styles/doc-components/code-group.scss

@@ -36,29 +36,28 @@
     .doc-code-group__language-picker-option {
       @include doc-font-style-code();
 
-      color: var(--doc-color-feedback-information-100);
+      color: var(--doc-color-gray-200);
+      border: 1px solid transparent;
       border-radius: 4px;
       cursor: pointer;
       padding-block: 4px;
       padding-inline: 12px;
 
- &:has(input:checked) {
-  background-color: var(--doc-color-feedback-information-400);
-}
-
-    &:hover {
-      background-color: var(--doc-color-feedback-information-400)
-    }
+      &:has(input:checked) {
+        color: var(--doc-color-feedback-information-100);
+        background-color: var(--doc-color-feedback-information-400);
+        border-color:var(--doc-color-feedback-information-100);
+      }
 
-    &:active {
-      background-color: var(--doc-color-feedback-information-300)
-    }
+      &:hover {
+        background-color: var(--doc-color-feedback-information-400)
+      }
     }
   }
 
   .doc-code-group__secondary-actions {
-      display: flex;
-      flex-direction: row;
+    display: flex;
+    flex-direction: row;
     flex-grow: 1;;
     justify-content: flex-end;
   }
@@ -112,15 +111,27 @@
   position: relative;
 }
 
-.doc-code-group__expand-button {
+.doc-code-group__expand-button-container {
   position: absolute;
-  top: 16px;
-  right: 16px;
+  bottom: 16px;
   z-index: 1;
-  padding: 8px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.doc-code-group__expand-button {
+  @include doc-font-style-code();
+
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
   color: white;
   background-color: #313A5C;
   border: 1px solid #7080BC;
   border-radius: 4px;
   cursor: pointer;
+  padding-inline: 8px;
+  padding-block: 2px;
 }

website/config/fastboot.js

@@ -1,3 +1,4 @@
+// This is needed for ember-shiki to work in fastboot: https://ember-shiki.pages.dev/#fastboot
 module.exports = function () {
   return {
     buildSandboxGlobals(defaultGlobals) {

website/lib/markdown/markdown-process-demos.js

@@ -95,8 +95,6 @@ class MarkdownReplaceDemoBlocks extends Multifilter {
               if (fs.existsSync(jsFilePath)) {
                 jsCode = fs.readFileSync(jsFilePath, 'utf8');
                 dependencies.push(jsFilePath);
-              } else {
-                jsCode = `// Unable to load file: ${jsFileName}, path: ${jsFilePath}`;
               }
               escapedJsCode = escapeCode(jsCode);
             }