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

package/dist/esm/Banners/__tests__/Banner.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Banner } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+describe('<Banner />', () => {
+  it('Renders warning banner', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Banner, {
+      type: "warning",
+      testId: "TestBanner"
+    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.warning_100);
+  });
+  it('Renders critial banner', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Banner, {
+      type: "critical",
+      testId: "TestBanner"
+    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.critical_100);
+  });
+  it('Renders positive banner', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Banner, {
+      type: "positive",
+      testId: "TestBanner"
+    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.correct_100);
+  });
+  it('Renders default banner', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(Banner, {
+      testId: "TestBanner"
+    }, /*#__PURE__*/React.createElement("h2", null, "TestBanner")));
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.primary_100);
+  });
+});
+//# sourceMappingURL=Banner.test.js.map

package/dist/esm/Banners/__tests__/Banner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Banners/__tests__/Banner.test.tsx"],"names":["React","render","Banner","COLORS","describe","it","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","warning_100","critical_100","correct_100","primary_100"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,QAAQ,CAAC,YAAD,EAAe,MAAM;AAC3BC,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,SAAb;AAAuB,MAAA,MAAM,EAAC;AAA9B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACQ,WAAvE;AACD,GARC,CAAF;AASAN,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,UAAb;AAAwB,MAAA,MAAM,EAAC;AAA/B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACS,YAAvE;AACD,GARC,CAAF;AASAP,EAAAA,EAAE,CAAC,yBAAD,EAA4B,YAAY;AACxC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,IAAI,EAAC,UAAb;AAAwB,MAAA,MAAM,EAAC;AAA/B,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACU,WAAvE;AACD,GARC,CAAF;AASAR,EAAAA,EAAE,CAAC,wBAAD,EAA2B,YAAY;AACvC,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,MAAD;AAAQ,MAAA,MAAM,EAAC;AAAf,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,YAAlD,EAAgEP,MAAM,CAACW,WAAvE;AACD,GARC,CAAF;AASD,CArCO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { Banner } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\ndescribe('<Banner />', () => {\n  it('Renders warning banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"warning\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.warning_100);\n  });\n  it('Renders critial banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"critical\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.critical_100);\n  });\n  it('Renders positive banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner type=\"positive\" testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.correct_100);\n  });\n  it('Renders default banner', async () => {\n    const { queryByText, getByTestId } = render(\n      <Banner testId=\"TestBanner\">\n        <h2>TestBanner</h2>\n      </Banner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background', COLORS.primary_100);\n  });\n});\n"],"file":"Banner.test.js"}

package/dist/esm/Banners/__tests__/OverviewBanner.test.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { OverviewBanner } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+describe('<OverviewBanner />', () => {
+  it('Renders', async () => {
+    const {
+      queryByText,
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(OverviewBanner, {
+      testId: "TestBanner"
+    }, /*#__PURE__*/React.createElement("h2", null, "TestHeader")));
+    expect(queryByText('TestHeader')).toBeDefined();
+    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);
+  });
+});
+//# sourceMappingURL=OverviewBanner.test.js.map

package/dist/esm/Banners/__tests__/OverviewBanner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Banners/__tests__/OverviewBanner.test.tsx"],"names":["React","render","OverviewBanner","COLORS","describe","it","queryByText","getByTestId","expect","toBeDefined","toHaveStyleRule","primary_20"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAASC,cAAT,QAA+B,UAA/B;AACA,OAAO,wBAAP;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEAC,QAAQ,CAAC,oBAAD,EAAuB,MAAM;AACnCC,EAAAA,EAAE,CAAC,SAAD,EAAY,YAAY;AACxB,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAA+BN,MAAM,eACzC,oBAAC,cAAD;AAAgB,MAAA,MAAM,EAAC;AAAvB,oBACE,6CADF,CADyC,CAA3C;AAKAO,IAAAA,MAAM,CAACF,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,WAAlC;AACAD,IAAAA,MAAM,CAACD,WAAW,CAAC,YAAD,CAAZ,CAAN,CAAkCG,eAAlC,CAAkD,kBAAlD,EAAsEP,MAAM,CAACQ,UAA7E;AACD,GARC,CAAF;AASD,CAVO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport { OverviewBanner } from '../index';\nimport 'jest-styled-components';\nimport { COLORS } from '../../styles';\n\ndescribe('<OverviewBanner />', () => {\n  it('Renders', async () => {\n    const { queryByText, getByTestId } = render(\n      <OverviewBanner testId=\"TestBanner\">\n        <h2>TestHeader</h2>\n      </OverviewBanner>,\n    );\n    expect(queryByText('TestHeader')).toBeDefined();\n    expect(getByTestId('TestBanner')).toHaveStyleRule('background-color', COLORS.primary_20);\n  });\n});\n"],"file":"OverviewBanner.test.js"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/index.ts"],"names":["Banner","OverviewBanner"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kBAA3B,C,CAEA;;AACA,SAASD,MAAT,EAAiBC,cAAjB","sourcesContent":["import Banner from './Banner';\nimport OverviewBanner from './OverviewBanner';\n\n// eslint-disable-next-line import/prefer-default-export\nexport { Banner, OverviewBanner };\n"],"file":"index.js"}

