Tweak component library slightly (#715)

components/src/badge/badge.component.ts

@@ -1,39 +1,68 @@
-import { Component, Input } from "@angular/core";
+import { Directive, ElementRef, HostBinding, Input, OnChanges, OnInit } from "@angular/core";
 
 type BadgeTypes = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
 
 const styles: Record<BadgeTypes, string[]> = {
-  primary: ["tw-bg-primary-500", "hover:tw-bg-primary-700"],
-  secondary: ["tw-bg-secondary-500", "hover:tw-bg-secondary-700"],
-  success: ["tw-bg-success-500", "hover:tw-bg-success-700"],
-  danger: ["tw-bg-danger-500", "hover:tw-bg-danger-700"],
-  warning: ["tw-bg-warning-500", "hover:tw-bg-warning-700"],
-  info: ["tw-bg-info-500", "hover:tw-bg-info-700"],
+  primary: ["tw-bg-primary-500"],
+  secondary: ["tw-bg-text-muted"],
+  success: ["tw-bg-success-500"],
+  danger: ["tw-bg-danger-500"],
+  warning: ["tw-bg-warning-500"],
+  info: ["tw-bg-info-500"],
 };
 
-@Component({
-  selector: "bit-badge",
-  template: `<span [ngClass]="classes"><ng-content></ng-content></span>`,
+const hoverStyles: Record<BadgeTypes, string[]> = {
+  primary: ["hover:tw-bg-primary-700"],
+  secondary: ["hover:tw-bg-secondary-700"],
+  success: ["hover:tw-bg-success-700"],
+  danger: ["hover:tw-bg-danger-700"],
+  warning: ["hover:tw-bg-warning-700"],
+  info: ["hover:tw-bg-info-700"],
+};
+
+@Directive({
+  selector: "span[bit-badge], a[bit-badge], button[bit-badge]",
 })
-export class BadgeComponent {
-  @Input()
-  type: BadgeTypes = "primary";
+export class BadgeComponent implements OnInit, OnChanges {
+  @HostBinding("class") @Input("class") classList = "";
+
+  @Input() badgeType: BadgeTypes = "primary";
+
+  private isSpan = false;
+
+  constructor(private el: ElementRef<Element>) {
+    this.isSpan = el?.nativeElement?.nodeName == "SPAN";
+  }
+
+  ngOnInit(): void {
+    this.classList = this.classes.join(" ");
+  }
+
+  ngOnChanges() {
+    this.ngOnInit();
+  }
 
   get classes() {
     return [
       "tw-inline-block",
-      "tw-py-0.5",
-      "tw-px-1",
+      "tw-py-1",
+      "tw-px-1.5",
       "tw-font-bold",
       "tw-leading-none",
       "tw-text-center",
-      "tw-text-contrast",
-      "tw-align-baseline",
+      "!tw-text-contrast",
       "tw-rounded",
-      "tw-border-collapse",
+      "tw-border-none",
       "tw-box-border",
       "tw-whitespace-no-wrap",
       "tw-text-xs",
-    ].concat(styles[this.type]);
+      "hover:tw-no-underline",
+      "focus:tw-outline-none",
+      "focus:tw-ring",
+      "focus:tw-ring-offset-2",
+      "focus:tw-ring-primary-700",
+    ]
+      .concat(styles[this.badgeType])
+      .concat(this.isSpan ? [] : hoverStyles[this.badgeType]);
   }
 }

components/src/badge/badge.stories.ts

@@ -13,7 +13,11 @@ export default {
 const Template: Story<BadgeComponent> = (args: BadgeComponent) => ({
   props: args,
   template: `
-    <span class="tw-text-main">Test </span><bit-badge [type]="type">Content</bit-badge>
+    <span class="tw-text-main">Span </span><span bit-badge [badgeType]="type">Badge</span>
+    <br><br>
+    <span class="tw-text-main">Link </span><a href="#" bit-badge [badgeType]="type">Badge</a>
+    <br><br>
+    <span class="tw-text-main">Button </span><button bit-badge [badgeType]="type">Badge</button>
   `,
 });
 

components/src/button/button.component.ts

@@ -1,4 +1,4 @@
-import { Input, HostBinding, OnChanges, Directive } from "@angular/core";
+import { Input, HostBinding, OnChanges, Directive, OnInit } from "@angular/core";
 
 export type ButtonTypes = "primary" | "secondary" | "danger";
 
@@ -18,10 +18,10 @@ const buttonStyles: Record<ButtonTypes, string> = {
     "!tw-text-muted",
     "hover:tw-bg-secondary-500",
     "hover:tw-border-secondary-500",
-    "hover:tw-text-contrast",
+    "hover:!tw-text-contrast",
     "focus:tw-bg-secondary-500",
     "focus:tw-border-secondary-500",
-    "focus:tw-text-contrast",
+    "focus:!tw-text-contrast",
   ].join(" "),
   danger: [
     "tw-bg-transparent",
@@ -29,18 +29,18 @@ const buttonStyles: Record<ButtonTypes, string> = {
     "!tw-text-danger",
     "hover:tw-bg-danger-500",
     "hover:tw-border-danger-500",
-    "hover:tw-text-contrast",
+    "hover:!tw-text-contrast",
     "focus:tw-bg-danger-500",
     "focus:tw-border-danger-500",
-    "focus:tw-text-contrast",
+    "focus:!tw-text-contrast",
   ].join(" "),
 };
 
 @Directive({
   selector: "button[bit-button], a[bit-button]",
 })
-export class ButtonComponent implements OnChanges {
-  @HostBinding("class") @Input("class") classList = "";
+export class ButtonComponent implements OnInit, OnChanges {
+  @HostBinding("class") @Input() classList = "";
 
   @Input()
   buttonType: ButtonTypes = "secondary";
@@ -48,10 +48,14 @@ export class ButtonComponent implements OnChanges {
   @Input()
   block = false;
 
-  ngOnChanges() {
+  ngOnInit(): void {
     this.classList = this.classes.join(" ");
   }
 
+  ngOnChanges() {
+    this.ngOnInit();
+  }
+
   get classes(): string[] {
     return [
       "tw-font-semibold",

components/src/button/button.stories.ts

@@ -15,7 +15,10 @@ export default {
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
 const Template: Story<ButtonComponent> = (args: ButtonComponent) => ({
   props: args,
-  template: `<button bit-button [buttonType]="buttonType" [block]="block">Test</button>`,
+  template: `
+    <button bit-button [buttonType]="buttonType" [block]="block">Button</button>
+    <a bit-button [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">Link</a>
+  `,
 });
 
 export const Primary = Template.bind({});

components/src/callout/callout.component.html

@@ -1,5 +1,5 @@
 <div
-  class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-elevation tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
+  class="tw-py-3 tw-px-5 tw-mb-4 tw-leading-5 tw-rounded tw-bg-background-alt tw-border tw-border-secondary-300 tw-border-solid tw-box-border tw-border-l-8 tw-text-main"
   [ngClass]="calloutClass"
 >
   <h3

components/src/tw-theme.css

@@ -1,6 +1,7 @@
 :root {
   --color-background: #ffffff;
-  --color-background-elevation: #fbfbfb;
+  --color-background-alt: #fbfbfb;
+  --color-background-alt2: #175ddc;
 
   --color-primary-300: #6795e8;
   --color-primary-500: #175ddc;
@@ -12,21 +13,22 @@
   --color-secondary-700: #212529;
 
   --color-success-500: #017e45;
-  --color-success-700: #003f23;
+  --color-success-700: #00552e;
 
   --color-danger-500: #c83522;
-  --color-danger-700: #641a11;
+  --color-danger-700: #98291b;
 
   --color-warning-500: #8b6609;
-  --color-warning-700: #463304;
+  --color-warning-700: #694d05;
 
   --color-info-500: #555555;
-  --color-info-700: #2b2b2b;
+  --color-info-700: #3b3a3a;
 
   --color-text-main: #212529;
   --color-text-muted: #6d757e;
   --color-text-contrast: #ffffff;
-  --tw-ring-offset-color: #1f242e;
+
+  --tw-ring-offset-color: #fff;
 }
 
 .theme_light {
@@ -35,7 +37,8 @@
 
 .theme_dark {
   --color-background: #1f242e;
-  --color-background-elevation: #161c26;
+  --color-background-alt: #161c26;
+  --color-background-alt2: #2f343d;
 
   --color-primary-300: #175ddc;
   --color-primary-500: #6a99f0;
@@ -61,4 +64,6 @@
   --color-text-main: #ffffff;
   --color-text-muted: #bac0ce;
   --color-text-contrast: #191e26;
+
+  --tw-ring-offset-color: #1f242e;
 }

components/tailwind.config.base.js

@@ -38,8 +38,11 @@ module.exports = {
         700: "var(--color-info-700)",
       },
       "text-muted": "var(--color-text-muted)",
-      background: "var(--color-background)",
-      "background-elevation": "var(--color-background-elevation)",
+      background: {
+        DEFAULT: "var(--color-background)",
+        alt: "var(--color-background-alt)",
+        alt2: "var(--color-background-alt2)",
+      },
     },
     textColor: {
       main: "var(--color-text-main)",
@@ -49,6 +52,9 @@ module.exports = {
       danger: "var(--color-danger-500)",
       warning: "var(--color-warning-500)",
       info: "var(--color-info-500)",
+      primary: {
+        300: "var(--color-primary-300)",
+      },
     },
     ringOffsetColor: ({ theme }) => ({
       DEFAULT: theme("colors.background"),