@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (198) hide show
  1. package/dist/esm/AuthPage/Information.js +4 -7
  2. package/dist/esm/AuthPage/Information.js.map +1 -1
  3. package/dist/esm/Banners/Banner.js +5 -5
  4. package/dist/esm/Banners/Banner.js.map +1 -1
  5. package/dist/esm/Banners/OverviewBanner.js +2 -2
  6. package/dist/esm/Banners/OverviewBanner.js.map +1 -1
  7. package/dist/esm/Breadcrumb/Breadcrumb.js +46 -20
  8. package/dist/esm/Breadcrumb/Breadcrumb.js.map +1 -1
  9. package/dist/esm/Button/Iconbutton.js +4 -1
  10. package/dist/esm/Button/Iconbutton.js.map +1 -1
  11. package/dist/esm/Dropdown/CommonStyling.js +28 -28
  12. package/dist/esm/Dropdown/CommonStyling.js.map +1 -1
  13. package/dist/esm/Footer/Components/FooterDropdownLinks.js +9 -9
  14. package/dist/esm/Footer/Components/FooterDropdownLinks.js.map +1 -1
  15. package/dist/esm/Footer/Components/FooterNavSection.js +4 -8
  16. package/dist/esm/Footer/Components/FooterNavSection.js.map +1 -1
  17. package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js +4 -4
  18. package/dist/esm/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  19. package/dist/esm/Footer/Components/FooterTop.js +2 -2
  20. package/dist/esm/Footer/Components/FooterTop.js.map +1 -1
  21. package/dist/esm/GlobalNavigationBar/Logo.js +8 -11
  22. package/dist/esm/GlobalNavigationBar/Logo.js.map +1 -1
  23. package/dist/esm/GlobalNavigationBar/RightSideNav.js +4 -3
  24. package/dist/esm/GlobalNavigationBar/RightSideNav.js.map +1 -1
  25. package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js +3 -6
  26. package/dist/esm/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
  27. package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js +10 -7
  28. package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
  29. package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js +5 -13
  30. package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
  31. package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
  32. package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  33. package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js +6 -9
  34. package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  35. package/dist/esm/InputFields/DatepickerField.js +13 -14
  36. package/dist/esm/InputFields/DatepickerField.js.map +1 -1
  37. package/dist/esm/InputFields/components/SearchBarInput.js +11 -11
  38. package/dist/esm/InputFields/components/SearchBarInput.js.map +1 -1
  39. package/dist/esm/InputFields/components/SearchField.js +13 -11
  40. package/dist/esm/InputFields/components/SearchField.js.map +1 -1
  41. package/dist/esm/List/ListRow.js +5 -2
  42. package/dist/esm/List/ListRow.js.map +1 -1
  43. package/dist/esm/List/ListRowDropdown.js +4 -5
  44. package/dist/esm/List/ListRowDropdown.js.map +1 -1
  45. package/dist/esm/LoadingPage/GlobalLoadingPage.js +4 -3
  46. package/dist/esm/LoadingPage/GlobalLoadingPage.js.map +1 -1
  47. package/dist/esm/MiniProductCard/MiniProductCard.js +4 -5
  48. package/dist/esm/MiniProductCard/MiniProductCard.js.map +1 -1
  49. package/dist/esm/Modals/ModalDialog.js +22 -10
  50. package/dist/esm/Modals/ModalDialog.js.map +1 -1
  51. package/dist/esm/Paginator/Paginator.js +5 -6
  52. package/dist/esm/Paginator/Paginator.js.map +1 -1
  53. package/dist/esm/SkipToContent/SkipToContent.js +4 -5
  54. package/dist/esm/SkipToContent/SkipToContent.js.map +1 -1
  55. package/dist/esm/Switcher/MobileSwitcherMenu.js +4 -4
  56. package/dist/esm/Switcher/MobileSwitcherMenu.js.map +1 -1
  57. package/dist/esm/Switcher/SwitcherMenuItem.js +8 -9
  58. package/dist/esm/Switcher/SwitcherMenuItem.js.map +1 -1
  59. package/dist/esm/Tabs/HorizontalTabs.js +7 -10
  60. package/dist/esm/Tabs/HorizontalTabs.js.map +1 -1
  61. package/dist/esm/Toasters/Toast.js +1 -2
  62. package/dist/esm/Toasters/Toast.js.map +1 -1
  63. package/dist/esm/styles/typography.js +52 -1
  64. package/dist/esm/styles/typography.js.map +1 -1
  65. package/dist/js/AuthPage/Information.js +4 -2
  66. package/dist/js/AuthPage/Information.js.map +1 -1
  67. package/dist/js/Banners/Banner.js +2 -2
  68. package/dist/js/Banners/Banner.js.map +1 -1
  69. package/dist/js/Banners/OverviewBanner.js +3 -1
  70. package/dist/js/Banners/OverviewBanner.js.map +1 -1
  71. package/dist/js/Breadcrumb/Breadcrumb.d.ts +2 -0
  72. package/dist/js/Breadcrumb/Breadcrumb.js +46 -14
  73. package/dist/js/Breadcrumb/Breadcrumb.js.map +1 -1
  74. package/dist/js/Button/Iconbutton.d.ts +1 -0
  75. package/dist/js/Button/Iconbutton.js +4 -1
  76. package/dist/js/Button/Iconbutton.js.map +1 -1
  77. package/dist/js/Dropdown/CommonStyling.js +4 -4
  78. package/dist/js/Dropdown/CommonStyling.js.map +1 -1
  79. package/dist/js/Footer/Components/FooterDropdownLinks.js +3 -3
  80. package/dist/js/Footer/Components/FooterDropdownLinks.js.map +1 -1
  81. package/dist/js/Footer/Components/FooterNavSection.js +4 -2
  82. package/dist/js/Footer/Components/FooterNavSection.js.map +1 -1
  83. package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js +2 -2
  84. package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  85. package/dist/js/Footer/Components/FooterTop.js +3 -1
  86. package/dist/js/Footer/Components/FooterTop.js.map +1 -1
  87. package/dist/js/GlobalNavigationBar/Logo.js +9 -7
  88. package/dist/js/GlobalNavigationBar/Logo.js.map +1 -1
  89. package/dist/js/GlobalNavigationBar/RightSideNav.js +3 -1
  90. package/dist/js/GlobalNavigationBar/RightSideNav.js.map +1 -1
  91. package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js +3 -1
  92. package/dist/js/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
  93. package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js +4 -2
  94. package/dist/js/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
  95. package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js +4 -2
  96. package/dist/js/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
  97. package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js +1 -1
  98. package/dist/js/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  99. package/dist/js/GlobalNavigationBar/mobile/MobileMenu.d.ts +1 -1
  100. package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js +4 -2
  101. package/dist/js/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  102. package/dist/js/InputFields/DatepickerField.js +4 -2
  103. package/dist/js/InputFields/DatepickerField.js.map +1 -1
  104. package/dist/js/InputFields/components/SearchBarInput.js +4 -2
  105. package/dist/js/InputFields/components/SearchBarInput.js.map +1 -1
  106. package/dist/js/InputFields/components/SearchField.js +3 -1
  107. package/dist/js/InputFields/components/SearchField.js.map +1 -1
  108. package/dist/js/List/ListRow.js +3 -1
  109. package/dist/js/List/ListRow.js.map +1 -1
  110. package/dist/js/List/ListRowDropdown.js +3 -1
  111. package/dist/js/List/ListRowDropdown.js.map +1 -1
  112. package/dist/js/LoadingPage/GlobalLoadingPage.js +3 -1
  113. package/dist/js/LoadingPage/GlobalLoadingPage.js.map +1 -1
  114. package/dist/js/MiniProductCard/MiniProductCard.js +4 -2
  115. package/dist/js/MiniProductCard/MiniProductCard.js.map +1 -1
  116. package/dist/js/Modals/ModalDialog.d.ts +1 -1
  117. package/dist/js/Modals/ModalDialog.js +24 -10
  118. package/dist/js/Modals/ModalDialog.js.map +1 -1
  119. package/dist/js/Paginator/Paginator.js +3 -1
  120. package/dist/js/Paginator/Paginator.js.map +1 -1
  121. package/dist/js/SkipToContent/SkipToContent.js +3 -1
  122. package/dist/js/SkipToContent/SkipToContent.js.map +1 -1
  123. package/dist/js/Switcher/MobileSwitcherMenu.js +3 -1
  124. package/dist/js/Switcher/MobileSwitcherMenu.js.map +1 -1
  125. package/dist/js/Switcher/SwitcherMenuItem.js +3 -1
  126. package/dist/js/Switcher/SwitcherMenuItem.js.map +1 -1
  127. package/dist/js/Tabs/HorizontalTabs.js +3 -1
  128. package/dist/js/Tabs/HorizontalTabs.js.map +1 -1
  129. package/dist/js/Toasters/Toast.js +3 -3
  130. package/dist/js/Toasters/Toast.js.map +1 -1
  131. package/dist/js/styles/typography.d.ts +19 -6
  132. package/dist/js/styles/typography.js +80 -5
  133. package/dist/js/styles/typography.js.map +1 -1
  134. package/dist/umd/AuthPage/Information.js +6 -10
  135. package/dist/umd/AuthPage/Information.js.map +1 -1
  136. package/dist/umd/Banners/Banner.js +2 -2
  137. package/dist/umd/Banners/Banner.js.map +1 -1
  138. package/dist/umd/Banners/OverviewBanner.js +5 -6
  139. package/dist/umd/Banners/OverviewBanner.js.map +1 -1
  140. package/dist/umd/Breadcrumb/Breadcrumb.js +48 -22
  141. package/dist/umd/Breadcrumb/Breadcrumb.js.map +1 -1
  142. package/dist/umd/Button/Iconbutton.js +4 -1
  143. package/dist/umd/Button/Iconbutton.js.map +1 -1
  144. package/dist/umd/Dropdown/CommonStyling.js +28 -28
  145. package/dist/umd/Dropdown/CommonStyling.js.map +1 -1
  146. package/dist/umd/Footer/Components/FooterDropdownLinks.js +8 -8
  147. package/dist/umd/Footer/Components/FooterDropdownLinks.js.map +1 -1
  148. package/dist/umd/Footer/Components/FooterNavSection.js +6 -11
  149. package/dist/umd/Footer/Components/FooterNavSection.js.map +1 -1
  150. package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js +3 -3
  151. package/dist/umd/Footer/Components/FooterNewsletterAndSocialSection.js.map +1 -1
  152. package/dist/umd/Footer/Components/FooterTop.js +5 -6
  153. package/dist/umd/Footer/Components/FooterTop.js.map +1 -1
  154. package/dist/umd/GlobalNavigationBar/Logo.js +10 -14
  155. package/dist/umd/GlobalNavigationBar/Logo.js.map +1 -1
  156. package/dist/umd/GlobalNavigationBar/RightSideNav.js +6 -6
  157. package/dist/umd/GlobalNavigationBar/RightSideNav.js.map +1 -1
  158. package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js +5 -9
  159. package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
  160. package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js +12 -10
  161. package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map +1 -1
  162. package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js +7 -16
  163. package/dist/umd/GlobalNavigationBar/UserMenu/UserMenu.js.map +1 -1
  164. package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js +4 -1
  165. package/dist/umd/GlobalNavigationBar/mobile/CommonStyles.js.map +1 -1
  166. package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js +7 -11
  167. package/dist/umd/GlobalNavigationBar/mobile/MobileMenu.js.map +1 -1
  168. package/dist/umd/InputFields/DatepickerField.js +15 -16
  169. package/dist/umd/InputFields/DatepickerField.js.map +1 -1
  170. package/dist/umd/InputFields/components/SearchBarInput.js +13 -14
  171. package/dist/umd/InputFields/components/SearchBarInput.js.map +1 -1
  172. package/dist/umd/InputFields/components/SearchField.js +15 -14
  173. package/dist/umd/InputFields/components/SearchField.js.map +1 -1
  174. package/dist/umd/List/ListRow.js +7 -5
  175. package/dist/umd/List/ListRow.js.map +1 -1
  176. package/dist/umd/List/ListRowDropdown.js +6 -8
  177. package/dist/umd/List/ListRowDropdown.js.map +1 -1
  178. package/dist/umd/LoadingPage/GlobalLoadingPage.js +6 -6
  179. package/dist/umd/LoadingPage/GlobalLoadingPage.js.map +1 -1
  180. package/dist/umd/MiniProductCard/MiniProductCard.js +6 -8
  181. package/dist/umd/MiniProductCard/MiniProductCard.js.map +1 -1
  182. package/dist/umd/Modals/ModalDialog.js +22 -10
  183. package/dist/umd/Modals/ModalDialog.js.map +1 -1
  184. package/dist/umd/Paginator/Paginator.js +7 -9
  185. package/dist/umd/Paginator/Paginator.js.map +1 -1
  186. package/dist/umd/SkipToContent/SkipToContent.js +6 -8
  187. package/dist/umd/SkipToContent/SkipToContent.js.map +1 -1
  188. package/dist/umd/Switcher/MobileSwitcherMenu.js +6 -7
  189. package/dist/umd/Switcher/MobileSwitcherMenu.js.map +1 -1
  190. package/dist/umd/Switcher/SwitcherMenuItem.js +10 -12
  191. package/dist/umd/Switcher/SwitcherMenuItem.js.map +1 -1
  192. package/dist/umd/Tabs/HorizontalTabs.js +8 -12
  193. package/dist/umd/Tabs/HorizontalTabs.js.map +1 -1
  194. package/dist/umd/Toasters/Toast.js +1 -2
  195. package/dist/umd/Toasters/Toast.js.map +1 -1
  196. package/dist/umd/styles/typography.js +62 -2
  197. package/dist/umd/styles/typography.js.map +1 -1
  198. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","COLORS","black","HeadlineBase","HeadlineXL","HeadlineL","HeadlineM","HeadlineS","HeadlineXS","HeadlineXXS","ParagraphStyling","css","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphXL","children","ParagraphL","ParagraphM","ParagraphS","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n fontWeight: number;\n fontStyle?: string;\n textTransform?: Property.TextTransform;\n textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n fontFamily: TYPOGRAPHY.fontFamily,\n fontSize: fontSize,\n fontWeight: fontWeight,\n lineHeight: lineHeight + 'px',\n textTransform: textTransform ? textTransform : 'none',\n textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n fontStyle: fontStyle ? fontStyle : 'normal',\n color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n color?: string;\n}\n\ninterface IHeadlineBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n fontSize: fontSize,\n fontWeight: 700,\n lineHeight: lineHeight,\n color: color,\n}));\n\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '48px',\n lineHeight: '64px',\n color: color,\n}));\n\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '40px',\n lineHeight: '52px',\n color: color,\n}));\n\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '32px',\n lineHeight: '40px',\n color: color,\n}));\n\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '28px',\n lineHeight: '36px',\n color: color,\n}));\n\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '24px',\n lineHeight: '32px',\n color: color,\n}));\n\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '20px',\n lineHeight: '24px',\n color: color,\n}));\n\nconst ParagraphStyling = css`\n :lang(ja-jp) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(ko-kr) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(zh-CN) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 34em;\n }\n`;\n\ninterface IParagraphBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n p:not(:only-of-type) {\n margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n }\n ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n color?: string;\n}\n\nenum ParagraphTextStyle {\n Regular = 1,\n Bold,\n Italic,\n Underline,\n}\n\ntype ParagraphProps = {\n color?: string;\n textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ParagraphTextStyle.Bold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n return textDecoration;\n};\n\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n {children}\n </ParagraphBase>\n );\n};\n\nenum ComponentTextStyle {\n Regular = 1,\n Bold,\n Italic,\n UppercaseBold,\n}\n\ntype ComponentProps = {\n color?: string;\n textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string) => {\n return css`\n font-family: ${TYPOGRAPHY.fontFamily};\n font-size: ${fontSize};\n font-weight: ${componentFontWeight(textStyle)};\n line-height: ${lineHeight};\n font-style: ${componentFontStyle(textStyle)};\n color: ${color ? color : COLORS.black};\n `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'; width: number }> = ({\n color,\n textStyle,\n children,\n size,\n width,\n}) => {\n let fontsize = size;\n if (!size) {\n if (width < 768) {\n fontsize = 'small';\n } else if (width < 992) {\n fontsize = 'medium';\n } else {\n fontsize = 'large';\n }\n }\n switch (fontsize) {\n case 'xxsmall':\n return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n case 'xsmall':\n return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n case 'small':\n return <ComponentS color={color} textStyle={textStyle} children={children} />;\n case 'medium':\n return <ComponentM color={color} textStyle={textStyle} children={children} />;\n case 'large':\n default:\n return <ComponentL color={color} textStyle={textStyle} children={children} />;\n }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\n"],"file":"typography.js"}
1
+ {"version":3,"sources":["../../../src/styles/typography.tsx"],"names":["TYPOGRAPHY","fontFamily","TypographyBase","color","lineHeight","fontSize","fontWeight","fontStyle","textTransform","textDecorationLine","COLORS","black","HeadlineBaseStyling","css","HeadlineBase","HeadlineXLStyling","HeadlineXL","HeadlineLStyling","HeadlineL","HeadlineMStyling","HeadlineM","HeadlineSStyling","HeadlineS","HeadlineXSStyling","HeadlineXS","HeadlineXXSStyling","HeadlineXXS","ParagraphStyling","ParagraphBase","props","marginBetweenParagraphs","ParagraphTextStyle","paragraphFontWeight","textStyle","Bold","paragraphFontStyle","Italic","paragraphTextDecorationLine","textDecoration","Underline","ParagraphBaseStyling","ParagraphXlStyling","ParagraphXL","children","ParagraphLStyling","ParagraphL","ParagraphMStyling","ParagraphM","ParagraphSStyling","ParagraphS","ParagraphXSStyling","ParagraphXS","ComponentTextStyle","componentFontWeight","UppercaseBold","componentFontStyle","componentTextTransformation","ComponentStyling","ComponentXLStyling","ComponentXL","ComponentLStyling","ComponentL","ComponentMStyling","ComponentM","ComponentSStyling","ComponentS","ComponentXSStyling","ComponentXS","ComponentXXSStyling","ComponentXXS","ComponentResponsive","size","width","fontsize"],"mappings":"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","sourcesContent":["import React, { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { COLORS } from '.';\nimport { Property } from 'csstype';\n\nconst TYPOGRAPHY = {\n fontFamily: 'Lato, sans-serif',\n};\n\ninterface ITypographyBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n fontWeight: number;\n fontStyle?: string;\n textTransform?: Property.TextTransform;\n textDecorationLine?: Property.TextDecorationLine;\n}\n\nconst TypographyBase = styled('div')<ITypographyBase>(({ color, lineHeight, fontSize, fontWeight, fontStyle, textTransform, textDecorationLine }) => ({\n fontFamily: TYPOGRAPHY.fontFamily,\n fontSize: fontSize,\n fontWeight: fontWeight,\n lineHeight: lineHeight + 'px',\n textTransform: textTransform ? textTransform : 'none',\n textDecorationLine: textDecorationLine ? textDecorationLine : 'none',\n fontStyle: fontStyle ? fontStyle : 'normal',\n color: color ? color : COLORS.black,\n}));\n\ninterface IHeadline {\n color?: string;\n}\n\ninterface IHeadlineBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n}\n\nconst HeadlineBaseStyling = (fontSize: string, lineHeight: string, color: string) => {\n return css`\n font-size: ${fontSize};\n line-height: ${lineHeight};\n font-weight: 700;\n color: ${color};\n `;\n}\nconst HeadlineBase = styled(TypographyBase)<IHeadlineBase>(({ color, lineHeight, fontSize }) => ({\n fontSize: fontSize,\n fontWeight: 700,\n lineHeight: lineHeight,\n color: color,\n}));\n\nconst HeadlineXLStyling = (color: string) => HeadlineBaseStyling('48px', '64px', color);\nconst HeadlineXL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '48px',\n lineHeight: '64px',\n color: color,\n}));\n\nconst HeadlineLStyling = (color: string) => HeadlineBaseStyling('40px', '52px', color);\nconst HeadlineL = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '40px',\n lineHeight: '52px',\n color: color,\n}));\n\nconst HeadlineMStyling = (color: string) => HeadlineBaseStyling('32px', '40px', color);\nconst HeadlineM = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '32px',\n lineHeight: '40px',\n color: color,\n}));\n\nconst HeadlineSStyling = (color: string) => HeadlineBaseStyling('28px', '36px', color);\nconst HeadlineS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '28px',\n lineHeight: '36px',\n color: color,\n}));\n\nconst HeadlineXSStyling = (color: string) => HeadlineBaseStyling('24px', '32px', color);\nconst HeadlineXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '24px',\n lineHeight: '32px',\n color: color,\n}));\n\nconst HeadlineXXSStyling = (color: string) => HeadlineBaseStyling('20px', '24px', color);\nconst HeadlineXXS = styled(HeadlineBase)<IHeadline>(({ color }) => ({\n fontSize: '20px',\n lineHeight: '24px',\n color: color,\n}));\n\nconst ParagraphStyling = css`\n :lang(ja-jp) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(ko-kr) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n :lang(zh-CN) > h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 30em;\n }\n h1,\n h2,\n h3,\n h4,\n p,\n span {\n max-width: 34em;\n }\n`;\n\ninterface IParagraphBase {\n color?: string;\n lineHeight: number;\n fontSize: number;\n marginBetweenParagraphs?: string;\n}\n\nconst ParagraphBase = styled(TypographyBase)<IParagraphBase>`\n p {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n p:not(:only-of-type) {\n margin-bottom: ${(props) => props.marginBetweenParagraphs || '0'};\n }\n ${ParagraphStyling}\n`;\n\ninterface IParagraph {\n color?: string;\n}\n\nenum ParagraphTextStyle {\n Regular = 1,\n Bold,\n Italic,\n Underline,\n}\n\ntype ParagraphProps = {\n color?: string;\n textStyle?: ParagraphTextStyle;\n};\n\nconst paragraphFontWeight = (textStyle?: ParagraphTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ParagraphTextStyle.Bold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst paragraphFontStyle = (textStyle?: ParagraphTextStyle) => {\n let fontStyle = textStyle && textStyle === ParagraphTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst paragraphTextDecorationLine = (textStyle?: ParagraphTextStyle): Property.TextDecorationLine => {\n let textDecoration: Property.TextDecorationLine = textStyle && textStyle === ParagraphTextStyle.Underline ? 'underline' : 'none';\n return textDecoration;\n};\n\nconst ParagraphBaseStyling = (fontSize: string, lineHeight: string, textStyle: ParagraphTextStyle, color: string) => {\n return css`\n font-family: ${TYPOGRAPHY.fontFamily};\n font-size: ${fontSize};\n font-weight: ${paragraphFontWeight(textStyle)};\n line-height: ${lineHeight};\n font-style: ${paragraphFontStyle(textStyle)};\n color: ${color};\n `;\n}\n\nconst ParagraphXlStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('24px', '36px', textStyle, color);\nconst ParagraphXL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={36} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"18px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphLStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('20px', '32px', textStyle, color);\nconst ParagraphL: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={32} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"16px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphMStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('18px', '28px', textStyle, color);\nconst ParagraphM: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={28} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"14px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('16px', '24px', textStyle, color);\nconst ParagraphS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={24} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"12px\">\n {children}\n </ParagraphBase>\n );\n};\n\nconst ParagraphXSStyling = (textStyle: ParagraphTextStyle, color: string) => ParagraphBaseStyling('14px', '20px', textStyle, color);\nconst ParagraphXS: FunctionComponent<ParagraphProps> = ({ color, textStyle, children }) => {\n let fontWeight = paragraphFontWeight(textStyle);\n let fontStyle = paragraphFontStyle(textStyle);\n let textDecorationLine = paragraphTextDecorationLine(textStyle);\n return (\n <ParagraphBase color={color} lineHeight={20} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textDecorationLine={textDecorationLine} marginBetweenParagraphs=\"10px\">\n {children}\n </ParagraphBase>\n );\n};\n\nenum ComponentTextStyle {\n Regular = 1,\n Bold,\n Italic,\n UppercaseBold,\n}\n\ntype ComponentProps = {\n color?: string;\n textStyle?: ComponentTextStyle;\n};\n\nconst componentFontWeight = (textStyle?: ComponentTextStyle) => {\n let fontWeight = 400;\n if (textStyle === ComponentTextStyle.Bold || textStyle === ComponentTextStyle.UppercaseBold) {\n fontWeight = 700;\n }\n return fontWeight;\n};\n\nconst componentFontStyle = (textStyle?: ComponentTextStyle) => {\n let fontStyle = textStyle && textStyle === ComponentTextStyle.Italic ? 'italic' : '';\n return fontStyle;\n};\n\nconst componentTextTransformation = (textStyle?: ComponentTextStyle): Property.TextTransform => {\n let fontStyle: Property.TextTransform = textStyle && textStyle === ComponentTextStyle.UppercaseBold ? 'uppercase' : 'none';\n return fontStyle;\n};\n\nconst ComponentStyling = (fontSize: string, lineHeight: string, textStyle: ComponentTextStyle, color: string | undefined | null) => {\n return css`\n font-family: ${TYPOGRAPHY.fontFamily};\n font-size: ${fontSize};\n font-weight: ${componentFontWeight(textStyle)};\n line-height: ${lineHeight};\n font-style: ${componentFontStyle(textStyle)};\n ${color === null ? '' : `color: ${(color || COLORS.black)};`}\n `;\n};\n\nconst ComponentXLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('24px', '28px', textStyle, color);\nconst ComponentXL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={28} fontSize={24} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentLStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('20px', '24px', textStyle, color);\nconst ComponentL: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={20} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentMStyling = (textStyle: ComponentTextStyle, color: string | undefined | null) => ComponentStyling('18px', '24px', textStyle, color);\nconst ComponentM: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={24} fontSize={18} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('16px', '20px', textStyle, color);\nconst ComponentS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n return (\n <TypographyBase color={color} lineHeight={20} fontSize={16} fontWeight={fontWeight} fontStyle={fontStyle}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('14px', '16px', textStyle, color);\nconst ComponentXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={14} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentXXSStyling = (textStyle: ComponentTextStyle, color: string | null) => ComponentStyling('12px', '16px', textStyle, color);\nconst ComponentXXS: FunctionComponent<ComponentProps> = ({ color, textStyle, children }) => {\n let fontWeight = componentFontWeight(textStyle);\n let fontStyle = componentFontStyle(textStyle);\n let textTransform = componentTextTransformation(textStyle);\n return (\n <TypographyBase color={color} lineHeight={16} fontSize={12} fontWeight={fontWeight} fontStyle={fontStyle} textTransform={textTransform}>\n {children}\n </TypographyBase>\n );\n};\n\nconst ComponentResponsive: FunctionComponent<ComponentProps & { size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'; width: number }> = ({\n color,\n textStyle,\n children,\n size,\n width,\n}) => {\n let fontsize = size;\n if (!size) {\n if (width < 768) {\n fontsize = 'small';\n } else if (width < 992) {\n fontsize = 'medium';\n } else {\n fontsize = 'large';\n }\n }\n switch (fontsize) {\n case 'xxsmall':\n return <ComponentXXS color={color} textStyle={textStyle} children={children} />;\n case 'xsmall':\n return <ComponentXS color={color} textStyle={textStyle} children={children} />;\n case 'small':\n return <ComponentS color={color} textStyle={textStyle} children={children} />;\n case 'medium':\n return <ComponentM color={color} textStyle={textStyle} children={children} />;\n case 'large':\n default:\n return <ComponentL color={color} textStyle={textStyle} children={children} />;\n }\n};\n\nexport { TYPOGRAPHY };\nexport { HeadlineXL, HeadlineL, HeadlineM, HeadlineS, HeadlineXS, HeadlineXXS };\nexport { ParagraphTextStyle, ParagraphXL, ParagraphL, ParagraphM, ParagraphS, ParagraphXS };\nexport { ComponentTextStyle, ComponentXL, ComponentL, ComponentM, ComponentS, ComponentXS, ComponentXXS, ComponentResponsive };\nexport { ComponentXLStyling, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling, ComponentXXSStyling };\nexport { ParagraphXlStyling, ParagraphLStyling, ParagraphMStyling, ParagraphSStyling, ParagraphXSStyling };\nexport { HeadlineXLStyling, HeadlineLStyling, HeadlineMStyling, HeadlineSStyling, HeadlineXSStyling, HeadlineXXSStyling };\n"],"file":"typography.js"}
@@ -1,16 +1,16 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "styled-components", "./_AuthPageSection", "../styles"], factory);
3
+ define(["exports", "styled-components", "./_AuthPageSection", "../styles", "../styles/typography"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("styled-components"), require("./_AuthPageSection"), require("../styles"));
5
+ factory(exports, require("styled-components"), require("./_AuthPageSection"), require("../styles"), require("../styles/typography"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.styledComponents, global._AuthPageSection, global.styles);
10
+ factory(mod.exports, global.styledComponents, global._AuthPageSection, global.styles, global.typography);
11
11
  global.undefined = mod.exports;
12
12
  }
13
- })(this, function (exports, _styledComponents, _AuthPageSection, _styles) {
13
+ })(this, function (exports, _styledComponents, _AuthPageSection, _styles, _typography) {
14
14
  "use strict";
15
15
 
16
16
  Object.defineProperty(exports, "__esModule", {
@@ -51,16 +51,12 @@
51
51
  }
52
52
  `;
53
53
  const InformationHeader = exports.InformationHeader = _styledComponents2.default.h2`
54
- font-style: normal;
54
+ ${(0, _typography.HeadlineXLStyling)(_styles.COLORS.black)}
55
55
  font-weight: 300;
56
- font-size: 48px;
57
- line-height: 140%;
58
56
  margin-bottom: 0;
59
57
  `;
60
58
  const InformationText = exports.InformationText = _styledComponents2.default.p`
61
- font-size: 20px;
62
- line-height: 140%;
63
- color: ${_styles.COLORS.neutral_600};
59
+ ${(0, _typography.ParagraphLStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600)}
64
60
  margin: 8px 0;
65
61
  `;
66
62
  const InformationImage = exports.InformationImage = _styledComponents2.default.img`
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","InformationText","p","COLORS","neutral_600","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA2C;AAC/E;AACA,gBAAgBC,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C;AACA;AACA;AACA;AACA;AALO,CAAA;AAQA,QAAMC,eAAe,WAAfA,eAAe,GAAGV,2BAAOW,CAAE;AACxC;AACA;AACA,WAAWC,eAAOC,WAAY;AAC9B;AAJO,CAAA;AAOA,QAAMC,gBAAgB,WAAhBA,gBAAgB,GAAGd,2BAAOe,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport { COLORS, BREAKPOINTS } from '../styles';\n\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\n display: none;\n background: ${props => props.color};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n padding-top: 56px;\n }\n`;\n\nexport const InformationContent = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: center;\n text-align: center;\n max-width: 100%;\n\n ${BREAKPOINTS.LARGE} {\n align-self: flex-end;\n margin-right: 48px;\n }\n`;\n\nexport const InformationHeader = styled.h2`\n font-style: normal;\n font-weight: 300;\n font-size: 48px;\n line-height: 140%;\n margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n font-size: 20px;\n line-height: 140%;\n color: ${COLORS.neutral_600};\n margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n height: 275px;\n max-width: 100%;\n`;\n"],"file":"Information.js"}
1
+ {"version":3,"sources":["../../../src/AuthPage/Information.tsx"],"names":["InformationContainer","styled","props","color","BREAKPOINTS","MEDIUM","InformationContent","div","LARGE","InformationHeader","h2","HeadlineXLStyling","COLORS","InformationText","p","ParagraphLStyling","ParagraphTextStyle","InformationImage","img"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,QAAMA,oBAAoB,WAApBA,oBAAoB,GAAGC,gCAAM,yBAANA,CAA2C;AAC/E;AACA,gBAAgBC,KAAK,IAAIA,KAAK,CAACC,KAAM;AACrC;AACA,IAAIC,oBAAYC,MAAO;AACvB;AACA;AACA;AAPO,CAAA;AAUA,QAAMC,kBAAkB,WAAlBA,kBAAkB,GAAGL,2BAAOM,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,oBAAYI,KAAM;AACtB;AACA;AACA;AAXO,CAAA;AAcA,QAAMC,iBAAiB,WAAjBA,iBAAiB,GAAGR,2BAAOS,EAAG;AAC3C,IAAIC,mCAAkBC,eAAD,KAAjBD,CAAgC;AACpC;AACA;AAHO,CAAA;AAMA,QAAME,eAAe,WAAfA,eAAe,GAAGZ,2BAAOa,CAAE;AACxC,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CH,eAA7B,WAAjBG,CAAkE;AACtE;AAFO,CAAA;AAKA,QAAME,gBAAgB,WAAhBA,gBAAgB,GAAGhB,2BAAOiB,GAAI;AAC3C;AACA;AAFO,CAAA","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport AuthPageSection from './_AuthPageSection';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, HeadlineXL, ParagraphTextStyle} from '../styles';\nimport {ComponentLStyling, HeadlineXLStyling, ParagraphLStyling} from '../styles/typography';\n\nexport const InformationContainer = styled(AuthPageSection)<{ color: string }>`\n display: none;\n background: ${props => props.color};\n\n ${BREAKPOINTS.MEDIUM} {\n display: flex;\n padding-top: 56px;\n }\n`;\n\nexport const InformationContent = styled.div`\n display: flex;\n flex-direction: column;\n align-self: center;\n align-items: center;\n text-align: center;\n max-width: 100%;\n\n ${BREAKPOINTS.LARGE} {\n align-self: flex-end;\n margin-right: 48px;\n }\n`;\n\nexport const InformationHeader = styled.h2`\n ${HeadlineXLStyling(COLORS.black)}\n font-weight: 300;\n margin-bottom: 0;\n`;\n\nexport const InformationText = styled.p`\n ${ParagraphLStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n margin: 8px 0;\n`;\n\nexport const InformationImage = styled.img`\n height: 275px;\n max-width: 100%;\n`;\n"],"file":"Information.js"}
@@ -114,8 +114,8 @@
114
114
  }
115
115
  `;
116
116
  const BannerCenter = _styledComponents2.default.div`
117
- color: ${props => props.color};
118
- font-size: 18px;
117
+ ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.color)}
118
+
119
119
  display: flex;
