f3ff7b7186
- WordPress 6.9.4 (es_ES) with Kadence theme - Homepage: Hero, La Asociación, Pilares, Beneficios, Eventos, Miembros, Hazte Miembro, Contacto - Brand identity: #13294b navy, #a12932 burgundy, #c69c48 gold - Fonts: Raleway (headings) + Source Sans 3 (body) + Lato (UI) - Plugins: Kadence Blocks, Polylang, Contact Form 7 - Custom CSS with full brand styling and responsive layout - HTTPS enforced via wp-config.php proxy detection
105 lines
2.2 KiB
JavaScript
105 lines
2.2 KiB
JavaScript
import PropTypes from "prop-types";
|
|
import Icons from "./icons";
|
|
import { __ } from "@wordpress/i18n";
|
|
const { Component, Fragment } = wp.element;
|
|
const { Button, Popover, Dashicon, ColorIndicator, Tooltip, Icon } =
|
|
wp.components;
|
|
// /**
|
|
// * WordPress dependencies
|
|
// */
|
|
// import { site, Icon } from '@wordpress/icons';
|
|
|
|
export const SwatchesControl = ({
|
|
colors,
|
|
isPalette,
|
|
onClick = () => {},
|
|
circleSize,
|
|
circleSpacing,
|
|
}) => {
|
|
const handleClick = (color, swatch) => {
|
|
onClick(
|
|
{
|
|
hex: color,
|
|
},
|
|
swatch
|
|
);
|
|
};
|
|
return (
|
|
<div
|
|
style={{
|
|
paddingBottom: "15px",
|
|
}}
|
|
className="kadence-swatches-wrap"
|
|
>
|
|
{colors.map((colorObjOrString) => {
|
|
const c =
|
|
typeof colorObjOrString === "string"
|
|
? { color: colorObjOrString }
|
|
: colorObjOrString;
|
|
const key = `${c.color}${c.slug || ""}`;
|
|
return (
|
|
<div
|
|
key={key}
|
|
style={{
|
|
width: circleSize,
|
|
height: circleSize,
|
|
marginBottom: 0,
|
|
transform: "scale(1)",
|
|
transition: "100ms transform ease",
|
|
}}
|
|
className="kadence-swatche-item-wrap"
|
|
>
|
|
<Button
|
|
className={`kadence-swatch-item ${
|
|
isPalette === c.slug
|
|
? "swatch-active"
|
|
: "swatch-inactive"
|
|
}`}
|
|
style={{
|
|
height: "100%",
|
|
width: "100%",
|
|
border: "1px solid rgb(218, 218, 218)",
|
|
borderRadius: "50%",
|
|
color:
|
|
c.slug === "palette10"
|
|
? "var(--global-palette10)"
|
|
: `${c.color}`,
|
|
boxShadow: `inset 0 0 0 ${circleSize / 2}px`,
|
|
transition: "100ms box-shadow ease",
|
|
}}
|
|
onClick={() => handleClick(c.color, c.slug)}
|
|
tabIndex={0}
|
|
>
|
|
{/* <Icon
|
|
className="dashicon"
|
|
icon={ site }
|
|
/> */}
|
|
<Icon className="dashicon" icon={Icons.globe} />
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
SwatchesControl.defaultProps = {
|
|
circleSize: 26,
|
|
circleSpacing: 15,
|
|
};
|
|
|
|
SwatchesControl.propTypes = {
|
|
colors: PropTypes.arrayOf(
|
|
PropTypes.oneOfType([
|
|
PropTypes.string,
|
|
PropTypes.shape({
|
|
color: PropTypes.string,
|
|
slug: PropTypes.string,
|
|
name: PropTypes.string,
|
|
}),
|
|
])
|
|
).isRequired,
|
|
isPalette: PropTypes.string,
|
|
};
|
|
|
|
export default SwatchesControl;
|