@eaze/hero - npm Package Compare versions

Comparing version 3.0.0-0 to 3.0.0-1

dist/index.js

@@ -7,8 +7,229 @@ 'use strict';
 
-var _hero = require('./hero');
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _hero2 = _interopRequireDefault(_hero);
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
+var _hexRgb = require('hex-rgb');
+
+var _hexRgb2 = _interopRequireDefault(_hexRgb);
+
+var _color = require('@eaze/color');
+
+var _color2 = _interopRequireDefault(_color);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _typography = require('@eaze/typography');
+
+var _reactEmotion = require('react-emotion');
+
+var _reactEmotion2 = _interopRequireDefault(_reactEmotion);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-exports.default = _hero2.default;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Content = /*#__PURE__*/(0, _reactEmotion2.default)('div')('max-width:', function (_ref) {
+  var slide = _ref.slide;
+  return slide ? '91rem' : '100rem';
+}, ';margin:0 auto;width:100%;position:relative;height:30rem;', function (_ref2) {
+  var slide = _ref2.slide;
+
+  return slide && '@media(min-width: 768px) {\n        max-width: 50rem;\n      }\n\n      @media(min-width: 800px) {\n        max-width: 55rem;\n      }\n\n      @media(min-width: 900px) {\n        max-width: 60rem;\n      }\n\n      @media(min-width: 1000px) {\n        max-width: 65rem;\n      }\n\n      @media(min-width: 1100px) {\n        max-width: 75rem;\n      }\n\n      @media(min-width: 1150px) {\n        max-width: 80rem;\n      }\n\n       @media(min-width: 1250px) {\n        max-width: 85rem;\n      }\n\n      @media(min-width: 1250px) {\n        max-width: 91rem;\n      }';
+});
+
+var Child = /*#__PURE__*/(0, _reactEmotion2.default)('div')('position:absolute;bottom:2rem;');
+
+var Description = /*#__PURE__*/(0, _reactEmotion2.default)(_typography.Text)('color:white !important;font-size:1.6rem;max-width:30rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;');
+
+var StyleTitle = /*#__PURE__*/(0, _reactEmotion2.default)(_typography.Title)('font-size:2.8rem;margin-bottom:1rem;');
+
+var Heading = /*#__PURE__*/(0, _reactEmotion2.default)('div')('position:absolute;max-width:120rem;bottom:', function (_ref3) {
+  var slide = _ref3.slide;
+  return slide ? '0' : '2rem';
+}, ';top:', function (_ref4) {
+  var slide = _ref4.slide;
+  return slide ? '0' : 'auto';
+}, ';padding-left:', function (_ref5) {
+  var slide = _ref5.slide;
+  return slide ? '0' : '1rem';
+}, ';color:white;display:flex;flex-direction:column;justify-content:center;@media(max-width:767px){padding:0 1rem;}');
+
+var Hero = function (_PureComponent) {
+  _inherits(Hero, _PureComponent);
+
+  function Hero() {
+    _classCallCheck(this, Hero);
+
+    return _possibleConstructorReturn(this, (Hero.__proto__ || Object.getPrototypeOf(Hero)).apply(this, arguments));
+  }
+
+  _createClass(Hero, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          desktopImage = _props.desktopImage,
+          title = _props.title,
+          description = _props.description,
+          gradient = _props.gradient,
+          children = _props.children,
+          slide = _props.slide,
+          customChildren = _props.customChildren,
+          backgroundColor = _props.backgroundColor;
+      var _props2 = this.props,
+          desktopImage2x = _props2.desktopImage2x,
+          mobileImage = _props2.mobileImage,
+          mobileImage2x = _props2.mobileImage2x;
+
+
+      var rgbaWithOpacity = void 0,
+          rgba = void 0;
+      if (gradient === 'transparent') {
+        rgbaWithOpacity = 'rgba(55,56,56,0)';
+        rgba = 'rgba(1,1,1,0)';
+      } else {
+        // strip '#' if it's passed in
+        var rawHex = gradient.match(/#/) ? gradient.substring(1, gradient.length) : gradient;
+        // convert rawHex to rgb
+        var rgb = (0, _hexRgb2.default)(rawHex);
+        // rgb -> rgba with 1 opacity (desktop)
+        rgba = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 1)';
+        // and rgba with 75% opacity for mobile
+        rgbaWithOpacity = 'rgba(' + rgb[0] + ', ' + rgb[1] + ', ' + rgb[2] + ', 0.75)';
+      }
+
+      var constructBody = function constructBody() {
+        return _react2.default.createElement(
+          Heading,
+          { slide: slide },
+          _react2.default.createElement(
+            StyleTitle,
+            { componentStyle: { color: 'white', marginBottom: '1rem' } },
+            title
+          ),
+          _react2.default.createElement(
+            Description,
+            null,
+            description
+          ),
+          _react2.default.createElement(
+            Child,
+            null,
+            children
+          )
+        );
+      };
+
+      if (!desktopImage2x) {
+        // no 2x? default to regular
+        desktopImage2x = desktopImage;
+      }
+
+      if (!mobileImage) {
+        // no mobile image? default to desktop
+        mobileImage = desktopImage;
+      }
+
+      if (!mobileImage2x) {
+        // no 2x mobile? default to mobile, which may have defaulted to desktop
+        mobileImage2x = mobileImage;
+      }
+
+      return _react2.default.createElement(
+        Container,
+        {
+          desktopImage: desktopImage,
+          desktopImage2x: desktopImage2x,
+          mobileImage: mobileImage,
+          mobileImage2x: mobileImage2x,
+          rgba: rgba,
+          rgbaWithOpacity: rgbaWithOpacity,
+          backgroundColor: backgroundColor
+        },
+        _react2.default.createElement(
+          Content,
+          { slide: slide },
+          customChildren ? children : constructBody()
+        )
+      );
+    }
+  }]);
+
+  return Hero;
+}(_react.PureComponent);
+
+Hero.defaultProps = {
+  desktopImage: '',
+  desktopImage2x: '',
+  mobileImage: '',
+  mobileImage2x: '',
+  title: '',
+  description: '',
+  gradient: _color2.default['primary']['1'],
+  slide: false,
+  backgroundColor: ''
+};
+Hero.propTypes = {
+  desktopImage: _propTypes2.default.string,
+  desktopImage2x: _propTypes2.default.string,
+  mobileImage: _propTypes2.default.string,
+  mobileImage2x: _propTypes2.default.string,
+  title: _propTypes2.default.string,
+  description: _propTypes2.default.string,
+  gradient: _propTypes2.default.string,
+  slide: _propTypes2.default.bool,
+  backgroundColor: _propTypes2.default.string
+};
+exports.default = Hero;
+
+
+var Container = /*#__PURE__*/(0, _reactEmotion2.default)('div')('margin:0 auto;width:100%;position:relative;height:30rem;background-size:cover;background-repeat:no-repeat;background-position:right;background-color:', function (_ref6) {
+  var backgroundColor = _ref6.backgroundColor;
+  return backgroundColor || 'transparent';
+}, ';@media(min-width:768px){background-image:linear-gradient(90deg,', function (_ref7) {
+  var rgba = _ref7.rgba;
+  return rgba;
+}, ' 25%,transparent 60%),url(', function (_ref8) {
+  var desktopImage = _ref8.desktopImage;
+  return desktopImage;
+}, ');}@media (min-width:768px) and (min-resolution:2dppx){background-image:linear-gradient(90deg,', function (_ref9) {
+  var rgba = _ref9.rgba;
+  return rgba;
+}, ' 25%,transparent 60%),url(', function (_ref10) {
+  var desktopImage2x = _ref10.desktopImage2x;
+  return desktopImage2x;
+}, ');}@media(max-width:767px){background-image:linear-gradient(', function (p) {
+  return p.rgbaWithOpacity;
+}, ',', function (p) {
+  return p.rgbaWithOpacity;
+}, '),url(', function (_ref11) {
+  var mobileImage = _ref11.mobileImage;
+  return mobileImage;
+}, ');}@media (max-width:767px) and (min-resolution:2dppx){background-image:linear-gradient(', function (p) {
+  return p.rgbaWithOpacity;
+}, ',', function (p) {
+  return p.rgbaWithOpacity;
+}, '),url(', function (_ref12) {
+  var mobileImage2x = _ref12.mobileImage2x;
+  return mobileImage2x;
+}, ');}@media(min-width:1280px){background-image:linear-gradient(270deg,transparent 500px,', function (_ref13) {
+  var rgba = _ref13.rgba;
+  return rgba;
+}, ' 1256px),url(', function (_ref14) {
+  var desktopImage = _ref14.desktopImage;
+  return desktopImage;
+}, ');background-size:contain;}@media (min-width:1280px) and (min-resolution:2dppx){background-image:linear-gradient(270deg,transparent 500px,', function (_ref15) {
+  var rgba = _ref15.rgba;
+  return rgba;
+}, ' 1256px),url(', function (_ref16) {
+  var desktopImage2x = _ref16.desktopImage2x;
+  return desktopImage2x;
+}, ');background-size:contain;}');

