@entur/layout - npm Package Compare versions

Comparing version 2.1.57 to 2.2.0

dist/layout.cjs.development.js

@@ -114,3 +114,3 @@ 'use strict';
 
-var _excluded$2 = ["title", "description", "children", "className", "category", "style", "as", "wholeCardAsElement"];
+var _excluded$2 = ["title", "description", "children", "className", "category", "style", "as", "headingLevel", "wholeCardAsElement", "hideArrow", "wrapperProps"];
 var defaultElement$5 = 'a';
@@ -125,23 +125,31 @@ var MediaCard = function MediaCard(_ref) {
     as = _ref.as,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     whole = _ref.wholeCardAsElement,
+    hideArrow = _ref.hideArrow,
+    wrapperProps = _ref.wrapperProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var Element = as || defaultElement$5;
-  var classList = classNames('eds-base-card', 'eds-media-card', className);
-  var wrapperElement = whole ? Element : 'div';
-  var wrapperProps = whole ? rest : {};
-  var innerProps = whole ? {} : rest;
-  var InnerElement = whole ? 'div' : Element;
+  var Heading = headingLevel;
+  var _wrapperProps = whole ? _extends({}, wrapperProps, rest) : _extends({}, wrapperProps);
   return React.createElement(BaseCard, _extends({
-    as: wrapperElement,
-    className: classList,
+    className: classNames('eds-base-card', 'eds-media-card', className),
     style: style
-  }, wrapperProps), React.createElement("div", {
+  }, _wrapperProps), React.createElement("div", {
     className: "eds-media-card__media"
-  }, children), React.createElement(InnerElement, _extends({
+  }, children), React.createElement("div", {
     className: "eds-media-card__text"
-  }, innerProps), category && React.createElement(typography.Label, {
-    className: "eds-media-card__category"
-  }, category), React.createElement("div", {
-    className: "eds-media-card__title"
-  }, title), React.createElement(typography.Paragraph, null, description), React.createElement(icons.ForwardIcon, {
+  }, category && React.createElement(typography.Label, {
+    className: "eds-media-card__text__category"
+  }, category), React.createElement(utils.ConditionalWrapper, {
+    condition: description !== undefined,
+    wrapper: function wrapper(children) {
+      return React.createElement(Heading, {
+        className: "eds-media-card__text__title"
+      }, children);
+    }
+  }, React.createElement(Element, _extends({
+    tabIndex: 0,
+    className: "eds-media-card__text__title-link"
+  }, rest), title)), description !== undefined && React.createElement(typography.Paragraph, null, description), !hideArrow && React.createElement(icons.ForwardIcon, {
     className: "eds-media-card__arrow-icon",
@@ -148,0 +156,0 @@ "aria-hidden": "true"

dist/layout.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),a=require("react"),t=require("classnames"),r=require("@entur/typography"),n=require("@entur/icons");function s(){return s=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},s.apply(this,arguments)}function c(e,a){if(null==e)return{};var t,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)a.indexOf(t=s[r])>=0||(n[t]=e[t]);return n}var i=["className","as"],l=a.forwardRef((function(e,r){var n=e.className,l=e.as,o=c(e,i);return a.createElement(d.Provider,{value:!0},a.createElement(l||"div",s({className:t("eds-contrast",n),ref:r},o)))})),d=a.createContext(!1),o=["children","className","as"],m=function(e){var r=e.children,n=e.className,i=e.as,l=c(e,o),d=i||"div",m=t("eds-base-card",n);return a.createElement(d,s({className:m},l),r)},u=["title","children","titleIcon","compact","className","externalLink","as"],p=["title","description","children","className","category","style","as","wholeCardAsElement"],v=["children","className","max","variant","showZero","invisible","as","type"],g=a.forwardRef((function(e,r){var n,i=e.children,l=e.className,d=e.max,o=void 0===d?99:d,m=e.variant,u=e.showZero,p=void 0!==u&&u,g=e.invisible,f=void 0!==g&&g,h=e.as,E=e.type,N=void 0===E?"status":E,_=c(e,v),y=h||"span",x=f;!1!==f||(0!==i||p)&&null!=i||(x=!0),n="number"==typeof i&&i>o?o+"+":i;var b=t(l,"eds-badge",{"eds-badge--invisible":x,"eds-badge--show-zero":p},"eds-badge--variant-"+m,"eds-badge--type-"+N);return a.createElement(y,s({className:b,ref:r},_),n)})),f=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"bullet"}))})),h=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"notification"}))})),E=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"status"}))})),N=["className","children","compact","as"];e.warnAboutMissingStyles("layout","typography"),exports.Badge=g,exports.BaseCard=m,exports.BulletBadge=f,exports.Contrast=l,exports.ContrastContext=d,exports.MediaCard=function(e){var i=e.title,l=e.description,d=e.children,o=e.className,u=e.category,v=e.style,g=e.as,f=e.wholeCardAsElement,h=c(e,p),E=g||"a",N=t("eds-base-card","eds-media-card",o),_=f?{}:h,y=f?"div":E;return a.createElement(m,s({as:f?E:"div",className:N,style:v},f?h:{}),a.createElement("div",{className:"eds-media-card__media"},d),a.createElement(y,s({className:"eds-media-card__text"},_),u&&a.createElement(r.Label,{className:"eds-media-card__category"},u),a.createElement("div",{className:"eds-media-card__title"},i),a.createElement(r.Paragraph,null,l),a.createElement(n.ForwardIcon,{className:"eds-media-card__arrow-icon","aria-hidden":"true"})))},exports.NavigationCard=function(e){var i=e.title,l=e.children,d=e.titleIcon,o=e.compact,p=void 0!==o&&o,v=e.className,g=e.externalLink,f=void 0!==g&&g,h=e.as,E=c(e,u),N=h||"a",_=t("eds-navigation-card",v,{"eds-base-card--red-line":p,"eds-navigation-card--compact":p});return a.createElement(m,s({as:N,className:_},E),!p&&d&&a.createElement("div",{className:"eds-navigation-card__title-icon","aria-hidden":"true"},d),a.createElement("span",{className:"eds-navigation-card__title"},p&&d&&a.createElement("span",{className:"eds-navigation-card__title-icon-compact","aria-hidden":"true"},d),a.createElement(r.Heading3,{as:"span"},i)),!p&&a.createElement(a.Fragment,null,a.createElement(r.Paragraph,null,l),f&&a.createElement(n.ExternalIcon,{"aria-label":"Ekstern lenke",className:"eds-navigation-card__external--not-compact"})),p&&f&&a.createElement(n.ExternalIcon,{"aria-label":"Ekstern lenke",className:"eds-navigattion-card__icon eds-navigation-card__external--compact"}),p&&!f&&a.createElement(n.ForwardIcon,{className:"eds-navigattion-card__icon eds-navigation-card__arrow-icon","aria-hidden":"true"}))},exports.NotificationBadge=h,exports.StatusBadge=E,exports.Tag=function(e){var r=e.className,n=e.children,i=e.compact,l=e.as,d=c(e,N),o=l||"div",m=a.Children.toArray(n);return a.createElement(o,s({className:t("eds-tag",r,{"eds-tag--leading-icon":m.length>1&&"string"!=typeof m[0],"eds-tag--trailing-icon":m.length>1&&"string"!=typeof m[m.length-1],"eds-tag--compact":i})},d),n)},exports.useContrast=function(){return a.useContext(d)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),a=require("react"),t=require("classnames"),r=require("@entur/typography"),n=require("@entur/icons");function s(){return s=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},s.apply(this,arguments)}function i(e,a){if(null==e)return{};var t,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)a.indexOf(t=s[r])>=0||(n[t]=e[t]);return n}var c=["className","as"],l=a.forwardRef((function(e,r){var n=e.className,l=e.as,o=i(e,c);return a.createElement(d.Provider,{value:!0},a.createElement(l||"div",s({className:t("eds-contrast",n),ref:r},o)))})),d=a.createContext(!1),o=["children","className","as"],m=function(e){var r=e.children,n=e.className,c=e.as,l=i(e,o),d=c||"div",m=t("eds-base-card",n);return a.createElement(d,s({className:m},l),r)},p=["title","children","titleIcon","compact","className","externalLink","as"],u=["title","description","children","className","category","style","as","headingLevel","wholeCardAsElement","hideArrow","wrapperProps"],v=["children","className","max","variant","showZero","invisible","as","type"],g=a.forwardRef((function(e,r){var n,c=e.children,l=e.className,d=e.max,o=void 0===d?99:d,m=e.variant,p=e.showZero,u=void 0!==p&&p,g=e.invisible,f=void 0!==g&&g,h=e.as,_=e.type,E=void 0===_?"status":_,N=i(e,v),x=h||"span",y=f;!1!==f||(0!==c||u)&&null!=c||(y=!0),n="number"==typeof c&&c>o?o+"+":c;var b=t(l,"eds-badge",{"eds-badge--invisible":y,"eds-badge--show-zero":u},"eds-badge--variant-"+m,"eds-badge--type-"+E);return a.createElement(x,s({className:b,ref:r},N),n)})),f=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"bullet"}))})),h=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"notification"}))})),_=a.forwardRef((function(e,t){return a.createElement(g,s({as:e.as||"span"},e,{ref:t,type:"status"}))})),E=["className","children","compact","as"];e.warnAboutMissingStyles("layout","typography"),exports.Badge=g,exports.BaseCard=m,exports.BulletBadge=f,exports.Contrast=l,exports.ContrastContext=d,exports.MediaCard=function(c){var l=c.title,d=c.description,o=c.children,p=c.className,v=c.category,g=c.style,f=c.as,h=c.headingLevel,_=void 0===h?"h2":h,E=c.wholeCardAsElement,N=c.hideArrow,x=c.wrapperProps,y=i(c,u),b=f||"a",w=_,C=E?s({},x,y):s({},x);return a.createElement(m,s({className:t("eds-base-card","eds-media-card",p),style:g},C),a.createElement("div",{className:"eds-media-card__media"},o),a.createElement("div",{className:"eds-media-card__text"},v&&a.createElement(r.Label,{className:"eds-media-card__text__category"},v),a.createElement(e.ConditionalWrapper,{condition:void 0!==d,wrapper:function(e){return a.createElement(w,{className:"eds-media-card__text__title"},e)}},a.createElement(b,s({tabIndex:0,className:"eds-media-card__text__title-link"},y),l)),void 0!==d&&a.createElement(r.Paragraph,null,d),!N&&a.createElement(n.ForwardIcon,{className:"eds-media-card__arrow-icon","aria-hidden":"true"})))},exports.NavigationCard=function(e){var c=e.title,l=e.children,d=e.titleIcon,o=e.compact,u=void 0!==o&&o,v=e.className,g=e.externalLink,f=void 0!==g&&g,h=e.as,_=i(e,p),E=h||"a",N=t("eds-navigation-card",v,{"eds-base-card--red-line":u,"eds-navigation-card--compact":u});return a.createElement(m,s({as:E,className:N},_),!u&&d&&a.createElement("div",{className:"eds-navigation-card__title-icon","aria-hidden":"true"},d),a.createElement("span",{className:"eds-navigation-card__title"},u&&d&&a.createElement("span",{className:"eds-navigation-card__title-icon-compact","aria-hidden":"true"},d),a.createElement(r.Heading3,{as:"span"},c)),!u&&a.createElement(a.Fragment,null,a.createElement(r.Paragraph,null,l),f&&a.createElement(n.ExternalIcon,{"aria-label":"Ekstern lenke",className:"eds-navigation-card__external--not-compact"})),u&&f&&a.createElement(n.ExternalIcon,{"aria-label":"Ekstern lenke",className:"eds-navigattion-card__icon eds-navigation-card__external--compact"}),u&&!f&&a.createElement(n.ForwardIcon,{className:"eds-navigattion-card__icon eds-navigation-card__arrow-icon","aria-hidden":"true"}))},exports.NotificationBadge=h,exports.StatusBadge=_,exports.Tag=function(e){var r=e.className,n=e.children,c=e.compact,l=e.as,d=i(e,E),o=l||"div",m=a.Children.toArray(n);return a.createElement(o,s({className:t("eds-tag",r,{"eds-tag--leading-icon":m.length>1&&"string"!=typeof m[0],"eds-tag--trailing-icon":m.length>1&&"string"!=typeof m[m.length-1],"eds-tag--compact":c})},d),n)},exports.useContrast=function(){return a.useContext(d)};
 //# sourceMappingURL=layout.cjs.production.min.js.map

