@dialpad/dialtone 7.14.0 → 7.15.1

package/lib/build/js/dialtone_health_check/deprecated_icons.js

@@ -0,0 +1,104 @@
+const fs = require('fs');
+const iconRegex = /.*@dialpad\/dialtone\/(vue\/.*|.+\.svg)/gim;
+const brandIconsList = [
+  'IconAirtable',
+  'IconAmex',
+  'IconAppStoreBadge',
+  'IconApple',
+  'IconAsana',
+  'IconBrandDialpadMeetings',
+  'IconBrandDialpad',
+  'IconBullhorn',
+  'IconClockify',
+  'IconCopperCrm',
+  'IconDialpadAi',
+  'IconDinersClub',
+  'IconDiscover',
+  'IconEvernote',
+  'IconFacebook',
+  'IconFreshsalesCrm',
+  'IconFront',
+  'IconGmail',
+  'IconGoogleBusinessMessaging',
+  'IconGoogleCalendar',
+  'IconGoogleDocs',
+  'IconGoogleDrive',
+  'IconGoogleGlyph',
+  'IconGreenhouse',
+  'IconHighfive',
+  'IconHubspot',
+  'IconInstagram',
+  'IconIntercom',
+  'IconJcb',
+  'IconJiraServiceDesk',
+  'IconLineMessenger',
+  'IconLinkedin',
+  'IconMaestro',
+  'IconMastercard',
+  'IconMessenger',
+  'IconMicrosoftDynamics365',
+  'IconMicrosoftTeams',
+  'IconMicrosoft',
+  'IconMiro',
+  'IconMondayCom',
+  'IconOffice365',
+  'IconPipedrive',
+  'IconPlayStoreBadge',
+  'IconSalesforceGlyph',
+  'IconSalesforceLogo',
+  'IconServicenow',
+  'IconSlack',
+  'IconSnapchat',
+  'IconTelegram',
+  'IconTiktok',
+  'IconToggl',
+  'IconTwitter',
+  'IconUnionPay',
+  'IconViber',
+  'IconVisa',
+  'IconWeChat',
+  'IconWhatsapp',
+  'IconZendesk',
+  'IconZohoCrm',
+  'IconZohoDesk',
+  'IconZoho',
+  'IconZoom',
+];
+let totalIconsCount = 0;
+
+function isBrandIcon (source) {
+  const iconName = source.split('/').pop().slice(0, -2);
+  return brandIconsList.includes(iconName);
+}
+const main = (files, noLineNumbers) => {
+  try {
+    for (const file of files) {
+      const data = fs.readFileSync(file, 'utf8');
+      const lines = data.split('\n');
+      let iconCount = 0;
+
+      for (const [lineNumber, line] of lines.entries()) {
+        const iconMatch = iconRegex.exec(line);
+        // If import doesn't match or is a brand or spot icon, continue
+        if (!iconMatch ||
+            iconMatch.input.includes('/brand/') ||
+            iconMatch.input.includes('/spot/') ||
+            isBrandIcon(iconMatch.input)) continue;
+
+        if (!noLineNumbers) {
+          console.log(`\tdeprecated icon usage found on line ${lineNumber + 1}: ${iconMatch.input}`);
+        }
+        iconCount++;
+        totalIconsCount++;
+      }
+      if (iconCount > 0) {
+        console.log(`${file}: ${iconCount} Deprecated icons found`);
+      }
+    }
+    console.log(`Found ${totalIconsCount} total deprecated icons usage in this directory.`);
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+module.exports = main;

package/lib/build/js/dialtone_health_check/index.js

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+
+/* Will search the files in the provided directory for any properties that are not set to dialtone values.
+   It does this by simply checking whether the property is set to a less @variable or CSS var such as var(--val).
+   It does not compare to an actual list of dialtone token values so it is not perfect, and sometimes gives false
+   positives. This will however give a pretty good idea of where dialtone values aren't being used that should.
+
+   Searches some key properties by default as shown in the defaultSearch array below. You are however not limited to
+   this, you can make this application search any css property you wish. See the below options or run this application
+   with the -h switch for more details. */
+
+const path = require('path');
+const fs = require('fs');
+const { exit } = require('process');
+const { docopt } = require('docopt');
+const nonDialtoneProperties = require('./non_dialtone_properties');
+const deprecatedIcons = require('./deprecated_icons');
+
+const doc = `
+Usage:
+  ./dialtone_health_check <path> [options] (--icons|--properties) [<properties>]
+
+Examples:
+  ./dialtone_health_check <path> --ext=vue,js --no-line-numbers --icons
+  ./dialtone_health_check <path> --ext=vue,js --properties color,background-color
+  ./dialtone_health_check <path> --ext=vue,js --icons --properties color,background-color
+
+Arguments:
+  <properties>                CSS Properties to search. Default properties if list is not provided:
+                              color,background-color,border-color,font-family
+  <path>                      The directory to recursively search all files in.
+
+Options:
+  -p --properties             Verify the usage of non-dialtone properties.
+  -i --icons                  Verify the status of icons migration.
+  -h --help                   Show this screen.
+  --ext=<ext>                 Filter by file extension. comma separate to filter multiple. ex: js,vue
+  --no-line-numbers           Only output files and their total count, do not output individual instances and 
+                              their line number.
+`;
+const options = docopt(doc);
+const extensionFilters = options['--ext']?.split(',') ?? [''];
+const searchProperties = options['--properties'];
+const properties = options['<properties>']?.split(',');
+const noLineNumbers = options['--no-line-numbers'];
+const searchIcons = options['--icons'];
+const files = [];
+
+function fromDir (startPath, fileExtension) {
+  if (!fs.existsSync(startPath)) {
+    console.error('Directory not found');
+    exit(1);
+  }
+
+  const results = [];
+  const files = fs.readdirSync(startPath);
+  for (let i = 0; i < files.length; i++) {
+    const filename = path.join(startPath, files[i]);
+    const stat = fs.lstatSync(filename);
+    if (stat.isDirectory()) {
+      results.push(...fromDir(filename, fileExtension)); // recurse
+    } else if (filename.endsWith(fileExtension)) {
+      results.push(filename);
+    }
+  }
+  return results;
+}
+
+extensionFilters.forEach(extension => {
+  files.push(...fromDir(options['<path>'], extension));
+});
+if (files.length <= 0) {
+  console.error('No files found in directory');
+  exit(1);
+}
+if (!searchProperties && !searchIcons) {
+  console.error('You must set at least one flag [--icons|--properties]');
+  exit(1);
+}
+
+searchProperties && nonDialtoneProperties(properties, files, noLineNumbers);
+searchIcons && deprecatedIcons(files, noLineNumbers);

package/lib/build/js/dialtone_health_check/non_dialtone_properties.js

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const defaultSearch = [
+  'color',
+  'background-color',
+  'border-color',
+  'font-family',
+];
+let totalPropertiesCount = 0;
+
+const main = (props = defaultSearch, files, noLineNumbers) => {
+  const regex = props.map(property => {
+    return new RegExp(`^\\s*${property}:\\s(?:(?!var\\(--))(?:(?!@)).*`, 'gm');
+  });
+  try {
+    for (const file of files) {
+      const data = fs.readFileSync(file, 'utf8');
+      const lines = data.split('\n');
+      let propertiesMatch;
+      let propertiesCount = 0;
+
+      for (const [lineNumber, line] of lines.entries()) {
+        regex.forEach(re => {
+        // eslint-disable-next-line no-cond-assign
+          while (propertiesMatch = re.exec(line)) {
+            if (!noLineNumbers) {
+              console.log(`\tnon-dialtone property found on line ${lineNumber + 1}: ${propertiesMatch}`);
+            }
+            propertiesCount++;
+            totalPropertiesCount++;
+          }
+        });
+      }
+      if (propertiesCount > 0) {
+        console.log(`${file}: ${propertiesCount}`);
+      }
+    }
+    console.log(`Found ${totalPropertiesCount} total ${props.join(', ')} \
+   CSS properties that are not dialtone in this directory.`);
+  } catch (err) {
+    console.error(err);
+  }
+};
+
+module.exports = main;

package/lib/build/less/components/banner.less

@@ -18,7 +18,7 @@
     --banner-color-background: var(--bgc-secondary);
     --banner-color-text: var(--fc-primary);
     --notice-color-icon: var(--toast-color-text);
-    --banner-color-border: 1px solid hsla(var(--black-900-hsl) ~' / ' 10%);
+    --banner-color-border: hsla(var(--black-900-hsl) / 0.1);
     --banner-font-size: var(--fs-200);
     --banner-line-height: var(--lh-200);
     --banner-dialog-padding-y: var(--space-400);
@@ -37,6 +37,7 @@
     font-size: var(--banner-font-size);
     line-height: var(--banner-line-height);
     background-color: var(--banner-color-background);
+    border-bottom: 1px solid var(--banner-color-border);
     border-radius: 0;
     box-shadow: none;
 
@@ -76,7 +77,6 @@
     min-height: 100%;
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
-    border-bottom: var(--banner-color-border);
 
     .d-notice__content {
         flex-direction: row;

package/lib/build/less/components/chip.less

@@ -103,12 +103,14 @@
     content: '';
   }
 
-  &:hover {
-    --button--bgc: hsla(var(--black-800-hsl) ~' / ' 15%);
+  &:hover:not([disabled]) {
+    --button-color-background: hsla(var(--black-800-hsl) ~' / ' 15%);
   }
 
-  &:active {
-    --button--bgc: hsla(var(--black-800-hsl) ~' / ' 25%);
+  &:active:not([disabled]),
+  &.d-btn--active:not([disabled]),
+  &.d-btn--active:active:not([disabled]) {
+    --button-color-background: hsla(var(--black-800-hsl) ~' / ' 25%);
   }
 
   .d-btn__icon .d-svg {

package/lib/build/less/components/radio-checkbox.less

@@ -13,10 +13,8 @@
 //  • LABELS
 //  • CHECKBOXES
 //    - Modifications
-//    - Validation States
 //  • RADIOS
 //    - Modifications
-//    - Validation States
 //
 //  ============================================================================
 //  $   RADIOS & CHECKBOXES
@@ -29,7 +27,7 @@
     --check-radio-color: var(--purple-400);
     --check-radio-color-border: var(--black-400);
     --check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
-    --check-radio-color-background: var(--white);
+    --check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
     --check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
     --check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
 
@@ -209,76 +207,3 @@
         }
     }
 }
-
-//  $$  CHECKBOX VALIDATION STATES
-//  ----------------------------------------------------------------------------
-.d-checkbox--warning {
-    --check-radio-color: var(--gold-500);
-    --check-radio-color-border: var(--check-radio-color);
-}
-
-.d-checkbox--error {
-    --check-radio-color: var(--red-300);
-    --check-radio-color-border: var(--check-radio-color);
-}
-
-.d-checkbox--success {
-    --check-radio-color: var(--green-400);
-    --check-radio-color-border: var(--check-radio-color);
-}
-
-//  ============================================================================
-//  $   RADIOS
-//  ----------------------------------------------------------------------------
-.d-radio {
-    @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        border-radius: var(--br-circle);
-
-        // Disabled
-        &[disabled],
-        &--disabled {
-            --check-radio-color: var(--fc-disabled);
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--check-radio-color-background-disabled);
-        }
-
-        &:focus-visible,
-        &:checked:focus-visible {
-          box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
-        }
-
-        &:checked {
-            --check-radio-color-background: var(--check-radio-color);
-
-            box-shadow: inset 0 0 0 var(--size-200) var(--white);
-
-            // Disabled
-            &[disabled] {
-                --check-radio-color-background: var(--black-400);
-            }
-        }
-
-        &--disabled:checked {
-            --check-radio-color-border: var(--check-radio-color-border-disabled);
-            --check-radio-color-background: var(--black-400);
-        }
-    }
-}
-
-
-//  $$  RADIO VALIDATION STATES
-//  ----------------------------------------------------------------------------
-.d-radio--warning {
-    --check-radio-color: var(--gold-500);
-    --check-radio-color-border: var(--check-radio-color);
-}
-
-.d-radio--error {
-    --check-radio-color: var(--red-300);
-    --check-radio-color-border: var(--check-radio-color);
-}
-
-.d-radio--success {
-    --check-radio-color: var(--green-400);
-    --check-radio-color-border: var(--check-radio-color);
-}

