@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/esm/Tabs/__tests__/TabLink.tests.js

@@ -0,0 +1,64 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+import TabLink from '../TabLink';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+jest.mock('react-router-dom', () => _objectSpread(_objectSpread({}, jest.requireActual('react-router-dom')), {}, {
+  useLocation: () => ({
+    pathname: 'localhost:3000/test'
+  })
+}));
+describe('<TabLink />', () => {
+  it('Renders primary button', async () => {
+    const history = createMemoryHistory();
+    const route = '/some-route';
+    history.push(route);
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Router, {
+      history: history
+    }, /*#__PURE__*/React.createElement(TabLink, {
+      requiredLine: "This is a required line",
+      onLinkClick: () => {},
+      to: "/test",
+      testId: "TestTabLink"
+    })));
+    expect(queryByText('This is a required line')).toBeDefined();
+    expect(getByTestId('TestTabLink')).toHaveStyleRule('background-color', 'transparent');
+    expect(getByTestId('TestTabLink')).toHaveStyleRule('color', COLORS.neutral_600);
+    expect(getByTestId('TestTabLink')).toHaveStyleRule('font-size', '16px'); // Check that click takes you to correct route
+
+    getByTestId('TestTabLink').click();
+    expect(history.location.pathname).toBe('/test');
+  });
+  it('Renders notification dot if defined', async () => {
+    const history = createMemoryHistory();
+    const route = '/some-route';
+    history.push(route);
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Router, {
+      history: history
+    }, /*#__PURE__*/React.createElement(TabLink, {
+      requiredLine: "This is a required line",
+      onLinkClick: () => {},
+      to: "/test",
+      testId: "TestTabLinkWithNotifcationDot",
+      showNotificationDot: true
+    })));
+    expect(queryByText('This is a required line')).toBeDefined();
+    expect(getByTestId('NotificationDot')).toBeDefined();
+    expect(getByTestId('NotificationDot')).toHaveStyleRule('background-color', COLORS.critical_500);
+  });
+});
+//# sourceMappingURL=TabLink.tests.js.map

