@dialpad/dialtone 7.25.0 → 7.26.0

package/lib/build/js/dialtone_migration_helper/configs/tokens-migration.mjs

@@ -0,0 +1,13 @@
+export default {
+  description:
+    'Updates dialtone 7 variables to dialtone 8 design tokens.\n' +
+    '- Replaces var(--{color}-{stop}) with var(--dt-color-{color}-{stop})\n\t' +
+    'eg. var(--black-200) with var(--dt-color-black-200)',
+  patterns: ['**/*.{css,less,scss,sass,styl,html,vue}'],
+  expressions: [
+    {
+      from: /var\(--(white|black|purple|orange|magenta|gold|green|red|blue|tan)(-[1-9]00)?\)/gi,
+      to: 'var(--dt-color-$1$2)',
+    },
+  ],
+};

package/lib/build/js/dialtone_migration_helper/helpers.mjs

@@ -0,0 +1,214 @@
+import chalk from 'chalk';
+import { globby } from 'globby';
+import inquirer from 'inquirer';
+import path from 'path';
+import fs from 'fs';
+const { readdir, readFile, writeFile } = fs.promises;
+
+// confirm prompt for starting operations, display warning and y/n dialog
+export const confirmStart = () => {
+  return new Promise((resolve, reject) => {
+    inquirer
+      .prompt([
+        {
+          type: 'confirm',
+          name: 'yesno',
+          prefix: `
+${chalk.bgRed(
+  '┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  !!! CAUTION !!!  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓',
+)}
+${chalk.bgRed(
+  '┃',
+)}  Please be sure you are running this in a code repository where changes can be rolled back.  ${chalk.bgRed(
+            '┃',
+          )}
+${chalk.bgRed(
+  '┃',
+)}          Modifications will occur to files listed above. Proceed at your own risk.           ${chalk.bgRed(
+            '┃',
+          )}
+${chalk.bgRed(
+  '┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛',
+)}\n
+`,
+          message: 'Start modification?',
+          default: true,
+        },
+      ])
+      .then((choice) => {
+        resolve(choice.yesno);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+// return array of all globby pattern matches in one level
+export const doPatternSearch = async (config) => {
+  const res = [];
+  for (const p of config.patterns) {
+    res.push(
+      ...(await getGlob(p, config.globbyConfig).catch((err) => error('doPatternSearch: ' + err))),
+    );
+  }
+  return res;
+};
+
+// error and quit
+export const error = (message) => {
+  console.log(`\n${chalk.red('!!')} Error: ${message}\n`);
+  process.exit(1);
+};
+
+export const findMatchedFiles = async (fileList, config) => {
+  return getAllFileContents(fileList, config.globbyConfig.cwd).then((globbed) => {
+    // filter out minified files
+    const filtered = globbed
+      .filter((f) => {
+        return (f.data.match(/[\n\r]/g) || []).length > 3;
+      })
+      .filter((f) => {
+        config.expressions.forEach((e) => {
+          if (e.from.test(f.data)) f.matches++;
+        });
+        return f.matches > 0;
+      });
+
+    const matchedFiles = filtered.reduce((prev, current) => {
+      const fn = path.relative(config.globbyConfig.cwd, current.file);
+      return [...prev, fn];
+    }, []);
+
+    return matchedFiles;
+  });
+};
+
+// read file contents of all matched files, return filename and data, default matches (0)
+export const getAllFileContents = (fileList, cwd) => {
+  const readPromises = fileList.map(async (file) => {
+    file = cwd + path.sep + file;
+    return readFile(file, 'utf8')
+      .then((data) => {
+        return { file, data, matches: 0 };
+      })
+      .catch((err) => error('getAllFileContents: ' + err));
+  });
+  return Promise.all(readPromises);
+};
+
+// return list of files from path
+export const getConfigFileList = (path) => {
+  return new Promise((resolve, reject) => {
+    readdir(path)
+      .then((files) => {
+        resolve(
+          files.map((file) => ({
+            name: file.replace(/-/g, ' ').split('.')[0],
+            value: file,
+          })),
+        );
+      })
+      .catch((err) => reject(err));
+  });
+};
+
+// returns globby promise based on search pattern and configuration
+// https://github.com/sindresorhus/globby
+export const getGlob = (pattern, config) => {
+  return new Promise((resolve, reject) => {
+    globby(pattern, config)
+      .then((matches) => resolve(matches))
+      .catch((err) => reject(err));
+  });
+};
+
+// display list of configuration files retreived by readConfigFile
+export const inquireForFile = (folder, options) => {
+  return new Promise((resolve, reject) => {
+    inquirer
+      .prompt([
+        {
+          type: 'list',
+          name: 'file',
+          choices: options,
+          pageSize: 4,
+          prefix: `\n${chalk.green('?')} Choose a migration configuration to use:\n`,
+        },
+      ])
+      .then((choice) => {
+        const configPath = `${folder}/${choice.file}`;
+        resolve(readConfigFile(configPath));
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
+
+// for each expression (string.replace(from, to)) iterate over each file and make
+// changes where a match was found. Records number of matches per file.
+// @TODO: could probably be sped up but it already seems pretty fast.
+export const modifyFileContents = async (content, expr) => {
+  // filter out files with less than 3 newlines, likely compressed/minified files
+  content
+    .filter((f) => {
+      return (f.data.match(/[\n\r]/g) || []).length > 3;
+    })
+    .map((f) => {
+      expr.forEach((e) => {
+        f.data = f.data.replace(e.from, (match) => {
+          f.matches++;
+          return match.replace(e.from, e.to);
+        });
+      });
+      return f;
+    });
+
+  // promise map for writing file to the FS
+  const writePromises = content.map(async (content) => {
+    if (content.matches > 0) {
+      return writeFile(content.file, content.data, 'utf8')
+        .then(() => {
+          return { file: content.file, matches: content.matches };
+        })
+        .catch((err) => error('writePromises: ' + err));
+    } else {
+      return { file: content.file, matches: 0 };
+    }
+  });
+
+  // write out list of files that changed and how many changes were made
+  return await Promise.all(writePromises).then((results) => {
+    results.forEach((result) => {
+      if (result.matches > 0) {
+        // gives a shorter name
+        const shortname = path.relative(process.cwd(), result.file);
+        console.log(
+          `${chalk.yellow('>>')} ${shortname}${chalk.gray(',')} ${chalk.whiteBright(
+            result.matches,
+          )} changes`,
+        );
+      }
+    });
+  });
+};
+
+// read configuration file and return array with data and config filename
+export const readConfigFile = async (file) => {
+  const config = await import(file);
+  return [config.default, path.basename(file)];
+};
+
+export default {
+  confirmStart,
+  doPatternSearch,
+  error,
+  findMatchedFiles,
+  getAllFileContents,
+  getConfigFileList,
+  getGlob,
+  inquireForFile,
+  modifyFileContents,
+  readConfigFile,
+};

package/lib/build/js/dialtone_migration_helper/index.mjs

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import {
+  confirmStart,
+  doPatternSearch,
+  error,
+  findMatchedFiles,
+  getConfigFileList,
+  getAllFileContents,
+  inquireForFile,
+  modifyFileContents,
+  readConfigFile,
+} from './helpers.mjs';
+import ora from 'ora';
+import { dirname, normalize } from 'path';
+import { fileURLToPath } from 'url';
+import { hideBin } from 'yargs/helpers';
+import yargs from 'yargs';
+
+// eslint-disable-next-line complexity
+(async () => {
+  // get command line args
+  const argv = yargs(hideBin(process.argv))
+    .scriptName('dialtone-migration-helper')
+    .usage(
+      '$0 --file migration-config-file.js --cwd "../root/directory --ignore "**/ignored/**", "**/another_ignored/**"',
+    )
+    .options({
+      config: {
+        type: 'string',
+        description: 'Migration configuration module.',
+      },
+      cwd: {
+        type: 'string',
+        description: 'Root directory for scan. Defaults to CWD.',
+        default: process.cwd(),
+      },
+      ignore: {
+        type: 'array',
+        description: 'Other glob patterns to ignore during search. .gitignore included by default.',
+      },
+      force: {
+        boolean: true,
+        description: 'Skip interactive prompts, use caution!',
+        default: false,
+      },
+    })
+    .help().argv;
+
+  // get list of configuration files
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const CONFIG_FOLDER = __dirname + '/configs';
+  const configList = await getConfigFileList(CONFIG_FOLDER).catch((err) =>
+    error('getConfigFileList: ' + err),
+  );
+
+  // load configuration from arg or list
+  const [configData, configFile] = !argv.config
+    ? await inquireForFile(CONFIG_FOLDER, configList).catch((err) =>
+      error('inquireForFile: ' + err),
+    )
+    : await readConfigFile(argv.config).catch((err) => error('readConfigFile: ' + err));
+
+  // set up some globby defaults
+  configData.globbyConfig = configData.globbyConfig || {};
+  configData.globbyConfig.gitignore = configData.globbyConfig.gitignore || true;
+
+  console.log(
+    `\n${chalk.green('++')} Configuration Loaded! (${configFile}) ${chalk.green('++')}\n`,
+  );
+
+  // take CWD if specified from command line
+  const cwd = !argv.cwd ? process.cwd() : normalize(argv.cwd);
+  configData.globbyConfig.cwd = configData.globbyConfig.cwd || cwd;
+  // push ignore list to configuration array
+  if (argv.ignore) {
+    configData.globbyConfig.ignore.push(...argv.ignore);
+  }
+
+  // run glob search with configData.patterns
+  const globSpinner = ora('Performing pattern search').start();
+  const files = await doPatternSearch(configData).then((f) => {
+    return findMatchedFiles(f, configData);
+  });
+  if (files.length <= 0) {
+    console.log(
+      '\n' +
+        chalk.cyan('??') +
+        ' No matches found! Check your patterns and cwd settings if you think this is an error.',
+    );
+    process.exit(0);
+  }
+
+  globSpinner.stop();
+  console.log(`[ ${chalk.whiteBright(files.length)} ] files queued for modification:\n`);
+  console.log(files);
+  console.log(
+    `\n${chalk.yellow('Configuration Description')}${chalk.gray(':')}\n${configData.description}\n`,
+  );
+
+  // kick off file search and replace
+  const startModification = () => {
+    console.log(`\n${chalk.blue('__')} Starting ...`);
+
+    getAllFileContents(files, configData.globbyConfig.cwd)
+      .then((content) => {
+        modifyFileContents(content, configData.expressions).then(() => {
+          console.log(`${chalk.magenta('==')} Modification complete!\n`);
+        });
+      })
+      .catch((err) => error('getAllFileContents: ' + err));
+  };
+
+  // begin file modification based on configuration rules
+  // start automatically if --force is specified
+  if (!argv.force) {
+    confirmStart()
+      .then((val) => {
+        if (val) {
+          startModification();
+        } else {
+          console.log(`\n${chalk.red('__')} Cancelling ...\n`);
+        }
+      })
+      .catch((err) => error('confirmStart ' + err));
+  } else {
+    startModification();
+  }
+})();

package/lib/build/less/components/avatar.less

@@ -34,8 +34,8 @@
   --avatar-size-shape: var(--size-600);
   --avatar-size-image: 100%;
   --avatar-size-text: var(--fs-200);
-  --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
-  --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
+  --avatar-presence-position-right: var(--space-200-negative);
+  --avatar-presence-position-bottom: var(--space-200-negative);
   --avatar-count-color-shadow: var(--theme-sidebar-color-background);
 
   position: relative;
@@ -115,37 +115,37 @@
   //  ------------------------------------------------------------------------
 
   &--xs {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-200)); // 18
-    --avatar-presence-position-right: calc(var(--space-300) * -1); // -4
-    --avatar-presence-position-bottom: calc(var(--space-300) * -1); // -4
+    --avatar-size-shape: calc(var(--size-500) + var(--size-200));
+    --avatar-presence-position-right: var(--space-300-negative);
+    --avatar-presence-position-bottom: var(--space-300-negative);
   }
 
   &--sm {
-    --avatar-size-shape: calc(var(--size-500) + var(--size-400)); // 24
+    --avatar-size-shape: var(--size-550);
     --avatar-size-text: var(--fs-100);
-    --avatar-presence-position-right: calc(var(--space-200) * -1); // -2
-    --avatar-presence-position-bottom: calc(var(--space-200) * -1); // -2
+    --avatar-presence-position-right: var(--space-200-negative);
+    --avatar-presence-position-bottom: var(--space-200-negative);
   }
 
   &--md {
-    --avatar-size-shape: var(--size-600); // 32
+    --avatar-size-shape: var(--size-600);
     --avatar-size-text: var(--fs-200);
-    --avatar-presence-position-right: calc(var(--space-100) * -1); // -1
-    --avatar-presence-position-bottom: calc(var(--space-100) * -1); // -1
+    --avatar-presence-position-right: var(--space-100-negative);
+    --avatar-presence-position-bottom: var(--space-100-negative);
   }
 
   &--lg {
-    --avatar-size-shape: calc(var(--size-600) + var(--size-500)); // 48
+    --avatar-size-shape: var(--size-650);
     --avatar-size-text: var(--fs-300);
-    --avatar-presence-position-right: var(--space-100); // 1
-    --avatar-presence-position-bottom: var(--space-100); // 1
+    --avatar-presence-position-right: var(--space-100);
+    --avatar-presence-position-bottom: var(--space-100);
   }
 
   &--xl {
-    --avatar-size-shape: var(--size-700); // 64
+    --avatar-size-shape: var(--size-700);
     --avatar-size-text: var(--fs-400);
-    --avatar-presence-position-right: var(--space-300); // 4
-    --avatar-presence-position-bottom: var(--space-300); // 4
+    --avatar-presence-position-right: var(--space-300);
+    --avatar-presence-position-bottom: var(--space-300);
   }
 
   //  --  GROUP
@@ -154,7 +154,7 @@
   &--group {
     --avatar-size-shape: calc(var(--size-300) * 4.5);
 
-    width: calc(var(--size-300) * 6);
-    height: calc(var(--size-300) * 6);
+    width: var(--size-550);
+    height: var(--size-550);
   }
 }

package/lib/build/less/components/badge.less

@@ -28,7 +28,7 @@
   --badge-font-size: var(--fs-100);
   --badge-font-weight: var(--fw-semibold);
   --badge-gap: var(--space-300);
-  --badge-letter-spacing: calc(var(--size-100) / 2);
+  --badge-letter-spacing: var(--size-50);
   --badge-padding-y: var(--space-100);
   --badge-padding-x: var(--space-400);
   --badge-text-case: none;
@@ -41,7 +41,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: calc(var(--size-400) + var(--size-500));
+  min-width: var(--size-550);
   padding: var(--badge-padding-y) var(--badge-padding-x);
   color: var(--badge-color-text);
   font-weight: var(--badge-font-weight);

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

@@ -32,7 +32,7 @@
     display: flex;
     box-sizing: border-box;
     width: 100%;
-    min-height: calc(var(--size-300) * 12); // 48
+    min-height: var(--size-650); // 48
     color: var(--banner-color-text);
     font-size: var(--banner-font-size);
     line-height: var(--banner-line-height);
@@ -43,7 +43,7 @@
 
     // If you want to hide and reveal the banner
     &[aria-hidden='true'] {
-        --topbar-height: calc(var(--size-3) * 16); // -64
+        --topbar-height: var(--size-650);
 
         visibility: hidden;
         opacity: 0;

package/lib/build/less/components/breadcrumbs.less

@@ -52,12 +52,12 @@
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
-            margin-right: calc(var(--space-400) + var(--space-300));
+            margin-right: var(--space-450);
 
             &::before {
                 position: absolute;
-                right: calc(calc(var(--space-400) + var(--space-300)) * -1);
-                margin-top: calc(var(--space-100) * -1);
+                right: var(--space-450-negative);
+                margin-top: var(--space-100-negative);
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
             }

package/lib/build/less/components/button.less

@@ -39,12 +39,12 @@
     --button-padding-y-xs: calc(calc(var(--space-400) - var(--space-100)) - var(--button-border-width)); // ((8 - 1) - border-width)
     --button-padding-x-xs: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
     --button-padding-y-sm: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
-    --button-padding-x-sm: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-x-sm: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-y-md: calc(var(--space-400) - var(--button-border-width)); // 8 minus border-width
-    --button-padding-x-md: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-x-md: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-y-lg: calc((var(--space-400) + var(--space-200)) - var(--button-border-width)); // 10 minus border-width
     --button-padding-x-lg: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
-    --button-padding-y-xl: calc((var(--space-500) - var(--space-300)) - var(--button-border-width)); // 12 minus border-width
+    --button-padding-y-xl: calc(var(--space-450) - var(--button-border-width)); // 12 minus border-width
     --button-padding-x-xl: calc(var(--space-500) - var(--button-border-width)); // 16 minus border-width
     --button-padding-y: var(--button-padding-y-md);
     --button-padding-x: var(--button-padding-x-md);
@@ -157,7 +157,7 @@
     --button-padding-x: var(--button-padding-x-lg);
     --button-font-size: var(--fs-300);
     --button-line-height: var(--button-line-height-lg);
-    --button-border-radius: calc(var(--size-300) * 3);
+    --button-border-radius: var(--size-450);
 
     .d-btn__icon .d-svg {
         width: @icon20;
@@ -220,11 +220,11 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-    margin-left: calc(var(--space-200) * -1);
+    margin-left: var(--space-200-negative);
 }
 
 .d-btn__icon--right:not(:only-child) {
-    margin-right: calc(var(--space-200) * -1);
+    margin-right: var(--space-200-negative);
 }
 
 //  ============================================================================
@@ -501,7 +501,7 @@
       width: 2em;
       height: 2em;
       margin-right: var(--space-400);
-      margin-left: calc(var(--space-300) * -1);
+      margin-left: var(--space-300-negative);
       background-color: var(--white);
       border-radius: var(--br2);
     }

package/lib/build/less/components/card.less

@@ -45,7 +45,7 @@
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-card__content {
-  padding: var(--size-500);
+  padding: var(--space-500);
   overflow-y: auto;
 }
 
@@ -54,5 +54,5 @@
 .d-card__footer {
   display: flex;
   align-items: center;
-  padding: 0 var(--size-500) var(--size-500);
+  padding: 0 var(--space-500) var(--space-500);
 }

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

@@ -76,9 +76,9 @@
   }
 
   .d-avatar {
-    --avatar-size-shape: calc(var(--size-600) - var(--space-400));
+    --avatar-size-shape: var(--space-550);
 
-    margin: calc(var(--space-200) * -1) var(--space-300) calc(var(--space-200) * -1) calc(calc(var(--space-300) + var(--space-200)) * -1);
+    margin: var(--space-200-negative) var(--space-300) var(--space-200-negative) var(--space-350-negative);
   }
 
   .d-svg {
@@ -134,7 +134,7 @@
 //  $$  EXTRA SMALL
 //  ----------------------------------------------------------------------------
 .d-chip__label--xs {
-  padding: var(--space-200) calc(var(--space-200) + var(--space-300));
+  padding: var(--space-200) var(--space-350);
   font-size: var(--fs-100);
 
   .d-svg {
@@ -146,8 +146,8 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--size-400) + var(--size-300));
-    height: calc(var(--size-400) + var(--size-300));
+    width: var(--size-450);
+    height: var(--size-450);
     content: '';
   }
 
@@ -155,7 +155,7 @@
     --avatar-size-shape: var(--size-500);
 
     margin-right: var(--space-300);
-    margin-left: calc(var(--space-300) * -1);
+    margin-left: var(--space-300-negative);
   }
 }
 
@@ -164,8 +164,8 @@
 
   // Clickable area for the close button.
   &::before {
-    width: calc(var(--size-600) - var(--size-400)); // 24
-    height: calc(var(--size-600) - var(--size-400)); // 24
+    width: var(--size-550);
+    height: var(--size-550);
   }
 
   .d-btn__icon .d-svg {
@@ -205,8 +205,8 @@
   padding: var(--space-200);
 
   &::before {
-    width: calc(var(--size-600) - var(--space-400)); // 24
-    height: calc(var(--size-600) - var(--space-400)); // 24
+    width: var(--space-550);
+    height: var(--space-550);
   }
 
   .d-btn__icon .d-svg {

package/lib/build/less/components/forms.less

@@ -81,7 +81,7 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-top: calc(var(--space-300) * -1);
+  margin-top: var(--space-300-negative);
   margin-bottom: var(--space-300);
 }
 

package/lib/build/less/components/input.less

@@ -33,7 +33,7 @@
     --input-color-background: hsla(var(--black-900-hsl) / 0.03);
     --input-color-background-disabled: hsla(var(--black-900-hsl) / 0.12);
     --input-color-text: var(--fc-secondary);
-    --input-border-width: calc(var(--size-100) + calc(var(--size-100) / 2)); // 1.5
+    --input-border-width: calc(var(--size-100) + var(--size-50)); // 1.5
     --input-border-radius: var(--size-400);
     --input-padding-y: calc(var(--space-400) - var(--input-border-width));
     --input-padding-x: calc((var(--space-500) - var(--space-300)) - var(--input-border-width));
@@ -143,11 +143,11 @@
         }
 
         &.d-input-icon--right {
-            padding-right: calc(var(--space-300) + var(--space-200));
+            padding-right: var(--space-350);
         }
 
         &.d-input-icon--left {
-            padding-left: calc(var(--space-300) + var(--space-200));
+            padding-left: var(--space-350);
         }
     }
 }
@@ -193,7 +193,7 @@
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-height: calc(var(--size-300) * 12); // 48
+    min-height: var(--size-650); // 48
 }
 
 .d-textarea--lg {

package/lib/build/less/components/list-group.less

@@ -17,7 +17,7 @@
 .d-list-group--header,
 .d-list-group--link {
     display: block;
-    padding: var(--size-300) calc(var(--size-300) * 6); // 4 24
+    padding: var(--space-300) var(--space-550); // 4 24
 }
 
 .d-list-group--header {