@entur/form 5.4.20 → 6.0.1

package/README.md

@@ -2,7 +2,7 @@
 
 This package contains all the common form-components
 
-> 💡 Looking for the [documentation](https://design.entur.org/komponenter/inputs/textfields)?
+> 💡 Looking for the [documentation](https://design.entur.no/komponenter/inputs/textfields)?
 
 ## Installation
 
@@ -14,4 +14,4 @@ yarn add @entur/form
 
 ## Usage
 
-Please refer to the [documentation](https://design.entur.org/komponenter/inputs/textfields) for further usage information.
+Please refer to the [documentation](https://design.entur.no/komponenter/inputs/textfields) for further usage information.

package/dist/Switch.d.ts

@@ -17,11 +17,13 @@ export type SwitchProps = {
      * @default false
      */
     hideIcon?: boolean;
-    /** Farge som settes på ikon og bakgrunnen når Switch-en er "checked". Default er mint-contrast
-     * @default colors.validation .mintContrast
+    /** Farge som settes på ikon og bakgrunn når Switch-en er "checked"
+     * @default colors.validation.mint
      */
     color?: string;
-    /** Lik som color, men når Switch-en står i en kontrast seksjon. Default er samme farge som color. */
+    /** Farge på bakgrunn når Switch-en er "checked" og står i en kontrast-seksjon
+     * @default colors.validation.mintContrast
+     */
     contrastColor?: string;
     /** Størrelsen på Switch-en
      * @default "medium"
@@ -47,11 +49,13 @@ export declare const Switch: React.ForwardRefExoticComponent<{
      * @default false
      */
     hideIcon?: boolean | undefined;
-    /** Farge som settes på ikon og bakgrunnen når Switch-en er "checked". Default er mint-contrast
-     * @default colors.validation .mintContrast
+    /** Farge som settes på ikon og bakgrunn når Switch-en er "checked"
+     * @default colors.validation.mint
      */
     color?: string | undefined;
-    /** Lik som color, men når Switch-en står i en kontrast seksjon. Default er samme farge som color. */
+    /** Farge på bakgrunn når Switch-en er "checked" og står i en kontrast-seksjon
+     * @default colors.validation.mintContrast
+     */
     contrastColor?: string | undefined;
     /** Størrelsen på Switch-en
      * @default "medium"

package/dist/form.cjs.development.js

@@ -61,7 +61,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$f = ["children", "hideIcon", "variant", "className"];
+var _excluded$e = ["children", "hideIcon", "variant", "className"];
 var AlertIcon = function AlertIcon(_ref) {
   var variant = _ref.variant;
   var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
@@ -90,7 +90,7 @@ var FeedbackText = function FeedbackText(_ref2) {
     hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
     variant = _ref2.variant,
     className = _ref2.className,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
+    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
   return React__default["default"].createElement(typography.SubLabel, _extends({
     className: classNames__default["default"]('eds-feedback-text', {
       'eds-feedback-text--info': variant === 'info'
@@ -124,14 +124,14 @@ var useInputGroupContext = function useInputGroupContext() {
   return React__namespace.useContext(InputGroupContext);
 };
 
-var _excluded$e = ["label", "required", "labelId", "staticAnimation"];
+var _excluded$d = ["label", "required", "labelId", "staticAnimation"];
 var InputGroupLabel = function InputGroupLabel(_ref) {
   var label = _ref.label,
     required = _ref.required,
     labelId = _ref.labelId,
     _ref$staticAnimation = _ref.staticAnimation,
     staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var _useInputGroupContext = useInputGroupContext(),
     isFilled = _useInputGroupContext.isFilled;
   var filler = staticAnimation || isFilled;
@@ -161,7 +161,7 @@ var useVariant = function useVariant() {
   return context;
 };
 
-var _excluded$d = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
+var _excluded$c = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
 var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -188,7 +188,7 @@ var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function
     disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
     _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
     ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var contextVariant = useVariant();
   var currentVariant = variant || contextVariant;
   return React__default["default"].createElement(InputGroupContextProvider, null, React__default["default"].createElement("div", _extends({
@@ -224,7 +224,7 @@ var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function
   }, feedback));
 });
 
-var _excluded$c = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
+var _excluded$b = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
 var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var checked = _ref.checked,
     className = _ref.className,
@@ -233,7 +233,7 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     reduceClickArea = _ref.reduceClickArea,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   // Trick to allow using a ref locally, while still allowing for ref forwarding
   // Read more at https://reactjs.org/docs/hooks-reference.html#useimperativehandle
   var innerRef = React__default["default"].useRef(null);
@@ -293,12 +293,12 @@ var CheckboxIcon = function CheckboxIcon(_ref2) {
   }));
 };
 
-var _excluded$b = ["children", "className", "label"];
+var _excluded$a = ["children", "className", "label"];
 var Fieldset = function Fieldset(_ref) {
   var children = _ref.children,
     className = _ref.className,
     label = _ref.label,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return React__default["default"].createElement("fieldset", _extends({
     className: classNames__default["default"]('eds-fieldset', className)
   }, rest), label && React__default["default"].createElement(typography.Label, {
@@ -317,13 +317,13 @@ var useRadioGroupContext = function useRadioGroupContext() {
   return context;
 };
 
-var _excluded$a = ["className", "children", "value", "disabled"];
+var _excluded$9 = ["className", "children", "value", "disabled"];
 var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
     value = _ref.value,
     disabled = _ref.disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   var classList = classNames__default["default"](className, 'eds-form-component--radio__radio', {
     'eds-form-component--radio__radio--disabled': disabled
   });
@@ -352,14 +352,14 @@ var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, re
   }, children));
 });
 
-var _excluded$9 = ["name", "value", "children", "onChange", "label"];
+var _excluded$8 = ["name", "value", "children", "onChange", "label"];
 var RadioGroup = function RadioGroup(_ref) {
   var name = _ref.name,
     value = _ref.value,
     children = _ref.children,
     onChange = _ref.onChange,
     label = _ref.label,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var contextValue = React__default["default"].useMemo(function () {
     return {
       name: name,
@@ -374,7 +374,7 @@ var RadioGroup = function RadioGroup(_ref) {
   }, rest), children) : children);
 };
 
-var _excluded$8 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
+var _excluded$7 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
 var RadioPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -389,7 +389,7 @@ var RadioPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_re
     id = _ref.id,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var classList = classNames__default["default"](className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
     'eds-radio-panel--disabled': disabled
   });
@@ -439,7 +439,7 @@ var RadioPanelCheck = function RadioPanelCheck() {
   }));
 };
 
-var _excluded$7 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size"];
+var _excluded$6 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size", "checked"];
 var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -449,27 +449,35 @@ var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, r
     _ref$hideIcon = _ref.hideIcon,
     hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? tokens.colors.validation.mintContrast : _ref$color,
-    contrastColor = _ref.contrastColor,
+    color = _ref$color === void 0 ? tokens.colors.validation.mint : _ref$color,
+    _ref$contrastColor = _ref.contrastColor,
+    contrastColor = _ref$contrastColor === void 0 ? tokens.colors.validation.mintContrast : _ref$contrastColor,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var chosenContrastColor = contrastColor && contrastColor || color;
+    checked = _ref.checked,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var displayedIcon = function displayedIcon() {
     if (icon) return icon;
-    return rest.checked ? React__default["default"].createElement(icons.CheckIcon, null) : React__default["default"].createElement(icons.CloseSmallIcon, null);
+    if (checked === undefined) return React__default["default"].createElement(React__default["default"].Fragment, null);
+    var iconSize = size === 'large' ? 23 : undefined;
+    return checked ? React__default["default"].createElement(icons.CheckIcon, {
+      size: iconSize
+    }) : React__default["default"].createElement(icons.CloseSmallIcon, {
+      size: iconSize
+    });
   };
   return React__default["default"].createElement("label", {
     className: classNames__default["default"]('eds-switch', "eds-switch--" + labelPlacement, className),
     style: _extends({}, rest.style)
   }, React__default["default"].createElement("input", _extends({
     type: "checkbox",
-    ref: ref
+    ref: ref,
+    checked: checked
   }, rest)), React__default["default"].createElement("span", {
     className: classNames__default["default"]('eds-switch__switch', "eds-switch__switch--" + size),
     style: {
       '--eds-switch-color': color,
-      '--eds-switch-contrast-color': chosenContrastColor
+      '--eds-switch-contrast-color': contrastColor
     }
   }, React__default["default"].createElement("span", {
     className: "eds-switch__circle"
@@ -478,95 +486,6 @@ var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, r
   }, children));
 });
 
-var _excluded$6 = ["className", "children", "labelPlacement", "transport", "size"];
-var TravelSwitch = function TravelSwitch(_ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    _ref$labelPlacement = _ref.labelPlacement,
-    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
-    transport = _ref.transport,
-    size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var _modeCalc = modeCalc(transport),
-    color = _modeCalc.color,
-    contrast = _modeCalc.contrast,
-    Icon = _modeCalc.Icon;
-  return React__default["default"].createElement(Switch, _extends({
-    className: className,
-    labelPlacement: labelPlacement,
-    color: color,
-    contrastColor: contrast,
-    icon: React__default["default"].createElement(Icon, null),
-    size: size
-  }, rest), children);
-};
-function modeCalc(mode) {
-  switch (mode) {
-    case 'bus':
-      return {
-        Icon: icons.BusIcon,
-        color: tokens.colors.transport["default"].bus,
-        contrast: tokens.colors.transport.contrast.bus
-      };
-    case 'metro':
-      return {
-        Icon: icons.SubwayIcon,
-        color: tokens.colors.transport["default"].metro,
-        contrast: tokens.colors.transport.contrast.metro
-      };
-    case 'air':
-      return {
-        Icon: icons.PlaneIcon,
-        color: tokens.colors.transport["default"].plane,
-        contrast: tokens.colors.transport.contrast.plane
-      };
-    case 'tram':
-      return {
-        Icon: icons.TramIcon,
-        color: tokens.colors.transport["default"].tram,
-        contrast: tokens.colors.transport.contrast.tram
-      };
-    case 'rail':
-      return {
-        Icon: icons.TrainIcon,
-        color: tokens.colors.transport["default"].train,
-        contrast: tokens.colors.transport.contrast.train
-      };
-    case 'water':
-      return {
-        Icon: icons.FerryIcon,
-        color: tokens.colors.transport["default"].ferry,
-        contrast: tokens.colors.transport.contrast.ferry
-      };
-    case 'bike':
-      return {
-        Icon: icons.BicycleIcon,
-        color: tokens.colors.transport["default"].mobility,
-        contrast: tokens.colors.transport.contrast.mobility
-      };
-    case 'scooter':
-      return {
-        Icon: icons.ScooterIcon,
-        color: tokens.colors.transport["default"].mobility,
-        contrast: tokens.colors.transport.contrast.mobility
-      };
-    case 'airportLinkBus':
-      return {
-        Icon: icons.BusIcon,
-        color: tokens.colors.transport["default"].plane,
-        contrast: tokens.colors.transport.contrast.plane
-      };
-    case 'airportLinkRail':
-      return {
-        Icon: icons.TrainIcon,
-        color: tokens.colors.transport["default"].plane,
-        contrast: tokens.colors.transport.contrast.plane
-      };
-    default:
-      throw Error('Please select a transport for the TravelSwitch.');
-  }
-}
-
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
 function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
@@ -938,7 +857,6 @@ exports.SegmentedControl = SegmentedControl;
 exports.Switch = Switch;
 exports.TextArea = TextArea;
 exports.TextField = TextField;
-exports.TravelSwitch = TravelSwitch;
 exports.VariantProvider = VariantProvider;
 exports.hasValue = hasValue;
 exports.isFilled = isFilled;