Documentation of using icons in buttons and validation

[adam-parsons-ca]

Using examples of to show the markup of building buttons and validation using flex utility class and spacing utility classes.

• May need to remove icon component classes (c-icon, c-icon--right) from framework.
• May need adjust to just icon documentation.
• Adding documentation flex utility class and maybe spacing classes
• Look into naming of spacing class to allow for padding in the future

[adam-parsons-ca]

Here is an example of the Flexbox classes working on validation and button

<div class="h2">Flexbox test on validation and button</div>
        <fieldset class="c-fieldset">
          <legend class="c-label">Did this help?</legend>

          <div class="c-fieldset__item">
            <div class="c-radio c-radio--invalid">
              <input checked id="yes" value="yes" name="feedback" type="radio">
              <label for="yes">Yes</label>
            </div>
          </div>

          <div class="c-fieldset__item">
            <div class="c-radio c-radio--invalid">
              <input id="no" value="no" name="feedback" type="radio">
              <label for="no">No</label>
            </div>
          </div>
          <div class="c-validation c-validation--invalid u-flex u-items-center" for="postcode">
              <svg class="u-spacingRight--xs" width="16" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.139 12.398v-1.72a.279.279 0 0 0-.078-.205.282.282 0 0 0-.203-.095H7.142a.282.282 0 0 0-.203.095.279.279 0 0 0-.078.205v1.72c0 .084.026.152.078.204.062.064.13.095.203.095h1.716c.073 0 .14-.031.203-.095a.279.279 0 0 0 .078-.204zm-.016-3.376L9.28 4.89a.211.211 0 0 0-.078-.174c-.083-.063-.156-.095-.218-.095H7.017c-.062 0-.135.032-.218.095-.052.042-.078.105-.078.19l.14 4.116c0 .063.031.116.094.158a.478.478 0 0 0 .218.047h1.654c.083 0 .15-.016.203-.047a.25.25 0 0 0 .093-.158zM9 .6l6.849 12.697c.208.38.203.758-.016 1.136a1.058 1.058 0 0 1-.421.41 1.082 1.082 0 0 1-.562.158H1.151c-.198 0-.385-.053-.562-.158a1.059 1.059 0 0 1-.421-.41c-.219-.378-.224-.757-.016-1.136L7.002.6c.103-.178.244-.326.42-.441A1.11 1.11 0 0 1 8 0c.208 0 .4.053.577.158.177.115.318.263.422.441z" fill="#DF3034"/></svg>  Please select an option
          </div>
          <br>
          <br>
          <button type="button" class="c-btn c-btn--secondary u-flex u-items-center">
              <svg class="u-spacingRight--xs" width="11" height="17" xmlns="http://www.w3.org/2000/svg">
                <path d="M.186 8.03L8.064.202A.663.663 0 0 1 8.547 0c.186 0 .347.068.483.203l1.766 1.754a.596.596 0 0 1 .204.461.654.654 0 0 1-.204.48L5.147 8.49l5.649 5.611a.654.654 0 0 1 .204.48.634.634 0 0 1-.204.461L9.03 16.797a.663.663 0 0 1-.483.203.663.663 0 0 1-.483-.203L.186 8.971a.687.687 0 0 1 0-.942z"
                  fill="#9F9F9F" />
              </svg>Previous
            </button>
        </fieldset>

             </div>