package.json

 {
   "name": "@eaze/hero",
-  "version": "3.0.0-0",
+  "version": "3.0.0-1",
   "description": "Page Hero component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

@@ -1,3 +0,222 @@
-import Hero from './hero'
+import React, { PureComponent } from 'react'
+import hexRgb from 'hex-rgb'
+import Color from '@eaze/color'
+import PropTypes from 'prop-types'
+import { Text, Title } from '@eaze/typography'
+import styled from 'react-emotion'
 
-export default Hero
+const Content = styled.div`
+  max-width: ${({ slide }) => slide ? '91rem' : '100rem'};
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  height: 30rem;
+
+  ${({ slide }) => {
+    return slide &&
+      `@media(min-width: 768px) {
+        max-width: 50rem;
+      }
+
+      @media(min-width: 800px) {
+        max-width: 55rem;
+      }
+
+      @media(min-width: 900px) {
+        max-width: 60rem;
+      }
+
+      @media(min-width: 1000px) {
+        max-width: 65rem;
+      }
+
+      @media(min-width: 1100px) {
+        max-width: 75rem;
+      }
+
+      @media(min-width: 1150px) {
+        max-width: 80rem;
+      }
+
+       @media(min-width: 1250px) {
+        max-width: 85rem;
+      }
+
+      @media(min-width: 1250px) {
+        max-width: 91rem;
+      }`
+  }}
+`
+
+const Child = styled.div`
+  position: absolute;
+  bottom: 2rem;
+`
+
+const Description = styled(Text)`
+  color: white !important;
+  font-size: 1.6rem;
+  max-width: 30rem;
+  overflow: hidden;
+  display: -webkit-box;
+
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+`
+
+const StyleTitle = styled(Title)`
+  font-size: 2.8rem;
+  margin-bottom: 1rem;
+`
+
+const Heading = styled.div`
+  position: absolute;
+  max-width: 120rem;
+  bottom: ${({ slide }) => slide ? '0' : '2rem'};
+  top: ${({ slide }) => slide ? '0' : 'auto'};
+  padding-left: ${({ slide }) => slide ? '0' : '1rem'};
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  @media(max-width: 767px) {
+    padding: 0 1rem;
+  }
+`
+
+export default class Hero extends PureComponent {
+  static defaultProps = {
+    desktopImage: '',
+    desktopImage2x: '',
+    mobileImage: '',
+    mobileImage2x: '',
+    title: '',
+    description: '',
+    gradient: Color['primary']['1'],
+    slide: false,
+    backgroundColor: ''
+  }
+
+  static propTypes = {
+    desktopImage: PropTypes.string,
+    desktopImage2x: PropTypes.string,
+    mobileImage: PropTypes.string,
+    mobileImage2x: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    gradient: PropTypes.string,
+    slide: PropTypes.bool,
+    backgroundColor: PropTypes.string
+  }
+
+  render () {
+    const {
+      desktopImage,
+      title,
+      description,
+      gradient,
+      children,
+      slide,
+      customChildren,
+      backgroundColor
+    } = this.props
+
+    let {
+      desktopImage2x,
+      mobileImage,
+      mobileImage2x
+    } = this.props
+
+    let rgbaWithOpacity, rgba
+    if (gradient === 'transparent') {
+      rgbaWithOpacity = 'rgba(55,56,56,0)'
+      rgba = 'rgba(1,1,1,0)'
+    } else {
+      // strip '#' if it's passed in
+      const rawHex = gradient.match(/#/) ? gradient.substring(1, gradient.length) : gradient
+      // convert rawHex to rgb
+      const rgb = hexRgb(rawHex)
+      // rgb -> rgba with 1 opacity (desktop)
+      rgba = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`
+      // and rgba with 75% opacity for mobile
+      rgbaWithOpacity = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`
+    }
+
+    const constructBody = () => (
+      <Heading slide={slide}>
+        <StyleTitle componentStyle={{color: 'white', marginBottom: '1rem'}}>{title}</StyleTitle>
+        <Description>{description}</Description>
+
+        <Child>
+          {children}
+        </Child>
+      </Heading>
+    )
+
+    if (!desktopImage2x) { // no 2x? default to regular
+      desktopImage2x = desktopImage
+    }
+
+    if (!mobileImage) { // no mobile image? default to desktop
+      mobileImage = desktopImage
+    }
+
+    if (!mobileImage2x) { // no 2x mobile? default to mobile, which may have defaulted to desktop
+      mobileImage2x = mobileImage
+    }
+
+    return (
+      <Container
+        desktopImage={desktopImage}
+        desktopImage2x={desktopImage2x}
+        mobileImage={mobileImage}
+        mobileImage2x={mobileImage2x}
+        rgba={rgba}
+        rgbaWithOpacity={rgbaWithOpacity}
+        backgroundColor={backgroundColor}
+      >
+        <Content slide={slide}>
+          {customChildren ? children : constructBody()}
+        </Content>
+      </Container>
+    )
+  }
+}
+
+const Container = styled.div`
+  margin: 0 auto;
+  width: 100%;
+  position: relative;
+  height: 30rem;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: right;
+  background-color: ${({backgroundColor}) => backgroundColor || 'transparent'};
+
+  @media(min-width: 768px) {
+    background-image: linear-gradient(90deg, ${({ rgba }) => rgba} 25%, transparent 60%), url(${({ desktopImage }) => desktopImage});
+  }
+
+  @media (min-width: 768px) and (min-resolution: 2dppx) {
+    background-image: linear-gradient(90deg, ${({ rgba }) => rgba} 25%, transparent 60%), url(${({ desktopImage2x }) => desktopImage2x});
+  }
+
+  @media(max-width: 767px) {
+    background-image: linear-gradient(${p => p.rgbaWithOpacity}, ${p => p.rgbaWithOpacity}), url(${({ mobileImage }) => mobileImage});
+  }
+
+  @media (max-width: 767px) and (min-resolution: 2dppx) {
+    background-image: linear-gradient(${p => p.rgbaWithOpacity}, ${p => p.rgbaWithOpacity}), url(${({ mobileImage2x }) => mobileImage2x});
+  }
+
+  @media(min-width: 1280px) {
+    background-image: linear-gradient(270deg, transparent 500px, ${({ rgba }) => rgba} 1256px), url(${({ desktopImage }) => desktopImage});
+    background-size: contain;
+  }
+
+  @media (min-width: 1280px) and (min-resolution: 2dppx) {
+    background-image: linear-gradient(270deg, transparent 500px, ${({ rgba }) => rgba} 1256px), url(${({ desktopImage2x }) => desktopImage2x});
+    background-size: contain;
+  }
+`

tests/hero.test.js

 import React from 'react'
 import { shallow } from 'enzyme'
 
-import Hero from '../src/hero.js'
+import Hero from '../src'
 
@@ -6,0 +6,0 @@ it('renders without props', () => {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

185204

decreased by-4.41%

Number of package files

7

decreased by-46.15%

Lines of code

393

decreased by-32.94%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes