generator-white-label 3.0.0 → 5.0.0

package/app/assets/script/utility/string.ts

@@ -0,0 +1,148 @@
+/** @module app/assets/script/utility/string */
+const parser = new DOMParser();
+
+const integerFormatter = new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: 0
+});
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    style: 'currency'
+});
+
+/**
+ * Format a numeric date component with at least two digits.
+ * @param number - Numeric value to inspect or format.
+ * @returns A string containing at least two digits.
+ */
+function pad(number: number) {
+    return String(number).padStart(2, '0');
+}
+
+/**
+ * Format a valid date using local calendar components, or return null for invalid input.
+ * @param value - Value to find or format.
+ * @returns YYYY-MM-DD in local time, or null for invalid input.
+ */
+function dateParts(value: string | number | Date) {
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return null;
+    }
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+'use strict';
+
+    export default class {
+
+        //turn a string of html tags into a dom object
+        /**
+         * Parse trusted HTML and clone its first root node; reject empty markup.
+         * @param string - Trusted HTML containing at least one root node.
+         * @returns A clone of the first parsed root node.
+         * @throws When input does not satisfy the documented contract.
+         */
+        toElement(string: string) {
+            const element = parser.parseFromString(string, 'text/html').body.firstChild;
+            if (!element) throw new TypeError('HTML must contain a root node');
+            return element.cloneNode(true);
+        }
+
+        //qet data from url query string
+        /**
+         * Read and decode a query value, returning null when absent and an empty string when valueless.
+         * @param name - Resource, field, or parameter name.
+         * @param url - URL or optional adapter argument.
+         * @returns The decoded value, an empty string, or null when absent.
+         */
+        getQueryStringParamater(name: string, url: string) {
+            name = name.replace(/[[\]]/g, '\\$&');
+            let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+            let results = regex.exec(url);
+            if (!results) {
+                return null;
+            }
+            if (!results[2]) {
+                return '';
+            }
+            return decodeURIComponent(results[2].replace(/\+/g, ' '));
+        }
+
+        // 2014-11-10
+        /**
+         * Format a local calendar date as YYYY-MM-DD or return Invalid date.
+         * @param unformattedDate - Date input to format.
+         * @returns A local YYYY-MM-DD string or Invalid date.
+         */
+        formatDate(unformattedDate: string | number | Date) {
+            return dateParts(unformattedDate) || 'Invalid date';
+        }
+
+        //format the api accepts back
+        /**
+         * Format a calendar date using the legacy API noon timestamp convention.
+         * @param unformattedDate - Date input to format.
+         * @returns A YYYY-MM-DDT12:00 string or Invalid date.
+         */
+        formatDateAPI(unformattedDate: string) {
+            const formattedDate = dateParts(`${unformattedDate}T00:00:00`);
+            return formattedDate ? `${formattedDate}T12:00` : 'Invalid date';
+        }
+
+        /**
+         * Format a rounded number using en-US grouping.
+         * @param unformattedNumber - Numeric input to format.
+         * @returns The grouped and rounded number string.
+         */
+        formatNumber(unformattedNumber: number | string) {
+            return integerFormatter.format(Number(unformattedNumber));
+        }
+
+        /**
+         * Parse a base-ten integer using the existing parseInt behavior.
+         * @param formattedNumber - Integer text to parse.
+         * @returns The parsed integer, or NaN when no integer can be read.
+         */
+        unformatNumber(formattedNumber: string) {
+            return parseInt(formattedNumber, 10);
+        }
+
+        /**
+         * Format a numeric value as US dollars with two decimal places.
+         * @param unformattedCurrency - Numeric currency input.
+         * @returns The value formatted as US dollars.
+         */
+        formatCurrency(unformattedCurrency: number | string) {
+            return currencyFormatter.format(Number(unformattedCurrency));
+        }
+
+        /**
+         * Remove currency decoration and return two decimal places, falling back to 0.00 for invalid input.
+         * @param formattedCurrency - Decorated currency text or number.
+         * @returns An undecorated decimal string with two places.
+         */
+        unformatCurrency(formattedCurrency: number | string) {
+            const number = Number(String(formattedCurrency).replace(/[^0-9.-]/g, ''));
+            return Number.isFinite(number) ? number.toFixed(2) : '0.00';
+        }
+
+        /**
+         * Create a telephone link using only the supplied digits.
+         * @param unformattedPhoneNumber - Phone number containing optional formatting.
+         * @returns A tel link containing only digits.
+         */
+        formatPhoneLink(unformattedPhoneNumber: string) {
+            return 'tel:' + unformattedPhoneNumber.replace(/\D/g,'');
+        }
+
+        /**
+         * Create a mailto link from the supplied email address.
+         * @param unformattedEmailAddress - Email address to place in the link.
+         * @returns A mailto link.
+         */
+        formatEmailLink(unformattedEmailAddress: string) {
+            return 'mailto:' + unformattedEmailAddress;
+        }
+
+    };

