@entur/form - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

@@ -6,2 +6,21 @@ # Change Log
 
+# [0.4.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@0.3.0...@entur/form@0.4.0) (2019-10-30)
+
+### Bug Fixes
+
+- **FormGroup:** give adjacent form groups some margin between them ([4acc478](https://bitbucket.org/enturas/design-system/commits/4acc478f1d8f71fafaed14dc7f135ea16e4533ee))
+- migrate to latest version of space tokens ([4330496](https://bitbucket.org/enturas/design-system/commits/4330496e269bf628f7b9b7aec75f704800201101))
+- update all packages to use new tokens ([4847835](https://bitbucket.org/enturas/design-system/commits/48478359b0e562ba828e06d9b5c57239316805c2))
+- **FormGroup:** make FormGroup component a block element and add default space between ([56d2b6b](https://bitbucket.org/enturas/design-system/commits/56d2b6bfcd7fbed77078b1c4bf9cdaa533b0d078))
+- **FormGroup:** removing feedback if variant is set to 'none' ([21fe9e2](https://bitbucket.org/enturas/design-system/commits/21fe9e27f78789d158eb54ebce599b254cd91aaa))
+- **FormGroup:** removing required label, and styling bugs fixed ([b2a94fa](https://bitbucket.org/enturas/design-system/commits/b2a94fa0c183bf81d9b0e59a9ecca9abda18c411))
+
+### Features
+
+- adding checkbox form component ([ef3738a](https://bitbucket.org/enturas/design-system/commits/ef3738a5e25fdfe81631e87d3406a62f16487eb6))
+- adding Dropdown as a form component ([4128447](https://bitbucket.org/enturas/design-system/commits/41284476813b11cec6f641558864522ad837dde4))
+- adding radio button as form component ([06daf66](https://bitbucket.org/enturas/design-system/commits/06daf669712c49c3c65aa3f4430e3fe01c35a3bc))
+- **Fieldset:** add new component Fieldset ([9085f9e](https://bitbucket.org/enturas/design-system/commits/9085f9e2d7bb06a5cb96dc67901793161cd18267))
+- **RadioGroup:** adding RadioGroup for use with radio-buttons ([7133c2e](https://bitbucket.org/enturas/design-system/commits/7133c2eb7f04e14b0d012481d7d4f334a57a42e7))
+
 # [0.3.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@0.2.0...@entur/form@0.3.0) (2019-10-22)
@@ -8,0 +27,0 @@

dist/form.cjs.development.js

@@ -52,5 +52,9 @@ 'use strict';
     className: "entur-form-group"
-  }, React.createElement(typography.Label, null, React.createElement("span", {
+  }, React.createElement(typography.Label, {
+    style: {
+      display: 'block'
+    }
+  }, React.createElement("span", {
     className: "entur-form-group__label"
-  }, label), children), feedback && React.createElement(typography.SmallText, {
+  }, label), children), feedback && variant !== 'none' && React.createElement(typography.SmallText, {
     className: "entur-form-group__feedback-wrapper"
@@ -178,3 +182,136 @@ }, React.createElement(AlertIcon, {
 
+var Dropdown = function Dropdown(_ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "variant", "disabled", "children"]);
+
+  var classList = useFormComponentClasses({
+    variant: variant,
+    disabled: disabled,
+    className: ['entur-form-component--dropdown', className],
+    width: width
+  });
+  return React.createElement("select", Object.assign({
+    className: classList
+  }, rest), children);
+};
+var DropdownItem = function DropdownItem(_ref2) {
+  var children = _ref2.children,
+      rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return React.createElement("option", Object.assign({}, rest), children);
+};
+
+var Fieldset = function Fieldset(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      label = _ref.label,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "label"]);
+
+  return React.createElement("fieldset", Object.assign({
+    className: cx('entur-fieldset', className)
+  }, rest), label && React.createElement(typography.Heading4, {
+    as: "legend",
+    className: "entur-legend"
+  }, label), children);
+};
+
+var Checkbox =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "children"]);
+
+  return React.createElement("label", {
+    className: cx('entur-form-component--checkbox__container', className)
+  }, React.createElement("input", Object.assign({
+    type: "checkbox",
+    ref: ref
+  }, rest)), React.createElement("span", {
+    className: "entur-form-component--checkbox__icon"
+  }, React.createElement(icons.CheckIcon, null)), children && React.createElement(typography.Label, {
+    as: "span"
+  }, children));
+});
+
+var RadioGroupContext =
+/*#__PURE__*/
+React.createContext(null);
+var RadioGroupContextProvider = RadioGroupContext.Provider;
+var useRadioGroupContext = function useRadioGroupContext() {
+  var context = React.useContext(RadioGroupContext);
+
+  if (!context) {
+    throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
+  }
+
+  return context;
+};
+
+var Radio =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      value = _ref.value,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "value"]);
+
+  var classList = cx(className, 'entur-form-component--radio__radio');
+
+  var _useRadioGroupContext = useRadioGroupContext(),
+      name = _useRadioGroupContext.name,
+      selectedValue = _useRadioGroupContext.value,
+      onChange = _useRadioGroupContext.onChange;
+
+  return React.createElement("label", {
+    className: "entur-form-component--radio__container"
+  }, React.createElement("input", Object.assign({
+    type: "radio",
+    name: name,
+    ref: ref,
+    value: value,
+    checked: selectedValue === value,
+    onChange: onChange
+  }, rest)), React.createElement("span", {
+    className: classList
+  }, React.createElement("span", {
+    className: "entur-form-component--radio__circle"
+  })), children && React.createElement(typography.Label, {
+    as: "span"
+  }, children));
+});
+
+var RadioGroup = function RadioGroup(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      rest = _objectWithoutPropertiesLoose(_ref, ["name", "value", "children", "onChange"]);
+
+  var contextValue = React.useMemo(function () {
+    return {
+      name: name,
+      value: value,
+      onChange: onChange
+    };
+  }, [name, value, onChange]);
+  return React.createElement(RadioGroupContextProvider, {
+    value: contextValue
+  }, React.createElement(Fieldset, Object.assign({}, rest), children));
+};
+
+exports.Checkbox = Checkbox;
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.Fieldset = Fieldset;
 exports.FormGroup = FormGroup;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
 exports.TextArea = TextArea;
@@ -181,0 +318,0 @@ exports.TextField = TextField;

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 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;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("react")),n=e(require("classnames")),r=require("@entur/icons"),t=require("@entur/typography");function o(e,a){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)a.indexOf(n=o[r])>=0||(t[n]=e[n]);return t}var c=a.createContext("none");function l(e){var n=e.variant,r=o(e,["variant"]);return a.createElement(c.Provider,Object.assign({value:n},r))}function s(){return a.useContext(c)}var i=function(e){var n=e.level,t="entur-form-group__icon entur-form-group__icon--"+n;switch(n){case"success":return a.createElement(r.ValidationCheckIcon,{className:t});case"error":return a.createElement(r.ValidationErrorIcon,{className:t});case"info":return a.createElement(r.ValidationInfoIcon,{className:t});case"warning":return a.createElement(r.ValidationExclamationIcon,{className:t});case"none":return null}};function m(e){var a,r=e.variant,t=e.disabled,o=e.className,c=e.width,l=s(),i="none"===r?l:r;return n("entur-form-component",((a={})["entur-form-component--variant-"+i]=i,a["entur-form-component--disabled"]=t,a["entur-form-component--width-"+c]=c,a),o)}var d=a.forwardRef(function(e,n){var r=e.prepend,t=e.append,c=e.variant,l=void 0===c?"none":c,s=e.disabled,i=void 0!==s&&s,d=e.width,u=e.className,p=o(e,["prepend","append","variant","disabled","width","className"]),f=m({variant:l,disabled:i,className:["entur-form-component--input",u],width:d});return r||t?a.createElement("label",{className:f},r&&a.createElement("span",{className:"entur-form-component--input--prepend"},r),a.createElement("input",Object.assign({disabled:i,"aria-invalid":"error"===l,ref:n},p)),t&&a.createElement("span",{className:"entur-form-component--input--append"},t)):a.createElement("input",Object.assign({className:f,disabled:i,"aria-invalid":"error"===l,ref:n},p))}),u=a.forwardRef(function(e,n){var r,t=e.variant,c=void 0===t?"none":t,l=e.disabled,s=void 0!==l&&l,i=e.className,d=e.resize,u=void 0!==d&&d,p=e.width,f=o(e,["variant","disabled","className","resize","width"]),v=m({variant:c,disabled:s,className:["entur-form-component--textarea",i,(r={},r["entur-form-component__textarea--resize"]=u,r)],width:p});return a.createElement("textarea",Object.assign({disabled:s,"aria-invalid":"error"===c,className:v,ref:n},f))}),p=function(e){var r=e.children,c=e.className,l=e.label,s=o(e,["children","className","label"]);return a.createElement("fieldset",Object.assign({className:n("entur-fieldset",c)},s),l&&a.createElement(t.Heading4,{as:"legend",className:"entur-legend"},l),r)},f=a.forwardRef(function(e,c){var l=e.className,s=e.children,i=o(e,["className","width","children"]);return a.createElement("label",{className:n("entur-form-component--checkbox__container",l)},a.createElement("input",Object.assign({type:"checkbox",ref:c},i)),a.createElement("span",{className:"entur-form-component--checkbox__icon"},a.createElement(r.CheckIcon,null)),s&&a.createElement(t.Label,{as:"span"},s))}),v=a.createContext(null),b=v.Provider,h=a.forwardRef(function(e,r){var c=e.className,l=e.children,s=e.value,i=o(e,["className","children","value"]),m=n(c,"entur-form-component--radio__radio"),d=function(){var e=a.useContext(v);if(!e)throw new Error("You need to wrap your RadioButtons in a RadioGroup component");return e}();return a.createElement("label",{className:"entur-form-component--radio__container"},a.createElement("input",Object.assign({type:"radio",name:d.name,ref:r,value:s,checked:d.value===s,onChange:d.onChange},i)),a.createElement("span",{className:m},a.createElement("span",{className:"entur-form-component--radio__circle"})),l&&a.createElement(t.Label,{as:"span"},l))});exports.Checkbox=f,exports.Dropdown=function(e){var n=e.className,r=e.width,t=e.variant,c=void 0===t?"none":t,l=e.disabled,s=void 0!==l&&l,i=e.children,d=o(e,["className","width","variant","disabled","children"]),u=m({variant:c,disabled:s,className:["entur-form-component--dropdown",n],width:r});return a.createElement("select",Object.assign({className:u},d),i)},exports.DropdownItem=function(e){var n=e.children,r=o(e,["children"]);return a.createElement("option",Object.assign({},r),n)},exports.Fieldset=p,exports.FormGroup=function(e){var n=e.feedback,r=e.variant,o=void 0===r?"none":r,c=e.children;return a.createElement(l,{variant:o},a.createElement("div",{className:"entur-form-group"},a.createElement(t.Label,{style:{display:"block"}},a.createElement("span",{className:"entur-form-group__label"},e.label),c),n&&"none"!==o&&a.createElement(t.SmallText,{className:"entur-form-group__feedback-wrapper"},a.createElement(i,{level:o}),a.createElement("span",{className:"entur-form-group__feedback"},n))))},exports.Radio=h,exports.RadioGroup=function(e){var n=e.name,r=e.value,t=e.children,c=e.onChange,l=o(e,["name","value","children","onChange"]),s=a.useMemo(function(){return{name:n,value:r,onChange:c}},[n,r,c]);return a.createElement(b,{value:s},a.createElement(p,Object.assign({},l),t))},exports.TextArea=u,exports.TextField=d,exports.useVariant=s;
 //# 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, SmallText } from '@entur/typography';
+import { ValidationCheckIcon, ValidationErrorIcon, ValidationInfoIcon, ValidationExclamationIcon, CheckIcon } from '@entur/icons';
+import { Label, SmallText, Heading4 } from '@entur/typography';
 
@@ -48,5 +48,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     className: "entur-form-group"
-  }, React.createElement(Label, null, React.createElement("span", {
+  }, React.createElement(Label, {
+    style: {
+      display: 'block'
+    }
+  }, React.createElement("span", {
     className: "entur-form-group__label"
-  }, label), children), feedback && React.createElement(SmallText, {
+  }, label), children), feedback && variant !== 'none' && React.createElement(SmallText, {
     className: "entur-form-group__feedback-wrapper"
@@ -174,3 +178,130 @@ }, React.createElement(AlertIcon, {
 
-export { FormGroup, TextArea, TextField, useVariant };
+var Dropdown = function Dropdown(_ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "variant", "disabled", "children"]);
+
+  var classList = useFormComponentClasses({
+    variant: variant,
+    disabled: disabled,
+    className: ['entur-form-component--dropdown', className],
+    width: width
+  });
+  return React.createElement("select", Object.assign({
+    className: classList
+  }, rest), children);
+};
+var DropdownItem = function DropdownItem(_ref2) {
+  var children = _ref2.children,
+      rest = _objectWithoutPropertiesLoose(_ref2, ["children"]);
+
+  return React.createElement("option", Object.assign({}, rest), children);
+};
+
+var Fieldset = function Fieldset(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      label = _ref.label,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "label"]);
+
+  return React.createElement("fieldset", Object.assign({
+    className: cx('entur-fieldset', className)
+  }, rest), label && React.createElement(Heading4, {
+    as: "legend",
+    className: "entur-legend"
+  }, label), children);
+};
+
+var Checkbox =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      width = _ref.width,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "children"]);
+
+  return React.createElement("label", {
+    className: cx('entur-form-component--checkbox__container', className)
+  }, React.createElement("input", Object.assign({
+    type: "checkbox",
+    ref: ref
+  }, rest)), React.createElement("span", {
+    className: "entur-form-component--checkbox__icon"
+  }, React.createElement(CheckIcon, null)), children && React.createElement(Label, {
+    as: "span"
+  }, children));
+});
+
+var RadioGroupContext =
+/*#__PURE__*/
+React.createContext(null);
+var RadioGroupContextProvider = RadioGroupContext.Provider;
+var useRadioGroupContext = function useRadioGroupContext() {
+  var context = React.useContext(RadioGroupContext);
+
+  if (!context) {
+    throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
+  }
+
+  return context;
+};
+
+var Radio =
+/*#__PURE__*/
+React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      value = _ref.value,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "children", "value"]);
+
+  var classList = cx(className, 'entur-form-component--radio__radio');
+
+  var _useRadioGroupContext = useRadioGroupContext(),
+      name = _useRadioGroupContext.name,
+      selectedValue = _useRadioGroupContext.value,
+      onChange = _useRadioGroupContext.onChange;
+
+  return React.createElement("label", {
+    className: "entur-form-component--radio__container"
+  }, React.createElement("input", Object.assign({
+    type: "radio",
+    name: name,
+    ref: ref,
+    value: value,
+    checked: selectedValue === value,
+    onChange: onChange
+  }, rest)), React.createElement("span", {
+    className: classList
+  }, React.createElement("span", {
+    className: "entur-form-component--radio__circle"
+  })), children && React.createElement(Label, {
+    as: "span"
+  }, children));
+});
+
+var RadioGroup = function RadioGroup(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      rest = _objectWithoutPropertiesLoose(_ref, ["name", "value", "children", "onChange"]);
+
+  var contextValue = React.useMemo(function () {
+    return {
+      name: name,
+      value: value,
+      onChange: onChange
+    };
+  }, [name, value, onChange]);
+  return React.createElement(RadioGroupContextProvider, {
+    value: contextValue
+  }, React.createElement(Fieldset, Object.assign({}, rest), children));
+};
+
+export { Checkbox, Dropdown, DropdownItem, Fieldset, FormGroup, Radio, RadioGroup, TextArea, TextField, useVariant };
 //# sourceMappingURL=form.esm.js.map

dist/index.d.ts

@@ -6,3 +6,3 @@ import React from "react";
     /** Tekst/label over en form-komponent */
-    label: string;
+    label?: string;
     /** Varselmelding, som vil komme under form-komponenten */
@@ -46,2 +46,68 @@ feedback?: string;
 declare const TextArea: React.RefForwardingComponent<HTMLTextAreaElement, TextAreaProps>;
-export { TextField, useVariant, FormGroup, TextArea };
+declare type DropdownProps = {
+    /** Klasse som sendes til komponenten. Bruk denne om du vil endre style */
+    className?: string;
+    /** Settes til 'fluid' for flytende dropdown */
+    width?: 'fluid';
+    /** Settes for å style komponenten basert på state/validering */
+    variant?: VariantType;
+    /** For å deaktivere dropdownen */
+    disabled?: boolean;
+    /** Den valgte verdien */
+    value: string;
+    /** En callback for endringer av value */
+    onChange: (e: React.ChangeEvent) => void;
+    /** Alle mulige valg for dropdownen å ha */
+    children: React.ReactNode;
+    [key: string]: any;
+} & React.HTMLProps<HTMLSelectElement>;
+declare const Dropdown: React.FC<DropdownProps>;
+declare type DropdownItemProps = {
+    /** Labelen/children for en option */
+    children: React.ReactNode;
+    [key: string]: any;
+};
+declare const DropdownItem: React.FC<DropdownItemProps>;
+declare type Props = {
+    /** Innholdet i felt-gruppen. */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Labelen til felt-gruppen. */
+    label?: React.ReactNode;
+    [key: string]: any;
+} & React.HTMLProps<HTMLFieldSetElement>;
+declare const Fieldset: React.FC<Props>;
+declare type CheckboxProps = {
+    /** Klasse som sendes til komponenten. Bruk denne om du vil endre style */
+    className?: string;
+    /** Label for checkboxen, som vises ved høyre side. */
+    children?: React.ReactNode;
+    [key: string]: any;
+} & React.HTMLProps<HTMLInputElement>;
+declare const Checkbox: React.RefForwardingComponent<HTMLInputElement, CheckboxProps>;
+declare type RadioProps = {
+    /** Klasse som sendes til komponenten. Bruk denne om du vil endre styling */
+    className?: string;
+    /** Label til radio-button. Vises ved høyre side. */
+    children?: React.ReactNode;
+    /** Verdien til radioknappen */
+    value: string;
+    [key: string]: any;
+};
+declare const Radio: React.RefForwardingComponent<HTMLInputElement, RadioProps>;
+declare type RadioGroupProps = {
+    /** Navnet til radiogruppen. */
+    name: string;
+    /** Overskrift over radiogruppen */
+    label?: string;
+    /** Verdien til den valgte radioknappen */
+    value: string;
+    /** Radioknappene sendes inn som children */
+    children: React.ReactNode;
+    /** En callback som blir kalles hver gang en radioknapp klikkes på  */
+    onChange: (e: React.ChangeEvent) => void;
+    [key: string]: any;
+};
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export { TextField, useVariant, FormGroup, TextArea, Dropdown, DropdownItem, Fieldset, Checkbox, Radio, RadioGroup };

package.json

 {
   "name": "@entur/form",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "EUPL-1.2",
@@ -31,6 +31,6 @@ "main": "dist/index.js",
     "@entur/icons": "^0.2.0",
-    "@entur/tokens": "^0.2.0",
-    "@entur/typography": "^0.4.0"
+    "@entur/tokens": "^1.0.0",
+    "@entur/typography": "^0.4.1"
   },
-  "gitHead": "77dbc3aa668a5bcb32c44145191a24849d10e3e8"
+  "gitHead": "33a589c66b9169353060466237d3e69972b7a726"
 }

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

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

Improved metrics

Total package byte prevSize

121499

increased by64.61%

Lines of code

1038

increased by77.13%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@entur/tokens@1.4.0(transitive)

• + Addedhex-rgb@4.3.0(transitive)

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

• Updated@entur/tokens@^1.0.0

• Updated@entur/typography@^0.4.1