@entur/alert 0.17.13-beta.1 → 0.17.13-beta.4

package/dist/BannerAlertBox.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type BannerAlertBoxProps = {
+    /** Innholdet i alert-boksen */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Skjermleser-label for lukkeknappen, om den vises */
+    closeButtonLabel?: string;
+    /** Callback som kalles når man lukker boksen */
+    onClose?: () => void;
+    /** Om denne er true, vil boksen få en lukkeknapp i høyre hjørne
+     * @default false
+     */
+    closable?: boolean;
+    /** Tittel på boksen - oppsummer virkning */
+    title?: string;
+    /** Farge og uttrykk på alert-boksen */
+    variant: VariantType | typeof info | typeof error;
+    [key: string]: any;
+};
+export declare const BannerAlertBox: React.FC<BannerAlertBoxProps>;
+export {};

package/dist/BaseAlertBox.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+import './BaseAlertBox.scss';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+type BaseAlertBoxProps = {
+    /** Innholdet i alert-boksen */
+    children?: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Skjermleser-label for lukkeknappen, om den vises
+     * @default "Lukk"
+     */
+    closeButtonLabel?: string;
+    /** Callback som kalles når man lukker boksen
+     * @default () => {}
+     */
+    onClose?: () => void;
+    /** Om denne er true, vil boksen få en lukkeknapp i høyre hjørne
+     * @default false
+     */
+    closable?: boolean;
+    /** Tittel på boksen - oppsummer virkning */
+    title?: React.ReactNode;
+    /** Farge og uttrykk på alert-boksen */
+    variant: VariantType | typeof info | typeof error;
+    /** Typen boks (internt bruk) */
+    size: 'banner' | 'toast' | 'small';
+    [key: string]: any;
+};
+export declare const BaseAlertBox: React.FC<BaseAlertBoxProps>;
+export {};

