qpp-style 9.31.2 → 9.32.0

package/styles/components/sidebar/_sidebar-tooltip.scss

@@ -0,0 +1,33 @@
+.sidebar-tooltip {
+	display: none;
+	position: fixed;
+	left: 71px;
+	top: 0px;
+}
+
+.sidebar-tooltip-text {
+	position: relative;
+	display: block;
+	padding: 7px 10px;
+	background: $color-teal-light;
+	border-radius: 3px;
+	color: $color-slate-dark;
+	font-size: 13px;
+	font-weight: normal;
+	letter-spacing: 0px;
+}
+
+.sidebar-tooltip-text:after {
+	content: ' ';
+	height: 0;
+	width: 0;
+	position: absolute;
+	right: 100%;
+	top: 50%;
+	border: solid transparent;
+	border-color: transparent;
+	border-right-color: $color-teal-light;
+	border-width: 6px;
+	margin-top: -6px;
+	pointer-events: none;
+}

package/styles/components/sidebar/_sidebar.scss

@@ -0,0 +1,141 @@
+/*
+General sidebar styles
+ */
+
+.sidebar {
+	background: $color-slate;
+	box-shadow: 4px 0 10px 0 transparentize($color-black, 0.7);
+	color: $color-white;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	transition: width 0.6s ease-in-out;
+	width: $side-nav-expanded-width;
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		&.unstyled {
+			color: inherit;
+		}
+	}
+
+	hr {
+		border-top: 1px solid transparentize($color-white, 0.8);
+		height: 1px;
+		margin: 25px $side-nav-horizontal-padding;
+		width: auto;
+	}
+
+	ul {
+		line-height: 1.7;
+		list-style-type: none;
+		margin: 0;
+		padding: 2px 0;
+	}
+
+	svg {
+		position: relative;
+	}
+
+	.SVGInline {
+		display: none;
+	}
+
+	&.closed {
+		width: $side-nav-closed-width;
+	}
+
+	.alt-style {
+		background: $color-slate-dark;
+
+		.alt-style-header {
+			background: $color-slate;
+			padding-bottom: 25px;
+		}
+
+		.alt-style-nav {
+			padding-bottom: 25px;
+		}
+	}
+
+	/* Sidebar content */
+
+	.sidebar-content {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		overflow-x: hidden;
+		transition: overflow-x 0.6s;
+
+		.label {
+			@include typography('Rubik', 20px, 26px, $color-white);
+			display: block;
+			font-weight: normal;
+			padding: 30px 25px 20px;
+			text-align: left;
+			white-space: inherit;
+		}
+
+		.level-one-nav {
+			background-color: $color-slate;
+		}
+	}
+
+	/* Sidebar chart */
+
+	.chart-title {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		p {
+			margin: 0;
+		}
+
+		.title {
+			@include typography('Rubik', 16px, 22px, $color-white);
+			text-transform: uppercase;
+		}
+
+		.disclaimer {
+			@include typography(
+				'Rubik',
+				14px,
+				20px,
+				transparentize($color-white, 0.2)
+			);
+			align-items: center;
+			display: flex;
+			padding: 5px 0 10px;
+
+			svg {
+				height: 20px;
+				width: 20px;
+			}
+
+			.left-icon {
+				fill: transparentize($color-white, 0.2);
+				margin-right: 10px;
+			}
+
+			.right-icon {
+				fill: $color-teal-light;
+				margin-left: 10px;
+			}
+		}
+
+		.timestamp {
+			@include typography('Rubik', 13px, 20px, $color-white);
+			padding: 5px 0 20px;
+			text-transform: uppercase;
+		}
+	}
+}

package/styles/components/sidebar/project-specific/_wi.scss

