| @@ -4,9 +4,10 @@ | ||
| 4 | 4 | import classNames from 'classnames'; |
| 5 | 5 | |
| 6 | 6 | // Makes room for the highlighted box's negative top margin. |
| 7 | 7 | const GRID = [ |
| 8 | - 'relative z-10 grid w-full sm:mx-auto sm:grid-cols-2 sm:pt-7', | |
| 8 | + 'relative z-10 grid w-full sm:mx-auto sm:grid-cols-2', | |
| 9 | + 'sm:pt-[var(--ext-tpl-choice-badge-height,28px)]', | |
| 9 | 10 | '[gap:var(--ext-tpl-choice-gap,24px)]', |
| 10 | 11 | ].join(' '); |
| 11 | 12 | |
| 12 | 13 | const WIDE = [ |
| @@ -13,19 +14,22 @@ | ||
| 13 | 14 | 'sm:[max-width:var(--ext-tpl-choice-width,672px)]', |
| 14 | 15 | 'sm:[align-items:var(--ext-tpl-choice-align,stretch)]', |
| 15 | 16 | ].join(' '); |
| 16 | 17 | |
| 18 | +// border-ui-line outranks border-ui-action in the built CSS. | |
| 17 | 19 | const BOX = [ |
| 18 | - CARD, | |
| 20 | + CARD.replace('border-ui-line', ''), | |
| 19 | 21 | 'flex flex-col overflow-hidden text-left text-ui-ink', |
| 20 | - '[gap:var(--ext-tpl-choice-box-gap,0px)]', | |
| 22 | + '[border-width:var(--ext-tpl-choice-highlight-border,3px)]', | |
| 21 | 23 | ].join(' '); |
| 22 | 24 | |
| 23 | 25 | const HIGHLIGHT = [ |
| 24 | - '[border-width:var(--ext-tpl-choice-highlight-border,3px)]', | |
| 25 | - 'border-ui-action sm:-mt-7', | |
| 26 | + 'border-ui-action', | |
| 27 | + 'sm:-mt-[var(--ext-tpl-choice-badge-height,28px)]', | |
| 26 | 28 | ].join(' '); |
| 27 | 29 | |
| 30 | +const ROWS = 'flex flex-1 flex-col [gap:var(--ext-tpl-choice-box-gap,0px)]'; | |
| 31 | + | |
| 28 | 32 | const BADGE = [ |
| 29 | 33 | 'flex items-center justify-center bg-ui-action', |
| 30 | 34 | '[height:var(--ext-tpl-choice-badge-height,28px)]', |
| 31 | 35 | 'text-ui-status font-ui-status text-ui-action-text', |
| @@ -56,35 +60,37 @@ | ||
| 56 | 60 | buttonIcon = arrowRight, |
| 57 | 61 | highlight, |
| 58 | 62 | onClick, |
| 59 | 63 | }) => ( |
| 60 | - <div className={classNames(BOX, highlight ? HIGHLIGHT : 'border-ui')}> | |
| 64 | + <div className={classNames(BOX, highlight ? HIGHLIGHT : 'border-ui-line')}> | |
| 61 | 65 | {highlight && badgeLabel && <span className={BADGE}>{badgeLabel}</span>} |
| 62 | - <span className={ICON_STRIP}> | |
| 63 | - <Icon fill="currentColor" icon={icon} size={40} /> | |
| 64 | - </span> | |
| 65 | - <span className={BODY}> | |
| 66 | - <span className={COPY}> | |
| 67 | - {heading && ( | |
| 68 | - <span className="text-ui-body font-ui-heading font-ui-strong"> | |
| 69 | - {heading} | |
| 70 | - </span> | |
| 71 | - )} | |
| 72 | - <span className="text-ui-body opacity-70">{description}</span> | |
| 66 | + <span className={ROWS}> | |
| 67 | + <span className={ICON_STRIP}> | |
| 68 | + <Icon fill="currentColor" icon={icon} size={40} /> | |
| 73 | 69 | </span> |
| 74 | - <button | |
| 75 | - type="button" | |
| 76 | - onClick={onClick} | |
| 77 | - className={classNames( | |
| 78 | - BUTTON, | |
| 79 | - highlight | |
| 80 | - ? 'border-ui border-ui-action bg-ui-action text-ui-action-text hover:opacity-90' | |
| 81 | - : 'border-ui border-ui-line bg-ui-secondary-fill text-ui-secondary-text', | |
| 82 | - )} | |
| 83 | - > | |
| 84 | - {buttonLabel} | |
| 85 | - <Icon fill="currentColor" icon={buttonIcon} size={20} /> | |
| 86 | - </button> | |
| 70 | + <span className={BODY}> | |
| 71 | + <span className={COPY}> | |
| 72 | + {heading && ( | |
| 73 | + <span className="text-ui-body font-ui-heading font-ui-strong"> | |
| 74 | + {heading} | |
| 75 | + </span> | |
| 76 | + )} | |
| 77 | + <span className="text-ui-body opacity-70">{description}</span> | |
| 78 | + </span> | |
| 79 | + <button | |
| 80 | + type="button" | |
| 81 | + onClick={onClick} | |
| 82 | + className={classNames( | |
| 83 | + BUTTON, | |
| 84 | + highlight | |
| 85 | + ? 'border-ui border-ui-action bg-ui-action text-ui-action-text hover:opacity-90' | |
| 86 | + : 'border-ui border-ui-line bg-ui-secondary-fill text-ui-secondary-text', | |
| 87 | + )} | |
| 88 | + > | |
| 89 | + {buttonLabel} | |
| 90 | + <Icon fill="currentColor" icon={buttonIcon} size={20} /> | |
| 91 | + </button> | |
| 92 | + </span> | |
| 87 | 93 | </span> |
| 88 | 94 | </div> |
| 89 | 95 | ); |
| 90 | 96 | |