package/app/assets/script/view/default.tsx

@@ -0,0 +1,14 @@
+/** @module app/assets/script/view/default */
+import React from 'react';
+
+
+'use strict';
+    export default class HelloMessage extends React.Component<{name: string}> {
+        /**
+         * Render the greeting from the component name prop.
+         * @returns The greeting React element.
+         */
+        render() {
+            return <div>Hello {this.props.name}</div>;
+        }
+    };

package/app/assets/script/view/toolkit/youtube-player-1.ts

@@ -0,0 +1,31 @@
+/** @module app/assets/script/view/toolkit/youtube-player-1 */
+import View from 'white-label-view';
+
+'use strict';
+    export default class extends View {
+        /**
+         * Create an instance with its own state and listener references.
+         */
+        constructor() {
+            super();
+            this.parentElement = document.querySelector('body') || undefined;
+        }
+        /**
+         * Extension hook for initializing a concrete YouTube player implementation.
+         * @returns No value.
+         */
+        initialize() {
+        }
+        /**
+         * Lifecycle hook for attaching listeners owned by a subclass.
+         * @returns No value.
+         */
+        addListeners() {
+        }
+        /**
+         * Legacy misspelled extension hook retained for compatibility with existing sample subclasses.
+         * @returns No value.
+         */
+        removeListners() {
+        }
+    };

package/app/assets/style/base/_toolkit.scss

@@ -1,23 +1,39 @@
 // ## colors
-@import 'colors/colors';
+@forward 'colors/colors';
 
 // ## fonts
-@import 'type/fonts';
-@import 'type/text';
-@import 'type/headings';
+@forward 'type/fonts';
+@forward 'type/text';
+@forward 'type/headings';
 
 
 // ## utilities
-@import 'utilities/accessibility';
-@import 'utilities/scroll';
-@import 'utilities/type';
+@forward 'utilities/accessibility';
+@forward 'utilities/scroll';
+@forward 'utilities/type';
 
 // ## elements
-@import 'elements/anchors';
-@import 'elements/buttons';
-@import 'elements/inputs';
-@import 'elements/labels';
-@import 'elements/lists';
-@import 'elements/pictures';
-@import 'elements/images';
-@import 'elements/tables';
+@forward 'elements/anchors';
+@forward 'elements/buttons';
+@forward 'elements/fieldsets';
+@forward 'elements/inputs';
+@forward 'elements/labels';
+@forward 'elements/landmarks';
+@forward 'elements/legends';
+@forward 'elements/lists';
+@forward 'elements/pictures';
+@forward 'elements/images';
+@forward 'elements/tables';
+
+// ## components
+
+@forward 'components/modal-1';
+@forward 'components/sticky-1';
+@forward 'components/tabpanel-base-1';
+@forward 'components/tabpanel-1';
+@forward 'components/tabpanel-2';
+@forward 'components/youtube-player-1';
+
+// ## layouts
+
+@forward 'layouts/staggered-1';

