geico-design-kit 7.0.0

package/src/components/ViewMoreLess.js

@@ -0,0 +1,193 @@
+import * as utils from '../../src/utils';
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+    {
+        setting: "content",
+        isRequired: true,
+        validate: "type",
+        possibleValues: ["string", "object"],
+        errorMessage: ["GDK ViewMoreLess : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting: "viewMoreLinkClicked",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["function"],
+        errorMessage: ["GDK ViewMoreLess : viewMoreLinkClicked must be defined and set function"]
+    },
+    {
+        setting: "collapsedTextValue",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["string"],
+        errorMessage: ["GDK ViewMoreLess : collapsedTextValue must be defined as a text string"]
+    },
+    {
+        setting: "expandedTextValue",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["string"],
+        errorMessage: ["GDK ViewMoreLess : expandedTextValue must be defined as a text string"]
+    }
+];
+
+/**
+ * View More/Less Class
+ */
+class ViewMoreLess {
+    /**
+     * 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 component node to toggle
+     *
+     * @param {function} [viewMoreLinkClicked]
+     * A callback function that gets fired when the View link is clicked
+     *
+     * @param {string} [collapsedTextValue="View More"]
+     *  A string representing the link text when collapsed
+     *
+     * @param {string} [expandedTextValue="View Less"]
+     * A string representing the link text when expanded
+     *
+     */
+    constructor(options) {
+
+        console.log('ViewMoreLess initialized');
+
+        this._internalVars = {
+            node: null //used for current node
+        };
+
+        //options with defaults set
+        this._defaults = {
+            collapsedTextValue : 'View More',
+            expandedTextValue : 'View Less'
+        };
+
+        // 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);
+            init.call(this);
+            setEvents.call(this);
+        }
+    }
+
+    //Public Methods
+
+    /**
+     * 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() {
+    this._internalVars.vmlLinkObject.addEventListener("click", this._internalVars.handler);
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    this._internalVars.vmlLinkObject.removeEventListener("click",this._internalVars.handler);
+}
+
+function init() {
+    this._internalVars.vmlTitleObject.innerHTML = this._internalVars.collapsedTextValue;
+}
+
+
+/**
+ * toggleView()
+ * instantiate View More/Less
+ */
+function toggleView(e) {
+    e.preventDefault();
+    this._internalVars.vmlIconObject.classList.toggle('view-less-link-icon');
+    this._internalVars.vmlObject.querySelector('.' + this._internalVars.vmlContentClass).classList.toggle('expanded');
+
+    if( this._internalVars.vmlContentObject.classList.contains('expanded') ) {
+       $(this._internalVars.vmlContentObject).slideDown();
+    } else {
+        $(this._internalVars.vmlContentObject).slideUp();
+    }
+
+     if (utils.hasClass(this._internalVars.vmlIconObject,'view-less-link-icon')) {
+        this._internalVars.vmlTitleObject.innerHTML = this._internalVars.expandedTextValue;
+         this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'true');
+         this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'false');
+         this._internalVars.vmlState = true;
+     }else{
+        this._internalVars.vmlTitleObject.innerHTML = this._internalVars.collapsedTextValue;
+         this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'false');
+         this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'true');
+         this._internalVars.vmlState = false;
+     }
+
+    if(this._options.viewMoreLinkClicked) {
+        this._options.viewMoreLinkClicked(this._internalVars.vmlState);
+    }
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+function setLocalVars() {
+    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.collapsedTextValue = this._options.collapsedTextValue;
+    this._internalVars.expandedTextValue = this._options.expandedTextValue;
+
+    this._internalVars.vmlLinkClass = 'view-more-less-link';
+    this._internalVars.vmlLinkTitle = 'view-more-link-title';
+    this._internalVars.vmlIconClass = 'view-more-link-icon';
+    this._internalVars.vmlContentClass = 'view-more-less-content';
+    this._internalVars.vmlObject = this._internalVars.node;
+    this._internalVars.vmlLinkObject = this._internalVars.node.querySelector('a.' + this._internalVars.vmlLinkClass);
+    this._internalVars.vmlTitleObject = this._internalVars.node.querySelector('span.' + this._internalVars.vmlLinkTitle);
+    this._internalVars.vmlIconObject = this._internalVars.node.querySelector('span.' + this._internalVars.vmlIconClass);
+    this._internalVars.vmlContentObject = this._internalVars.node.querySelector('div.' + this._internalVars.vmlContentClass);
+    this._internalVars.vmlState = false;
+
+    if(this._internalVars.vmlContentObject.classList.contains('expanded')){
+        this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'true');
+        this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'false');
+        this._internalVars.vmlState = true;
+    }else{
+        this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'false');
+        this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'true');
+        this._internalVars.vmlState = false;
+    }
+
+    this._internalVars.handler = toggleView.bind(this);
+}
+
+export default ViewMoreLess;

