new commit

shruti862 · Dec 12, 2024 · 4ada24c · 4ada24c
1 parent e3b1804
commit 4ada24c
Show file tree

Hide file tree

Showing 70 changed files with 457 additions and 261 deletions.
diff --git a/docs/assets/definitions.scss b/docs/assets/definitions.scss
@@ -4,6 +4,5 @@ $code-color: #696680;
 $link-color: #368d74;
 $link-hover-color: #26614d;
 $selection-color: #badbd2;
-$basic-transition: color 0.25s ease,
-  fill 0.25s ease;
+$basic-transition: color 0.25s ease, fill 0.25s ease;
 $nav-width: 260px;
diff --git a/docs/common/DocsDoNot.vue b/docs/common/DocsDoNot.vue
@@ -5,7 +5,9 @@
       v-if="$slots.do"
       class="show"
     >
-      <div class="header"><span class="do mark">✔</span> Do</div>
+      <div class="header">
+        <span class="do mark">✔</span> Do
+      </div>
       <div class="content">
         <slot name="do"></slot>
       </div>
@@ -14,7 +16,9 @@
       v-if="$slots.not"
       class="show"
     >
-      <div class="header"><span class="mark not">✘</span> Don't</div>
+      <div class="header">
+        <span class="mark not">✘</span> Don't
+      </div>
       <div class="content">
         <slot name="not"></slot>
       </div>

diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -67,7 +67,7 @@
           // otherwise, check for matching pages by title and keywords
           else {
             const matchingPages = section.pages.filter(page =>
-              matches(this.terms, page.title + page.keywords.join(' ')),
+              matches(this.terms, page.title + page.keywords.join(' '))
             );
             if (matchingPages.length) {
               toc.push(section.clone({ pages: matchingPages }));

diff --git a/docs/common/DocsPageTemplate/index.vue b/docs/common/DocsPageTemplate/index.vue
@@ -60,7 +60,7 @@
         node =>
           node.componentOptions &&
           node.componentOptions.tag === DocsPageSection.name &&
-          node.componentOptions.propsData.anchor,
+          node.componentOptions.propsData.anchor
       )
       .map(node => node.componentOptions.propsData);
   }

diff --git a/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue b/docs/common/DocsPageTemplate/jsdocs/EventsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>

diff --git a/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue b/docs/common/DocsPageTemplate/jsdocs/MethodsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>

diff --git a/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue b/docs/common/DocsPageTemplate/jsdocs/PropsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
         <th>Type</th>
         <th>Default</th>
         <th>Required</th>

diff --git a/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue b/docs/common/DocsPageTemplate/jsdocs/SlotsTable.vue
@@ -4,7 +4,9 @@
     <thead>
       <tr>
         <th>Name</th>
-        <th class="stretch">Description</th>
+        <th class="stretch">
+          Description
+        </th>
       </tr>
     </thead>
     <tbody>

diff --git a/docs/common/DocsShowCode/webpack-loader.js b/docs/common/DocsShowCode/webpack-loader.js
@@ -1,11 +1,14 @@
 var TAG_PATTERN = new RegExp(`<DocsShowCode(.*?)>(.*?)</DocsShowCode>`, 'gms');
 
 function escape(unsafe) {
-  return (unsafe || '').replace(/&/gm, '&amp;').replace(/</gm, '&lt;').replace(/>/gm, '&gt;');
+  return (unsafe || '')
+    .replace(/&/gm, '&amp;')
+    .replace(/</gm, '&lt;')
+    .replace(/>/gm, '&gt;');
 }
 
-module.exports = function (content) {
-  return content.replace(TAG_PATTERN, function (_, attributes, innerText) {
+module.exports = function(content) {
+  return content.replace(TAG_PATTERN, function(_, attributes, innerText) {
     return `<DocsShowCode${attributes}>${escape(innerText)}</DocsShowCode>`;
   });
 };
diff --git a/docs/pages/appbars/index.vue b/docs/pages/appbars/index.vue
@@ -101,12 +101,16 @@
 
     <DocsDoNot>
       <template #do>
-        <img src="./do-1.png" >
-        <p class="do-dont">Use general titles in top bars</p>
+        <img src="./do-1.png">
+        <p class="do-dont">
+          Use general titles in top bars
+        </p>
       </template>
       <template #not>
-        <img src="./dont-1.png" >
-        <p class="do-dont">Use user-generated text in top bars</p>
+        <img src="./dont-1.png">
+        <p class="do-dont">
+          Use user-generated text in top bars
+        </p>
       </template>
     </DocsDoNot>
 
@@ -119,7 +123,7 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-1.png" >
+        <img src="./exception-1.png">
         <p class="do-dont">
           Change top app bar color to white if visual contrast is needed between the background and
           action buttons
@@ -129,15 +133,19 @@
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-2.png" >
-        <p class="do-dont">Place learning aids in top bars</p>
+        <img src="./exception-2.png">
+        <p class="do-dont">
+          Place learning aids in top bars
+        </p>
       </template>
     </DocsDoNot>
 
     <DocsDoNot style="display: inline-block">
       <template #do>
-        <img src="./exception-3.png" >
-        <p class="do-dont">Place custom search fields in top bars</p>
+        <img src="./exception-3.png">
+        <p class="do-dont">
+          Place custom search fields in top bars
+        </p>
       </template>
     </DocsDoNot>
 

diff --git a/docs/pages/buttons.vue b/docs/pages/buttons.vue
@@ -107,7 +107,7 @@
             appearance="raised-button"
           />
         </KButtonGroup>
-        <br >
+        <br>
         <KButtonGroup>
           <KButton
             text="Primary"

diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
@@ -63,13 +63,17 @@
       </p>
 
       <DocsShowCode language="html">
-        <div :style="{ color: $themeTokens.error }">This is an error</div>
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShowCode>
 
       <p>This will display:</p>
 
       <DocsShow>
-        <div :style="{ color: $themeTokens.error }">This is an error</div>
+        <div :style="{ color: $themeTokens.error }">
+          This is an error
+        </div>
       </DocsShow>
 
       <p>Move style definitions from the template to computed props if the style gets complex.</p>
@@ -83,7 +87,7 @@
       </p>
 
       <DocsShowCode language="html">
-        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })" >
+        <input :class="$computedClass({ '::placeholder': { color: $themeTokens.annotation } })">
       </DocsShowCode>
 
       <p>
@@ -108,10 +112,18 @@
       </p>
 
       <DocsShowCode language="html">
-        <div :style="{ backgroundColor: $themePalette.red.v_600 }">base</div>
-        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">$darken1</div>
-        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">$darken2</div>
-        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">$darken3</div>
+        <div :style="{ backgroundColor: $themePalette.red.v_600 }">
+          base
+        </div>
+        <div :style="{ backgroundColor: $darken1($themePalette.red.v_600) }">
+          $darken1
+        </div>
+        <div :style="{ backgroundColor: $darken2($themePalette.red.v_600) }">
+          $darken2
+        </div>
+        <div :style="{ backgroundColor: $darken3($themePalette.red.v_600) }">
+          $darken3
+        </div>
       </DocsShowCode>
       <DocsShow>
         <div
@@ -501,7 +513,7 @@
         for (const color in this.$themePalette) {
           if (color !== 'grey' && typeof this.$themePalette[color] === 'object') {
             palette.push(
-              Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`),
+              Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`)
             );
           }
         }

diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
@@ -50,7 +50,9 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Sorry, something went wrong. <u>Refresh page</u>"</p>
+          <p class="do-dont">
+            “Sorry, something went wrong. <u>Refresh page</u>"
+          </p>
         </template>
         <template #not>
           <p class="do-dont">
@@ -68,10 +70,14 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Please enter a valid email”</p>
+          <p class="do-dont">
+            “Please enter a valid email”
+          </p>
         </template>
         <template #not>
-          <p class="do-dont">“WARNING!! You didn’t fill this out”</p>
+          <p class="do-dont">
+            “WARNING!! You didn’t fill this out”
+          </p>
         </template>
       </DocsDoNot>
       <p>
@@ -80,10 +86,14 @@
       </p>
       <DocsDoNot>
         <template #do>
-          <p class="do-dont">“Storage limit reached”</p>
+          <p class="do-dont">
+            “Storage limit reached”
+          </p>
         </template>
         <template #not>
-          <p class="do-dont">“Whoops! Looks like the tank is too full &#x1f60e;"</p>
+          <p class="do-dont">
+            “Whoops! Looks like the tank is too full &#x1f60e;"
+          </p>
         </template>
       </DocsDoNot>
     </DocsPageSection>
@@ -102,27 +112,27 @@
         Banners are appended to the app bar and notify the user about global system errors and/or
         notifications that affect the whole app experience.
       </p>
-      <img src="./banner.png" >
+      <img src="./banner.png">
       <h3>Error summary</h3>
       <p>
         Error summaries should appear at the top of the page and use an alert component. Use them in
         forms or for page-level errors that are not associated with a specific component or location
         on the page.
       </p>
-      <img src="./alert.png" >
+      <img src="./alert.png">
       <h3>Inline error messages</h3>
       <p>
         Place inline error messages in close proximity to where the error occurred. This can be an
         icon only, or icon and text. When paired with text, use <code>KLabeledIcon</code>
       </p>
-      <img src="./inline-error.png" >
+      <img src="./inline-error.png">
       <h3>Page error</h3>
       <p>
         Sometimes pages do not load because of 404 or 500 errors, unsupported browsers, and
         restricted permissions. Users should see a brief explanation of what went wrong and an
         action that might help address the problem.
       </p>
-      <img src="./page.png" >
+      <img src="./page.png">
     </DocsPageSection>
 
     <DocsPageSection
@@ -141,7 +151,7 @@
         the user with context as to what is possible. It should be clear to the user what they need
         to do for the action to become possible.
       </p>
-      <img src="./disable.png" >
+      <img src="./disable.png">
       <p>
         However, forms that create or update data generally should not have a disabled submit button
         and follow our form validation patterns instead.
@@ -156,14 +166,14 @@
         with <code>palette.orange.v_200</code> and informative language of the consequences under
         the current condition.
       </p>
-      <img src="./warning.png" >
+      <img src="./warning.png">
       <h3>Undo</h3>
       <p>
         Modals are helpful for preventing errors but should not be overused since they can disrupt
         user flow. For operations with relatively significant but not critical consequences, provide
         the option to undo an action.
       </p>
-      <img src="./undo.png" >
+      <img src="./undo.png">
       <h3>Good defaults</h3>
       <p>
         Especially for repetitive, common actions, setting configurations to

diff --git a/docs/pages/glossary/index.vue b/docs/pages/glossary/index.vue
@@ -34,9 +34,13 @@
       <table style="max-width: 1000px">
         <thead>
           <tr>
-            <th style="min-width: 200px">Term</th>
+            <th style="min-width: 200px">
+              Term
+            </th>
             <th>Part of speech</th>
-            <th class="stretch">Description</th>
+            <th class="stretch">
+              Description
+            </th>
           </tr>
         </thead>
         <tbody>