@entur/form - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log
 
+# [0.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@0.2.0...@entur/form@0.3.0) (2019-10-22)
+
+### Features
+
+- **small typography:** added Small typography and documentation ([f2c6a0a](https://bitbucket.org/enturas/design-system/commits/f2c6a0a108b177efad32ca0fec0733a2072bd9d1))
+- **textarea:** adding TextArea Component, including rewrite of TextField component ([37360bc](https://bitbucket.org/enturas/design-system/commits/37360bcec5d0eba27dc6dc597aad4fe84fce6979))
+
 # 0.2.0 (2019-10-11)
@@ -8,0 +15,0 @@

dist/form.cjs.development.js

@@ -54,3 +54,3 @@ 'use strict';
     className: "entur-form-group__label"
-  }, label), children), feedback && React.createElement(typography.SubLabel, {
+  }, label), children), feedback && React.createElement(typography.SmallText, {
     className: "entur-form-group__feedback-wrapper"
@@ -94,9 +94,22 @@ }, React.createElement(AlertIcon, {
 
+function useFormComponentClasses(_ref) {
+  var _cx;
+
+  var variant = _ref.variant,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      width = _ref.width;
+  var formGroupVariant = useVariant();
+  var prioritizedVariant = variant === 'none' ? formGroupVariant : variant;
+  var classList = cx("entur-form-component", (_cx = {}, _cx["entur-form-component--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-form-component--disabled"] = disabled, _cx["entur-form-component--width-" + width] = width, _cx), className);
+  return classList;
+}
+
 var TextField =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
-  var _cx;
-
   var prepend = _ref.prepend,
-      variant = _ref.variant,
+      append = _ref.append,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
       _ref$disabled = _ref.disabled,
@@ -106,21 +119,66 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "variant", "disabled", "width", "className"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "width", "className"]);
 
-  var formGroupVariant = useVariant();
-  var prioritizedVariant = variant || formGroupVariant;
-  var classList = cx('entur-textfield', (_cx = {}, _cx["entur-textfield--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-textfield--disabled"] = disabled, _cx["entur-textfield--width-" + width] = width, _cx), className);
-  return React.createElement("label", {
-    className: classList
-  }, prepend && React.createElement("span", {
-    className: "entur-textfield--prepend"
-  }, prepend), React.createElement("input", Object.assign({
-    className: "entur-textfield--input",
+  var classList = useFormComponentClasses({
+    variant: variant,
     disabled: disabled,
-    "aria-invalid": prioritizedVariant === 'error',
+    className: ['entur-form-component--input', className],
+    width: width
+  });
+
+  if (prepend || append) {
+    return React.createElement("label", {
+      className: classList
+    }, prepend && React.createElement("span", {
+      className: "entur-form-component--input--prepend"
+    }, prepend), React.createElement("input", Object.assign({
+      disabled: disabled,
+      "aria-invalid": variant === 'error',
+      ref: ref
+    }, rest)), append && React.createElement("span", {
+      className: "entur-form-component--input--append"
+    }, append));
+  } else {
+    return React.createElement("input", Object.assign({
+      className: classList,
+      disabled: disabled,
+      "aria-invalid": variant === 'error',
+      ref: ref
+    }, rest));
+  }
+});
+
+var TextArea =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      className = _ref.className,
+      _ref$resize = _ref.resize,
+      resize = _ref$resize === void 0 ? false : _ref$resize,
+      width = _ref.width,
+      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "resize", "width"]);
+
+  var classList = useFormComponentClasses({
+    variant: variant,
+    disabled: disabled,
+    className: ['entur-form-component--textarea', className, (_ref2 = {}, _ref2['entur-form-component__textarea--resize'] = resize, _ref2)],
+    width: width
+  });
+  return React.createElement("textarea", Object.assign({
+    disabled: disabled,
+    "aria-invalid": variant === 'error',
+    className: classList,
     ref: ref
-  }, rest)));
+  }, rest));
 });
 
 exports.FormGroup = FormGroup;