package/src/components/ZipCode.js

@@ -0,0 +1,193 @@
+import * as utils from '../../src/utils';
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+    {
+        setting: "content",
+        isRequired: true,
+        validate: "type",
+        possibleValues: ["string", "object"],
+        errorMessage: ["GDK ViewMoreLess : Content must be defined and set to a DOM selector or Node"]
+    },
+    {
+        setting: "viewMoreLinkClicked",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["function"],
+        errorMessage: ["GDK ViewMoreLess : viewMoreLinkClicked must be defined and set function"]
+    },
+    {
+        setting: "collapsedTextValue",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["string"],
+        errorMessage: ["GDK ViewMoreLess : collapsedTextValue must be defined as a text string"]
+    },
+    {
+        setting: "expandedTextValue",
+        isRequired: false,
+        validate: "type",
+        possibleValues: ["string"],
+        errorMessage: ["GDK ViewMoreLess : expandedTextValue must be defined as a text string"]
+    }
+];
+
+/**
+ * View More/Less Class
+ */
+class ViewMoreLess {
+    /**
+     * 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 component node to toggle
+     *
+     * @param {function} [viewMoreLinkClicked]
+     * A callback function that gets fired when the View link is clicked
+     *
+     * @param {string} [collapsedTextValue="View More"]
+     *  A string representing the link text when collapsed
+     *
+     * @param {string} [expandedTextValue="View Less"]
+     * A string representing the link text when expanded
+     *
+     */
+    constructor(options) {
+
+        console.log('ViewMoreLess initialized');
+
+        this._internalVars = {
+            node: null //used for current node
+        };
+
+        //options with defaults set
+        this._defaults = {
+            collapsedTextValue : 'View More',
+            expandedTextValue : 'View Less'
+        };
+
+        // 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);
+            init.call(this);
+            setEvents.call(this);
+        }
+    }
+
+    //Public Methods
+
+    /**
+     * 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() {
+    this._internalVars.vmlLinkObject.addEventListener("click", this._internalVars.handler);
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+    this._internalVars.vmlLinkObject.removeEventListener("click",this._internalVars.handler);
+}
+
+function init() {
+    this._internalVars.vmlTitleObject.innerHTML = this._internalVars.collapsedTextValue;
+}
+
+
+/**
+ * toggleView()
+ * instantiate View More/Less
+ */
+function toggleView(e) {
+    e.preventDefault();
+    this._internalVars.vmlIconObject.classList.toggle('view-less-link-icon');
+    this._internalVars.vmlObject.querySelector('.' + this._internalVars.vmlContentClass).classList.toggle('expanded');
+
+    if( this._internalVars.vmlContentObject.classList.contains('expanded') ) {
+       $(this._internalVars.vmlContentObject).slideDown();
+    } else {
+        $(this._internalVars.vmlContentObject).slideUp();
+    }
+
+     if (utils.hasClass(this._internalVars.vmlIconObject,'view-less-link-icon')) {
+        this._internalVars.vmlTitleObject.innerHTML = this._internalVars.expandedTextValue;
+         this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'true');
+         this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'false');
+         this._internalVars.vmlState = true;
+     }else{
+        this._internalVars.vmlTitleObject.innerHTML = this._internalVars.collapsedTextValue;
+         this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'false');
+         this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'true');
+         this._internalVars.vmlState = false;
+     }
+
+    if(this._options.viewMoreLinkClicked) {
+        this._options.viewMoreLinkClicked(this._internalVars.vmlState);
+    }
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+function setLocalVars() {
+    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.collapsedTextValue = this._options.collapsedTextValue;
+    this._internalVars.expandedTextValue = this._options.expandedTextValue;
+
+    this._internalVars.vmlLinkClass = 'view-more-less-link';
+    this._internalVars.vmlLinkTitle = 'view-more-link-title';
+    this._internalVars.vmlIconClass = 'view-more-link-icon';
+    this._internalVars.vmlContentClass = 'view-more-less-content';
+    this._internalVars.vmlObject = this._internalVars.node;
+    this._internalVars.vmlLinkObject = this._internalVars.node.querySelector('a.' + this._internalVars.vmlLinkClass);
+    this._internalVars.vmlTitleObject = this._internalVars.node.querySelector('span.' + this._internalVars.vmlLinkTitle);
+    this._internalVars.vmlIconObject = this._internalVars.node.querySelector('span.' + this._internalVars.vmlIconClass);
+    this._internalVars.vmlContentObject = this._internalVars.node.querySelector('div.' + this._internalVars.vmlContentClass);
+    this._internalVars.vmlState = false;
+
+    if(this._internalVars.vmlContentObject.classList.contains('expanded')){
+        this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'true');
+        this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'false');
+        this._internalVars.vmlState = true;
+    }else{
+        this._internalVars.vmlLinkObject.setAttribute('aria-expanded', 'false');
+        this._internalVars.vmlContentObject.setAttribute('aria-hidden', 'true');
+        this._internalVars.vmlState = false;
+    }
+
+    this._internalVars.handler = toggleView.bind(this);
+}
+
+export default ViewMoreLess;

