Tile Tastic

Tastic name:

Tile

Page type:

All pages

Example image:

Tile Tastic

Schema.json:

{
    "tasticType": "frontastic/content/tile",
    "name": "Tile",
    "category": "Content",
    "icon": "image",
    "schema": [
        {
            "name": "Image",
            "helpText": "Customize your image",
            "fields": [
                {
                    "label": "Image",
                    "field": "image",
                    "translatable": false,
                    "type": "media",
                    "required": true
                }
            ]
        },
        {
            "name": "Message",
            "helpText": "Customize your tile message",
            "fields": [
                {
                    "label": "Topic",
                    "field": "topic",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                }
            ]
        },
        {
            "name": "Message placement",
            "helpText": "Choose the placement of the Tastic",
            "fields": [
                {
                    "label": "Vertical Position",
                    "field": "verticalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": false,
                    "default": "bottom",
                    "values": [
                        {
                            "value": "top",
                            "name": "Top"
                        },
                        {
                            "value": "middle",
                            "name": "Middle"
                        },
                        {
                            "value": "bottom",
                            "name": "Bottom"
                        }
                    ]
                },
                {
                    "label": "Horizontal Position",
                    "field": "horizontalPosition",
                    "translatable": false,
                    "type": "enum",
                    "required": false,
                    "default": "left",
                    "values": [
                        {
                            "value": "left",
                            "name": "Left"
                        },
                        {
                            "value": "center",
                            "name": "Center"
                        },
                        {
                            "value": "right",
                            "name": "Right"
                        }
                    ]
                }
            ]
        },
        {
            "name": "Button",
            "helpText": "Customize your button",
            "fields": [
                {
                    "label": "Button label",
                    "field": "buttonLabel",
                    "translatable": true,
                    "type": "string",
                    "required": false,
                    "default": ""
                },
                {
                    "label": "Link",
                    "field": "reference",
                    "translatable": false,
                    "required": false,
                    "type": "reference",
                    "default": null
                },
                {
                    "label": "Whole tile clickable",
                    "field": "isClickable",
                    "type": "boolean",
                    "default": false
                }
            ]
        }
    ]
}

Tastic.jsx:

import React, { FunctionComponent } from 'react'
import { connect } from 'react-redux'

import { Tastic } from '@frontastic/catwalk/src/js/types/frontend'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import Tile from '../../../patterns/molecules/Tile'

export interface TileTasticData {
     image?: any;
     topic: string;
     title: string;
     verticalPosition: string;
     horizontalPosition: string;
     buttonLabel: string;
     reference: any;
     isClickable: boolean;
}

export interface Props {
    tastic: Tastic,
    data: TileTasticData,
}

export const TileTastic: FunctionComponent<props> = ({ data, tastic }: Props) => {
    return (
  	<Tile
		image="{data.image}" 
		topic="{data.topic}" 
		title="{data.title}" 
		verticalPosition="{data.verticalPosition}" 
		horizontalPosition="{data.horizontalPosition}" 
		buttonLabel="{data.buttonLabel}" 
		reference="{data.reference}" 
isClickable="{data.isClickable}" 
	/>
    )
}

export default tastify({ translate: true })(TileTastic)

Still need help? Contact us Contact us