import { __ } from "@wordpress/i18n"; import { useState } from "@wordpress/element"; import { ColorPicker, TypographyNew, Spacing, SPRangeControl, ButtonGroup, BoxShadow, Popover, FlatBorder, Divider, Border, SpProNotice, } from "@easy-accordion/components"; export const TitleStyleTab = ({ attributes, setAttributes }) => { const [colorState, setColorState] = useState("normal"); const { accordionTitleTypography, accordionTitleFontSize, accordionTitleLetterSpacing, accordionTitleLineHeight, accordionTitleBackground, accordionTitlePadding, accordionTitleColors, accordionTitleBorderRadius, accordionTitleBorder, accordionTitleBorderWidth, } = attributes; const shadowKey = { normal: "accordionTitleNormalBoxShadow", hover: "accordionTitleHoverBoxShadow", active: "accordionTitleActiveBoxShadow", }; return ( <> {/* title background */} ); }; export const IconStyleTab = ({ attributes, setAttributes }) => { const { toggleIconColors, toggleIconBackground, toggleIconBorder, toggleIconBorderWidth, toggleIconBorderRadius, toggleIconPadding, toggleIconMargin, } = attributes; return ( <> ); }; export const ImageStyleTab = ({ attributes, setAttributes }) => { const { imgBorder, imgBorderWidth, imgBorderRadius, imgOverlayColor } = attributes; return ( <> ); }; export const ImageContentStyleTab = ({ attributes, setAttributes }) => { const { accordionTitleColors, accordionTitleTypography, accordionTitleFontSize, accordionTitleLineHeight, accordionTitleLetterSpacing, descriptionTypography, descriptionFontSize, descriptionLineHeight, descriptionLetterSpacing, descriptionColor, contentPadding, showTitle, showDescription, } = attributes; return ( <> {showTitle && ( <> )} {showDescription && ( <> )} ); }; export const VerticalContentStyleTab = ({ attributes, setAttributes }) => { const { accordionContentTypography, accordionContentFontSize, accordionContentLineHeight, accordionContentLetterSpacing, accordionContentColor, accordionContentBackground, accordionContentPadding, contentShowCloseButton, blockName, itemContentBorder, itemContentBorderWidth, itemContentBorderRadius, } = attributes; return ( <> {blockName === "sidebar-tab-accordion" && ( <> )} ); }; export const PostMetaStyleTab = ({ attributes, setAttributes }) => { const { postMetaFontSize, postMetaTypography, postMetaLetterSpacing, postMetaLineHeight, postMetaColor, postMetaGap, postMetaMargin, } = attributes; return ( <> ); }; export const PostContentStyleTab = ({ attributes, setAttributes }) => { const { template, blockName, excerptFontSize, excerptTypography, excerptLetterSpacing, excerptLineHeight, excerptColor, contentPadding, ContentBackground, priceTypography, priceFontSize, priceLineHeight, priceLetterSpacing, priceColor, addToCartTypography, addToCartFontSize, addToCartLineHeight, addToCartLetterSpacing, cartButtonColors, cartButtonBgColors, cartButtonBorder, cartButtonBorderWidth, cartButtonBorderRadius, cartButtonPadding, accordionTitleColors, accordionTitleTypography, accordionTitleFontSize, accordionTitleFontSpacing, accordionTitleLineHeight, } = attributes; const [toggleState, setToggleState] = useState("color"); const toggleBtnColors = { color: "#2F2F2F", hoverColor: "#FFFFFF", }; const toggleBtnBgColors = { color: "#FAFAFA", hoverColor: "#2F2F2F", }; return ( <> {blockName === "product-accordion" && ( <> {template !== "product-accordion-one" && ( <> )} )} {blockName === "product-accordion" && ( <> setToggleState(e)} /> setAttributes({ cartButtonColors: { ...cartButtonColors, [toggleState]: e, }, }) } defaultColor={toggleBtnColors[toggleState]} /> setAttributes({ cartButtonBgColors: { ...cartButtonBgColors, [toggleState]: e, }, }) } defaultColor={toggleBtnBgColors[toggleState]} /> )} ); };