ON-41316 # Gave BSB the same treatment

oneblink · Jun 20, 2024 · 04fa9d9 · 04fa9d9
1 parent 4c1dfc7
commit 04fa9d9
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 17 deletions.
diff --git a/src/form-elements/FormElementABN.tsx b/src/form-elements/FormElementABN.tsx
@@ -249,11 +249,7 @@ function FormElementABN({
  />
  </div>
  {value && (
- <div className="control ob-abn__record-control ob-abn__display-desktop">
- <a className="button is-static ob-abn__record-button">
- {abnService.displayBusinessNameFromABNRecord(value)}
- </a>
- </div>
+ <ABNDisplay abnRecord={value} className="ob-abn__display-desktop" />
  )}
  {hasCopyButton && (
  <div className="control">
@@ -271,11 +267,7 @@ function FormElementABN({
  />
  </div>
  {value && (
- <div className="control ob-abn__record-control ob-abn__display-mobile">
- <a className="button is-static ob-abn__record-button">
- {abnService.displayBusinessNameFromABNRecord(value)}
- </a>
- </div>
+ <ABNDisplay abnRecord={value} className="ob-abn__display-mobile" />
  )}
  {isDisplayingValidationMessage && (
  <div role="alert" className="has-margin-top-8">
@@ -290,3 +282,19 @@ function FormElementABN({
 }
 
 export default React.memo(FormElementABN)
+
+const ABNDisplay = ({
+ abnRecord,
+ className,
+}: {
+ abnRecord: MiscTypes.ABNRecord
+ className: string
+}) => {
+ return (
+ <div className={`control ob-abn__record-control ${className}`}>
+ <a className="button is-static ob-abn__record-button">
+ {abnService.displayBusinessNameFromABNRecord(abnRecord)}
+ </a>
+ </div>
+ )
+}
diff --git a/src/form-elements/FormElementBSB.tsx b/src/form-elements/FormElementBSB.tsx
@@ -123,6 +123,8 @@ function FormElementBSB({
  errorMessage) &&
  !isLookingUp
 
+ const hasCopyButton = !!value && !!element.readOnly
+ const hasLookupButton = element.isDataLookup || element.isElementLookup
  return (
  <div className="cypress-bsb-element">
  <FormElementLabelContainer
@@ -131,7 +133,11 @@ function FormElementBSB({
  element={element}
  required={element.required}
  >
- <div className="field has-addons">
+ <div
+ className={clsx('field has-addons', {
+ 'no-addons-mobile': !hasCopyButton && !hasLookupButton,
+ })}
+ >
  <div
  className={clsx('control is-expanded', {
  'is-loading': isLoading,
@@ -163,13 +169,12 @@ function FormElementBSB({
  />
  </div>
  {bsbRecord && (
- <div className="control ob-bsb__record-control">
- <a className="button is-static ob-bsb__record-button">
- {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}
- </a>
- </div>
+ <BSBDisplay
+ bsbRecord={bsbRecord}
+ className="ob-bsb__display-desktop"
+ />
  )}
- {!!element.readOnly && !!value && (
+ {hasCopyButton && (
  <div className="control">
  <CopyToClipboardButton
  className="button is-input-addon copy-button cypress-copy-to-clipboard-button"
@@ -184,6 +189,12 @@ function FormElementBSB({
  lookupButtonConfig={element.lookupButton}
  />
  </div>
+ {bsbRecord && (
+ <BSBDisplay
+ bsbRecord={bsbRecord}
+ className="ob-bsb__display-mobile"
+ />
+ )}
  {isDisplayingValidationMessage && (
  <div role="alert" className="has-margin-top-8">
  <div className="has-text-danger ob-error__text cypress-validation-message">
@@ -196,4 +207,19 @@ function FormElementBSB({
  )
 }
 
+const BSBDisplay = ({
+ bsbRecord,
+ className,
+}: {
+ bsbRecord: MiscTypes.BSBRecord
+ className: string
+}) => {
+ return (
+ <div className={`control ob-bsb__record-control ${className}`}>
+ <a className="button is-static ob-bsb__record-button">
+ {bsbRecord.financialInstitutionMnemonic} - {bsbRecord.name}
+ </a>
+ </div>
+ )
+}
 export default React.memo(FormElementBSB)
diff --git a/src/styles/bsb.scss b/src/styles/bsb.scss
@@ -8,3 +8,52 @@
  text-overflow: ellipsis;
  display: block;
 }
+
+.ob-bsb__display-mobile {
+ display: none;
+ @media only screen and (max-width: $mobile) {
+ display: block;
+ }
+
+ .ob-bsb__record-button {
+ border-top: 0px;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ width: 100%;
+ }
+}
+
+.ob-bsb__display-desktop {
+ @media only screen and (max-width: $mobile) {
+ display: none;
+ }
+}
+
+.ob-bsb .field .control:first-child .input {
+ @media only screen and (max-width: $mobile) {
+ border-bottom-left-radius: 0px;
+ }
+}
+
+/** Styles copy or lookup button */
+.ob-bsb .field .control:last-child .button {
+ @media only screen and (max-width: $mobile) {
+ border-bottom-right-radius: 0px;
+ }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+.ob-bsb
+ .field.has-addons.no-addons-mobile
+ .control:first-child:not(:only-child)
+ .input {
+ @media only screen and (max-width: $mobile) {
+ border-top-right-radius: 4px;
+ }
+}
+
+.field.no-addons-mobile .control:not(:last-child) {
+ @media only screen and (max-width: $mobile) {
+ margin-right: 0px;
+ }
+}