package/src/components/portfolio.js

@@ -0,0 +1,106 @@
+import * as utils from '../../src/utils';
+import baseComponent from '../../src/baseComponent';
+
+const validateSettings = [
+    {
+        setting: "content",
+        isRequired: true,
+        validate: "type",
+        possibleValues: ["string", "object"],
+        errorMessage: ["GDK Portfolio : Content must be defined and set to a DOM selector or Node"]
+    }
+];
+
+class Portfolio {
+    constructor(options) {
+
+        console.log('Portfolio initialized');
+
+        this._internalVars = {
+            node: 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);
+            setContainerHeight.call(this);
+        }
+    }
+}
+
+// Private Methods
+/**
+ * setEvents()
+ * Sets all the events needed for the component
+ */
+function setEvents() {
+    window.onresize = setContainerHeight.bind(this);
+}
+
+
+/**
+ * removeEvents()
+ * removes all events from the component
+ */
+function removeEvents() {
+}
+
+
+/**
+ * setContainerHeight()
+ * set container height
+ */
+function setContainerHeight() {
+    if (window.innerWidth > 550) {
+        this._internalVars.portfolioLeft.removeAttribute('style');
+        this._internalVars.portfolioRight.removeAttribute('style');
+
+        let arrHeight = [];
+
+        let leftHeight = this._internalVars.portfolioLeft.clientHeight;
+        let rightHeight = this._internalVars.portfolioRight.clientHeight;
+
+        arrHeight.push(leftHeight, rightHeight);
+
+        let containerHeight = Math.max(...arrHeight);
+
+        this._internalVars.portfolioLeft.style.height = containerHeight + 'px';
+        this._internalVars.portfolioRight.style.height = containerHeight + 'px';
+    } else {
+        this._internalVars.portfolioLeft.removeAttribute('style');
+        this._internalVars.portfolioRight.removeAttribute('style');
+    }
+}
+
+/**
+ * setLocalVars()
+ * set local vars to the ones passed in options
+ */
+function setLocalVars() {
+    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.portfolioLeftClass = 'left-portfolio-container';
+    this._internalVars.portfolioRightClass = 'right-portfolio-container';
+    this._internalVars.portfolioObject = this._internalVars.node;
+    this._internalVars.portfolioLeft = this._internalVars.portfolioObject.querySelector('.' + this._internalVars.portfolioLeftClass);
+    this._internalVars.portfolioRight = this._internalVars.portfolioObject.querySelector('.' + this._internalVars.portfolioRightClass);
+}
+
+export default Portfolio;

package/src/geico-design-kit.js