package/app/assets/style/base/components/_modal-1.scss

@@ -0,0 +1,80 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+@use '../utilities/accessibility' as *;
+
+// ## modals
+
+%modal-1 {
+
+    @extend %text-1;
+
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 2;
+
+    @media screen {
+        height: 100vh;
+    }
+
+    > .modal-1-content {
+
+        background-color: colors.$white-1;
+        height: 100%;
+        margin: 0 auto;
+        position: absolute;
+        width: 100%;
+        z-index: 3;
+
+        @include breakpoint(medium up) {
+            background-color: transparent;
+            height: auto;
+        }
+
+        > * {
+            background-color: colors.$white-1;
+        }
+
+    }
+
+    > button {
+
+        @extend %accessibility-hidden-text-1;
+
+        background-color: colors.$grey-1;
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: .9;
+        position: fixed;
+        top: 0;
+        width: 100%;
+
+    }
+
+}
+
+//added to body class to control page content
+%modal-1-open {
+
+    @include breakpoint(small only) {
+
+        .wrapper {
+            display: none;
+        }
+
+        .modal-1 {
+            top: 0;
+        }
+
+    }
+
+    @include breakpoint(medium up) {
+        overflow: hidden;
+    }
+
+
+}

package/app/assets/style/base/components/_sticky-1.scss

@@ -0,0 +1,19 @@
+// ## sticky elements
+
+%sticky-1 {
+
+    &.sticky-1-fixed {
+
+        > * {
+            position: fixed;
+            top: 0;
+            z-index: 1;
+        }
+
+    }
+
+    > .sticky-1-wrapper {
+        width: 100%;
+    }
+
+}

package/app/assets/style/base/components/_tabpanel-1.scss

@@ -0,0 +1,115 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use 'tabpanel-base-1' as *;
+@use '../type/text' as *;
+
+// ## tabpanel-1
+
+%tabpanel-1 {
+
+    @extend %tabpanel-base-1;
+    @extend %text-1;
+
+    margin: 0;
+
+    > [role='tablist'] {
+
+        @include clearfix;
+
+        margin: 0;
+        padding: 0;
+
+        > [role='tab'] {
+
+            @extend %text-1;
+
+            background-color: colors.$white-1;
+            border-bottom: rem-calc(1) solid colors.$white-1;
+            border-left: rem-calc(1) solid colors.$black-1;
+            border-right: rem-calc(1) solid colors.$black-1;
+            border-top: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
+            display: block;
+            float: left;
+            list-style: none;
+            margin: 0 rem-calc(1) 0 0;
+            padding: rem-calc(13.5);
+            text-decoration: none;
+
+            &[aria-selected='false'] {
+                background-color: colors.$black-1;
+                border-bottom-color: colors.$black-1;
+                color: colors.$white-1;
+            }
+
+        }
+
+    }
+
+    > [role='tabpanel'] {
+        border: rem-calc(1) solid colors.$black-1;
+        margin-top: rem-calc(-1);
+        padding: rem-calc(10);
+    }
+
+}
+
+// ### tabpanel-2
+
+%tabpanel-2 {
+
+    @extend %tabpanel-base-1;
+    @extend %text-1;
+
+    margin: 0;
+
+    [role='tablist'] {
+
+        @include clearfix;
+
+        border: rem-calc(1) solid colors.$black-1;
+        margin: 0;
+        padding: 0;
+
+        > [role='tab'] {
+
+            @extend %text-1;
+
+            background-color: colors.$grey-5;
+            border-bottom: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
+            display: block;
+            list-style: none;
+            margin: 0 rem-calc(1) 0 0;
+            padding: rem-calc(13.5);
+            text-decoration: none;
+            width: 100%;
+
+            &[aria-selected='false'] {
+                background-color: colors.$black-1;
+                border: 0;
+                color: colors.$white-1;
+            }
+
+        }
+
+        > [role='tabpanel'] {
+
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height .3s ease;
+
+            &[aria-hidden='false'] {
+                max-height: rem-calc(1000);
+            }
+
+            > * {
+                margin-left: rem-calc(10);
+                margin-right: rem-calc(10);
+            }
+
+        }
+
+    }
+
+}