@@ -0,0 +1,42 @@
+/*
+	WI specific styles
+ */
+
+.sidebar {
+	&.sidebar-wi-nav .sidebar-content {
+		> .animation-group > a.link-back {
+			background: $color-slate;
+			padding-bottom: 25px;
+		}
+
+		> .animation-group:nth-child(2) {
+			background: $color-slate;
+
+			> hr {
+				margin-bottom: 0;
+				margin-top: 0;
+			}
+		}
+
+		> .animation-group:nth-child(3) {
+			background: $color-slate;
+			padding-bottom: 25px;
+			padding-top: 25px;
+		}
+
+		> .animation-group:nth-child(4) {
+			padding: 25px $side-nav-horizontal-padding 0;
+
+			.quality-title {
+				@include typography('Rubik', 14px, 16px, $color-white);
+				font-weight: 500;
+				text-transform: uppercase;
+			}
+
+			.quality-subtitle {
+				@include typography('Rubik', 14px, 16px, $color-white);
+				padding: 10px 0 0;
+			}
+		}
+	}
+}

package/styles/qppds/components/_infotip-content.scss

@@ -0,0 +1,49 @@
+@import '../settings/index';
+
+.qpp-c-infotip-content {
+	position: relative;
+	// display: inline-block;
+
+	button {
+		position: relative;
+		cursor: pointer;
+	}
+
+	button:hover ~ .qpp-c-infotip__tooltip {
+		visibility: visible;
+		opacity: 1;
+		transition:
+			visibility 0s,
+			opacity 0.2s linear;
+	}
+
+	// .qpp-c-infotip__tooltip-container {
+	//   opacity: 0;
+	//   position: absolute;
+	//   transform: translateX(-44.5%);
+	//   bottom: 40px;
+	// }
+
+	.qpp-c-infotip__tooltip {
+		visibility: hidden;
+		opacity: 0;
+		width: 300px;
+		margin: 0;
+		padding: 20px;
+		text-align: left;
+		position: absolute;
+		transform: translateX(-45%);
+		bottom: 33px;
+	}
+
+	.qpp-c-infotip__tooltip:before {
+		content: '';
+		position: absolute;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		border-top: 10px solid rgb(51, 51, 51);
+		border-bottom: 10px solid transparent;
+		right: 50%;
+		bottom: -18px;
+	}
+}

package/styles/qppds/components/_spinner.scss

@@ -0,0 +1,46 @@
+.qpp-c-dropdown-menu__spinner {
+	height: 1.2em;
+	width: 1.2em;
+	border-width: (32px / 8);
+	padding: 0;
+	box-sizing: border-box;
+	display: inline-block;
+	position: relative;
+
+	&::before,
+	&::after {
+		border-radius: 50%;
+		border-style: solid;
+		box-sizing: border-box;
+		content: '';
+		display: block;
+		left: 0;
+		position: absolute;
+		top: 0;
+		height: 1.2em;
+		width: 1.2em;
+	}
+
+	&::before {
+		border-color: inherit;
+		opacity: 0.2;
+	}
+
+	&::after {
+		animation: spin 0.8s infinite linear;
+		border-bottom-color: transparent;
+		border-left-color: inherit;
+		border-right-color: transparent;
+		border-top-color: transparent;
+		transform: translateZ(0);
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}

package/styles/qppds/components/sidebar/_sidebar-animation.scss

@@ -1,125 +1,152 @@
-$drawerMaxHeight: 225px;
+$drawerMaxHeight: fit-content;
 $simpleMaxHeight: 105px;
 $chartMaxHeight: 306px;
 $detailsMaxHeight: 130px;
 
 @mixin delayKeyframes($name, $maxHeight) {
-	@keyframes delayRemove#{$name} {
-		0% {
-			max-height: $maxHeight;
-		}
-	
-		100% {
-			max-height: 0;
-			padding-top: 0;
-			padding-bottom: 0;
-		}
-	}
-
-	@keyframes delayAdd#{$name} {
-		0% {
-			max-height: 0;
-			padding-top: 0;
-			padding-bottom: 0;
-		}
-	
-		100% {
-			max-height: $maxHeight;
-		}
-	}
+  @keyframes delayRemove#{$name} {
+    0% {
+      max-height: $maxHeight;
+    }
+
+    100% {
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @keyframes delayAdd#{$name} {
+    0% {
+      max-height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    100% {
+      max-height: $maxHeight;
+    }
+  }
 }
