oasys-lib 1.1.5 → 1.2.1-alpha.0

package/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/oasys-lib'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/oasys-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/assets/**/*"
+  ]
+}

package/package.json

@@ -1,18 +1,11 @@
 {
   "name": "oasys-lib",
-  "version": "1.1.5",
+  "version": "1.2.1-alpha.0",
   "peerDependencies": {
     "@angular/common": "^12.2.0",
     "@angular/core": "^12.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
-  },
-  "main": "bundles/oasys-lib.umd.js",
-  "module": "fesm2015/oasys-lib.js",
-  "es2015": "fesm2015/oasys-lib.js",
-  "esm2015": "esm2015/oasys-lib.js",
-  "fesm2015": "fesm2015/oasys-lib.js",
-  "typings": "oasys-lib.d.ts",
-  "sideEffects": false
-}
+  }
+}

package/src/assets/bloomandwild/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 14:13:59 GMT
+ * Generated on Tue, 03 Jan 2023 14:05:25 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, 26 Oct 2022 14:13:59 GMT
+ * Generated on Tue, 03 Jan 2023 14:05:25 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, 26 Oct 2022 14:13:59 GMT
+// Generated on Tue, 03 Jan 2023 14:05:25 GMT
 
 $global-breakpoint-mobile: 0px;
 $global-breakpoint-tablet: 767px;

