feat(design-system): Added title component

sullivanpj · Nov 12, 2022 · bb243b2 · bb243b2
1 parent 685a0e4
commit bb243b2
Show file tree

Hide file tree

Showing 20 changed files with 667 additions and 15 deletions.
diff --git a/design-system/components/src/components.d.ts b/design-system/components/src/components.d.ts
@@ -113,6 +113,20 @@ export namespace Components {
          */
         "text": string;
     }
+    interface OsTitle {
+        /**
+          * The first name
+         */
+        "first": string;
+        /**
+          * The last name
+         */
+        "last": string;
+        /**
+          * The middle name
+         */
+        "middle": string;
+    }
 }
 export interface OsButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
@@ -141,10 +155,17 @@ declare global {
         prototype: HTMLOsLinkElement;
         new (): HTMLOsLinkElement;
     };
+    interface HTMLOsTitleElement extends Components.OsTitle, HTMLStencilElement {
+    }
+    var HTMLOsTitleElement: {
+        prototype: HTMLOsTitleElement;
+        new (): HTMLOsTitleElement;
+    };
     interface HTMLElementTagNameMap {
         "os-button": HTMLOsButtonElement;
         "os-input": HTMLOsInputElement;
         "os-link": HTMLOsLinkElement;
+        "os-title": HTMLOsTitleElement;
     }
 }
 declare namespace LocalJSX {
@@ -258,10 +279,25 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
+    interface OsTitle {
+        /**
+          * The first name
+         */
+        "first"?: string;
+        /**
+          * The last name
+         */
+        "last"?: string;
+        /**
+          * The middle name
+         */
+        "middle"?: string;
+    }
     interface IntrinsicElements {
         "os-button": OsButton;
         "os-input": OsInput;
         "os-link": OsLink;
+        "os-title": OsTitle;
     }
 }
 export { LocalJSX as JSX };
@@ -271,6 +307,7 @@ declare module "@stencil/core" {
             "os-button": LocalJSX.OsButton & JSXBase.HTMLAttributes<HTMLOsButtonElement>;
             "os-input": LocalJSX.OsInput & JSXBase.HTMLAttributes<HTMLOsInputElement>;
             "os-link": LocalJSX.OsLink & JSXBase.HTMLAttributes<HTMLOsLinkElement>;
+            "os-title": LocalJSX.OsTitle & JSXBase.HTMLAttributes<HTMLOsTitleElement>;
         }
     }
 }
diff --git a/design-system/components/src/components/os-button/os-button.tsx b/design-system/components/src/components/os-button/os-button.tsx
@@ -129,7 +129,10 @@ export class OsButton {
           )}
           onClick={this.onClick}>
           <div
-            class={clsx(this.getTextColor(), "rounded-full bg-bg-1 px-8 py-3")}>
+            class={clsx(
+              this.getTextColor(),
+              "font-btn-label-1 text-btn-label-1 rounded-full bg-bg-1 px-8  py-3"
+            )}>
             {this.inverse ? (
               <slot name="hover-text">{this.getDefaultText()}</slot>
             ) : (
@@ -271,7 +274,7 @@ export class OsButton {
                               this.variant !== ButtonVariants.GRADIENT ||
                               this.disabled,
                           },
-                          "flex h-full w-full items-center justify-center text-center font-label-1"
+                          "font-btn-label-1 text-btn-label-1 flex h-full w-full items-center justify-center text-center"
                         )}>
                         {this.inverse ? (
                           <slot>{this.getDefaultText()}</slot>

diff --git a/design-system/components/src/components/os-link/os-link.tsx b/design-system/components/src/components/os-link/os-link.tsx
@@ -25,12 +25,12 @@ export class OsLink {
     return (
       <Host>
         <div class="relative block w-full justify-center text-center align-middle">
-          <div class="relative text-[4.25rem] uppercase leading-tight text-tertiary">
-            <div class="group relative h-[4.25rem] text-transparent before:absolute before:-left-[10%] before:-right-[10%] before:top-[50%] before:z-[1] before:mt-1 before:block before:h-[4px] before:scale-0 before:rounded-lg before:bg-primary before:transition-transform before:duration-700 before:ease-[cubic-bezier(.16,1.08,.38,.98)] before:content-[''] hover:before:scale-105">
-              <div class="absolute top-0 block h-[75%] overflow-hidden text-primary ease-[cubic-bezier(.16,1.08,.38,.98)] group-hover:translate-x-2 group-hover:-translate-y-2 group-hover:skew-x-12 group-hover:text-tertiary group-hover:transition-transform group-hover:duration-300">
+          <div class="relative text-[4.25rem] uppercase leading-tight text-secondary">
+            <div class="group relative h-[4.25rem] text-transparent before:absolute before:-left-[10%] before:-right-[10%] before:top-[50%] before:z-[1] before:mt-1 before:block before:h-[8px] before:scale-0 before:rounded-drawn before:bg-primary before:transition-transform before:duration-700 before:ease-[cubic-bezier(.16,1.08,.38,.98)] before:content-[''] hover:before:scale-105">
+              <div class="absolute top-0 block h-[75%] overflow-hidden text-primary ease-[cubic-bezier(.16,1.08,.38,.98)] group-hover:translate-x-2 group-hover:-translate-y-2 group-hover:skew-x-12 group-hover:text-secondary group-hover:transition-transform group-hover:duration-300">
                 <div class="block antialiased">{this.text}</div>
               </div>
-              <div class="absolute top-[62%] block h-[50%] overflow-hidden text-primary ease-[cubic-bezier(.16,1.08,.38,.98)] group-hover:-translate-x-2 group-hover:skew-x-12 group-hover:text-tertiary group-hover:transition-transform group-hover:duration-700">
+              <div class="absolute top-[62%] block h-[50%] overflow-hidden text-primary ease-[cubic-bezier(.16,1.08,.38,.98)] group-hover:-translate-x-2 group-hover:skew-x-12 group-hover:text-secondary group-hover:transition-transform group-hover:duration-700">
                 <div class="block -translate-y-[50%] antialiased">
                   {this.text}
                 </div>