@appdirect/sfb-theme-plaza 0.0.41 → 0.0.45

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# CHANGELOG
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [0.0.44] - (2021-07-30)
+
+#### Added
+- Added menus support [126](https://github.com/AppDirect/sfb-theme-mp2/pull/126)
+
+#### Added
+- Added cross-selling page under profile, for cross-selling domains with products [124](https://github.com/AppDirect/sfb-theme-mp2/pull/124)
+
+
+#### Fixed
+- Fixed issue with cart label overlapping wit the cart icon [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+- Cart icon will show below 1280px, instead of cart label [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+- Fixed issue with the search bar not having enough space/width to be usable for smaller screens [122](https://github.com/AppDirect/sfb-theme-mp2/pull/122)
+
+#### Added
+- Added noIndex meta tag to prevent getting indexed by search engine [123](https://github.com/AppDirect/sfb-theme-mp2/pull/123)
+
+#### Added
+- Added scroll to top button to Home and Product profile page [121](https://github.com/AppDirect/sfb-theme-mp2/pull/121)
+
+## [0.0.43] - (2021-04-12)
+#### Fixed
+- Added missing localized strings for light and dark logos [120](https://github.com/AppDirect/sfb-theme-mp2/pull/120)

package/assets/css/theme/components/_sticky-button-page-scroll.scss

@@ -0,0 +1,15 @@
+@import '../../theme/mixins/scroll-button';
+
+.stickyButtonPageScroll {
+    &_wrapper {
+        // Have higher z-index than cms toolbar on the right side
+        z-index: 100000;
+        
+
+        .buttonPageScroll {
+            &_button {
+                @include scroll-button-offset-position;
+            }
+        }
+    }
+}

package/assets/css/theme/definitions/_accessibility.scss

@@ -0,0 +1,42 @@
+// Only display content to screen readers
+//
+// See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px; // Fix for https://github.com/twbs/bootstrap/issues/25686
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable() {
+    &:active,
+    &:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        overflow: visible;
+        clip: auto;
+        white-space: normal;
+    }
+}
+
+.sr-only {
+  @include sr-only();
+}
+
+.sr-only-focusable {
+  @include sr-only-focusable();
+}

package/assets/css/theme/definitions/_mixins.scss

@@ -1,5 +1,7 @@
 @import 'colors';
 @import 'typography';
+@import 'variables';
+@import 'accessibility';
 
 @mixin html {
     @include default($genericFontSize);

package/assets/css/theme/definitions/_variables.scss

@@ -0,0 +1,7 @@
+//Global
+$page-spacing-top: 25px;
+$page-spacing-top-mobile: 15px;
+
+// Components
+$product-tabs-spacing-top: 48px;
+$product-tabs-spacing-bottom: 40px;

package/assets/css/theme/generic/_default.scss

@@ -1,17 +1,9 @@
 @import '../definitions/mixins';
 
-/*
- __html
- */
-
 html {
     @include html;
 }
 
-a, button {
-    outline: 0;
-}
-
 .ad-uniheader {
     height: 52px;
     background: #2d2a27;
@@ -27,19 +19,14 @@ body {
     @include text-4;
 }
 
-#header-universal, #footer-universal {
-    @include default($genericFontSize);
-}
-
-#footer-universal {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    height: 12rem;
-}
+.page-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 
-.main-region {
-    padding-bottom: 12rem;
+    .main-footer {
+        margin-top: auto;
+    }
 }
 
 blockquote {
@@ -106,8 +93,11 @@ blockquote {
 .global-component-spacer {
     padding: 30px 0;
 }
+.global-component-spacer-top {
+    padding-top: 30px;
+}
 .global-component-spacer-bottom {
-    padding: 0 0 30px 0;
+    padding-bottom: 30px;
 }
 
 .global-component-nospacer {
@@ -117,3 +107,20 @@ blockquote {
 .hidden {
     display: none !important;
 }
+
+.skip-to-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    .skip-link {
+        &:focus {
+            position: relative;
+            padding: 5px 10px;
+            background-color: #fff;
+            color: #000;
+            border: 1px solid #000;
+            z-index: 9999;
+        }
+    }
+}

package/assets/css/theme/mixins/_scroll-button.scss

@@ -0,0 +1,17 @@
+@import '../grid/variables';
+
+@function get-page-container-spacing($container-width, $grid-gutter-width: 28px) {
+  @return calc((100vw - (#{$container-width} - #{$grid-gutter-width})) / 2);
+}
+
+@mixin scroll-button-offset-position {
+  $button-offset: 15px;
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+      $page-container-spacing: get-page-container-spacing($container-max-width);
+  
+      margin-right: calc(#{$page-container-spacing} * -1 + #{$button-offset});
+    }
+  }
+}

package/assets/css/theme/pages/_bundle.scss

@@ -0,0 +1,10 @@
+.product-bundle {
+	$spacing-top: 42px;
+	$spacing-mobile-top: 30px;
+
+	margin-top: $spacing-mobile-top;
+
+    @include media-breakpoint-up(lg) {
+		margin-top: $spacing-top;
+    }
+}

package/assets/css/theme/theme-index.scss

@@ -1,8 +1,9 @@
 @import "generic/normalize";
 @import "generic/default";
 @import "grid/bootstrap-grid";
-@import "components/secondary-nav";
 @import "pages/product";
 @import "pages/profile";
+@import "pages/bundle";
 @import "pages/listing";
-@import "layout/reset"
+@import "layout/reset";
+@import "components/sticky-button-page-scroll";

package/content/layout/base.html

@@ -2,6 +2,9 @@
 
 <html lang="{{ config.locale.code }}">
 <head>
+  {% if meta.noIndex %}
+    <meta name="robots" content="noindex" />
+  {% endif %}    
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   {% block meta_title %}<title>{{ meta.title }}</title>{% endblock %}
   {% block meta_description %}<meta name="description" content="{{ meta.description }}">{% endblock %}
@@ -28,7 +31,7 @@
   <!-- test custom components orchard <link rel="stylesheet" type="text/css" href="{{ r("/assets/js/components/sfb-components.css") }}"> -->
   <!-- local testing <link rel="stylesheet" type="text/css" href="/sfb-theme-components/sfb-components.css"> -->
   <!-- local testing custom components <link rel="stylesheet" type="text/css" href="/sfb-toolkit-assets/js/components/sfb-components.css"> -->
-    <link rel="preload" as="font" href="{{ r("/assets/fonts/slick/slick.woff") }}" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="{{ r("/assets/fonts/slick/slick.woff") }}" type="font/woff2" crossorigin="anonymous">
   <link rel="stylesheet" type="text/css" href="{{ config.channelSettings.channelCanonicalBaseUrl }}/sfb-theme-components@0/sfb-components.css">
   <link rel="stylesheet" type="text/css" href="{{ r("/assets/css/theme/theme-index.css") }}">
   <!-- local testing <script src="/sfb-theme-components/sfb-components.js"></script> -->
@@ -39,31 +42,41 @@
 </head>
 
 <body data-page="{% block dataPage %}{% endblock %}">
-    {% block header %}
-        <div id="header-universal" role="heading" aria-level="1"></div>
-    {% endblock %}
-    <div class="main-region page_content page_content__condensed {% block mainRegionClass %}{% endblock %}" role="main">
-        <div class="layout-default">
-            <div class="container">
-                <component name="SecondaryNav" id="SecondaryNav1"></component>
-            </div>
-        </div>
-        {% block headContent %}{% endblock %}
-        <div class="profile-content">
-            {% block contentFullWidthContainer %}
-                {% block contentFullWidth %}{% endblock %}
-            {% endblock %}
-            <div class="layout-default">
+    <div class="skip-to-content">
+        <a class="skip-link sr-only sr-only-focusable" href="#mainContent">{{i18n.skipToMain}}</a>
+    </div>
+    <div class="page-wrapper">
+        {% block header %}
+            <header class="main-header" id="mainHeader">
                 <div class="container">
-                    {% block content %}{% endblock %}
+                    <component name="Header" id="Header"></component>
+                </div>
+            </header>
+        {% endblock %}
+    
+        <main id="mainContent" class="main-region page_content page_content__condensed {% block mainRegionClass %}{% endblock %}" role="main">
+            {% block mainTitle %}{% endblock %}
+            {% block headContent %}{% endblock %}
+            <div class="profile-content">
+                {% block contentFullWidthContainer %}
+                    {% block contentFullWidth %}{% endblock %}
+                {% endblock %}
+                <div class="layout-default">
+                    <div class="container">
+                        {% block content %}{% endblock %}
+                    </div>
                 </div>
             </div>
-        </div>
+        </main>
+        
+        {% block footer %}
+            <footer class="main-footer" id="mainFooter">
+                <div class="container">
+                    <component name="Footer" id="Footer"></component>
+                </div>
+            </footer>
+        {% endblock %}
     </div>
-
-    {% block footer %}
-        <div id="footer-universal" role="contentinfo"></div>
-    {% endblock %}
-    <component name="GlobalAlerts" id="GlobalAlerts"></component>
+    <component name="GlobalAlerts" id="GlobalAlerts" editorVisible="false"></component>
 </body>
 </html>

package/content/layout/profile.html

@@ -18,4 +18,5 @@
             <component name="ProductSimilarApps" id="ProductSimilarApps"></component>
         {% endblock %}
     </div>
-{% endblock %}
+    <component name="StickyButtonPageScroll" id="StickyButtonPageScroll"></component>
+{% endblock %}

package/content/pages/bundle/bundle.html

@@ -1,11 +1,9 @@
-
-
 {% extends "/layout/bundle.html" %}
 
 {% block bundleContent %}
-    <component name="ProductBanner" id="ProductBanner"></component>
-    <div class="global-component-spacer">
-        <component name="ProductBundleViewer" id="ProductBundleViewer"></component>
+    <component name="BundleBanner" id="BundleBanner"></component>
+    <component name="ProductBundleViewer" id="ProductBundleViewer"></component>
+    <div class="product-bundle">
+        <component name="ProductBundles" id="ProductBundles"></component>
     </div>
-    <component name="ProductBundles" id="ProductBundles"></component>
-{% endblock %}
+{% endblock %}

package/content/pages/help/help.html

@@ -1,13 +1,14 @@
 {% extends "/layout/base.html" %}
 
+{% block mainTitle %}
+<h1 class="sr-only">{{i18n.frequentlyAskedQuestions}}</h1>
+{% endblock %}
+
 {% block content %}
 <div class="global-component-spacer">
     <div class="row">
         <div class="col">
-            <component
-                name="Faq"
-                id="Faq1">
-            </component>
+            <component name="Faq" id="Faq1"></component>
         </div>
     </div>
 </div>

package/content/pages/home/home.html

@@ -2,7 +2,13 @@
 {% block data %}
     <data type="navigator" />
 {% endblock %}
+{% block dataPage %}home{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{config.marketplaceName}}</h1>
+{% endblock %}
 
 {% block content %}
     <PageOrderableContainer name="PageOrderableContainer" id="PageOrderableContainer1"></PageOrderableContainer>
-{% endblock %}
+    <component name="StickyButtonPageScroll" id="StickyButtonPageScroll"></component>
+{% endblock %}

package/content/pages/listing/listing.html

@@ -4,9 +4,13 @@
 <data type="navigator" />
 {% endblock %}
 
+{% block mainTitle %}
+    <h1 class="sr-only">{{listingProducts.i18n.allApplications}}</h1>
+{% endblock %}
+
 {% block content %}
     <div class="global-component-spacer js-listing">
-        <component name="ProductListingControls" id="CategoryListingControls-ListingPage"></component>
+        <component name="ProductListingControls" id="CategoryListingControls-ListingPage" editorVisible="false"></component>
         <div class="row listing listing-page row--spaced">
             <div class="col-md-3 col-sm-12 category-sidebar js-sidebar">
                 <component name="CategorySidebar" id="CategorySidebar-ListingPage"></component>

package/content/pages/profile/profile-add-lead.html

@@ -3,7 +3,7 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="none" />
+<data type="application-additional-content" value="questions" />
 {% endblock %}
 
 {% block profileContentHeader %}{% endblock %}

package/content/pages/profile/profile-add-question.html

@@ -3,7 +3,7 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="none" />
+<data type="application-additional-content" value="questions" />
 {% endblock %}
 
 {% block profileContentHeader %}{% endblock %}

package/content/pages/profile/profile-add-review.html

@@ -3,7 +3,7 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="none" />
+<data type="application-additional-content" value="questions" />
 {% endblock %}
 
 {% block profileContentHeader %}{% endblock %}

package/content/pages/profile/profile-configure.html

@@ -2,7 +2,7 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="addonProducts" />
+<data type="application-additional-content" value="addonProducts,questions" />
 {% endblock %}
 
 {% block profileContentHeader %}{% endblock %}

package/content/pages/profile/profile-cross-sell-management.html

@@ -0,0 +1,12 @@
+{% extends "/layout/profile.html" %}
+
+{% block data %}
+<data type="navigator" />
+<data type="application-additional-content" value="addonProducts,questions" />
+{% endblock %}
+
+{% block profileContentHeader %}{% endblock %}
+
+{% block profileContent %}
+    <component name="ProductAssociatedDomain" id="ProductAssociatedDomain1"></component>
+{% endblock %}

package/content/pages/profile/profile-editions.html

@@ -3,7 +3,11 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="recommendations,addonProducts,callToActionsEditions" />
+<data type="application-additional-content" value="recommendations,addonProducts,callToActionsEditions,questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}

package/content/pages/profile/profile-features.html

@@ -2,7 +2,11 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="recommendations,relatedProducts" />
+<data type="application-additional-content" value="recommendations,relatedProducts,questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}

package/content/pages/profile/profile-questions.html

@@ -2,9 +2,13 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="recommendations,relatedProducts" />
+<data type="application-additional-content" value="recommendations,relatedProducts,questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}
     <component name="ProductQuestions" id="ProductQuestions1"></component>
-{% endblock %}
+{% endblock %}

package/content/pages/profile/profile-resources.html

@@ -2,9 +2,13 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="recommendations,relatedProducts" />
+<data type="application-additional-content" value="recommendations,relatedProducts,questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}
     <component name="ProductResources" id="ProductResources1"></component>
-{% endblock %}
+{% endblock %}

package/content/pages/profile/profile-reviews.html

@@ -2,9 +2,13 @@
 
 {% block data %}
 <data type="navigator" />
-<data type="application-additional-content" value="recommendations,relatedProducts" />
+<data type="application-additional-content" value="recommendations,relatedProducts,questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}
     <component name="ProductReviews" id="ProductReviews1"></component>
-{% endblock %}
+{% endblock %}

package/content/pages/profile/profile-standaloneDomains.html

@@ -12,7 +12,9 @@
 {% endblock %}
 
 {% block profileContent %}
-    <component name="DomainApp" id="DomainApp"></component>
+    <div class="global-component-spacer">
+        <component name="DomainApp" id="DomainApp"></component>
+    </div>
 {% endblock %}
 
 {% block belowProfileContent %}

package/content/pages/profile/profile-support.html

@@ -3,9 +3,13 @@
 
 {% block data %}
     <data type="navigator" />
-    <data type="application-additional-content" value="none" />
+    <data type="application-additional-content" value="questions" />
+{% endblock %}
+
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
 {% endblock %}
 
 {% block profileContent %}
     <component class="support-page" name="ProductAdditionalInfo" id="ProductAdditionalInfo1"></component>
-{% endblock %}
+{% endblock %}

package/content/pages/profile/profile.html

@@ -6,6 +6,10 @@
     <data type="application-additional-content" value="recommendations,relatedProducts,questions,answers,reviews" />
 {% endblock %}
 
+{% block mainTitle %}
+    <h1 class="sr-only">{{application.summary.title}}</h1>
+{% endblock %}
+
 {% block profileContentHeader %}
     <component name="ProductBanner" id="ProductBanner"></component>
     <component name="ProductTabMenu" id="ProductTabMenu"></component>
@@ -17,4 +21,4 @@
 
 {% block belowProfileContent %}
     <component name="ProductSimilarApps" id="ProductSimilarApps"></component>
-{% endblock %}
+{% endblock %}

package/design-properties.json

@@ -1,18 +1,18 @@
 {
-  "headerNavBg": "#2d2a27",
-  "headerNavBorderColor": "#242424",
-  "headerNavItemBgHover": "#3e3b37",
-  "headerNavItemBgSelected": "#24221e",
-  "headerNavFontColor": "#999",
+  "headerNavBg": "#0076ce",
+  "headerNavBorderColor": "#0076ce",
+  "headerNavItemBgHover": "#1187df",
+  "headerNavItemBgSelected": "#006dc5",
+  "headerNavFontColor": "#ffffff",
   "headerNavFontHoverColor": "#d2d5d9",
-  "headerNavFontSelectedColor": "#fff",
+  "headerNavFontSelectedColor": "#fcfdfd",
   "headerNavTooltipBg": "#2d2a27",
   "headerNavTooltipFontColor": "#fff",
-  "headerNavDropdownFontColor": "#575757",
+  "headerNavDropdownFontColor": "#474747",
   "headerNavDropdownBg": "#fff",
   "headerNavDropdownBorderColor": "#eaeaea",
   "headerNavDropdownBorderColorHover": "#007b99",
-  "headerNavDropdownBgHover": "#009abf",
+  "headerNavDropdownBgHover": "#0076ce30",
   "headerNavDropdownFontColorHover": "#fff",
   "headerNavDropdownMarginRight": "0"
 }