oasys-lib 1.2.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oasys-lib",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "peerDependencies": {
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0"

package/src/assets/bloomandwild/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 16 Nov 2022 17:54:25 GMT
+ * Generated on Fri, 02 Dec 2022 13:11:34 GMT
  */
 
 :root .brand-tokens-bloomandwild {
@@ -77,6 +77,11 @@
   --component-button-opacity-overlay-focus-visible: 0.0;
   --component-button-border-radius: 0.2rem;
   --component-button-text-transform: normal;
+  --component-heading-alignment-default: center;
+  --component-heading-alignment-functional: start;
+  --component-heading-gap-default: default;
+  --component-heading-gap-secondary: near;
+  --component-heading-gap-functional: tight;
   --semantic-font-styles-heading-hero-size: 5.2rem;
   --semantic-font-styles-heading-hero-line-height: 6.4rem;
   --semantic-font-styles-heading-hero-mobile-size: 3.6rem;

package/src/assets/bloomon/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 16 Nov 2022 17:54:25 GMT
+ * Generated on Fri, 02 Dec 2022 13:11:34 GMT
  */
 
 :root .brand-tokens-bloomon {
@@ -77,6 +77,11 @@
   --component-button-opacity-overlay-focus-visible: 0.0;
   --component-button-border-radius: 2.4rem;
   --component-button-text-transform: uppercase;
+  --component-heading-alignment-default: start;
+  --component-heading-alignment-functional: start;
+  --component-heading-gap-default: default;
+  --component-heading-gap-secondary: near;
+  --component-heading-gap-functional: tight;
   --semantic-font-styles-heading-hero-size: 5.2rem;
   --semantic-font-styles-heading-hero-line-height: 6.4rem;
   --semantic-font-styles-heading-hero-mobile-size: 3.6rem;
@@ -131,8 +136,8 @@
   --semantic-color-text-primary: #464646;
   --semantic-color-text-primary-on-dark: #ffffff;
   --semantic-color-text-primary-disabled: #898989;
-  --semantic-color-text-supporting: #676767;
-  --semantic-color-text-supporting-on-dark: #cdcdcd;
+  --semantic-color-text-supporting: #464646;
+  --semantic-color-text-supporting-on-dark: #ffffff;
   --semantic-color-transparent: transparent;
   --semantic-color-tint-success: #fff799;
   --semantic-color-tint-warning: #ff9f80;

package/src/assets/global/scss-breakpoints.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 16 Nov 2022 17:54:25 GMT
+// Generated on Fri, 02 Dec 2022 13:11:34 GMT
 
 $global-breakpoint-mobile: 0px;
 $global-breakpoint-tablet: 767px;

package/src/assets/global/typography.scss

@@ -53,7 +53,7 @@ h3,
 h4,
 h5,
 h6,
-.text-heading-functional {
+.text-heading--functional {
   font-family: var(--semantic-font-family-headline-secondary);
 }
 
@@ -63,7 +63,10 @@ h6,
   Heading Sizes
 --------------------- */
 
-h1,
+// add .seo-h1 on to any H1 tag which is used
+// purely for SEO and should not appear like an h1
+
+h1:not(.seo-h1),
 .text-heading--hero {
   font-size: var(--semantic-font-styles-heading-hero-size);
   line-height: var(--semantic-font-styles-heading-hero-line-height);
@@ -98,7 +101,7 @@ h3,
 --------------------- */
 
 h4,
-.text-heading-functional--primary {
+.text-heading--functional--primary {
   font-size: var(--semantic-font-styles-heading-functional-primary-size);
   line-height: var(--semantic-font-styles-heading-functional-primary-line-height);
 
@@ -109,7 +112,7 @@ h4,
 }
 
 h5,
-.text-heading-functional--secondary {
+.text-heading--functional--secondary {
   font-size: var(--semantic-font-styles-heading-functional-secondary-size);
   line-height: var(--semantic-font-styles-heading-functional-secondary-line-height);
 
@@ -191,15 +194,16 @@ html, body {
 }
 
 .text-color--on-dark {
-  color: var(--semantic-color-text-primary-on-dark)
-}
+  color: var(--semantic-color-text-primary-on-dark);
 
-.text-color--supporting {
-  color: var(--semantic-color-text-supporting)
+  &.text-color--supporting,
+  .text-color--supporting {
+    color: var(--semantic-color-text-supporting-on-dark)
+  }
 }
 
-.text-color--supporting-on-dark {
-  color: var(--semantic-color-text-supporting-on-dark)
+.text-color--supporting {
+  color: var(--semantic-color-text-supporting);
 }
 
 

package/src/assets/global/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 16 Nov 2022 17:54:25 GMT
+ * Generated on Fri, 02 Dec 2022 13:11:34 GMT
  */
 
 :root {

package/src/lib/components/heading/heading.component.html

@@ -0,0 +1,41 @@
+<hgroup>
+    <ui-stack [stackAlign]="headingAlignment" [stackGap]="headingGap">
+
+        <p *ngIf="headingSurtitle && headingSurtitle.length" class="heading-surtitle text-body--supporting text-color--supporting">
+            {{headingSurtitle}}
+        </p>
+
+        <ng-template #content>
+            <span
+            class="heading-title"
+            [ngClass]="{
+                'text-heading': !headingTypeIsFunctional(headingType),
+                'text-heading--functional': headingTypeIsFunctional(headingType),
+
+                'text-heading--hero': headingType === 'hero',
+                'text-heading--primary': headingType === 'primary',
+                'text-heading--secondary': headingType === 'secondary',
+                'text-heading--functional--primary': headingType === 'functional-primary',
+                'text-heading--functional--secondary': headingType === 'functional-secondary'
+            }"
+            >{{headingTitle}}</span>
+        </ng-template>
+
+        <h1 role="heading" [attr.aria-level]="headingPriority" class="seo-h1" *ngIf="headingSeoPriority">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+        </h1>
+        <span role="heading" [attr.aria-level]="headingPriority" *ngIf="!headingSeoPriority">
+            <ng-container *ngTemplateOutlet="content"></ng-container>
+        </span>
+
+        <p
+            *ngIf="headingSubtitle && headingSubtitle.length"
+            class="heading-subtitle"
+            [ngClass]="{
+                'text-body--hero': headingType === 'hero',
+                'text-body--default': headingType !== 'hero'
+            }"
+        >{{headingSubtitle}}</p>
+
+    </ui-stack>
+</hgroup>

package/src/lib/components/heading/heading.component.scss

@@ -0,0 +1,9 @@
+ui-heading {
+  &.ui-heading-alignment-start {
+    text-align: start;
+  }
+
+  &.ui-heading-alignment-center {
+    text-align: center;
+  }
+}

package/src/lib/components/heading/heading.component.ts

@@ -0,0 +1,87 @@
+import { Component, Input, OnInit, ViewEncapsulation, OnChanges, SimpleChanges, HostBinding } from '@angular/core';
+import { TokenService } from '../../services/token.service';
+import { HeadingAlignment, HeadingGap, HeadingType } from './heading';
+
+@Component({
+  selector:'ui-heading',
+  templateUrl: './heading.component.html',
+  styleUrls: ['./heading.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class OasysHeadingComponent implements OnInit {
+
+  @Input()
+  headingType: HeadingType = 'primary';
+
+  @Input()
+  headingOnDark: boolean = false;
+
+  @Input()
+  headingTitle: string;
+
+  @Input()
+  headingSeoPriority: boolean = false;
+
+  @Input()
+  headingPriority?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  @Input()
+  headingAlignmentOverride?: HeadingAlignment;
+
+  @Input()
+  headingSubtitle?: string = '';
+
+  @Input()
+  headingSurtitle?: string = '';
+
+  headingAlignment: HeadingAlignment;
+  headingGap: HeadingGap;
+
+
+  @HostBinding('class') get class() {
+    return `
+      ${this.headingOnDark ? 'text-color--on-dark' : ''}
+      ui-heading-alignment-${this.headingAlignment}
+    `
+  }
+
+  constructor(private tokenService: TokenService) { }
+
+  headingTypeIsFunctional(headingType: HeadingType): boolean {
+    return headingType.indexOf('functional') !== -1;
+  }
+
+  setupHeadingStackAlignment(headingType: HeadingType): void {
+    if(this.headingAlignmentOverride) {
+      this.headingAlignment = this.headingAlignmentOverride;
+      return;
+    }
+
+    const alignment = this.tokenService.getTokenValue('--component-heading-alignment-default') as HeadingAlignment;
+    const functionalAlignment =  this.tokenService.getTokenValue('--component-heading-alignment-functional') as HeadingAlignment;
+
+    this.headingAlignment = this.headingTypeIsFunctional(headingType) ? functionalAlignment : alignment;
+
+  }
+
+  setupHeadingStackGap(headingType: HeadingType): void {
+    if(this.headingTypeIsFunctional(headingType)){
+      this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-functional') as HeadingGap;
+      return;
+    }
+
+    if(this.headingType === 'secondary') {
+      this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-secondary') as HeadingGap;
+      return;
+    }
+
+    this.headingGap = this.tokenService.getTokenValue('--component-heading-gap-default') as HeadingGap;
+  }
+
+  ngOnInit(): void {
+    this.setupHeadingStackAlignment(this.headingType);
+    this.setupHeadingStackGap(this.headingType);
+    this.headingPriority = this.headingPriority || this.headingSeoPriority ? 1 : 2;
+  }
+
+}

package/src/lib/components/heading/heading.ts

@@ -0,0 +1,15 @@
+export type HeadingType =
+  | 'hero'
+  | 'primary'
+  | 'secondary'
+  | 'functional-primary'
+  | 'functional-secondary';
+
+export type HeadingAlignment =
+  | 'start'
+  | 'center';
+
+export type HeadingGap =
+  | 'default'
+  | 'near'
+  | 'tight';

package/src/lib/oasys-lib.module.ts

@@ -1,5 +1,5 @@
 import { APP_BASE_HREF, CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { OasysButtonComponent } from './components/button/button.component';
 import { IconComponent } from './components/icon/icon.component';
@@ -9,6 +9,7 @@ import { TokenService } from './services/token.service';
 import { LayoutStackComponent } from './components/layout/stack/stack.component';
 import { LayoutGridComponent, LayoutGridColumnComponent } from './components/layout/grid/grid.component';
 import { LayoutContainerComponent } from './components/layout/container/container.component';
+import { OasysHeadingComponent } from './components/heading/heading.component';
 
 
 
@@ -20,7 +21,8 @@ import { LayoutContainerComponent } from './components/layout/container/containe
     LayoutStackComponent,
     LayoutGridComponent,
     LayoutGridColumnComponent,
-    LayoutContainerComponent
+    LayoutContainerComponent,
+    OasysHeadingComponent
   ],
   imports: [
     CommonModule,
@@ -32,11 +34,15 @@ import { LayoutContainerComponent } from './components/layout/container/containe
     LayoutStackComponent,
     LayoutGridComponent,
     LayoutGridColumnComponent,
-    LayoutContainerComponent
+    LayoutContainerComponent,
+    OasysHeadingComponent
   ],
   providers: [
     WindowService,
     TokenService
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
   ]
 })
 export class OasysLibModule { }

package/src/public-api.ts

@@ -11,4 +11,6 @@ export * from './lib/components/layout/box/box.component';
 export * from './lib/components/layout/stack/stack.component';
 export * from './lib/components/layout/grid/grid.component';
 export * from './lib/components/layout/container/container.component';
+export * from './lib/components/heading/heading.component';
+