package/dist/esm/Banners/styles.js

@@ -0,0 +1,122 @@
+import { css } from 'styled-components';
+import { COLORS } from '../styles';
+export const getButtonStyle = type => {
+  switch (type) {
+    case 'warning':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.warning_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.warning_20};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.warning_800};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.warning_100};
+          }
+        }
+      `;
+
+    case 'critical':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.critical_600};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.critical_20};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.critical_800};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.critical_100};
+          }
+        }
+      `;
+
+    case 'positive':
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.correct_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.correct_20};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.correct_800};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.correct_100};
+          }
+        }
+      `;
+
+    default:
+      return css`
+        div {
+          background-color: transparent;
+        }
+        div svg path,
+        div svg {
+          fill: ${COLORS.primary_500};
+        }
+        &:hover:not(:disabled) {
+          div {
+            background-color: ${COLORS.neutral_20};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_700};
+          }
+        }
+        &:active:not(:disabled) {
+          div {
+            background: ${COLORS.primary_800};
+          }
+          div svg path,
+          div svg {
+            fill: ${COLORS.primary_100};
+          }
+        }
+      `;
+  }
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/Banners/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Banners/styles.tsx"],"names":["css","COLORS","getButtonStyle","type","warning_500","warning_20","warning_700","warning_800","warning_100","critical_600","critical_20","critical_700","critical_800","critical_100","correct_500","correct_20","correct_700","correct_800","correct_100","primary_500","neutral_20","primary_700","primary_800","primary_100"],"mappings":"AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,OAAO,MAAMC,cAAc,GAAIC,IAAD,IAAkB;AAC9C,UAAQA,IAAR;AACE,SAAK,SAAL;AACE,aAAOH,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACG,WAAY;AACrC;AACA;AACA;AACA,gCAAgCH,MAAM,CAACI,UAAW;AAClD;AACA;AACA;AACA,oBAAoBJ,MAAM,CAACK,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BL,MAAM,CAACM,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBN,MAAM,CAACO,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOR,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACQ,YAAa;AACtC;AACA;AACA;AACA,gCAAgCR,MAAM,CAACS,WAAY;AACnD;AACA;AACA;AACA,oBAAoBT,MAAM,CAACU,YAAa;AACxC;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACW,YAAa;AAC9C;AACA;AACA;AACA,oBAAoBX,MAAM,CAACY,YAAa;AACxC;AACA;AACA,OA1BM;;AA2BF,SAAK,UAAL;AACE,aAAOb,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACa,WAAY;AACrC;AACA;AACA;AACA,gCAAgCb,MAAM,CAACc,UAAW;AAClD;AACA;AACA;AACA,oBAAoBd,MAAM,CAACe,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0Bf,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBhB,MAAM,CAACiB,WAAY;AACvC;AACA;AACA,OA1BM;;AA2BF;AACE,aAAOlB,GAAI;AACjB;AACA;AACA;AACA;AACA;AACA,kBAAkBC,MAAM,CAACkB,WAAY;AACrC;AACA;AACA;AACA,gCAAgClB,MAAM,CAACmB,UAAW;AAClD;AACA;AACA;AACA,oBAAoBnB,MAAM,CAACoB,WAAY;AACvC;AACA;AACA;AACA;AACA,0BAA0BpB,MAAM,CAACqB,WAAY;AAC7C;AACA;AACA;AACA,oBAAoBrB,MAAM,CAACsB,WAAY;AACvC;AACA;AACA,OA1BM;AAtFJ;AAkHD,CAnHM","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '../styles';\n\nexport const getButtonStyle = (type: string) => {\n  switch (type) {\n    case 'warning':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.warning_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.warning_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.warning_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.warning_100};\n          }\n        }\n      `;\n    case 'critical':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.critical_600};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.critical_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.critical_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.critical_100};\n          }\n        }\n      `;\n    case 'positive':\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.correct_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.correct_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.correct_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.correct_100};\n          }\n        }\n      `;\n    default:\n      return css`\n        div {\n          background-color: transparent;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.primary_500};\n        }\n        &:hover:not(:disabled) {\n          div {\n            background-color: ${COLORS.neutral_20};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_700};\n          }\n        }\n        &:active:not(:disabled) {\n          div {\n            background: ${COLORS.primary_800};\n          }\n          div svg path,\n          div svg {\n            fill: ${COLORS.primary_100};\n          }\n        }\n      `;\n  }\n};\n"],"file":"styles.js"}

