@lifesg/react-design-system 3.5.0-canary.4 → 3.5.0-canary.6

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 (36) hide show
  1. package/cjs/data-table/data-table.js +1 -1
  2. package/cjs/data-table/data-table.js.map +1 -1
  3. package/cjs/data-table/data-table.styles.js +14 -12
  4. package/cjs/data-table/data-table.styles.js.map +1 -1
  5. package/cjs/error-display/error-display-data.js +1 -1
  6. package/cjs/error-display/error-display-data.js.map +1 -1
  7. package/cjs/navbar/navbar-items.js +1 -1
  8. package/cjs/navbar/navbar-items.js.map +1 -1
  9. package/cjs/navbar/navbar-items.styles.js +11 -7
  10. package/cjs/navbar/navbar-items.styles.js.map +1 -1
  11. package/cjs/toggle/toggle.js +1 -1
  12. package/cjs/toggle/toggle.js.map +1 -1
  13. package/cjs/toggle/toggle.styles.js +42 -20
  14. package/cjs/toggle/toggle.styles.js.map +1 -1
  15. package/codemods/data.ts +1 -33
  16. package/codemods/index.ts +55 -140
  17. package/data-table/data-table.d.ts +1 -1
  18. package/data-table/data-table.js +1 -1
  19. package/data-table/data-table.js.map +1 -1
  20. package/data-table/data-table.styles.d.ts +1 -0
  21. package/data-table/data-table.styles.js +22 -20
  22. package/data-table/data-table.styles.js.map +1 -1
  23. package/data-table/types.d.ts +9 -0
  24. package/error-display/error-display-data.js +1 -1
  25. package/error-display/error-display-data.js.map +1 -1
  26. package/navbar/navbar-items.js +1 -1
  27. package/navbar/navbar-items.js.map +1 -1
  28. package/navbar/navbar-items.styles.d.ts +20 -4
  29. package/navbar/navbar-items.styles.js +13 -9
  30. package/navbar/navbar-items.styles.js.map +1 -1
  31. package/package.json +1 -1
  32. package/toggle/toggle.js +1 -1
  33. package/toggle/toggle.js.map +1 -1
  34. package/toggle/toggle.styles.d.ts +1 -0
  35. package/toggle/toggle.styles.js +65 -43
  36. package/toggle/toggle.styles.js.map +1 -1
