Add markup widget

Thanks, Gaurav. Looks great so far.

(function ($, Drupal) {
  'use strict';

  /**
   * @file
   * Defines sale price based off product price, cost and markup.
   */

Shouldn't the @file doc be at the top of the file?

      var markupElement = '<label for="markup-percentage" class="markup-field-label">Markup percentage</label>';
      markupElement += '<input type="text" size="10" id="markup-percentage" class="form-text ' + markupClass + '">';
      markupElement += '<span class="field-suffix">%</span>';

Why not add this element in the widget? Then we can use the form api instead of manually adding markup that is the responsibility of the theme.

          if (!isNaN(value)) {
            $(priceNumber)
              .val(value)
              .css('background-color', '#f0ff00');

            setTimeout(function(){
              $(priceNumber).css('background-color', '#fcfcfa');
            }, 500);
          }

Toggle a class here instead of setting the colour directly.

          if (!isNaN(value)) {
            $markup
              .val(value)
              .css('background-color', '#f0ff00');

            setTimeout(function(){
              $markup.css('background-color', '#fcfcfa');
            }, 500);
          }
        }

The code is duplicated in the event listener for $price. How about passing $markup or $priceNumber into a function that does the animation?

// \Drupal::logger('abcd')->notice('<pre>' . print_r($element, TRUE) . '</pre>');

This debugging code should be removed.