ISTWCMS-5598:continue rebasing initial card into 1.0.x- including link and tags

src/patterns/04-components/tag/_tag.scss

+// @file
+// Styles for Tags.
+
+@use '../../01-core' as *;
+
+$faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+$tag-font-family-small: var(--font-mono) !default;
+$tag-font-family-normal: var(--font-mono) !default;
+$tag-font-size-normal: var(--font-size-0) !default;
+$tag-font-size-small: var(--font-size-000) !default;
+
+
+.tag {
+  @include link-no-underline(
+      var(--uw-black-primary),
+      var(--uw-black-primary)
+  );
+  background: none;
+  display: inline-block;
+  font-size: $tag-font-size-normal;
+  margin: 0 0 var(--size-1) 0;
+  padding: 0;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:background 300ms ease-in;
+  &.token{
+    text-transform: inherit;
+  }
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+  &--normal{
+    font-family: $tag-font-family-normal;
+    font-size: $tag-font-size-normal;
+  }
+  &--small{
+    font-family: $tag-font-family-small;
+    font-size: $tag-font-size-small;
+
+  }
+  &--full{
+    background: var(--uw-gold-3);
+    color: var(--uw-black-primary);
+    font-family: $tag-font-family-small;
+    font-size: $tag-font-size-small;
+    padding: var(--size-1);
+    &:hover,
+    &:focus {
+      background: var(--uw-black-primary);
+      color: var(--uw-gold-3);
+    }
+  }
+  &--simple{
+    @include link-reverse(
+        var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
+    font-family: $tag-font-family-normal;
+  }
+
+
+
+
+
+  a{
+    @include link-no-underline(
+        var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
+    background:none;
+    display: inline-block;
+    font-size: $tag-font-size-normal;
+    margin: 0 0 var(--size-1) 0;
+    padding:0;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition:background 300ms ease;
+
+    &:hover,
+    &:focus {
+
+    }
+  }
+  &--normal{
+    a{
+    font-family: $tag-font-family-normal;
+    font-size: $tag-font-size-normal;
+    }
+  }
+  &--small{
+    a {
+      font-family: $tag-font-family-small;
+      font-size: $tag-font-size-small;
+    }
+  }
+  &--full{
+    a {
+      background: var(--uw-gold-3);
+      color: var(--uw-black-primary);
+      font-family: $tag-font-family-small;
+      font-size: $tag-font-size-small;
+      padding: var(--size-1);
+
+      &:hover,
+      &:focus {
+        background: var(--uw-black-primary);
+        color: var(--uw-gold-3);
+      }
+    }
+  }
+  &--simple {
+    a {
+      @include link-reverse(
+          var(--uw-black-primary),
+          var(--uw-black-primary)
+      );
+      font-family: $tag-font-family-normal;
+    }
+  }
+}
+
+@each $faculty in $faculties {
+  .#{$faculty} {
+    a.tag--full{
+      @if $faculty == org-default {
+        background-color: var(--uw-black-primary);
+        color: var(--uw-gold-3);
+        &:hover,
+        &:focus {
+          background-color: var(--uw-gold-3);
+          color: var(--uw-black-primary);
+        }
+
+      }
+      //@else if $faculty == org-stp or $faculty == org-stj or $faculty == org-ren or $faculty == org-cgc{
+      //  background-color:gesso-brand($faculty,'primary');
+      //  color: gesso-brand(org-default,uw-white,'primary');
+      //  &:hover,
+      //  &:focus {
+      //    background-color: gesso-brand($faculty, 'light');
+      //    color:gesso-brand($faculty,'primary');
+      //  }
+      //}
+      //@else {
+      //  background-color:gesso-brand($faculty,'primary');
+      //  color: gesso-brand(org-default,uw-white,'primary');
+      //  &:hover,
+      //  &:focus {
+      //    background-color: gesso-brand($faculty, 'lvl1');
+      //    color:gesso-brand($faculty,'primary');
+      //  }
+      //}
+    }
+  }
+}

src/patterns/04-components/tag/tag.md

+---
+el: .tag
+title: Tag
+---
+
+__Variables:__
+* type: [string] Type of the tag
+    * full
+    * simple
+* size: [string] Size of the tag.
+    * small
+    * normal
+* url: [string] URL of the tag.
+* title: [string] Title of the tag.
+* faculty: [string] One of the faculty variables wrapping the tag will make
+  background color change
+    * org-ahs
+    * org-art
+    * org-eng
+    * org-env
+    * org-mat
+    * org-sci
+    * org-school

src/patterns/04-components/tag/tag.twig

+{% set classes = [
+  'tag',
+  type ? 'tag--' ~ type,
+  size ? 'tag--' ~ size
+] %}
+{% if is_demo %}
+<h4>This is a simple tag </h4>
+{% endif %}
+
+{%  if faculty %}
+<span class="{{ faculty }}">
+{%  endif %}
+  <a href="{{ url }}" class="{{ classes|join(' ') }}" rel="tag">
+    {{ title }}
+  </a>
+{%  if faculty %}
+</span>
+{%  endif %}
+
+
+{% if is_demo %}
+<br>
+<h4>This is a full tag </h4>
+<a href="{{ url }}" class="tag tag--full tag--normal" rel="tag">
+  {{ title }}
+</a>
+{% endif %}
\ No newline at end of file

src/patterns/04-components/tag/tag.yml

+---
+is_demo: true
+url: '#'
+title: 'Community'
+type: 'simple'
+size: 'normal'
+faculty: 'org-default'