@skyscanner/backpack-web 0.0.6 → 0.1.0

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 (357) hide show
  1. package/bpk-animate-height/package.json +3 -3
  2. package/bpk-component-accordion/README.md +0 -5
  3. package/bpk-component-accordion/index.js +1 -2
  4. package/bpk-component-accordion/package.json +8 -8
  5. package/bpk-component-accordion/src/BpkAccordion.js +1 -1
  6. package/bpk-component-accordion/src/BpkAccordionItem.js +5 -18
  7. package/bpk-component-accordion/src/withAccordionItemState.js +1 -1
  8. package/bpk-component-accordion/src/withSingleItemAccordionState.js +1 -1
  9. package/bpk-component-aria-live/package.json +8 -8
  10. package/bpk-component-aria-live/src/BpkAriaLive.js +1 -1
  11. package/bpk-component-autosuggest/package.json +5 -5
  12. package/bpk-component-autosuggest/src/BpkAutosuggest.js +2 -2
  13. package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js +1 -1
  14. package/bpk-component-badge/package.json +6 -6
  15. package/bpk-component-badge/src/BpkBadge.js +1 -1
  16. package/bpk-component-banner-alert/package.json +10 -10
  17. package/bpk-component-banner-alert/src/AnimateAndFade.js +2 -2
  18. package/bpk-component-banner-alert/src/BpkBannerAlertInner.js +7 -7
  19. package/bpk-component-banner-alert/src/withBannerAlertState.js +1 -1
  20. package/bpk-component-barchart/package.json +9 -9
  21. package/bpk-component-barchart/src/BpkBarchart.js +2 -2
  22. package/bpk-component-barchart/src/BpkBarchartBar.js +1 -1
  23. package/bpk-component-barchart/src/BpkChartAxis.js +1 -1
  24. package/bpk-component-barchart/src/BpkChartDataTable.js +1 -1
  25. package/bpk-component-barchart/src/BpkChartGridLines.js +1 -1
  26. package/bpk-component-barchart/src/RTLtransforms.js +1 -1
  27. package/bpk-component-blockquote/package.json +3 -3
  28. package/bpk-component-blockquote/src/BpkBlockquote.js +1 -1
  29. package/bpk-component-breadcrumb/package.json +6 -6
  30. package/bpk-component-breadcrumb/src/BpkBreadcrumb.js +1 -1
  31. package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +5 -5
  32. package/bpk-component-breakpoint/package.json +4 -4
  33. package/{bpk-component-rating/examples.module.scss → bpk-component-button/BpkButtonPrimaryOnDark.js} +2 -4
  34. package/{bpk-component-dialog/examples.module.scss → bpk-component-button/BpkButtonPrimaryOnLight.js} +2 -6
  35. package/bpk-component-button/README.md +40 -21
  36. package/bpk-component-button/index.js +4 -0
  37. package/bpk-component-button/package.json +3 -3
  38. package/bpk-component-button/src/BpkButton.js +27 -7
  39. package/bpk-component-button/src/BpkButtonLink.js +6 -8
  40. package/bpk-component-button/src/BpkButtonLink.module.scss +0 -4
  41. package/bpk-component-button/src/BpkButtonPrimaryOnDark.js +48 -0
  42. package/bpk-component-button/{BpkButtonStory.module.scss → src/BpkButtonPrimaryOnDark.module.scss} +2 -2
  43. package/bpk-component-button/src/BpkButtonPrimaryOnLight.js +48 -0
  44. package/{bpk-component-nudger/BpkNudgerStory.module.scss → bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss} +2 -6
  45. package/bpk-component-button/src/themeAttributes.js +18 -0
  46. package/bpk-component-calendar/package.json +10 -10
  47. package/bpk-component-calendar/src/BpkCalendarContainer.js +1 -1
  48. package/bpk-component-calendar/src/BpkCalendarDate.js +1 -1
  49. package/bpk-component-calendar/src/BpkCalendarGrid.js +5 -5
  50. package/bpk-component-calendar/src/BpkCalendarGrid.module.css +1 -1
  51. package/bpk-component-calendar/src/BpkCalendarGrid.module.scss +1 -7
  52. package/bpk-component-calendar/src/BpkCalendarGridHeader.js +1 -1
  53. package/bpk-component-calendar/src/BpkCalendarGridTransition.js +1 -1
  54. package/bpk-component-calendar/src/BpkCalendarNav.js +5 -5
  55. package/bpk-component-calendar/src/Week.js +5 -5
  56. package/bpk-component-calendar/src/composeCalendar.js +1 -1
  57. package/bpk-component-calendar/src/custom-proptypes.js +6 -8
  58. package/bpk-component-card/package.json +5 -5
  59. package/bpk-component-card/src/BpkCard.js +1 -1
  60. package/bpk-component-checkbox/package.json +6 -6
  61. package/bpk-component-checkbox/src/BpkCheckbox.js +1 -1
  62. package/bpk-component-chip/package.json +6 -6
  63. package/bpk-component-chip/src/BpkDismissibleChip.js +1 -1
  64. package/bpk-component-chip/src/BpkSelectableChip.js +2 -2
  65. package/bpk-component-close-button/package.json +5 -5
  66. package/bpk-component-close-button/src/BpkCloseButton.js +2 -2
  67. package/bpk-component-code/package.json +3 -3
  68. package/bpk-component-code/src/BpkCode.js +1 -1
  69. package/bpk-component-code/src/BpkCodeBlock.js +1 -1
  70. package/bpk-component-content-container/package.json +3 -3
  71. package/bpk-component-content-container/src/BpkContentContainer.js +1 -1
  72. package/bpk-component-datatable/package.json +5 -5
  73. package/bpk-component-datatable/src/BpkDataTable.js +1 -1
  74. package/bpk-component-datatable/src/BpkDataTableColumn.js +1 -1
  75. package/bpk-component-datatable/src/bpkHeaderRenderer.js +4 -4
  76. package/bpk-component-datepicker/index.js +1 -1
  77. package/bpk-component-datepicker/package.json +10 -10
  78. package/bpk-component-datepicker/src/BpkDatepicker.js +6 -6
  79. package/bpk-component-datepicker/src/themeAttributes.js +3 -3
  80. package/bpk-component-description-list/package.json +3 -3
  81. package/bpk-component-description-list/src/ComponentFactory.js +1 -1
  82. package/bpk-component-dialog/package.json +9 -9
  83. package/bpk-component-dialog/src/BpkDialog.js +2 -2
  84. package/bpk-component-dialog/src/BpkDialogInner.js +3 -3
  85. package/bpk-component-drawer/package.json +10 -10
  86. package/bpk-component-drawer/src/BpkDrawer.js +2 -2
  87. package/bpk-component-drawer/src/BpkDrawerContent.js +3 -3
  88. package/bpk-component-drawer/src/themeAttributes.js +1 -1
  89. package/bpk-component-fieldset/package.json +13 -13
  90. package/bpk-component-fieldset/src/BpkFieldset.js +3 -3
  91. package/bpk-component-flare/package.json +5 -5
  92. package/bpk-component-flare/src/BpkContentBubble.js +1 -1
  93. package/bpk-component-flare/src/BpkFlareBar.js +1 -1
  94. package/bpk-component-form-validation/package.json +11 -11
  95. package/bpk-component-form-validation/src/BpkFormValidation.js +4 -4
  96. package/bpk-component-graphic-promotion/README.md +70 -0
  97. package/{bpk-component-close-button/examples.js → bpk-component-graphic-promotion/index.js} +9 -11
  98. package/bpk-component-graphic-promotion/package.json +26 -0
  99. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +202 -0
  100. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +255 -0
  101. package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss +70 -0
  102. package/bpk-component-grid/package.json +3 -3
  103. package/bpk-component-grid/src/BpkGridColumn.js +1 -1
  104. package/bpk-component-grid/src/BpkGridContainer.js +1 -1
  105. package/bpk-component-grid/src/BpkGridRow.js +1 -1
  106. package/bpk-component-grid-toggle/package.json +4 -4
  107. package/bpk-component-grid-toggle/src/BpkGridToggle.js +2 -2
  108. package/bpk-component-horizontal-nav/package.json +7 -7
  109. package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +2 -2
  110. package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +1 -1
  111. package/bpk-component-icon/package.json +8 -8
  112. package/bpk-component-icon/src/classNameModifierHOCFactory.js +1 -1
  113. package/bpk-component-icon/src/withAlignment.js +1 -1
  114. package/bpk-component-icon/src/withDescription.js +1 -1
  115. package/bpk-component-icon/src/withRtlSupport.js +1 -1
  116. package/bpk-component-image/package.json +7 -7
  117. package/bpk-component-image/src/BpkBackgroundImage.js +2 -2
  118. package/bpk-component-image/src/BpkImage.js +2 -2
  119. package/bpk-component-image/src/withLazyLoading.js +1 -1
  120. package/bpk-component-image/src/withLoadingBehavior.js +1 -1
  121. package/bpk-component-infinite-scroll/package.json +7 -7
  122. package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +1 -1
  123. package/bpk-component-input/package.json +7 -7
  124. package/bpk-component-input/src/BpkClearButton.js +3 -3
  125. package/bpk-component-input/src/BpkInput.js +1 -1
  126. package/bpk-component-input/src/withOpenEvents.js +1 -1
  127. package/bpk-component-label/package.json +3 -3
  128. package/bpk-component-label/src/BpkLabel.js +1 -1
  129. package/bpk-component-link/package.json +5 -5
  130. package/bpk-component-link/src/BpkButtonLink.js +1 -1
  131. package/bpk-component-link/src/BpkLink.js +1 -1
  132. package/bpk-component-list/package.json +3 -3
  133. package/bpk-component-list/src/BpkList.js +1 -1
  134. package/bpk-component-list/src/BpkListItem.js +1 -1
  135. package/bpk-component-loading-button/package.json +7 -7
  136. package/bpk-component-loading-button/src/BpkLoadingButton.js +43 -19
  137. package/{bpk-component-fieldset/examples.module.scss → bpk-component-loading-button/src/BpkLoadingButton.module.scss} +25 -16
  138. package/bpk-component-map/package.json +7 -7
  139. package/bpk-component-map/src/BpkIconMarker.js +1 -1
  140. package/bpk-component-map/src/BpkIconMarkerBackground.js +1 -1
  141. package/bpk-component-map/src/BpkPriceMarker.js +2 -2
  142. package/bpk-component-map/src/DefaultLoadingElement.js +2 -2
  143. package/bpk-component-mobile-scroll-container/package.json +4 -4
  144. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -1
  145. package/bpk-component-modal/package.json +10 -10
  146. package/bpk-component-modal/src/BpkModal.js +2 -2
  147. package/bpk-component-modal/src/BpkModalInner.js +4 -4
  148. package/bpk-component-modal/src/themeAttributes.js +1 -1
  149. package/bpk-component-navigation-bar/package.json +9 -9
  150. package/bpk-component-navigation-bar/src/BpkNavigationBar.js +2 -2
  151. package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js +2 -2
  152. package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js +2 -2
  153. package/bpk-component-navigation-stack/package.json +8 -8
  154. package/bpk-component-navigation-stack/src/BpkNavigationStack.js +1 -1
  155. package/bpk-component-nudger/package.json +8 -8
  156. package/bpk-component-nudger/src/BpkConfigurableNudger.js +6 -6
  157. package/bpk-component-nudger/src/BpkNudger.js +1 -1
  158. package/bpk-component-nudger/src/themeAttributes.js +1 -1
  159. package/bpk-component-overlay/package.json +5 -5
  160. package/bpk-component-overlay/src/BpkOverlay.js +1 -1
  161. package/bpk-component-pagination/package.json +5 -5
  162. package/bpk-component-pagination/src/BpkPagination.js +1 -1
  163. package/bpk-component-pagination/src/BpkPaginationList.js +1 -1
  164. package/bpk-component-pagination/src/BpkPaginationNudger.js +4 -4
  165. package/bpk-component-pagination/src/BpkPaginationPage.js +2 -2
  166. package/bpk-component-pagination/src/themeAttributes.js +1 -1
  167. package/bpk-component-panel/package.json +3 -3
  168. package/bpk-component-panel/src/BpkPanel.js +1 -1
  169. package/bpk-component-phone-input/package.json +10 -10
  170. package/bpk-component-phone-input/src/BpkPhoneInput.js +4 -4
  171. package/bpk-component-popover/package.json +9 -9
  172. package/bpk-component-popover/src/BpkPopover.js +4 -4
  173. package/bpk-component-popover/src/BpkPopoverPortal.js +1 -1
  174. package/bpk-component-popover/src/themeAttributes.js +1 -1
  175. package/bpk-component-progress/package.json +6 -6
  176. package/bpk-component-progress/src/BpkProgress.js +1 -1
  177. package/bpk-component-radio/package.json +5 -5
  178. package/bpk-component-radio/src/BpkRadio.js +1 -1
  179. package/bpk-component-rating/package.json +5 -5
  180. package/bpk-component-rating/src/BpkRating.js +2 -2
  181. package/bpk-component-rtl-toggle/package.json +3 -3
  182. package/bpk-component-rtl-toggle/src/BpkRtlToggle.js +1 -1
  183. package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js +1 -1
  184. package/bpk-component-scrollable-calendar/index.js +1 -1
  185. package/bpk-component-scrollable-calendar/package.json +7 -7
  186. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.js +1 -1
  187. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js +1 -1
  188. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js +3 -3
  189. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +2 -2
  190. package/bpk-component-scrollable-calendar/src/utils.js +1 -1
  191. package/bpk-component-section-list/package.json +7 -7
  192. package/bpk-component-section-list/src/BpkSectionListItem.js +3 -3
  193. package/bpk-component-section-list/src/BpkSectionListSection.js +2 -2
  194. package/bpk-component-select/package.json +4 -4
  195. package/bpk-component-select/src/BpkSelect.js +1 -1
  196. package/bpk-component-skip-link/package.json +3 -3
  197. package/bpk-component-skip-link/src/BpkSkipLink.js +1 -1
  198. package/bpk-component-slider/package.json +5 -5
  199. package/bpk-component-slider/src/BpkSlider.js +1 -1
  200. package/bpk-component-spinner/package.json +4 -4
  201. package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +1 -1
  202. package/bpk-component-spinner/src/BpkLargeSpinner.js +1 -1
  203. package/bpk-component-spinner/src/BpkSpinner.js +1 -1
  204. package/bpk-component-star-rating/package.json +6 -6
  205. package/bpk-component-star-rating/src/BpkInteractiveStar.js +1 -1
  206. package/bpk-component-star-rating/src/BpkInteractiveStarRating.js +1 -1
  207. package/bpk-component-star-rating/src/BpkStar.js +8 -8
  208. package/bpk-component-star-rating/src/BpkStarRating.js +1 -1
  209. package/bpk-component-star-rating/src/withInteractiveStarRatingState.js +1 -1
  210. package/bpk-component-switch/package.json +3 -3
  211. package/bpk-component-switch/src/BpkSwitch.js +1 -1
  212. package/bpk-component-table/package.json +3 -3
  213. package/bpk-component-table/src/BpkTable.js +1 -1
  214. package/bpk-component-table/src/BpkTableCell.js +1 -1
  215. package/bpk-component-table/src/BpkTableHeadCell.js +1 -1
  216. package/bpk-component-text/package.json +3 -3
  217. package/bpk-component-text/src/BpkText.js +1 -1
  218. package/bpk-component-textarea/package.json +5 -5
  219. package/bpk-component-textarea/src/BpkTextarea.js +1 -1
  220. package/bpk-component-theme-toggle/package.json +6 -6
  221. package/bpk-component-theme-toggle/src/BpkThemeToggle.js +3 -3
  222. package/bpk-component-theme-toggle/src/updateOnThemeChange.js +1 -1
  223. package/bpk-component-ticket/package.json +5 -5
  224. package/bpk-component-ticket/src/BpkTicket.js +1 -1
  225. package/bpk-component-tooltip/package.json +5 -5
  226. package/bpk-component-tooltip/src/BpkTooltip.js +1 -1
  227. package/bpk-component-tooltip/src/BpkTooltipPortal.js +1 -1
  228. package/bpk-react-utils/index.js +1 -2
  229. package/bpk-react-utils/package.json +2 -3
  230. package/bpk-react-utils/src/withDefaultProps.js +2 -1
  231. package/{bpk-component-chip/examples.module.scss → bpk-react-utils/src/wrapDisplayName.js} +11 -13
  232. package/bpk-scrim-utils/package.json +3 -3
  233. package/bpk-scrim-utils/src/BpkScrim.js +1 -1
  234. package/bpk-scrim-utils/src/withScrim.js +1 -1
  235. package/bpk-theming/package.json +2 -2
  236. package/package.json +4 -5
  237. package/bpk-animate-height/examples.js +0 -67
  238. package/bpk-component-accordion/examples.js +0 -316
  239. package/bpk-component-aria-live/examples.js +0 -248
  240. package/bpk-component-aria-live/examples.module.css +0 -18
  241. package/bpk-component-aria-live/examples.module.scss +0 -65
  242. package/bpk-component-autosuggest/examples.js +0 -201
  243. package/bpk-component-badge/BadgeLayout.js +0 -54
  244. package/bpk-component-badge/BpkBadgeLayout.module.css +0 -18
  245. package/bpk-component-badge/BpkBadgeLayout.module.scss +0 -36
  246. package/bpk-component-badge/examples.js +0 -207
  247. package/bpk-component-banner-alert/examples.js +0 -253
  248. package/bpk-component-banner-alert/examples.module.css +0 -18
  249. package/bpk-component-banner-alert/examples.module.scss +0 -27
  250. package/bpk-component-barchart/examples.js +0 -334
  251. package/bpk-component-barchart/hocs.js +0 -67
  252. package/bpk-component-barchart/stories.module.css +0 -18
  253. package/bpk-component-barchart/stories.module.scss +0 -37
  254. package/bpk-component-blockquote/examples.js +0 -33
  255. package/bpk-component-breadcrumb/examples.js +0 -57
  256. package/bpk-component-breakpoint/examples.js +0 -72
  257. package/bpk-component-breakpoint/examples.module.css +0 -18
  258. package/bpk-component-breakpoint/examples.module.scss +0 -36
  259. package/bpk-component-button/BpkButtonStory.module.css +0 -18
  260. package/bpk-component-button/examples.js +0 -213
  261. package/bpk-component-calendar/coloured-calendar-example.js +0 -106
  262. package/bpk-component-calendar/examples-components.js +0 -299
  263. package/bpk-component-calendar/examples.js +0 -369
  264. package/bpk-component-card/examples.js +0 -91
  265. package/bpk-component-checkbox/examples.js +0 -197
  266. package/bpk-component-chip/examples.js +0 -339
  267. package/bpk-component-chip/examples.module.css +0 -18
  268. package/bpk-component-code/examples.js +0 -56
  269. package/bpk-component-content-container/examples.js +0 -307
  270. package/bpk-component-datatable/examples.js +0 -138
  271. package/bpk-component-datepicker/examples.js +0 -660
  272. package/bpk-component-description-list/examples.js +0 -49
  273. package/bpk-component-dialog/examples.js +0 -182
  274. package/bpk-component-dialog/examples.module.css +0 -18
  275. package/bpk-component-dialog/stories.css +0 -1
  276. package/bpk-component-drawer/examples.js +0 -271
  277. package/bpk-component-drawer/examples.module.css +0 -18
  278. package/bpk-component-drawer/examples.module.scss +0 -34
  279. package/bpk-component-fieldset/examples.js +0 -527
  280. package/bpk-component-fieldset/examples.module.css +0 -18
  281. package/bpk-component-flare/examples.js +0 -158
  282. package/bpk-component-flare/examples.module.css +0 -18
  283. package/bpk-component-flare/examples.module.scss +0 -66
  284. package/bpk-component-form-validation/examples.js +0 -171
  285. package/bpk-component-form-validation/examples.module.css +0 -18
  286. package/bpk-component-form-validation/examples.module.scss +0 -39
  287. package/bpk-component-grid/examples.js +0 -796
  288. package/bpk-component-grid-toggle/examples.js +0 -25
  289. package/bpk-component-horizontal-nav/examples.js +0 -189
  290. package/bpk-component-horizontal-nav/examples.module.css +0 -18
  291. package/bpk-component-horizontal-nav/examples.module.scss +0 -48
  292. package/bpk-component-icon/examples.js +0 -152
  293. package/bpk-component-image/examples.js +0 -216
  294. package/bpk-component-infinite-scroll/examples.js +0 -279
  295. package/bpk-component-infinite-scroll/examples.module.css +0 -18
  296. package/bpk-component-infinite-scroll/examples.module.scss +0 -46
  297. package/bpk-component-input/examples.js +0 -490
  298. package/bpk-component-input/examples.module.css +0 -18
  299. package/bpk-component-input/examples.module.scss +0 -57
  300. package/bpk-component-label/examples.js +0 -67
  301. package/bpk-component-link/examples.js +0 -110
  302. package/bpk-component-list/examples.js +0 -56
  303. package/bpk-component-loading-button/examples.js +0 -660
  304. package/bpk-component-map/examples.js +0 -305
  305. package/bpk-component-mobile-scroll-container/examples.js +0 -76
  306. package/bpk-component-mobile-scroll-container/examples.module.css +0 -18
  307. package/bpk-component-mobile-scroll-container/examples.module.scss +0 -46
  308. package/bpk-component-modal/examples.js +0 -304
  309. package/bpk-component-modal/examples.module.css +0 -18
  310. package/bpk-component-modal/examples.module.scss +0 -35
  311. package/bpk-component-navigation-bar/AirlineLogo.js +0 -42
  312. package/bpk-component-navigation-bar/AirlineLogo.module.css +0 -18
  313. package/bpk-component-navigation-bar/AirlineLogo.module.scss +0 -27
  314. package/bpk-component-navigation-bar/examples.js +0 -193
  315. package/bpk-component-navigation-bar/examples.module.css +0 -18
  316. package/bpk-component-navigation-bar/examples.module.scss +0 -32
  317. package/bpk-component-navigation-stack/examples.js +0 -73
  318. package/bpk-component-navigation-stack/examples.module.css +0 -18
  319. package/bpk-component-navigation-stack/examples.module.scss +0 -43
  320. package/bpk-component-navigation-stack/stories-components.js +0 -202
  321. package/bpk-component-nudger/BpkNudgerStory.module.css +0 -18
  322. package/bpk-component-nudger/examples.js +0 -204
  323. package/bpk-component-overlay/examples.js +0 -163
  324. package/bpk-component-overlay/examples.module.css +0 -18
  325. package/bpk-component-overlay/examples.module.scss +0 -38
  326. package/bpk-component-pagination/examples.js +0 -93
  327. package/bpk-component-panel/examples.js +0 -63
  328. package/bpk-component-phone-input/examples.js +0 -181
  329. package/bpk-component-popover/examples.js +0 -267
  330. package/bpk-component-popover/examples.module.css +0 -18
  331. package/bpk-component-popover/examples.module.scss +0 -33
  332. package/bpk-component-progress/examples.js +0 -130
  333. package/bpk-component-progress/examples.module.css +0 -18
  334. package/bpk-component-progress/examples.module.scss +0 -29
  335. package/bpk-component-radio/examples.js +0 -126
  336. package/bpk-component-rating/examples.js +0 -373
  337. package/bpk-component-rating/examples.module.css +0 -18
  338. package/bpk-component-scrollable-calendar/examples.js +0 -383
  339. package/bpk-component-section-list/examples.js +0 -55
  340. package/bpk-component-select/examples.js +0 -274
  341. package/bpk-component-skip-link/examples.js +0 -40
  342. package/bpk-component-slider/examples.js +0 -122
  343. package/bpk-component-spinner/SpinnerLayout.js +0 -56
  344. package/bpk-component-spinner/SpinnerLayout.module.css +0 -18
  345. package/bpk-component-spinner/SpinnerLayout.module.scss +0 -36
  346. package/bpk-component-spinner/examples.js +0 -56
  347. package/bpk-component-star-rating/examples.js +0 -195
  348. package/bpk-component-switch/examples.js +0 -40
  349. package/bpk-component-table/examples.js +0 -97
  350. package/bpk-component-text/examples.js +0 -135
  351. package/bpk-component-text/examples.module.css +0 -18
  352. package/bpk-component-text/examples.module.scss +0 -25
  353. package/bpk-component-textarea/examples.js +0 -116
  354. package/bpk-component-ticket/examples.js +0 -203
  355. package/bpk-component-ticket/examples.module.css +0 -18
  356. package/bpk-component-ticket/examples.module.scss +0 -79
  357. package/bpk-component-tooltip/examples.js +0 -181
