All files / packages/sds-subsystems/.storybook/addons/theme-builder/src/components ColorSwatch.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 && 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,
};
 
export default Swatch;