package/src/assets/global/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 14:13:59 GMT
+ * Generated on Tue, 03 Jan 2023 14:05:25 GMT
  */
 
 :root {

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

@@ -0,0 +1,16 @@
+<button (click)="onClick()"
+        [routerLink]="button.href || null"
+        [ngClass]="button.buttonDisplayClasses"
+        [attr.disabled]="button.buttonDisabled === true || null"
+        [attr.aria-label]="accessibleButtonContent"
+        [attr.title]="accessibleButtonContent"
+        role="button">
+    <div class="button-content">
+        <ui-icon *ngIf="button.buttonIcon && button.buttonIconPlacement !== 'none'" [iconName]="button.buttonIcon" [iconSize]="button.buttonSize" [iconClass]="'buttonIcon'" [iconContext]="button.buttonIconPlacement"></ui-icon>
+        <span class="ui-text" [ngClass]="{'visuallyhidden': button.buttonIconPlacement === 'iconOnly'}">
+            <ng-content></ng-content>
+        </span>
+    </div>
+    <div class="button-overlay"></div>
+    <div class="button-overlay-focus"></div>
+</button>

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

@@ -0,0 +1,188 @@
+@import './button.modifiers.scss';
+
+ui-button button {
+    /* ---------------------
+    Button Reset
+    --------------------- */
+    border: 0;
+    padding: 0;
+    position: relative;
+    display: inline-flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+    border-style: solid;
+    cursor: pointer;
+    user-select: none;
+    appearance: none;
+
+    // Vendor Specific
+    -webkit-appearance: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+
+
+
+     /* ---------------------
+    Global Styles
+    --------------------- */
+    border-radius: var(--component-button-border-radius);
+    font-family: var(--semantic-font-family-body);
+
+    $buttonLineHeight: var(--component-button-line-height);
+
+    .button-content {
+        display: flex;
+        align-items: center;
+
+        .ui-icon {
+            display: flex;
+            align-items: center;
+            max-height: $buttonLineHeight;
+        }
+
+        .ui-text {
+            text-transform: var(--component-button-text-transform);
+            letter-spacing: var(--component-button-letter-spacing);
+            font-weight: var(--component-button-font-weight);
+            line-height: $buttonLineHeight;
+        }
+    }
+
+
+
+    /* ---------------------
+    Hover / Focus Overlay
+    --------------------- */
+    .button-overlay,
+    .button-overlay-focus {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        touch-action: none;
+        pointer-events: none;
+        border-radius: var(--component-button-border-radius);
+        opacity: 0;
+    }
+
+
+
+    &:hover {
+        .button-overlay {
+            opacity: var(--component-button-opacity-overlay-hover);
+        }
+    }
+
+    &:focus {
+        .button-overlay {
+            opacity: var(--component-button-opacity-overlay-focus);
+        }
+    }
+
+    &:focus-visible {
+        .button-overlay {
+            opacity: var(--component-button-opacity-overlay-focus-visible);
+        }
+    }
+
+
+
+    /* ---------------------
+    Keyboard Focus Outline
+    --------------------- */
+    &:focus-visible {
+        outline: none;
+
+        .button-overlay-focus {
+            $outlineGap: var(--component-button-outline-gap);
+            top: calc(#{$outlineGap} * -1);
+            right: calc(#{$outlineGap} * -1);
+            bottom: calc(#{$outlineGap} * -1);
+            left: calc(#{$outlineGap} * -1);
+            box-shadow: 0 0 0 var(--component-button-outline-width) var(--component-button-color-focus-visible);
+            opacity: 1;
+            border-radius: calc(var(--component-button-border-radius) + var(--component-button-outline-width));
+        }
+    }
+
+    &:focus {
+        outline: none;
+    }
+
+
+    /* ---------------------
+    Button Colour Styles
+    --------------------- */
+    @each $buttonType in $buttonTypes {
+        &.type-#{$buttonType} {
+            @include buttonColors(($buttonType));
+        }
+    }
+
+
+    /* ---------------------
+    Icon Color Styling - Inherits from text color
+    --------------------- */
+    .buttonIcon {
+        fill: currentColor;
+    }
+
+
+
+    /* ---------------------
+    Button Size Variants
+    --------------------- */
+    @each $buttonSize in $buttonSizes {
+        &.size-#{$buttonSize} {
+            @include buttonSize(($buttonSize));
+        }
+    }
+    @each $buttonSize in $outlineButtonSizes {
+        &.button--outline.size-#{$buttonSize} {
+            @include buttonSize($buttonSize, 'true');
+        }
+    }
+
+
+
+    /* ---------------------
+    Disabled State
+    --------------------- */
+    &[disabled] {
+        background-color: var(--component-button-color-disabled-background);
+        border-color: var(--component-button-color-disabled-border);
+        color: var(--component-button-color-disabled-text);
+        cursor: default;
+    }
+
+
+
+    /* ---------------------
+    Trailing Icon Placement
+    (uses row reverse to support RTL languages)
+    --------------------- */
+    &.button--has-icon.button--icon--trailing {
+        .button-content {
+            flex-direction: row-reverse;
+        }
+    }
+
+
+    /* ---------------------
+    Full Width Style
+    --------------------- */
+    &.button--full-width {
+        display: flex;
+        width: 100%;
+    }
+
+
+
+}

package/src/lib/components/button/button.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OasysButtonComponent } from './button.component';
+
+describe('OasysButtonComponent', () => {
+  let component: OasysButtonComponent;
+  let fixture: ComponentFixture<OasysButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ OasysButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OasysButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,95 @@
+import { Component, Input, OnInit, Output, ViewEncapsulation, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, ContentChild, ElementRef, AfterViewInit } from '@angular/core';
+import { IconNames, IconContext } from '../icon/icon';
+import { TextTransform } from '../text/text';
+import {
+  // ButtonTypeOptions,
+  UIButton,
+  UIButtonBoolean,
+  UIButtonSize,
+  UIButtonType
+} from './button';
+
+@Component({
+  selector:'ui-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class OasysButtonComponent implements OnInit, OnChanges, AfterViewInit {
+
+  button: UIButton;
+
+  // // Button Content
+  @Input() buttonIcon?: IconNames;
+  @Input() buttonIconPlacement: IconContext = 'leading';
+
+  // @Input() buttonText: string;
+  @ContentChild('buttonText') buttonText: ElementRef;
+
+  // Button Stylings
+  @Input() buttonSize: UIButtonSize = 'large';
+  @Input() buttonFullWidth: UIButtonBoolean = false;
+  @Input() buttonType: UIButtonType = 'primary';
+  @Input() buttonDisabled: boolean = false;
+
+  // Button Actions
+  @Input() href: string = '';
+  @Output() clicked: EventEmitter<void> = new EventEmitter();
+
+  buttonDisplayClasses: string[];
+  iconContext: IconContext = 'none';
+  textTransform!: TextTransform;
+  accessibleButtonContent: string;
+  outlineButtonTypes = ['secondary', 'secondary-inverse']
+
+  constructor(private changes: ChangeDetectorRef) { }
+
+  onClick(): void {
+    this.clicked.emit();
+  }
+
+  createButton(): UIButton {
+
+    return <UIButton>{
+      buttonIcon: this.buttonIcon,
+      buttonIconPlacement: this.buttonIconPlacement,
+      buttonType: this.buttonType,
+      buttonSize: this.buttonSize,
+      buttonDisabled: this.buttonDisabled,
+      href: this.href,
+      target: '',
+      buttonDisplayClasses: [
+      `type-${this.buttonType}`,
+      `size-${this.buttonSize}`,
+      `${this.buttonIcon ? 'button--has-icon': ''}`,
+      `${this.buttonFullWidth ? 'button--full-width': ''}`,
+      `${this.buttonIcon ? 'button--icon--'+this.buttonIconPlacement : ''}`,
+      `${this.outlineButtonTypes.indexOf(this.buttonType) !== -1 ? 'button--outline' : ''}`
+      ].filter((d) => !!d)
+    };
+  }
+
+  ngAfterViewInit(): void {
+    if(this.buttonText?.nativeElement?.innerText) {
+      this.accessibleButtonContent = this.buttonText.nativeElement.innerText;
+    } else {
+      throw new Error(`
+      No inner text found. All buttons should have text passed via ng-content to enable accessibility for screen readers, this includes icon-only buttons.
+
+      Pass content using the template variable #buttonText eg:
+      ui-button()
+        span(#buttonText) Buy All The Things
+      `)
+    }
+  }
+
+  ngOnChanges(): void {
+      this.button = this.createButton();
+      this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+    this.button = this.createButton();
+  }
+}

package/src/lib/components/button/button.modifiers.scss

@@ -0,0 +1,101 @@
+/* ---------------------
+  All button type variants
+--------------------- */
+$buttonTypes:
+    primary,
+    secondary,
+    tertiary,
+    primary-inverse,
+    secondary-inverse,
+    tertiary-inverse,
+    expressive,
+    danger,
+    facebook,
+    paypal,
+    trustpilot;
+
+
+
+/* ---------------------
+All button  sizes
+--------------------- */
+$buttonSizes: large, small;
+$outlineButtonSizes: large, small;
+
+
+
+/* ---------------------
+  Generate Button Colours
+--------------------- */
+@mixin buttonColors($buttonType) {
+  background-color: var(--component-button-color-#{$buttonType}-background);
+  border-color: var(--component-button-color-#{$buttonType}-border);
+  color: var(--component-button-color-#{$buttonType}-text);
+
+  .button-overlay {
+      background-color: var(--component-button-color-#{$buttonType}-text);
+  }
+}
+
+
+
+/* ---------------------
+  Generate Button Sizes
+--------------------- */
+@mixin buttonSize($buttonSize, $isOutline: false) {
+
+  // Variables to override below
+  $buttonPadding: 0 !default;
+  $buttonBorderWidth: 0 !default;
+
+  $iconOffsetLeading: 0 !default;
+  $iconOffsetTrailing: 0 !default;
+  $iconOffsetIconOnly: 0 !default;
+
+  // Variables dont change if theres an outline
+  $buttonFontSize: var(--component-button-size-#{$buttonSize}-font-size);
+  $buttonInlineSpacing: var(--component-button-size-#{$buttonSize}-stack-spacing);
+
+
+  @if $isOutline== 'true' {
+    $buttonPadding: var(--component-button-size-#{$buttonSize}-with-outline-padding-y) var(--component-button-size-#{$buttonSize}-with-outline-padding-x);
+    $buttonBorderWidth: var(--component-button-size-#{$buttonSize}-with-outline-border-width);
+
+    $iconOffsetLeading: calc(var(--component-button-size-#{$buttonSize}-with-outline-icon-offset-leading) * -1);
+    $iconOffsetTrailing: calc(var(--component-button-size-#{$buttonSize}-with-outline-icon-offset-trailing) * -1);
+    $iconOffsetIconOnly: calc(var(--component-button-size-#{$buttonSize}-with-outline-icon-offset-icon-only) * -1);
+
+  } @else {
+    $buttonPadding: var(--component-button-size-#{$buttonSize}-padding-y) var(--component-button-size-#{$buttonSize}-padding-x);
+    $buttonBorderWidth: var(--component-button-size-#{$buttonSize}-border-width);
+
+    $iconOffsetLeading: calc(var(--component-button-size-#{$buttonSize}-icon-offset-leading) * -1);
+    $iconOffsetTrailing: calc(var(--component-button-size-#{$buttonSize}-icon-offset-trailing) * -1);
+    $iconOffsetIconOnly: calc(var(--component-button-size-#{$buttonSize}-icon-offset-icon-only) * -1);
+  }
+
+  // TODO remove properly
+  padding: $buttonPadding;
+  border-width: $buttonBorderWidth;
+  font-size: $buttonFontSize;
+
+  .button-content {
+      gap: $buttonInlineSpacing;
+  }
+
+  .ui-icon {
+
+    &.icon-context-leading {
+      margin-left: #{$iconOffsetLeading};
+    }
+
+    &.icon-context-trailing {
+      margin-right: #{$iconOffsetTrailing}
+    }
+
+    &.icon-context-iconOnly {
+      margin-left: #{$iconOffsetIconOnly};
+      margin-right: #{$iconOffsetIconOnly}
+    }
+  }
+}

package/src/lib/components/button/button.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '@angular/core';
+import { IconNames, IconContext } from '../icon/icon';
+
+
+export type UIButtonBoolean = true | 'true' | false | 'false';
+
+export type UIButtonSize = 'small' | 'large';
+
+export type UIButtonType =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'primary-inverse'
+  | 'secondary-inverse'
+  | 'tertiary-inverse'
+  | 'expressive'
+  | 'danger'
+  | 'facebook'
+  | 'paypal'
+  | 'trustpilot';
+
+export interface UIButton {
+
+  // Inputs
+
+  // icon name
+  buttonIcon: IconNames;
+  // color/styling of button
+  buttonType: UIButtonType;
+  // positioning for icon
+  buttonIconPlacement: IconContext
+  // button size
+  buttonSize: UIButtonSize;
+  // Full width
+  buttonFullWidth: UIButtonBoolean;
+  // For links, expects relative or absolute url
+  href: string;
+  target: string;
+  buttonDisabled: UIButtonBoolean;
+
+  // Private properties
+  buttonDisplayClasses: string[];
+
+  // Outputs
+
+  // Click event, used when no href input
+  buttonDidClick: EventEmitter<any>;
+}

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

@@ -0,0 +1,5 @@
+<div class="ui-icon" [ngClass]="iconDisplayClasses">
+  <svg xmlns="http://www.w3.org/2000/svg" attr.width="{{iconWidth}}px" attr.height="{{iconHeight}}px" attr.class="{{iconClass}}">
+    <use attr.xlink:href="./{{iconBrandPath}}/assets/icons/icons.svg#icon-{{iconName}}"></use>
+  </svg>
+</div>

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

@@ -0,0 +1,5 @@
+
+.ui-icon {
+  display: inline-flex;
+
+}

package/src/lib/components/icon/icon.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconComponent } from './icon.component';
+
+describe('IconComponent', () => {
+  let component: IconComponent;
+  let fixture: ComponentFixture<IconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ IconComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});