How to deploy a new version of the Utah Header WordPress Plugin

Design System, WordPress 
Utah Header WordPress Plugin GitHub:
The code for the Utah Header plugin can be found in this repository. All version changes need to be committed and pushed here.

https://github.com/utahdts/ds-wp-custom-header
CDN GitHub:
The Design System Header WordPress Plugin is published on cdn.utah.gov. You will need to checkout and commit to the CDN repository to publish any changes.

https://github.com/utahdts/dts-cdn-website

Update Plugin Version

Update Version

  1. Edit the following file: custom-header.php
  2. If the header is changing which version of the Utah Design System it is using, update the title of the plugin to reflect this change.
  3. Update the version following the given pattern. (Major.Minor.Bug)
plugin information block for name and version

Change Utah Design System Version and Plugin Version

  1. In the same file above (custom-header.php) edit the plugin version and Design System version with the same information you did above.
plugin version and design system version code block

Zip Up Plugin

  1. (Mac Only) Open the directory containing the plugin code in a shell terminal. In VSCode hit Control+[~] to pop open a terminal.
  2. Run the zip shell script:
    ./zip_this_up.sh
  3. This will create the zip file ds-wp-custom-headerLATEST.zip for the plugin in the directory above.
If you plan on zipping up the plugin manually remember to remove to following directories and files from the zip file:
.git/ directory
.vscode/ directory
.gitignore file
.DS_Store files (recursively)
zip_this_up.sh file

Publish Plugin to CDN

Copy Plugin Zip file to CDN

  1. Copy the plugin zip file into the following directory on the CDN repository:
    /dts-ds-custom-header-plugin/
  2. Rename the zip file to reflect the version of the plugin:
    e.g. 2.1.0 = ds-wp-custom-header210.zip

Update Plugin Version JSON and Changelog on CDN

  1. Edit the version JSON found here:
    /dts-ds-custom-header-plugin/dts-ds-header-plugin-version.json
  2. Update the version to match this new version being released.
  3. Update the URL to match the URL of the new plugin zip file.
  4. Update the changelog and carefully add a new <li> to the changelog list or reconfigure the <ul> to match what needs to be said about this new version. It is important that you accurately close html tags in this part.
code screenshot of the header plugin version json

Publish Plugin to Google Drive

Domain (DNS) Requests

ServiceNow

Executive branch agencies

Placeholder

Non-executive entities

Towns/Cities/Counties etc.

Policy

The request will need to come from the entity requesting the utah.gov sub-domain. Vendors and contractors cannot make the request

Process

  • They need to go to cybercenter.utah.gov/Requests where they can fill out the form at the bottom of the page
  • Someone from that team will confirm a bunch of stuff and submit the internal request for them.

How to release and tag a new version of the Utah Design System

Design System 
Utah Design System GitHub:
The Utah Design System is published from this GitHub repository.

https://github.com/utahdts/utah-design-system
CDN GitHub:
The Design System Header and CSS is published on cdn.utah.gov. You will need to checkout and commit to the CDN repository to publish any changes.

https://github.com/utahdts/dts-cdn-website

There are several manual steps to release a new version of the Utah Design System. These steps will deploy the main artifacts of the Utah Design System which include:

  • CSS
  • Utah Header
  • React Component Library

Update changelog and pull requests

  1. Edit the file CHANGELOG.md found in the root of the repository.
  2. Search and replace all Utah Design System versions to update to the new version. Following the example above this is what you would search replace, ensuring that you are only modifying versions related to the design system.
    Example:
    • Search: 4.0.0
    • Replace: 4.1.0
  3. Commit and push your changes to your branch and create a pull request into the dev branch. The pull into the dev branch will trigger some automatic tests. These must pass in order to complete the pull request.
  4. A successful pull request into the dev branch will trigger a build and deploy of designsystem.dev.utah.gov.
  5. Check designsystem.dev.utah.gov to make sure the site it up and running well.
  6. You will then need to pull the dev branch into the main branch. This requires approval from one other person in order to complete the pull request.
  7. A successful pull request into the main branch will trigger a build for the website: designsystem.utah.gov. Check that the site is up and running well with the new version.

Build the release artifacts

  1. Clean the project to start with a clean slate (this will also run npm install so you won’t need to do that):
    npm run cleani
  2. Build the project:
    npm run build
  3. This will create a directory found here:
    @utahdts/utah-design-system-header/dist
  4. Within this directory are 3 files you will be copying into the tag release in a future step:
    style.css
    utah-design-system-header.es.js
    utah-design-system-header.umd.js

