1246 add preview images (#2855)

* Add preview images for tina components * updated google maps jpg to use kebab casing * 💄 Update preview images for Tina components * Fixed image links with typos * 💄 Update Preview Images Blocks * Update Tina Lock * fixed typo in CustomDownloadButton url * updated package.json * Fix linting errors * Update Event Booking Preview Image * Update client list preview * added preview for newsletters * added thumbnail for clients list component --------- Co-authored-by: Calinator444 <[email protected]> Co-authored-by: Tylah Kapa <[email protected]>
SSWConsulting · Jul 26, 2024 · f1ecb0d · f1ecb0d
1 parent ef35c50
commit f1ecb0d
Show file tree

Hide file tree

Showing 91 changed files with 129 additions and 17 deletions.
diff --git a/components/blocks/CustomDownloadButton.tsx b/components/blocks/CustomDownloadButton.tsx
@@ -20,6 +20,9 @@ export const CustomDownloadButton = ({ data }) => {
 export const customDownloadButtonSchema: Template = {
   name: "CustomDownloadButton",
   label: "Custom Download Button",
+  ui: {
+    previewSrc: "/images/thumbs/tina/custom-download-button.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/aboutUs.tsx b/components/blocks/aboutUs.tsx
@@ -450,6 +450,10 @@ export const aboutUsBlock = {
 export const aboutUsBlockSchema: Template = {
   name: "AboutUs",
   label: "About Us",
+
+  ui: {
+    previewSrc: "/images/thumbs/tina/about-us.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/agenda.tsx b/components/blocks/agenda.tsx
@@ -84,6 +84,10 @@ export const agendaBlockConstant = {
 export const agendaSchema: Template = {
   label: "Agenda",
   name: agendaBlockConstant.value,
+
+  ui: {
+    previewSrc: "/images/thumbs/tina/agenda.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/builtOnAzure.tsx b/components/blocks/builtOnAzure.tsx
@@ -67,6 +67,9 @@ export const builtOnAzureBlock = {
 export const builtOnAzureBlockSchema: Template = {
   name: "BuiltOnAzure",
   label: "Built on Azure",
+  ui: {
+    previewSrc: "/images/thumbs/tina/built-on-azure.jpg",
+  },
   // Todo: Turn into util field
   fields: [
     {

diff --git a/components/blocks/carousel.tsx b/components/blocks/carousel.tsx
@@ -147,7 +147,7 @@ export const carouselBlockSchema: Template = {
   name: "Carousel",
   label: "Carousel",
   ui: {
-    previewSrc: "/blocks/hero.png",
+    previewSrc: "/images/thumbs/tina/carousel.jpg",
   },
   fields: [
     {

diff --git a/components/blocks/clientLogos.tsx b/components/blocks/clientLogos.tsx
@@ -27,6 +27,9 @@ export const ClientLogos = () => {
 export const clientLogosBlockSchema: Template = {
   name: "ClientLogos",
   label: "Client Logos",
+  ui: {
+    previewSrc: "/images/thumbs/tina/client-logos.jpg",
+  },
   // Todo: Find a way to have no fields - the one below is to satisfy compiler
   fields: [
     {

diff --git a/components/blocks/colorBlock.tsx b/components/blocks/colorBlock.tsx
@@ -77,6 +77,9 @@ const ColorRow = (props: ColorRow) => {
 export const colorBlockSchema: Template = {
   name: "ColorBlock",
   label: "Color block",
+  ui: {
+    previewSrc: "/images/thumbs/tina/color-block.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/colorPalette.tsx b/components/blocks/colorPalette.tsx
@@ -24,6 +24,9 @@ export const ColorPalette = () => {
 export const colorPaletteSchema: Template = {
   name: "ColorPalette",
   label: "Color Palette",
+  ui: {
+    previewSrc: "/images/thumbs/tina/color-palette.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx
@@ -76,7 +76,7 @@ export const contentBlockSchema: Template = {
   name: "Content",
   label: "Content",
   ui: {
-    previewSrc: "/blocks/content.png",
+    previewSrc: "/images/thumbs/tina/content.jpg",
     defaultItem: {
       body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
     },

diff --git a/components/blocks/contentCard.tsx b/components/blocks/contentCard.tsx
@@ -68,7 +68,7 @@ export const contentCardBlockSchema: Template = {
   name: "ContentCard",
   label: "Content Card",
   ui: {
-    previewSrc: "/blocks/content.png",
+    previewSrc: "/images/thumbs/tina/content-card.jpg",
     defaultItem: {
       content:
         "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",

diff --git a/components/blocks/customImage.tsx b/components/blocks/customImage.tsx
@@ -62,6 +62,10 @@ export const CustomImage = ({ data }: { data: CustomImageProps }) => {
 export const customImageBlockSchema: Template = {
   name: "CustomImage",
   label: "Custom Image",
+
+  ui: {
+    previewSrc: "/images/thumbs/tina/custom-image.jpg",
+  },
   fields: [
     {
       type: "image",

diff --git a/components/blocks/domainFromQuery.tsx b/components/blocks/domainFromQuery.tsx
@@ -30,6 +30,9 @@ export const DomainFromQuery = (props: DomainFromQueryProps) => {
 export const domainFromQuerySchema: Template = {
   name: "DomainFromQuery",
   label: "Domain from query",
+  ui: {
+    previewSrc: "/images/thumbs/tina/domain-from-query.jpg",
+  },
   fields: [
     {
       name: "title",

diff --git a/components/blocks/downloadBlock.tsx b/components/blocks/downloadBlock.tsx
@@ -133,6 +133,9 @@ const DownloadButton = (data) => {
 export const downloadBlockSchema: Template = {
   name: "DownloadBlock",
   label: "Download Block",
+  ui: {
+    previewSrc: "/images/thumbs/tina/download-block.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/eventLink.tsx b/components/blocks/eventLink.tsx
@@ -40,6 +40,9 @@ export const EventLink = ({
 export const eventLinkSchema: Template = {
   name: "EventLink",
   label: "Event Link",
+  ui: {
+    previewSrc: "/images/thumbs/tina/event-link.jpg",
+  },
   fields: [
     {
       type: "rich-text",

diff --git a/components/blocks/fixedColumns.tsx b/components/blocks/fixedColumns.tsx
@@ -42,6 +42,9 @@ export const FixedColumns = ({ data }: FixedColumnsProps) => {
 export const fixedColumnsSchema: Template = {
   name: "FixedColumns",
   label: "Fixed Column Layout (2 columns)",
+  ui: {
+    previewSrc: "/images/thumbs/tina/fixed-columns.jpg",
+  },
   fields: [
     {
       type: "rich-text",

diff --git a/components/blocks/fixedTabsLayout.tsx b/components/blocks/fixedTabsLayout.tsx
@@ -77,6 +77,9 @@ const renderTabButton = (tab, selectedTab, onTabBtnClicked) => {
 export const fixedTabsLayoutSchema: Template = {
   name: "FixedTabsLayout",
   label: "Fixed Tabs Layout",
+  ui: {
+    previewSrc: "/images/thumbs/tina/fixed-tabs-layout.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/flag.tsx b/components/blocks/flag.tsx
@@ -30,6 +30,9 @@ export const Flag = ({ country, height, width, className = "" }: FlagProps) => {
 export const flagSchema: Template = {
   name: "Flag",
   label: "Flag Image",
+  ui: {
+    previewSrc: "/images/thumbs/tina/flag-image.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/googleMapsWrapper.tsx b/components/blocks/googleMapsWrapper.tsx
@@ -23,6 +23,9 @@ export const GoogleMapsWrapper = (props: GoogleMapsWrapperProps) => (
 export const googleMapsSchema: Template = {
   label: "Google Maps",
   name: "GoogleMaps",
+  ui: {
+    previewSrc: "/images/thumbs/tina/google-maps.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/gridLayout.tsx b/components/blocks/gridLayout.tsx
@@ -1,11 +1,11 @@
+import Image from "next/image";
 import type { Template } from "tinacms";
-import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 import { tinaField } from "tinacms/dist/react";
-import Image from "next/image";
+import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 
-import { Section } from "../util/section";
-import { Container } from "../util/container";
 import { utilityButtonSchema } from "../button/utilityButton";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
 import { componentRenderer } from "./mdxComponentRenderer";
 
 type GridLayoutProps = {
@@ -93,6 +93,10 @@ export const GridLayout = ({ data }: GridLayoutProps) => {
 export const gridLayoutSchema: Template = {
   label: "Grid Layout",
   name: "GridLayout",
+
+  ui: {
+    previewSrc: "/images/thumbs/tina/grid-layout.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/horizontalCard.tsx b/components/blocks/horizontalCard.tsx
@@ -84,7 +84,9 @@ const Card = (card: CardType) => {
 export const horizontalBlockSchema: Template = {
   name: "HorizontalCard",
   label: "Horizontal Card",
-  ui: {},
+  ui: {
+    previewSrc: "/images/thumbs/tina/horizontal-card.jpg",
+  },
   fields: [
     {
       type: "object",

diff --git a/components/blocks/internalCarousel.tsx b/components/blocks/internalCarousel.tsx
@@ -171,7 +171,7 @@ export const internalCarouselBlockSchema: Template = {
   name: "InternalCarousel",
   label: "Internal Carousel",
   ui: {
-    previewSrc: "/blocks/hero.png",
+    previewSrc: "/images/thumbs/tina/internal-carousel.jpg",
     itemProps: (item) => ({ label: item.items.header }),
   },
   fields: [

diff --git a/components/blocks/jotFormEmbed.tsx b/components/blocks/jotFormEmbed.tsx
@@ -54,6 +54,9 @@ export const JotFormEmbed: React.FC<JotFormEmbedProps> = ({
 export const jotFormEmbedSchema: Template = {
   name: "JotFormEmbed",
   label: "JotForm Embed",
+  ui: {
+    previewSrc: "/images/thumbs/tina/jotform-embed.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/newslettersTable.tsx b/components/blocks/newslettersTable.tsx
@@ -132,6 +132,9 @@ export const NewslettersTable: React.FC<{ data: { headerText: string } }> = ({
 export const newslettersTableBlockSchema: Template = {
   name: "NewslettersTable",
   label: "Newsletters Table",
+  ui: {
+    previewSrc: "/images/thumbs/tina/newsletters-table.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/payment-block.tsx b/components/blocks/payment-block.tsx
@@ -151,6 +151,9 @@ export const paymentBlockConstants = {
 export const paymentBlockSchema: Template = {
   label: "Payment Block",
   name: paymentBlockConstants.value,
+  ui: {
+    previewSrc: "/images/thumbs/tina/payment-block.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/recurringEvent.tsx b/components/blocks/recurringEvent.tsx
@@ -147,6 +147,9 @@ export const RecurringEvent = ({ data }) => {
 export const recurringEventSchema: Template = {
   label: "Recurring Event",
   name: "RecurringEvent",
+  ui: {
+    previewSrc: "/images/thumbs/tina/recurring-event.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/blocks/sectionHeader.tsx b/components/blocks/sectionHeader.tsx
@@ -21,6 +21,7 @@ export const sectionHeaderSchema: Template = {
   name: "SectionHeader",
   label: "Section Header",
   ui: {
+    previewSrc: "/images/thumbs/tina/section-header.jpg",
     itemProps: (item) => ({ label: item?.headerText }),
   },
   fields: [

diff --git a/components/blocks/serviceCards.tsx b/components/blocks/serviceCards.tsx
@@ -228,7 +228,7 @@ export const serviceCardsBlockSchema: Template = {
   name: "ServiceCards",
   label: "Service Cards",
   ui: {
-    previewSrc: "/blocks/hero.png",
+    previewSrc: "/images/thumbs/tina/services-cards.jpg",
   },
   fields: [
     {

diff --git a/components/blocks/tableLayout.tsx b/components/blocks/tableLayout.tsx
@@ -99,6 +99,9 @@ export const TableLayout = ({ data }: { data: TableLayoutProps }) => {
 export const tableBlockSchema: Template = {
   label: "Table Layout",
   name: "TableLayout",
+  ui: {
+    previewSrc: "/images/thumbs/tina/table-layout.jpg",
+  },
   fields: [
     {
       label: "Table Style",

diff --git a/components/blocks/testimonialsList.tsx b/components/blocks/testimonialsList.tsx
@@ -47,6 +47,9 @@ export const TestimonialsList = ({ data: { excludedCategories = [] } }) => {
 export const testimonialsListSchema: Template = {
   name: "TestimonialsList",
   label: "Testimonials List",
+  ui: {
+    previewSrc: "/images/thumbs/tina/testimonials.jpg",
+  },
   fields: [
     {
       type: "object",

diff --git a/components/blocks/upcomingEvents.tsx b/components/blocks/upcomingEvents.tsx
@@ -6,9 +6,9 @@ import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
 
 import { useFormatDates } from "../../hooks/useFormatDates";
+import client from "../../tina/__generated__/client";
 import { CustomLink } from "../customLink";
 import { EventsRelativeBox } from "../events/eventsRelativeBox";
-import client from "../../tina/__generated__/client";
 import { EventTrimmed } from "../filter/events";
 
 export const UpcomingEvents = ({ data }) => {
@@ -128,7 +128,7 @@ export const upcomingEventsBlockSchema: Template = {
   name: "UpcomingEvents",
   label: "Upcoming Events",
   ui: {
-    previewSrc: "/blocks/content.png",
+    previewSrc: "/images/thumbs/tina/upcoming-events.jpg",
     defaultItem: {
       title: "Upcoming Events",
       numberOfEvents: 30,

diff --git a/components/blocks/verticalListItem.tsx b/components/blocks/verticalListItem.tsx
@@ -47,6 +47,9 @@ export const VerticalListItem = ({ data }) => {
 export const verticalListItemSchema: Template = {
   label: "List Item",
   name: "VerticalListItem",
+  ui: {
+    previewSrc: "/images/thumbs/tina/vertical-list-item.jpg",
+  },
   fields: [
     {
       type: "rich-text",

diff --git a/components/bookingButton/bookingButton.tsx b/components/bookingButton/bookingButton.tsx
@@ -49,7 +49,7 @@ export const bookingButtonSchema: Template = {
   name: "BookingButton",
   label: "Booking Button",
   ui: {
-    previewSrc: "/blocks/hero.png",
+    previewSrc: "/images/thumbs/tina/booking-button.jpg",
     itemProps: (item) => ({ label: item?.btnText }),
   },
   fields: [

diff --git a/components/button/utilityButton.tsx b/components/button/utilityButton.tsx
@@ -87,7 +87,7 @@ export const utilityButtonSchema: Template = {
   name: "UtilityButton",
   label: "Utility Button",
   ui: {
-    previewSrc: "/blocks/hero.png",
+    previewSrc: "/images/thumbs/tina/utility-button.jpg",
     itemProps: (item) => ({ label: item?.btnText }),
   },
   fields: [

diff --git a/components/company/clientList.tsx b/components/company/clientList.tsx
@@ -59,6 +59,9 @@ const clientListBlocks: Template[] = [
 export const clientListSchema: Template = {
   label: "Client List",
   name: "ClientList",
+  ui: {
+    previewSrc: "/images/thumbs/tina/clients-list.jpg",
+  },
   fields: [
     {
       type: "object",
@@ -88,6 +91,7 @@ export const clientListSchema: Template = {
       label: "Clients list",
       list: true,
       ui: {
+        previewSrc: "/images/thumbs/tina/clients-list.jpg",
         itemProps: (item) => {
           return { label: item?.name };
         },

diff --git a/components/embeds/tweetEmbed.tsx b/components/embeds/tweetEmbed.tsx
@@ -34,6 +34,9 @@ export const TweetEmbed = (props: TweetEmbedProps) => {
 export const tweetEmbedSchema: Template = {
   label: "Tweet Embed",
   name: "TweetEmbed",
+  ui: {
+    previewSrc: "/images/thumbs/tina/tweet-embed.jpg",
+  },
   fields: [
     {
       type: "string",

diff --git a/components/events/interestForm.tsx b/components/events/interestForm.tsx
@@ -15,6 +15,9 @@ export const InterestForm = (props) => {
 export const interestFormSchema: Template = {
   label: "Interest Form",
   name: "InterestForm",
+  ui: {
+    previewSrc: "/images/thumbs/tina/interest-form.jpg",
+  },
   fields: [
     {
       type: "string",