package/error-display/error-display-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"error-display-data.js","sources":["../../src/error-display/error-display-data.tsx"],"sourcesContent":["import { ResourceScheme, ThemeSpec } from \"../theme/types\";\nimport { renderDescriptionWithProps } from \"./error-display-helper-comp\";\nimport { ErrorDisplayHelper } from \"./helper\";\nimport {\n ErrorDisplayType,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\nconst { imgAttributeHelper } = ErrorDisplayHelper;\n\n// =============================================================================\n// IMAGE PATHS\n// =============================================================================\n\nconst ImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png\",\n width: 400,\n height: 281,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst BsgImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png\",\n width: 400,\n height: 215,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png\",\n width: 400,\n height: 254,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png\",\n width: 400,\n height: 319,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png\",\n width: 400,\n height: 330,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png\",\n width: 400,\n height: 215,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png\",\n width: 400,\n height: 191,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png\",\n width: 400,\n height: 261,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png\",\n width: 400,\n height: 276,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png\",\n width: 400,\n height: 290,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CCubeImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst MyLegacyImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> =\n {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n };\n\n// =============================================================================\n// ERROR DISPLAY ATTRIBUTES\n// =============================================================================\n\ninterface ErrorDisplayDataAttrs {\n img?: React.ImgHTMLAttributes<HTMLImageElement> | undefined;\n imgSrc?: string | undefined;\n title?: string | undefined;\n description?: string | JSX.Element | undefined;\n renderDescription?: (\n attrs?: MaintenanceAdditionalAttributes | InactivityAdditionalAttributes\n ) => JSX.Element | string | undefined;\n}\n\nexport const generateErrorDisplayData = (\n ImgPathsObject: Record<string, ErrorDisplayHelper.ImagePathAttributes>,\n theme?: ThemeSpec\n) =>\n new Map<ErrorDisplayType, ErrorDisplayDataAttrs>([\n [\n \"400\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"400\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"403\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"403\"], theme),\n title: \"Error loading page\",\n description:\n \"You may not have permission to view this page. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"404\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"404\"], theme),\n title: \"Page not found\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"408\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"408\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"500\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"500\"], theme),\n title: \"Something went wrong\",\n description:\n \"We're working on a fix for the problem. Please try again later.\",\n },\n ],\n [\n \"502\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"502\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"503\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n },\n ],\n [\n \"504\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"504\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"confirmation\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"confirmation\"], theme),\n title: \"Leave and lose changes?\",\n description:\n \"You have unsaved changes. If you leave this page, you will lose the changes you’ve made.\",\n },\n ],\n [\n \"link-error\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"link-error\"], theme),\n title: \"Link has expired\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired.\",\n },\n ],\n [\n \"logout\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"logout\"], theme),\n title: \"You’ve been logged out\",\n description:\n \"It looks like you’ve left, so we logged you out to protect your privacy.\",\n },\n ],\n [\n \"insufficient-credits\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"insufficient-credits\"],\n theme\n ),\n title: \"Insufficient credits\",\n description:\n \"You do not have enough credits to make this transaction.\",\n },\n ],\n [\n \"inactivity\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"inactivity\"], theme),\n title: \"Are you still there?\",\n description:\n \"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\\n\\nIf you wish to stay on this page, let us know now.\",\n renderDescription: renderDescriptionWithProps(\"inactivity\"),\n },\n ],\n [\n \"maintenance\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n renderDescription: renderDescriptionWithProps(\"maintenance\"),\n },\n ],\n [\n \"no-item-found\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"no-item-found\"], theme),\n title: \"No results found\",\n description:\n \"Try adjusting your search or filters to find what you’re looking for.\",\n },\n ],\n [\n \"payment-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"payment-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful payment\",\n description: \"Your payment was unsuccessful. Please try again.\",\n },\n ],\n [\n \"transfer-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"transfer-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful transfer\",\n description:\n \"Your transfer was unsuccessful. Please try again.\",\n },\n ],\n [\n \"unsupported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser not supported\",\n description:\n \"Download the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"partially-supported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser version not supported\",\n description:\n \"Update to the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"warning\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"warning\"], theme),\n title: \"Are you sure?\",\n description: \"You will lose your progress.\",\n },\n ],\n ]);\n\nexport const getErrorDisplayData = (\n type: ErrorDisplayType,\n resourceScheme: ResourceScheme,\n theme?: ThemeSpec\n) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return generateErrorDisplayData(BsgImgPaths, theme).get(type);\n case \"ccube\":\n return generateErrorDisplayData(CCubeImgPaths, theme).get(type);\n case \"mylegacy\":\n case \"smgs\":\n return generateErrorDisplayData(MyLegacyImgPaths, theme).get(type);\n default:\n return generateErrorDisplayData(ImgPaths, theme).get(type);\n }\n};\n"],"names":["imgAttributeHelper","ErrorDisplayHelper","ImgPaths","base","md","lg","width","height","confirmation","inactivity","logout","warning","BsgImgPaths","CCubeImgPaths","Object","assign","MyLegacyImgPaths","generateErrorDisplayData","ImgPathsObject","theme","Map","img","title","description","renderDescription","renderDescriptionWithProps","getErrorDisplayData","type","resourceScheme","get"],"mappings":"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"}
1
+ {"version":3,"file":"error-display-data.js","sources":["../../src/error-display/error-display-data.tsx"],"sourcesContent":["import { ResourceScheme, ThemeSpec } from \"../theme/types\";\nimport { renderDescriptionWithProps } from \"./error-display-helper-comp\";\nimport { ErrorDisplayHelper } from \"./helper\";\nimport {\n ErrorDisplayType,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\nconst { imgAttributeHelper } = ErrorDisplayHelper;\n\n// =============================================================================\n// IMAGE PATHS\n// =============================================================================\n\nconst ImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/payment-unsuccessful@3x.png\",\n width: 400,\n height: 281,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst BsgImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/400@3x.png\",\n width: 400,\n height: 215,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/403@3x.png\",\n width: 400,\n height: 254,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/404@3x.png\",\n width: 400,\n height: 319,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/408@3x.png\",\n width: 400,\n height: 330,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/502@3x.png\",\n width: 400,\n height: 215,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/503@3x.png\",\n width: 400,\n height: 191,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/504@3x.png\",\n width: 400,\n height: 261,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"insufficient-credits\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/insuffcient-credit@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/inactivity@3x.png\",\n width: 400,\n height: 276,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/logout@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/no-item-found@3x.png\",\n width: 400,\n height: 290,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"transfer-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/transfer-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/generic-error@3x.png\",\n width: 400,\n height: 232,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/bsg/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CareerCompassImgPaths: Record<\n string,\n ErrorDisplayHelper.ImagePathAttributes\n> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/403@3x.png\",\n width: 400,\n height: 284,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/503@3x.png\",\n width: 400,\n height: 220,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/504@3x.png\",\n width: 400,\n height: 220,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/log-out@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/careercompass/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst CCubeImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> = {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n \"unsupported-browser\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/ccube/warning@3x.png\",\n width: 400,\n height: 280,\n },\n};\n\nconst MyLegacyImgPaths: Record<string, ErrorDisplayHelper.ImagePathAttributes> =\n {\n ...ImgPaths,\n \"400\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/400@3x.png\",\n width: 400,\n height: 280,\n },\n \"403\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/403@3x.png\",\n width: 400,\n height: 280,\n },\n \"404\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/404@3x.png\",\n width: 400,\n height: 280,\n },\n \"408\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/408@3x.png\",\n width: 400,\n height: 280,\n },\n \"500\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/generic-error@3x.png\",\n width: 400,\n height: 280,\n },\n \"502\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/502@3x.png\",\n width: 400,\n height: 280,\n },\n \"503\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/503@3x.png\",\n width: 400,\n height: 280,\n },\n \"504\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/504@3x.png\",\n width: 400,\n height: 280,\n },\n confirmation: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/confirmation@3x.png\",\n width: 400,\n height: 280,\n },\n inactivity: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/inactivity@3x.png\",\n width: 400,\n height: 280,\n },\n \"link-error\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/link-error@3x.png\",\n width: 400,\n height: 280,\n },\n logout: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/logout@3x.png\",\n width: 400,\n height: 280,\n },\n warning: {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/warning@3x.png\",\n width: 400,\n height: 280,\n },\n \"payment-unsuccessful\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/payment-unsuccessful@3x.png\",\n width: 400,\n height: 280,\n },\n \"no-item-found\": {\n base: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found.png\",\n md: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@2x.png\",\n lg: \"https://assets.life.gov.sg/react-design-system/img/error/mylegacy/no-item-found@3x.png\",\n width: 400,\n height: 280,\n },\n };\n\n// =============================================================================\n// ERROR DISPLAY ATTRIBUTES\n// =============================================================================\n\ninterface ErrorDisplayDataAttrs {\n img?: React.ImgHTMLAttributes<HTMLImageElement> | undefined;\n imgSrc?: string | undefined;\n title?: string | undefined;\n description?: string | JSX.Element | undefined;\n renderDescription?: (\n attrs?: MaintenanceAdditionalAttributes | InactivityAdditionalAttributes\n ) => JSX.Element | string | undefined;\n}\n\nexport const generateErrorDisplayData = (\n ImgPathsObject: Record<string, ErrorDisplayHelper.ImagePathAttributes>,\n theme?: ThemeSpec\n) =>\n new Map<ErrorDisplayType, ErrorDisplayDataAttrs>([\n [\n \"400\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"400\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"403\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"403\"], theme),\n title: \"Error loading page\",\n description:\n \"You may not have permission to view this page. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"404\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"404\"], theme),\n title: \"Page not found\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know about this error.\",\n },\n ],\n [\n \"408\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"408\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"500\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"500\"], theme),\n title: \"Something went wrong\",\n description:\n \"We're working on a fix for the problem. Please try again later.\",\n },\n ],\n [\n \"502\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"502\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"503\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n },\n ],\n [\n \"504\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"504\"], theme),\n title: \"Something went wrong\",\n description:\n \"This could be a temporary problem, so please refresh the page or try again later.\",\n },\n ],\n [\n \"confirmation\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"confirmation\"], theme),\n title: \"Leave and lose changes?\",\n description:\n \"You have unsaved changes. If you leave this page, you will lose the changes you’ve made.\",\n },\n ],\n [\n \"link-error\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"link-error\"], theme),\n title: \"Link has expired\",\n description:\n \"If you entered or pasted the URL, check that it’s correct. If someone gave you this link, let them know it has expired.\",\n },\n ],\n [\n \"logout\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"logout\"], theme),\n title: \"You’ve been logged out\",\n description:\n \"It looks like you’ve left, so we logged you out to protect your privacy.\",\n },\n ],\n [\n \"insufficient-credits\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"insufficient-credits\"],\n theme\n ),\n title: \"Insufficient credits\",\n description:\n \"You do not have enough credits to make this transaction.\",\n },\n ],\n [\n \"inactivity\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"inactivity\"], theme),\n title: \"Are you still there?\",\n description:\n \"You’ve been inactive for a while. To protect your privacy, you’ll be logged out soon.\\n\\nIf you wish to stay on this page, let us know now.\",\n renderDescription: renderDescriptionWithProps(\"inactivity\"),\n },\n ],\n [\n \"maintenance\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"503\"], theme),\n title: \"Service under maintenance\",\n description:\n \"This service is currently unavailable. Please try again later.\",\n renderDescription: renderDescriptionWithProps(\"maintenance\"),\n },\n ],\n [\n \"no-item-found\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"no-item-found\"], theme),\n title: \"No results found\",\n description:\n \"Try adjusting your search or filters to find what you’re looking for.\",\n },\n ],\n [\n \"payment-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"payment-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful payment\",\n description: \"Your payment was unsuccessful. Please try again.\",\n },\n ],\n [\n \"transfer-unsuccessful\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"transfer-unsuccessful\"],\n theme\n ),\n title: \"Unsuccessful transfer\",\n description:\n \"Your transfer was unsuccessful. Please try again.\",\n },\n ],\n [\n \"unsupported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser not supported\",\n description:\n \"Download the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"partially-supported-browser\",\n {\n img: imgAttributeHelper(\n ImgPathsObject[\"unsupported-browser\"],\n theme\n ),\n title: \"Browser version not supported\",\n description:\n \"Update to the latest version of Chrome, Edge, Firefox or Safari.\",\n },\n ],\n [\n \"warning\",\n {\n img: imgAttributeHelper(ImgPathsObject[\"warning\"], theme),\n title: \"Are you sure?\",\n description: \"You will lose your progress.\",\n },\n ],\n ]);\n\nexport const getErrorDisplayData = (\n type: ErrorDisplayType,\n resourceScheme: ResourceScheme,\n theme?: ThemeSpec\n) => {\n switch (resourceScheme) {\n case \"bookingsg\":\n return generateErrorDisplayData(BsgImgPaths, theme).get(type);\n case \"careercompass\":\n return generateErrorDisplayData(CareerCompassImgPaths, theme).get(\n type\n );\n case \"ccube\":\n return generateErrorDisplayData(CCubeImgPaths, theme).get(type);\n case \"mylegacy\":\n case \"smgs\":\n return generateErrorDisplayData(MyLegacyImgPaths, theme).get(type);\n default:\n return generateErrorDisplayData(ImgPaths, theme).get(type);\n }\n};\n"],"names":["imgAttributeHelper","ErrorDisplayHelper","ImgPaths","base","md","lg","width","height","confirmation","inactivity","logout","warning","BsgImgPaths","CareerCompassImgPaths","Object","assign","CCubeImgPaths","MyLegacyImgPaths","generateErrorDisplayData","ImgPathsObject","theme","Map","img","title","description","renderDescription","renderDescriptionWithProps","getErrorDisplayData","type","resourceScheme","get"],"mappings":"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"}
package/navbar/navbar-items.js CHANGED
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as i,jsxs as t}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as c,Wrapper as u,LinkItem as p,Link as m,LinkLabel as h,LinkButton as g,LinkIndicator as b,LinkIconContainer as v,ExpandCollapseButton as f,ChevronIcon as $}from"./navbar-items.styles.js";const j=({items:j,selectedId:k,mobile:x=!1,hideNavBranding:C,hideLinkIndicator:M=!1,onItemClick:I})=>{const[O,_]=r(-1),[w,y]=r(!1),[L,P]=r(null),E=l(null),S=s();o((()=>{const e=e=>{E.current&&!E.current.contains(e.target)&&(y(!1),_(-1),P(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const B=(e,n)=>i=>{var t;if(i.stopPropagation(),x&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(O===n&&w);_(n),y(e)}I(i,e)},D=(e,n)=>{e.stopPropagation(),I(e,n),y(!1),_(-1)},A=(e,i)=>n(d.Content,{id:i,children:n(d.Section,{showDivider:!1,children:e.map(((e,i)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),F=e=>n(a,{items:e,onItemClick:D}),H=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),j=(e=>{var n;return e.id===k||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===k))})(r),I=x&&u&&O===l&&w,_=!x&&u&&L===l||I,y=null!==L?L===l:j,E=!M&&y,D=y?x?"bold":"semibold":"regular",H=x?`link__mobile-${l+1}`:`link__${l+1}`,N=()=>E?n(b,{"data-testid":`${H}-indicator`,$selected:y}):null;return n(p,{$hiddenBranding:C,children:u?(()=>{const e=`navbar-submenu-${S}-${r.id}`;return x?t(i,{children:[t(m,Object.assign({"data-testid":H,weight:D,$selected:y,underlineStyle:"none"},c,{"aria-current":j?"page":void 0,"aria-haspopup":"menu","aria-expanded":_,onClick:B(r,l)},a,{children:[n(h,{children:o}),N(),x&&u?n(v,{children:n(f,{"data-testid":`${H}-expand-collapse-button`,$selected:I,focusHighlight:!1,focusOutline:"browser","aria-label":I?"Collapse":"Expand",children:n($,{$selected:y})})}):null]})),I&&F(s)]}):n(d,{position:"bottom",customOffset:0,menuContent:A(s,e),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>P(l),onPopoverDismiss:()=>{P((e=>e===l?null:e))},children:t(g,Object.assign({type:"button",tabIndex:0,"data-testid":H,weight:D,$selected:y,"aria-haspopup":"menu","aria-expanded":_},a,{children:[n(h,{children:o}),N()]}))})})():t(m,Object.assign({tabIndex:0,"data-testid":H,weight:D,$selected:y,underlineStyle:"none"},c,{"aria-current":j?"page":void 0,onClick:B(r,l)},a,{children:[n(h,{children:o}),N()]}))},l)},N=()=>j.map(((e,i)=>{var t;return"component"===e.itemType?n("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):H(e,i)}));return j&&j.length>0?x?n(c,{ref:E,children:N()}):n(u,{ref:E,$alignLeft:C,children:N()}):n(i,{})};export{j as NavbarItems};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import{jsx as n,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as r,useRef as l,useEffect as o}from"react";import{Menu as d}from"../menu/menu.js";import{Menu as a}from"./menu.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as s}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{MobileWrapper as c,Wrapper as u,LinkItem as p,Link as m,LinkLabel as h,LinkButton as g,ChevronIconDesktop as b,LinkIndicator as v,LinkIconContainer as $,ExpandCollapseButton as f,ChevronIcon as j}from"./navbar-items.styles.js";const k=({items:k,selectedId:x,mobile:C=!1,hideNavBranding:M,hideLinkIndicator:I=!1,onItemClick:O})=>{const[_,w]=r(-1),[y,L]=r(!1),[P,E]=r(null),S=l(null),B=s();o((()=>{const e=e=>{S.current&&!S.current.contains(e.target)&&(L(!1),w(-1),E(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const D=(e,n)=>t=>{var i;if(t.stopPropagation(),C&&(null===(i=e.subMenu)||void 0===i?void 0:i.length)){const e=!(_===n&&y);w(n),L(e)}O(t,e)},A=(e,n)=>{e.stopPropagation(),O(e,n),L(!1),w(-1)},F=(e,t)=>n(d.Content,{id:t,children:n(d.Section,{showDivider:!1,children:e.map(((e,t)=>n(d.Link,{href:e.href,children:e.children},`${e.id}-${t}`)))})}),H=e=>n(a,{items:e,onItemClick:A}),N=(r,l)=>{const{children:o,options:a,subMenu:s}=r,c=e(r,["children","options","subMenu"]),u=!!(null==s?void 0:s.length),O=(e=>{var n;return e.id===x||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===x))})(r),w=C&&u&&_===l&&y,L=!C&&u&&P===l||w,S=null!==P?P===l:O,A=!I&&S,N=S?C?"bold":"semibold":"regular",T=C?`link__mobile-${l+1}`:`link__${l+1}`,q=()=>A?n(v,{"data-testid":`${T}-indicator`,$selected:S}):null;return n(p,{$hiddenBranding:M,children:u?(e=>{const p=`navbar-submenu-${B}-${r.id}`;return C?i(t,{children:[i(m,Object.assign({"data-testid":T,weight:N,$selected:S,underlineStyle:"none"},c,{"aria-current":O?"page":void 0,"aria-haspopup":"menu","aria-expanded":L,onClick:D(r,l)},a,{children:[n(h,{children:o}),q(),C&&u?n($,{children:n(f,{"data-testid":`${T}-expand-collapse-button`,$selected:S,$expanded:L,focusHighlight:!1,focusOutline:"browser","aria-label":L?"Collapse":"Expand",children:n(j,{$selected:S})})}):null]})),w&&H(s)]}):n(d,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:F(s,p),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>E(l),onPopoverDismiss:()=>{E((e=>e===l?null:e))},children:i(g,Object.assign({type:"button",tabIndex:0,"data-testid":T,weight:N,$selected:S,"aria-haspopup":"menu","aria-expanded":L},a,{children:[n(h,{children:o}),q(),n(b,{$selected:S,$expanded:L})]}))})})(l===k.length-1):i(m,Object.assign({tabIndex:0,"data-testid":T,weight:N,$selected:S,underlineStyle:"none"},c,{"aria-current":O?"page":void 0,onClick:D(r,l)},a,{children:[n(h,{children:o}),q()]}))},l)},T=()=>k.map(((e,t)=>{var i;return"component"===e.itemType?n("li",{children:null!==(i=e.children)&&void 0!==i?i:null},t):N(e,t)}));return k&&k.length>0?C?n(c,{ref:S,children:T()}):n(u,{ref:S,$alignLeft:M,children:T()}):n(t,{})};export{k as NavbarItems};
2
2
  //# sourceMappingURL=navbar-items.js.map
package/navbar/navbar-items.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string | undefined;\n /** toggle for mobile or desktop view */\n mobile?: boolean | undefined;\n hideNavBranding?: boolean | undefined;\n /** hide the selected LinkIndicator */\n hideLinkIndicator?: boolean | undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> | NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={isMobileExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isMobileExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = () => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position=\"bottom\"\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu ? renderLinkWithSubmenu() : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
1
+ {"version":3,"file":"navbar-items.js","sources":["../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n ChevronIcon,\n ChevronIconDesktop,\n ExpandCollapseButton,\n Link,\n LinkButton,\n LinkIconContainer,\n LinkIndicator,\n LinkItem,\n LinkLabel,\n MobileWrapper,\n Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n items: NavItemProps<T>[];\n selectedId?: string | undefined;\n /** toggle for mobile or desktop view */\n mobile?: boolean | undefined;\n hideNavBranding?: boolean | undefined;\n /** hide the selected LinkIndicator */\n hideLinkIndicator?: boolean | undefined;\n onItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemProps<T> | NavItemCommonProps<T>\n ) => void;\n}\n\nexport const NavbarItems = <T,>({\n items,\n selectedId,\n mobile = false,\n hideNavBranding,\n hideLinkIndicator = false,\n onItemClick,\n}: Props<T>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n null\n );\n const listRef = useRef<HTMLUListElement>(null);\n const instanceId = useId();\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const resetAll = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n setOpenSubMenuIndex(null);\n };\n\n const closeMobileSubMenu = () => {\n setShowSubMenu(false);\n setSelectedIndex(-1);\n };\n\n const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n if (item.id === selectedId) return true;\n if (item.subMenu?.length) {\n return !!item.subMenu.find((s) => s.id === selectedId);\n }\n return false;\n };\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (\n listRef.current &&\n !listRef.current.contains(event.target as Node)\n ) {\n resetAll();\n }\n };\n document.addEventListener(\"click\", handleClickOutside, true);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside, true);\n };\n }, []);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n return (event: React.MouseEvent<HTMLAnchorElement>) => {\n event.stopPropagation();\n\n // mobile expands inline when link has submenu\n if (mobile && item.subMenu?.length) {\n const nextExpanded = !(selectedIndex === index && showSubMenu);\n setSelectedIndex(index);\n setShowSubMenu(nextExpanded);\n }\n\n onItemClick(event, item);\n };\n };\n\n const handleMobileSubLinkClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: NavItemCommonProps<T>\n ) => {\n event.stopPropagation();\n onItemClick(event, item);\n closeMobileSubMenu();\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderDesktopSubMenu = (\n subMenu: NavItemCommonProps<T>[],\n subMenuId: string\n ) => (\n <DesktopMenu.Content id={subMenuId}>\n <DesktopMenu.Section showDivider={false}>\n {subMenu.map((item, subIndex) => (\n <DesktopMenu.Link\n key={`${item.id}-${subIndex}`}\n href={item.href}\n >\n {item.children}\n </DesktopMenu.Link>\n ))}\n </DesktopMenu.Section>\n </DesktopMenu.Content>\n );\n\n const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n );\n\n const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n const { children, options, subMenu, ...otherItemAttrs } = item;\n\n const hasSubMenu = !!subMenu?.length;\n\n const isRouteSelected = checkSelected(item);\n\n // desktop popover open state\n const isDesktopExpanded =\n !mobile && hasSubMenu && openSubMenuIndex === index;\n\n // mobile inline expanded state\n const isMobileExpanded =\n mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n const selected =\n openSubMenuIndex !== null\n ? openSubMenuIndex === index\n : isRouteSelected;\n\n const showIndicator = !hideLinkIndicator && selected;\n\n const textWeight: TypographyWeight = selected\n ? mobile\n ? \"bold\"\n : \"semibold\"\n : \"regular\";\n\n const testId = mobile\n ? `link__mobile-${index + 1}`\n : `link__${index + 1}`;\n\n const renderIndicator = () =>\n showIndicator ? (\n <LinkIndicator\n data-testid={`${testId}-indicator`}\n $selected={selected}\n />\n ) : null;\n\n const renderMobileChevron = () =>\n mobile && hasSubMenu ? (\n <LinkIconContainer>\n <ExpandCollapseButton\n data-testid={`${testId}-expand-collapse-button`}\n $selected={selected}\n $expanded={isExpanded}\n focusHighlight={false}\n focusOutline=\"browser\"\n aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n >\n <ChevronIcon $selected={selected} />\n </ExpandCollapseButton>\n </LinkIconContainer>\n ) : null;\n\n const renderLink = () => (\n <Link\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n </Link>\n );\n\n const renderLinkWithSubmenu = (isLastItem: boolean) => {\n const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n if (mobile) {\n return (\n <>\n <Link\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n underlineStyle=\"none\"\n {...otherItemAttrs}\n aria-current={isRouteSelected ? \"page\" : undefined}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n onClick={handleLinkClick(item, index)}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n {renderMobileChevron()}\n </Link>\n\n {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n </>\n );\n }\n\n return (\n <DesktopMenu\n position={isLastItem ? \"bottom-end\" : \"bottom\"}\n customOffset={0}\n menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n triggerOnFocus\n isModal={false}\n onPopoverAppear={() => setOpenSubMenuIndex(index)}\n onPopoverDismiss={() => {\n setOpenSubMenuIndex((prev) =>\n prev === index ? null : prev\n );\n }}\n >\n <LinkButton\n type=\"button\"\n tabIndex={0}\n data-testid={testId}\n weight={textWeight}\n $selected={selected}\n aria-haspopup=\"menu\"\n aria-expanded={isExpanded}\n {...options}\n >\n <LinkLabel>{children}</LinkLabel>\n {renderIndicator()}\n <ChevronIconDesktop\n $selected={selected}\n $expanded={isExpanded}\n />\n </LinkButton>\n </DesktopMenu>\n );\n };\n\n return (\n <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n {hasSubMenu\n ? renderLinkWithSubmenu(index === items.length - 1)\n : renderLink()}\n </LinkItem>\n );\n };\n\n const renderItems = () =>\n items.map((item, index) => {\n switch (item.itemType) {\n case \"component\": {\n return <li key={index}>{item.children ?? null}</li>;\n }\n case \"link\":\n default: {\n return renderLinkItem(item as NavItemLinkProps<T>, index);\n }\n }\n });\n\n if (items && items.length > 0) {\n return mobile ? (\n <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n ) : (\n <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n {renderItems()}\n </Wrapper>\n );\n }\n\n return <></>;\n};\n"],"names":["NavbarItems","items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
package/navbar/navbar-items.styles.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { TypographyWeight } from "../typography";
2
2
  interface StyleProps {
3
3
  $selected: boolean;
4
+ $expanded?: boolean;
4
5
  }
5
6
  interface WrapperStyleProps {
6
7
  $alignLeft: boolean | undefined;
@@ -26,15 +27,30 @@ export declare const LinkButton: import("styled-components/dist/types").IStyledC
26
27
  weight: TypographyWeight;
27
28
  }, never>>> & string;
28
29
  export declare const LinkLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
29
- export declare const LinkIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$selected"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$selected"> & StyleProps, never>>> & string;
30
+ export declare const LinkIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyleProps> & StyleProps, never>>> & string;
30
31
  export declare const LinkIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
31
- export declare const ExpandCollapseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, "$selected"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, "$selected"> & StyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
32
+ export declare const ExpandCollapseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, keyof StyleProps> & StyleProps, never>>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
32
33
  export declare const ChevronIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
33
34
  ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
34
- }, "$selected"> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
35
+ }, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
35
36
  ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
36
- }, "$selected"> & StyleProps, never>>> & string & Omit<{
37
+ }, keyof StyleProps> & StyleProps, never>>> & string & Omit<{
37
38
  (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
38
39
  displayName: string;
39
40
  }, keyof import("react").Component<any, {}, any>>;
41
+ export declare const ChevronIconDesktop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
42
+ ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
43
+ }, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
44
+ ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
45
+ }, keyof StyleProps> & StyleProps, never>> & {
46
+ as?: import("styled-components").WebTarget | undefined;
47
+ forwardedAs?: import("styled-components").WebTarget | undefined;
48
+ }, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
49
+ ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
50
+ }, keyof StyleProps> & StyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
51
+ ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
52
+ }, keyof StyleProps> & StyleProps, never>> & {
53
+ as?: import("styled-components").WebTarget | undefined;
54
+ forwardedAs?: import("styled-components").WebTarget | undefined;
55
+ }, keyof StyleProps> & StyleProps, never>>> & string;
40
56
  export {};
package/navbar/navbar-items.styles.js CHANGED
@@ -1,4 +1,4 @@
1
- import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as i}from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{MediaQuery as r,Font as n,Colour as l}from"../theme/index.js";import{ThemeNavbar as a}from"../theme/components/theme-helper.js";const d=t.ul`
1
+ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as o}from"styled-components";import{ClickableIcon as i}from"../shared/clickable-icon/clickable-icon.js";import{MediaQuery as r,Font as n,Colour as l}from"../theme/index.js";import{ThemeNavbar as a}from"../theme/components/theme-helper.js";const d=t.ul`
2
2
  display: flex;
3
3
  list-style: none;
4
4
  position: relative;
@@ -32,7 +32,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
32
32
  width: 100%;
33
33
  margin-left: 0rem;
34
34
  }
35
- `,m=i`
35
+ `,m=o`
36
36
  ${e=>n[`body-md-${e.weight}`]}
37
37
 
38
38
  display: flex;
@@ -41,6 +41,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
41
41
  text-align: center;
42
42
  color: ${a["navbar-link-colour-text"]};
43
43
  height: 100%;
44
+ gap: 0.5rem;
44
45
 
45
46
  &:active,
46
47
  &:hover,
@@ -53,7 +54,6 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
53
54
  width: 100%;
54
55
  padding: 0.5rem 1rem;
55
56
  text-align: left;
56
- align-items: flex-start;
57
57
  }
58
58
  `,h=t.a`
59
59
  ${m}
@@ -70,7 +70,6 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
70
70
  color: inherit;
71
71
  `,$=t.div`
72
72
  flex: 1;
73
- margin-top: 0.25rem;
74
73
 
75
74
  overflow: hidden;
76
75
  display: -webkit-box;
@@ -85,7 +84,7 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
85
84
  height: 0.25rem;
86
85
  background-color: ${l["border-selected"]};
87
86
 
88
- ${e=>e.$selected&&i`
87
+ ${e=>e.$selected&&o`
89
88
  ${h}:active &,
90
89
  ${h}:hover &,
91
90
  ${h}:focus &,
@@ -105,11 +104,10 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
105
104
  width: 0.25rem;
106
105
  }
107
106
  `,p=t.div`
108
- padding-left: 0.5rem;
109
107
  margin-right: -0.5rem;
110
- `,v=t(o)`
108
+ `,v=t(i)`
111
109
  padding: 0.5rem;
112
- transform: rotate(${e=>e.$selected?0:180}deg);
110
+ transform: rotate(${e=>e.$expanded?0:180}deg);
113
111
  transition: transform 300ms ease-in-out;
114
112
  margin: auto 0.25rem auto 0;
115
113
  `,u=t(e)`
@@ -125,5 +123,11 @@ import{ChevronUpIcon as e}from"@lifesg/react-icons/chevron-up";import t,{css as
125
123
  ${g}:focus & {
126
124
  color: ${e=>e.$selected?l["icon-selected-hover"]:l["icon-hover"]};
127
125
  }
128
- `;export{u as ChevronIcon,v as ExpandCollapseButton,h as Link,g as LinkButton,p as LinkIconContainer,f as LinkIndicator,s as LinkItem,$ as LinkLabel,c as MobileWrapper,d as Wrapper};
126
+ `,x=t(u)`
127
+ transform: rotate(${e=>e.$expanded?0:180}deg);
128
+ transition: transform 300ms ease-in-out;
129
+
130
+ height: 1.125rem;
131
+ width: 1.125rem;
132
+ `;export{u as ChevronIcon,x as ChevronIconDesktop,v as ExpandCollapseButton,h as Link,g as LinkButton,p as LinkIconContainer,f as LinkIndicator,s as LinkItem,$ as LinkLabel,c as MobileWrapper,d as Wrapper};
129
133
  //# sourceMappingURL=navbar-items.styles.js.map
package/navbar/navbar-items.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n align-items: flex-start;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n margin-top: 0.25rem;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n padding-left: 0.5rem;\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$selected ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","ChevronIcon","ChevronUpIcon","icon"],"mappings":"4TA4BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;;EAQpBK,EAAUC,CAAqD;MAC9DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;;;;;;iBAOPb,GACNA,EAAMc,UACAD,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;;;;;EAObW,EAAOjB,EAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;;EAWtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAO;;MAExBtB,GACCA,EAAMc,WACNJ,CAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAO;;;;MAIrCpB,EAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAOsB,GAAG;;;EAK9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAMc,UAAY,EAAI;;;EAK7CY,EAAc5B,EAAO6B,EAA0B;;;aAG/CL,EAAOM;;MAEdb;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAO,uBACPA,EAAO;;"}
1
+ {"version":3,"file":"navbar-items.styles.js","sources":["../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n $selected: boolean;\n $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n display: flex;\n list-style: none;\n position: relative;\n\n ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n ${MediaQuery.MaxWidth.lg} {\n display: none;\n }\n`;\n\nexport const MobileWrapper = styled.ul`\n display: none;\n list-style: none;\n\n ${MediaQuery.MaxWidth.lg} {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n display: flex;\n margin: 0 1rem;\n\n &:first-child {\n // negative margin to preserve touch target size for link\n margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n flex-direction: column;\n padding: 0.125rem 0;\n width: 100%;\n margin-left: 0rem;\n }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n ${(props) => Font[`body-md-${props.weight}`]}\n\n display: flex;\n position: relative;\n align-items: center;\n text-align: center;\n color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n height: 100%;\n gap: 0.5rem;\n\n &:active,\n &:hover,\n &:focus,\n &:focus-within {\n color: ${(props) =>\n props.$selected\n ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n padding: 0.5rem 1rem;\n text-align: left;\n }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n $selected: boolean;\n weight: TypographyWeight;\n}>`\n ${linkCss}\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n margin: 0;\n box-shadow: none;\n font: inherit;\n color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n flex: 1;\n\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 0.25rem;\n background-color: ${Colour[\"border-selected\"]};\n\n ${(props) =>\n props.$selected &&\n css`\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n background-color: ${Colour[\"border-selected-hover\"]};\n }\n `};\n\n ${MediaQuery.MaxWidth.lg} {\n left: 0;\n right: unset;\n top: 0;\n bottom: 0;\n height: 100%;\n width: 0.25rem;\n }\n`;\n\nexport const LinkIconContainer = styled.div`\n margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n padding: 0.5rem;\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n height: 1.25rem;\n width: 1.25rem;\n color: ${Colour.icon};\n\n ${Link}:active &,\n ${Link}:hover &,\n ${Link}:focus &,\n ${LinkButton}:active &,\n ${LinkButton}:hover &,\n ${LinkButton}:focus & {\n color: ${(props) =>\n props.$selected\n ? Colour[\"icon-selected-hover\"]\n : Colour[\"icon-hover\"]};\n }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n transition: transform 300ms ease-in-out;\n\n height: 1.125rem;\n width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"4TA6BO,MAAMA,EAAUC,EAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAWC,SAASC;;;EAKbC,EAAgBP,EAAOC,EAAE;;;;MAIhCG,EAAWC,SAASC;;;;;EAUbE,EAAWR,EAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAWC,SAASC;;;;;;EAQpBK,EAAUC,CAAqD;MAC9DV,GAAUW,EAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAY,0CACZA,EAAY;;;MAGxBX,EAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAOsB,GAAe;;;;;;wBAM3BE,EAAO;;MAExBtB,GACCA,EAAMc,WACNJ,CAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAO;;;;MAIrCpB,EAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAO2B,EAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAO8B,EAA0B;;;aAG/CN,EAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAO,uBACPA,EAAO;;EAIZQ,EAAqBhC,EAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lifesg/react-design-system",
3
- "version": "3.5.0-canary.4",
3
+ "version": "3.5.0-canary.6",
4
4
  "description": "A component design system for LifeSG web apps",
5
5
  "keywords": [
6
6
  "design-system"
package/toggle/toggle.js CHANGED
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as d}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as l}from"@lifesg/react-icons/chevron-up";import{useState as a,useMemo as n,useRef as o,useEffect as s}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as b,HeaderContainer as h,IndicatorLabelContainer as p,InputContainer as u,Input as m,TextContainer as $,Label as y,RemoveButton as g,StyledToggleIcon as f,SubLabel as v,Children as k,ErrorContainer as x,AlertContainer as C,ExpandButton as j,ErrorText as w,ErrorList as A}from"./toggle.styles.js";const L=L=>{var{type:T="checkbox",indicator:W,checked:N,styleType:R="default",children:S,childrenMaxLines:D,subLabel:I,disabled:E,error:F,name:M,id:P,className:_,compositeSection:q,removable:B,focusableWhenDisabled:O,useContentWidth:V,onRemove:z,onChange:G,"data-testid":H,"aria-describedby":J}=L,K=e(L,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:Q=!0,errors:U,children:X,initialExpanded:Y}=q||{},[Z,ee]=a(N),[ie,re]=a(!!Y),te=n((()=>{const e=Array.isArray(U)&&(null==U?void 0:U.length)>0,i=!Array.isArray(U)&&!!U;return e||i}),[U]),de=c(),le=P?`${P}`:`tg-${de}`,ae=o(null),ne=!!E&&!!O,oe=!!E&&!O,se=!!E;s((()=>{ee(N)}),[N]),s((()=>{Z&&re(null==Y||Y)}),[Z]);const ce=e=>{if(se)e.preventDefault();else if(G)G(e);else switch(T){case"checkbox":ee((e=>!e));break;case"radio":case"yes":case"no":Z||ee(!0)}},be=()=>{E||re(!ie)},he=()=>{E||!z||z()},pe=()=>{var e;null===(e=null==ae?void 0:ae.current)||void 0===e||e.click()},ue=e=>{e.stopPropagation()},me=()=>{let e;switch(T){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=T}return r(f,{type:e,active:Z,disabled:E,$selected:Z,$disabled:E})},$e=()=>{if(!I)return null;let e;return e="function"==typeof I?I():I,r(v,{"data-id":"toggle-sublabel",id:`${le}-sublabel`,"aria-hidden":!0,children:e})},ye=e=>i(t,{children:[r(w,{weight:"semibold",$disabled:E,children:"Error"}),r(A,{$disabled:E,children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${le}-error-list-item-${i}`,children:r(w,{weight:"semibold",$disabled:E,children:e})},i)))})]});return i(b,{$selected:Z,$disabled:E,className:_,$styleType:R,$error:F,$indicator:W,$useContentWidth:V,id:P,"data-testid":H,children:[(()=>{const e=["string"==typeof I?`${le}-sublabel`:null,J].filter(Boolean).join(" ")||void 0;return i(h,{id:`${le}-header-container`,$disabled:E,$error:F,$selected:Z,$indicator:W,$styleType:R,children:[r(p,{$addPadding:B,children:i(u,{id:`${le}-input-container`,onClick:pe,children:[r(m,Object.assign({ref:ae,name:M,id:`${le}-input`,type:"checkbox"===T?"checkbox":"radio","data-testid":"toggle-input",disabled:oe,"aria-disabled":ne,$disabledVisual:E,onChange:ce,onClick:ue,checked:Z,tabIndex:ne?0:void 0,"aria-describedby":e},K)),W&&me(),i($,{$selected:Z,$disabled:E,children:[r(y,{htmlFor:`${le}-input`,"data-testid":"toggle-label",id:`${le}-label`,$maxLines:D,$selected:Z,children:S}),I&&$e()]})]})}),B&&r(g,{type:"button",$disabled:E,onClick:he,id:`${le}-remove-button`,children:"Remove"})]})})(),X&&i("div",{children:[(!Q||ie)&&r(k,{"data-id":"toggle-composite-children",$isFinalItem:!Q,$disabled:E,children:X}),Q&&!ie&&te&&r(x,{$disabled:E,onClick:be,id:`${le}-error-alert`,children:r(C,{type:E?"description":"error",className:_,showIcon:!0,children:Array.isArray(U)?ye(U):U})}),Q&&i(j,{$paddingTopRequired:!ie&&!te,disabled:E,onClick:be,"data-testid":ie?"collapse-button":"expand-button",children:[ie?"Show less":"Show more",r(ie?l:d,{"aria-hidden":!0})]})]})]})};export{L as Toggle};
1
+ import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as i,jsx as r,Fragment as t}from"react/jsx-runtime";import{ChevronDownIcon as d}from"@lifesg/react-icons/chevron-down";import{ChevronUpIcon as l}from"@lifesg/react-icons/chevron-up";import{useState as a,useMemo as o,useRef as n,useEffect as s}from"react";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as c}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{Container as b,HeaderContainer as h,IndicatorLabelContainer as p,InputContainer as u,Input as m,TextContainer as $,Label as y,RemoveButton as g,StyledToggleIcon as f,SubLabel as v,Children as k,ErrorContainer as x,AlertContainer as C,ExpandButton as j,ErrorText as w,ErrorList as A}from"./toggle.styles.js";const L=L=>{var{type:T="checkbox",indicator:W,checked:N,styleType:R="default",children:S,childrenMaxLines:D,subLabel:I,disabled:E,error:F,name:M,id:P,className:_,compositeSection:q,removable:B,focusableWhenDisabled:O,useContentWidth:V,onRemove:z,onChange:G,"data-testid":H,"aria-describedby":J}=L,K=e(L,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:Q=!0,errors:U,children:X,initialExpanded:Y}=q||{},[Z,ee]=a(N),[ie,re]=a(!!Y),te=o((()=>{const e=Array.isArray(U)&&(null==U?void 0:U.length)>0,i=!Array.isArray(U)&&!!U;return e||i}),[U]),de=c(),le=P?`${P}`:`tg-${de}`,ae=n(null),oe=!!E&&!!O,ne=!!E&&!O,se=!!E;s((()=>{ee(N)}),[N]),s((()=>{Z&&re(null==Y||Y)}),[Z]);const ce=e=>{if(se)e.preventDefault();else if(G)G(e);else switch(T){case"checkbox":ee((e=>!e));break;case"radio":case"yes":case"no":Z||ee(!0)}},be=()=>{E||re(!ie)},he=()=>{E||!z||z()},pe=()=>{var e;null===(e=null==ae?void 0:ae.current)||void 0===e||e.click()},ue=e=>{e.stopPropagation()},me=()=>{let e;switch(T){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=T}return r(f,{type:e,active:Z,disabled:E,$selected:Z,$disabled:E,$error:F})},$e=()=>{if(!I)return null;let e;return e="function"==typeof I?I():I,r(v,{"data-id":"toggle-sublabel",id:`${le}-sublabel`,"aria-hidden":!0,children:e})},ye=e=>i(t,{children:[r(w,{weight:"semibold",$disabled:E,children:"Error"}),r(A,{$disabled:E,children:null==e?void 0:e.map(((e,i)=>r("li",{id:`${le}-error-list-item-${i}`,children:r(w,{weight:"semibold",$disabled:E,children:e})},i)))})]});return i(b,{$selected:Z,$disabled:E,className:_,$styleType:R,$error:F,$indicator:W,$useContentWidth:V,id:P,"data-testid":H,children:[(()=>{const e=["string"==typeof I?`${le}-sublabel`:null,J].filter(Boolean).join(" ")||void 0;return i(h,{id:`${le}-header-container`,$disabled:E,$error:F,$selected:Z,$indicator:W,$styleType:R,children:[r(p,{$addPadding:B,children:i(u,{id:`${le}-input-container`,onClick:pe,children:[r(m,Object.assign({ref:ae,name:M,id:`${le}-input`,type:"checkbox"===T?"checkbox":"radio","data-testid":"toggle-input",disabled:ne,"aria-disabled":oe,$disabledVisual:E,onChange:ce,onClick:ue,checked:Z,tabIndex:oe?0:void 0,"aria-describedby":e},K)),W&&me(),i($,{$selected:Z,$disabled:E,$error:F,children:[r(y,{htmlFor:`${le}-input`,"data-testid":"toggle-label",id:`${le}-label`,$maxLines:D,$selected:Z,children:S}),I&&$e()]})]})}),B&&r(g,{type:"button",$disabled:E,onClick:he,id:`${le}-remove-button`,children:"Remove"})]})})(),X&&i("div",{children:[(!Q||ie)&&r(k,{"data-id":"toggle-composite-children",$isFinalItem:!Q,$disabled:E,children:X}),Q&&!ie&&te&&r(x,{$disabled:E,onClick:be,id:`${le}-error-alert`,children:r(C,{type:E?"description":"error",className:_,showIcon:!0,children:Array.isArray(U)?ye(U):U})}),Q&&i(j,{$paddingTopRequired:!ie&&!te,disabled:E,onClick:be,"data-testid":ie?"collapse-button":"expand-button",children:[ie?"Show less":"Show more",r(ie?l:d,{"aria-hidden":!0})]})]})]})};export{L as Toggle};
2
2
  //# sourceMappingURL=toggle.js.map