oasys-lib 1.1.4 → 1.2.0

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

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

@@ -0,0 +1,50 @@
+import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy, OnChanges, ElementRef } from '@angular/core';
+import { TokenService } from '../../services/token.service';
+import { WindowService } from '../../services/window.service';
+import { IconNames, IconContext } from './icon';
+
+@Component({
+  selector:'ui-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class IconComponent implements OnInit, OnChanges {
+  @Input() iconSize: 'small'|'large' = 'large';
+  @Input() iconName!: IconNames;
+  @Input() iconContext: IconContext = 'none';
+
+  @Input() iconWidth?: number;
+  @Input() iconHeight?: number;
+  @Input() iconClass?: string;
+
+  size?: string;
+  iconBrandPath?: string;
+  iconDisplayClasses: string[];
+
+  constructor(private tokenService: TokenService, private windowRef: WindowService, private elementRef: ElementRef) { }
+
+  convertRemToPixels(remString: string): number {
+    const remNumber = parseFloat(remString.replace('rem', ''));
+    return remNumber * parseFloat(getComputedStyle(this.windowRef.nativeWindow.document.documentElement).fontSize);
+  }
+
+  ngOnChanges(): void {
+    this.ngOnInit();
+  }
+
+  ngOnInit(): void {
+    this.iconBrandPath = `${this.tokenService.getBrandName()}`
+    this.size = this.tokenService.getTokenValue(`--global-size-icon-${this.iconSize}`);
+
+    this.iconDisplayClasses = [
+      `icon-context-${this.iconContext}`,
+      `icon-size-${this.iconSize}`
+    ];
+
+    const sizeInPixels = this.convertRemToPixels(this.size);
+    this.iconWidth = sizeInPixels;
+    this.iconHeight = sizeInPixels;
+  }
+
+}

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

@@ -0,0 +1,25 @@
+export type IconNames =
+  | 'close'
+  | 'menu'
+  | 'tick'
+  | 'heart'
+  | 'heart-fill'
+  | 'basket'
+  | 'basket-fill'
+  | 'user'
+  | 'user-fill'
+  | 'chevron-up'
+  | 'chevron-down'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'arrow-up'
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'sort'
+  | 'filter'
+  | 'pin';
+
+
+
+export type IconContext = 'leading' | 'trailing' | 'iconOnly' | 'none';

package/src/lib/components/layout/Layout.ts

@@ -0,0 +1,64 @@
+// Most common size options
+type LayoutBaseSizes =
+| 'none'
+| 'tight'
+| 'near'
+| 'default'
+| 'expanded'
+| undefined;
+
+interface LayoutDeviceTypes {
+  'mobile'?: string | undefined
+  'tablet'?: string | undefined
+  'desktop'?: string | undefined
+}
+
+interface LayoutDeviceColumns {
+  'mobile'?: number | undefined
+  'tablet'?: number | undefined
+  'desktop'?: number | undefined
+}
+
+type ResponsiveLayoutBaseSizes = LayoutBaseSizes | LayoutDeviceTypes;
+
+export type ResponsiveGridColumns = number | LayoutDeviceColumns;
+
+export type LayoutBoxSizes = ResponsiveLayoutBaseSizes;
+export type LayoutGapSizes = LayoutBaseSizes;
+
+export type LayoutFillModes =
+| 'fit'
+| 'fill';
+
+export type LayoutAlignment =
+| 'start'
+| 'center'
+| 'end'
+| undefined;
+
+export type LayoutDistribute =
+| LayoutFillModes
+| LayoutAlignment
+| 'space-between'
+| 'space-around'
+| 'space-evenly'
+| undefined;
+
+export type LayoutBackgrounds =
+| 'transparent'
+| 'primary'
+| 'secondary'
+| 'tertiary'
+| 'quaternary'
+| undefined;
+
+export type LayoutDirections =
+| 'x'
+| 'y'
+| undefined;
+
+export interface LayoutContainerSizes {
+  'mobile'?: string | undefined
+  'tablet'?: string | undefined
+  'desktop'?: string | undefined
+}

package/src/lib/components/layout/_layout.scss

@@ -0,0 +1,105 @@
+
+$layoutAlignmentAxis: 'align-x', 'align-y';
+$advancedLayoutAlignment: 'space-around', 'space-between', 'space-evenly';
+$layoutGapSizes: 'none', 'tight', 'near', 'default', 'expanded', 'section';
+
+
+$layoutAlignTypes: (
+  "start": flex-start,
+  "center": center,
+  "end": flex-end,
+);
+
+$layoutDistributeTypes: (
+  "fill": unset,
+  "start": flex-start,
+  "center": center,
+  "end": flex-end,
+  "space-between": space-between,
+  "space-around": space-around,
+  "space-evenly": space-evenly
+);
+
+@mixin layoutAlignmentClasses($direction: 'y'){
+
+  // Vertical Stacks
+
+  // Can be aligned:
+  // - 'start'  (left in countries that read LTR)
+  // - 'center'
+  // - 'end' (right in countries that read LTR)
+
+  @if $direction == 'y' {
+
+    // align
+    @each $inputName, $cssName in $layoutAlignTypes {
+      &-align-#{$inputName} {
+        align-items: $cssName;
+        align-content: $cssName;
+      }
+    }
+
+    // Distribute
+    @each $inputName, $cssName in $layoutDistributeTypes {
+
+      &-distribute-#{$inputName} {
+        justify-content: $cssName;
+        height: 100%;
+      }
+
+    }
+  }
+
+  // Horizontal Stacks
+
+  // Can be aligned:
+  // - 'start'  (top)
+  // - 'center'
+  // - 'end' (bottom)
+
+  // Can be distributed/spaced
+  // - 'stack' (none)
+  // - 'around'
+  // - 'between'
+  // - 'equally'
+
+  @if $direction == 'x' {
+
+    // Align
+    @each $inputName, $cssName in $layoutAlignTypes {
+
+      &-align-#{$inputName} {
+        justify-content: $cssName;
+      }
+
+      &-align-x-#{$inputName} {
+        align-items: $cssName;
+        align-content: $cssName;
+      }
+
+    }
+
+    // Distribute
+    @each $inputName, $cssName in $layoutDistributeTypes {
+
+      &-distribute-#{$inputName} {
+        justify-content: $cssName;
+      }
+
+    }
+
+  }
+
+}
+
+
+@mixin layoutGapSizes() {
+  @each $layoutGap in $layoutGapSizes {
+
+    &-#{$layoutGap} {
+      gap: var(--semantic-spacing-stack-#{$layoutGap});
+    }
+
+  }
+}
+

