Use IconButton instead of RadioButton

Yoast · Oct 12, 2017 · 5b3060e · 5b3060e
1 parent 8784e8f
commit 5b3060e
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 10 deletions.
diff --git a/composites/Plugin/Shared/components/Button.js b/composites/Plugin/Shared/components/Button.js
@@ -135,7 +135,7 @@ export function addFontSizeStyles( component ) {
  *
  * @returns {ReactElement} Component with applied styles.
  */
-export const addButtonStyles = _flow( [ addBaseStyle, addFocusStyle, addHoverStyle, addActiveStyle ] );
+export const addButtonStyles = flow( [ addBaseStyle, addFocusStyle, addHoverStyle, addActiveStyle ] );
 
 /**
  * Returns a basic styled button.
@@ -221,3 +221,86 @@ IconButton.propTypes = {
 	iconColor: PropTypes.string.isRequired,
 	children: PropTypes.string,
 };
+
+export const ChangingIconButtonBase = ( props ) => {
+	console.log( props.checkedIcon );
+
+	if ( props.checked ) {
+		return <IconButton
+			icon={ props.checkedIcon }
+			iconColor={ props.checkedIconColor }
+			backgroundColor={ props.checkedBackground }
+		/>;
+	}
+	return <IconButton
+		icon={ props.uncheckedIcon }
+		iconColor={ props.uncheckedIconColor }
+		backgroundColor={ props.uncheckedBackground }
+	/>;
+};
+
+ChangingIconButtonBase.propTypes = {
+	checked: PropTypes.bool,
+	uncheckedIcon: PropTypes.string,
+	checkedIcon: PropTypes.string,
+	uncheckedIconColor: PropTypes.string,
+	uncheckedBackground: PropTypes.string,
+	checkedIconColor: PropTypes.string,
+	checkedBackground: PropTypes.string,
+	children: PropTypes.string,
+};
+
+/*
+const ChangingIconButtonBase = styled( IconButton )`
+	box-shadow: ${ props => props.checked
+		? `inset 0 2px 0 ${ rgba( props.checkedBoxShadowColor, 0.7 ) }`
+		: `0 1px 0 ${ rgba( props.uncheckedBoxShadowColor, 0.7 ) }` };
+	height: ${ props => props.checked ? "25px" : "24px" };
+`;
+*/
+export const ChangingIconButton = ( props ) => {
+	return (
+		<ChangingIconButtonBase
+			onClick={ props.onClick }
+			id={ props.id }
+			checked={ props.checked }
+			htmlFor={ props.id }
+			checkedIcon={ props.checkedIcon }
+			checkedIconColor={ props.checkedIconColor }
+			uncheckedIcon={ props.uncheckedIcon }
+			uncheckedIconColor={ props.uncheckedIconColor }
+			uncheckedBoxShadowColor={ props.uncheckedBoxShadowColor }
+			checkedBoxShadowColor={ props.checkedBoxShadowColor }
+			checkedBackground={ props.checkedBackground }
+			uncheckedBackground={ props.uncheckedBackground }
+			aria-label={ props.id }
+			aria-checked={ props.checked }
+		>
+		</ChangingIconButtonBase>
+
+	);
+};
+
+ChangingIconButton.propTypes = {
+	id: PropTypes.string.isRequired,
+	onClick: PropTypes.func.isRequired,
+	boxShadowColor: PropTypes.string,
+	uncheckedBoxShadowColor: PropTypes.string,
+	checkedBoxShadowColor: PropTypes.string,
+	checkedBackground: PropTypes.string,
+	uncheckedBackground: PropTypes.string,
+	checkedIconColor: PropTypes.string,
+	uncheckedIconColor: PropTypes.string,
+	checkedIcon: PropTypes.func.isRequired,
+	uncheckedIcon: PropTypes.func.isRequired,
+	checked: PropTypes.bool.isRequired,
+};
+
+ChangingIconButton.defaultProps = {
+	uncheckedBoxShadowColor: colors.$color_button_border,
+	checkedBoxShadowColor: colors.$color_purple,
+	checkedBackground: colors.$color_pink_dark,
+	uncheckedBackground: colors.$color_button,
+	checkedIconColor: colors.$color_white,
+	uncheckedIconColor: colors.$color_button_text,
+};
diff --git a/composites/Plugin/Shared/components/RadioButton.js b/composites/Plugin/Shared/components/RadioButton.js
@@ -22,8 +22,8 @@ export const RadioButtonLabel = styled.label`
 	border: 1px solid ${ colors.$color_button_border };
 	background: ${ props => props.checked ? props.checkedBackground : props.uncheckedBackground };
 	box-shadow: ${ props => props.checked
-	? `inset 0 2px 0 ${ rgba( props.checkedBoxShadowColor, 0.7 ) }`
-	: `0 1px 0 ${ rgba( props.uncheckedBoxShadowColor, 0.7 ) }` };
+		? `inset 0 2px 0 ${ rgba( props.checkedBoxShadowColor, 0.7 ) }`
+		: `0 1px 0 ${ rgba( props.uncheckedBoxShadowColor, 0.7 ) }` };
 	border-radius: 3px;
 	cursor: pointer;
 	outline: none;
@@ -37,8 +37,10 @@ const IconRadioButton = ( props ) => {
 			<RadioButtonBase
 				type="radio"
 				id={ props.id }
-				name={ props.name }/>
+				name={ props.name }
+			/>
 			<RadioButtonLabel
+				onClick={ props.onClick }
 				className="label"
 				checked={ props.checked }
 				htmlFor={ props.id }
@@ -60,6 +62,7 @@ const IconRadioButton = ( props ) => {
 
 IconRadioButton.propTypes = {
 	id: PropTypes.string.isRequired,
+	onClick: PropTypes.func.isRequired,
 	boxShadowColor: PropTypes.string,
 	uncheckedBoxShadowColor: PropTypes.string,
 	checkedBoxShadowColor: PropTypes.string,

diff --git a/style-guide/svg/eye-slash.svg b/style-guide/svg/eye-slash.svg
diff --git a/style-guide/svg/eye.svg b/style-guide/svg/eye.svg
diff --git a/style-guide/svg/index.js b/style-guide/svg/index.js
@@ -5,3 +5,5 @@ export { default as angleRight } from "./angle-right.svg";
 export { default as angleUp } from "./angle-up.svg";
 export { default as angleDown } from "./angle-down.svg";
 export { default as questionCircle } from "./question-circle.svg";
+export { default as eye } from "./eye.svg";
+export { default as eyeSlash } from "./eye-slash.svg";