Skip to content

Change buttons to links #138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
estevao90 merged 4 commits into from
May 1, 2026
Merged

Change buttons to links #138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
49e98f3
Change buttons to links
estevao90 May 1, 2026
99c65dd
fix: Set text color for outline button
pauloiankoski May 1, 2026
0365b94
fix: Vertically align external link icon
pauloiankoski May 1, 2026
948956f
Build frontend assets
pauloiankoski May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion build-dev/index.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'c442555738476ad80ab3');
<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '74bff5ce417ac6b489ec');
96 changes: 70 additions & 26 deletions build-dev/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -909,6 +909,55 @@ function ProductLogo({

/***/ },

/***/ "./resources/js/components/atoms/PurchaseLink.tsx"
/*!********************************************************!*\
!*** ./resources/js/components/atoms/PurchaseLink.tsx ***!
\********************************************************/
(__unused_webpack_module, __webpack_exports__, __webpack_require__) {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ PurchaseLink: () => (/* binding */ PurchaseLink)
/* harmony export */ });
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/external-link.js");
/* harmony import */ var _components_ui_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/components/ui/button */ "./resources/js/components/ui/button.tsx");
/* harmony import */ var _lib_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/lib/utils */ "./resources/js/lib/utils.ts");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__);





/**
* @since 1.0.0
*/
function PurchaseLink({
tierName,
upgradeUrl,
mode = 'upgrade',
className
}) {
const label = mode === 'upgrade' ? /* translators: %s is the name of the license tier to upgrade to */
(0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.sprintf)((0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Upgrade to %s', '%TEXTDOMAIN%'), tierName) : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Learn more', '%TEXTDOMAIN%');
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("a", {
href: upgradeUrl,
target: "_blank",
rel: "noopener noreferrer",
className: (0,_lib_utils__WEBPACK_IMPORTED_MODULE_3__.cn)((0,_components_ui_button__WEBPACK_IMPORTED_MODULE_2__.buttonVariants)({
variant: 'outline',
size: 'sm'
}), 'h-7 gap-1 text-xs', className),
children: [label, /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(lucide_react__WEBPACK_IMPORTED_MODULE_1__["default"], {
className: "w-3 h-3 -translate-y-px"
})]
});
}

/***/ },

/***/ "./resources/js/components/atoms/SectionHeader.tsx"
/*!*********************************************************!*\
!*** ./resources/js/components/atoms/SectionHeader.tsx ***!
Expand Down Expand Up @@ -1932,14 +1981,13 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/chevron-down.js");
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/chevron-right.js");
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/external-link.js");
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/lock.js");
/* harmony import */ var _components_ui_badge__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/ui/badge */ "./resources/js/components/ui/badge.tsx");
/* harmony import */ var _components_ui_button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/ui/button */ "./resources/js/components/ui/button.tsx");
/* harmony import */ var _components_atoms_LicenseBadge__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/components/atoms/LicenseBadge */ "./resources/js/components/atoms/LicenseBadge.tsx");
/* harmony import */ var _components_molecules_FeatureRow__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! @/components/molecules/FeatureRow */ "./resources/js/components/molecules/FeatureRow.tsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__);
/* harmony import */ var lucide_react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! lucide-react */ "./node_modules/lucide-react/dist/esm/icons/lock.js");
/* harmony import */ var _components_ui_badge__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @/components/ui/badge */ "./resources/js/components/ui/badge.tsx");
/* harmony import */ var _components_atoms_LicenseBadge__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/components/atoms/LicenseBadge */ "./resources/js/components/atoms/LicenseBadge.tsx");
/* harmony import */ var _components_atoms_PurchaseLink__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @/components/atoms/PurchaseLink */ "./resources/js/components/atoms/PurchaseLink.tsx");
/* harmony import */ var _components_molecules_FeatureRow__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @/components/molecules/FeatureRow */ "./resources/js/components/molecules/FeatureRow.tsx");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__);
/**
* Collapsible accordion grouping locked features under a tier header.
*
Expand Down Expand Up @@ -1971,37 +2019,33 @@ function TierGroup({
const [expanded, setExpanded] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const isOpen = expanded || forceOpen;
const Chevron = isOpen ? lucide_react__WEBPACK_IMPORTED_MODULE_2__["default"] : lucide_react__WEBPACK_IMPORTED_MODULE_3__["default"];
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.Fragment, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
className: "w-full flex items-center gap-2 px-4 py-3 bg-muted/50 border-b",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("div", {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("div", {
onClick: () => setExpanded(!expanded),
className: "flex items-center gap-2 cursor-pointer hover:opacity-80 transition-opacity",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(Chevron, {
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(Chevron, {
className: "w-4 h-4 shrink-0 text-muted-foreground"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)("span", {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsxs)("span", {
className: "font-medium text-sm",
children: [tier.name, " ", (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Features', '%TEXTDOMAIN%')]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_ui_badge__WEBPACK_IMPORTED_MODULE_6__.Badge, {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_components_ui_badge__WEBPACK_IMPORTED_MODULE_5__.Badge, {
variant: "secondary",
className: "text-xs",
children: features.length
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(lucide_react__WEBPACK_IMPORTED_MODULE_5__["default"], {
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(lucide_react__WEBPACK_IMPORTED_MODULE_4__["default"], {
className: "w-3.5 h-3.5 text-muted-foreground ml-1"
})]
}), showUpgrade && buttonHref && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsxs)(_components_ui_button__WEBPACK_IMPORTED_MODULE_7__.Button, {
variant: "outline",
size: "sm",
className: "gap-1 text-xs h-7 ml-auto shrink-0",
onClick: () => window.open(buttonHref, '_blank', 'noopener,noreferrer'),
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(lucide_react__WEBPACK_IMPORTED_MODULE_4__["default"], {
className: "w-3 h-3"
}), (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Upgrade to', '%TEXTDOMAIN%'), ' ', tier.name]
}), showUnactivated && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_atoms_LicenseBadge__WEBPACK_IMPORTED_MODULE_8__.LicenseBadge, {
}), showUpgrade && buttonHref && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_components_atoms_PurchaseLink__WEBPACK_IMPORTED_MODULE_7__.PurchaseLink, {
tierName: tier.name,
upgradeUrl: buttonHref,
className: "ml-auto shrink-0"
}), showUnactivated && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_components_atoms_LicenseBadge__WEBPACK_IMPORTED_MODULE_6__.LicenseBadge, {
type: "unactivated",
className: "ml-auto shrink-0 text-xs"
})]
}), isOpen && features.map(feature => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_10__.jsx)(_components_molecules_FeatureRow__WEBPACK_IMPORTED_MODULE_9__.FeatureRow, {
}), isOpen && features.map(feature => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_9__.jsx)(_components_molecules_FeatureRow__WEBPACK_IMPORTED_MODULE_8__.FeatureRow, {
feature: feature,
upgradeTierName: tier.name
}, feature.slug))]
Expand Down Expand Up @@ -3065,7 +3109,7 @@ const buttonVariants = (0,class_variance_authority__WEBPACK_IMPORTED_MODULE_1__.
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
Expand Down
2 changes: 1 addition & 1 deletion build-dev/index.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/index.asset.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '7787a3fc8697c1f8c0dc');
<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'b0a5f1b2e11da3750a5f');
5 changes: 3 additions & 2 deletions build/index.js
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 12 additions & 15 deletions resources/js/components/atoms/PurchaseLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { __, sprintf } from '@wordpress/i18n';
import { ExternalLink } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface PurchaseLinkProps {
/** Tier name to upgrade to (e.g. "Agency") */
Expand All @@ -9,32 +10,28 @@ interface PurchaseLinkProps {
upgradeUrl: string;
/** "upgrade" shows "Upgrade to Tier", "learn-more" shows "Learn more" */
mode?: 'upgrade' | 'learn-more';
className?: string;
}

/**
* @since 1.0.0
*/
export function PurchaseLink( { tierName, upgradeUrl, mode = 'upgrade' }: PurchaseLinkProps ) {
export function PurchaseLink( { tierName, upgradeUrl, mode = 'upgrade', className }: PurchaseLinkProps ) {
const label =
mode === 'upgrade'
? /* translators: %s is the name of the license tier to upgrade to */
sprintf( __( 'Upgrade to %s', '%TEXTDOMAIN%' ), tierName )
: __( 'Learn more', '%TEXTDOMAIN%' );

return (
<Button
variant="outline"
size="xs"
asChild
<a
href={ upgradeUrl }
target="_blank"
rel="noopener noreferrer"
className={ cn( buttonVariants( { variant: 'outline', size: 'sm' } ), 'h-7 gap-1 text-xs', className ) }
>
<a
href={ upgradeUrl }
target="_blank"
rel="noopener noreferrer"
>
{ label }
<ExternalLink className="w-3 h-3" />
</a>
</Button>
{ label }
<ExternalLink className="w-3 h-3 -translate-y-px" />
</a>
);
}
18 changes: 7 additions & 11 deletions resources/js/components/molecules/TierGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
*/
import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import { ChevronRight, ChevronDown, Lock, ExternalLink } from 'lucide-react';
import { ChevronRight, ChevronDown, Lock } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { LicenseBadge } from '@/components/atoms/LicenseBadge';
import { PurchaseLink } from '@/components/atoms/PurchaseLink';
import { FeatureRow } from '@/components/molecules/FeatureRow';
import type { CatalogTier, Feature } from '@/types/api';

Expand Down Expand Up @@ -60,15 +60,11 @@ export function TierGroup( { tier, features, forceOpen = false, showUpgrade = tr
<Lock className="w-3.5 h-3.5 text-muted-foreground ml-1" />
</div>
{ showUpgrade && buttonHref && (
<Button
variant="outline"
size="sm"
className="gap-1 text-xs h-7 ml-auto shrink-0"
onClick={ () => window.open( buttonHref, '_blank', 'noopener,noreferrer' ) }
>
<ExternalLink className="w-3 h-3" />
{ __( 'Upgrade to', '%TEXTDOMAIN%' ) }{ ' ' }{ tier.name }
</Button>
<PurchaseLink
tierName={ tier.name }
upgradeUrl={ buttonHref }
className="ml-auto shrink-0"
/>
) }
{ showUnactivated && (
<LicenseBadge type="unactivated" className="ml-auto shrink-0 text-xs" />
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const buttonVariants = cva(
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
"border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost:
Expand Down