120
120
  width: 100%;
121
121
  margin: 0 0 0 16px;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","color","ButtonWrapper","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Tip, ThumbsUp, Help, Close, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div`\n color: ${(props) => props.color};\n font-size: 18px;\n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n margin: 0 0 0 auto;\n ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: 'small' | 'medium' | 'large';\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
1
+ {"version":3,"sources":["../../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","COLORS","correct_100","black","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentMStyling","ComponentTextStyle","ButtonWrapper","getButtonStyle","BannerContentWrapper","size","type","linkText","hover","bottom","testId","icon","onClose","noIcon","Banner","React","window","setWidth","formatTypeToLowerCase","warning_700","Math","critical_700","correct_700","primary_700"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {Close, Help, TechnicalWarning, ThumbsUp, Tip} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button';\nimport {getButtonStyle} from './styles';\nimport {ComponentMStyling, ComponentResponsive} from '../styles/typography';\nimport {HyperLink} from '../HyperLink';\n\n/**\n * Styles for <Banner />\n */\nconst BannerContainer = styled.div<BannerProps>`\n background: ${(props: BannerProps) => (props.type ? props.type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: BannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color)}\n \n display: flex;\n width: 100%;\n margin: 0 0 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 16px 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 40px 0 56px;\n }\n &.small {\n margin: 0 0 0 16px;\n }\n &.medium {\n margin: 0 16px 0 32px;\n }\n &.large {\n margin: 0 40px 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div<{ type?: string }>`\n margin: 0 0 0 auto;\n ${(props) => (props.type ? getButtonStyle(props.type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: 'small' | 'medium' | 'large';\n type?: string;\n link?: string;\n linkText?: string;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n const formatTypeToLowerCase = type?.toLowerCase();\n switch (formatTypeToLowerCase) {\n case 'warning':\n return (\n <BannerContainer data-testid={testId} type={COLORS.warning_100} link={COLORS.warning_700} hover={COLORS.warning_20} bottom={bottom}>\n <BannerCenter color={COLORS.warning_700} className={size}>\n {icon ? icon : noIcon ? null : <Help color={COLORS.warning_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.warning_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.warning_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'critical':\n return (\n <BannerContainer data-testid={testId} type={COLORS.critical_100} link={COLORS.critical_700} hover={COLORS.critical_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.critical_700} className={size}>\n {icon ? icon : noIcon ? null : <TechnicalWarning color={COLORS.critical_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.critical_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.critical_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n case 'positive':\n return (\n <BannerContainer data-testid={testId} type={COLORS.correct_100} link={COLORS.correct_700} hover={COLORS.correct_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.correct_700} className={size}>\n {icon ? icon : noIcon ? null : <ThumbsUp color={COLORS.correct_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.correct_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type={formatTypeToLowerCase}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.correct_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n default:\n return (\n <BannerContainer data-testid={testId} type={COLORS.primary_100} link={COLORS.primary_700} hover={COLORS.primary_20} bottom={bottom} className={size}>\n <BannerCenter color={COLORS.primary_700} className={size}>\n {icon ? icon : noIcon ? null : <Tip color={COLORS.primary_700} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={COLORS.primary_700}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`} href={link} variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper type=\"neutral\">\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground tabbedHereBackgroundColor={COLORS.white} action={() => onClose()}>\n <Close color={COLORS.primary_500} size=\"24px\" />\n </IconButton>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n }\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
@@ -1,16 +1,16 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "prop-types", "react", "styled-components", "../styles", "../Layouts"], factory);
3
+ define(["exports", "prop-types", "react", "styled-components", "../styles", "../Layouts", "../styles/typography"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Layouts"));
5
+ factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require("../Layouts"), require("../styles/typography"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Layouts);
10
+ factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.Layouts, global.typography);
11
11
  global.undefined = mod.exports;
12
12
  }
13
- })(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Layouts) {
13
+ })(this, function (exports, _propTypes, _react, _styledComponents, _styles, _Layouts, _typography) {
14
14
  "use strict";
15
15
 
16
16
  Object.defineProperty(exports, "__esModule", {
@@ -106,8 +106,7 @@
106
106
  }
107
107
  }
108
108
  & h2 {
109
- font-weight: bold;
110
- font-size: 24px;
109
+ ${(0, _typography.HeadlineXSStyling)(_styles.COLORS.black)}
111
110
  margin: 16px 0 24px 0;
112
111
  }
113
112
  & p {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","BREAKPOINTS","MEDIUM","children","testId","OverviewBanner"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC,sBAAsBC,eAAOC,UAAW;AADxC,CAAA;AAIA,QAAMC,aAAa,GAAGJ,gCAAM,kBAANA,CAAkB;AACxC,sBAAsBE,eAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIE,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AA7CA,CAAA;;AAkDA,QAAMG,cAAc,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYD,IAAAA;AAAZ,GAAD,KAAiC;AACtD,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,qBAAaA;AAA5B,KAAA,EAFJ,QAEI,CADF,CADF;AADF,GAAA;;;AAFeD,IAAAA,Q;AAAeC,IAAAA,M;;oBAU9B,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { PageWidth } from '../Layouts';\n\nconst BannersWrapper = styled.div`\n background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n background-color: ${COLORS.primary_20};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n padding: 48px 12px;\n }\n\n & > *:first-child {\n padding-top: 12px;\n width: 320px;\n height: 180px;\n ${BREAKPOINTS.MEDIUM} {\n padding-top: 0;\n margin-right: 20px;\n width: 384px;\n height: 216px;\n }\n }\n & h2 {\n font-weight: bold;\n font-size: 24px;\n margin: 16px 0 24px 0;\n }\n & p {\n margin: 0;\n padding: 0 0 28px 0;\n max-width: 310px;\n }\n & div {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n margin-bottom: 18px;\n ${BREAKPOINTS.MEDIUM} {\n margin-left: 20px;\n align-items: start;\n justify-content: start;\n width: 384px;\n }\n }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n return (\n <BannersWrapper>\n <BannerContent data-testid={testId}>{children}</BannerContent>\n </BannersWrapper>\n );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}
1
+ {"version":3,"sources":["../../../src/Banners/OverviewBanner.tsx"],"names":["BannersWrapper","styled","div","COLORS","primary_20","BannerContent","BREAKPOINTS","MEDIUM","HeadlineXSStyling","children","testId","OverviewBanner"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,QAAMA,cAAc,GAAGC,2BAAOC,GAAI;AAClC,sBAAsBC,eAAOC,UAAW;AADxC,CAAA;AAIA,QAAMC,aAAa,GAAGJ,gCAAM,kBAANA,CAAkB;AACxC,sBAAsBE,eAAOC,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA,IAAIE,oBAAYC,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMD,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,mCAAkBL,eAAD,KAAjBK,CAAgC;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMF,oBAAYC,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AA5CA,CAAA;;AAiDA,QAAMI,cAAc,GAAG,CAAC;AAAA,IAAA,QAAA;AAAYD,IAAAA;AAAZ,GAAD,KAAiC;AACtD,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAe,qBAAaA;AAA5B,KAAA,EAFJ,QAEI,CADF,CADF;AADF,GAAA;;;AAFeD,IAAAA,Q;AAAeC,IAAAA,M;;oBAU9B,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS} from '../styles';\nimport {PageWidth} from '../Layouts';\nimport {HeadlineXSStyling} from '../styles/typography';\n\nconst BannersWrapper = styled.div`\n background-color: ${COLORS.primary_20};\n`;\n\nconst BannerContent = styled(PageWidth)`\n background-color: ${COLORS.primary_20};\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n\n ${BREAKPOINTS.MEDIUM} {\n flex-direction: row;\n padding: 48px 12px;\n }\n\n & > *:first-child {\n padding-top: 12px;\n width: 320px;\n height: 180px;\n ${BREAKPOINTS.MEDIUM} {\n padding-top: 0;\n margin-right: 20px;\n width: 384px;\n height: 216px;\n }\n }\n & h2 {\n ${HeadlineXSStyling(COLORS.black)}\n margin: 16px 0 24px 0;\n }\n & p {\n margin: 0;\n padding: 0 0 28px 0;\n max-width: 310px;\n }\n & div {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n margin-bottom: 18px;\n ${BREAKPOINTS.MEDIUM} {\n margin-left: 20px;\n align-items: start;\n justify-content: start;\n width: 384px;\n }\n }\n`;\n\ntype Props = { children: any; testId?: string };\n\nconst OverviewBanner = ({ children, testId }: Props) => {\n return (\n <BannersWrapper>\n <BannerContent data-testid={testId}>{children}</BannerContent>\n </BannersWrapper>\n );\n};\n\nexport default OverviewBanner;\n"],"file":"OverviewBanner.js"}
@@ -1,16 +1,16 @@
1
1
  (function (global, factory) {
2
2
  if (typeof define === "function" && define.amd) {
3
- define(["exports", "prop-types", "react", "styled-components", "../styles", "..", "react-router", "react-router-dom"], factory);
3
+ define(["exports", "prop-types", "react", "styled-components", "../styles", "..", "react-router-dom", "../styles/typography"], factory);
4
4
  } else if (typeof exports !== "undefined") {
5
- factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require(".."), require("react-router"), require("react-router-dom"));
5
+ factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"), require(".."), require("react-router-dom"), require("../styles/typography"));
6
6
  } else {
7
7
  var mod = {
8
8
  exports: {}
9
9
  };
10
- factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global._, global.reactRouter, global.reactRouterDom);
10
+ factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global._, global.reactRouterDom, global.typography);
11
11
  global.undefined = mod.exports;
12
12
  }
13
- })(this, function (exports, _propTypes, _react, _styledComponents, _styles, _, _reactRouter, _reactRouterDom) {
13
+ })(this, function (exports, _propTypes, _react, _styledComponents, _styles, _, _reactRouterDom, _typography) {
14
14
  "use strict";
15
15
 
16
16
  Object.defineProperty(exports, "__esModule", {
@@ -79,26 +79,36 @@
79
79
  };
80
80
  }
81
81
 
82
- const fontSize = "16px";
83
82
  const BreadcrumbContainer = _styledComponents2.default.div`
84
83
  display:flex;
85
84
  align-items: center;
86
- font-size: ${fontSize};
87
85
  `;
86
+
87
+ const FontStyles = (size, textStyle, color) => {
88
+ switch (size) {
89
+ case 'xsmall':
90
+ return (0, _typography.ComponentXXSStyling)(textStyle, color);
91
+
92
+ case 'medium':
93
+ return (0, _typography.ComponentMStyling)(textStyle, color);
94
+
95
+ case 'small':
96
+ default:
97
+ return (0, _typography.ComponentSStyling)(textStyle, color);
98
+ }
99
+ };
100
+
88
101
  const LastBreadcrumbItem = _styledComponents2.default.label`
89
- color: ${_styles.COLORS.neutral_800};
90
- font-weight: bold;
102
+ ${props => FontStyles(props.size, _.ComponentTextStyle.Bold, _styles.COLORS.neutral_800)}
91
103
  margin: 0 7px;
92
104
  `;
93
105
  const LinkWrapper = _styledComponents2.default.div`
94
106
  align-items: center;
95
- font-size: ${fontSize};
96
- color: ${_styles.COLORS.neutral_600};
107
+ ${props => FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
97
108
 
98
109
  a {
99
110
  text-decoration: none;
100
- color: ${_styles.COLORS.neutral_600};
101
- font-size: ${fontSize};
111
+ ${props => FontStyles(props.size, _.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
102
112
  margin: 0 7px;
103
113
 
104
114
  svg{
@@ -106,30 +116,46 @@
106
116
  }
107
117
  }
108
118
  a:hover {
109
- color: ${_styles.COLORS.neutral_800};
110
- font-weight: bold;
119
+ color: ${_styles.COLORS.primary_700};
120
+ }
121
+ a:active {
122
+ color: ${_styles.COLORS.primary_800};
111
123
  }
112
124
  `;
113
125
 
114
126
  const Breadcrumb = ({
115
- items
127
+ items,
128
+ size
116
129
  }) => {
117
- const history = (0, _reactRouter.useHistory)();
118
- return /*#__PURE__*/React.createElement(BreadcrumbContainer, null, /*#__PURE__*/React.createElement(LinkWrapper, null, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
130
+ size = size || 'small';
131
+ const iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';
132
+ return /*#__PURE__*/React.createElement(BreadcrumbContainer, null, /*#__PURE__*/React.createElement(LinkWrapper, {
133
+ size: size
134
+ }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
119
135
  to: '/'
120
136
  }, /*#__PURE__*/React.createElement(_.SystemIcons.Home, {
121
- size: fontSize
137
+ size: iconSize
122
138
  }))), !!items && items.length > 2 && items.slice(0, items.length - 2).map((item, i) => {
123
- return /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
139
+ return /*#__PURE__*/React.createElement(LinkWrapper, {
140
+ size: size,
141
+ key: i
142
+ }, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
124
143
  to: item.url
125
144
  }, "..."));
126
- }), !!items && items.length > 1 && /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
145
+ }), !!items && items.length > 1 && /*#__PURE__*/React.createElement(LinkWrapper, {
146
+ size: size
147
+ }, "/", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
127
148
  to: items[items.length - 2].url
128
- }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(LinkWrapper, null, "/", /*#__PURE__*/React.createElement(LastBreadcrumbItem, null, items[items.length - 1].label)));
149
+ }, items[items.length - 2].label)), !!items && items.length > 0 && /*#__PURE__*/React.createElement(LinkWrapper, {
150
+ size: size
151
+ }, "/", /*#__PURE__*/React.createElement(LastBreadcrumbItem, {
152
+ size: size
153
+ }, items[items.length - 1].label)));
129
154
  };
