@codecademy/brand-components - npm Package Compare versions

Comparing version 0.4.6 to 0.4.7-alpha.360bd3.4

dist/Testimonial/__tests__/Testimonial-test.js

@@ -0,1 +1,7 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import { mount } from 'enzyme';
@@ -7,9 +13,9 @@ import React from 'react';
 var exampleTestmonial = {
-  name: 'Frank Reynolds',
+  firstName: 'Frank',
+  lastName: 'Reynolds',
   occupation: "Co-Owner @ Paddy's Pub",
-  imageUrl: '',
   quote: "I don't know how many years on this Earth I got left, I'm gonna get real weird with it."
 };
 describe('Testimonial', function () {
-  it('adds the light class to the container name when its theme is light', function () {
+  it('adds the light class to the wrapper container when its theme is light', function () {
     var wrapper = mount(React.createElement(Testimonial, {
@@ -20,6 +26,6 @@ testimonial: exampleTestmonial,
     }));
-    var containerClassName = wrapper.find("div").first().prop('className');
+    var containerClassName = wrapper.find("div.lightWrapper").prop('className');
     expect(containerClassName).toContain(styles.lightWrapper);
   });
-  it('adds the dark class to the container name when its theme is dark', function () {
+  it('adds the dark class to the wrapper container when its theme is dark', function () {
     var wrapper = mount(React.createElement(Testimonial, {
@@ -30,5 +36,52 @@ testimonial: exampleTestmonial,
     }));
-    var containerClassName = wrapper.find("div").first().prop('className');
+    var containerClassName = wrapper.find("div.darkWrapper").prop('className');
     expect(containerClassName).toContain(styles.darkWrapper);
   });
+  it('adds the small class to the content container when its size is small', function () {
+    var wrapper = mount(React.createElement(Testimonial, {
+      testimonial: exampleTestmonial,
+      size: "small",
+      theme: VisualTheme.DarkMode
+    }));
+    var containerClassName = wrapper.find('div.smallContainer').prop('className');
+    expect(containerClassName).toContain(styles.smallContainer);
+  });
+  it('adds the medium class to the content container when its size is medium', function () {
+    var wrapper = mount(React.createElement(Testimonial, {
+      testimonial: exampleTestmonial,
+      size: "medium",
+      theme: VisualTheme.DarkMode
+    }));
+    var containerClassName = wrapper.find('div.mediumContainer').prop('className');
+    expect(containerClassName).toContain(styles.mediumContainer);
+  });
+  it('adds the large class to the content container when its size is large', function () {
+    var wrapper = mount(React.createElement(Testimonial, {
+      testimonial: exampleTestmonial,
+      size: "large",
+      theme: VisualTheme.DarkMode
+    }));
+    var containerClassName = wrapper.find('div.largeContainer').prop('className');
+    expect(containerClassName).toContain(styles.largeContainer);
+  });
+  it('renders the Avatar component when an imageUrl prop is present', function () {
+    var wrapper = mount(React.createElement(Testimonial, {
+      testimonial: _objectSpread({}, exampleTestmonial, {
+        imageUrl: 'someCoolUrl'
+      }),
+      size: "small",
+      theme: VisualTheme.DarkMode
+    }));
+    var avatarContainer = wrapper.find('div.avatarContainer');
+    expect(avatarContainer).toHaveLength(1);
+  });
+  it('does _not_ render the Avatar component when an imageUrl prop is _not_ present', function () {
+    var wrapper = mount(React.createElement(Testimonial, {
+      testimonial: exampleTestmonial,
+      size: "small",
+      theme: VisualTheme.DarkMode
+    }));
+    var avatarContainer = wrapper.find('div.avatarContainer');
+    expect(avatarContainer).toHaveLength(0);
+  });
 });

dist/Testimonial/index.d.ts

 import React from 'react';
 import { VisualTheme } from '@codecademy/gamut';
-declare type TestimonialContent = {
-    name: string;
+export declare type Testimonial = {
+    firstName: string;
+    lastName: string;
     occupation: string;
+    quote: string;
+    company?: string;
     imageUrl?: string;
-    quote: string;
 };
 declare type TestimonialProps = {
-    testimonial?: TestimonialContent;
-    size: 'small';
+    testimonial: Testimonial;
+    size: 'small' | 'medium' | 'large';
     theme: VisualTheme;
@@ -13,0 +15,0 @@ };

dist/Testimonial/index.js

@@ -9,3 +9,3 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 export var Testimonial = function Testimonial(_ref) {
-  var _cx, _cx2;
+  var _cx;
 
@@ -15,2 +15,7 @@ var testimonial = _ref.testimonial,
       theme = _ref.theme;
+  var firstName = testimonial.firstName,
+      lastName = testimonial.lastName,
+      occupation = testimonial.occupation,
+      quote = testimonial.quote,
+      imageUrl = testimonial.imageUrl;
   return React.createElement("div", {
@@ -21,18 +26,19 @@ className: cx(s.testimonialWrapper, (_cx = {}, _defineProperty(_cx, s.darkWrapper, theme === VisualTheme.DarkMode), _defineProperty(_cx, s.lightWrapper, theme === VisualTheme.LightMode), _cx))
   }, React.createElement("div", {
-    className: cx(s.contentContainer, s["".concat(size, "Container")], (_cx2 = {}, _defineProperty(_cx2, s.darkContainer, theme === VisualTheme.DarkMode), _defineProperty(_cx2, s.lightContainer, theme === VisualTheme.LightMode), _cx2))
-  }, React.createElement("div", {
+    className: cx(s.contentContainer, s["".concat(size, "Container")])
+  }, imageUrl && React.createElement("div", {
     className: s.avatarContainer
   }, React.createElement(Avatar, {
-    src: testimonial.imageUrl,
-    alt: "Photo of ".concat(testimonial.name),
-    theme: theme
+    src: imageUrl,
+    alt: "Photo of ".concat(firstName, " ").concat(lastName),
+    theme: theme,
+    className: cx(_defineProperty({}, s.largeContainerAvatar, size === 'large'))
   })), React.createElement("div", {
-    className: cx(s.bylineContainer, s["".concat(size, "Byline")])
+    className: s.bylineContainer
   }, React.createElement(Byline, {
-    name: testimonial.name,
-    occupation: testimonial.occupation
+    name: "".concat(firstName, " ").concat(lastName),
+    occupation: occupation
   })), React.createElement("div", {
     className: s.quoteContainer
   }, React.createElement(Quote, {
-    text: testimonial.quote,
+    text: quote,
     theme: theme
@@ -39,0 +45,0 @@ })))));

package.json

 {
   "name": "@codecademy/brand-components",
   "description": "Brand component library for Codecademy",
-  "version": "0.4.6",
+  "version": "0.4.7-alpha.360bd3.4+360bd3e9",
   "author": "Codecademy Engineering <[e-mail]>",
@@ -34,3 +34,3 @@ "sideEffects": [
   "license": "MIT",
-  "gitHead": "c767e7cb4e369aaf73693cda208e49a8ee232d12"
+  "gitHead": "360bd3e921cadb4ceb6778fe116cd41c2b5de512"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33538

increased by25.48%

Number of package files

36

increased by5.88%

Lines of code

411

increased by17.09%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes