End of info alert
+Full width example to test the cards wrapping.
diff --git a/packages/components/package.json b/packages/components/package.json index 72a6cc9da3..39319d65ee 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -13,7 +13,7 @@ "license": "GPL-3.0", "scripts": { "test": "jest", - "lint": "eslint . --max-warnings=96", + "lint": "eslint . --max-warnings=94", "prepublishOnly": "rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && cp .babelrc dist/.babelrc" }, "jest": { @@ -27,6 +27,7 @@ "@yoast/helpers": "^0.4.0-rc.2", "@yoast/style-guide": "^0.4.0-rc.1", "interpolate-components": "^1.1.1", + "js-cookie": "^2.2.0", "lodash": "^4.17.11", "prop-types": "^15.7.2", "react-modal": "^3.8.1", diff --git a/packages/components/src/Alert.js b/packages/components/src/Alert.js new file mode 100644 index 0000000000..c229859d56 --- /dev/null +++ b/packages/components/src/Alert.js @@ -0,0 +1,265 @@ +/* External dependencies */ +import React from "react"; +import styled from "styled-components"; +import PropTypes from "prop-types"; +import Cookies from "js-cookie"; +import { __ } from "@wordpress/i18n"; + +/* Yoast dependencies */ +import { colors } from "@yoast/style-guide"; + +/** + * Returns an error icon SVG data URI. + * + * @param {string} color The desired color for the SVG. + * + * @returns {string} The SVG image data URI. + */ +const errorIcon = ( color ) => + "data:image/svg+xml;charset=utf8," + encodeURIComponent( + '" + ); + +/** + * Returns an info icon SVG data URI. + * + * @param {string} color The desired color for the SVG. + * + * @returns {string} The SVG image data URI. + */ +export const infoIcon = ( color ) => + "data:image/svg+xml;charset=utf8," + encodeURIComponent( + '" + ); + +/** + * Returns a warning icon SVG data URI. + * + * @param {string} color The desired color for the SVG. + * + * @returns {string} The SVG image data URI. + */ +export const warningIcon = ( color ) => + "data:image/svg+xml;charset=utf8," + encodeURIComponent( + '" + ); + +/** + * Returns a success icon SVG data URI. + * + * @param {string} color The desired color for the SVG. + * + * @returns {string} The SVG image data URI. + */ +export const successIcon = ( color ) => + "data:image/svg+xml;charset=utf8," + encodeURIComponent( + '" + ); + +/** + * Returns a close icon SVG data URI. + * + * @param {string} color The desired color for the SVG. + * + * @returns {string} The SVG image data URI. + */ +export const closeIcon = ( color ) => + "data:image/svg+xml;charset=utf8," + encodeURIComponent( + '" + ); + +const AlertBody = styled.div` + display: flex; + align-items: center; + font-size: 14px; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 16px; + color: ${ props => props.alertColor }; + background: ${ props => props.alertBackground }; + margin-bottom: 20px; + + a { + color: ${ colors.$color_alert_blue_link }; + + &:hover, + &:focus { + color: ${ colors.$color_alert_blue_link }; + } + } +`; + +const AlertIcon = styled.span` + align-self: flex-start; + background-position: 50%; + background-repeat: no-repeat; + background-size: 1rem; + background-image: url( ${ props => props.icon } ); + height: 1rem; + min-width: 1rem; + margin: 0.125rem 1em 0 0.125rem; +`; + +const AlertMessage = styled.div` + flex: 1 1 auto; + + & p:first-child { + margin-top: 0; + } + + & p:last-child { + margin-bottom: 0; + } +`; + +const StyledCloseButtonTopRight = styled.button` + align-self: flex-start; + height: 1.25rem; + min-width: 1.25rem; + margin: 0 0 0 1em; + padding: 0; + border: 0; + cursor: pointer; + background: transparent url( ${ props => props.iconSource } ) no-repeat center; + background-size: ${ props => props.iconSize }; + + &:hover, + &:focus { + opacity: 1; + } +`; + +/** + * Returns the rendered Alert component. + * + * @param {Object} props The props to use. + * + * @returns {ReactElement} The rendered Alert component. + */ +class Alert extends React.Component { + /** + * Initializes the class with the specified props. + * + * @param {Object} props The props to be passed to the class that was extended from. + * + * @returns {void} + */ + constructor( props ) { + super( props ); + this.state = { + hideAlert: false, + }; + this.onCrossClick = this.onCrossClick.bind( this ); + this.options = this.getTypeDisplayOptions(); + } + + /** + * On init, checks for the cookie name provided in the props and if present hides the alert. + * + * @returns {void} + */ + componentDidMount() { + if ( Cookies.get( this.props.cookieName ) ) { + this.setState( { hideAlert: true } ); + } + } + + /** + * Returns the colors and icon to be used based on the type provided to the props. + * + * @returns {object} Options with colors and icons to be used. + */ + getTypeDisplayOptions() { + switch ( this.props.type ) { + case "error": + return { + color: colors.$color_alert_error_red, + background: colors.$color_alert_error_red_light, + icon: errorIcon( colors.$color_alert_error_red ), + closeIcon: closeIcon( colors.$color_alert_error_red ), + }; + case "success": + return { + color: colors.$color_alert_success_green, + background: colors.$color_alert_success_green_light, + icon: successIcon( colors.$color_alert_success_green ), + closeIcon: closeIcon( colors.$color_alert_success_green ), + }; + case "warning": + return { + color: colors.$color_alert_warning_yellow, + background: colors.$color_alert_warning_yellow_light, + icon: warningIcon( colors.$color_alert_warning_yellow ), + closeIcon: closeIcon( colors.$color_alert_warning_yellow ), + }; + case "info": + default: + return { + color: colors.$color_alert_info_blue, + background: colors.$color_alert_info_blue_light, + icon: infoIcon( colors.$color_alert_info_blue ), + closeIcon: closeIcon( colors.$color_alert_info_blue ), + }; + } + } + + /** + * Called on cross click, hides the alert and saves this setting in a cookie. + * + * @returns {void} + */ + onCrossClick() { + Cookies.set( this.props.cookieName, "hide", { expires: 7 } ); + this.setState( { hideAlert: true } ); + } + + /** + * Renders the component. + * + * @returns {ReactElement} The rendered component. + */ + render() { + return ( + ! this.state.hideAlert && +End of info alert
++ End of + + info + + alert +
+