@@ -0,0 +1,144 @@
+window.$ = window.jQuery = jQuery;
+
+let Chosen = require('chosen-js');
+
+require('../../sass-kit/geico-design-kit.scss');
+
+import appState from './appState';
+
+import * as nav from '../dist/global/nav';
+import * as footer from '../dist/global/footer';
+import * as components from '../dist/global/components';
+
+import jQuery from 'jquery';
+
+import Modal from '../dist/components/Modal';
+import Tooltip from '../dist/components/Tooltip';
+import Loader from '../dist/components/Loader';
+import ButtonSwitch from '../dist/components/ButtonSwitch';
+import TextareaCountdown from './components/TextareaCountdown';
+import AddressAutoComplete from '../dist/components/AddressAutoComplete';
+import DatePicker from '../dist/components/DatePicker';
+import Tabs from '../dist/components/Tabs';
+import SortableTable from '../dist/components/SortableTable';
+// import QuoteComparisonTable from './components/QuoteComparisonTable';
+import ViewMoreLess from '../dist/components/ViewMoreLess';
+import ToTopArrow from '../dist/components/ToTopArrow';
+import ValidateForm from '../dist/components/ValidateForm';
+import InPageNavigation from '../dist/components/InPageNavigation';
+import TimelineFilter from '../dist/components/TimelineFilter';
+import Timeline from '../dist/components/Timeline';
+import Accordion from '../dist/components/Accordion';
+import Alert from '../dist/components/Alert';
+import MoreInfoButton from '../dist/components/MoreInfoButton';
+import BackgroundPattern from '../dist/components/BackgroundPattern';
+import BackgroundPatternPortfolioPage from './components/BackgroundPatternPortfolioPage';
+import DotNavigation from '../dist/components/DotNavigation';
+import EditableTable from '../dist/components/EditableTable';
+import CoverageGraph from '../dist/components/CoverageGraph';
+import CommonQuestionsSquares from '../dist/components/CommonQuestionsSquares';
+import UpsellCarousel from '../dist/components/Upsell';
+import Portfolio from '../dist/components/portfolio';
+import PayPlans from '../dist/components/PayPlans';
+import ConsolidatedSummary from '../dist/components/ConsolidatedSummary';
+import EditComponent from '../dist/components/EditComponent';
+import DockedMessage from '../dist/components/DockedMessage';
+import SegmentedControl from '../dist/components/SegmentedControl';
+import MultipleSelectBox from '../dist/components/MultipleSelectBox';
+import CardSelections from '../dist/components/CardSelections';
+import TimeInput from './components/TimeInput';
+import NavigationalBox from '../dist/components/NavigationalBox';
+import PasswordMeter from '../dist/components/PasswordMeter';
+import CreditCard from '../dist/components/CreditCard';
+import CurrencyInput from '../dist/components/CurrencyInput';
+import MakePayment from '../dist/components/MakePayment';
+import Navigator from '../dist/components/Navigator';
+import VIN from '../dist/components/VIN';
+import ZipCode from "../dist/components/ZipCode";
+import Confirmation from "../dist/components/Confirmation";
+
+let GDK = GDK || {};
+
+function init() {
+    let pjson = require("../../../package");
+    let version = pjson.version;
+
+    let about = {
+        _comment: "This is a generated version.json file. Do not attempt to modify. Modify Version from package.json file.",
+        version: version
+    };
+
+	let ProtoGDK = {
+		about: about,
+		navigation : nav,
+		Modal : Modal,
+		Tooltip : Tooltip,
+		Loader : Loader,
+		ButtonSwitch : ButtonSwitch,
+		TextareaCountdown : TextareaCountdown,
+		DatePicker : DatePicker,
+		AddressAutoComplete	:	AddressAutoComplete,
+		Tabs : Tabs,
+		SortableTable : SortableTable,
+		// QuoteComparisonTable : QuoteComparisonTable,
+		ViewMoreLess : ViewMoreLess,
+		ValidateForm : ValidateForm,
+		InPageNavigation : InPageNavigation,
+		TimelineFilter : TimelineFilter,
+		Timeline : Timeline,
+		Accordion : Accordion,
+		ToTopArrow : ToTopArrow,
+		Alert: Alert,
+		MoreInfoButton: MoreInfoButton,
+		BackgroundPattern: BackgroundPattern,
+		BackgroundPatternPortfolioPage: BackgroundPatternPortfolioPage,
+		DotNavigation: DotNavigation,
+		EditableTable: EditableTable,
+		CoverageGraph: CoverageGraph,
+		CommonQuestionsSquares: CommonQuestionsSquares,
+		ConsolidatedSummary: ConsolidatedSummary,
+		UpsellCarousel: UpsellCarousel,
+		footer: footer,
+		PayPlans: PayPlans,
+		Chosen: Chosen,
+		MultipleSelectBox: MultipleSelectBox,
+		Portfolio: Portfolio, 
+		EditComponent: EditComponent,
+		DockedMessage: DockedMessage,
+		SegmentedControl: SegmentedControl,
+		CardSelections: CardSelections,
+		TimeInput: TimeInput,
+		NavigationalBox: NavigationalBox,
+		components: components,
+		PasswordMeter: PasswordMeter,
+		CurrencyInput: CurrencyInput,
+		CreditCard: CreditCard,
+		MakePayment: MakePayment,
+		Navigator: Navigator,
+    	VIN: VIN,
+		ZipCode: ZipCode,
+		Confirmation: Confirmation
+	};
+
+	for(var property in ProtoGDK) {
+		if(!GDK.hasOwnProperty(property)) {
+			GDK[property] = ProtoGDK[property];
+		}
+	}
+
+	window.addEventListener('resize', () => {
+		handleResize();
+	});
+
+	handleResize();
+
+}
+
+
+function handleResize() {
+	appState.windowSize = {width : window.innerWidth || document.documentElement.clientWidth, height : window.innerHeight || document.documentElement.clientHeight};
+}
+
+init();
+window.GDK = GDK;
+export { GDK };