130
155
 
131
156
  Breadcrumb.propTypes = {
132
- items: _propTypes2.default.array
157
+ items: _propTypes2.default.array,
158
+ size: _propTypes2.default.oneOf(['xsmall', 'small', 'medium'])
133
159
  };
134
160
  exports.default = Breadcrumb;
135
161
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["items","fontSize","BreadcrumbContainer","styled","div","LastBreadcrumbItem","label","COLORS","neutral_800","LinkWrapper","neutral_600","Breadcrumb","history","item","url"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,QAAMC,QAAQ,GAAd,MAAA;AAEA,QAAMC,mBAAmB,GAAGC,2BAAOC,GAAI;AACvC;AACA;AACA,eAAeH,QAAS;AAHxB,CAAA;AAMA,QAAMI,kBAAkB,GAAGF,2BAAOG,KAAM;AACxC,WAAWC,eAAOC,WAAY;AAC9B;AACA;AAHA,CAAA;AAMA,QAAMC,WAAW,GAAGN,2BAAOC,GAAI;AAC/B;AACA,eAAeH,QAAS;AACxB,WAAWM,eAAOG,WAAY;AAC9B;AACA;AACA;AACA,aAAaH,eAAOG,WAAY;AAChC,iBAAiBT,QAAS;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaM,eAAOC,WAAY;AAChC;AACA;AAlBA,CAAA;;AAsBA,QAAMG,UAAoD,GAAG,CAAC;AAAEX,IAAAA;AAAF,GAAD,KAAe;AAC1E,UAAMY,OAAO,GAAb,8BAAA;AAEA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAM,MAAA,EAAE,EAAE;AAAV,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,cAAA,IAAA,EAAA;AAAkB,MAAA,IAAI,EAAEX;AAAxB,KAAA,CADF,CADF,CADF,EAOI,CAAC,CAAD,KAAA,IAAWD,KAAK,CAALA,MAAAA,GAAX,CAAA,IACA,KAAK,CAAL,KAAA,CAAA,CAAA,EAAeA,KAAK,CAALA,MAAAA,GAAf,CAAA,EAAA,GAAA,CAAqC,CAAA,IAAA,EAAA,CAAA,KAAY;AAC/C,aAAA,aACA,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,GAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAM,QAAA,EAAE,EAAEa,IAAI,CAACC;AAAf,OAAA,EAHF,KAGE,CAFF,CADA;AATN,KAQI,CARJ,EAkBI,CAAC,CAAD,KAAA,IAAWd,KAAK,CAALA,MAAAA,GAAX,CAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,GAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAM,MAAA,EAAE,EAAEA,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAAwBc;AAAlC,KAAA,EACGd,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAtBT,KAqBM,CAFF,CAnBJ,EA2BI,CAAC,CAAD,KAAA,IAAWA,KAAK,CAALA,MAAAA,GAAX,CAAA,IAAA,aACA,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA,IAAA,EAAA,GAAA,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA,IAAA,EACGA,KAAK,CAACA,KAAK,CAALA,MAAAA,GAANA,CAAK,CAALA,CAhCX,KA+BQ,CAFF,CA5BJ,CADF;AAHF,GAAA;;;AAvCEA,IAAAA,K;;oBAkFF,U","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { COLORS } from '../styles';\nimport { SystemIcons } from '..';\nimport { useHistory } from 'react-router';\nimport { BreadcrumbItem } from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport { Link } from 'react-router-dom';\n\n\ntype BreadcrumbProps = {\n items?: BreadcrumbItem[]\n};\n\nconst fontSize = \"16px\"\n\nconst BreadcrumbContainer = styled.div`\n display:flex;\n align-items: center;\n font-size: ${fontSize};\n`;\n\nconst LastBreadcrumbItem = styled.label`\n color: ${COLORS.neutral_800};\n font-weight: bold;\n margin: 0 7px;\n`;\n\nconst LinkWrapper = styled.div`\n align-items: center;\n font-size: ${fontSize};\n color: ${COLORS.neutral_600};\n \n a {\n text-decoration: none;\n color: ${COLORS.neutral_600};\n font-size: ${fontSize};\n margin: 0 7px;\n\n svg{\n padding:4px 0 0 0;\n }\n }\n a:hover {\n color: ${COLORS.neutral_800};\n font-weight: bold;\n }\n`;\n\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items }) => {\n const history = useHistory();\n \n return (\n <BreadcrumbContainer>\n <LinkWrapper>\n <Link to={'/'}>\n <SystemIcons.Home size={fontSize} />\n </Link>\n </LinkWrapper>\n\n { !!items && items.length > 2 && \n items.slice(0, items.length - 2).map((item, i)=> {\n return (\n <LinkWrapper>\n /\n <Link to={item.url}>\n ...\n </Link>\n </LinkWrapper>\n )})}\n\n { !!items && items.length > 1 && \n <LinkWrapper>\n /\n <Link to={items[items.length - 2].url}>\n {items[items.length - 2].label}\n </Link>\n </LinkWrapper>\n }\n\n { !!items && items.length > 0 && \n <LinkWrapper>\n /\n <LastBreadcrumbItem>\n {items[items.length - 1].label}\n </LastBreadcrumbItem>\n </LinkWrapper>\n }\n\n </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
1
+ {"version":3,"sources":["../../../src/Breadcrumb/Breadcrumb.tsx"],"names":["items","size","BreadcrumbContainer","styled","div","FontStyles","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","LastBreadcrumbItem","label","props","ComponentTextStyle","COLORS","LinkWrapper","primary_700","primary_800","Breadcrumb","iconSize","i","item","url"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {COLORS} from '../styles';\nimport {ComponentTextStyle, SystemIcons} from '..';\nimport {useHistory} from 'react-router';\nimport {BreadcrumbItem} from '@laerdal/life-react-components/src/Breadcrumb/BreadcrumbItem';\nimport {Link} from 'react-router-dom';\nimport {ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\n\ntype availableSizes = 'xsmall' | 'small' | 'medium';\n\ntype BreadcrumbProps = {\n items?: BreadcrumbItem[];\n size?: availableSizes;\n};\n\nconst BreadcrumbContainer = styled.div`\n display:flex;\n align-items: center;\n`;\n\nconst FontStyles = (size: availableSizes | undefined, textStyle: ComponentTextStyle, color: string) => {\n switch (size) {\n case 'xsmall':\n return ComponentXXSStyling(textStyle, color);\n case 'medium':\n return ComponentMStyling(textStyle, color);\n case 'small':\n default:\n return ComponentSStyling(textStyle, color);\n }\n}\n\nconst LastBreadcrumbItem = styled.label<{size: availableSizes}>`\n ${(props) => FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800)}\n margin: 0 7px;\n`;\n\nconst LinkWrapper = styled.div<{size: availableSizes | undefined}>`\n align-items: center;\n ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n \n a {\n text-decoration: none;\n ${(props) => FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600)}\n margin: 0 7px;\n\n svg{\n padding:4px 0 0 0;\n }\n }\n a:hover {\n color: ${COLORS.primary_700};\n }\n a:active {\n color: ${COLORS.primary_800};\n }\n`;\n\n\nconst Breadcrumb: React.FunctionComponent<BreadcrumbProps> = ({ items, size }) => {\n\n size = size || 'small';\n\n const iconSize = size === 'xsmall' ? '16' : size === 'small' ? '20' : '24';\n\n return (\n <BreadcrumbContainer>\n <LinkWrapper size={size}>\n <Link to={'/'}>\n <SystemIcons.Home size={iconSize} />\n </Link>\n </LinkWrapper>\n\n { !!items && items.length > 2 && \n items.slice(0, items.length - 2).map((item, i)=> {\n return (\n <LinkWrapper size={size} key={i}>\n /\n <Link to={item.url}>\n ...\n </Link>\n </LinkWrapper>\n )})}\n\n { !!items && items.length > 1 && \n <LinkWrapper size={size}>\n /\n <Link to={items[items.length - 2].url}>\n {items[items.length - 2].label}\n </Link>\n </LinkWrapper>\n }\n\n { !!items && items.length > 0 && \n <LinkWrapper size={size}>\n /\n <LastBreadcrumbItem size={size}>\n {items[items.length - 1].label}\n </LastBreadcrumbItem>\n </LinkWrapper>\n }\n\n </BreadcrumbContainer>);\n};\n\nexport default Breadcrumb;\n"],"file":"Breadcrumb.js"}
@@ -254,7 +254,8 @@
254
254
  tabIndex,
255
255
  borderRadius,
256
256
  onKeyPress,
257
- tabbedHereBackgroundColor
257
+ tabbedHereBackgroundColor,
258
+ type
258
259
  }) => {
259
260
  const supressFocusRef = React.useRef(null);
260
261
  const [tabbedHere, setTabbedHere] = React.useState(false);
@@ -274,6 +275,7 @@
274
275
  case 'secondary':
275
276
  return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
276
277
  id: id,
278
+ type: type ?? 'button',
277
279
  "data-testid": id,
278
280
  onClick: event => action(event),
279
281
  onKeyDown: e => isPressingEnter(e) ? action() : null,
@@ -303,6 +305,7 @@
303
305
  default:
304
306
  return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
305
307
  id: id,
308
+ type: type ?? 'button',
306
309
  "data-testid": id,
307
310
  onClick: event => action(event),
308
311
  onKeyDown: e => isPressingEnter(e) ? action() : null,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","BREAKPOINTS","MEDIUM","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {BREAKPOINTS, COLORS} from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_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_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n}): React.ReactElement<Props> => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
1
+ {"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","StyledIconButton","styled","button","props","BREAKPOINTS","MEDIUM","borderRadius","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","IconButton","type","supressFocusRef","React","isPressingEnter","e","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n tabbedHere?: boolean;\n tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n switch (variant) {\n case 'secondary':\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n }\n div svg path,\n div svg {\n fill: ${COLORS.neutral_600};\n }\n `;\n case 'primary':\n default:\n return css`\n div {\n background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n `;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n &:focus:not(:disabled) {\n outline: none;\n div {\n outline: none;\n }\n }\n &:active:not(:disabled) {\n div {\n box-shadow: none;\n }\n }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_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_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ntype Props = {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n tabbedHereBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n};\n\nconst IconButton: React.FunctionComponent<Props> = ({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n borderRadius,\n onKeyPress,\n tabbedHereBackgroundColor,\n type,\n}): React.ReactElement<Props> => {\n const supressFocusRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={(e: any) => {\n if (!disabled && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!disabled) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n onBlur={() => setTabbedHere(false)}\n tabbedHere={tabbedHere}\n onKeyPress={onKeyPress}\n tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n};\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}