@entur/layout - npm Package Compare versions

Comparing version 0.4.1 to 1.0.0

CHANGELOG.md

@@ -6,2 +6,19 @@ # Change Log
 
+# [1.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/layout@0.4.1...@entur/layout@1.0.0) (2019-12-10)
+
+### Bug Fixes
+
+- adding default prop as part of documentation ([1ef7510](https://bitbucket.org/enturas/design-system/commits/1ef75107362f6262429d7fe31519b4353eccc8de))
+- **Card:** renaming CardBox/Tab, to NavigationCard ([da9856a](https://bitbucket.org/enturas/design-system/commits/da9856a285136e773825efe6ea4e927fea4a0ef4))
+
+### Features
+
+- adding new component Card ([836331f](https://bitbucket.org/enturas/design-system/commits/836331f985baee213d116ec364b19a864d73755f))
+
+### BREAKING CHANGES
+
+- **Card:** CardBox and CardTab are renamed to NavigationCard,
+  whereas CardBox is a renaming procedure(CardBox -> NavigationCard),
+  CardTab is NavigationCard with the compact prop
+
 ## [0.4.1](https://bitbucket.org/enturas/design-system/compare/@entur/layout@0.4.0...@entur/layout@0.4.1) (2019-11-29)
@@ -8,0 +25,0 @@

dist/index.d.ts

 import React from "react";
 declare type ContrastProps = {
-    /** HTML-elementet eller React-komponenten som rendres */
+    /** HTML-elementet eller React-komponenten som rendres
+     * @default 'div'
+     */
     as?: string | React.ElementType;
@@ -10,9 +12,7 @@ /** Ekstra klassenavn */
 declare const Contrast: React.FC<ContrastProps>;
-declare type CardBoxProps = {
-    /** HTML-elementet eller React-komponenten som lager CardBox */
-    as?: 'a' | 'button' | React.ElementType;
-    /** Tittelen/teksten som står i CardBox */
-    title: string;
-    /** Valgfritt ikon som står over tittelen */
-    titleIcon?: React.ReactNode;
+declare type BaseCardProps = {
+    /** HTML-elementet eller React-komponenten som lager Card
+     * @default "div"
+     */
+    as?: 'div' | React.ElementType;
     /** Ekstra klassenavn */
@@ -22,13 +22,23 @@ className?: string;
 };
-declare const CardBox: React.FC<CardBoxProps>;
-declare type CardTabProps = {
-    /** HTML-elementet eller React-komponenten som lager CardTab */
+declare const BaseCard: React.FC<BaseCardProps>;
+declare type NavigationCardProps = {
+    /** HTML-elementet eller React-komponenten som lager NavigationCard
+     * @default 'a'
+     */
     as?: 'a' | 'button' | React.ElementType;
-    /** Tittelen/teksten som står i CardTab */
+    /** Tittelen/teksten som står i CardBox */
     title: string;
+    /** Valgfritt ikon som står over tittelen */
+    titleIcon?: React.ReactNode;
     /** Ekstra klassenavn */
     className?: string;
+    /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst
+     * @default false
+     */
+    compact?: boolean;
+    /** Beskrivelse under tittel, om ikke "compact" er valgt */
+    children?: React.ReactNode;
     [key: string]: any;
 };
-declare const CardTab: React.FC<CardTabProps>;
-export { ContrastProps, Contrast, CardBoxProps, CardBox, CardTabProps, CardTab };
+declare const NavigationCard: React.FC<NavigationCardProps>;
+export { ContrastProps, Contrast, NavigationCardProps, NavigationCard, BaseCardProps, BaseCard };

dist/layout.cjs.development.js

@@ -22,46 +22,46 @@ 'use strict';
 
-var CardBox = function CardBox(_ref) {
+var BaseCard = function BaseCard(_ref) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'a' : _ref$as,
-      title = _ref.title,
+      Element = _ref$as === void 0 ? 'div' : _ref$as,
       children = _ref.children,
-      titleIcon = _ref.titleIcon,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ["as", "title", "children", "titleIcon", "className"]);
+      rest = _objectWithoutProperties(_ref, ["as", "children", "className"]);
 
-  var classList = classNames('eds-base-card', 'eds-card-box', className);
+  var classList = classNames('eds-base-card', className);
   return React.createElement(Element, Object.assign({
     className: classList
-  }, rest), titleIcon && React.createElement("div", {
-    className: "eds-card-box__title-icon"
-  }, titleIcon), React.createElement(typography.Heading3, {
-    as: "span",
-    className: "eds-card-box__heading"
-  }, title), React.createElement(typography.Paragraph, null, children), React.createElement(icons.ForwardIcon, {
-    className: "eds-card-box__arrow-icon"
-  }));
+  }, rest), children);
 };
 
-var CardTab = function CardTab(_ref) {
+var NavigationCard = function NavigationCard(_ref) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'a' : _ref$as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
       title = _ref.title,
+      children = _ref.children,
+      titleIcon = _ref.titleIcon,
+      _ref$compact = _ref.compact,
+      compact = _ref$compact === void 0 ? false : _ref$compact,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ["as", "title", "className"]);
+      rest = _objectWithoutProperties(_ref, ["as", "title", "children", "titleIcon", "compact", "className"]);
 
-  var classList = classNames('eds-base-card', 'eds-card-tab', className);
-  return React.createElement(Element, Object.assign({
+  var classList = classNames('eds-base-card', 'eds-navigation-card', className, {
+    'eds-navigation-card--compact': compact
+  });
+  return React.createElement(BaseCard, Object.assign({
+    as: as,
     className: classList
-  }, rest), React.createElement(typography.Heading3, {
+  }, rest), !compact && titleIcon && React.createElement("div", {
+    className: "eds-navigation-card__title-icon"
+  }, titleIcon), React.createElement(typography.Heading3, {
     as: "span",
-    className: "eds-card-tab__heading"
-  }, title), React.createElement(icons.ForwardIcon, {
-    inline: true,
-    className: "eds-card-tab__arrow-icon"
+    margin: compact ? 'both' : 'top'
+  }, title), !compact && React.createElement(typography.Paragraph, null, children), React.createElement(icons.ForwardIcon, {
+    inline: compact,
+    className: "eds-navigation-card__arrow-icon"
   }));
 };
 
-exports.CardBox = CardBox;
-exports.CardTab = CardTab;
+exports.BaseCard = BaseCard;
 exports.Contrast = Contrast;
+exports.NavigationCard = NavigationCard;
 //# sourceMappingURL=layout.cjs.development.js.map

dist/layout.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("@babel/runtime/helpers/objectWithoutProperties")),s=e(require("react")),r=e(require("classnames")),t=require("@entur/typography"),c=require("@entur/icons");exports.CardBox=function(e){var n=e.as,i=void 0===n?"a":n,l=e.title,d=e.children,o=e.titleIcon,m=e.className,u=a(e,["as","title","children","titleIcon","className"]),b=r("eds-base-card","eds-card-box",m);return s.createElement(i,Object.assign({className:b},u),o&&s.createElement("div",{className:"eds-card-box__title-icon"},o),s.createElement(t.Heading3,{as:"span",className:"eds-card-box__heading"},l),s.createElement(t.Paragraph,null,d),s.createElement(c.ForwardIcon,{className:"eds-card-box__arrow-icon"}))},exports.CardTab=function(e){var n=e.as,i=void 0===n?"a":n,l=e.title,d=e.className,o=a(e,["as","title","className"]),m=r("eds-base-card","eds-card-tab",d);return s.createElement(i,Object.assign({className:m},o),s.createElement(t.Heading3,{as:"span",className:"eds-card-tab__heading"},l),s.createElement(c.ForwardIcon,{inline:!0,className:"eds-card-tab__arrow-icon"}))},exports.Contrast=function(e){var t=e.as,c=void 0===t?"div":t,n=e.className,i=a(e,["as","className"]);return s.createElement(c,Object.assign({className:r("eds-contrast",n)},i))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("@babel/runtime/helpers/objectWithoutProperties")),t=e(require("react")),r=e(require("classnames")),s=require("@entur/typography"),n=require("@entur/icons"),c=function(e){var s=e.as,n=void 0===s?"div":s,c=e.children,i=e.className,o=a(e,["as","children","className"]),l=r("eds-base-card",i);return t.createElement(n,Object.assign({className:l},o),c)};exports.BaseCard=c,exports.Contrast=function(e){var s=e.as,n=void 0===s?"div":s,c=e.className,i=a(e,["as","className"]);return t.createElement(n,Object.assign({className:r("eds-contrast",c)},i))},exports.NavigationCard=function(e){var i=e.as,o=void 0===i?"a":i,l=e.title,d=e.children,m=e.titleIcon,u=e.compact,v=void 0!==u&&u,p=e.className,g=a(e,["as","title","children","titleIcon","compact","className"]),N=r("eds-base-card","eds-navigation-card",p,{"eds-navigation-card--compact":v});return t.createElement(c,Object.assign({as:o,className:N},g),!v&&m&&t.createElement("div",{className:"eds-navigation-card__title-icon"},m),t.createElement(s.Heading3,{as:"span",margin:v?"both":"top"},l),!v&&t.createElement(s.Paragraph,null,d),t.createElement(n.ForwardIcon,{inline:v,className:"eds-navigation-card__arrow-icon"}))};
 //# sourceMappingURL=layout.cjs.production.min.js.map

dist/layout.esm.js

@@ -18,44 +18,44 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 
-var CardBox = function CardBox(_ref) {
+var BaseCard = function BaseCard(_ref) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'a' : _ref$as,
-      title = _ref.title,
+      Element = _ref$as === void 0 ? 'div' : _ref$as,
       children = _ref.children,
-      titleIcon = _ref.titleIcon,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ["as", "title", "children", "titleIcon", "className"]);
+      rest = _objectWithoutProperties(_ref, ["as", "children", "className"]);
 
-  var classList = classNames('eds-base-card', 'eds-card-box', className);
+  var classList = classNames('eds-base-card', className);
   return React.createElement(Element, Object.assign({
     className: classList
-  }, rest), titleIcon && React.createElement("div", {
-    className: "eds-card-box__title-icon"
-  }, titleIcon), React.createElement(Heading3, {
-    as: "span",
-    className: "eds-card-box__heading"
-  }, title), React.createElement(Paragraph, null, children), React.createElement(ForwardIcon, {
-    className: "eds-card-box__arrow-icon"
-  }));
+  }, rest), children);
 };
 
-var CardTab = function CardTab(_ref) {
+var NavigationCard = function NavigationCard(_ref) {
   var _ref$as = _ref.as,
-      Element = _ref$as === void 0 ? 'a' : _ref$as,
+      as = _ref$as === void 0 ? 'a' : _ref$as,
       title = _ref.title,
+      children = _ref.children,
+      titleIcon = _ref.titleIcon,
+      _ref$compact = _ref.compact,
+      compact = _ref$compact === void 0 ? false : _ref$compact,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, ["as", "title", "className"]);
+      rest = _objectWithoutProperties(_ref, ["as", "title", "children", "titleIcon", "compact", "className"]);
 
-  var classList = classNames('eds-base-card', 'eds-card-tab', className);
-  return React.createElement(Element, Object.assign({
+  var classList = classNames('eds-base-card', 'eds-navigation-card', className, {
+    'eds-navigation-card--compact': compact
+  });
+  return React.createElement(BaseCard, Object.assign({
+    as: as,
     className: classList
-  }, rest), React.createElement(Heading3, {
+  }, rest), !compact && titleIcon && React.createElement("div", {
+    className: "eds-navigation-card__title-icon"
+  }, titleIcon), React.createElement(Heading3, {
     as: "span",
-    className: "eds-card-tab__heading"
-  }, title), React.createElement(ForwardIcon, {
-    inline: true,
-    className: "eds-card-tab__arrow-icon"
+    margin: compact ? 'both' : 'top'
+  }, title), !compact && React.createElement(Paragraph, null, children), React.createElement(ForwardIcon, {
+    inline: compact,
+    className: "eds-navigation-card__arrow-icon"
   }));
 };
 
-export { CardBox, CardTab, Contrast };
+export { BaseCard, Contrast, NavigationCard };
 //# sourceMappingURL=layout.esm.js.map

package.json

 {
   "name": "@entur/layout",
-  "version": "0.4.1",
+  "version": "1.0.0",
   "license": "EUPL-1.2",
@@ -30,3 +30,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/typography": "^0.6.0",
+    "@entur/typography": "^0.6.1",
     "classnames": "^2.2.6"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "063faba53aff9f8a3248ca8880f9f1dd3db36a9d"
+  "gitHead": "c518a56619cd30d0c7254b0f9f5298c69e54a8a0"
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45214

increased by3.52%

Lines of code

212

increased by0.47%

Number of low quality alerts

2

decreased by-33.33%

Dependency changes

• Updated@entur/typography@^0.6.1