@coorpacademy/components - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

package.json

 {
   "name": "@coorpacademy/components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Component library for web front ends",
@@ -58,5 +58,5 @@ "main": "lib/components/index.js",
     "lodash": "^4.14.1",
-    "nyc": "^7.1.0",
+    "nyc": "^8.1.0",
     "pascal-case": "^1.1.2",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^0.10.0",
     "style-loader": "^0.13.0",
@@ -63,0 +63,0 @@ "webpack": "^1.12.14",

src/@coorpacademy/components/molecule/catalog-card/index.js

 import { checker, createValidate } from '../../util/validation';
+import createStarRating from '../star-rating';
+import createLink from '../../atom/link';
 import HoverFillBehaviour from '../../behaviour/effects/hover-fill';
@@ -16,2 +18,4 @@ import style from './catalog-card.css';
   const HoverFill = HoverFillBehaviour(treant, options);
+  const StarRating = createStarRating(treant, options);
+  const Link = createLink(treant, options);
 
@@ -21,22 +25,21 @@ const CatalogCard = (props, children) => {
     const {product} = props;
+    const total = 5;
+
     return (
-      <li className={style['catalog-list-item']}>
-        <div className={style['image-wrapper']}>
+      <li className={style.catalogListItem}>
+        <div className={style.imageWrapper}>
           <img src={product.images[0] && product.images[0].url.https} />
           <div className={style.overlay}>
             <HoverFill>
-              <a href="#">En savoir <span>plus</span></a>
+              <Link href={product.href}>En savoir <span>plus</span></Link>
             </HoverFill>
           </div>
         </div>
-        <div className={style['info-wrapper']}>
-          <div className={style.title}><a href="#">Cursus Stratégie Digitale</a></div>
-          <div className={style.subtitle}>by Coorpacademy</div>
-          <div className={style['star-rating']}>
-            <span>★</span>
-            <span>★</span>
-            <span>★</span>
-            <span>★</span>
-            <span>★</span>
-          </div>
+        <div className={style.infoWrapper}>
+          <div className={style.title}><Link href={product.href}>{product.title}</Link></div>
+          <div className={style.subtitle}>by {product.author}</div>
+          <StarRating
+            rating={product.popularity}
+            total={total}
+          />
         </div>
@@ -43,0 +46,0 @@ </li>

src/@coorpacademy/components/molecule/theme-image/index.js

@@ -16,7 +16,8 @@ import { checker, createValidate } from '../../util/validation';
   const ThemeImage = ({image}) => {
-    const desktopStyle = extract(image);
+    const defaultStyle = extract(image);
 
     const extractWithDefault = extractor(skin, image);
     const mobileStyle = extractWithDefault(`${image}-mobile`);
-    const retinaStyle = extractWithDefault(`${image}-retina`);
+    const tabletStyle = extractWithDefault(`${image}-tablet`);
+    const desktopStyle = extractWithDefault(`${image}-desktop`);
 
@@ -26,2 +27,7 @@ return (
         <div
+          className={style.default}
+          style={defaultStyle}
+        />
+
+        <div
           className={style.desktop}
@@ -32,9 +38,9 @@ style={desktopStyle}
         <div
-          className={style.mobile}
-          style={mobileStyle}
+          className={style.tablet}
+          style={tabletStyle}
         />
 
         <div
-          className={style.retina}
-          style={retinaStyle}
+          className={style.mobile}
+          style={mobileStyle}
         />
@@ -41,0 +47,0 @@ </div>

src/@coorpacademy/components/organism/hero/index.js

 import get from 'lodash/fp/get';
 import { checker, createValidate } from '../../util/validation';
-import style from './hero.css';
+
+import createLink from '../../atom/link';
 import RadialFocusBehaviour from '../../behaviour/effects/radial-focus';
 
+import style from './hero.css';
+
 const conditions = checker.shape({
@@ -15,2 +18,3 @@ props: checker.shape({
 export default (treant, options = {}) => {
+  const Link = createLink(treant, options);
   const RadialFocus = RadialFocusBehaviour(treant, options);
@@ -33,3 +37,3 @@ const {h} = treant;
         <RadialFocus>
-          <a
+          <Link
             href={url}
@@ -41,3 +45,3 @@ className={style.cta}
             </div>
-          </a>
+          </Link>
         </RadialFocus>
@@ -44,0 +48,0 @@ </div>

src/@coorpacademy/sandbox/assets/products.json

@@ -8,2 +8,3 @@ [
     "sku": "15.B",
+    "href": "#15.B",
     "title": "Les nouveaux métiers du digital",
@@ -155,2 +156,3 @@ "slug": "15.B",
     "sku": "P6",
+    "href": "#P6",
     "title": "Cursus Stratégie Digitale",
@@ -301,2 +303,3 @@ "slug": "strategie-digitale",
     "sku": "P5",
+    "href": "#P5",
     "title": "Cursus Réseaux Sociaux",
@@ -429,2 +432,3 @@ "slug": "reseaux-sociaux",
     "sku": "P7",
+    "href": "#P7",
     "title": "Cursus E-Marketing et publicité",
@@ -557,2 +561,3 @@ "slug": "e-marketing-et-publicite",
     "sku": "P4",
+    "href": "#P4",
     "title": "Cursus E-commerce",
@@ -685,2 +690,3 @@ "slug": "e-commerce",
     "sku": "B9",
+    "href": "#B9",
     "title": "La mutation des business locaux",
@@ -813,2 +819,3 @@ "slug": "9.A,9.C",
     "sku": "B7",
+    "href": "#B7",
     "title": "L'utilisateur au centre",
@@ -941,2 +948,3 @@ "slug": "7.A,7.C",
     "sku": "B13",
+    "href": "#B13",
     "title": "Des cibles au marketing One to One",
@@ -1069,2 +1077,3 @@ "slug": "13.A,13.C",
     "sku": "B12",
+    "href": "#B12",
     "title": "La génération de trafic",
@@ -1197,2 +1206,3 @@ "slug": "12.A,12.C",
     "sku": "B1",
+    "href": "#B1",
     "title": "La recherche en ligne",
@@ -1199,0 +1209,0 @@ "slug": "1.A,1.C",

src/@coorpacademy/sandbox/src/app.js

@@ -1,4 +0,2 @@
-import {
-  createCatalogCards
-} from '../../components';
+import createThemeImage from '../../components/molecule/theme-image';
 
@@ -10,9 +8,26 @@ import products from '../assets/products';
   const {h} = treant;
-  const CatalogCards = createCatalogCards(treant);
+  const ThemeImage = createThemeImage(treant, {
+    skin: {
+      images: {
+        logo: 'http://lorempixel.com/g/400/200/abstract'
+      },
+      properties: {
+        logo: {
+          height: '400px'
+        },
+        'logo-mobile': {
+          height: '100px'
+        },
+        'logo-tablet': {
+          height: '200px'
+        }
+      }
+    }
+  });
 
   return (props, children) => (
-    <CatalogCards
-      products={products}
+    <ThemeImage
+      image= 'logo'
     />
   );
 };

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

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

407327

increased by1.59%

Number of package files

166

increased by6.41%

Lines of code

5654

increased by4.22%

No dependency changes