geico-design-kit 7.0.0

package/src/components/ButtonSwitch.js

@@ -0,0 +1,241 @@
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK ButtonSwitch : Content must be defined and set to a DOM selector or Node"]
+    },
+     {
+        setting                 :   "initialActiveSide",
+        isRequired              :   false,
+        validate                :   "value",
+        possibleValues          :   ["left","right"],
+        errorMessage            :   ["GDK ButtonSwitch : initialActiveSide must be set to left or right"]
+    },
+    {
+        setting                 :   "leftSideClicked",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["function"],
+        errorMessage            :   ["GDK ButtonSwitch : leftSideClicked must be a function"]
+    },
+     {
+        setting                 :   "rightSideClicked",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["function"],
+        errorMessage            :   ["GDK ButtonSwitch : rightSideClicked must be a function"]
+    }
+];
+
+class ButtonSwitch{
+    /**
+     * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+     * @param {string|Object} content
+     * A reference to the button node to switch
+     *
+     * @param {string} [initialActiveSide="left"]
+     * Used to designate which side of the button is initially active. Options: "left" || "right"
+     *
+     * @param {function} [leftSideClicked]
+     * A callback function that gets fired when the left side of the button is clicked
+     *
+     * @param {function} [rightSideClicked]
+     * A callback function that gets fired when the left side of the button is clicked
+     */
+
+    constructor(options) {
+
+       this._internalVars = {
+            node: null,//used for content item
+            left: null,//clickable node on the left side of the button
+            right: null,//clickable node on the right side of the button
+            sideOptions: ["left","right"],
+            side: null
+        };
+
+        //options with defaults set
+        this._defaults = {
+            initialActiveSide: this._internalVars.sideOptions[0]
+        };
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            setEvents.call(this);
+            if(!this._internalVars.node.getAttribute('tabindex'))
+            this._internalVars.node.setAttribute('tabindex', '0');
+
+            this._internalVars.node.setAttribute('role', 'checkbox');
+        }
+    }
+
+    //Public Methods
+    /**
+     * currentSide()
+     * returns the side the switch button is currently on
+     * @returns {string} "left" | "right"
+     */
+    currentSide() {
+        return this._internalVars.side;
+    }
+
+    /**
+     * slideLeft()
+     * invokes a click on the left side of the switch button
+     */
+    slideLeft(){
+        if( this._internalVars.node.classList.contains("button-switch--slide-right")){
+            this._internalVars.node.classList.remove("button-switch--slide-right");
+            switchLeft.call(this);
+        }
+        else if(this._internalVars.node.classList.contains("button-switch--start-right")&&!this._internalVars.node.classList.contains("button-switch--slide-right")&&!this._internalVars.node.classList.contains("button-switch--slide-left")){
+            switchLeft.call(this);
+        }
+    }
+
+    /**
+     * slideRight()
+     * invokes a click on the right side of the switch button
+     */
+    slideRight(){
+        if(this._internalVars.node.classList.contains("button-switch--slide-left")){
+            this._internalVars.node.classList.remove("button-switch--slide-left");
+            switchRight.call(this);
+        }
+        else if(this._internalVars.node.classList.contains("button-switch--start-left")&&!this._internalVars.node.classList.contains("button-switch--slide-right")&&!this._internalVars.node.classList.contains("button-switch--slide-left")){
+            switchRight.call(this);
+        }
+    }
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+    destroy(){
+        removeEvents.call(this);
+		this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+		//a little garbage collection
+		for (var variableKey in this){
+			if (this.hasOwnProperty(variableKey)){
+				delete this[variableKey];
+			}
+		}
+    }
+
+}
+
+// Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    this._internalVars.node.addEventListener(eventName, this._internalVars.handler);
+    this._internalVars.node.addEventListener("keyup", this._internalVars.handler);
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    this._internalVars.node.removeEventListener(eventName, this._internalVars.handler);
+}
+
+/**
+ * switchClick()
+ * if you click on button it will switch
+ */
+function switchClick(e){
+    if(e.type == 'keypress' || e.type == 'keyup' && ((e.keyCode || e.which) != 13)){
+        return;
+    }
+
+    if(this._internalVars.node.classList.contains('disabled')){
+        return;
+    }
+    if( this._internalVars.node.classList.contains("button-switch--slide-right")){
+        this._internalVars.node.classList.remove("button-switch--slide-right");
+        switchLeft.call(this);
+    }
+    else if(this._internalVars.node.classList.contains("button-switch--slide-left")){
+        this._internalVars.node.classList.remove("button-switch--slide-left");
+        switchRight.call(this);
+    }
+
+    if(this._internalVars.node.classList.contains("button-switch--start-left")&&!this._internalVars.node.classList.contains("button-switch--slide-right")&&!this._internalVars.node.classList.contains("button-switch--slide-left")){
+        switchRight.call(this);
+    }
+    else if(this._internalVars.node.classList.contains("button-switch--start-right")&&!this._internalVars.node.classList.contains("button-switch--slide-right")&&!this._internalVars.node.classList.contains("button-switch--slide-left")){
+        switchLeft.call(this);
+    }
+}
+
+function switchLeft(){
+    this._internalVars.node.classList.add("button-switch--slide-left");
+    this._internalVars.side = this._internalVars.sideOptions[0];
+    this._internalVars.node.setAttribute('aria-checked', 'false');
+    if(this._options.leftSideClicked)
+        this._options.leftSideClicked();
+}
+
+function switchRight(){
+    this._internalVars.node.classList.add("button-switch--slide-right");
+    this._internalVars.side = this._internalVars.sideOptions[1];
+    this._internalVars.node.setAttribute('aria-checked', 'true');
+    if(this._options.rightSideClicked)
+        this._options.rightSideClicked();
+}
+
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+    //determine the type of content passed in
+    if(this._internalVars.contentType === 'string'){
+        this._internalVars.node = document.querySelector(this._options.content);
+    }else if(this._internalVars.contentType === 'domNode'){
+        this._internalVars.node = this._options.content;
+    }
+
+    //get the child spans to add click events too
+    let spans = this._internalVars.node.querySelectorAll("span");
+    this._internalVars.left = spans[0];
+    this._internalVars.right = spans[1];
+
+    //init the current side and add the class
+    this._internalVars.side = this._options.initialActiveSide.toLowerCase();
+    //check for right else use the default left
+    if(this._internalVars.side === this._internalVars.sideOptions[1]) {
+        this._internalVars.node.classList.add("button-switch--start-right");
+        this._internalVars.node.setAttribute('aria-checked', 'true');
+    }
+    else {
+        this._internalVars.node.classList.add("button-switch--start-left");
+        this._internalVars.node.setAttribute('aria-checked', 'false');
+    }
+
+    this._internalVars.handler = switchClick.bind(this);
+}
+
+
+export default ButtonSwitch;