+exports.TextArea = TextArea;
 exports.TextField = TextField;
+exports.useVariant = useVariant;
 //# sourceMappingURL=form.cjs.development.js.map

dist/form.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 r=e(require("react")),t=e(require("classnames")),a=require("@entur/icons"),n=require("@entur/typography");function l(e,r){if(null==e)return{};var t,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r.indexOf(t=l[a])>=0||(n[t]=e[t]);return n}var c=r.createContext("none");function i(e){var t=e.variant,a=l(e,["variant"]);return r.createElement(c.Provider,Object.assign({value:t},a))}var s=function(e){var t=e.level,n="entur-form-group__icon entur-form-group__icon--"+t;switch(t){case"success":return r.createElement(a.ValidationCheckIcon,{className:n});case"error":return r.createElement(a.ValidationErrorIcon,{className:n});case"info":return r.createElement(a.ValidationInfoIcon,{className:n});case"warning":return r.createElement(a.ValidationExclamationIcon,{className:n});case"none":return null}},u=r.forwardRef(function(e,a){var n,i=e.prepend,s=e.variant,u=e.disabled,o=void 0!==u&&u,d=e.width,m=e.className,f=l(e,["prepend","variant","disabled","width","className"]),p=r.useContext(c),v=s||p,b=t("entur-textfield",((n={})["entur-textfield--variant-"+v]=v,n["entur-textfield--disabled"]=o,n["entur-textfield--width-"+d]=d,n),m);return r.createElement("label",{className:b},i&&r.createElement("span",{className:"entur-textfield--prepend"},i),r.createElement("input",Object.assign({className:"entur-textfield--input",disabled:o,"aria-invalid":"error"===v,ref:a},f)))});exports.FormGroup=function(e){var t=e.feedback,a=e.variant,l=void 0===a?"none":a,c=e.children;return r.createElement(i,{variant:l},r.createElement("div",{className:"entur-form-group"},r.createElement(n.Label,null,r.createElement("span",{className:"entur-form-group__label"},e.label),c),t&&r.createElement(n.SubLabel,{className:"entur-form-group__feedback-wrapper"},r.createElement(s,{level:l}),r.createElement("span",{className:"entur-form-group__feedback"},t))))},exports.TextField=u;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("react")),r=e(require("classnames")),n=require("@entur/icons"),t=require("@entur/typography");function i(e,a){if(null==e)return{};var r,n,t={},i=Object.keys(e);for(n=0;n<i.length;n++)a.indexOf(r=i[n])>=0||(t[r]=e[r]);return t}var o=a.createContext("none");function s(e){var r=e.variant,n=i(e,["variant"]);return a.createElement(o.Provider,Object.assign({value:r},n))}function c(){return a.useContext(o)}var l=function(e){var r=e.level,t="entur-form-group__icon entur-form-group__icon--"+r;switch(r){case"success":return a.createElement(n.ValidationCheckIcon,{className:t});case"error":return a.createElement(n.ValidationErrorIcon,{className:t});case"info":return a.createElement(n.ValidationInfoIcon,{className:t});case"warning":return a.createElement(n.ValidationExclamationIcon,{className:t});case"none":return null}};function m(e){var a,n=e.variant,t=e.disabled,i=e.className,o=e.width,s=c(),l="none"===n?s:n;return r("entur-form-component",((a={})["entur-form-component--variant-"+l]=l,a["entur-form-component--disabled"]=t,a["entur-form-component--width-"+o]=o,a),i)}var u=a.forwardRef(function(e,r){var n=e.prepend,t=e.append,o=e.variant,s=void 0===o?"none":o,c=e.disabled,l=void 0!==c&&c,u=e.width,d=e.className,p=i(e,["prepend","append","variant","disabled","width","className"]),f=m({variant:s,disabled:l,className:["entur-form-component--input",d],width:u});return n||t?a.createElement("label",{className:f},n&&a.createElement("span",{className:"entur-form-component--input--prepend"},n),a.createElement("input",Object.assign({disabled:l,"aria-invalid":"error"===s,ref:r},p)),t&&a.createElement("span",{className:"entur-form-component--input--append"},t)):a.createElement("input",Object.assign({className:f,disabled:l,"aria-invalid":"error"===s,ref:r},p))}),d=a.forwardRef(function(e,r){var n,t=e.variant,o=void 0===t?"none":t,s=e.disabled,c=void 0!==s&&s,l=e.className,u=e.resize,d=void 0!==u&&u,p=e.width,f=i(e,["variant","disabled","className","resize","width"]),v=m({variant:o,disabled:c,className:["entur-form-component--textarea",l,(n={},n["entur-form-component__textarea--resize"]=d,n)],width:p});return a.createElement("textarea",Object.assign({disabled:c,"aria-invalid":"error"===o,className:v,ref:r},f))});exports.FormGroup=function(e){var r=e.feedback,n=e.variant,i=void 0===n?"none":n,o=e.children;return a.createElement(s,{variant:i},a.createElement("div",{className:"entur-form-group"},a.createElement(t.Label,null,a.createElement("span",{className:"entur-form-group__label"},e.label),o),r&&a.createElement(t.SmallText,{className:"entur-form-group__feedback-wrapper"},a.createElement(l,{level:i}),a.createElement("span",{className:"entur-form-group__feedback"},r))))},exports.TextArea=d,exports.TextField=u,exports.useVariant=c;
 //# sourceMappingURL=form.cjs.production.min.js.map