package/app/assets/style/base/components/_tabpanel-2.scss

@@ -0,0 +1,64 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use 'tabpanel-base-1' as *;
+@use '../type/text' as *;
+
+// ## tabpanel-2
+
+%tabpanel-2 {
+
+    @extend %tabpanel-base-1;
+    @extend %text-1;
+
+    margin: 0;
+
+    [role='tablist'] {
+
+        @include clearfix;
+
+        border: rem-calc(1) solid colors.$black-1;
+        margin: 0;
+        padding: 0;
+
+        > [role='tab'] {
+
+            @extend %text-1;
+
+            background-color: colors.$grey-5;
+            border-bottom: rem-calc(1) solid colors.$black-1;
+            color: colors.$black-1;
+            display: block;
+            list-style: none;
+            margin: 0 rem-calc(1) 0 0;
+            padding: rem-calc(13.5);
+            text-decoration: none;
+            width: 100%;
+
+            &[aria-selected='false'] {
+                background-color: colors.$black-1;
+                border: 0;
+                color: colors.$white-1;
+            }
+
+        }
+
+        > [role='tabpanel'] {
+
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height .3s ease;
+
+            &[aria-hidden='false'] {
+                max-height: rem-calc(1000);
+            }
+
+            > * {
+                margin-left: rem-calc(10);
+                margin-right: rem-calc(10);
+            }
+
+        }
+
+    }
+
+}

package/app/assets/style/base/components/_tabpanel-base-1.scss

@@ -0,0 +1,13 @@
+// ## tabpanel-base-1
+
+%tabpanel-base-1 {
+
+    > [role='tablist'] [role='tab'] {
+        cursor: pointer;
+    }
+
+    > [role='tabpanel'][aria-hidden='true'] {
+        display: none;
+    }
+
+}

package/app/assets/style/base/components/_youtube-player-1.scss

@@ -0,0 +1,16 @@
+@use '../utilities/functions' as *;
+
+// ### youtube-video-1
+
+%youtube-player-1 {
+
+    // Keep embedded videos responsive without depending on framework Sass mixins.
+    @include responsive-embed;
+
+    margin: 0;
+
+    &.widescreen {
+        padding-bottom: $responsive-embed-margin-bottom;
+    }
+
+}

package/app/assets/style/base/elements/_anchors.scss

@@ -1,3 +1,5 @@
+@use '../type/text' as *;
+
 %anchor-base-1 {
 
     @extend %text-1;
@@ -13,3 +15,13 @@
     }
 
 }
+
+%anchor-1 {
+
+    @extend %anchor-base-1;
+
+    cursor: pointer;
+    margin: 0;
+    text-decoration: underline;
+
+}

package/app/assets/style/base/elements/_buttons.scss

@@ -1,3 +1,7 @@
+@use "../colors/colors";
+@use '../utilities/functions' as *;
+@use '../type/text' as *;
+
 %button-base-1 {
 
     @extend %text-1;
@@ -8,3 +12,14 @@
     padding: 0;
 
 }
+
+%button-1 {
+
+    @extend %button-base-1;
+
+    background-color: colors.$black-1;
+    border: rem-calc(1) solid colors.$black-1;
+    color: colors.$white-1;
+    padding: 0 rem-calc(13.5);
+
+}

package/app/assets/style/base/elements/_fieldsets.scss

@@ -0,0 +1,9 @@
+@use '../type/text' as *;
+
+%fieldset-1 {
+
+    @extend %text-1;
+
+    margin: 0;
+
+}

package/app/assets/style/base/elements/_images.scss

@@ -1,4 +1,8 @@
-%image-base-1 {
+%image-1 {
+    border: 0;
     margin: 0;
-    padding: 0;
+}
+
+%picture-1 {
+    @extend %image-1;
 }