package/dist/esm/Tabs/__tests__/TabLink.tests.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Tabs/__tests__/TabLink.tests.tsx"],"names":["React","render","Router","createMemoryHistory","TabLink","COLORS","jest","mock","requireActual","useLocation","pathname","describe","it","history","route","push","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","neutral_600","click","location","toBe","critical_500"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,mBAAT,QAAoC,SAApC;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,IAAI,CAACC,IAAL,CAAU,kBAAV,EAA8B,sCACxBD,IAAI,CAACE,aAAL,CAAmB,kBAAnB,CADwB;AAE5BC,EAAAA,WAAW,EAAE,OAAO;AAClBC,IAAAA,QAAQ,EAAE;AADQ,GAAP;AAFe,EAA9B;AAMAC,QAAQ,CAAC,aAAD,EAAgB,MAAM;AAC5BC,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAMC,OAAO,GAAGV,mBAAmB,EAAnC;AACA,UAAMW,KAAK,GAAG,aAAd;AACAD,IAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BhB,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAEY;AAAjB,oBACE,oBAAC,OAAD;AAAS,MAAA,YAAY,EAAC,yBAAtB;AAAgD,MAAA,WAAW,EAAE,MAAM,CAAE,CAArE;AAAuE,MAAA,EAAE,EAAC,OAA1E;AAAkF,MAAA,MAAM,EAAC;AAAzF,MADF,CADyC,CAA3C;AAKAK,IAAAA,MAAM,CAACF,WAAW,CAAC,yBAAD,CAAZ,CAAN,CAA+CG,WAA/C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCG,eAAnC,CAAmD,kBAAnD,EAAuE,aAAvE;AACAF,IAAAA,MAAM,CAACD,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCG,eAAnC,CAAmD,OAAnD,EAA4Df,MAAM,CAACgB,WAAnE;AACAH,IAAAA,MAAM,CAACD,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCG,eAAnC,CAAmD,WAAnD,EAAgE,MAAhE,EAZuC,CAcvC;;AACAH,IAAAA,WAAW,CAAC,aAAD,CAAX,CAA2BK,KAA3B;AACAJ,IAAAA,MAAM,CAACL,OAAO,CAACU,QAAR,CAAiBb,QAAlB,CAAN,CAAkCc,IAAlC,CAAuC,OAAvC;AACD,GAjBC,CAAF;AAkBAZ,EAAAA,EAAE,CAAC,qCAAD,EAAwC,YAAY;AACpD,UAAMC,OAAO,GAAGV,mBAAmB,EAAnC;AACA,UAAMW,KAAK,GAAG,aAAd;AACAD,IAAAA,OAAO,CAACE,IAAR,CAAaD,KAAb;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BhB,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAEY;AAAjB,oBACE,oBAAC,OAAD;AAAS,MAAA,YAAY,EAAC,yBAAtB;AAAgD,MAAA,WAAW,EAAE,MAAM,CAAE,CAArE;AAAuE,MAAA,EAAE,EAAC,OAA1E;AAAkF,MAAA,MAAM,EAAC,+BAAzF;AAAyH,MAAA,mBAAmB,EAAE;AAA9I,MADF,CADyC,CAA3C;AAKAK,IAAAA,MAAM,CAACF,WAAW,CAAC,yBAAD,CAAZ,CAAN,CAA+CG,WAA/C;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,iBAAD,CAAZ,CAAN,CAAuCE,WAAvC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,iBAAD,CAAZ,CAAN,CAAuCG,eAAvC,CAAuD,kBAAvD,EAA2Ef,MAAM,CAACoB,YAAlF;AACD,GAZC,CAAF;AAaD,CAhCO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { Router } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport TabLink from '../TabLink';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\njest.mock('react-router-dom', () => ({\n  ...(jest.requireActual('react-router-dom') as any),\n  useLocation: () => ({\n    pathname: 'localhost:3000/test',\n  }),\n}));\ndescribe('<TabLink />', () => {\n  it('Renders primary button', async () => {\n    const history = createMemoryHistory();\n    const route = '/some-route';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <TabLink requiredLine=\"This is a required line\" onLinkClick={() => {}} to=\"/test\" testId=\"TestTabLink\" />\n      </Router>,\n    );\n    expect(queryByText('This is a required line')).toBeDefined();\n    expect(getByTestId('TestTabLink')).toHaveStyleRule('background-color', 'transparent');\n    expect(getByTestId('TestTabLink')).toHaveStyleRule('color', COLORS.neutral_600);\n    expect(getByTestId('TestTabLink')).toHaveStyleRule('font-size', '16px');\n\n    // Check that click takes you to correct route\n    getByTestId('TestTabLink').click();\n    expect(history.location.pathname).toBe('/test');\n  });\n  it('Renders notification dot if defined', async () => {\n    const history = createMemoryHistory();\n    const route = '/some-route';\n    history.push(route);\n    const { queryByText, getByTestId } = render(\n      <Router history={history}>\n        <TabLink requiredLine=\"This is a required line\" onLinkClick={() => {}} to=\"/test\" testId=\"TestTabLinkWithNotifcationDot\" showNotificationDot={true} />\n      </Router>,\n    );\n    expect(queryByText('This is a required line')).toBeDefined();\n    expect(getByTestId('NotificationDot')).toBeDefined();\n    expect(getByTestId('NotificationDot')).toHaveStyleRule('background-color', COLORS.critical_500);\n  });\n});\n"],"file":"TabLink.tests.js"}

package/dist/esm/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Tabs/index.ts"],"names":["VerticalTabs","HorizontalTabs"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAEA,SAASD,YAAT,EAAuBC,cAAvB","sourcesContent":["import VerticalTabs from './VerticalTabs';\nimport HorizontalTabs from './HorizontalTabs';\n\nexport { VerticalTabs, HorizontalTabs };\n"],"file":"index.js"}

package/dist/esm/Toasters/Toast.js

