components ColorSwatch.jsx

0% Statements 0/9

0% Branches 0/6

0% Functions 0/1

0% Lines 0/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from 'react';
import PropTypes from 'prop-types';
 
const Swatch = ({ color, style, label, labels }) => {
  const innerStyle = {
    backgroundColor: color,
    ...style,
  };
  let assistiveText = label || color;
 
  // falsey values output a transparent swatch
  if (!color) {
    innerStyle.backgroundImage = 'linear-gradient(-45deg, white 47%, #870500 0, #870500 53%, white 0)';
    if (labels?.swatchTabTransparentSwatch) {
      assistiveText = labels.swatchTabTransparentSwatch;
    }
  }
 
  return (
    <span className="slds-swatch slds-m-right_small slds-m-bottom_x-small" style={innerStyle}>
      <span className="slds-assistive-text">{assistiveText}</span>
    </span>
  );
};
 
Swatch.propTypes = {
  color: PropTypes.string.isRequired,
  style: PropTypes.object,
  label: PropTypes.string,
  labels: PropTypes.object,
};
 
export default Swatch;