Tag the release

  1. Go to the GitHub repository:
    https://github.com/utahdts/utah-design-system
  2. On the right sidebar click on “Releases“.
  3. On the top right of the page click the “Draft a new release” button.
  4. On the top left click “Choose a tag“.
  5. Type the version for the new release in the popup. e.g.: v4.1.0.
  6. Then click the “Create new tag: v4.1.0 on publish” link inside the popup
  7. Click the “Target: dev” button and change the target to “main“. (It should now say “Target: main“.)
  8. Type in the version in the “Release title” field. e.g.: v4.1.0.
  9. Copy and paste the markdown from the CHANGELOG.md file for this release into the “Describe this release” text area.
  10. Below the text area, attach the three files above from step 4.
  11. Review everything to make sure it looks right.
  12. Click the “Publish release” button on the bottom to finish creating the release tag.

Publish the new version to NPM

  1. Go to the GitHub repository:
    https://github.com/utahdts/utah-design-system
  2. Click on the “Actions” tab at the top.
  3. On the left sidebar click on “Build and Publish library”.
  4. On the top right of the previous actions list there is a button/popup called “Run workflow“, click on this.
  5. Change the “Use workflow from” “Branch: dev” to “main“. It should now say “Branch: main“.
  6. Click the green “Run workflow” button to kick off the action.
  7. Relax and wait for the action to complete in about 1 min.
  8. If the workflow was successful there will be a green checkmark when it completes.
  9. Next we will publish the Utah Header…
  10. Click on “Build and Publish utah-header” on the left sidebar.
  11. On the top right of the previous actions list there is a button/popup called “Run workflow“, click on this.
  12. Change the “Use workflow from” “Branch: dev” to “main“. It should now say “Branch: main“.
  13. Click the green “Run workflow” button to kick off the action.
  14. Relax and wait for the action to complete in about 1 min.
  15. If the workflow was successful there will be a green checkmark when it completes.
  16. SUCCESS! You have publish the Utah Design System libraries to NPM!

Publish to CDN

  1. The Utah Header and CSS is also published on cdn.utah.gov here:
    https://cdn.utah.gov/dts-ds-custom-header-plugin/header-dist/
  2. Each major version of the design system has its own directory. You will need to create a new directory for each major version, or replace the files if this is a point release:
    https://cdn.utah.gov/dts-ds-custom-header-plugin/header-dist/v4
    • v2
    • v3
    • v4
    • etc…
  3. You will be publishing the following files you previously compiled above:
    style.css
    utah-design-system-header.es.js
    utah-design-system-header.umd.js
  4. Replace the files for the current version or create a new directory for a major release.
  5. When you commit and push your changes to the repository the change will auto deploy to cdn.utah.gov’s S3 bucket and be live within about a minute.

Major Release Workflow

  • When major release are made, you will need to test these changes for the Utah Header WordPress Plugin.
    • The plugin is locked to each major release. This will require a manual change to the plugin code to use the new major version.
  • Once there have been satisfactory tests of a major release you will need to publish a new version of the plugin.

JS: Timed display for a Genysis widget

Javascript, Uncategorized

So far we’ve been given the Genysis widget in 2 different ways. The first was through a function, the second used a <script> tag.

Option 1: Using JS to display the widget

A function was given to us, that is modified to display the widget.

This example is taken from coronavirus.utah.gov

Original Code

function (g, e, n, es, ys) {
g['_genesysJs'] = e;
g[e] = g[e] || function () {
(g[e].q = g[e].q || []).push(arguments)
};
g[e].t = 1 * new Date();
g[e].c = es;
ys = document.createElement('script'); ys.async = 1; ys.src = n; ys.charset = 'utf-8'; document.head.appendChild(ys);
}(window, 'Genesys', 'https://apps.usw2.pure.cloud/genesys-bootstrap/genesys.min.js', {
environment: 'usw2',
deploymentId: 'ca07216b-a303-4f79-8eb8-a8b7a262c44b'
});

Modified code

function chatIsOpen() {
//Monday 1 thru Friday 5
//9am to 5pm
const daysOpen = [1,2,3,4,5];
const hoursOpen = [9,10,11,12,13,14,15,16];
//setting timezone
const utahCurrentDateString = new Date().toLocaleString("en-US", { timeZone: "America/Denver" })
// let dateObj = new Date('11/10/2022, 05:21:03 PM');
let dateObj = new Date(utahCurrentDateString);
console.log('Date:', utahCurrentDateString);
console.log('Day:', dateObj.getDay());
console.log('Hour:', dateObj.getHours());
return (daysOpen.includes(dateObj.getDay()) && hoursOpen.includes(dateObj.getHours()))
}
console.log('chatisOpen ', chatIsOpen());
if (chatIsOpen()) {
(function (g, e, n, es, ys) {
g['_genesysJs'] = e;
g[e] = g[e] || function () {
(g[e].q = g[e].q || []).push(arguments)
};
g[e].t = 1 * new Date();
g[e].c = es;
ys = document.createElement('script'); ys.async = 1; ys.src = n; ys.charset = 'utf-8'; document.head.appendChild(ys);
})(window, 'Genesys', 'https://apps.usw2.pure.cloud/genesys-bootstrap/genesys.min.js', {
environment: 'usw2',
deploymentId: 'ca07216b-a303-4f79-8eb8-a8b7a262c44b'
});
}

Option 2: Genysis script tag and hiding the widget with CSS.

A <script> tag was added to the DTS Functions plugin. The Timer function was then added to a new script tag above the original to use CSS { display: none} to the widget based on time.

This example is taken from abs.utah.gov for their “Chat” button.

Script Tag

Attributes listed below:

src="https://apps.mypurecloud.com/pureconnect-widgets" pureconnect-widgets-data="eyJpZCI6IkRBQlNfQ2hhdCIsImljU2VydmVycyI6WyJpdHd2b2ljZWNpY3NsLnRlbC51dGFoLmdvdiIsIml0d3ZvaWNlY2ljcmljaC50ZWwudXRhaC5nb3YiXSwicmV2ZXJzZVByb3h5VXJsIjoiaHR0cHM6Ly9nZW5lc3lzd2lkZ2V0LnRlbC51dGFoLmdvdi91dGFoL2NsaWVudF8yMDE5cjJwMDYvYXBpIiwidXNlQ2FhUyI6ZmFsc2UsImNhYXNVcmwiOm51bGwsInVzZUh0dHBzIjp0cnVlfQ=="

Added JS

function chatIsOpen() {
//Monday 1 thru Saturday 6
//8am to 10:59pm
const daysOpen = [1,2,3,4,5,6];
// Military time: hours
const hoursOpen = [8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];
const utahCurrentDateString = new Date().toLocaleString("en-US", { timeZone: "America/Denver" })
let dateObj = new Date(utahCurrentDateString);
// let dateObj = new Date('11/10/2022, 05:21:03 PM');
console.log('Date:', utahCurrentDateString);
console.log('Day:', dateObj.getDay());
console.log('Hour:', dateObj.getHours());
return (daysOpen.includes(dateObj.getDay()) && hoursOpen.includes(dateObj.getHours()))
}
console.log('chatisOpen ', chatIsOpen());
if( !chatIsOpen() ) {
/* Create style document */
const styles = ".cx-window-manager{ display: none; }";
const css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
/* Append style to the tag name */
document.getElementsByTagName("head")[0].appendChild(css);
}

How to add icons to Utah Design System Font

Design System

Download icon

  1. Find the icon you want to use. Most icons are pulled from google fonts icons:
    https://fonts.google.com/icons
  2. You will need to download the SVG of the icon.
  3. Here are the settings to use for a google font icon.
    • Fill: False
    • Weight: 400
    • Grade: 0
    • Optical Size: 20px
      (set the size of the icon to 20 before you download the SVG for consistency for line weights.)

It is important to maintain similar line weights for similar apparent sizes of icons in the design system. Therefore if you making your own icon, or using a different source for and icon you should take this into consideration.

Were to manage the font

Font App:
We are using icomoon.io to manage the icon font. You can access the font manager app here:

https://icomoon.io/app/#/select
Font JSON GitHub:
The JSON for the icomoon.io font is saved in GitHub. You will need to check out this repository and commit any changes.

https://github.com/utahdts/utah-design-system-icons-font
Utah Design System GitHub:
The icon font is also used directly on the Utah Design System website and in the CSS of the Utah Design System. You will need to modify this as well when adding new glyphs to the font so that they can be used.

https://github.com/utahdts/utah-design-system
CDN GitHub:
The Design System is published on cdn.utah.gov. You will need to checkout and commit to the CDN repository to publish any changes.

https://github.com/utahdts/dts-cdn-website
Base64 Encoded Font:
You will need to base64 encode the WOFF font file and replace its value in the Utah Design System scss in the GitHub project above.

https://codepen.io/mrjoesharp/pen/MYwjxad