package/src/lib/components/layout/box/box.component.scss

@@ -0,0 +1,124 @@
+@use './../layout';
+@import './../../../../assets/global/responsive.scss';
+
+
+$layoutBoxSizes: 'none', 'tight', 'near', 'default', 'expanded', 'section-inset';
+$layoutDevices: 'mobile', 'tablet', 'laptop', 'desktop';
+$layoutOverrides: 'top', 'right', 'bottom', 'left';
+$layoutBackgrounds: 'transparent', 'primary', 'secondary', 'tertiary', 'quaternary';
+
+
+/* ---------------------
+  Simple Side Overrides
+
+  Simple override of any side of the box
+  ie. boxSpaceTop="none"
+  ie. boxSpaceTop="tight"
+--------------------- */
+
+@mixin layoutBoxOverrideClasses($layoutBoxSize) {
+  @each $override in $layoutOverrides {
+    &-#{$override} {
+
+      @if $override == 'top' {
+        padding-top: var(--semantic-spacing-box-#{$layoutBoxSize}) !important;
+      }
+      @if $override == 'right' {
+        padding-right: var(--semantic-spacing-box-#{$layoutBoxSize}) !important;
+      }
+      @if $override == 'bottom' {
+        padding-bottom: var(--semantic-spacing-box-#{$layoutBoxSize}) !important;
+      }
+      @if $override == 'left' {
+        padding-left: var(--semantic-spacing-box-#{$layoutBoxSize}) !important;
+      }
+    }
+  }
+}
+
+/* ---------------------
+  Responsive Side Overrides
+
+  Responsive override of any side of the box
+  ie. [boxSpaceTop]="{mobile: 'tight', tablet: 'Near', laptop: 'default', desktop: 'expanded'}"
+--------------------- */
+
+
+@mixin layoutBoxResponsiveDevices($layoutBoxSize) {
+  @each $device in $layoutDevices {
+    &-#{$device} {
+      @if $device== 'mobile' {
+        @include mobile() {
+          padding: var(--semantic-spacing-box-#{$layoutBoxSize});
+          @include layoutBoxOverrideClasses($layoutBoxSize)
+        }
+      }
+      @if $device== 'tablet' {
+        @include tablet() {
+          padding: var(--semantic-spacing-box-#{$layoutBoxSize});
+          @include layoutBoxOverrideClasses($layoutBoxSize)
+        }
+      }
+      @if $device== 'laptop' {
+        @include laptop() {
+          padding: var(--semantic-spacing-box-#{$layoutBoxSize});
+          @include layoutBoxOverrideClasses($layoutBoxSize)
+        }
+      }
+      @if $device== 'desktop' {
+        @include desktop() {
+          padding: var(--semantic-spacing-box-#{$layoutBoxSize});
+          @include layoutBoxOverrideClasses($layoutBoxSize)
+        }
+      }
+    }
+  }
+}
+
+/* ---------------------
+  Generate all size options including overrides
+--------------------- */
+@mixin layoutBoxSizes() {
+
+  @each $layoutBoxSize in $layoutBoxSizes {
+    &-#{$layoutBoxSize} {
+      padding: var(--semantic-spacing-box-#{$layoutBoxSize});
+      @include layoutBoxResponsiveDevices($layoutBoxSize);
+      @include layoutBoxOverrideClasses($layoutBoxSize)
+    }
+  }
+
+}
+
+/* ---------------------
+  Box Background Colors
+--------------------- */
+
+@mixin layoutBackgrounds() {
+  @each $background in $layoutBackgrounds {
+    &-background-#{$background} {
+      background-color: var(--semantic-color-background-#{$background});
+    }
+  }
+
+}
+
+ui-box {
+  display: flex;
+  justify-self: stretch;
+  flex-direction: column;
+
+  &.ui-layout-box {
+    @include layoutBoxSizes();
+    @include layoutBackgrounds();
+    @include layout.layoutAlignmentClasses('x');
+
+    &-fit-content {
+      width: fit-content;
+    }
+    &-fill-container {
+      width: 100%;
+    }
+  }
+
+}

package/src/lib/components/layout/box/box.component.ts

@@ -0,0 +1,103 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
+import { Input } from '@angular/core';
+import { Component} from '@angular/core';
+import { LayoutAlignment, LayoutBackgrounds, LayoutBoxSizes, LayoutFillModes } from '../Layout';
+
+@Component({
+  selector:'ui-box',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[class]' : 'boxLayoutClasses'
+  },
+  styleUrls: ['./box.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class LayoutBoxComponent implements OnInit, OnChanges {
+  didFirstInit: boolean = false;
+  prefix = 'ui-layout-box';
+  boxLayoutClasses?: string[];
+
+  @Input() boxSpace?: LayoutBoxSizes = 'default';
+
+  @Input() boxSpaceTop?: LayoutBoxSizes;
+  @Input() boxSpaceRight?: LayoutBoxSizes;
+  @Input() boxSpaceBottom?: LayoutBoxSizes;
+  @Input() boxSpaceLeft?: LayoutBoxSizes;
+
+  @Input() boxAlignX?: LayoutAlignment = 'start';
+  @Input() boxAlignY?: LayoutAlignment = 'start';
+
+  @Input() boxFillMode?: LayoutFillModes = 'fill';
+
+  @Input() boxBackground: LayoutBackgrounds = 'primary';
+
+  constructor(private changes: ChangeDetectorRef) { }
+
+  getSizeClasses(spaceInput?: LayoutBoxSizes, overrideName?: string): string[] {
+    if(!spaceInput || spaceInput === undefined){
+      return null;
+    }
+
+    if(typeof spaceInput === 'object'){
+
+      return Object.keys(spaceInput).map((key) => {
+        return `${this.prefix}-${spaceInput[key]}-${key}${overrideName ? `-${overrideName}` : ``}`
+      });
+
+    }
+
+    return [
+      this.prefix,
+      `${this.prefix}-${spaceInput}${overrideName ? `-${overrideName}` : ``}`
+    ];
+
+  }
+
+  getOverrideClasses(spaceOverrides): string[] {
+    const spaceTypes = ['top', 'right', 'bottom', 'left'];
+
+    return spaceOverrides.map((item, index) => {
+      return this.getSizeClasses(item, spaceTypes[index]);
+    }).filter(Boolean);
+  }
+
+  getAlignmentClasses(alignmentOverride): string[] {
+    const spaceTypes = ['align-x', 'align-y'];
+
+    return alignmentOverride.map((item, index) => {
+      return item ? `${this.prefix}-${spaceTypes[index]}-${item}` : undefined;
+    }).filter(Boolean);
+  }
+
+  getBackgroundClass(): string {
+    const value = this.boxBackground ? `${this.prefix}-background-${this.boxBackground}` : ``;
+    return value;
+  }
+
+  ngOnChanges(): void {
+    if(!this.didFirstInit){
+      return;
+    }
+    this.ngOnInit();
+    this.changes.markForCheck();
+  }
+
+  ngOnInit(): void {
+    const spaceOverrides = [this.boxSpaceTop, this.boxSpaceRight, this.boxSpaceBottom, this.boxSpaceLeft];
+    const alignmentOverride = [this.boxAlignX, this.boxAlignY];
+
+    // Basic basic classes
+    this.boxLayoutClasses = [
+      this.getSizeClasses(this.boxSpace),
+      this.getOverrideClasses(spaceOverrides),
+      this.getAlignmentClasses(alignmentOverride),
+      this.getBackgroundClass(),
+      this.boxFillMode === 'fit' ? `${this.prefix}-fit-content` : `${this.prefix}-fill-container`
+    ].flat(10).filter(Boolean);
+
+    this.didFirstInit = true;
+  }
+
+}
+