package/dist/esm/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,134 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { ComponentTextStyle, Size, SystemIcons } from '..';
+import { useHistory } from 'react-router';
+import { HyperLink, IconButton } from '..';
+import { ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
+import DropdownButton from '../Dropdown/DropdownButton';
+
+const marginRight = size => {
+  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+
+const BreadcrumbContainer = styled.div`
+  display:flex;
+  align-items: center;
+  min-height: 48px;
+    
+  a {
+    text-decoration: none;
+    ${props => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}
+    ${props => marginRight(props.size)}
+  }
+
+  .chevronicon {
+    ${props => marginRight(props.size)}
+  }
+
+  a:hover {
+    color: ${COLORS.primary_700};
+  }
+  a:active {
+    color: ${COLORS.primary_800};
+  }
+`;
+
+const FontStyles = (size, textStyle, color) => {
+  switch (size) {
+    case Size.XSmall:
+      return ComponentXXSStyling(textStyle, color);
+
+    case Size.Medium:
+      return ComponentMStyling(textStyle, color);
+
+    case Size.Small:
+    default:
+      return ComponentSStyling(textStyle, color);
+  }
+};
+
+const LastBreadcrumbItem = styled.label`
+  ${props => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}
+  ${props => marginRight(props.size)}
+`;
+
+const Breadcrumb = ({
+  items,
+  size = Size.Small,
+  homeIcon = true,
+  homeLabel = 'Home',
+  homeUrl = '/'
+}) => {
+  const history = useHistory();
+  const dropdownItems = items ? items.slice(0, items.length - 2).map(x => ({
+    value: x.url,
+    displayLabel: x.label
+  })) : [];
+
+  const navigate = links => {
+    history.push(links[0]);
+  };
+
+  const chevronSize = size == Size.Medium ? "24px" : size == Size.Small ? "20px" : "16px";
+  return /*#__PURE__*/React.createElement(BreadcrumbContainer, {
+    size: size
+  }, homeIcon ? /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
+    action: () => history.push(homeUrl)
+  }, /*#__PURE__*/React.createElement(SystemIcons.Home, {
+    size: chevronSize
+  })) : /*#__PURE__*/React.createElement(HyperLink, {
+    id: "homelink",
+    variant: "default",
+    href: homeUrl
+  }, homeLabel), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(DropdownButton, {
+    alignLeft: true,
+    items: dropdownItems,
+    size: size,
+    icon: /*#__PURE__*/React.createElement(SystemIcons.MoreHorizontal, {
+      color: COLORS.neutral_600,
+      size: "20px"
+    }),
+    onClick: navigate
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(HyperLink, {
+    id: "link-item-" + (items.length - 3),
+    target: "_self",
+    variant: "default",
+    href: items[items.length - 3].url
+  }, items[items.length - 3].label))), !!items && items.length > 1 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(HyperLink, {
+    id: "link-item-" + (items.length - 2),
+    target: "_self",
+    variant: "default",
+    href: items[items.length - 2].url
+  }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SystemIcons.ChevronRight, {
+    className: "chevronicon",
+    color: COLORS.neutral_500,
+    size: chevronSize
+  }), /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
+    size: size
+  }, items[items.length - 1].label)));
+};
+
+Breadcrumb.propTypes = {
+  homeIcon: _pt.bool,
+  homeLabel: _pt.string,
+  homeUrl: _pt.string,
+  items: _pt.array
+};
+export default Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/esm/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","Size","SystemIcons","useHistory","HyperLink","IconButton","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","DropdownButton","marginRight","size","Small","Medium","BreadcrumbContainer","div","props","FontStyles","Regular","neutral_600","primary_700","primary_800","textStyle","color","XSmall","LastBreadcrumbItem","label","Bold","neutral_800","Breadcrumb","items","homeIcon","homeLabel","homeUrl","history","dropdownItems","slice","length","map","x","value","url","displayLabel","navigate","links","push","chevronSize","neutral_500"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, Size, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport { HyperLink, IconButton } from '..';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\nimport DropdownButton from '../Dropdown/DropdownButton';\nimport { DropdownItem } from '../Dropdown/DropdownContent';\n\ntype BreadcrumbProps = {\n  homeIcon?: boolean;\n  homeLabel?: string;\n  homeUrl?: string;\n  items?: BreadcrumbItem[];\n  size?: Size;\n};\n\nconst marginRight = (size: Size | undefined) => {\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;'\n}\n\nconst BreadcrumbContainer = styled.div<{size: Size | undefined}>`\n  display:flex;\n  align-items: center;\n  min-height: 48px;\n    \n  a {\n    text-decoration: none;\n    ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n    ${(props) => marginRight(props.size) }\n  }\n\n  .chevronicon {\n    ${(props) => marginRight(props.size) }\n  }\n\n  a:hover {\n    color: ${COLORS.primary_700};\n  }\n  a:active {\n    color: ${COLORS.primary_800};\n  }\n`;\n\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\n  switch (size) {\n    case Size.XSmall:\n      return ComponentXXSStyling(textStyle, color);\n    case Size.Medium:\n      return ComponentMStyling(textStyle, color);\n    case Size.Small:\n    default:\n      return ComponentSStyling(textStyle, color);\n  }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: Size}>`\n  ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n  ${(props) => marginRight(props.size) }\n`;\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ \n    items, \n    size = Size.Small, \n    homeIcon = true, \n    homeLabel = 'Home', \n    homeUrl = '/' }) => {\n\n  const history = useHistory();\n  const dropdownItems: DropdownItem[] = items ? items.slice(0, items.length - 2).map(x => ({ value: x.url, displayLabel: x.label })) : [];\n  const navigate = (links: string[]) => {    \n    history.push(links[0]);\n  };\n\n  const chevronSize = size == Size.Medium ? \"24px\" : size == Size.Small ? \"20px\" : \"16px\";\n\n  return (\n    <BreadcrumbContainer size={size}>\n\n      {homeIcon ? \n        <IconButton variant=\"secondary\" shape=\"circular\" action={() => history.push(homeUrl)}>\n          <SystemIcons.Home size={chevronSize} />\n        </IconButton> : \n        <HyperLink id={\"homelink\"} variant=\"default\" href={homeUrl}>\n          {homeLabel}\n        </HyperLink>}\n\n      { !!items && items.length > 2 &&\n          (items.length > 3 ?\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <DropdownButton \n              alignLeft={true}\n              items={dropdownItems} \n              size={size}\n              icon={<SystemIcons.MoreHorizontal color={COLORS.neutral_600} size=\"20px\" />}\n              onClick={navigate} />\n          </> :\n          <>\n            <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n            <HyperLink id={\"link-item-\" + (items.length - 3)} target=\"_self\" variant=\"default\" href={items[items.length - 3].url}>\n              {items[items.length - 3].label}\n            </HyperLink>  \n          </>)\n      }\n\n      { !!items && items.length > 1 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <HyperLink id={\"link-item-\" + (items.length - 2)} target=\"_self\" variant=\"default\" href={items[items.length - 2].url}>\n            {items[items.length - 2].label}\n          </HyperLink>\n        </>\n      }\n\n      { !!items && items.length > 0 && \n        <>\n          <SystemIcons.ChevronRight className=\"chevronicon\" color={COLORS.neutral_500} size={chevronSize} />\n          <LastBreadcrumbItem size={size}>\n            {items[items.length - 1].label}\n          </LastBreadcrumbItem>\n        </>\n      }\n\n    </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Breadcrumb/index.ts"],"names":["default","Breadcrumb"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAApB,QAAsC,cAAtC","sourcesContent":["export { default as Breadcrumb } from './Breadcrumb';\n"],"file":"index.js"}

package/dist/esm/Button/BackButton.js

@@ -0,0 +1,100 @@
+import _pt from "prop-types";
+const _excluded = ["children", "size"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS } from '../styles';
+import { Size } from '../types';
+import { ArrowLineLeft } from '../icons/systemicons/SystemIcons';
+import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
+const Button = styled.button`
+  box-sizing: border-box;
+  min-height: 48px;
+  padding: 0;
+  margin: 0;
+  outline:none;
+  max-width: max-content;
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  ${props => props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)};
+  font-feature-settings: 'liga' off;
+
+  & > .button-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    max-width: max-content;
+    padding: 4px 4px 4px 0;
+    border-radius: 4px;
+    cursor: inherit;
+    min-width: 64px;
+
+  }
+
+  & > .button-content > span {
+    display: flex;
+    cursor: inherit;
+  }
+  & > .button-content > label {
+    display: flex;
+    cursor: inherit;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  &:hover > .button-content,
+  &.hover-state > .button-content {
+    background-color: ${COLORS.primary_20};
+    color: ${COLORS.primary_700};
+  }
+  &:focus > .button-content,
+  &.focus-state > .button-content {
+    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;
+  }
+  &:active > .button-content,
+  &.active-state > .button-content {
+    background-color: ${COLORS.primary_100};
+    color: ${COLORS.primary_800};
+    box-shadow: unset;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled > .button-content {
+    color: ${COLORS.neutral_300} !important;
+    background-color: transparent !important;
+  }
+`;
+
+const BackButton = _ref => {
+  let {
+    children,
+    size = Size.Small
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+    size: size
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'button-content'
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ArrowLineLeft, {
+    size: size === Size.XSmall ? '20' : '24'
+  })), /*#__PURE__*/React.createElement("label", null, children)));
+};
+
+BackButton.propTypes = {
+  disabled: _pt.bool
+};
+export default BackButton;
+//# sourceMappingURL=BackButton.js.map

