@blockchain-com/components - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

 # Blockchain Components
 
-## v0.2.0 ( Fri Aug 17 2018 09:40:16 GMT-0700 (Pacific Daylight Time) )
+## v1.0.0 ( Thu Aug 23 2018 11:53:21 GMT-0700 (Pacific Daylight Time) )
 
 
-## Features
+## Bug Fixes
 
-  - **organims**
-    - add footer / pagination / toggler / tooltip
-  ([70896990]([e-mail]:blockchain/blockchain-info-components/commit/7089699097ce080868263c8ab4c7071e5cce6732))
+  - **tooltip**
+    - fix flickering (#60)
+  ([6da49a19]([e-mail]:blockchain/blockchain-info-components/commit/6da49a190f5227ef471b399a8c88339a0abc1f30))
 
@@ -17,13 +17,5 @@
 
-  - **deps**
-    - update packages (#56)
-  ([2cfd9adc]([e-mail]:blockchain/blockchain-info-components/commit/2cfd9adc54b08b12181eb03e9453faa8384df68d))
-
-  - **locks**
-    - update lock files (#58)
-  ([c546342d]([e-mail]:blockchain/blockchain-info-components/commit/c546342df7f204031f8b14f441d14cd1203b3179))
-
   - **version**
-    - bump to v1.0.0 (#59)
-  ([2c515376]([e-mail]:blockchain/blockchain-info-components/commit/2c5153763a117afb3b416393269c933038181c12))
+    - bump to v1.1.0 (#62)
+  ([4c9c1b7e]([e-mail]:blockchain/blockchain-info-components/commit/4c9c1b7eda3ba5cb45370105ecba380e69231852))
 
@@ -30,0 +22,0 @@

esm/Atoms/Buttons/Button.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 0.7rem 1.875rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.125rem;\n  cursor: ", ";\n  outline: none;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  opacity: ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 600;\n\n  &:hover {\n    background-color: ", ";\n    transform: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 2.5rem;\n  line-height: 2.5rem;\n  width: 100%;\n  padding: 0 1rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.125rem;\n  cursor: ", ";\n  outline: none;\n  transition: all 0.3s ease 0s;\n  opacity: ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 600;\n\n  &:hover {\n    background-color: ", ";\n    transform: ", ";\n  }\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/index.js

 export { Background, Button, ButtonGroup, Container, Icon, Image, Input, Link, Pagination, PaginationItem, Panel, Section, Table, TableCell, TableRow, TabMenu, TabMenuItem, TabMenuToggler, Text, TextGroup } from './Atoms';
 export { CircleBadge, Cartridge, SearchBar, SearchBarUnderlined, SingleDropdown, Toggler, TogglerItem, Tooltip, TooltipHost, TooltipIcon } from './Molecules';
-export { Footer, FooterCategory, FooterElement, FooterGroup, FooterRow, Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler } from './Organisms';
+export { Footer, FooterCategory, FooterElement, FooterGroup, FooterLink, FooterRow, Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarDropdownItem, NavbarDropdownItemDescription, NavbarDropdownItemTitle, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler } from './Organisms';
 export { default as palette } from './Tools/palette';
 export { default as theme } from './Tools/theme';
 export { default as ThemeProvider } from './Tools/ThemeProvider';

esm/Molecules/Badges/CircleBadge.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: 0.4rem;\n  box-sizing: border-box;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: all 0.5s;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: 0.6rem;\n  box-sizing: border-box;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: all 0.5s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > img {\n    width: auto;\n  }\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Molecules/Cartridges/Cartridge.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  background-color: ", ";\n  padding: 0.3rem;\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  background-color: ", ";\n  font-family: ", ";\n  font-size: 0.625rem;\n  font-weight: 700;\n  word-wrap: normal;\n  text-transform: uppercase;\n  padding: 0.25rem;\n  margin-left: 0.75rem;\n  border-radius: 2px;\n"]);
 
@@ -19,8 +19,10 @@ _templateObject = function _templateObject() {
 import React from 'react';
+import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Text from '../../Atoms/Typography/Text';
-var Wrapper = styled(Text)(_templateObject(), function (props) {
+var Wrapper = styled.span(_templateObject(), function (props) {
   return props.theme['cartridgeColor'];
 }, function (props) {
   return props.theme['cartridgeBackgroundColor'];
+}, function (props) {
+  return props.theme['fontPrimary'];
 });
@@ -35,4 +37,5 @@
 
-Cartridge.propTypes = Text.propTypes;
-Cartridge.defaultProps = Text.defaultProps;
+Cartridge.propTypes = {
+  children: PropTypes.node.isRequired
+};
 export default Cartridge;

esm/Molecules/Cartridges/Cartridge.spec.js

@@ -12,32 +12,2 @@ import React from 'react'
   })
-
-  it('should render correctly with capitalize', () => {
-    const tree = mountWithTheme(<Cartridge capitalize />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with italic', () => {
-    const tree = mountWithTheme(<Cartridge italic />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with opacity', () => {
-    const tree = mountWithTheme(<Cartridge opacity={0.5} />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with size', () => {
-    const tree = mountWithTheme(<Cartridge size="18px" />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with uppercase', () => {
-    const tree = mountWithTheme(<Cartridge uppercase />)
-
-    expect(tree).toMatchSnapshot()
-  })
 })

esm/Molecules/Cartridges/Cartridge.stories.js

@@ -5,8 +5,4 @@ import React from 'react'
 
-storiesOf('Molecules/Cartridges/Cartridge', module)
-  .add('default', () => <Cartridge>MyCartridge</Cartridge>)
-  .add('with capitalize', () => <Cartridge capitalize>MyCartridge</Cartridge>)
-  .add('with italic', () => <Cartridge italic>MyCartridge</Cartridge>)
-  .add('with opacity', () => <Cartridge opacity={0.5}>MyCartridge</Cartridge>)
-  .add('with size', () => <Cartridge size="18px">MyCartridge</Cartridge>)
-  .add('with uppercase', () => <Cartridge uppercase>MyCartridge</Cartridge>)
+storiesOf('Molecules/Cartridges/Cartridge', module).add('default', () => (
+  <Cartridge>MyCartridge</Cartridge>
+))

esm/Molecules/Dropdowns/SingleDropdown.js

@@ -0,1 +1,3 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -5,4 +7,14 @@
 
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  color: ", ";\n  background-color: transparent;\n  appearance: none;\n  border: none;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  font-style: ", ";\n  border-radius: 0.3rem;\n  cursor: pointer;\n  outline: none;\n  text-align: left;\n  padding: 0.4rem 0;\n  box-sizing: border-box;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0;\n  min-width: 6rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  background-size: 1rem;\n  background-repeat: no-repeat;\n  background-position: 95% 0%;\n  background-image: url(", ");\n  appearance: none;\n  border: none;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  font-style: ", ";\n  border-radius: 0.3rem;\n  height: 2.5rem;\n  line-height: 2.5rem;\n  cursor: pointer;\n  outline: none;\n  text-align: left;\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: ", ";\n  min-width: 6rem;\n  position: relative;\n  border-radius: 3px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    margin-top: -5px;\n    z-index: 1;\n    text-align: center;\n    width: 0;\n    height: 0;\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-top: 8px solid ", ";\n    pointer-events: none;\n  }\n"]);
 
@@ -21,8 +33,10 @@ _templateObject = function _templateObject() {
 import styled from 'styled-components';
-import ImageMap from '../../Atoms/Images/ImageMap';
-var Wrapper = styled.select(_templateObject(), function (props) {
+var Wrapper = styled.div(_templateObject(), function (props) {
+  return props.width;
+}, function (props) {
+  return props.theme['dropdownArrowColor'];
+});
+var Select = styled.select(_templateObject2(), function (props) {
   return props.theme['dropdownColor'];
 }, function (props) {
-  return props.theme['dropdownBackgroundColor'];
-}, ImageMap.arrowDownSolid, function (props) {
   return props.theme['fontPrimary'];
@@ -40,6 +54,20 @@ }, function (props) {
 var SingleDropdown = function SingleDropdown(_ref) {
-  var items = _ref.items,
-      rest = _objectWithoutProperties(_ref, ["items"]);
+  var capitalize = _ref.capitalize,
+      italic = _ref.italic,
+      items = _ref.items,
+      size = _ref.size,
+      uppercase = _ref.uppercase,
+      weight = _ref.weight,
+      width = _ref.width,
+      rest = _objectWithoutProperties(_ref, ["capitalize", "italic", "items", "size", "uppercase", "weight", "width"]);
 
-  return React.createElement(Wrapper, rest, items.map(function (item) {
+  return React.createElement(Wrapper, _extends({
+    width: width
+  }, rest), React.createElement(Select, {
+    capitalize: capitalize,
+    italic: italic,
+    size: size,
+    uppercase: uppercase,
+    weight: weight
+  }, items.map(function (item) {
     return React.createElement("option", {
@@ -49,3 +77,3 @@ key: item.value,
     }, item.text);
-  }));
+  })));
 };
@@ -64,3 +92,4 @@
   value: PropTypes.any,
-  weight: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900])
+  weight: PropTypes.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900]),
+  width: PropTypes.string.isRequired
 };
@@ -72,4 +101,5 @@ SingleDropdown.defaultProps = {
   uppercase: false,
-  weight: 300
+  weight: 300,
+  width: '100%'
 };
 export default SingleDropdown;

esm/Molecules/Tooltips/Tooltip.js

@@ -7,4 +7,14 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  color: ", " !important;\n  border: 1px solid ", " !important;\n  background-color: ", " !important;\n  cursor: pointer;\n  max-width: 350px;\n  font-family: ", ";\n  font-size: 0.8rem;\n  font-weight: 300;\n  z-index: 5;\n  text-transform: none;\n  text-align: left;\n  pointer-events: auto !important;\n\n  &:hover {\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n\n  &.place-top {\n    &::before {\n      border-top-color: ", " !important;\n    }\n\n    &::after {\n      border-top-color: ", " !important;\n    }\n  }\n\n  &.place-left {\n    &::before {\n      border-left-color: ", " !important;\n    }\n\n    &::after {\n      border-left-color: ", " !important;\n    }\n  }\n\n  &.place-bottom {\n    &::before {\n      border-bottom-color: ", " !important;\n    }\n\n    &::after {\n      border-bottom-color: ", " !important;\n    }\n  }\n\n  &.place-right {\n    &::before {\n      border-right-color: ", " !important;\n    }\n\n    &::after {\n      border-right-color: ", " !important;\n    }\n  }\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  color: ", " !important;\n  border: 1px solid ", " !important;\n  background-color: ", " !important;\n  cursor: pointer;\n  max-width: 350px;\n  font-family: ", ";\n  font-size: 0.8rem;\n  font-weight: 300;\n  z-index: 5;\n  text-transform: none;\n  text-align: left;\n  pointer-events: auto !important;\n\n  &:hover {\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n\n  &.place-top {\n    &::before {\n      border-left: 9px solid transparent;\n      border-right: 9px solid transparent;\n      bottom: -7px;\n      left: 50%;\n      margin-left: -9px;\n      border-top: 7px solid ", " !important;\n    }\n\n    &::after {\n      border-top-color: ", " !important;\n    }\n  }\n\n  &.place-left {\n    &::before {\n      border-left-color: ", " !important;\n    }\n\n    &::after {\n      border-left-color: ", " !important;\n    }\n  }\n\n  &.place-bottom {\n    &::before {\n      border-bottom-color: ", " !important;\n    }\n\n    &::after {\n      border-bottom-color: ", " !important;\n    }\n  }\n\n  &.place-right {\n    &::before {\n      border-right-color: ", " !important;\n    }\n\n    &::after {\n      border-right-color: ", " !important;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  .__react_component_tooltip {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    left: -999em;\n    opacity: 0;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    top: -999em;\n    visibility: hidden;\n    z-index: 999;\n\n    &::before,\n    &::after {\n      content: \"\";\n      width: 0;\n      height: 0;\n      position: absolute;\n    }\n\n    &.show {\n      opacity: 0.9;\n      margin-top: 0;\n      margin-left: 0;\n      visibility: visible;\n    }\n\n    &.place-top {\n      margin-top: -10px;\n\n      &::before {\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        bottom: -8px;\n        left: 50%;\n        margin-left: -10px;\n      }\n\n      &::after {\n        border-left: 8px solid transparent;\n        border-right: 8px solid transparent;\n        bottom: -6px;\n        left: 50%;\n        margin-left: -8px;\n      }\n    }\n\n    &.place-bottom {\n      margin-top: 10px;\n\n      &::before {\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        top: -8px;\n        left: 50%;\n        margin-left: -10px;\n      }\n\n      &::after {\n        border-left: 8px solid transparent;\n        border-right: 8px solid transparent;\n        top: -6px;\n        left: 50%;\n        margin-left: -8px;\n      }\n    }\n\n    &.place-left {\n      margin-left: -10px;\n\n      &::before {\n        border-top: 6px solid transparent;\n        border-bottom: 6px solid transparent;\n        right: -8px;\n        top: 50%;\n        margin-top: -5px;\n      }\n\n      &::after {\n        border-top: 5px solid transparent;\n        border-bottom: 5px solid transparent;\n        right: -6px;\n        top: 50%;\n        margin-top: -4px;\n      }\n    }\n\n    &.place-right {\n      margin-left: 10px;\n\n      &::before {\n        border-top: 6px solid transparent;\n        border-bottom: 6px solid transparent;\n        left: -8px;\n        top: 50%;\n        margin-top: -5px;\n      }\n\n      &::after {\n        border-top: 5px solid transparent;\n        border-bottom: 5px solid transparent;\n        left: -6px;\n        top: 50%;\n        margin-top: -4px;\n      }\n    }\n\n    .multi-line {\n      display: block;\n      padding: 2px 0;\n      text-align: center;\n    }\n  }\n"]);
 
@@ -22,5 +32,6 @@ _templateObject = function _templateObject() {
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { injectGlobal } from 'styled-components';
 import ReactTooltip from 'react-tooltip';
-var StyledTip = styled(ReactTooltip)(_templateObject(), function (props) {
+injectGlobal(_templateObject());
+var StyledTip = styled(ReactTooltip)(_templateObject2(), function (props) {
   return props.theme['tooltipColor'];
@@ -27,0 +38,0 @@ }, function (props) {

esm/Molecules/Tooltips/TooltipHost.js

@@ -76,4 +76,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
   id: PropTypes.string.isRequired,
-  tip: PropTypes.string.isRequired
+  tip: PropTypes.string
 };
 export default TooltipHost;

esm/Organisms/Footer/FooterCategory.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-bottom: 1rem;\n"]);
+  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-bottom: 0.5rem;\n  letter-spacing: 1px;\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Footer/FooterElement.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-bottom: 1.3rem;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-top: 1.25rem;\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Footer/FooterRow.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n\n  & > :last-child {\n    margin-right: 0;\n    margin-bottom: 0;\n  }\n\n  @media (min-width: 62rem) {\n    flex-wrap: no-wrap;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  @media (min-width: 48rem) {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n  }\n\n  @media (min-width: 62rem) {\n    flex-wrap: no-wrap;\n  }\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Footer/index.js

@@ -5,3 +5,4 @@ import Footer from './Footer';
 import FooterGroup from './FooterGroup';
+import FooterLink from './FooterLink';
 import FooterRow from './FooterRow';
-export { Footer, FooterCategory, FooterElement, FooterGroup, FooterRow };
+export { Footer, FooterCategory, FooterElement, FooterGroup, FooterLink, FooterRow };

esm/Organisms/index.js

@@ -1,2 +0,2 @@
-export { Footer, FooterCategory, FooterElement, FooterGroup, FooterRow } from './Footer';
-export { Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler } from './Navbar';
+export { Footer, FooterCategory, FooterElement, FooterGroup, FooterLink, FooterRow } from './Footer';
+export { Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarDropdownItem, NavbarDropdownItemDescription, NavbarDropdownItemTitle, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler } from './Navbar';

esm/Organisms/Navbar/index.js

@@ -5,2 +5,5 @@ import Navbar from './Navbar';
 import NavbarDropdownHeader from './NavbarDropdownHeader';
+import NavbarDropdownItem from './NavbarDropdownItem';
+import NavbarDropdownItemDescription from './NavbarDropdownItemDescription';
+import NavbarDropdownItemTitle from './NavbarDropdownItemTitle';
 import NavbarHeader from './NavbarHeader';
@@ -12,2 +15,2 @@ import NavbarMenu from './NavbarMenu';
 import NavbarToggler from './NavbarToggler';
-export { Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler };
+export { Navbar, NavbarBrand, NavbarDropdownContent, NavbarDropdownHeader, NavbarDropdownItem, NavbarDropdownItemDescription, NavbarDropdownItemTitle, NavbarHeader, NavbarMenu, NavbarNav, NavbarNavDropdown, NavbarNavItem, NavbarToggler };

esm/Organisms/Navbar/Navbar.js

@@ -8,3 +8,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: ", ";\n  padding: 0 3rem;\n  box-sizing: border-box;\n"]);
 
@@ -11,0 +11,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Navbar/Navbar.stories.js

@@ -6,3 +6,2 @@ import React from 'react'
 import Image from '../../Atoms/Images/Image'
-import Text from '../../Atoms/Typography/Text'
 import Section from '../../Atoms/Containers/Section'
@@ -13,2 +12,5 @@ import Navbar from './Navbar'
 import NavbarDropdownHeader from './NavbarDropdownHeader'
+import NavbarDropdownItem from './NavbarDropdownItem'
+import NavbarDropdownItemDescription from './NavbarDropdownItemDescription'
+import NavbarDropdownItemTitle from './NavbarDropdownItemTitle'
 import NavbarHeader from './NavbarHeader'
@@ -22,3 +24,3 @@ import NavbarMenu from './NavbarMenu'
 const OrientSection = styled(Section)`
-  background-color: ${(props) => props.theme.palette['bigStone']};
+  background-color: ${(props) => props.theme.palette['orient']};
 `
@@ -30,3 +32,22 @@ const Wrapper = (props) => <OrientSection {...props} />
 const Content = () => (
-  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
+  <React.Fragment>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 1</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 2</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 3</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+  </React.Fragment>
 )
@@ -33,0 +54,0 @@

esm/Organisms/Navbar/NavbarBrand.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin-left: 20px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: relative;\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Navbar/NavbarDropdownContent.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  & > :last-child {\n    margin-bottom: 0 !important;\n  }\n\n  @media (min-width: 768px) {\n    margin-top: 15px;\n    padding: 30px;\n    border-radius: 10px;\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: 0 0 15px 0\n      ", ";\n\n    &::after,\n    &::before {\n      bottom: 100%;\n      left: 15%;\n      border: solid transparent;\n      content: ' ';\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &::after {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 10px;\n      margin-left: -10px;\n    }\n\n    &::before {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 12px;\n      margin-left: -12px;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  & > :last-child {\n    margin-bottom: 0 !important;\n  }\n\n  @media (max-width: 48rem) {\n    padding: 1.1rem 0;\n  }\n\n  @media (min-width: 48rem) {\n    margin-top: 15px;\n    padding: 2rem;\n    border-radius: 0.25rem;\n    box-sizing: border-box;\n    background-color: ", ";\n    box-shadow: 0 10px 60px -10px ", ",\n      0 8px 16px ", ";\n\n    &::after,\n    &::before {\n      bottom: 100%;\n      left: 10%;\n      border: solid transparent;\n      content: ' ';\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &::after {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 10px;\n      margin-left: -10px;\n    }\n\n    &::before {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 12px;\n      margin-left: -12px;\n    }\n  }\n"]);
 
@@ -17,3 +17,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 10px 0;\n  z-index: 10;\n\n  @media (min-width: 768px) {\n    position: absolute;\n    width: auto;\n    background-color: transparent;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  z-index: 10;\n\n  @media (min-width: 768px) {\n    position: absolute;\n    width: auto;\n    margin: 0.25rem 0;\n    background-color: transparent;\n  }\n"]);
 
@@ -36,6 +36,6 @@ _templateObject = function _templateObject() {
 }, function (props) {
-  return props.theme['navbarDropdownContentBackgroundColor'];
-}, function (props) {
   return props.theme['navbarDropdownContentShadowColor'];
 }, function (props) {
+  return props.theme['navbarDropdownContentShadowColor2'];
+}, function (props) {
   return props.theme['navbarDropdownContentBackgroundColor'];
@@ -42,0 +42,0 @@ }, function (props) {

esm/Organisms/Navbar/NavbarMenu.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: ", ";\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  padding: 60px 0 15px 0;\n  background-color: ", ";\n  z-index: 10;\n  transform: translate3d(0, 0, 0);\n\n  @media (min-width: 768px) {\n    position: relative;\n    top: initial;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    padding: 15px 0;\n    background-color: transparent;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: ", ";\n  flex-direction: column-reverse;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  padding: 4.5rem 1.5rem 1.5rem 1.5rem;\n  box-sizing: border-box;\n  background-color: ", ";\n  z-index: 10;\n  transform: translate3d(0, 0, 0);\n\n  @media (min-width: 48rem) {\n    position: relative;\n    top: initial;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 0;\n    background-color: transparent;\n  }\n"]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

esm/Organisms/Navbar/NavbarNavDropdown.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n  padding: 10px 15px;\n  box-sizing: border-box;\n\n  @media (min-width: 768px) {\n    & :last-child {\n      display: none;\n    }\n\n    &:hover {\n      & :last-child {\n        display: block;\n      }\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding: 0.5rem 0;\n  border-top: 0.5px solid\n    ", ";\n  box-sizing: border-box;\n\n  @media (min-width: 48rem) {\n    flex-grow: 1;\n    flex-shrink: 1;\n    flex-basis: auto;\n    width: auto;\n    padding: 0.75rem 1rem;\n    border-top: none;\n\n    & :last-child {\n      display: none;\n    }\n\n    &:hover {\n      & :last-child {\n        display: block;\n      }\n    }\n  }\n"]);
 
@@ -21,3 +21,5 @@ _templateObject = function _templateObject() {
 import styled from 'styled-components';
-var Wrapper = styled.li(_templateObject());
+var Wrapper = styled.li(_templateObject(), function (props) {
+  return props.theme['navbarDropdownContentBorderColor'];
+});
 
@@ -24,0 +26,0 @@ var NavbarNavItem = function NavbarNavItem(_ref) {

esm/Organisms/Navbar/NavbarNavItem.js

@@ -6,3 +6,3 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n  padding: 10px 15px;\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding: 0.5rem 0;\n  box-sizing: border-box;\n  border-top: 0.5px solid\n    ", ";\n\n  @media (min-width: 48rem) {\n    flex-grow: 1;\n    flex-shrink: 1;\n    flex-basis: auto;\n    width: auto;\n    margin-right: 1rem;\n    padding: 1rem;\n    border-top: none;\n  }\n"]);
 
@@ -21,3 +21,5 @@ _templateObject = function _templateObject() {
 import styled from 'styled-components';
-var Wrapper = styled.li(_templateObject());
+var Wrapper = styled.li(_templateObject(), function (props) {
+  return props.theme['navbarDropdownContentBorderColor'];
+});
 
@@ -24,0 +26,0 @@ var NavbarNavItem = function NavbarNavItem(_ref) {

esm/Organisms/Navbar/NavbarToggler.js

 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  z-index: 15;\n  margin-right: 20px;\n  fill: ", " !important;\n\n  &:hover {\n    fill: ", " !important;\n  }\n\n  @media (min-width: 48rem) {\n    display: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  z-index: 15;\n  fill: ", " !important;\n\n  &:hover {\n    fill: ", " !important;\n  }\n\n  @media (min-width: 48rem) {\n    display: none;\n  }\n"]);
 
@@ -4,0 +4,0 @@ _templateObject = function _templateObject() {

esm/Tools/palette.js

@@ -31,2 +31,4 @@ /* eslint-disable */
   blackAlpha75: 'rgba(0,0,0,0.75)',
+  blackAlpha25: 'rgba(0,0,0,0.25)',
+  blackAlpha10: 'rgba(0,0,0,0.10)',
   blackAlpha05: 'rgba(0,0,0,0.05)'
@@ -33,0 +35,0 @@ /* eslint-enable */

esm/Tools/theme.js

@@ -12,8 +12,8 @@ import palette from './palette';
   cartridgeColor: palette['white'],
-  cartridgeBackgroundColor: palette['orient'],
+  cartridgeBackgroundColor: palette['cerulean'],
   circleBadgeBackgroundColor: palette['gray2'],
   circleBadgeHoverColor: palette['orient'],
   dropdownColor: palette['gray5'],
-  dropdownBackgroundColor: palette['transparent'],
-  footerCategoryColor: palette['gray6'],
+  dropdownArrowColor: palette['gray5'],
+  footerCategoryColor: palette['gray7'],
   iconColor: palette['gray5'],
@@ -28,4 +28,9 @@ iconHoverColor: palette['gray4'],
   navbarDropdownContentBackgroundColor: palette['white'],
-  navbarDropdownContentShadowColor: palette['gray5'],
+  navbarDropdownContentBorderColor: palette['gray3'],
+  navbarDropdownContentShadowColor: palette['blackAlpha25'],
+  navbarDropdownContentShadowColor2: palette['blackAlpha10'],
   navbarDropdownHeaderColor: palette['white'],
+  navbarDropdownTitleColor: palette['azure'],
+  navbarDropdownTitleMobileColor: palette['white'],
+  navbarDropdownDescriptionColor: palette['gray3'],
   navbarMenuBagroundColor: palette['orient'],
@@ -32,0 +37,0 @@ navbarTogglerColor: palette['white'],

lib/Atoms/Buttons/Button.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  padding: 0.7rem 1.875rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.125rem;\n  cursor: ", ";\n  outline: none;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  opacity: ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 600;\n\n  &:hover {\n    background-color: ", ";\n    transform: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: 2.5rem;\n  line-height: 2.5rem;\n  width: 100%;\n  padding: 0 1rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  border: none;\n  border-radius: 0.125rem;\n  cursor: ", ";\n  outline: none;\n  transition: all 0.3s ease 0s;\n  opacity: ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 600;\n\n  &:hover {\n    background-color: ", ";\n    transform: ", ";\n  }\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/index.js

@@ -210,2 +210,8 @@ "use strict";
 });
+Object.defineProperty(exports, "FooterLink", {
+  enumerable: true,
+  get: function get() {
+    return _Organisms.FooterLink;
+  }
+});
 Object.defineProperty(exports, "FooterRow", {
@@ -241,2 +247,20 @@ enumerable: true,
 });
+Object.defineProperty(exports, "NavbarDropdownItem", {
+  enumerable: true,
+  get: function get() {
+    return _Organisms.NavbarDropdownItem;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemDescription", {
+  enumerable: true,
+  get: function get() {
+    return _Organisms.NavbarDropdownItemDescription;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemTitle", {
+  enumerable: true,
+  get: function get() {
+    return _Organisms.NavbarDropdownItemTitle;
+  }
+});
 Object.defineProperty(exports, "NavbarHeader", {
@@ -243,0 +267,0 @@ enumerable: true,

lib/Molecules/Badges/CircleBadge.js

@@ -25,3 +25,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: 0.4rem;\n  box-sizing: border-box;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: all 0.5s;\n\n  &:hover {\n    background-color: ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  padding: 0.6rem;\n  box-sizing: border-box;\n  border-radius: 50%;\n  background-color: ", ";\n  transition: all 0.5s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & > img {\n    width: auto;\n  }\n"]);
 
@@ -28,0 +28,0 @@ _templateObject = function _templateObject() {

lib/Molecules/Cartridges/Cartridge.js

@@ -10,6 +10,6 @@ "use strict";
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _Text = _interopRequireDefault(require("../../Atoms/Typography/Text"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,3 +22,3 @@
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  background-color: ", ";\n  padding: 0.3rem;\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  background-color: ", ";\n  font-family: ", ";\n  font-size: 0.625rem;\n  font-weight: 700;\n  word-wrap: normal;\n  text-transform: uppercase;\n  padding: 0.25rem;\n  margin-left: 0.75rem;\n  border-radius: 2px;\n"]);
 
@@ -34,6 +34,8 @@ _templateObject = function _templateObject() {
 
-var Wrapper = (0, _styledComponents.default)(_Text.default)(_templateObject(), function (props) {
+var Wrapper = _styledComponents.default.span(_templateObject(), function (props) {
   return props.theme['cartridgeColor'];
 }, function (props) {
   return props.theme['cartridgeBackgroundColor'];
+}, function (props) {
+  return props.theme['fontPrimary'];
 });
@@ -48,5 +50,6 @@
 
-Cartridge.propTypes = _Text.default.propTypes;
-Cartridge.defaultProps = _Text.default.defaultProps;
+Cartridge.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
 var _default = Cartridge;
 exports.default = _default;

lib/Molecules/Cartridges/Cartridge.spec.js

@@ -12,32 +12,2 @@ import React from 'react'
   })
-
-  it('should render correctly with capitalize', () => {
-    const tree = mountWithTheme(<Cartridge capitalize />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with italic', () => {
-    const tree = mountWithTheme(<Cartridge italic />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with opacity', () => {
-    const tree = mountWithTheme(<Cartridge opacity={0.5} />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with size', () => {
-    const tree = mountWithTheme(<Cartridge size="18px" />)
-
-    expect(tree).toMatchSnapshot()
-  })
-
-  it('should render correctly with uppercase', () => {
-    const tree = mountWithTheme(<Cartridge uppercase />)
-
-    expect(tree).toMatchSnapshot()
-  })
 })

lib/Molecules/Cartridges/Cartridge.stories.js

@@ -5,8 +5,4 @@ import React from 'react'
 
-storiesOf('Molecules/Cartridges/Cartridge', module)
-  .add('default', () => <Cartridge>MyCartridge</Cartridge>)
-  .add('with capitalize', () => <Cartridge capitalize>MyCartridge</Cartridge>)
-  .add('with italic', () => <Cartridge italic>MyCartridge</Cartridge>)
-  .add('with opacity', () => <Cartridge opacity={0.5}>MyCartridge</Cartridge>)
-  .add('with size', () => <Cartridge size="18px">MyCartridge</Cartridge>)
-  .add('with uppercase', () => <Cartridge uppercase>MyCartridge</Cartridge>)
+storiesOf('Molecules/Cartridges/Cartridge', module).add('default', () => (
+  <Cartridge>MyCartridge</Cartridge>
+))

lib/Molecules/Dropdowns/SingleDropdown.js

@@ -14,6 +14,6 @@ "use strict";
 
-var _ImageMap = _interopRequireDefault(require("../../Atoms/Images/ImageMap"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -23,4 +23,14 @@
 
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  color: ", ";\n  background-color: transparent;\n  appearance: none;\n  border: none;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  font-style: ", ";\n  border-radius: 0.3rem;\n  cursor: pointer;\n  outline: none;\n  text-align: left;\n  padding: 0.4rem 0;\n  box-sizing: border-box;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin-bottom: 0;\n  min-width: 6rem;\n  box-sizing: border-box;\n  color: ", ";\n  background-color: ", ";\n  background-size: 1rem;\n  background-repeat: no-repeat;\n  background-position: 95% 0%;\n  background-image: url(", ");\n  appearance: none;\n  border: none;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  font-style: ", ";\n  border-radius: 0.3rem;\n  height: 2.5rem;\n  line-height: 2.5rem;\n  cursor: pointer;\n  outline: none;\n  text-align: left;\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: ", ";\n  min-width: 6rem;\n  position: relative;\n  border-radius: 3px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    margin-top: -5px;\n    z-index: 1;\n    text-align: center;\n    width: 0;\n    height: 0;\n    border-left: 8px solid transparent;\n    border-right: 8px solid transparent;\n    border-top: 8px solid ", ";\n    pointer-events: none;\n  }\n"]);
 
@@ -36,7 +46,11 @@ _templateObject = function _templateObject() {
 
-var Wrapper = _styledComponents.default.select(_templateObject(), function (props) {
+var Wrapper = _styledComponents.default.div(_templateObject(), function (props) {
+  return props.width;
+}, function (props) {
+  return props.theme['dropdownArrowColor'];
+});
+
+var Select = _styledComponents.default.select(_templateObject2(), function (props) {
   return props.theme['dropdownColor'];
 }, function (props) {
-  return props.theme['dropdownBackgroundColor'];
-}, _ImageMap.default.arrowDownSolid, function (props) {
   return props.theme['fontPrimary'];
@@ -54,6 +68,20 @@ }, function (props) {
 var SingleDropdown = function SingleDropdown(_ref) {
-  var items = _ref.items,
-      rest = _objectWithoutProperties(_ref, ["items"]);
+  var capitalize = _ref.capitalize,
+      italic = _ref.italic,
+      items = _ref.items,
+      size = _ref.size,
+      uppercase = _ref.uppercase,
+      weight = _ref.weight,
+      width = _ref.width,
+      rest = _objectWithoutProperties(_ref, ["capitalize", "italic", "items", "size", "uppercase", "weight", "width"]);
 
-  return _react.default.createElement(Wrapper, rest, items.map(function (item) {
+  return _react.default.createElement(Wrapper, _extends({
+    width: width
+  }, rest), _react.default.createElement(Select, {
+    capitalize: capitalize,
+    italic: italic,
+    size: size,
+    uppercase: uppercase,
+    weight: weight
+  }, items.map(function (item) {
     return _react.default.createElement("option", {
@@ -63,3 +91,3 @@ key: item.value,
     }, item.text);
-  }));
+  })));
 };
@@ -78,3 +106,4 @@
   value: _propTypes.default.any,
-  weight: _propTypes.default.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900])
+  weight: _propTypes.default.oneOf([100, 200, 300, 400, 500, 600, 700, 800, 900]),
+  width: _propTypes.default.string.isRequired
 };
@@ -86,5 +115,6 @@ SingleDropdown.defaultProps = {
   uppercase: false,
-  weight: 300
+  weight: 300,
+  width: '100%'
 };
 var _default = SingleDropdown;
 exports.default = _default;

lib/Molecules/Tooltips/Tooltip.js

@@ -12,6 +12,8 @@ "use strict";
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _reactTooltip = _interopRequireDefault(require("react-tooltip"));
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,4 +27,14 @@
 
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["\n  color: ", " !important;\n  border: 1px solid ", " !important;\n  background-color: ", " !important;\n  cursor: pointer;\n  max-width: 350px;\n  font-family: ", ";\n  font-size: 0.8rem;\n  font-weight: 300;\n  z-index: 5;\n  text-transform: none;\n  text-align: left;\n  pointer-events: auto !important;\n\n  &:hover {\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n\n  &.place-top {\n    &::before {\n      border-top-color: ", " !important;\n    }\n\n    &::after {\n      border-top-color: ", " !important;\n    }\n  }\n\n  &.place-left {\n    &::before {\n      border-left-color: ", " !important;\n    }\n\n    &::after {\n      border-left-color: ", " !important;\n    }\n  }\n\n  &.place-bottom {\n    &::before {\n      border-bottom-color: ", " !important;\n    }\n\n    &::after {\n      border-bottom-color: ", " !important;\n    }\n  }\n\n  &.place-right {\n    &::before {\n      border-right-color: ", " !important;\n    }\n\n    &::after {\n      border-right-color: ", " !important;\n    }\n  }\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  color: ", " !important;\n  border: 1px solid ", " !important;\n  background-color: ", " !important;\n  cursor: pointer;\n  max-width: 350px;\n  font-family: ", ";\n  font-size: 0.8rem;\n  font-weight: 300;\n  z-index: 5;\n  text-transform: none;\n  text-align: left;\n  pointer-events: auto !important;\n\n  &:hover {\n    visibility: visible !important;\n    opacity: 1 !important;\n  }\n\n  &.place-top {\n    &::before {\n      border-left: 9px solid transparent;\n      border-right: 9px solid transparent;\n      bottom: -7px;\n      left: 50%;\n      margin-left: -9px;\n      border-top: 7px solid ", " !important;\n    }\n\n    &::after {\n      border-top-color: ", " !important;\n    }\n  }\n\n  &.place-left {\n    &::before {\n      border-left-color: ", " !important;\n    }\n\n    &::after {\n      border-left-color: ", " !important;\n    }\n  }\n\n  &.place-bottom {\n    &::before {\n      border-bottom-color: ", " !important;\n    }\n\n    &::after {\n      border-bottom-color: ", " !important;\n    }\n  }\n\n  &.place-right {\n    &::before {\n      border-right-color: ", " !important;\n    }\n\n    &::after {\n      border-right-color: ", " !important;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  .__react_component_tooltip {\n    border-radius: 3px;\n    display: inline-block;\n    font-size: 13px;\n    left: -999em;\n    opacity: 0;\n    padding: 8px 21px;\n    position: fixed;\n    pointer-events: none;\n    transition: opacity 0.3s ease-out;\n    top: -999em;\n    visibility: hidden;\n    z-index: 999;\n\n    &::before,\n    &::after {\n      content: \"\";\n      width: 0;\n      height: 0;\n      position: absolute;\n    }\n\n    &.show {\n      opacity: 0.9;\n      margin-top: 0;\n      margin-left: 0;\n      visibility: visible;\n    }\n\n    &.place-top {\n      margin-top: -10px;\n\n      &::before {\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        bottom: -8px;\n        left: 50%;\n        margin-left: -10px;\n      }\n\n      &::after {\n        border-left: 8px solid transparent;\n        border-right: 8px solid transparent;\n        bottom: -6px;\n        left: 50%;\n        margin-left: -8px;\n      }\n    }\n\n    &.place-bottom {\n      margin-top: 10px;\n\n      &::before {\n        border-left: 10px solid transparent;\n        border-right: 10px solid transparent;\n        top: -8px;\n        left: 50%;\n        margin-left: -10px;\n      }\n\n      &::after {\n        border-left: 8px solid transparent;\n        border-right: 8px solid transparent;\n        top: -6px;\n        left: 50%;\n        margin-left: -8px;\n      }\n    }\n\n    &.place-left {\n      margin-left: -10px;\n\n      &::before {\n        border-top: 6px solid transparent;\n        border-bottom: 6px solid transparent;\n        right: -8px;\n        top: 50%;\n        margin-top: -5px;\n      }\n\n      &::after {\n        border-top: 5px solid transparent;\n        border-bottom: 5px solid transparent;\n        right: -6px;\n        top: 50%;\n        margin-top: -4px;\n      }\n    }\n\n    &.place-right {\n      margin-left: 10px;\n\n      &::before {\n        border-top: 6px solid transparent;\n        border-bottom: 6px solid transparent;\n        left: -8px;\n        top: 50%;\n        margin-top: -5px;\n      }\n\n      &::after {\n        border-top: 5px solid transparent;\n        border-bottom: 5px solid transparent;\n        left: -6px;\n        top: 50%;\n        margin-top: -4px;\n      }\n    }\n\n    .multi-line {\n      display: block;\n      padding: 2px 0;\n      text-align: center;\n    }\n  }\n"]);
 
@@ -38,3 +50,4 @@ _templateObject = function _templateObject() {
 
-var StyledTip = (0, _styledComponents.default)(_reactTooltip.default)(_templateObject(), function (props) {
+(0, _styledComponents.injectGlobal)(_templateObject());
+var StyledTip = (0, _styledComponents.default)(_reactTooltip.default)(_templateObject2(), function (props) {
   return props.theme['tooltipColor'];
@@ -41,0 +54,0 @@ }, function (props) {

lib/Molecules/Tooltips/TooltipHost.js

@@ -89,5 +89,5 @@ "use strict";
   id: _propTypes.default.string.isRequired,
-  tip: _propTypes.default.string.isRequired
+  tip: _propTypes.default.string
 };
 var _default = TooltipHost;
 exports.default = _default;

lib/Organisms/Footer/FooterCategory.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-bottom: 1rem;\n"]);
+  var data = _taggedTemplateLiteral(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.875rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-bottom: 0.5rem;\n  letter-spacing: 1px;\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Footer/FooterElement.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-bottom: 1.3rem;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-top: 1.25rem;\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Footer/FooterRow.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n\n  & > :last-child {\n    margin-right: 0;\n    margin-bottom: 0;\n  }\n\n  @media (min-width: 62rem) {\n    flex-wrap: no-wrap;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  @media (min-width: 48rem) {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    width: 100%;\n  }\n\n  @media (min-width: 62rem) {\n    flex-wrap: no-wrap;\n  }\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Footer/index.js

@@ -30,2 +30,8 @@ "use strict";
 });
+Object.defineProperty(exports, "FooterLink", {
+  enumerable: true,
+  get: function get() {
+    return _FooterLink.default;
+  }
+});
 Object.defineProperty(exports, "FooterRow", {
@@ -46,4 +52,6 @@ enumerable: true,
 
+var _FooterLink = _interopRequireDefault(require("./FooterLink"));
+
 var _FooterRow = _interopRequireDefault(require("./FooterRow"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

lib/Organisms/index.js

@@ -30,2 +30,8 @@ "use strict";
 });
+Object.defineProperty(exports, "FooterLink", {
+  enumerable: true,
+  get: function get() {
+    return _Footer.FooterLink;
+  }
+});
 Object.defineProperty(exports, "FooterRow", {
@@ -61,2 +67,20 @@ enumerable: true,
 });
+Object.defineProperty(exports, "NavbarDropdownItem", {
+  enumerable: true,
+  get: function get() {
+    return _Navbar.NavbarDropdownItem;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemDescription", {
+  enumerable: true,
+  get: function get() {
+    return _Navbar.NavbarDropdownItemDescription;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemTitle", {
+  enumerable: true,
+  get: function get() {
+    return _Navbar.NavbarDropdownItemTitle;
+  }
+});
 Object.defineProperty(exports, "NavbarHeader", {
@@ -63,0 +87,0 @@ enumerable: true,

lib/Organisms/Navbar/index.js

@@ -30,2 +30,20 @@ "use strict";
 });
+Object.defineProperty(exports, "NavbarDropdownItem", {
+  enumerable: true,
+  get: function get() {
+    return _NavbarDropdownItem.default;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemDescription", {
+  enumerable: true,
+  get: function get() {
+    return _NavbarDropdownItemDescription.default;
+  }
+});
+Object.defineProperty(exports, "NavbarDropdownItemTitle", {
+  enumerable: true,
+  get: function get() {
+    return _NavbarDropdownItemTitle.default;
+  }
+});
 Object.defineProperty(exports, "NavbarHeader", {
@@ -76,2 +94,8 @@ enumerable: true,
 
+var _NavbarDropdownItem = _interopRequireDefault(require("./NavbarDropdownItem"));
+
+var _NavbarDropdownItemDescription = _interopRequireDefault(require("./NavbarDropdownItemDescription"));
+
+var _NavbarDropdownItemTitle = _interopRequireDefault(require("./NavbarDropdownItemTitle"));
+
 var _NavbarHeader = _interopRequireDefault(require("./NavbarHeader"));
@@ -78,0 +102,0 @@

lib/Organisms/Navbar/Navbar.js

@@ -23,3 +23,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: ", ";\n  padding: 0 3rem;\n  box-sizing: border-box;\n"]);
 
@@ -26,0 +26,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Navbar/Navbar.stories.js

@@ -6,3 +6,2 @@ import React from 'react'
 import Image from '../../Atoms/Images/Image'
-import Text from '../../Atoms/Typography/Text'
 import Section from '../../Atoms/Containers/Section'
@@ -13,2 +12,5 @@ import Navbar from './Navbar'
 import NavbarDropdownHeader from './NavbarDropdownHeader'
+import NavbarDropdownItem from './NavbarDropdownItem'
+import NavbarDropdownItemDescription from './NavbarDropdownItemDescription'
+import NavbarDropdownItemTitle from './NavbarDropdownItemTitle'
 import NavbarHeader from './NavbarHeader'
@@ -22,3 +24,3 @@ import NavbarMenu from './NavbarMenu'
 const OrientSection = styled(Section)`
-  background-color: ${(props) => props.theme.palette['bigStone']};
+  background-color: ${(props) => props.theme.palette['orient']};
 `
@@ -30,3 +32,22 @@ const Wrapper = (props) => <OrientSection {...props} />
 const Content = () => (
-  <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
+  <React.Fragment>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 1</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 2</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+    <NavbarDropdownItem>
+      <NavbarDropdownItemTitle>Link 3</NavbarDropdownItemTitle>
+      <NavbarDropdownItemDescription>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </NavbarDropdownItemDescription>
+    </NavbarDropdownItem>
+  </React.Fragment>
 )
@@ -33,0 +54,0 @@

lib/Organisms/Navbar/NavbarBrand.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  margin-left: 20px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  display: relative;\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Navbar/NavbarDropdownContent.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  & > :last-child {\n    margin-bottom: 0 !important;\n  }\n\n  @media (min-width: 768px) {\n    margin-top: 15px;\n    padding: 30px;\n    border-radius: 10px;\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid\n      ", ";\n    box-shadow: 0 0 15px 0\n      ", ";\n\n    &::after,\n    &::before {\n      bottom: 100%;\n      left: 15%;\n      border: solid transparent;\n      content: ' ';\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &::after {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 10px;\n      margin-left: -10px;\n    }\n\n    &::before {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 12px;\n      margin-left: -12px;\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n\n  & > :last-child {\n    margin-bottom: 0 !important;\n  }\n\n  @media (max-width: 48rem) {\n    padding: 1.1rem 0;\n  }\n\n  @media (min-width: 48rem) {\n    margin-top: 15px;\n    padding: 2rem;\n    border-radius: 0.25rem;\n    box-sizing: border-box;\n    background-color: ", ";\n    box-shadow: 0 10px 60px -10px ", ",\n      0 8px 16px ", ";\n\n    &::after,\n    &::before {\n      bottom: 100%;\n      left: 10%;\n      border: solid transparent;\n      content: ' ';\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n    }\n\n    &::after {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 10px;\n      margin-left: -10px;\n    }\n\n    &::before {\n      border-color: transparent;\n      border-bottom-color: ", ";\n      border-width: 12px;\n      margin-left: -12px;\n    }\n  }\n"]);
 
@@ -32,3 +32,3 @@ _templateObject2 = function _templateObject2() {
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: 10px 0;\n  z-index: 10;\n\n  @media (min-width: 768px) {\n    position: absolute;\n    width: auto;\n    background-color: transparent;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  z-index: 10;\n\n  @media (min-width: 768px) {\n    position: absolute;\n    width: auto;\n    margin: 0.25rem 0;\n    background-color: transparent;\n  }\n"]);
 
@@ -49,6 +49,6 @@ _templateObject = function _templateObject() {
 }, function (props) {
-  return props.theme['navbarDropdownContentBackgroundColor'];
-}, function (props) {
   return props.theme['navbarDropdownContentShadowColor'];
 }, function (props) {
+  return props.theme['navbarDropdownContentShadowColor2'];
+}, function (props) {
   return props.theme['navbarDropdownContentBackgroundColor'];
@@ -55,0 +55,0 @@ }, function (props) {

lib/Organisms/Navbar/NavbarMenu.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: ", ";\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  padding: 60px 0 15px 0;\n  background-color: ", ";\n  z-index: 10;\n  transform: translate3d(0, 0, 0);\n\n  @media (min-width: 768px) {\n    position: relative;\n    top: initial;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    padding: 15px 0;\n    background-color: transparent;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: ", ";\n  flex-direction: column-reverse;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 100%;\n  padding: 4.5rem 1.5rem 1.5rem 1.5rem;\n  box-sizing: border-box;\n  background-color: ", ";\n  z-index: 10;\n  transform: translate3d(0, 0, 0);\n\n  @media (min-width: 48rem) {\n    position: relative;\n    top: initial;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 0;\n    background-color: transparent;\n  }\n"]);
 
@@ -24,0 +24,0 @@ _templateObject = function _templateObject() {

lib/Organisms/Navbar/NavbarNavDropdown.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n  padding: 10px 15px;\n  box-sizing: border-box;\n\n  @media (min-width: 768px) {\n    & :last-child {\n      display: none;\n    }\n\n    &:hover {\n      & :last-child {\n        display: block;\n      }\n    }\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding: 0.5rem 0;\n  border-top: 0.5px solid\n    ", ";\n  box-sizing: border-box;\n\n  @media (min-width: 48rem) {\n    flex-grow: 1;\n    flex-shrink: 1;\n    flex-basis: auto;\n    width: auto;\n    padding: 0.75rem 1rem;\n    border-top: none;\n\n    & :last-child {\n      display: none;\n    }\n\n    &:hover {\n      & :last-child {\n        display: block;\n      }\n    }\n  }\n"]);
 
@@ -33,3 +33,5 @@ _templateObject = function _templateObject() {
 
-var Wrapper = _styledComponents.default.li(_templateObject());
+var Wrapper = _styledComponents.default.li(_templateObject(), function (props) {
+  return props.theme['navbarDropdownContentBorderColor'];
+});
 
@@ -36,0 +38,0 @@ var NavbarNavItem = function NavbarNavItem(_ref) {

lib/Organisms/Navbar/NavbarNavItem.js

@@ -21,3 +21,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  flex-grow: 1;\n  flex-shrink: 1;\n  flex-basis: auto;\n  padding: 10px 15px;\n  box-sizing: border-box;\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  padding: 0.5rem 0;\n  box-sizing: border-box;\n  border-top: 0.5px solid\n    ", ";\n\n  @media (min-width: 48rem) {\n    flex-grow: 1;\n    flex-shrink: 1;\n    flex-basis: auto;\n    width: auto;\n    margin-right: 1rem;\n    padding: 1rem;\n    border-top: none;\n  }\n"]);
 
@@ -33,3 +33,5 @@ _templateObject = function _templateObject() {
 
-var Wrapper = _styledComponents.default.li(_templateObject());
+var Wrapper = _styledComponents.default.li(_templateObject(), function (props) {
+  return props.theme['navbarDropdownContentBorderColor'];
+});
 
@@ -36,0 +38,0 @@ var NavbarNavItem = function NavbarNavItem(_ref) {

lib/Organisms/Navbar/NavbarToggler.js

@@ -19,3 +19,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  z-index: 15;\n  margin-right: 20px;\n  fill: ", " !important;\n\n  &:hover {\n    fill: ", " !important;\n  }\n\n  @media (min-width: 48rem) {\n    display: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  z-index: 15;\n  fill: ", " !important;\n\n  &:hover {\n    fill: ", " !important;\n  }\n\n  @media (min-width: 48rem) {\n    display: none;\n  }\n"]);
 
@@ -22,0 +22,0 @@ _templateObject = function _templateObject() {

lib/Tools/palette.js

@@ -38,2 +38,4 @@ "use strict";
   blackAlpha75: 'rgba(0,0,0,0.75)',
+  blackAlpha25: 'rgba(0,0,0,0.25)',
+  blackAlpha10: 'rgba(0,0,0,0.10)',
   blackAlpha05: 'rgba(0,0,0,0.05)'
@@ -40,0 +42,0 @@ /* eslint-enable */

lib/Tools/theme.js

@@ -22,8 +22,8 @@ "use strict";
   cartridgeColor: _palette.default['white'],
-  cartridgeBackgroundColor: _palette.default['orient'],
+  cartridgeBackgroundColor: _palette.default['cerulean'],
   circleBadgeBackgroundColor: _palette.default['gray2'],
   circleBadgeHoverColor: _palette.default['orient'],
   dropdownColor: _palette.default['gray5'],
-  dropdownBackgroundColor: _palette.default['transparent'],
-  footerCategoryColor: _palette.default['gray6'],
+  dropdownArrowColor: _palette.default['gray5'],
+  footerCategoryColor: _palette.default['gray7'],
   iconColor: _palette.default['gray5'],
@@ -38,4 +38,9 @@ iconHoverColor: _palette.default['gray4'],
   navbarDropdownContentBackgroundColor: _palette.default['white'],
-  navbarDropdownContentShadowColor: _palette.default['gray5'],
+  navbarDropdownContentBorderColor: _palette.default['gray3'],
+  navbarDropdownContentShadowColor: _palette.default['blackAlpha25'],
+  navbarDropdownContentShadowColor2: _palette.default['blackAlpha10'],
   navbarDropdownHeaderColor: _palette.default['white'],
+  navbarDropdownTitleColor: _palette.default['azure'],
+  navbarDropdownTitleMobileColor: _palette.default['white'],
+  navbarDropdownDescriptionColor: _palette.default['gray3'],
   navbarMenuBagroundColor: _palette.default['orient'],
@@ -42,0 +47,0 @@ navbarTogglerColor: _palette.default['white'],

package.json

 {
   "name": "@blockchain-com/components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Blockchain.com components library",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2879551

increased by3.74%

Number of package files

693

increased by3.59%

Lines of code

13393

increased by4.08%

Worsened metrics

Number of low supply chain risk alerts

99

increased by2.06%

No dependency changes