dist/layout.esm.js

@@ -1,2 +0,2 @@
-import { warnAboutMissingStyles } from '@entur/utils';
+import { ConditionalWrapper, warnAboutMissingStyles } from '@entur/utils';
 import React from 'react';
@@ -110,3 +110,3 @@ import classNames from 'classnames';
 
-var _excluded$2 = ["title", "description", "children", "className", "category", "style", "as", "wholeCardAsElement"];
+var _excluded$2 = ["title", "description", "children", "className", "category", "style", "as", "headingLevel", "wholeCardAsElement", "hideArrow", "wrapperProps"];
 var defaultElement$5 = 'a';
@@ -121,23 +121,31 @@ var MediaCard = function MediaCard(_ref) {
     as = _ref.as,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? 'h2' : _ref$headingLevel,
     whole = _ref.wholeCardAsElement,
+    hideArrow = _ref.hideArrow,
+    wrapperProps = _ref.wrapperProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var Element = as || defaultElement$5;
-  var classList = classNames('eds-base-card', 'eds-media-card', className);
-  var wrapperElement = whole ? Element : 'div';
-  var wrapperProps = whole ? rest : {};
-  var innerProps = whole ? {} : rest;
-  var InnerElement = whole ? 'div' : Element;
+  var Heading = headingLevel;
+  var _wrapperProps = whole ? _extends({}, wrapperProps, rest) : _extends({}, wrapperProps);
   return React.createElement(BaseCard, _extends({
-    as: wrapperElement,
-    className: classList,
+    className: classNames('eds-base-card', 'eds-media-card', className),
     style: style
-  }, wrapperProps), React.createElement("div", {
+  }, _wrapperProps), React.createElement("div", {
     className: "eds-media-card__media"
-  }, children), React.createElement(InnerElement, _extends({
+  }, children), React.createElement("div", {
     className: "eds-media-card__text"
-  }, innerProps), category && React.createElement(Label, {
-    className: "eds-media-card__category"
-  }, category), React.createElement("div", {
-    className: "eds-media-card__title"
-  }, title), React.createElement(Paragraph, null, description), React.createElement(ForwardIcon, {
+  }, category && React.createElement(Label, {
+    className: "eds-media-card__text__category"
+  }, category), React.createElement(ConditionalWrapper, {
+    condition: description !== undefined,
+    wrapper: function wrapper(children) {
+      return React.createElement(Heading, {
+        className: "eds-media-card__text__title"
+      }, children);
+    }
+  }, React.createElement(Element, _extends({
+    tabIndex: 0,
+    className: "eds-media-card__text__title-link"
+  }, rest), title)), description !== undefined && React.createElement(Paragraph, null, description), !hideArrow && React.createElement(ForwardIcon, {
     className: "eds-media-card__arrow-icon",
@@ -144,0 +152,0 @@ "aria-hidden": "true"

dist/MediaCard.d.ts

@@ -21,5 +21,16 @@ import React, { CSSProperties } from 'react';
     style?: CSSProperties;
-    /** Gjør hele kortet til "as"-elementet. Default er kun tekstområdet. Anbefales hvis media er et bilde
+    /** Hvilken heading som brukes for tittelen.
+     *  Blir kun satt hvis description også er satt.
+     * @default 'h2'
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Skjul pil-ikonet nederst til høyre
      * @default false
      */
+    hideArrow?: boolean;
+    /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */
+    wrapperProps?: React.HTMLAttributes<HTMLElement>;
+    /** @deprecated Denne prop-en har ikke lenger en funksjon.
+     *  Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en
+     */
     wholeCardAsElement?: boolean;
@@ -29,3 +40,3 @@ };
 declare const defaultElement = "a";
-export declare const MediaCard: <E extends React.ElementType<any> = "a">({ title, description, children, className, category, style, as, wholeCardAsElement: whole, ...rest }: MediaCardProps<E>) => JSX.Element;
+export declare const MediaCard: <E extends React.ElementType<any> = "a">({ title, description, children, className, category, style, as, headingLevel, wholeCardAsElement: whole, hideArrow, wrapperProps, ...rest }: MediaCardProps<E>) => JSX.Element;
 export default MediaCard;

package.json

 {
   "name": "@entur/layout",
-  "version": "2.1.57",
+  "version": "2.2.0",
   "license": "EUPL-1.2",
@@ -36,3 +36,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "907373a47cc81ae12be266bac1d10522033f8b49"
+  "gitHead": "450b88a0baca11352d329ffa3fcd6c003ec1d338"
 }

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

133843

increased by4.62%

Lines of code

1158

increased by4.8%

No dependency changes