package/dist/esm/Button/BackButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Button/BackButton.tsx"],"names":["React","styled","COLORS","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,SAASC,kBAAT,EAA6BC,iBAA7B,EAAgDC,kBAAhD,QAA0E,sBAA1E;AAEA,MAAMC,MAAM,GAAGP,MAAM,CAACQ,MAAwB;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,IAAN,KAAeR,IAAI,CAACS,MAApB,GAA6BL,kBAAkB,CAACF,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA/C,GAA+FR,iBAAiB,CAACD,kBAAkB,CAACQ,IAApB,EAA0BX,MAAM,CAACY,WAAjC,CAA+C;AAC/K;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBZ,MAAM,CAACa,UAAW;AAC1C,aAAab,MAAM,CAACc,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBd,MAAM,CAACe,WAAY;AAC3C,aAAaf,MAAM,CAACgB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA,CA9DA;;AAoEA,MAAMC,UAAoD,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,QAAF;AAAYV,IAAAA,IAAI,GAAGR,IAAI,CAACmB;AAAxB,GAA8C;AAAA,MAAZZ,KAAY;;AAC1G,sBACE,oBAAC,MAAD,eAAYA,KAAZ;AAAmB,IAAA,IAAI,EAAEC;AAAzB,mBACE;AAAK,IAAA,SAAS,EAAE;AAAhB,kBACE,+CACE,oBAAC,aAAD;AAAe,IAAA,IAAI,EAAEA,IAAI,KAAKR,IAAI,CAACS,MAAd,GAAuB,IAAvB,GAA8B;AAAnD,IADF,CADF,eAIE,mCAAQS,QAAR,CAJF,CADF,CADF;AAUD,CAXD;;;AAFEE,EAAAA,Q;;AAeF,eAAeH,UAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2e7fa1;\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: unset;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"file":"BackButton.js"}