@energycap/components 0.43.3-ECAP-26516-add-party-hat-icon.20250325-1153 → 0.43.4-ECAP-29229-tag-component.20250502-1711

package/lib/display/tags/tag.d.ts

@@ -1,5 +1,5 @@
 /** Tag type used to style the tag */
-export type TagType = "info" | "success" | "warning" | "danger" | "accent" | "chargeback" | "accrual" | "inverted" | "system";
+export type TagType = "info" | "success" | "warning" | "danger" | "accent" | "chargeback" | "accrual" | "inverted" | "system" | "interval";
 /** Link target options, shared amongst tag, menu and item display */
 export type LinkTarget = '_self' | '_blank' | '_parent' | '_top';
 /** Tag contains a label and type. Type is default by default */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.43.3-ECAP-26516-add-party-hat-icon.20250325-1153",
+  "version": "0.43.4-ECAP-29229-tag-component.20250502-1711",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"

package/src/styles/components/_tag.scss

@@ -0,0 +1,18 @@
+@import '../mixins/tags-base';
+
+.tag {
+  @include tag;
+
+  &.is-condensed {
+    @include tag-condensed;
+  }
+
+  a::after {
+    opacity: 1;
+    margin-left: .1875rem;
+  }
+}
+
+.tag-close-btn {
+  @include tag-close-btn;
+}

package/src/styles/index.scss

@@ -16,6 +16,7 @@
 @import 'components/splash';
 @import 'components/unsupported-browsers';
 @import 'components/link-icons';
+@import 'components/tag';
 
 /*!
 * EnergyCAP Components - Utility Styles

package/src/styles/mixins/_tags-base.scss

@@ -1,4 +1,5 @@
 @import '../core';
+@import '../mixins/text';
 
 $tag-colors: (
   info: (bg: var(--ec-color-cobalt-1), border: var(--ec-color-info)),
@@ -9,6 +10,7 @@ $tag-colors: (
   chargeback: (bg: var(--ec-color-orange-1), border: var(--ec-color-orange-7)),
   accrual: (bg: var(--ec-color-aqua-1), border: var(--ec-color-aqua-5)),
   system: (bg: var(--ec-color-gray-1), border: var(--ec-color-gray-4)),
+  interval:(bg: var(--ec-color-gray-1), border: var(--ec-color-brand-black)),
 );
 
 @mixin tag-type($type) {
@@ -36,6 +38,7 @@ $tag-colors: (
 }
 
 @mixin tag() {
+  @include text-caption-1;
   @include truncate;
 
   background-color: var(--ec-color-gray-1);
@@ -45,7 +48,7 @@ $tag-colors: (
   border-radius: calc(var(--ec-border-radius, .25rem) * 3);
   height: 1.5rem;
   line-height: 1.25rem;
-  padding: 0 0.4375rem;
+  padding: 0 var(--ec-tag-padding-x, 0.4375rem);
   vertical-align: top;
 
   > .ec-icon:first-child {
@@ -83,6 +86,7 @@ $tag-colors: (
   height: 100%;
   cursor: pointer;
   position: relative;
+  margin-right: calc(0rem - var(--ec-tag-padding-x, 0.4375rem));
 
   &:hover,
   &:focus {
@@ -102,9 +106,11 @@ $tag-colors: (
 }
 
 @mixin tag-condensed {
+  @include text-caption-2;
+  --ec-tag-padding-x: 0.25rem;
+  
   border-radius: var(--ec-border-radius);
   border-width: 1px;
-  padding: 0 .25rem;
   height: 1.125rem;
   line-height: 1.125rem;
   min-width: 1.125rem;