@@ -1,18 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-heading{margin-bottom:.75rem}.bpk-barchart-custom-scrollers{background:#d0eeec}.bpk-barchart-custom-scrollers--leading::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;left:0}.bpk-barchart-custom-scrollers--trailing::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #d0eeec, rgba(208,238,236,0));pointer-events:none;right:0}
@@ -1,37 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- @import '~bpk-mixins';
20
-
21
- .bpk-heading {
22
- margin-bottom: $bpk-spacing-sm;
23
- }
24
-
25
- $custom-color: $bpk-color-sagano;
26
-
27
- .bpk-barchart-custom-scrollers {
28
- background: $custom-color;
29
-
30
- &--leading {
31
- @include bpk-scroll-indicator-left($custom-color);
32
- }
33
-
34
- &--trailing {
35
- @include bpk-scroll-indicator-right($custom-color);
36
- }
37
- }
@@ -1,33 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- import React from 'react';
20
-
21
- import BpkBlockquote from './index';
22
-
23
- const textContent = `
24
- It's your world and we'll help you explore it.
25
- Find the best prices across millions of flights, hotels and car hire options to create your perfect trip.`;
26
-
27
- const DefaultExample = () => <BpkBlockquote>{textContent}</BpkBlockquote>;
28
-
29
- const ExtraSpaceExample = () => (
30
- <BpkBlockquote extraSpace>{textContent}</BpkBlockquote>
31
- );
32
-
33
- export { DefaultExample, ExtraSpaceExample };
@@ -1,57 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- /* @flow strict */
20
-
21
- import React from 'react';
22
-
23
- import BpkBreadcrumb, { BpkBreadcrumbItem } from './index';
24
-
25
- const DefaultExample = () => (
26
- <BpkBreadcrumb label="Default breadcrumb">
27
- <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
28
- <BpkBreadcrumbItem href="/page-1">Page 1</BpkBreadcrumbItem>
29
- <BpkBreadcrumbItem active>Page 2</BpkBreadcrumbItem>
30
- </BpkBreadcrumb>
31
- );
32
-
33
- const ExtremeExample = () => (
34
- <BpkBreadcrumb label="Extreme breadcrumb">
35
- <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
36
- <BpkBreadcrumbItem href="/page-1" id="123" linkProps={{ target: '_blank' }}>
37
- Page 1
38
- </BpkBreadcrumbItem>
39
- <BpkBreadcrumbItem href="/page-2">Page 2</BpkBreadcrumbItem>
40
- <BpkBreadcrumbItem href="/page-3">Page 3</BpkBreadcrumbItem>
41
- <BpkBreadcrumbItem href="/page-4">Page 4</BpkBreadcrumbItem>
42
- <BpkBreadcrumbItem href="/page-5">Page 5</BpkBreadcrumbItem>
43
- <BpkBreadcrumbItem href="/page-6">Page 6</BpkBreadcrumbItem>
44
- <BpkBreadcrumbItem href="/page-7">Page 7</BpkBreadcrumbItem>
45
- <BpkBreadcrumbItem href="/page-8">Page 8</BpkBreadcrumbItem>
46
- <BpkBreadcrumbItem href="/page-9">Page 9</BpkBreadcrumbItem>
47
- <BpkBreadcrumbItem href="/page-10">Page 10</BpkBreadcrumbItem>
48
- <BpkBreadcrumbItem href="/page-11">Page 11</BpkBreadcrumbItem>
49
- <BpkBreadcrumbItem href="/page-12">Page 12</BpkBreadcrumbItem>
50
- <BpkBreadcrumbItem href="/page-13">Page 13</BpkBreadcrumbItem>
51
- <BpkBreadcrumbItem href="/page-14">Page 14</BpkBreadcrumbItem>
52
- <BpkBreadcrumbItem href="/page-15">Page 15</BpkBreadcrumbItem>
53
- <BpkBreadcrumbItem active>Page 16</BpkBreadcrumbItem>
54
- </BpkBreadcrumb>
55
- );
56
-
57
- export { DefaultExample, ExtremeExample };
@@ -1,72 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- /* @flow strict */
20
-
21
- import React, { type Node } from 'react';
22
- import { cssModules } from '../bpk-react-utils';
23
-
24
- import STYLES from './examples.module.scss';
25
-
26
- import BpkBreakpoint, { BREAKPOINTS } from './index';
27
-
28
- const getClassName = cssModules(STYLES);
29
-
30
- const MediaQueryStatus = (props: { children: Node, isActive: boolean }) => {
31
- const { children, isActive } = props;
32
-
33
- const className = getClassName(
34
- isActive
35
- ? 'bpk-breakpoints-demo--active'
36
- : 'bpk-breakpoints-demo--inactive',
37
- );
38
-
39
- return <div className={className}>{children}</div>;
40
- };
41
-
42
- const DefaultExample = () => (
43
- <div className={getClassName('bpk-breakpoints-demo')}>
44
- <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
45
- {(isActive) => (
46
- <MediaQueryStatus isActive={isActive}>MOBILE</MediaQueryStatus>
47
- )}
48
- </BpkBreakpoint>
49
- <BpkBreakpoint query={BREAKPOINTS.TABLET}>
50
- {(isActive) => (
51
- <MediaQueryStatus isActive={isActive}>TABLET</MediaQueryStatus>
52
- )}
53
- </BpkBreakpoint>
54
- <BpkBreakpoint query={BREAKPOINTS.TABLET_ONLY}>
55
- {(isActive) => (
56
- <MediaQueryStatus isActive={isActive}>TABLET ONLY</MediaQueryStatus>
57
- )}
58
- </BpkBreakpoint>
59
- <BpkBreakpoint query={BREAKPOINTS.ABOVE_MOBILE}>
60
- {(isActive) => (
61
- <MediaQueryStatus isActive={isActive}>ABOVE MOBILE</MediaQueryStatus>
62
- )}
63
- </BpkBreakpoint>
64
- <BpkBreakpoint query={BREAKPOINTS.ABOVE_TABLET}>
65
- {(isActive) => (
66
- <MediaQueryStatus isActive={isActive}>ABOVE TABLET</MediaQueryStatus>
67
- )}
68
- </BpkBreakpoint>
69
- </div>
70
- );
71
-
72
- export default DefaultExample;
@@ -1,18 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-breakpoints-demo{border-radius:.25rem;overflow:hidden}.bpk-breakpoints-demo--active{padding:1.5rem;color:#fff;background-color:#0770e3;background-color:var(--bpk-primary-color, #0770e3)}.bpk-breakpoints-demo--inactive{padding:1.5rem;background-color:#dddde5}
@@ -1,36 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- @import '~bpk-mixins/index';
20
-
21
- .bpk-breakpoints-demo {
22
- border-radius: $bpk-border-radius-xs;
23
- overflow: hidden;
24
-
25
- &--active {
26
- padding: $bpk-spacing-base;
27
- color: $bpk-color-white;
28
-
29
- @include bpk-apply-primary-color-to(background-color);
30
- }
31
-
32
- &--inactive {
33
- padding: $bpk-spacing-base;
34
- background-color: $bpk-color-sky-gray-tint-06;
35
- }
36
- }
@@ -1,18 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-button-story-wrapper{padding:.375rem 0}
@@ -1,213 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- /* @flow strict */
20
-
21
- import React from 'react';
22
- import { action, BpkDarkExampleWrapper } from '../bpk-storybook-utils';
23
-
24
- import {
25
- withButtonAlignment,
26
- withLargeButtonAlignment,
27
- withRtlSupport,
28
- } from '../bpk-component-icon';
29
- import SmallLongArrowRightIcon from '../bpk-component-icon/sm/long-arrow-right';
30
- import LargeLongArrowRightIcon from '../bpk-component-icon/lg/long-arrow-right';
31
-
32
- import STYLES from './BpkButtonStory.module.scss';
33
-
34
- import BpkButton, {
35
- BpkButtonPrimary,
36
- BpkButtonSecondary,
37
- BpkButtonDestructive,
38
- BpkButtonLink,
39
- BpkButtonFeatured,
40
- BpkButtonOutline,
41
- } from './index';
42
-
43
- const AlignedSmallLongArrowRightIcon = withButtonAlignment(
44
- withRtlSupport(SmallLongArrowRightIcon),
45
- );
46
- const AlignedLargeLongArrowRightIcon = withLargeButtonAlignment(
47
- withRtlSupport(LargeLongArrowRightIcon),
48
- );
49
-
50
- const cssModules =
51
- (styles = {}) =>
52
- (className) =>
53
- styles[className] ? styles[className] : className;
54
-
55
- const getClassName = cssModules(STYLES);
56
-
57
- const ButtonStory = ({
58
- className,
59
- wrapped,
60
- ...rest
61
- }: {
62
- className: ?string,
63
- wrapped: Object,
64
- }) => {
65
- const Wrapped = wrapped;
66
- return (
67
- <div
68
- className={[getClassName('bpk-button-story-wrapper'), className].join(
69
- ' ',
70
- )}
71
- >
72
- &nbsp;
73
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
74
- <Wrapped onClick={action('Button clicked')} {...rest}>
75
- Button
76
- </Wrapped>
77
- &nbsp;
78
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
79
- <Wrapped onClick={action('Button clicked')} {...rest}>
80
- Button <AlignedSmallLongArrowRightIcon />
81
- </Wrapped>
82
- &nbsp;
83
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
84
- <Wrapped disabled onClick={action('THIS SHOULD NEVER HAPPEN')} {...rest}>
85
- Disabled
86
- </Wrapped>
87
- &nbsp;
88
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
89
- <Wrapped large onClick={action('Button clicked')} {...rest}>
90
- Button
91
- </Wrapped>
92
- &nbsp;
93
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
94
- <Wrapped large onClick={action('Button clicked')} {...rest}>
95
- Button <AlignedLargeLongArrowRightIcon />
96
- </Wrapped>
97
- &nbsp;
98
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
99
- <Wrapped
100
- large
101
- disabled
102
- onClick={action('THIS SHOULD NEVER HAPPEN')}
103
- {...rest}
104
- >
105
- Disabled
106
- </Wrapped>
107
- &nbsp;
108
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
109
- <Wrapped iconOnly onClick={action('Button clicked')} {...rest}>
110
- <AlignedSmallLongArrowRightIcon />
111
- </Wrapped>
112
- &nbsp;
113
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
114
- <Wrapped iconOnly large onClick={action('Button clicked')} {...rest}>
115
- <AlignedLargeLongArrowRightIcon />
116
- </Wrapped>
117
- &nbsp;
118
- </div>
119
- );
120
- };
121
-
122
- ButtonStory.defaultProps = { className: null };
123
-
124
- const PrimaryExample = () => <ButtonStory primary wrapped={BpkButton} />;
125
- const SecondaryExample = () => <ButtonStory secondary wrapped={BpkButton} />;
126
- const DestructiveExample = () => (
127
- <ButtonStory destructive wrapped={BpkButton} />
128
- );
129
- const LinkExample = () => <ButtonStory link wrapped={BpkButton} />;
130
- const FeaturedExample = () => <ButtonStory featured wrapped={BpkButton} />;
131
- const OutlineExample = () => (
132
- <BpkDarkExampleWrapper>
133
- <ButtonStory
134
- outline
135
- wrapped={BpkButton}
136
- className={getClassName('bpk-outline-layout')}
137
- />
138
- </BpkDarkExampleWrapper>
139
- );
140
-
141
- const ComponentButtonPrimaryExample = (props: {}) => (
142
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
143
- <ButtonStory wrapped={BpkButtonPrimary} {...props} />
144
- );
145
- const ComponentButtonSecondaryExample = (props: {}) => (
146
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
147
- <ButtonStory wrapped={BpkButtonSecondary} {...props} />
148
- );
149
- const ComponentButtonDestructiveExample = (props: {}) => (
150
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
151
- <ButtonStory wrapped={BpkButtonDestructive} {...props} />
152
- );
153
- const ComponentButtonLinkExample = (props: {}) => (
154
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
155
- <ButtonStory wrapped={BpkButtonLink} {...props} />
156
- );
157
- const ComponentButtonLinkWithPaddingExample = (props: {}) => (
158
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
159
- <ButtonStory
160
- wrapped={(wrappedProps) => <BpkButtonLink padded {...wrappedProps} />}
161
- {...props}
162
- />
163
- );
164
- const ComponentButtonFeaturedExample = (props: {}) => (
165
- /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */
166
- <ButtonStory wrapped={BpkButtonFeatured} {...props} />
167
- );
168
- const ComponentButtonOutlineExample = (props: {}) => (
169
- <BpkDarkExampleWrapper>
170
- {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
171
- <ButtonStory wrapped={BpkButtonOutline} {...props} />
172
- </BpkDarkExampleWrapper>
173
- );
174
-
175
- const MixedExample = () => (
176
- <>
177
- <ComponentButtonPrimaryExample />
178
- <ComponentButtonSecondaryExample />
179
- <ComponentButtonDestructiveExample />
180
- <ComponentButtonLinkExample />
181
- <ComponentButtonFeaturedExample />
182
- <ComponentButtonOutlineExample />
183
- </>
184
- );
185
-
186
- const AnchorTagsExample = () => (
187
- <>
188
- <ComponentButtonPrimaryExample href="#" />
189
- <ComponentButtonSecondaryExample href="#" />
190
- <ComponentButtonDestructiveExample href="#" />
191
- <ComponentButtonLinkExample href="#" />
192
- <ComponentButtonFeaturedExample href="#" />
193
- <ComponentButtonOutlineExample href="#" />
194
- </>
195
- );
196
-
197
- export {
198
- PrimaryExample,
199
- SecondaryExample,
200
- DestructiveExample,
201
- LinkExample,
202
- FeaturedExample,
203
- OutlineExample,
204
- ComponentButtonPrimaryExample,
205
- ComponentButtonSecondaryExample,
206
- ComponentButtonDestructiveExample,
207
- ComponentButtonLinkExample,
208
- ComponentButtonLinkWithPaddingExample,
209
- ComponentButtonFeaturedExample,
210
- ComponentButtonOutlineExample,
211
- MixedExample,
212
- AnchorTagsExample,
213
- };
@@ -1,106 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- /* eslint-disable react/prop-types */
20
-
21
- import React, { Component } from 'react';
22
- import PropTypes from 'prop-types';
23
- import { action } from '../bpk-storybook-utils';
24
-
25
- import {
26
- BpkCalendarGrid,
27
- BpkCalendarGridHeader,
28
- BpkCalendarDate,
29
- CELL_TYPES,
30
- composeCalendar,
31
- withCalendarState,
32
- CustomPropTypes,
33
- CALENDAR_SELECTION_TYPE,
34
- } from './index';
35
-
36
- const prices = [
37
- 125, 56, 75, 57, 78, 92, 133, 90, 148, 80, 122, 67, 70, 123, 77, 66, 64, 56,
38
- 105, 138, 52, 70, 106, 77, 66, 64, 56, 105, 138, 52, 70, 106,
39
- ];
40
-
41
- const MyCalendarDate = (props) => {
42
- const day = props.date.getDate();
43
- const price = prices[day - 1];
44
-
45
- let cell = CELL_TYPES.default;
46
- if (price >= 100) {
47
- cell = CELL_TYPES.negative;
48
- } else if (price >= 75) {
49
- cell = CELL_TYPES.neutral;
50
- } else if (price < 60 && price <= 74) {
51
- cell = CELL_TYPES.positive;
52
- }
53
-
54
- return <BpkCalendarDate cellType={cell} price={price} {...props} />;
55
- };
56
-
57
- const StatefulCalendar = withCalendarState(
58
- composeCalendar(null, BpkCalendarGridHeader, BpkCalendarGrid, MyCalendarDate),
59
- );
60
-
61
- class ColoredCalendar extends Component {
62
- constructor(props) {
63
- super(props);
64
-
65
- this.state = {
66
- selectionConfiguration: {
67
- type: CALENDAR_SELECTION_TYPE.single,
68
- date: new Date(),
69
- },
70
- };
71
- }
72
-
73
- render() {
74
- return (
75
- <StatefulCalendar
76
- {...this.props}
77
- onDateSelect={(date) => {
78
- this.setState({
79
- selectionConfiguration: {
80
- type: this.props.selectionConfiguration.type,
81
- date,
82
- },
83
- });
84
- action('Selected day')(date);
85
- }}
86
- selectionConfiguration={this.state.selectionConfiguration}
87
- onMonthChange={action('Changed month')}
88
- />
89
- );
90
- }
91
- }
92
-
93
- ColoredCalendar.propTypes = {
94
- selectTodaysDate: PropTypes.bool,
95
- selectionConfiguration: CustomPropTypes.SelectionConfiguration,
96
- };
97
-
98
- ColoredCalendar.defaultProps = {
99
- selectTodaysDate: true,
100
- selectionConfiguration: {
101
- type: CALENDAR_SELECTION_TYPE.single,
102
- date: new Date(),
103
- },
104
- };
105
-
106
- export default ColoredCalendar;