-@include delayKeyframes('Drawer', $drawerMaxHeight);
+
+@mixin delayDrawerKeyframes($maxHeight) {
+  @keyframes delayRemoveDrawer {
+    0% {
+      height: $maxHeight;
+    }
+
+    100% {
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @keyframes delayAddDrawer {
+    0% {
+      height: 0;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    100% {
+      height: $maxHeight;
+    }
+  }
+}
+
+@include delayDrawerKeyframes($drawerMaxHeight);
 @include delayKeyframes('Simple', $simpleMaxHeight);
 @include delayKeyframes('Chart', $chartMaxHeight);
 @include delayKeyframes('Details', $detailsMaxHeight);
 
 .animation-group {
-	transition: opacity 0.5s ease-in-out;
-	opacity: 0;
-	overflow: hidden;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 0;
+  overflow: hidden;
 
-	&.background-highlight {
-		background-color: $color-slate-dark;
-	}
+  &.background-highlight {
+    background-color: $color-slate-dark;
+  }
 }
 
 .animation-group-enter {
-	opacity: 1;
-	transition-delay: 0.5s;
-
-	animation-delay: 0s;
-	animation-duration: 0.6s;
-	animation-fill-mode: forwards;
-	animation-name: delayAddSimple;
-	animation-timing-function: ease-in-out;
+  opacity: 1;
+  transition-delay: 0.5s;
+
+  animation-delay: 0s;
+  animation-duration: 0.6s;
+  animation-fill-mode: forwards;
+  animation-name: delayAddSimple;
+  animation-timing-function: ease-in-out;
 }
 
 .animation-group-exit {
-	opacity: 0;
+  opacity: 0;
 
-	animation-delay: 0.3s;
-	animation-duration: 0.6s;
-	animation-fill-mode: forwards;
-	animation-name: delayRemoveSimple;
-	animation-timing-function: ease-in-out;
+  animation-delay: 0.3s;
+  animation-duration: 0.6s;
+  animation-fill-mode: forwards;
+  animation-name: delayRemoveSimple;
+  animation-timing-function: ease-in-out;
 }
 
 // custom max heights
 .animation-group-details.animation-group-enter {
-	animation-name: delayAddDetails;
+  animation-name: delayAddDetails;
 }
 
-.animation-group-details.animation-group-exit {	
-	animation-name: delayRemoveDetails;
+.animation-group-details.animation-group-exit {
+  animation-name: delayRemoveDetails;
 }
 
 .animation-group-chart.animation-group-enter {
-	animation-name: delayAddChart;
+  animation-name: delayAddChart;
 }
 
-.animation-group-chart.animation-group-exit {	
-	animation-name: delayRemoveChart;
+.animation-group-chart.animation-group-exit {
+  animation-name: delayRemoveChart;
 }
 
 .link-drawer {
-	.animation-group-enter {
-		animation-name: delayAddDrawer;
-	}
+  .animation-group-enter {
+    animation-name: delayAddDrawer;
+  }
 
-	.animation-group-exit {	
-		animation-name: delayRemoveDrawer;
-	}
+  .animation-group-exit {
+    animation-name: delayRemoveDrawer;
+  }
 }
 
 .sidebar {
-	.animation-flat {
-		width: 100%;
-	}
-
-	&.closed {
-		transition-delay: 0.5s;
-
-		.animation-flat > nav > ul > li {
-			> a,
-			> .link-drawer > button {
-				transition: padding 0.7s ease-out 0.3s;
-				padding-left: 30px;
-			}
-		}
-	}
-
-	&:not(.closed) {
-		transition-delay: 0s;
-
-		.animation-flat {
-			transition-delay: 0s;
-
-			nav > ul > li {
-				> a,
-				> .link-drawer > button {
-					transition: padding 0.7s ease-out 0s;
-				}
-			}
-		}
-	}
+  .animation-flat {
+    width: 100%;
+  }
+
+  &.closed {
+    transition-delay: 0.5s;
+
+    .animation-flat > nav > ul > li {
+      > a,
+      > .link-drawer > button {
+        transition: padding 0.7s ease-out 0.3s;
+        padding-left: 30px;
+      }
+    }
+  }
+
+  &:not(.closed) {
+    transition-delay: 0s;
+
+    .animation-flat {
+      transition-delay: 0s;
+
+      nav > ul > li {
+        > a,
+        > .link-drawer > button {
+          transition: padding 0.7s ease-out 0s;
+        }
+      }
+    }
+  }
 }

package/components/CalloutBox/index.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import FeatherIcon from 'feather-icons-react';
-
-import Button from '../Button';
-
-const getCtaButton = (button) => {
-  if (button) {
-    if (React.isValidElement(button)) {
-      return button;
-    }
-    if (button.href) {
-      const { href, text, ...restLink } = button;
-      return (
-        <a
-          className="qpp-c-button qpp-c-button--secondary qpp-c-button--icon-after"
-          href={href}
-          {...restLink}
-        >
-          {text}
-          <FeatherIcon icon="chevron-right" />
-        </a>
-      );
-    }
-    const { onClick, text, ...restButton } = button;
-    return (
-      <Button
-        variant="secondary"
-        className="qpp-c-button--icon-after"
-        onClick={onClick}
-        {...restButton}
-      >
-        {text}
-        <FeatherIcon icon="chevron-right" />
-      </Button>
-    );
-  }
-  return null;
-};
-
-const CalloutBox = ({
-  title,
-  description,
-  button,
-  input,
-  children,
-  headerLevel,
-}) => {
-  const Header = `h${headerLevel}`;
-  return (
-    <aside className="qppds qpp-u-sm-padding--32 qpp-u-padding--24 qpp-u-fill--blue-70">
-      {title && (
-        <Header className="qpp-u-font-size--24 qpp-u-color--white qpp-u-margin-bottom--16 qpp-u-margin-top--0 qpp-u-font-weight--regular">
-          {title}
-        </Header>
-      )}
-      {description && (
-        <p className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
-          {description}
-        </p>
-      )}
-      {children && (
-        <div className="qpp-u-color--white qpp-u-margin-bottom--0 qpp-u-font-size--18">
-          {children}
-        </div>
-      )}
-      {(input || button) && (
-        <div className="qpp-u-display--flex qpp-u-align-items--center qpp-u-flex-wrap--wrap qpp-u-margin-top--24">
-          {input && (
-            <input
-              className="qpp-c-text-input qpp-u-sm-margin-right--16 qpp-u-margin-bottom--16 qpp-u-sm-margin-bottom--0 qpp-u-sm-width--auto qpp-u-width--100"
-              type="text"
-              {...input}
-            />
-          )}
-          {getCtaButton(button)}
-        </div>
-      )}
-    </aside>
-  );
-};
-
-CalloutBox.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  button: PropTypes.shape({
-    text: PropTypes.string,
-    onClick: PropTypes.func,
-    href: PropTypes.string,
-  }),
-  input: PropTypes.shape({
-    value: PropTypes.string,
-    name: PropTypes.string,
-    id: PropTypes.string,
-  }),
-  children: PropTypes.node,
-  headerLevel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-CalloutBox.defaultProps = {
-  title: null,
-  description: null,
-  button: null,
-  input: null,
-  children: null,
-  headerLevel: 2,
-};
-
-export default CalloutBox;