package/src/components/CardSelections.js

@@ -0,0 +1,240 @@
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK CardSelections : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting                 :   "initialActiveCard",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["number"],
+        errorMessage            :   ["GDK CardSelections : initialActiveCard must be set to a number"]
+    },
+    {
+        setting                 :   "cardSelectionSet",
+        isRequired              :   false,
+        validate                :   "type",
+        possibleValues          :   ["function"],
+        errorMessage            :   ["GDK CardSelections : cardSelectionClick must be a function"]
+    }
+];
+
+class CardSelections{
+
+    /**
+     * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+     * @param {string|Object} content
+     *  A reference to the html More Background Pattern node
+     *
+     *  @param {number} [initialActiveCard=1]
+     *  The number of the item to set as the active card on initialization. Must be greater than 0 and equal to or less than the number of cards.
+     *
+     *  @param {function} [cardSelectionSet]
+     *   A callback function that is triggered when any card is set to active.
+     */
+    constructor(options) {
+
+        this._internalVars = {
+            node: null//used for content item
+        };
+
+        //options with defaults set
+        this._defaults = {
+            initialActiveCard: 1
+        };
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            setEvents.call(this);
+            init.call(this);
+
+            this._internalVars.cardSelectionSection.setAttribute('role', 'radiogroup');
+
+            Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, (element)=> {
+                if(!element.getAttribute('tabindex'))
+                    element.setAttribute('tabindex', '0');
+
+                if(!element.getElementsByTagName('input')[0].getAttribute('tabindex'))
+                    element.getElementsByTagName('input')[0].setAttribute('tabindex', '-1');
+
+                element.setAttribute('role', 'radio');
+            });
+        }
+    }
+
+    //Public Methods
+
+    /**
+     * Returns the active selected card
+     * @return {Element}
+     */
+    currentActiveCard() {
+        return this._internalVars.selectedCard;
+    }
+
+    /**
+     * sets the initial active card using an index parameter
+     * @param {Number} index Number indicating what the active card should be set to
+     */
+    setActiveCard(index){
+        setInitialActiveCard.call(this, index);
+    }
+
+    /**
+     * removes the node from the dom and any events attached
+     */
+    destroy(){
+        removeEvents.call(this);
+        this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+        //a little garbage collection
+        for (var variableKey in this){
+            if (this.hasOwnProperty(variableKey)){
+                delete this[variableKey];
+            }
+        }
+    }
+
+}
+
+// Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+    let eventName = "click";
+
+    Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, (element)=> {
+        element.addEventListener(eventName, this._internalVars.handler);
+        element.addEventListener('keyup', this._internalVars.handler);
+    });
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    let eventName = "click";
+
+    Array.prototype.forEach.call(this._internalVars.cardSelectionsCards, (element)=> {
+        element.removeEventListener(eventName, this._internalVars.handler);
+        element.removeEventListener('keyup', this._internalVars.handler);
+    });
+}
+
+/**
+ * init()
+ * Sets the initial values
+ */
+function init() {
+    let index = null;
+
+    if (this._options.initialActiveCard) {
+        index = this._options.initialActiveCard;
+    } else {
+       index = this._defaults.initialActiveCard;
+    }
+
+    setInitialActiveCard.call(this, index);
+}
+
+/**
+ * Removes the class and attributes identifying the card as selected
+ */
+function resetSelected() {
+    let selected = this._internalVars.cardSelectionsObject.querySelectorAll('.' + this._internalVars.cardSelectedClass);
+
+    if (selected) {
+        Array.prototype.forEach.call(selected, (el) => {
+            el.classList.remove(this._internalVars.cardSelectedClass);
+            el.getElementsByTagName('input')[0].checked = false;
+            el.setAttribute('aria-checked', 'false');
+        });
+    }
+}
+
+/**
+ * Adds attributes identifying the card as selected
+ */
+function setActiveCardAttributes() {
+    this._internalVars.selectedCard = this._internalVars.cardSelectionsObject.querySelector('.' + this._internalVars.cardSelectedClass);
+
+    this._internalVars.selectedCard.getElementsByTagName('input')[0].checked = true;
+    this._internalVars.selectedCard.setAttribute('aria-checked', 'true');
+
+    if (this._options.cardSelectionSet) {
+        this._options.cardSelectionSet(this._internalVars.selectedCard);
+    }
+}
+
+/**
+ * setInitialActiveCard()
+ * Sets the initial active card
+ */
+function setInitialActiveCard(index){
+    resetSelected.call(this);
+
+    if (index <= this._internalVars.cardSelectionsCards.length && index > 0) {
+        this._internalVars.cardSelectionsCards[index-1].classList.add(this._internalVars.cardSelectedClass);
+    } else {
+        this._internalVars.cardSelectionsCards[0].classList.add(this._internalVars.cardSelectedClass);
+    }
+
+    setActiveCardAttributes.call(this);
+}
+
+/**
+ * setActiveCard()
+ * Sets the active card
+ */
+function setActiveCard(event){
+    if(event.type == 'keypress' || event.type == 'keyup' && ((event.keyCode || event.which) != 13)){} else {
+        resetSelected.call(this);
+
+        event.currentTarget.classList.add(this._internalVars.cardSelectedClass);
+
+        setActiveCardAttributes.call(this);
+    }
+}
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+    //determine the type of content passed in
+    if(this._internalVars.contentType === 'string'){
+        this._internalVars.node = document.querySelector(this._options.content);
+    }else if(this._internalVars.contentType === 'domNode'){
+        this._internalVars.node = this._options.content;
+    }
+
+    this._internalVars.cardSelectionsObject = this._internalVars.node;
+
+    this._internalVars.cardSelectionSectionClass = 'card-selections';
+    this._internalVars.cardSelectedClass = 'card-selections-selected';
+    this._internalVars.cardSelectionsCardClass = 'card-selections-card';
+    this._internalVars.selectedCard = null;
+
+    this._internalVars.cardSelectionSection = this._internalVars.cardSelectionsObject.querySelector('.' + this._internalVars.cardSelectionSectionClass);
+    this._internalVars.cardSelectionsCards = this._internalVars.cardSelectionsObject.querySelectorAll('.' + this._internalVars.cardSelectionsCardClass);
+
+    this._internalVars.handler = setActiveCard.bind(this);
+}
+
+export default CardSelections;

