@hashicorp/hashi-callouts - npm Package Compare versions

Comparing version 2.1.5-fonts.0 to 2.1.6-fonts.0

dist/index.js

@@ -13,23 +13,15 @@ 'use strict';
 
-function CaratIcon() {
+function Arrow() {
   return h(
     "svg",
     {
-      width: "15",
-      height: "9",
-      viewBox: "0 0 15 9",
+      width: "14",
+      height: "12",
+      viewBox: "0 0 14 12",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    h("line", {
-      x1: "0.5",
-      y1: "4.5",
-      x2: "13.5",
-      y2: "4.5",
-      stroke: "#1563FF",
-      strokeLinecap: "round"
-    }),
     h("path", {
-      d: "M10.3536 0.646447C10.1583 0.451184 9.84171 0.451184 9.64645 0.646447C9.45118 0.841709 9.45118 1.15829 9.64645 1.35355L10.3536 0.646447ZM13.5 4.5L13.8536 4.85355L14.2071 4.5L13.8536 4.14645L13.5 4.5ZM9.64645 7.64645C9.45118 7.84171 9.45118 8.15829 9.64645 8.35355C9.84171 8.54882 10.1583 8.54882 10.3536 8.35355L9.64645 7.64645ZM9.64645 1.35355L13.1464 4.85355L13.8536 4.14645L10.3536 0.646447L9.64645 1.35355ZM13.1464 4.14645L9.64645 7.64645L10.3536 8.35355L13.8536 4.85355L13.1464 4.14645Z",
-      fill: "#1563FF"
+      d: "M13.675 5.7C13.6 5.625 13.6 5.55 13.525 5.475L9.025 0.975C8.725 0.675 8.275 0.675 7.975 0.975C7.675 1.275 7.675 1.725 7.975 2.025L11.2 5.25H1C0.55 5.25 0.25 5.55 0.25 6C0.25 6.45 0.55 6.75 1 6.75H11.2L7.975 9.975C7.675 10.275 7.675 10.725 7.975 11.025C8.125 11.175 8.35 11.25 8.5 11.25C8.65 11.25 8.875 11.175 9.025 11.025L13.525 6.525C13.6 6.45 13.675 6.375 13.675 6.3C13.75 6.075 13.75 5.925 13.675 5.7Z",
+      fill: "#000"
     })
@@ -41,115 +33,80 @@ );
 
-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; }; }();
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function Callouts(_ref) {
+  var _data = _ref._data,
+      onDark = _ref.onDark;
 
-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; }
+  var _decode = reshapePreactComponents.decode(_data),
+      columnCount = _decode.columnCount,
+      theme = _decode.theme,
+      items = _decode.items;
 
-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 Callouts = function (_Component) {
-  _inherits(Callouts, _Component);
-
-  function Callouts() {
-    _classCallCheck(this, Callouts);
-
-    return _possibleConstructorReturn(this, (Callouts.__proto__ || Object.getPrototypeOf(Callouts)).apply(this, arguments));
-  }
-
-  _createClass(Callouts, [{
-    key: 'render',
-    value: function render() {
-      var data = reshapePreactComponents.decode(this.props._data);
-      var markedOptions = this.generateMarkedOptions();
-
-      var getCalloutContent = function getCalloutContent(item) {
-        return preact.h(
-          'div',
-          { 'class': 'callout-content' },
-          item.image && preact.h(
-            'div',
-            { 'class': 'callout-icon' },
-            preact.h(Image, {
-              src: item.image.url,
-              svg: item.image.format === 'svg',
-              alt: item.image.alt
-            })
-          ),
-          preact.h(
-            'div',
-            { 'class': 'callout-text' },
-            preact.h('h3', {
-              'class': 'g-type-display-3',
-              dangerouslySetInnerHTML: {
-                __html: marked.inlineLexer(item.title, [])
-              }
-            }),
-            preact.h('div', {
-              'class': 'callout-description',
-              dangerouslySetInnerHTML: {
-                __html: item.description ? marked(item.description, markedOptions) : ''
-              }
-            })
-          )
-        );
-      };
-
-      var getCalloutButton = function getCalloutButton(link, theme) {
-        return preact.h(
-          'div',
-          {
-            'class': 'g-type-buttons-and-standlone-links callout-button ' + (theme || '')
-          },
-          preact.h(
-            'span',
-            null,
-            link.title
-          ),
-          preact.h(CaratIcon, null)
-        );
-      };
-
+  return preact.h(
+    'ul',
+    {
+      'class': 'g-callouts ' + (onDark ? 'on-dark' : ''),
+      'data-columns': columnCount || 3,
+      'data-theme': theme,
+      'data-testid': 'root'
+    },
+    items.map(function (callout) {
       return preact.h(
-        'ul',
-        { 'class': 'g-callouts' },
-        data.items.map(function (item) {
-          return preact.h(
-            'li',
-            { 'class': 'callout-container', key: item.title },
-            item.link && preact.h(
-              'a',
-              _extends({
-                href: item.link.url,
-                'class': 'callout-box ' + (item.image ? 'has-image' : 'no-image')
-              }, item.link.external && { rel: 'noopener', target: '_blank' }),
-              getCalloutContent(item),
-              getCalloutButton(item.link, data.theme)
-            ),
-            !item.link && preact.h(
-              'div',
-              {
-                'class': 'callout-box ' + (item.image ? 'has-image' : 'no-image')
-              },
-              getCalloutContent(item)
-            )
-          );
-        })
+        'li',
+        { 'class': 'callout', key: callout.title },
+        preact.h(Callout, callout)
       );
-    }
-  }, {
-    key: 'generateMarkedOptions',
-    value: function generateMarkedOptions() {
-      var markedRenderer = new marked.Renderer();
+    })
+  );
+}
 
-      markedRenderer.paragraph = function (text) {
-        return '<p class="g-type-body-small">' + text + '</p>';
-      };
+function Callout(_ref2) {
+  var link = _ref2.link,
+      props = _objectWithoutProperties(_ref2, ['link']);
 
-      return { renderer: markedRenderer };
-    }
-  }]);
+  return link ? preact.h(
+    'a',
+    _extends({
+      href: link.url
+    }, link.external && {
+      rel: 'noopener',
+      target: '_blank'
+    }),
+    preact.h(CalloutContent, props),
+    preact.h(
+      'span',
+      { 'class': 'faux-link g-type-buttons-and-standlone-links' },
+      link.title,
+      preact.h(Arrow, null)
+    )
+  ) : preact.h(CalloutContent, props);
+}
 
-  return Callouts;
-}(preact.Component);
+function CalloutContent(_ref3) {
+  var image = _ref3.image,
+      title = _ref3.title,
+      description = _ref3.description;
 
+  return preact.h(
+    'div',
+    null,
+    image && preact.h(
+      'div',
+      { 'class': 'icon' },
+      preact.h(Image, { src: image.url, svg: image.format === 'svg', alt: image.alt })
+    ),
+    preact.h(
+      'h3',
+      { 'class': 'g-type-display-4' },
+      title
+    ),
+    preact.h('div', {
+      'class': 'description g-type-body',
+      dangerouslySetInnerHTML: {
+        __html: description ? marked(description) : ''
+      }
+    })
+  );
+}
+
 module.exports = Callouts;

package.json

 {
   "name": "@hashicorp/hashi-callouts",
   "description": "a set of three horizontally-aligned images paired with a short title and descriptive text.",
-  "version": "2.1.5-fonts.0",
+  "version": "2.1.6-fonts.0",
   "author": "Hashicorp - Jeff Escalante",
@@ -21,3 +21,3 @@ "main": "dist",
   },
-  "gitHead": "5cf73b5b9e28e6957c4d17f56cc2ac911285e3dd"
+  "gitHead": "94801c7af80191b860b6aa3a0d3ca584ac0fb6ae"
 }

readme.md

@@ -7,3 +7,5 @@ # Callouts
 
-- `two_columns` (bool) - when true, uses two instead of three items
+- `onDark` - when onDark, change colors to white
+- `columnCount` (int) - the number of columns (3 or 4)
+- `theme` (string) - declares the color theme
 - `items` (arr) - array of callout items from the CMS
@@ -13,1 +15,2 @@ - `image` (obj) [optional] - contains a url prop which links to the image
   - `description` (str) [optional] - markdown-enabled short description
+  - `link` (obj) [optional] - contains a link dato object

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

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

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

22734

increased by87.81%

Lines of code

820

increased by164.52%

Number of lines in readme file

15

increased by25%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes