preview app: fix, move marketplace buttons (#1013)

* review app: fix, move marketplace buttons fix the unclosed VerticalTabsContent, move marketplace buttons to the paratext folder * fix foreground color in theme color display
paranext · Jul 18, 2024 · d7cc488 · d7cc488
1 parent 6deace3
commit d7cc488
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/lib/platform-bible-react/src/preview/components/compositions.component.tsx b/lib/platform-bible-react/src/preview/components/compositions.component.tsx
@@ -1,9 +1,6 @@
-import { useState } from 'react';
-import { ScriptureReference } from 'platform-bible-utils';
 import ThemeToggle from '@/preview/theme-toggle.component';
-import DownloadButton from '@/components/extension-marketplace/buttons/download-button.component';
-import RemoveButton from '@/components/extension-marketplace/buttons/remove-button.component';
-import UpdateButton from '@/components/extension-marketplace/buttons/update-button.component';
+import { ScriptureReference } from 'platform-bible-utils';
+import { useState } from 'react';
 import {
   BookChapterControl,
   DataTable,
@@ -37,13 +34,7 @@ function Compositions({ direction }: HasDirection) {
             Book Chapter Control
           </VerticalTabsTrigger>
           <VerticalTabsTrigger value="Theme Toggle">Theme Toggle</VerticalTabsTrigger>
-
-          <VerticalTabsTrigger value="Download Button">Download Button</VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Remove Button">Remove Button</VerticalTabsTrigger>
-          <VerticalTabsTrigger value="Update Button">Update Button</VerticalTabsTrigger>
-
           <VerticalTabsTrigger value="Data Table">Data Table</VerticalTabsTrigger>
-
         </VerticalTabsList>
 
         <VerticalTabsContent value="Search Bar">
@@ -59,31 +50,8 @@ function Compositions({ direction }: HasDirection) {
           <ThemeToggle />
         </VerticalTabsContent>
 
-        <VerticalTabsContent value="Download Button">
-          <div className="pr-space-x-2">
-            <DownloadButton isDownloading={false} handleClick={() => {}} buttonText="Get" />
-            <DownloadButton isDownloading handleClick={() => {}} buttonText="Get" />
-            <DownloadButton isDownloading={false} handleClick={() => {}} />
-            <DownloadButton isDownloading handleClick={() => {}} />
-          </div>
-        </VerticalTabsContent>
-
-        <VerticalTabsContent value="Remove Button">
-          <div className="pr-space-x-2">
-            <RemoveButton isRemoving={false} handleClick={() => {}} />
-            <RemoveButton isRemoving handleClick={() => {}} />
-          </div>
-        </VerticalTabsContent>
-
-        <VerticalTabsContent value="Update Button">
-          <div className="pr-space-x-2">
-            <UpdateButton isUpdating={false} handleClick={() => {}} />
-            <UpdateButton isUpdating handleClick={() => {}} />
-          </div>
-
         <VerticalTabsContent value="Data Table">
           <DataTable enablePagination showPaginationControls columns={columns} data={data} />
-
         </VerticalTabsContent>
       </VerticalTabs>
     </div>

diff --git a/lib/platform-bible-react/src/preview/components/guide/theme-color-display.component.tsx b/lib/platform-bible-react/src/preview/components/guide/theme-color-display.component.tsx
@@ -53,7 +53,7 @@ export default function ThemeColorDisplay() {
       {/* dummy to create all classes */}
       <div
         style={{ display: 'none' }}
-        className="pr-bg-background-foreground pr-bg-accent pr-bg-accent-foreground pr-bg-background pr-bg-border pr-bg-card pr-bg-card-foreground pr-bg-destructive pr-bg-destructive-foreground pr-bg-input pr-bg-muted pr-bg-muted-foreground pr-bg-popover pr-bg-popover-foreground pr-bg-primary pr-bg-primary pr-bg-primary-foreground pr-bg-ring pr-bg-secondary pr-bg-secondary-foreground"
+        className="pr-bg-accent pr-bg-accent-foreground pr-bg-background pr-bg-border pr-bg-card pr-bg-card-foreground pr-bg-destructive pr-bg-destructive-foreground pr-bg-foreground pr-bg-input pr-bg-muted pr-bg-muted-foreground pr-bg-popover pr-bg-popover-foreground pr-bg-primary pr-bg-primary pr-bg-primary-foreground pr-bg-ring pr-bg-secondary pr-bg-secondary-foreground"
       />
       <table>
         <thead>

diff --git a/lib/platform-bible-react/src/preview/components/paratext.tsx b/lib/platform-bible-react/src/preview/components/paratext.tsx
@@ -1,5 +1,6 @@
 import { VerticalTabs, VerticalTabsContent, VerticalTabsList, VerticalTabsTrigger } from '../..';
 import { HasDirection } from '../direction-toggle';
+import MarketplaceButtonExamples from './paratext/buttons.example.component';
 
 function Paratext({ direction }: HasDirection) {
   return (
@@ -10,10 +11,14 @@ function Paratext({ direction }: HasDirection) {
       </p>
       <VerticalTabs defaultValue="Result List" dir={direction}>
         <VerticalTabsList>
+          <VerticalTabsTrigger value="Marketplace Buttons">Marketplace Buttons</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Result List">Result List</VerticalTabsTrigger>
           <VerticalTabsTrigger value="Inventory">Inventory</VerticalTabsTrigger>
         </VerticalTabsList>
 
+        <VerticalTabsContent value="Marketplace Buttons">
+          <MarketplaceButtonExamples />
+        </VerticalTabsContent>
         <VerticalTabsContent value="Result List">TODO</VerticalTabsContent>
 
         <VerticalTabsContent value="Inventory">TODO</VerticalTabsContent>

diff --git a/lib/platform-bible-react/src/preview/components/paratext/buttons.example.component.tsx b/lib/platform-bible-react/src/preview/components/paratext/buttons.example.component.tsx
@@ -0,0 +1,27 @@
+import DownloadButton from '@/components/extension-marketplace/buttons/download-button.component';
+import RemoveButton from '@/components/extension-marketplace/buttons/remove-button.component';
+import UpdateButton from '@/components/extension-marketplace/buttons/update-button.component';
+
+export default function MarketplaceButtonExamples() {
+  return (
+    <>
+      Download Button:
+      <div className="pr-space-x-2">
+        <DownloadButton isDownloading={false} handleClick={() => {}} buttonText="Get" />
+        <DownloadButton isDownloading handleClick={() => {}} buttonText="Get" />
+        <DownloadButton isDownloading={false} handleClick={() => {}} />
+        <DownloadButton isDownloading handleClick={() => {}} />
+      </div>
+      RemoveButton Button:
+      <div className="pr-space-x-2">
+        <RemoveButton isRemoving={false} handleClick={() => {}} />
+        <RemoveButton isRemoving handleClick={() => {}} />
+      </div>
+      UpdateButton Button:
+      <div className="pr-space-x-2">
+        <UpdateButton isUpdating={false} handleClick={() => {}} />
+        <UpdateButton isUpdating handleClick={() => {}} />
+      </div>
+    </>
+  );
+}