package/src/components/CommonQuestionsSquares.js

@@ -0,0 +1,179 @@
+import appState from '../../src/appState';
+
+import baseComponent from '../../src/baseComponent';
+import UserAgentService from '../../src/services/UserAgentService';
+
+const validateSettings = [
+    {
+        setting                 :   "content",
+        isRequired              :   true,
+        validate                :   "type",
+        possibleValues          :   ["string","object"],
+        errorMessage            :   ["GDK CommonQuestionsSquares : Content must be defined and set to a DOM selector or Node"]
+    }
+];
+
+class CommonQuestionsSquares{
+    /**
+     * These are settings for the instantiation. Refer to the design kit section of this component for JS setting examples.
+     * @param {string|Object} content
+     *  A reference to the common questions squares node
+     */
+    constructor(options) {
+
+        this._internalVars = {
+            node: null,//used for content item
+            individualBoxes: null
+        };
+
+        //options with defaults set
+        this._defaults = {
+
+        };
+
+        // Create options by extending defaults with the passed in arugments
+        if (options && typeof options === "object") {
+            this._options = baseComponent.extendDefaults(this._defaults, options);
+        }
+
+        //if the required options are valid set up the environment
+        if( baseComponent.validateSettings(this._options, validateSettings) ){
+            this._internalVars.contentType = baseComponent.getContentType(this);
+            setLocalVars.call(this);
+            setEvents.call(this);
+
+            let allSquares = this._internalVars.node.querySelectorAll('.square');
+            Array.prototype.forEach.call(allSquares, function(el, i){
+                if(!el.classList.contains('square-link'))
+                el.setAttribute('tabindex', '0');
+            });
+        }
+    }
+
+    //Public Methods
+
+    /**
+     * destroy()
+     * removes the node from the dom and any events attached
+     */
+    destroy(){
+        removeEvents.call(this);
+        this._internalVars.node.parentNode.removeChild(this._internalVars.node);
+
+        //a little garbage collection
+        for (var variableKey in this){
+            if (this.hasOwnProperty(variableKey)){
+                delete this[variableKey];
+            }
+        }
+    }
+
+}
+
+// Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    console.log( this._internalVars.individualBoxes);
+
+    for (var j = 0; j < this._internalVars.individualBoxes.length - 1; j++) {
+        this._internalVars.individualBoxes[j].addEventListener('mouseover', removeStyleAttr.bind(this, this._internalVars.individualBoxes[j]));
+        this._internalVars.individualBoxes[j].addEventListener(eventName, openPanel.bind(this, this._internalVars.individualBoxes[j]));
+    }
+
+    for(var h = 0; h < this._internalVars.node.querySelectorAll('a').length; h++ ){
+       this._internalVars.anchorArray[h].addEventListener('focus', linkFocus.bind(this, this._internalVars.anchorArray[h]));
+       this._internalVars.anchorArray[h].addEventListener('blur', linkUnfocus.bind(this, this._internalVars.anchorArray[h]));
+    }
+}
+
+function linkFocus(e){
+    var squareParent = e.parentNode.parentNode;
+    squareParent.classList.add('flip-back');
+    squareParent.previousElementSibling.classList.add('flip-front');
+}
+
+function linkUnfocus(e){
+    var squareParent = e.parentNode.parentNode;
+    squareParent.classList.remove('flip-back');
+    squareParent.previousElementSibling.classList.remove('flip-front');
+}
+
+function removeStyleAttr(e){
+    if(appState.mode !== "mobile") {
+        var el = e.querySelector('.back');
+        el.removeAttribute('style');
+    }
+}
+
+
+function openPanel(e){
+    var el = e.querySelector('.back');
+    if(appState.mode === "mobile"){
+        e.classList.toggle('open');
+        if(e.classList.contains('open')){
+            el.style.display = "block";
+            let paragraph = el.querySelector("p");
+            el.style.maxHeight = outerHeight.call(this,paragraph) + "px";
+        }else{
+            el.removeAttribute('style');
+            el.style.display = "block";
+            el.style.maxHeight="0px";
+        }
+    }else{
+        el.removeAttribute('style');
+    }
+}
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    const eventName = UserAgentService._clickEventName();
+
+    for (var j = 0; j < this._internalVars.individualBoxes.length - 1; j++) {
+        this._internalVars.individualBoxes[j].removeEventListener('mouseover', removeStyleAttr.bind(this, this._internalVars.individualBoxes[j]));
+        this._internalVars.individualBoxes[j].removeEventListener(eventName, openPanel.bind(this, this._internalVars.individualBoxes[j]));
+    }
+
+
+}
+
+
+/**
+ * setLocalVars()
+ * set all the local vars to passed in options
+ */
+function setLocalVars() {
+    //determine the type of content passed in
+    if(this._internalVars.contentType === 'string'){
+        this._internalVars.node = document.querySelector(this._options.content);
+    }else if(this._internalVars.contentType === 'domNode'){
+        this._internalVars.node = this._options.content;
+    }
+
+    this._internalVars.individualBoxes = this._internalVars.node.children;
+    this._internalVars.anchorArray = this._internalVars.node.querySelectorAll('a');
+}
+
+/**
+ * outerHeight()
+ * used to get the height of an element that is the same across all browsers
+ *
+ * @param  {Object} node    DOM node
+ * @return {number}
+ */
+function outerHeight(el) {
+    let height = el.offsetHeight;
+    let style = getComputedStyle(el);
+
+    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+    return height;
+}
+
+export default CommonQuestionsSquares;