Merge pull request #1597 from tinacms/style-updates-3

Style Updates
tinacms · Jun 30, 2023 · 709280d · 709280d
2 parents 686d96a + 7daff8e
commit 709280d
Show file tree

Hide file tree

Showing 41 changed files with 502 additions and 355 deletions.
diff --git a/components/blocks/Actions.template.ts b/components/blocks/Actions.template.ts
@@ -4,6 +4,9 @@ export const actionsTemplate = {
   type: 'object',
   list: true,
   ui: {
+    itemProps: (item) => {
+      return { label: item?.label }
+    },
     defaultItem: {
       variant: 'default',
       label: 'Secondary Action',

diff --git a/components/blocks/Actions.tsx b/components/blocks/Actions.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
-import { BiCopy } from 'react-icons/bi'
-import { IconRight } from './Icons'
+import { BiArrowBack, BiCopy } from 'react-icons/bi'
 import { copyToClipboard } from '../../components/layout/MarkdownContent'
 import { LinkButton } from '../../components/ui'
 
@@ -29,7 +28,10 @@ export const Actions = ({ items, align = 'left' }) => {
                 link={url}
                 color={variant}
               >
-                {label} {icon && <IconRight />}
+                {label}{' '}
+                {icon && (
+                  <BiArrowBack className="h-[1.125em] w-auto opacity-70 ml-2 -mr-1 -mt-1 rotate-180" />
+                )}
               </LinkButton>
             )
           })}

diff --git a/components/blocks/FeatureGrid.template.ts b/components/blocks/FeatureGrid.template.ts
@@ -4,6 +4,9 @@ import { actionsTemplate } from './Actions.template'
 export const featureGridTemplate: TinaTemplate = {
   label: 'Feature Grid',
   name: 'featureGrid',
+  ui: {
+    previewSrc: '/img/blocks/feature-grid.png',
+  },
   fields: [
     {
       name: 'items',

diff --git a/components/blocks/Features.template.ts b/components/blocks/Features.template.ts
@@ -9,34 +9,97 @@ export const featuresTemplate: TinaTemplate = {
   },
   fields: [
     {
-      name: 'items',
+      name: 'features',
       label: 'Feature Items',
       type: 'object',
       list: true,
-      templates: [
+      ui: {
+        itemProps: (item) => {
+          return { label: item?.headline }
+        },
+      },
+      fields: [
+        { name: 'headline', label: 'Headline', type: 'string' },
+        {
+          name: 'text',
+          label: 'Text',
+          ui: { component: 'textarea' },
+          type: 'string',
+        },
+        // @ts-ignore
+        actionsTemplate,
+        // Block field with image, video or text as template options
         {
-          label: 'Feature',
-          name: 'feature',
-          fields: [
-            { name: 'headline', label: 'Headline', type: 'string' },
+          name: 'media',
+          label: 'Media',
+          type: 'object',
+          list: true,
+          ui: {
+            min: 0,
+            max: 1,
+          },
+          templates: [
             {
-              name: 'text',
-              label: 'Text',
-              ui: { component: 'textarea' },
-              type: 'string',
+              name: 'image',
+              label: 'Image',
+              fields: [
+                {
+                  name: 'image',
+                  label: 'Image',
+                  type: 'image',
+                },
+              ],
+            },
+            {
+              name: 'video',
+              label: 'Video',
+              fields: [
+                {
+                  name: 'src',
+                  label: 'Video Source',
+                  description:
+                    'This is the Cloudinary Public ID, for example "tina-io/docs/quick-edit-demo".',
+                  type: 'string',
+                },
+              ],
             },
             {
-              name: 'media',
-              label: 'Media',
-              type: 'object',
+              name: 'code',
+              label: 'Code',
+              ui: {
+                defaultItem: {
+                  file: 'index.js',
+                  code: 'console.log("Hello World")',
+                  language: 'javascript',
+                  scale: 1,
+                },
+              },
               fields: [
-                { name: 'src', label: 'Image Source', type: 'string' },
-                { name: 'videoSrc', label: 'Video Source', type: 'string' },
-                { name: 'cli', label: 'CLI', type: 'boolean' },
+                {
+                  name: 'file',
+                  label: 'Filename',
+                  type: 'string',
+                },
+                {
+                  name: 'code',
+                  label: 'Code',
+                  type: 'string',
+                  ui: {
+                    component: 'textarea',
+                  },
+                },
+                {
+                  name: 'language',
+                  label: 'Language',
+                  type: 'string',
+                },
+                {
+                  name: 'scale',
+                  label: 'Text Scale',
+                  type: 'number',
+                },
               ],
             },
-            // @ts-ignore
-            actionsTemplate,
           ],
         },
       ],