Importing the font into icomoon.io

  1. Checkout / Sync with the GitHub repository:
    https://github.com/utahdts/utah-design-system-icons-font
  2. Visit the font manager app website:
    https://icomoon.io/app/#/select
    • If this is the first time using Icomoon you will start with an “Untitled Project“.
    • The font data is stored in your local storage. If you clear you cookies the project will be deleted. Make sure you export a copy of the font each time you make changes so that you don’t accidentally lose your work.
  3. Import the “Utah Design System.json” file into Icomoon.
    • Select “Manage Projects” from the hamburger menu.
    • If you already have a “Utah Design System” project, you should delete it before importing the JSON below. Make sure all your previous changes are saved before doing this, as this will permanently delete the project.
    • Click “Import Project”.
    • Select the “Utah Design System.json” file.
    • Click the “Load” link next to the project to load up the font.
    • This will take you to the icon selection screen.

Add an icon in icomoon.io

  1. The toolbar
    • Select
      Icons must be selected in order to be available in the font. A yellow border indicates the icon is selected.
    • Delete
      With this tool active you can delete icons. You get no warning when you delete an icon. But there is an undo feature if you mess up.
    • Move
      With this tool you can move an icon around in the list. You will be moving any icons you add to the end of the list.
    • Edit
      With this tool you will be editing the setting for individual icons. You will be using this tool as well.
  2. Drag the SVG of the icon onto the icomoon.io application window inside the utah-design-system font area.
  3. Using the select tool you will select your new icon so that it has a yellow border.
  4. Using the move tool you will drag the new icon to the end of the icon list.
  5. Using the edit tool you will do the following actions inside the popup modal. (Click the edit tool, then click on the new icon, this will open the edit modal):
    • →
      • Click the Scale tool then click the Fit to Canvas.
      • This will size the icon to the maximum size.
    • →
      • Click the Canvas/Alignment tool then click Align to Center.
      • This will center the icon if needed.
    • → (If Needed)
      • Click the Color tool then click the Remove Colors button.
      • This is an important step that will set the color of the icon to the default.
    • Edit the Tags and Names fields:
      • Keep the tags and names fields the same.
      • Use short words and dashes. Do not use spaces. Don’t use more that two words if possible. Use a single word if possible. This will be part of the css class to use the icon:
        • dark-mode
        • class="utds-icon-before-dark-mode"
        • mail
        • class="utds-icon-before-mail"
    • You are done editing! Close the edit modal.
  6. Select Generate Font tab at the bottom of the app page.
  7. Scroll down to the new icon and add a character code for the icon. Follow the pattern that has been established. Consult with Joseph if your not sure what the next character should be.
    • The character code should automatically be set correctly, but double check.
    • The character code is in Hexadecimal format: e.g:
      ...e928, e929, e92a, e92b, e92c, e92d, e92e, e92f, e930, e931...
    • This code will be used when configuring the CSS in a future step.
  8. In the bottom tab there is now a button “Download” and a gear icon.
  9. Click on the gear icon an verify the top fields look like:

    Close the popup.
  10. Click the “Download” button.
    This will download a zip file with the different font files. You will need these font files in a future step.
  11. Inside the zip file you will find these font files, you will be using the WOFF file since it is the most compatible format:
    utah-design-system.svg
    utah-design-system.ttf
    utah-design-system.woff

Add icons to the Utah Design System

It is best to create a new branch for the font changes from the dev branch. If the dev branch is under active development for a new version then you can branch from main in order to deploy the changes faster. All changes will need to be first merged to the dev branch then into the main branch. You will also need to update the version of the Design System and Changelog. A new version of the library will need to be deployed to NPM. Buckle up.

Add base64 icon font to the Utah Design System

  1. Go to https://codepen.io/mrjoesharp/pen/MYwjxad
  2. Click “Choose File” button and choose the WOFF file.
  3. Click “Copy” above the “Base64 font for @font-face”.
  4. In this file paste this code in the appropriate place in this file:
    @utahdts/utah-design-system/css/1-settings/_icons.scss

