diff --git a/package.json b/package.json index 822b34bb1..5100c3723 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "version": "2.0.0", "main": "gulpfile.js", "devDependencies": { - "@npmcorp/dr-frankenstyle": "^0.3.0", + "@npmcorp/dr-frankenstyle": "^0.4.1", "a11y": "^0.3.3", "accessibility-developer-tools": "pivotal-cf/accessibility-developer-tools#dist", "axios": "^0.5.4", @@ -99,6 +99,7 @@ "zeroclipboard": "^2.1.6" }, "dependencies": { + "@npmcorp/pui-css-header": "^1.7.0", "express": "^4.13.4", "git-create-deploy-branch": "^1.0.1", "lodash": "^2.4.2", @@ -181,7 +182,8 @@ "test": "gulp ci --fatal", "test-accessibility": "gulp accessibility-ci || :", "pui-update": "scripts/pui-update.js", - "dev": "gulp dev" + "dev": "gulp dev", + "build-monolith": "gulp monolith-build-css-from-scratch" }, "repository": { "type": "git", diff --git a/src/pivotal-ui/components/drop-down-menu/drop-down-menu.js b/src/pivotal-ui/components/drop-down-menu/drop-down-menu.js new file mode 100644 index 000000000..5ef2772ca --- /dev/null +++ b/src/pivotal-ui/components/drop-down-menu/drop-down-menu.js @@ -0,0 +1,92 @@ +var $ = global.jQuery || require('jquery'); + +var DropDownMenu = function($el) { + this.menu = $el; + this.id = this.menu.attr('id'); + this.menuToggle = $('a[href="#' + this.id + '"]'); + this.menuOverlay = $("
").appendTo("body"); +}; + +DropDownMenu.prototype.close = function(noPathChange) { + if (noPathChange) { + history.pushState({}, '', window.location.pathname); + } + this.menu.addClass('hidden').removeClass('show'); + this.menuToggle + .addClass('toggle-is-closed') + .removeClass('toggle-is-open') + .trigger('blur'); + this.menuOverlay.removeClass('show'); + this.menu.trigger("closed:dropDownMenu", [this.id]); +}; + +DropDownMenu.prototype.open = function() { + history.pushState({}, '', window.location.pathname + this.menuToggle.attr('href')); + this.menu.addClass('show').removeClass('hidden'); + this.menuToggle.addClass('toggle-is-open').removeClass('toggle-is-closed'); + this.menuOverlay.addClass('show'); + this.menu.trigger("opened:dropDownMenu", [this.id]); +}; + +DropDownMenu.prototype.addListeners = function() { + var self = this; + + this.menu.on("close", function(e) { + self.close(e.noPathChange); + }); + + this.menu.on("open", $.proxy(this.open, this)); + + this.menuToggle.on('click', function(e) { + e.preventDefault(); + + if (self.menu.is(':visible')) { + self.close(); + } else { + self.open(); + } + }); + + this.menuOverlay.on('click', $.proxy(this.close, this)); + +}; + + +$(function() { + var dropDownMenus = $('.drop-down-menu'); + + $.each(dropDownMenus, function(idx, el) { + var ddm = new DropDownMenu($(el)); + + ddm.addListeners(); + + // in case you need to refresh while the menu is open + if (window.location.hash === '#' + ddm.id) { + ddm.open(); + } + + // for android users and anyone who likes to press the browser navigation buttons + $(window).on('hashchange', function() { + + if (window.location.hash === '') { + ddm.close(); + } + + if (window.location.hash === '#' + ddm.id) { + ddm.open(); + } + }); + }); + + $("body").on("opened:dropDownMenu", function(e, id) { + $.each(dropDownMenus, function(idx, el) { + if (el.id !== id) { + $(el).trigger("close", { + noPathChange: true + }); + } + }); + }); + + +}); diff --git a/src/pivotal-ui/components/drop-down-menu/drop-down-menu.scss b/src/pivotal-ui/components/drop-down-menu/drop-down-menu.scss new file mode 100644 index 000000000..2be96ee3c --- /dev/null +++ b/src/pivotal-ui/components/drop-down-menu/drop-down-menu.scss @@ -0,0 +1,183 @@ +@import "../pui-variables"; + +/*doc +--- +title: Drop Down Menu +name: drop-down-menu +categories: + - css_all +--- + +```html_example + + + ``` + + */ + +.drop-down-menu { + display: none; + position: absolute; + background-color: $header-secondary; + z-index: 10; + right: 0; + top: 3.9em; + width: 100%; + height: 100%; +} +.drop-down-menu.main-navigation { + top: 4.4em; +} +@media only screen and (min-width: $desktopMinWidth) { + .drop-down-menu { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + top: 3em; + left: 0; + padding: 0; + width: auto; + height: auto; + } + .drop-down-menu.main-navigation { + top: 0; + } +} +.drop-down-menu a, +.drop-down-menu button { + color: $greigh; + text-align: left; + display: block; + font-weight: normal; +} +.drop-down-menu a:hover, +.drop-down-menu button:hover { + color: #fff; + text-decoration: none; + text-weight: 600; +} +.drop-down-menu:target { + display: block; +} +.drop-down-menu-container { + font-size: 16px; + position: static; + display: block; + vertical-align: middle; +} +@media only screen and (min-width: $desktopMinWidth) { + .drop-down-menu-container { + position: relative; + display: inline-block; + } +} +.drop-down-menu-section a { + color: $greigh; + background: inherit; + border-bottom: none; + padding: 0; + line-height: 25px; +} +.drop-down-menu-section ul, +.drop-down-menu-section li { + list-style: none; + text-align: left; + margin: 0; +} +.drop-down-menu-section ul { + float: none; +} +.drop-down-menu-section li { + border-bottom: 1px solid #808080; + padding: 0; + display: block; + font-size: 1em; +} +.drop-down-menu-section li:last-child { + border-bottom: 0; +} +.drop-down-menu-section li > a, +.drop-down-menu-section li .btn-link { + padding: 1em 20px; + display: block; +} +.drop-down-menu-section .btn-link { + padding: 0; +} +.drop-down-menu-section .btn-link:focus { + outline: none; + text-decoration: underline; +} +.drop-down-menu-overlay { + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 100%; + z-index: 1; +} +.drop-down-menu-toggle { + position: relative; + display: inline-block; + z-index: 99999; + color: $greigh3; + text-decoration: none; + padding: 5px 10px; +} +@media (min-width: $desktopMinWidth) { + .drop-down-menu-toggle { + display: block; + } +} +.drop-down-menu-toggle:after { + content: ''; + background-repeat: no-repeat; + background-image: url("static/images/arrow-down.svg"); + width: 10px; + height: 6px; + display: inline-block; + vertical-align: middle; + margin-left: 5px; + color: #fff; + font-size: 0.75em; + font-weight: bold; +} +.drop-down-menu-toggle:hover, +.drop-down-menu-toggle:focus { + text-decoration: none; + background-color: $header-secondary; + border-radius: 5px; +} +.drop-down-menu-toggle.toggle-is-open { + background-color: $header-secondary; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.drop-down-menu-toggle.toggle-is-open:after { + background-image: url("static/images/arrow-up.svg"); +} +.drop-down-menu-toggle.toggle-is-closed { + background-color: none; +} \ No newline at end of file diff --git a/src/pivotal-ui/components/drop-down-menu/package.json b/src/pivotal-ui/components/drop-down-menu/package.json new file mode 100644 index 000000000..46b451253 --- /dev/null +++ b/src/pivotal-ui/components/drop-down-menu/package.json @@ -0,0 +1,9 @@ +{ + "homepage": "http://styleguide.pivotal.io/objects.html#drop-down-menu", + "main": "drop-down-menu.js", + "dependencies": { + "jquery": "^2.1.4", + "pui-css-typography": "^2.0.0" + }, + "version": "1.3.0" +} \ No newline at end of file diff --git a/src/pivotal-ui/components/drop-down-menu/static/images/arrow-down.svg b/src/pivotal-ui/components/drop-down-menu/static/images/arrow-down.svg new file mode 100644 index 000000000..772bbccca --- /dev/null +++ b/src/pivotal-ui/components/drop-down-menu/static/images/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pivotal-ui/components/drop-down-menu/static/images/arrow-up.svg b/src/pivotal-ui/components/drop-down-menu/static/images/arrow-up.svg new file mode 100644 index 000000000..8ebbd795f --- /dev/null +++ b/src/pivotal-ui/components/drop-down-menu/static/images/arrow-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pivotal-ui/components/grids/grids.scss b/src/pivotal-ui/components/grids/grids.scss index 1a89dfdea..12d131719 100644 --- a/src/pivotal-ui/components/grids/grids.scss +++ b/src/pivotal-ui/components/grids/grids.scss @@ -2238,4 +2238,4 @@ $grids-debug: false; content: "" !important; } -} +} \ No newline at end of file diff --git a/src/pivotal-ui/components/header/header.scss b/src/pivotal-ui/components/header/header.scss new file mode 100644 index 000000000..d388bd3a0 --- /dev/null +++ b/src/pivotal-ui/components/header/header.scss @@ -0,0 +1,407 @@ +@import "../pui-variables"; + +/*doc +--- +title: Header +name: header +categories: + - css_base_header + - css_all +--- + +```html_example + +
+ +
+ +
+ + + + +
+ +
+ + + + + + +
+ New Project, Monday + + +
+ + + + +
+ ``` + + */ + +header { + font-size: 16px; + padding: 0.875em 20px 0.0625em; + border-bottom: 1px solid #d3d3d3; + background: $header-color; + color: $header-text-color; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + align-items: center; +} +header > .header-item { + flex: 1 auto; +} +header > .brand-container { + order: 1; + width: 50%; +} +header > .header-search-container { + order: 4; +} +header > .user-info-container { + order: 2; + width: calc(50% - 60px); + text-align: right; +} +header > .header-nav-menu-container { + order: 3; + width: 60px; + text-align: right; +} +header ul, +header li, +header ul li { + list-style: none; + padding: 0; + margin: 0; +} +header a { + color: $header-subtle-text-color; +} +header a:hover { + color: $header-text-color; + text-decoration: none; + transition: color 0.1s ease, background 0.1s ease; +} +.logo-container { + padding: 0; + width: 80px; + vertical-align: middle; +} +.logo-container img { + max-width: 100%; +} +.logo-container .cobrand { + font-weight: bold; +} +.logo-container .cobrand::before { + content: "♥︎"; + font-size: 150%; + color: $npmred; + vertical-align: middle; + padding: 0 0.5em; +} +.npm-expansions { + display: none; + text-align: left; +} +.nav-toggle { + width: 54px; + padding: 0 5px; +} +.nav-toggle img { + max-width: 100%; +} +.nav-toggle:after { + content: none; +} +.nav-toggle.toggle-is-open:after { + content: none; +} +.site-search { + position: relative; +} +.site-search input[type=search] { + background-color: transparent; + color: $header-text-color; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 0; + margin: 0 0 20px; + padding: 5px; + padding-left: 15px; + font-size: 1em; + display: block; + width: 100%; + outline: 0; +} +.site-search input[type=submit] { + position: absolute; + top: 0; + right: 0; + height: 45px; + width: 45px; + margin: 0 0 4px; + margin-bottom: 0px; + border: 0; + text-indent: -9999em; + cursor: pointer; + outline: 0; + border-radius: 0 2px 2px 0; + background-image: url("static/images/ico-search.svg"); + background-repeat: no-repeat; + background-position: 80% 43%; + background-size: 16px 16px; + display: block; + text-align: center; + padding: 0 35px; + line-height: 47px; + color: #fff; + font-size: 18px; + text-decoration: none !important; + clear: both; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: transparent; +} +.user-info img { + border-radius: 100%; + display: inline-block; + vertical-align: middle; + width: 38px; + height: 38px; +} +.logged-in .user-info, +.logged-in .user-info-container { + text-align: right; +} +.logged-in .user-info-salutation { + display: none; + vertical-align: middle; + max-width: 200px; + margin-right: 10px; + overflow: hidden; + text-overflow: elilipsis; + color: $header-text-color; +} +.anonymous .brand-container { + width: 30%; +} +.anonymous .user-info-container { + width: calc(70% - 44px); +} +.anonymous .user-info-salutation { + display: flex; + align-items: center; +} +.anonymous .user-info-salutation > li { + flex: 1 auto; +} +.anonymous .user-info-salutation > li:first-child { + width: calc(100% - 45px); +} +.anonymous .user-info-salutation > li:last-child { + width: 45px; +} +.anonymous .header-nav-menu-container { + width: 44px; +} + +.icon-wombat-head-login { + background-image: url("static/images/wombat-head-login.svg"); + background-repeat: no-repeat; + width: 45px; + height: 45px; + display: inline-block; +} + +@media (min-width: $desktopMinWidth) { + header { + flex-direction: row; + flex-wrap: wrap-reverse; + padding: 0 20px; + align-items: stretch; + } + header > .header-item { + flex-basis: auto; + flex-shrink: 0; + padding: 1.25em 0; + } + header > .brand-container { + order: 1; + flex-grow: 1; + width: auto; + } + header > .header-search-container { + order: 2; + flex-grow: 10; + width: auto; + } + header > .user-info-container { + order: 3; + flex-grow: 0; + width: auto; + padding-left: 10px; + min-width: 212px; + text-align: left; + } + header > .header-nav-menu-container { + order: 4; + flex-grow: 1; + width: 100%; + padding: 0 20px; + margin: 0 -20px; + background-color: $npm-menu-red; + display: flex; + align-content: space-between; + } + header > .header-nav-menu-container .npm-expansions, + header > .header-nav-menu-container .nav-menu-container { + flex: 1 auto; + } + header > .header-nav-menu-container .nav-menu-container { + max-width: 550px; + } + header.hero-transparent { + background: transparent; + border-bottom: 0; + } + header.hero-transparent + .pane { + margin-top: -6em; + padding-top: 6em; + } + header.anonymous .brand-container, + header.anonymous .user-info-container { + width: auto; + min-width: auto; + } + header.anonymous .user-info-container, + header.anonymous .user-info { + text-align: right; + } + header.anonymous .header-nav-menu-container { + width: 100%; + } + .header-nav-menu-container a { + font-size: 0.9em; + } + .drop-down-menu-container { + display: block; + text-align: center; + } + .nav-menu-container .drop-down-menu-container li a { + text-align: center; + } + .nav-menu-container .drop-down-menu-container li a:hover { + background: header-nav-highlight-bg; + } + .npm-expansions { + display: block; + } + .nav-toggle { + display: none; + } + .header-item .product-navigation, + .header-item .product-navigation.hidden { + display: block !important; + position: static; + background-color: transparent; + border-radius: 0; + width: auto; + } + .header-item .products-list { + display: flex; + flex-direction: row; + align-content: flex-end; + } + .header-item .products-list li { + padding: 0 0 0 0.9375em; + border-bottom: 0; + flex: 1 auto; + } + .header-item .products-list li a, + .npm-expansions { + padding: 0.625em 0; + color: $header-subtle-text-color; + } + .header-item .products-list li a:hover, + .npm-expansions:hover { + color: $header-text-color; + text-decoration: none; + } + .logo-container { + width: 125px; + } + .site-search input[type="search"] { + height: 3.125em; + margin: 0; + } + .site-search input[type="submit"] { + width: 70px; + height: 2.777em; + border-left: 1px solid rgba(255,255,255,0.2); + text-indent: -9999em; + background-position: 50% 50%; + background-size: 16px 16px; + } + .site-search input[type="submit"]:focus { + border: 1px solid rgba(255,255,255,0.8); + } + .logged-in .user-info-salutation { + display: inline-block; + } +} \ No newline at end of file diff --git a/src/pivotal-ui/components/header/package.json b/src/pivotal-ui/components/header/package.json new file mode 100644 index 000000000..b1fc6478b --- /dev/null +++ b/src/pivotal-ui/components/header/package.json @@ -0,0 +1,8 @@ +{ + "homepage": "http://styleguide.pivotal.io/objects.html#header", + "dependencies": { + "@npmcorp/pui-css-drop-down-menu": "^1.3.0", + "pui-css-typography": "^2.0.0" + }, + "version": "1.7.0" +} \ No newline at end of file diff --git a/src/pivotal-ui/components/header/static/images/ico-search.svg b/src/pivotal-ui/components/header/static/images/ico-search.svg new file mode 100644 index 000000000..d306c981c --- /dev/null +++ b/src/pivotal-ui/components/header/static/images/ico-search.svg @@ -0,0 +1 @@ +Oval 1 + Line \ No newline at end of file diff --git a/src/pivotal-ui/components/header/static/images/wombat-head-login.svg b/src/pivotal-ui/components/header/static/images/wombat-head-login.svg new file mode 100644 index 000000000..72fcbab76 --- /dev/null +++ b/src/pivotal-ui/components/header/static/images/wombat-head-login.svg @@ -0,0 +1,28 @@ + + + + + + + diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss index 6c6aec69f..9ba7985b3 100644 --- a/src/pivotal-ui/components/pui-variables.scss +++ b/src/pivotal-ui/components/pui-variables.scss @@ -1311,3 +1311,17 @@ $baseGutter: $grid-gutter-width; $bg-color-example-output: $neutral-11; $bg-color-inverse-example-output: $navy-1; $bg-color-example-code: $neutral-10; + +/* npm carry over colors for the header REFACTOR EVENTUALLY PLSNTHXU + ========================================================================== */ +$npmred: #cb3837; +$npm-menu-red: #C12127; +$npm-navy: #2a333c; +$header-color: $npm-navy; +$header-secondary: #283546; +$header-text-color: white; +$header-subtle-text-color: rgba(255,255,255,0.8); +$header-nav-highlight-bg: #a42b2b; +$desktopMinWidth: $screen-sm; +$greigh: rgba(195,195,195,1); // median greigh +$greigh3: rgba(black, 0.6); \ No newline at end of file diff --git a/src/pivotal-ui/components/typography/package.json b/src/pivotal-ui/components/typography/package.json index 2e80c5a39..593a6d134 100644 --- a/src/pivotal-ui/components/typography/package.json +++ b/src/pivotal-ui/components/typography/package.json @@ -4,5 +4,5 @@ "pui-css-bootstrap": "2.0.0", "font-awesome": "^4.4.0" }, - "version": "2.0.0" + "version": "2.1.0" } \ No newline at end of file diff --git a/src/pivotal-ui/components/typography/typography.scss b/src/pivotal-ui/components/typography/typography.scss index f7dcc607b..28d1bd97d 100644 --- a/src/pivotal-ui/components/typography/typography.scss +++ b/src/pivotal-ui/components/typography/typography.scss @@ -852,3 +852,30 @@ Headings are spaced so their line height and padding are consistent on one or ma ``` */ + +/*doc +--- +title: Helpers +name: type_helpers +parent: type +--- + +Helpers exist to provide utilities to our typography, so as accessiblity-only based text + +```html_example_table +Screen reader only! + +I am only to be read by screen readers +``` + +*/ + + +.a11y-only { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} diff --git a/src/pivotal-ui/javascripts/pivotal-ui.js b/src/pivotal-ui/javascripts/pivotal-ui.js index 8cdb1b8e4..e7c541c2a 100644 --- a/src/pivotal-ui/javascripts/pivotal-ui.js +++ b/src/pivotal-ui/javascripts/pivotal-ui.js @@ -6,3 +6,4 @@ require('pui-prismjs'); require('./scale')(); require('pui-react-back-to-top/jquery-plugin'); +require('@npmcorp/pui-css-drop-down-menu'); diff --git a/tasks/monolith.js b/tasks/monolith.js index d3627d163..c20d03822 100644 --- a/tasks/monolith.js +++ b/tasks/monolith.js @@ -26,7 +26,7 @@ gulp.task('monolith-setup-css-cache', () => { }); gulp.task('monolith-build-css-from-cache', () => { - const puiCssPrefixRegexp = /^pui-css-/; + const puiCssPrefixRegexp = /^(@npmcorp\/)?pui-css-/; const processPuiCssPackages = pipeline( map((cssDependency, callback) => { if (puiCssPrefixRegexp.test(cssDependency.packageName)) {