oasys-lib 1.1.4 → 1.2.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.4",
+  "version": "1.2.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 10:26:26 GMT
+ * Generated on Wed, 16 Nov 2022 17:54:25 GMT
  */
 
 :root .brand-tokens-bloomandwild {
@@ -22,8 +22,8 @@
   --component-button-color-tertiary-inverse-background: transparent;
   --component-button-color-tertiary-inverse-border: transparent;
   --component-button-color-tertiary-inverse-text: #ffffff;
-  --component-button-color-expressive-background: #fff799;
-  --component-button-color-expressive-border: #fff799;
+  --component-button-color-expressive-background: #fdf888;
+  --component-button-color-expressive-border: #fdf888;
   --component-button-color-expressive-text: #262626;
   --component-button-color-danger-background: #DB4141;
   --component-button-color-danger-border: #DB4141;
@@ -116,20 +116,28 @@
   --semantic-font-letter-spacing-action-primary: 0rem;
   --semantic-color-action-primary: #262626;
   --semantic-color-action-primary-inverse: #ffffff;
-  --semantic-color-action-expressive: #fff799;
+  --semantic-color-action-expressive: #fdf888;
   --semantic-color-action-danger: #DB4141;
   --semantic-color-action-disabled: #f4f3f2;
   --semantic-color-action-focus-visible: #538FFC;
-  --semantic-color-background-body: #ffffff;
-  --semantic-color-background-brand-primary: #f9ecd7;
-  --semantic-color-background-brand-secondary: #f9ecd7;
-  --semantic-color-text-body: #262626;
-  --semantic-color-text-body-on-dark: #ffffff;
-  --semantic-color-text-body-disabled: #898989;
+  --semantic-color-state-focus: #538FFC;
+  --semantic-color-state-selected-fill: #f9ecd7;
+  --semantic-color-state-selected-border: #262626;
+  --semantic-color-background-transparent: transparent;
+  --semantic-color-background-primary: #ffffff;
+  --semantic-color-background-secondary: #f9ecd7;
+  --semantic-color-background-tertiary: #447964;
+  --semantic-color-background-quaternary: #2d5443;
+  --semantic-color-text-primary: #262626;
+  --semantic-color-text-primary-on-dark: #ffffff;
+  --semantic-color-text-primary-disabled: #898989;
+  --semantic-color-text-supporting: #4d4840;
+  --semantic-color-text-supporting-on-dark: #e2e0dc;
   --semantic-color-transparent: transparent;
-  --semantic-color-tone-success: #fdf888;
-  --semantic-color-tone-warning: #ff9f80;
-  --semantic-color-tone-error: #C84116;
+  --semantic-color-tint-success: #ADD685;
+  --semantic-color-tint-warning: #F8BB40;
+  --semantic-color-tint-error: #DB4141;
+  --semantic-color-tint-highlight: #fdf888;
   --semantic-spacing-border-width-none: 0rem;
   --semantic-spacing-border-width-default: 0.1rem;
   --semantic-spacing-border-width-emphasis: 0.2rem;

package/src/assets/bloomon/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 10:26:26 GMT
+ * Generated on Wed, 16 Nov 2022 17:54:25 GMT
  */
 
 :root .brand-tokens-bloomon {
@@ -22,8 +22,8 @@
   --component-button-color-tertiary-inverse-background: transparent;
   --component-button-color-tertiary-inverse-border: transparent;
   --component-button-color-tertiary-inverse-text: #ffffff;
-  --component-button-color-expressive-background: #fdf888;
-  --component-button-color-expressive-border: #fdf888;
+  --component-button-color-expressive-background: #fff799;
+  --component-button-color-expressive-border: #fff799;
   --component-button-color-expressive-text: #464646;
   --component-button-color-danger-background: #C84116;
   --component-button-color-danger-border: #C84116;
@@ -116,20 +116,28 @@
   --semantic-font-letter-spacing-action-primary: 0.2rem;
   --semantic-color-action-primary: #464646;
   --semantic-color-action-primary-inverse: #ffffff;
-  --semantic-color-action-expressive: #fdf888;
+  --semantic-color-action-expressive: #fff799;
   --semantic-color-action-danger: #C84116;
   --semantic-color-action-disabled: #f7f7f7;
   --semantic-color-action-focus-visible: #538FFC;
-  --semantic-color-background-body: #ffffff;
-  --semantic-color-background-brand-primary: #f8d7be;
-  --semantic-color-background-brand-secondary: #f6e9dc;
-  --semantic-color-text-body: #464646;
-  --semantic-color-text-body-on-dark: #ffffff;
-  --semantic-color-text-body-disabled: #898989;
+  --semantic-color-state-focus: #538FFC;
+  --semantic-color-state-selected-fill: #fff8f4;
+  --semantic-color-state-selected-border: #ff9f80;
+  --semantic-color-background-transparent: transparent;
+  --semantic-color-background-primary: #ffffff;
+  --semantic-color-background-secondary: #f8d7be;
+  --semantic-color-background-tertiary: #f6e9dc;
+  --semantic-color-background-quaternary: #d89078;
+  --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-transparent: transparent;
-  --semantic-color-tone-success: #fdf888;
-  --semantic-color-tone-warning: #ff9f80;
-  --semantic-color-tone-error: #DB4141;
+  --semantic-color-tint-success: #fff799;
+  --semantic-color-tint-warning: #ff9f80;
+  --semantic-color-tint-error: #DB4141;
+  --semantic-color-tint-highlight: #fff799;
   --semantic-spacing-border-width-none: 0rem;
   --semantic-spacing-border-width-default: 0.1rem;
   --semantic-spacing-border-width-emphasis: 0.2rem;

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 26 Oct 2022 10:26:26 GMT
+// Generated on Wed, 16 Nov 2022 17:54:25 GMT
 
 $global-breakpoint-mobile: 0px;
 $global-breakpoint-tablet: 767px;

package/src/assets/global/typography.scss

@@ -187,21 +187,19 @@ label,
   Type colours
 --------------------- */
 html, body {
-  color: var(--semantic-color-text-body);
+  color: var(--semantic-color-primary-body);
 }
 
 .text-color--on-dark {
-  color: var(--semantic-color-text-body-on-dark)
+  color: var(--semantic-color-text-primary-on-dark)
 }
 
 .text-color--supporting {
-  // To be added when Colours updated in another Jira Ticket
-  // color: var(--semantic-color-text-body-on-dark)
+  color: var(--semantic-color-text-supporting)
 }
 
 .text-color--supporting-on-dark {
-  // To be added when Colours updated in another Jira Ticket
-  // color: var(--semantic-color-text-body-on-dark)
+  color: var(--semantic-color-text-supporting-on-dark)
 }
 
 

package/src/assets/global/variables.css

@@ -1,9 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Oct 2022 10:26:26 GMT
+ * Generated on Wed, 16 Nov 2022 17:54:25 GMT
  */
 
 :root {
+  --global-color-transparent: transparent;
   --global-color-white: #ffffff;
   --global-color-grey-10: #f7f7f7;
   --global-color-grey-20: #cdcdcd;
@@ -23,11 +24,12 @@
   --global-color-linen-grey-75: #4d4840;
   --global-color-yellow-50: #fdf888;
   --global-color-yellow-60: #fff799;
+  --global-color-yellow-80: #F8BB40;
   --global-color-linen-10: #fcf5ea;
   --global-color-linen-20: #f9ecd7;
   --global-color-linen-40: #e8b767;
   --global-color-linen-60: #b67b1b;
-  --global-color-linen-75: #734d11;
+  --global-color-linen-75: #534E46;
   --global-color-pine-10: #f0f6f4;
   --global-color-pine-20: #e2eee9;
   --global-color-pine-40: #8fc0ac;
@@ -42,6 +44,7 @@
   --global-color-red-50: #DB4141;
   --global-color-red-60: #C84116;
   --global-color-blue: #538FFC;
+  --global-color-green: #ADD685;
   --global-color-partners-facebook: #485b94;
   --global-color-partners-paypal: #ffc43a;
   --global-color-partners-trustpilot: #29b47c;

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();
+  }
+}