wix-style-react/src/Palette/Palette.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import FillPreview from '../FillPreview/FillPreview';
import { classes } from './Palette.st.css';

/** A component to show a palette of colors */
class Palette extends React.PureComponent {
  static displayName = 'Palette';

  static propTypes = {
    /** Applies a data-hook HTML attribute that can be used in the tests. */
    dataHook: PropTypes.string,
    /** Defines an array of fill items for the palette. Accepts solid colors, gradients or images. */
    fill: PropTypes.array,
  };

  static defaultProps = {
    fill: [],
  };

  render() {
    const { fill, dataHook } = this.props;

    return (
      <div className={classes.root} data-hook={dataHook}>
        {fill.map((item, i) => (
          <FillPreview
            as="div"
            key={i}
            tabIndex={-1}
            className={classes.fillPreview}
            aspectRatio="none"
            fill={item}
          />
        ))}
      </div>
    );
  }
}

export default Palette;