package/lib/build/less/components/root-layout.less

@@ -0,0 +1,19 @@
+//
+//  DIALTONE
+//  COMPONENTS: Root Layout
+//
+//  These are the styles for root layout for Dialpad's design system Dialtone.
+//  For further documentation of these and other classes,
+//  visit https://dialpad.design/components/root-layout.html
+//
+//  TABLE OF CONTENTS
+//  • BASE STYLE
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.d-root-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}

package/lib/build/less/dialtone.less

@@ -35,6 +35,7 @@
 @import 'components/toggle';
 @import 'components/presence';
 @import 'components/icon';
+@import 'components/root-layout';
 
 //  --  CONFIG
 @import 'utilities/internals';

package/lib/dist/css/dialtone.css

@@ -603,7 +603,7 @@ body {
   --banner-color-background: var(--bgc-secondary);
   --banner-color-text: var(--fc-primary);
   --notice-color-icon: var(--toast-color-text);
-  --banner-color-border: 1px solid hsla(var(--black-900-hsl)  /  10%);
+  --banner-color-border: hsla(var(--black-900-hsl) / 0.1);
   --banner-font-size: var(--fs-200);
   --banner-line-height: var(--lh-200);
   --banner-dialog-padding-y: var(--space-400);
@@ -621,6 +621,7 @@ body {
   font-size: var(--banner-font-size);
   line-height: var(--banner-line-height);
   background-color: var(--banner-color-background);
+  border-bottom: 1px solid var(--banner-color-border);
   border-radius: 0;
   box-shadow: none;
 }
@@ -649,7 +650,6 @@ body {
   min-height: 100%;
   margin: 0 auto;
   padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
-  border-bottom: var(--banner-color-border);
 }
 .d-banner__dialog .d-notice__content {
   flex-direction: row;
@@ -1390,11 +1390,13 @@ body {
   height: 2.8rem;
   content: '';
 }
-.d-chip__close:hover {
-  --button--bgc: hsla(var(--black-800-hsl)  /  15%);
+.d-chip__close:hover:not([disabled]) {
+  --button-color-background: hsla(var(--black-800-hsl)  /  15%);
 }
-.d-chip__close:active {
-  --button--bgc: hsla(var(--black-800-hsl)  /  25%);
+.d-chip__close:active:not([disabled]),
+.d-chip__close.d-btn--active:not([disabled]),
+.d-chip__close.d-btn--active:active:not([disabled]) {
+  --button-color-background: hsla(var(--black-800-hsl)  /  25%);
 }
 .d-chip__close .d-btn__icon .d-svg {
   width: 1.8rem;
@@ -2515,7 +2517,7 @@ body {
   --check-radio-color: var(--purple-400);
   --check-radio-color-border: var(--black-400);
   --check-radio-color-border-disabled: hsla(var(--black-900-hsl) / 0.09);
-  --check-radio-color-background: var(--white);
+  --check-radio-color-background: hsla(var(--black-900-hsl) / 0.03);
   --check-radio-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
   --check-radio-border-width: calc(var(--size-100) + calc(var(--size-100) / 2));
   flex: 0 auto;
@@ -2659,62 +2661,6 @@ body {
     --check-radio-color-background: var(--check-radio-color-background-disabled);
   }
 }
-.d-checkbox--warning {
-  --check-radio-color: var(--gold-500);
-  --check-radio-color-border: var(--check-radio-color);
-}
-.d-checkbox--error {
-  --check-radio-color: var(--red-300);
-  --check-radio-color-border: var(--check-radio-color);
-}
-.d-checkbox--success {
-  --check-radio-color: var(--green-400);
-  --check-radio-color-border: var(--check-radio-color);
-}
-@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-  .d-radio {
-    border-radius: var(--br-circle);
-  }
-  .d-radio[disabled],
-  .d-radio--disabled {
-    --check-radio-color: var(--fc-disabled);
-    --check-radio-color-border: var(--check-radio-color-border-disabled);
-    --check-radio-color-background: var(--check-radio-color-background-disabled);
-  }
-  .d-radio.focus-visible.js-focus-visible,
-  .js-focus-visible .d-radio.focus-visible,
-  .d-radio:checked.focus-visible.js-focus-visible,
-  .js-focus-visible .d-radio:checked.focus-visible {
-    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
-  }
-  .d-radio:focus-visible,
-  .d-radio:checked:focus-visible {
-    box-shadow: var(--bs-focus-ring), inset 0 0 0 var(--size-200) var(--white);
-  }
-  .d-radio:checked {
-    --check-radio-color-background: var(--check-radio-color);
-    box-shadow: inset 0 0 0 var(--size-200) var(--white);
-  }
-  .d-radio:checked[disabled] {
-    --check-radio-color-background: var(--black-400);
-  }
-  .d-radio--disabled:checked {
-    --check-radio-color-border: var(--check-radio-color-border-disabled);
-    --check-radio-color-background: var(--black-400);
-  }
-}
-.d-radio--warning {
-  --check-radio-color: var(--gold-500);
-  --check-radio-color-border: var(--check-radio-color);
-}
-.d-radio--error {
-  --check-radio-color: var(--red-300);
-  --check-radio-color-border: var(--check-radio-color);
-}
-.d-radio--success {
-  --check-radio-color: var(--green-400);
-  --check-radio-color-border: var(--check-radio-color);
-}
 .d-select {
   --select-color-border: var(--black-500);
   --select-notch-position-right: calc(var(--size-300) * 2);
@@ -3531,6 +3477,11 @@ body {
 .d-icon--size-100 {
   --icon-size: var(--icon-size-100);
 }
+.d-root-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
 .d-bgg-from-black-600,
 .h\:d-bgg-from-black-600:hover,
 .f\:d-bgg-from-black-600:focus {