dist/form.esm.js

 import React from 'react';
 import cx from 'classnames';
 import { ValidationCheckIcon, ValidationErrorIcon, ValidationInfoIcon, ValidationExclamationIcon } from '@entur/icons';
-import { Label, SubLabel } from '@entur/typography';
+import { Label, SmallText } from '@entur/typography';
 
@@ -50,3 +50,3 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     className: "entur-form-group__label"
-  }, label), children), feedback && React.createElement(SubLabel, {
+  }, label), children), feedback && React.createElement(SmallText, {
     className: "entur-form-group__feedback-wrapper"
@@ -90,9 +90,22 @@ }, React.createElement(AlertIcon, {
 
+function useFormComponentClasses(_ref) {
+  var _cx;
+
+  var variant = _ref.variant,
+      disabled = _ref.disabled,
+      className = _ref.className,
+      width = _ref.width;
+  var formGroupVariant = useVariant();
+  var prioritizedVariant = variant === 'none' ? formGroupVariant : variant;
+  var classList = cx("entur-form-component", (_cx = {}, _cx["entur-form-component--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-form-component--disabled"] = disabled, _cx["entur-form-component--width-" + width] = width, _cx), className);
+  return classList;
+}
+
 var TextField =
 /*#__PURE__*/
 React.forwardRef(function (_ref, ref) {
-  var _cx;
-
   var prepend = _ref.prepend,
-      variant = _ref.variant,
+      append = _ref.append,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
       _ref$disabled = _ref.disabled,
@@ -102,20 +115,63 @@ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "variant", "disabled", "width", "className"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "width", "className"]);
 
-  var formGroupVariant = useVariant();
-  var prioritizedVariant = variant || formGroupVariant;
-  var classList = cx('entur-textfield', (_cx = {}, _cx["entur-textfield--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-textfield--disabled"] = disabled, _cx["entur-textfield--width-" + width] = width, _cx), className);
-  return React.createElement("label", {
-    className: classList
-  }, prepend && React.createElement("span", {
-    className: "entur-textfield--prepend"
-  }, prepend), React.createElement("input", Object.assign({
-    className: "entur-textfield--input",
+  var classList = useFormComponentClasses({
+    variant: variant,
     disabled: disabled,
-    "aria-invalid": prioritizedVariant === 'error',
+    className: ['entur-form-component--input', className],
+    width: width
+  });
+
+  if (prepend || append) {
+    return React.createElement("label", {
+      className: classList
+    }, prepend && React.createElement("span", {
+      className: "entur-form-component--input--prepend"
+    }, prepend), React.createElement("input", Object.assign({
+      disabled: disabled,
+      "aria-invalid": variant === 'error',
+      ref: ref
+    }, rest)), append && React.createElement("span", {
+      className: "entur-form-component--input--append"
+    }, append));
+  } else {
+    return React.createElement("input", Object.assign({
+      className: classList,
+      disabled: disabled,
+      "aria-invalid": variant === 'error',
+      ref: ref
+    }, rest));
+  }
+});
+
+var TextArea =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      className = _ref.className,
+      _ref$resize = _ref.resize,
+      resize = _ref$resize === void 0 ? false : _ref$resize,
+      width = _ref.width,
+      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "resize", "width"]);
+
+  var classList = useFormComponentClasses({
+    variant: variant,
+    disabled: disabled,
+    className: ['entur-form-component--textarea', className, (_ref2 = {}, _ref2['entur-form-component__textarea--resize'] = resize, _ref2)],
+    width: width
+  });
+  return React.createElement("textarea", Object.assign({
+    disabled: disabled,
+    "aria-invalid": variant === 'error',
+    className: classList,
     ref: ref
-  }, rest)));
+  }, rest));
 });
 
