raffaele-abramini

export default class MainNav {
	static selectors = {
		main: '[data-js-main-nav]',
		trigger: '[data-main-nav-trigger]',
		content: '[data-main-nav-content]'
	};

	static classes = {
		isHidden: 'is-hidden',
	};

raffaele-abramini

import MainNav from './mainNav';

describe('With HTML elements missing', ()=> {
	test('It\'s initialised without errors', ()=>{
		// When the DOM doesn't contain the main element, we want this component to stop the construction
		// to avoid errors.
		document.body.innerHTML = '';
		new MainNav();
	});

raffaele-abramini

// Import EventEmitter and Output
import {Component, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  // Define the new output as an EventEmitter.
  // We are also defining some data to be pass to the event listeners (someData)

raffaele-abramini

<div>
    <app-my-component
        (myEvent)="myParentMethod($event)">
    </app-my-component>
</div>

raffaele-abramini

<div>
  <input
    name="myInput"
    id="myInput"
    #myInput>
  <button
    type="button"
    (onClick)="doSomething(myInput)">
      Label
  </button>

raffaele-abramini

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor() { }

raffaele-abramini

// Import ElementRef and ViewChild
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
  // Get the DOM element using the ref name from the template and define

raffaele-abramini

import * as React from 'react'
import * as Flex from '@twilio/flex-ui'

const Title = Flex.styled('h2')`
    color: ${p => p.theme.calculated.textColor};
    padding: ${p => p.first ? '0' : '12px'} 16px 8px;
    font-weight: bold;
`

const MultipleCheckboxGroups = ({ handleChange, currentValue, fieldName, options }) => {

raffaele-abramini

<mtTheme>
  <id>raffa-bluet</id>
  <editorColorsScheme>Raffa bluet</editorColorsScheme>
  <dark>true</dark>
  <name>Raffa bluet</name>
  <colors>
    <color id="background" value="13232aff"/>
    <color id="foreground" value="b0bec5ff"/>
    <color id="text" value="607d8bff"/>
    <color id="highlight" value="425b67ff"/>

raffaele-abramini

Coverage