package/dist/CopyableText.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './CopyableText.scss';
+export type CopyableTextProps = {
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Tekstinnhold som vises og kopieres */
+    children: string;
+    /** Hvis du ønsker å kopiere noe annet enn
+     * innholdet i children kan du legge det inn her */
+    textToCopy?: string;
+    /** Overskrift i toast-varselet
+     * @default 'Kopiert!'
+     */
+    successHeading?: string;
+    /** Bekreftelsesmelding i toast-varselet
+     * @default `${textToCopy} ble kopiert til utklippstavlen.`
+     */
+    successMessage?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const CopyableText: ({ children, successHeading, successMessage, textToCopy, className, "aria-label": ariaLabel, ...rest }: CopyableTextProps) => JSX.Element;

package/dist/ExpandableAlertBox.d.ts

@@ -0,0 +1,33 @@
+import { VariantType } from '@entur/utils';
+import React from 'react';
+import { BannerAlertBoxProps } from './BannerAlertBox';
+import './ExpandableAlertBox.scss';
+import { SmallAlertBoxProps } from './SmallAlertBox';
+export type SmallExpandableAlertBoxProps = ExpandableAlertBoxProps & SmallAlertBoxProps;
+export declare const SmallExpandableAlertBox: React.FC<SmallExpandableAlertBoxProps>;
+export type BannerExpandableAlertBoxProps = ExpandableAlertBoxProps & BannerAlertBoxProps;
+export declare const BannerExpandableAlertBox: React.FC<BannerExpandableAlertBoxProps>;
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+type ExpandableAlertBoxProps = {
+    /**Farge og uttrykk på alert-boksen*/
+    variant: VariantType | typeof info | typeof error;
+    /** Tittelen til ExpandableAlertBox */
+    title: React.ReactNode;
+    /**Innhold som vises ved ekspandering */
+    children: React.ReactNode;
+    /**Ekstra klassenavn */
+    className?: string;
+    /** Tekst som vises på ekspanderingsknappen før åpning
+     * @default "Les mer"
+     */
+    openLabel?: string;
+    /** Tekst som vises på ekspanderingsknappen når den er åpnet
+     * @default "Lukk"
+     */
+    closeLabel?: string;
+    [key: string]: any;
+};
+export {};

package/dist/SmallAlertBox.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { VariantType } from '@entur/utils';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+/** @deprecated use variant="negative" instead */
+declare const error = "error";
+export type SmallAlertBoxProps = {
+    /** Innholdet i alert-boksen */
+    children: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Skjermleser-label for lukkeknappen, om den vises */
+    closeButtonLabel?: string;
+    /** Om denne er true, vil boksen få en lukkeknapp i høyre hjørne
+     * @default false
+     */
+    closable?: boolean;
+    /** Callback som kalles når man lukker boksen */
+    onClose?: () => void;
+    /** Tittel på boksen - oppsummer virkning */
+    title?: string;
+    /** Bredden på boksen - fullbredde eller tilpasset innholdet */
+    width?: 'fluid' | 'fit-content';
+    /** Farge og uttrykk på alert-boksen*/
+    variant: VariantType | typeof info | typeof error;
+    [key: string]: any;
+};
+export declare const SmallAlertBox: React.FC<SmallAlertBoxProps>;
+export {};

package/dist/ToastAlertBox.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import './ToastAlertBox.scss';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+export type ToastAlertBoxProps = {
+    /** Innholdet i toasten */
+    children?: React.ReactNode;
+    /** Ekstra klassenavn */
+    className?: string;
+    /** Skjermleser-label for lukkeknappen, om den vises */
+    closeButtonLabel?: string;
+    /** Callback som kalles når man lukker boksen */
+    onClose?: () => void;
+    /** Om denne er true, vil boksen få en lukkeknapp i høyre hjørne */
+    closable?: boolean;
+    /** Tittel på boksen - oppsummer virkning */
+    title?: string;
+    /** Farge og uttrykk på toasten */
+    variant: 'success' | 'information' | typeof info;
+    [key: string]: any;
+};
+export declare const ToastAlertBox: React.FC<ToastAlertBoxProps>;
+export {};

package/dist/ToastProvider.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+/** @deprecated use variant="information" instead */
+declare const info = "info";
+export type ToastVariants = 'success' | 'information' | typeof info;
+export type AddToastPayload = {
+    title?: string;
+    content: React.ReactNode;
+    variant?: ToastVariants;
+};
+export type ToastProviderProps = {
+    /** Antall millisekunder før toasts forsvinner av seg selv
+     * @default 6000
+     */
+    delay?: number;
+    /** Plasseringen av toasts
+     * @default "bottom-right"
+     */
+    position?: 'bottom-right' | 'top-right';
+    /** Ekstra klassenavn til ToastProvider-wrapperen */
+    className?: string;
+    /** Ekstra styling som sendes til ToastProvider-wrapperen */
+    style?: React.CSSProperties;
+    /** Innholdet */
+    children: React.ReactNode;
+};
+export declare const ToastProvider: React.FC<ToastProviderProps>;
+export declare const useToast: () => {
+    addToast: (payload: AddToastPayload | string) => void;
+};
+export {};

package/dist/alert.cjs.development.js

@@ -0,0 +1,410 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@entur/utils');
+var React = require('react');
+var classNames = require('classnames');
+var icons = require('@entur/icons');
+var button = require('@entur/button');
+var tooltip = require('@entur/tooltip');
+var copy = require('copy-text-to-clipboard');
+var typography = require('@entur/typography');
+var _ = require('@entur/expand/');
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+var _excluded$3 = ["children", "className", "closable", "closeButtonLabel", "variant", "onClose", "size", "title", "toastIsBeingRemoved"];
+var iconsMap = {
+  success: {
+    icon: icons.ValidationSuccessIcon,
+    description: 'Suksessmelding'
+  },
+  information: {
+    icon: icons.ValidationInfoIcon,
+    description: 'Infomelding'
+  },
+  warning: {
+    icon: icons.ValidationExclamationIcon,
+    description: 'Varselmelding'
+  },
+  negative: {
+    icon: icons.ValidationErrorIcon,
+    description: 'Feilmelding'
+  },
+  //deprecated
+  info: {
+    icon: icons.ValidationInfoIcon,
+    description: 'Infomelding'
+  },
+  error: {
+    icon: icons.ValidationErrorIcon,
+    description: 'Feilmelding'
+  }
+};
+var BaseAlertBox = function BaseAlertBox(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? false : _ref$closable,
+    _ref$closeButtonLabel = _ref.closeButtonLabel,
+    closeButtonLabel = _ref$closeButtonLabel === void 0 ? 'Lukk' : _ref$closeButtonLabel,
+    variant = _ref.variant,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? function () {
+      return {};
+    } : _ref$onClose,
+    size = _ref.size,
+    title = _ref.title,
+    toastIsBeingRemoved = _ref.toastIsBeingRemoved,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  var _React$useState = React.useState(false),
+    isClosed = _React$useState[0],
+    setClosed = _React$useState[1];
+  if (isClosed) {
+    return null;
+  }
+  var handleClose = function handleClose() {
+    setClosed(true);
+    onClose();
+  };
+  var Icon = iconsMap[variant].icon;
+  return React.createElement("div", _extends({
+    className: classNames('eds-alert-box', "eds-alert-box--" + size, "eds-alert-box--" + variant, {
+      'eds-alert-box--toast--exit-animation': toastIsBeingRemoved,
+      'eds-alert-box--no-title': !title
+    }, className)
+  }, rest), React.createElement(Icon, {
+    role: "img",
+    className: "eds-alert-box__icon",
+    "aria-label": iconsMap[variant].description
+  }), React.createElement("div", {
+    className: classNames('eds-alert-box__content', {
+      'eds-alert-box__content--no-children': !children
+    })
+  }, title && React.createElement("div", {
+    className: "eds-alert-box__title"
+  }, title), children && children), closable && React.createElement(tooltip.Tooltip, {
+    className: "eds-alert-box__tooltip",
+    "aria-hidden": true,
+    placement: "bottom",
+    content: "Lukk"
+  }, React.createElement(button.IconButton, {
+    className: "eds-alert-box__close-button",
+    "aria-label": closeButtonLabel,
+    onClick: handleClose,
+    type: "button"
+  }, React.createElement(icons.CloseIcon, null))));
+};
+
+var BannerAlertBox = function BannerAlertBox(props) {
+  return React.createElement(BaseAlertBox, _extends({}, props, {
+    size: "banner"
+  }));
+};
+
+var ToastAlertBox = function ToastAlertBox(props) {
+  return React.createElement(BaseAlertBox, _extends({}, props, {
+    size: "toast",
+    role: "status"
+  }));
+};
+
+var _excluded$2 = ["className", "width", "onClose", "closable", "closeButtonLabel"];
+var SmallAlertBox = function SmallAlertBox(_ref) {
+  var className = _ref.className,
+    width = _ref.width,
+    onClose = _ref.onClose,
+    _ref$closable = _ref.closable,
+    closable = _ref$closable === void 0 ? false : _ref$closable,
+    closeButtonLabel = _ref.closeButtonLabel,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return React.createElement(BaseAlertBox, _extends({
+    className: classNames(className, {
+      'eds-alert-box--fit-content': width === 'fit-content'
+    })
+  }, rest, {
+    onClose: onClose,
+    closable: closable,
+    closeButtonLabel: closeButtonLabel,
+    size: "small"
+  }));
+};
+
+var EXIT_ANIMATION_TIME = 400;
+var ToastContext = /*#__PURE__*/React.createContext(null);
+var toastReducer = function toastReducer(prevToasts, action) {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return [action.payload].concat(prevToasts);
+    case 'PLAY_EXIT_ANIMATION':
+      return prevToasts.map(function (toast) {
+        if (toast.id === action.payload) return _extends({}, toast, {
+          isBeingRemoved: true
+        });
+        return toast;
+      });
+    case 'REMOVE_TOAST':
+      return prevToasts.filter(function (toast) {
+        return toast.id !== action.payload;
+      });
+  }
+};
+var createUniqueId = function createUniqueId() {
+  return Math.random().toString().substring(2);
+};
+var createToast = function createToast(toast, id) {
+  if (typeof toast === 'string') {
+    return {
+      id: id,
+      content: toast,
+      variant: 'success',
+      isBeingRemoved: false
+    };
+  } else {
+    return _extends({
+      id: id,
+      variant: 'success',
+      isBeingRemoved: false
+    }, toast);
+  }
+};
+var ToastProvider = function ToastProvider(_ref) {
+  var _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 6000 : _ref$delay,
+    children = _ref.children,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'bottom-right' : _ref$position,
+    className = _ref.className,
+    style = _ref.style;
+  var _React$useReducer = React.useReducer(toastReducer, []),
+    toasts = _React$useReducer[0],
+    dispatch = _React$useReducer[1];
+  var _React$useState = React.useState(),
+    hoveringId = _React$useState[0],
+    setHovering = _React$useState[1];
+  var timeoutIdRefs = React.useRef({});
+  var removeToast = React.useCallback(function (id) {
+    window.clearTimeout(timeoutIdRefs.current[id]);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      payload: id
+    });
+    delete timeoutIdRefs.current[id];
+  }, []);
+  var playExitAnimation = React.useCallback(function (id) {
+    window.clearTimeout(timeoutIdRefs.current[id + 'animation']);
+    dispatch({
+      type: 'PLAY_EXIT_ANIMATION',
+      payload: id
+    });
+    delete timeoutIdRefs.current[id + 'animation'];
+  }, []);
+  var removeToastWithAnimationAfterDelay = React.useCallback(function (id, delay) {
+    timeoutIdRefs.current[id + 'animation'] = window.setTimeout(function () {
+      return playExitAnimation(id);
+    }, delay - EXIT_ANIMATION_TIME);
+    timeoutIdRefs.current[id] = window.setTimeout(function () {
+      return removeToast(id);
+    }, delay);
+  }, [timeoutIdRefs, playExitAnimation, removeToast]);
+  var addToast = React.useCallback(function (toast) {
+    var id = createUniqueId();
+    var payload = createToast(toast, id);
+    dispatch({
+      type: 'ADD_TOAST',
+      payload: payload
+    });
+    removeToastWithAnimationAfterDelay(id, delay);
+  }, [delay, removeToastWithAnimationAfterDelay]);
+  var handleMouseEnter = function handleMouseEnter(toast) {
+    return function () {
+      if (toast.isBeingRemoved) return;
+      setHovering(toast.id);
+      Object.values(timeoutIdRefs.current).forEach(function (timeoutId) {
+        window.clearTimeout(timeoutId);
+      });
+      timeoutIdRefs.current = {};
+    };
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setHovering(undefined);
+    toasts.forEach(function (toast) {
+      removeToastWithAnimationAfterDelay(toast.id, delay);
+    });
+  };
+  var handleClose = function handleClose(toastId) {
+    return function () {
+      removeToast(toastId);
+      handleMouseLeave();
+    };
+  };
+  var contextValue = React.useMemo(function () {
+    return {
+      toasts: toasts,
+      addToast: addToast,
+      removeToast: removeToast
+    };
+  }, [addToast, removeToast, toasts]);
+  return React.createElement(ToastContext.Provider, {
+    value: contextValue
+  }, toasts.length > 0 && React.createElement("div", {
+    className: classNames('eds-toast-container', "eds-toast-container--" + position, className),
+    style: style
+  }, toasts.slice(0, 3).map(function (toastToShow) {
+    return React.createElement(ToastAlertBox, {
+      variant: toastToShow.variant,
+      title: toastToShow.title,
+      onClose: handleClose(toastToShow.id),
+      onMouseEnter: handleMouseEnter(toastToShow),
+      onMouseLeave: handleMouseLeave,
+      closable: hoveringId === toastToShow.id,
+      toastIsBeingRemoved: toastToShow.isBeingRemoved,
+      key: toastToShow.id
+    }, toastToShow.content);
+  })), children);
+};
+var useToast = function useToast() {
+  var context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('You need to wrap your component in a ToastProvider component in ' + 'order to use the useToast hook');
+  }
+  var addToast = context.addToast;
+  return {
+    addToast: addToast
+  };
+};
+
+var _excluded$1 = ["children", "successHeading", "successMessage", "textToCopy", "className", "aria-label"];
+var CopyableText = function CopyableText(_ref) {
+  var children = _ref.children,
+    _ref$successHeading = _ref.successHeading,
+    successHeading = _ref$successHeading === void 0 ? 'Kopiert!' : _ref$successHeading,
+    successMessage = _ref.successMessage,
+    textToCopy = _ref.textToCopy,
+    className = _ref.className,
+    _ref$ariaLabel = _ref['aria-label'],
+    ariaLabel = _ref$ariaLabel === void 0 ? "Kopier " + (textToCopy != null ? textToCopy : children) + " til utklippstavlen" : _ref$ariaLabel,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _useToast = useToast(),
+    addToast = _useToast.addToast;
+  var buttonRef = React.useRef(null);
+  var _textToCopy = textToCopy != null ? textToCopy : children;
+  var _successMessage = successMessage != null ? successMessage : _textToCopy + " ble kopiert til utklippstavlen.";
+  var handleClick = function handleClick() {
+    buttonRef.current && copy(_textToCopy, {
+      target: buttonRef.current
+    }) && addToast({
+      title: successHeading,
+      content: _successMessage
+    });
+  };
+  return React.createElement("div", _extends({
+    className: 'eds-copyable-text ' + className,
+    style: _extends({}, rest.style),
+    type: "button",
+    onClick: handleClick,
+    tabIndex: -1,
+    "aria-label": ""
+  }, rest), React.createElement(typography.PreformattedText, {
+    className: "eds-copyable-text__preformatted-text"
+  }, React.createElement("span", {
+    className: "eds-copyable-text__displayed-text"
+  }, children), React.createElement(button.IconButton, {
+    className: "eds-copyable-text__button",
+    "aria-label": ariaLabel,
+    type: "button",
+    ref: buttonRef
+  }, React.createElement(icons.CopyIcon, {
+    className: 'eds-copyable-text__button__icon'
+  }))));
+};
+
+var _excluded = ["variant", "title", "children", "size", "className", "openLabel", "closeLabel"];
+var SmallExpandableAlertBox = function SmallExpandableAlertBox(props) {
+  return React.createElement(ExpandableAlertBox, _extends({
+    size: "small"
+  }, props));
+};
+var BannerExpandableAlertBox = function BannerExpandableAlertBox(props) {
+  return React.createElement(ExpandableAlertBox, _extends({
+    size: "banner"
+  }, props));
+};
+var ExpandableAlertBox = function ExpandableAlertBox(_ref) {
+  var variant = _ref.variant,
+    title = _ref.title,
+    children = _ref.children,
+    size = _ref.size,
+    className = _ref.className,
+    openLabel = _ref.openLabel,
+    closeLabel = _ref.closeLabel,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    open = _React$useState[0],
+    setopen = _React$useState[1];
+  return React.createElement(BaseAlertBox, _extends({
+    size: size,
+    variant: variant,
+    className: classNames('eds-expandable-alert-box', className),
+    title: React.createElement(ExpandableAlertBoxTitle, {
+      open: open,
+      title: title,
+      onClick: function onClick() {
+        return setopen(!open);
+      },
+      openLabel: openLabel,
+      closeLabel: closeLabel
+    })
+  }, rest), React.createElement(_.BaseExpand, {
+    open: open
+  }, children));
+};
+var ExpandableAlertBoxTitle = function ExpandableAlertBoxTitle(_ref2) {
+  var title = _ref2.title,
+    open = _ref2.open,
+    _ref2$openLabel = _ref2.openLabel,
+    openLabel = _ref2$openLabel === void 0 ? 'Les mer' : _ref2$openLabel,
+    _ref2$closeLabel = _ref2.closeLabel,
+    closeLabel = _ref2$closeLabel === void 0 ? 'Lukk' : _ref2$closeLabel,
+    onClick = _ref2.onClick;
+  return React.createElement("div", {
+    className: "eds-expandable-alert-box__title"
+  }, React.createElement("div", null, title), React.createElement("button", {
+    className: "eds-expandable-alert-box__button",
+    onClick: onClick,
+    type: "button"
+  }, open ? closeLabel : openLabel, React.createElement(_.ExpandArrow, {
+    open: open,
+    inline: true
+  })));
+};
+
+utils.warnAboutMissingStyles('alert', 'icons');
+
+exports.BannerAlertBox = BannerAlertBox;
+exports.BannerExpandableAlertBox = BannerExpandableAlertBox;
+exports.CopyableText = CopyableText;
+exports.SmallAlertBox = SmallAlertBox;
+exports.SmallExpandableAlertBox = SmallExpandableAlertBox;
+exports.ToastAlertBox = ToastAlertBox;
+exports.ToastProvider = ToastProvider;
+exports.useToast = useToast;
+//# sourceMappingURL=alert.cjs.development.js.map