-export { FormGroup, TextField };
+export { FormGroup, TextArea, TextField, useVariant };
 //# sourceMappingURL=form.esm.js.map

dist/index.d.ts

@@ -1,2 +0,45 @@
-export { TextField } from './TextField';
-export { FormGroup } from './FormGroup';
+import React from "react";
+declare type VariantType = 'success' | 'error' | 'warning' | 'info' | 'none';
+declare function useVariant(): VariantType;
+declare type FormGroupProps = {
+    /** Tekst/label over en form-komponent */
+    label: string;
+    /** Varselmelding, som vil komme under form-komponenten */
+    feedback?: string;
+    /** Hvilken variant varselmeldingen skal ha */
+    variant?: VariantType;
+    /** En form-komponent */
+    children: React.ReactNode;
+};
+declare const FormGroup: React.FC<FormGroupProps>;
+declare type TextFieldProps = {
+    /** Tekst eller ikon som kommer før inputfeltet */
+    prepend?: React.ReactNode;
+    /** Tekst eller ikon som kommer etter inputfeltet */
+    append?: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Sett bredden på feltet. Verdien "fluid" setter bredden til 100 % av containeren */
+    width?: 'fluid';
+    /** Hvilken valideringsfarge som vises. Hentes fra FormGroup om mulig */
+    variant?: VariantType;
+    /** Deaktiver tekstfeltet */
+    disabled?: boolean;
+    [key: string]: any;
+};
+declare const TextField: React.RefForwardingComponent<HTMLInputElement, TextFieldProps>;
+declare type TextAreaProps = {
+    /** Klasse som sendes til komponenten. Bruk denne om du vil endre style */
+    className?: string;
+    /** Settes til 'fluid' for flytende textarea */
+    width?: 'fluid';
+    /** Settes for å style komponenten basert på state */
+    variant?: VariantType;
+    /** For å deaktivere inputfeltet */
+    disabled?: boolean;
+    /** true for å tillate resize horistontalt */
+    resize?: boolean;
+    [key: string]: any;
+};
+declare const TextArea: React.RefForwardingComponent<HTMLTextAreaElement, TextAreaProps>;
+export { TextField, useVariant, FormGroup, TextArea };

package.json

 {
   "name": "@entur/form",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "EUPL-1.2",
@@ -32,4 +32,5 @@ "main": "dist/index.js",
     "@entur/tokens": "^0.2.0",
-    "@entur/typography": "^0.2.0"
-  }
+    "@entur/typography": "^0.4.0"
+  },
+  "gitHead": "77dbc3aa668a5bcb32c44145191a24849d10e3e8"
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a 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

73809

increased by114.6%

Lines of code

586

increased by31.1%

Worsened metrics

Number of package files

13

decreased by-45.83%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@entur/typography@0.4.5(transitive)

• - Removed@entur/typography@0.2.0(transitive)

• Updated@entur/typography@^0.4.0