Add label macro

static/icons/envelope.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>

styles/elements/_labels.scss

@@ -18,6 +18,7 @@
   padding: 0 $gap;
   border-radius: $gap / 3;
   white-space: nowrap;
+  text-transform: uppercase;
 
   &--info {
     background-color: $color-primary;

templates/applications/fragments/environments.html

@@ -1,4 +1,5 @@
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% from 'components/save_button.html' import SaveButton %}
 {% from "components/text_input.html" import TextInput %}
 {% from "components/toggle_list.html" import ToggleButton, ToggleSection %}
@@ -51,7 +52,7 @@
                       }}
                       <br>
                       {% if env['pending'] -%}
-                        <span class='usa-label label--below'>{{Icon('exchange')}} CHANGES PENDING</span>
+                        {{ Label('exchange', 'Changes Pending', classes='label--below')}}
                       {% else %}
                         <a href='{{ url_for("applications.access_environment", environment_id=env.id)}}' target='_blank' rel='noopener noreferrer' class='application-list-item__environment__csp_link'>
                           <span>{{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }}</span>

templates/applications/fragments/members.html

@@ -1,5 +1,6 @@
 {% from "components/alert.html" import Alert %}
 {% from "components/icon.html" import Icon %}
+{% from "components/label.html" import Label %}
 {% import "applications/fragments/new_member_modal_content.html" as member_steps %}
 {% import "applications/fragments/member_form_fields.html" as member_fields %}
 {% from "components/modal.html" import Modal %}
@@ -131,7 +132,7 @@
                   </a>
                   <br>
                   {% if member.role_status == 'pending' %}
-                    <span class='label label--purple'>INVITE PENDING</span>
+                    {{ Label('envelope', 'invite pending', 'success', classes='label--below') }}
                   {% endif %}
 
                 </td>

templates/components/label.html

@@ -0,0 +1,8 @@
+{% from "components/icon.html" import Icon %}
+
+{% macro Label(icon_name, text, type=None, classes="") -%}
+
+  <span class='label {% if type %}label--{{ type }}{% endif %} {{ classes }}'>
+    {{ Icon(icon_name) }} {{ text }}
+  </span>
+{%- endmacro %}