Update code in Utah Design System

  1. Edit the file @utahdts/utah-design-system/css/1-settings/_icons.scss
    • Duplicate the last 4 lines of the css which looks like:
      .utds-icon-before-logout::before,
      .utds-icon-after-logout::after {
      content: "\e93d";
      }
    • You will need to modify the css class to match the name you previously chose above.
    • You will also need to provide the character code following the same pattern as the other icons. This is the “content” as seen above.
  2. Edit the file utah-design-system-website/src/react/components/websiteContent/resources/IconsDocumentation/Icons/ iconsDocumentationIcons.js
    • Follow the same pattern and add a reference to the new icon at the bottom of this file also.
    • This will allow visitors to view the icon under the resources section of the design system website.
  3. Edit the file CHANGELOG.md found in the root of the repository.
    • Add a new entry and version for the new icon. Typically this type of change would be a feature change such as 4.0.0 → 4.1.0.
  4. Search and replace all Utah Design System versions to update to the new version. Following the example above this is what you would search replace, ensuring that you are only modifying versions related to the design system.
    • Search: 4.0.0
    • Replace: 4.1.0
  5. Commit and push your changes to your branch and create a pull request into the dev branch. The pull into the dev branch will trigger some automatic tests. These must pass in order to complete the pull request.
  6. Check designsystem.dev.utah.gov to make sure the site it up and running well.
  7. You will then need to pull the dev branch into the main branch. This requires approval from one other person in order to complete the pull request.
  8. A successful pull request into the main branch will trigger a build for the website: designsystem.utah.gov

Publish Changes

Use this article to publish your changes: https://dtsdevnote1dev.wpenginepowered.com/design-system/how-to-release-utah-design-system

Updating the WP Engine Report

WP Engine

Link to the report live report on employees.utah.gov/wp-engine-report

Link to the GitHub repository wpengine-report

  1. Open the WPENGINE-REPORT files in your IDE
    • Sync file to pull in changes
    • Go to folder : /wpengine-report/src/assets/csv/{year}
  2. Download the last billing file from the Tebs Billing/Wp Engine CSV file (make sure it’s blue icon)
    • Drag the CSV file to the src/assets/csv/{year} folder
  3. Create a new CSV file and format the name to wpe-stats-{YYYY-#}.csv
    • Copy the last months data into this file
    • Replace the data on the 2nd and 3rd lines with the monthly email report from Eva
  4. Update the statsInventory.js file
    • Add imports for the allsites file (TEBs billing csv), and the wpe-stats file
    • Update the rawData
  5. Make sure it’s working – run npm run dev

Not sure about these steps:

  1. Publish the changes
    1. Current this script does not work with windows machines (Still an issue?)
    2. In the terminal run ./build_and_deploy.sh (Is this still needed?)
  2. Push changes via Git
    1. Stage & commit | Message: {month} stats
    2. Sync

Go to employees.utah.gov/wp-engine-report

Vanity URLs & Redirect/Rewrite Rules

Network (NOC), WordPress, WP Engine

For vanity urls and page level redirects.

Policy. Request authorization/approval. Vanity url’s that are not submitted by a PIO, need to be approved by the Communications team. 

Steps for page level redirects:

DNS request. Submit a DNS request through the service portal.

WP Engine Re-write

Step 1. Add a the new domain

Step 2. Add the new web rule. See examples below.

Vanity URL & Page level redirect examples

america250.utah.gov

From americaspotluck.org

To https://america250.utah.gov/americaspotluck

Link to america250.utah.gov redirect example in WP Engine. Added prior to the rewrite rule change by WP Engine.

cannabis.utah.gov

From cannabisinfo.utah.gov

To medicalcannabis.utah.gov/patients/important-information-about-medical-cannabis/

Link to cannabisinfo.utah.gov rewrite example in WP Engine. Added after the rewrite rule change by WP Engine.

Ninja tables – fix loading external link to trigger when table is loaded

DS WordPress, Javascript, WordPress 
function addA11yLinks() {

  const a11yString = `
  <span class="utah-design-system utds-new-tab-link-a11y__wrapper">
    <span class="utds-new-tab-link-a11y">
      <span class="visually-hidden">, opens in a new tab</span>
    </span>
  </span>
  `;
  const a11ylink = new DOMParser().parseFromString(a11yString, "text/html");

  const externalLinks = document.querySelectorAll('.x-main [target="_blank"]');
  externalLinks.forEach(link => {
    link.appendChild(a11ylink.body.children[0].cloneNode(true));
  });
    
}

document.addEventListener("DOMContentLoaded", function() {
  addA11yLinks();
});

document.addEventListener('ninja_table_ready_init', function (event) {
    addA11yLinks();
});

document.querySelectorAll('.foo-table').forEach(function(element) {
  element.addEventListener('after.ft.paging', function() {
    addA11yLinks();
	});
});

document.querySelectorAll('.foo-table').forEach(function(element) {
  element.addEventListener('after.ft.filtering', function() {
    addA11yLinks();
	});
});