@@ -0,0 +1,360 @@
+import _pt from "prop-types";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';
+import { BOXSHADOWS, COLORS } from '../styles';
+import { Close } from '../icons/systemicons/SystemIcons';
+import { Size } from '../types';
+import { Button, IconButton } from '../Button';
+import { ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { HyperLinkDefaultStyling, HyperLinkInvertedStyling } from '../HyperLink';
+const LoaderAnimationKeyframes = keyframes`
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+`;
+const Loader = styled.div`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+
+  animation: ${LoaderAnimationKeyframes} ${props => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);
+
+  &.${ToastColor[ToastColor.BLACK]} {
+    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.BLUE]} {
+    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.GREEN]} {
+    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.ORANGE]} {
+    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;
+    background-size: 200% 100%;
+  }
+
+  &.${ToastColor[ToastColor.RED]} {
+    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;
+    background-size: 200% 100%;
+  }
+`;
+const Container = styled.div`
+  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+  border-radius: 4px;
+
+  animation: ${props => props.animation.keyframes} ${props => props.animation.duration} ${props => props.animation.bezier};
+  transform: ${props => props.animation.transform};
+
+  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);
+
+  padding: 0 ${props => props.withClose ? '0' : '16px'} ${props => props.withLoader ? '4px' : '0'} 16px;
+
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  justify-content: left;
+
+  position: relative;
+
+  width: max-content;
+  min-height: 48px;
+  box-sizing: border-box;
+
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}
+
+  & a {
+    display: inline;
+    ${HyperLinkInvertedStyling}
+  }
+
+  &.${ToastColor[ToastColor.BLACK]} {
+    background-color: ${COLORS.neutral_800};
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    background-color: ${COLORS.white};
+    color: ${COLORS.black};
+
+    & a {
+      ${HyperLinkDefaultStyling}
+    }
+  }
+
+  &.${ToastColor[ToastColor.BLUE]} {
+    background-color: ${COLORS.accent1_600};
+  }
+
+  &.${ToastColor[ToastColor.GREEN]} {
+    background-color: ${COLORS.correct_500};
+  }
+
+  &.${ToastColor[ToastColor.ORANGE]} {
+    background-color: ${COLORS.warning_500};
+  }
+
+  &.${ToastColor[ToastColor.RED]} {
+    background-color: ${COLORS.critical_500};
+  }
+`;
+const ActionButtons = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+
+  & .action {
+    height: unset;
+  }
+`;
+const CloseButton = styled.div`
+  & > button {
+    background-color: transparent;
+    border: none;
+    margin-left: 16px;
+
+    & svg {
+      padding: 0;
+    }
+  }
+
+  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {
+    fill: ${COLORS.white};
+  }
+
+  & div svg path {
+    fill: ${COLORS.white};
+  }
+
+  &.${ToastColor[ToastColor.WHITE]} {
+    & div svg path {
+      fill: ${COLORS.neutral_600};
+    }
+  }
+`;
+const TextContainer = styled.span`
+  font-feature-settings: 'liga' off;
+  width: 240px;
+  display: flex;
+  padding: 16px 0;
+`;
+const IconContainer = styled.span`
+  margin-right: -8px;
+`;
+const DEFAULT_OPTIONS = {
+  color: ToastColor.BLACK,
+  autoClose: true,
+  delay: 5000,
+  showCloseButton: false,
+  position: ToastPosition.TOPLEFT,
+  enterFrom: ToastEntryDirection.TOP
+};
+
+const Toast = ({
+  content,
+  remove,
+  options = DEFAULT_OPTIONS,
+  testId
+}) => {
+  const removeRef = React.useRef();
+  removeRef.current = remove;
+  const elementRef = React.useRef(null);
+  const [shouldRemove, setShouldRemove] = React.useState(false);
+  const [dimensions, setDimensions] = React.useState({
+    width: 0,
+    height: 0
+  });
+
+  const opts = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS), options);
+
+  React.useEffect(() => {
+    if (opts?.autoClose) {
+      // @ts-ignore
+      const id = setTimeout(() => setShouldRemove(true), opts.delay);
+      return () => clearTimeout(id);
+    }
+
+    return undefined;
+  }, []);
+  React.useEffect(() => {
+    if (shouldRemove) {
+      // @ts-ignore
+      const id = setTimeout(() => removeRef.current(), 200);
+      return () => clearTimeout(id);
+    }
+  }, [shouldRemove]);
+  React.useEffect(() => {
+    setDimensions({
+      height: elementRef.current?.clientHeight,
+      width: elementRef.current?.clientWidth
+    });
+  }, []);
+  const animation = animations[shouldRemove ? 'leave' : 'enter'];
+  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];
+  const fromY = dimensions.height * direction.fromHeight;
+  const toY = dimensions.height * direction.toHeight;
+  const fromX = dimensions.width * direction.fromWidth;
+  const toX = dimensions.width * direction.toWidth;
+  let prop = {
+    duration: animation.duration,
+    bezier: animation.bezier,
+    transform: `translateY(${toY}) translateX(${toX})`,
+    keyframes: keyframes`
+        0% {
+          transform: translateY(${fromY}px) translateX(${fromX}px);
+        }
+        100% {
+          transform: translateY(${toY}px) translateX(${toX}px);
+        }`
+  };
+
+  if (!dimensions.height) {
+    prop = _objectSpread(_objectSpread({}, prop), {
+      transform: 'translateY(-1000vh) translateX(-1000vw)',
+      keyframes: keyframes``
+    });
+  }
+
+  const theme = ToastColor[opts.color ?? ToastColor.BLACK];
+
+  if (!shouldRemove) {
+    setTimeout(() => elementRef?.current?.focus());
+  }
+
+  return /*#__PURE__*/React.createElement(Container, {
+    "data-testid": testId,
+    animation: prop,
+    ref: elementRef,
+    withLoader: !!opts.autoClose,
+    className: theme,
+    withClose: !!opts.showCloseButton,
+    tabIndex: -1
+  }, opts.icon && /*#__PURE__*/React.createElement(IconContainer, null, opts.icon), /*#__PURE__*/React.createElement(TextContainer, {
+    className: 'description'
+  }, content), opts.action && /*#__PURE__*/React.createElement(ActionButtons, null, opts.action.map((action, i) => /*#__PURE__*/React.createElement(Button, {
+    size: Size.Small,
+    variant: action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary',
+    colorTheme: opts.color !== ToastColor.WHITE ? 'dark' : 'teal',
+    key: i,
+    onClick: () => {
+      setShouldRemove(true);
+      action.handler();
+    },
+    className: 'action'
+  }, action.label))), opts.showCloseButton && /*#__PURE__*/React.createElement(CloseButton, {
+    className: `close-button ${theme}`
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    useTransparentBackground: true,
+    action: event => setShouldRemove(true)
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: "24px",
+    color: COLORS.neutral_600
+  }))), !!opts.autoClose && /*#__PURE__*/React.createElement(Loader, {
+    className: `loader ${theme}`,
+    duration: opts.delay ?? 0
+  }));
+};
+
+Toast.propTypes = {
+  remove: _pt.any,
+  content: _pt.any.isRequired,
+  options: _pt.shape({
+    autoClose: _pt.bool,
+    delay: _pt.number,
+    showCloseButton: _pt.bool,
+    action: _pt.arrayOf(_pt.shape({
+      label: _pt.string.isRequired,
+      handler: _pt.func.isRequired
+    })),
+    icon: _pt.node
+  }),
+  testId: _pt.string
+};
+export default Toast;
+const animations = {
+  enter: {
+    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',
+    duration: '300ms',
+    [ToastEntryDirection.TOP]: {
+      fromHeight: -1,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.BOTTOM]: {
+      fromHeight: 1,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.LEFT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: -1,
+      toWidth: 0
+    },
+    [ToastEntryDirection.RIGHT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 1,
+      toWidth: 0
+    }
+  },
+  leave: {
+    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',
+    duration: '205ms',
+    [ToastEntryDirection.TOP]: {
+      fromHeight: 0,
+      toHeight: -1,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.BOTTOM]: {
+      fromHeight: 0,
+      toHeight: 1,
+      fromWidth: 0,
+      toWidth: 0
+    },
+    [ToastEntryDirection.LEFT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: -1
+    },
+    [ToastEntryDirection.RIGHT]: {
+      fromHeight: 0,
+      toHeight: 0,
+      fromWidth: 0,
+      toWidth: 1
+    }
+  }
+};
+//# sourceMappingURL=Toast.js.map

package/dist/esm/Toasters/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Toasters/Toast.tsx"],"names":["React","styled","keyframes","ToastActionType","ToastColor","ToastEntryDirection","ToastPosition","BOXSHADOWS","COLORS","Close","Size","Button","IconButton","ComponentSStyling","ComponentTextStyle","HyperLinkDefaultStyling","HyperLinkInvertedStyling","LoaderAnimationKeyframes","Loader","div","props","duration","BLACK","neutral_200","neutral_800","WHITE","neutral_400","white","BLUE","accent1_200","accent1_600","GREEN","correct_200","correct_500","ORANGE","warning_200","warning_500","RED","critical_200","critical_500","Container","BOXSHADOW_L2","animation","bezier","transform","withClose","withLoader","Regular","black","ActionButtons","CloseButton","neutral_600","TextContainer","span","IconContainer","DEFAULT_OPTIONS","color","autoClose","delay","showCloseButton","position","TOPLEFT","enterFrom","TOP","Toast","content","remove","options","testId","removeRef","useRef","current","elementRef","shouldRemove","setShouldRemove","useState","dimensions","setDimensions","width","height","opts","useEffect","id","setTimeout","clearTimeout","undefined","clientHeight","clientWidth","animations","direction","fromY","fromHeight","toY","toHeight","fromX","fromWidth","toX","toWidth","prop","theme","focus","icon","action","map","i","Small","type","SECONDARY","handler","label","event","enter","BOTTOM","LEFT","RIGHT","leave"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\nimport { ToastActionType, ToastColor, ToastEntryDirection, ToastPosition } from '../types';\nimport { BOXSHADOWS, COLORS, TYPOGRAPHY } from '../styles';\nimport { Close } from '../icons/systemicons/SystemIcons';\nimport { Size } from '../types' \nimport { Button, IconButton } from '../Button';\nimport { ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {HyperLinkDefaultStyling, HyperLinkInvertedStyling} from '../HyperLink';\n\nconst LoaderAnimationKeyframes = keyframes`\n  0% {\n    background-position: right;\n  }\n  100% {\n    background-position: left;\n  }\n`;\n\nconst Loader = styled.div<{ duration: number }>`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 4px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n\n  animation: ${LoaderAnimationKeyframes} ${(props) => props.duration}ms cubic-bezier(0.18, 0.39, 0.35, 1);\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background: linear-gradient(to right, ${COLORS.neutral_200} 50%, ${COLORS.neutral_800} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background: linear-gradient(to right, ${COLORS.neutral_400} 50%, ${COLORS.white} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background: linear-gradient(to right, ${COLORS.accent1_200} 50%, ${COLORS.accent1_600} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background: linear-gradient(to right, ${COLORS.correct_200} 50%, ${COLORS.correct_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background: linear-gradient(to right, ${COLORS.warning_200} 50%, ${COLORS.warning_500} 50%) left;\n    background-size: 200% 100%;\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background: linear-gradient(to right, ${COLORS.critical_200} 50%, ${COLORS.critical_500} 50%) left;\n    background-size: 200% 100%;\n  }\n`;\n\nconst Container = styled.div<{ animation: { duration: string; bezier: string; transform: string; keyframes: any }; withLoader: boolean; withClose: boolean }>`\n  box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n  border-radius: 4px;\n\n  animation: ${(props) => props.animation.keyframes} ${(props) => props.animation.duration} ${(props) => props.animation.bezier};\n  transform: ${(props) => props.animation.transform};\n\n  transition: all 300ms cubic-bezier(0.64, 0.04, 0.35, 1);\n\n  padding: 0 ${(props) => (props.withClose ? '0' : '16px')} ${(props) => (props.withLoader ? '4px' : '0')} 16px;\n\n  margin-bottom: 8px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  justify-content: left;\n\n  position: relative;\n\n  width: max-content;\n  min-height: 48px;\n  box-sizing: border-box;\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.white)}\n\n  & a {\n    display: inline;\n    ${HyperLinkInvertedStyling}\n  }\n\n  &.${ToastColor[ToastColor.BLACK]} {\n    background-color: ${COLORS.neutral_800};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    background-color: ${COLORS.white};\n    color: ${COLORS.black};\n\n    & a {\n      ${HyperLinkDefaultStyling}\n    }\n  }\n\n  &.${ToastColor[ToastColor.BLUE]} {\n    background-color: ${COLORS.accent1_600};\n  }\n\n  &.${ToastColor[ToastColor.GREEN]} {\n    background-color: ${COLORS.correct_500};\n  }\n\n  &.${ToastColor[ToastColor.ORANGE]} {\n    background-color: ${COLORS.warning_500};\n  }\n\n  &.${ToastColor[ToastColor.RED]} {\n    background-color: ${COLORS.critical_500};\n  }\n`;\n\nconst ActionButtons = styled.div`\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n\n  & .action {\n    height: unset;\n  }\n`;\n\nconst CloseButton = styled.div`\n  & > button {\n    background-color: transparent;\n    border: none;\n    margin-left: 16px;\n\n    & svg {\n      padding: 0;\n    }\n  }\n\n  & > button:focus:not(:disabled):not(:active):not(:hover) div svg path {\n    fill: ${COLORS.white};\n  }\n\n  & div svg path {\n    fill: ${COLORS.white};\n  }\n\n  &.${ToastColor[ToastColor.WHITE]} {\n    & div svg path {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nconst TextContainer = styled.span`\n  font-feature-settings: 'liga' off;\n  width: 240px;\n  display: flex;\n  padding: 16px 0;\n`;\n\nconst IconContainer = styled.span`\n  margin-right: -8px;\n`;\n\nexport type ToastOptions = {\n  color?: ToastColor;\n  autoClose?: boolean;\n  delay?: number;\n  showCloseButton?: boolean;\n  action?: {\n    label: string;\n    handler: () => void;\n    type?: ToastActionType;\n  }[];\n  position: ToastPosition;\n  enterFrom?: ToastEntryDirection;\n  icon?: React.ReactNode;\n};\n\ntype Props = {\n  remove?: any;\n  content: any;\n  options?: ToastOptions;\n  testId?: string;\n};\n\nconst DEFAULT_OPTIONS: ToastOptions = {\n  color: ToastColor.BLACK,\n  autoClose: true,\n  delay: 5000,\n  showCloseButton: false,\n  position: ToastPosition.TOPLEFT,\n  enterFrom: ToastEntryDirection.TOP,\n};\n\nconst Toast = ({ content, remove, options = DEFAULT_OPTIONS, testId }: Props) => {\n  const removeRef = React.useRef();\n  removeRef.current = remove;\n\n  const elementRef = React.useRef<any>(null);\n\n  const [shouldRemove, setShouldRemove] = React.useState(false);\n  const [dimensions, setDimensions] = React.useState<{ width: number; height: number }>({ width: 0, height: 0 });\n\n  const opts = { ...DEFAULT_OPTIONS, ...options };\n\n  React.useEffect(() => {\n    if (opts?.autoClose) {\n      // @ts-ignore\n      const id = setTimeout(() => setShouldRemove(true), opts.delay);\n      return () => clearTimeout(id);\n    }\n    return undefined;\n  }, []);\n\n  React.useEffect(() => {\n    if (shouldRemove) {\n      // @ts-ignore\n      const id = setTimeout(() => removeRef.current(), 200);\n      return () => clearTimeout(id);\n    }\n  }, [shouldRemove]);\n\n  React.useEffect(() => {\n    setDimensions({ height: elementRef.current?.clientHeight, width: elementRef.current?.clientWidth });\n  }, []);\n\n  const animation = animations[shouldRemove ? 'leave' : 'enter'];\n  const direction = animation[opts.enterFrom ?? ToastEntryDirection.TOP];\n\n  const fromY = dimensions.height * direction.fromHeight;\n  const toY = dimensions.height * direction.toHeight;\n  const fromX = dimensions.width * direction.fromWidth;\n  const toX = dimensions.width * direction.toWidth;\n\n  let prop = {\n    duration: animation.duration,\n    bezier: animation.bezier,\n    transform: `translateY(${toY}) translateX(${toX})`,\n    keyframes: keyframes`\n        0% {\n          transform: translateY(${fromY}px) translateX(${fromX}px);\n        }\n        100% {\n          transform: translateY(${toY}px) translateX(${toX}px);\n        }`,\n  };\n\n  if (!dimensions.height) {\n    prop = {\n      ...prop,\n      ...{\n        transform: 'translateY(-1000vh) translateX(-1000vw)',\n        keyframes: keyframes``,\n      },\n    };\n  }\n\n  const theme = ToastColor[opts.color ?? ToastColor.BLACK];\n\n  if (!shouldRemove){\n    setTimeout(() => elementRef?.current?.focus());\n  }\n\n  return (\n    <Container data-testid={testId} animation={prop} ref={elementRef} withLoader={!!opts.autoClose} className={theme} withClose={!!opts.showCloseButton} tabIndex={-1}>\n      {opts.icon && <IconContainer>{opts.icon}</IconContainer>}\n      <TextContainer className={'description'}>{content}</TextContainer>\n      {opts.action && (\n        <ActionButtons>\n          {opts.action.map((action, i) => (\n            <Button\n              size={Size.Small}\n              variant={action.type === ToastActionType.SECONDARY ? 'secondary' : 'primary'}\n              colorTheme={opts.color !== ToastColor.WHITE ? 'dark' : 'teal'}\n              key={i}\n              onClick={() => {\n                setShouldRemove(true);\n                action.handler();\n              }}\n              className={'action'}>\n              {action.label}\n            </Button>\n          ))}\n        </ActionButtons>\n      )}\n      {opts.showCloseButton && (\n        <CloseButton className={`close-button ${theme}`}>\n          <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground action={(event) => setShouldRemove(true)}>\n            <Close size=\"24px\" color={COLORS.neutral_600} />\n          </IconButton>\n        </CloseButton>\n      )}\n      {!!opts.autoClose && <Loader className={`loader ${theme}`} duration={opts.delay ?? 0} />}\n    </Container>\n  );\n};\n\nexport default Toast;\n\nconst animations = {\n  enter: {\n    bezier: 'cubic-bezier(0.22, 0.61, 0.35, 1)',\n    duration: '300ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: -1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 1,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: -1,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 1,\n      toWidth: 0,\n    },\n  },\n  leave: {\n    bezier: 'cubic-bezier(0.5, 0.05, 0.67, 0.19)',\n    duration: '205ms',\n    [ToastEntryDirection.TOP]: {\n      fromHeight: 0,\n      toHeight: -1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.BOTTOM]: {\n      fromHeight: 0,\n      toHeight: 1,\n      fromWidth: 0,\n      toWidth: 0,\n    },\n    [ToastEntryDirection.LEFT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: -1,\n    },\n    [ToastEntryDirection.RIGHT]: {\n      fromHeight: 0,\n      toHeight: 0,\n      fromWidth: 0,\n      toWidth: 1,\n    },\n  },\n};\n"],"file":"Toast.js"}

package/dist/esm/Toasters/ToastContext.js

@@ -0,0 +1,114 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { createUUID } from '../Services/functions';
+import Toast from './Toast';
+import { ToastPosition } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
+
+/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/
+export const ToastContext = /*#__PURE__*/React.createContext({});
+const ToastBucket = styled.div`
+  position: fixed;
+  z-index: ${Z_INDEXES.toast};
+  display: flex;
+  flex-direction: column-reverse;
+`;
+const ToastBucketTopLeft = styled(ToastBucket)`
+  top: 16px;
+  left: 5%;
+`;
+const ToastBucketTopMiddle = styled(ToastBucket)`
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const ToastBucketTopRight = styled(ToastBucket)`
+  top: 16px;
+  right: 5%;
+`;
+const ToastBucketBottomLeft = styled(ToastBucket)`
+  bottom: 16px;
+  left: 5%;
+`;
+const ToastBucketBottomMiddle = styled(ToastBucket)`
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+const ToastBucketBottomRight = styled(ToastBucket)`
+  bottom: 16px;
+  right: 5%;
+`;
+export const ToastProvider = ({
+  children
+}) => {
+  const [toasts, setToasts] = React.useState([]);
+
+  const add = (content, options) => {
+    const id = createUUID();
+    setToasts(prev => [...prev, {
+      id,
+      content,
+      options
+    }]);
+  };
+
+  const remove = id => setToasts(toasts.filter(t => t.id !== id));
+
+  const functions = React.useMemo(() => {
+    return {
+      addToast: add,
+      removeToast: remove
+    };
+  }, [toasts]);
+  return /*#__PURE__*/React.createElement(ToastContext.Provider, {
+    value: _objectSpread({
+      toasts
+    }, functions)
+  }, /*#__PURE__*/React.createElement(ToastBucketTopLeft, null, toasts.filter(t => t.options.position === ToastPosition.TOPLEFT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketTopMiddle, null, toasts.filter(t => t.options.position === ToastPosition.TOPMIDDLE).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketTopRight, null, toasts.filter(t => t.options.position === ToastPosition.TOPRIGHT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomLeft, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMLEFT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomMiddle, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), /*#__PURE__*/React.createElement(ToastBucketBottomRight, null, toasts.filter(t => t.options.position === ToastPosition.BOTTOMRIGHT).map(t => /*#__PURE__*/React.createElement(Toast, {
+    key: t.id,
+    content: t.content,
+    remove: () => remove(t.id),
+    options: t.options
+  }))), children);
+};
+export function useToast() {
+  const {
+    addToast
+  } = React.useContext(ToastContext);
+  return {
+    addToast
+  };
+}
+//# sourceMappingURL=ToastContext.js.map

package/dist/esm/Toasters/ToastContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Toasters/ToastContext.tsx"],"names":["React","styled","createUUID","Toast","ToastPosition","Z_INDEXES","ToastContext","createContext","ToastBucket","div","toast","ToastBucketTopLeft","ToastBucketTopMiddle","ToastBucketTopRight","ToastBucketBottomLeft","ToastBucketBottomMiddle","ToastBucketBottomRight","ToastProvider","children","toasts","setToasts","useState","add","content","options","id","prev","remove","filter","t","functions","useMemo","addToast","removeToast","position","TOPLEFT","map","TOPMIDDLE","TOPRIGHT","BOTTOMLEFT","BOTTOMMIDDLE","BOTTOMRIGHT","useToast","useContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { createUUID } from '../Services/functions';\nimport Toast, { ToastOptions } from './Toast';\nimport { ToastPosition } from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype ProviderProps = {\n  children?: any;\n};\n\ninterface toast {\n  options: ToastOptions;\n  id: string;\n  content: any;\n}\ntype ToasterValueProps = { toasts: toast[]; addToast: (content: any, options: ToastOptions) => void; removeToast: (id: string) => void };\n\n/*export const ToastContext = React.createContext<ToasterValueProps>(null);*/\n\nexport const ToastContext = React.createContext({} as ToasterValueProps);\n\nconst ToastBucket = styled.div`\n  position: fixed;\n  z-index: ${Z_INDEXES.toast};\n  display: flex;\n  flex-direction: column-reverse;\n`;\n\nconst ToastBucketTopLeft = styled(ToastBucket)`\n  top: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketTopMiddle = styled(ToastBucket)`\n  top: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketTopRight = styled(ToastBucket)`\n  top: 16px;\n  right: 5%;\n`;\n\nconst ToastBucketBottomLeft = styled(ToastBucket)`\n  bottom: 16px;\n  left: 5%;\n`;\n\nconst ToastBucketBottomMiddle = styled(ToastBucket)`\n  bottom: 16px;\n  left: 50%;\n  transform: translateX(-50%);\n`;\n\nconst ToastBucketBottomRight = styled(ToastBucket)`\n  bottom: 16px;\n  right: 5%;\n`;\n\nexport const ToastProvider: React.FC = ({ children }: ProviderProps) => {\n  const [toasts, setToasts] = React.useState<toast[]>([]);\n\n  const add = (content: any, options: ToastOptions) => {\n    const id = createUUID();\n    setToasts(prev => [...prev, { id, content, options }]);\n  };\n\n  const remove = (id: string) => setToasts(toasts.filter(t => t.id !== id));\n\n  const functions = React.useMemo(() => {\n    return { addToast: add, removeToast: remove };\n  }, [toasts]);\n\n  return (\n    <ToastContext.Provider value={{ toasts, ...functions }}>\n      <ToastBucketTopLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopLeft>\n      <ToastBucketTopMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopMiddle>\n      <ToastBucketTopRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.TOPRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketTopRight>\n      <ToastBucketBottomLeft>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMLEFT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomLeft>\n      <ToastBucketBottomMiddle>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMMIDDLE)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomMiddle>\n      <ToastBucketBottomRight>\n        {toasts\n          .filter(t => t.options.position === ToastPosition.BOTTOMRIGHT)\n          .map(t => (\n            <Toast key={t.id} content={t.content} remove={() => remove(t.id)} options={t.options} />\n          ))}\n      </ToastBucketBottomRight>\n      {children}\n    </ToastContext.Provider>\n  );\n};\n\nexport function useToast() {\n  const { addToast } = React.useContext(ToastContext);\n  return {\n    addToast,\n  };\n}\n"],"file":"ToastContext.js"}