@yoast/style-guide - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0-rc.3

colors.json

@@ -1,1 +0,1 @@
-{"$palette_white":"#fff","$palette_grey_ultra_light":"#f7f7f7","$palette_grey_light":"#f1f1f1","$palette_grey_medium_light":"#e2e4e7","$palette_grey":"#ddd","$palette_grey_medium":"#ccc","$palette_grey_disabled":"#a0a5aa","$palette_grey_medium_dark":"#888","$palette_grey_text_light":"#767676","$palette_grey_text":"#616161","$palette_grey_dark":"#555","$palette_black":"#000","$palette_purple":"#5d237a","$palette_purple_dark":"#6c2548","$palette_pink":"#d73763","$palette_pink_light":"#e1bee7","$palette_pink_dark":"#a4286a","$palette_blue":"#0066cd","$palette_blue_light":"#a9a9ce","$palette_blue_medium":"#1e8cbe","$palette_blue_link":"#0073aa","$palette_blue_focus":"#5b9dd9","$palette_yoast_focus":"#007fff","$palette_blue_dark":"#084a67","$palette_green":"#77b227","$palette_green_light":"#7ad03a","$palette_green_medium_light":"#64a60a","$palette_green_medium":"#008a00","$palette_green_blue":"#009288","$palette_orange":"#dc5c04","$palette_orange_light":"#ee7c1b","$palette_red":"#dc3232","$palette_red_light":"#f9bdbd","$palette_yellow":"#ffeb3b","$palette_yellow_score":"#f5c819","$palette_button_upsell":"#fec228","$palette_button_upsell_hover":"#f2ae01","$palette_link_text":"#004973","$palette_error_background":"#f9dcdc","$palette_error_text":"#8f1919","$palette_error_emphasis":"#dc3232","$palette_info_background":"#cce5ff","$palette_info_text":"#00468f","$palette_info_emphasis":"#007dff","$palette_success_background":"#e2f2cc","$palette_success_text":"#395315","$palette_success_emphasis":"#6ea029","$palette_warning_background":"#fff3cd","$palette_warning_text":"#674e00","$palette_warning_emphasis":"#ffc201","$color_bad":"#dc3232","$color_ok":"#ee7c1b","$color_good":"#7ad03a","$color_noindex":"#1e8cbe","$color_score_icon":"#888","$color_white":"#fff","$color_black":"#000","$color_green":"#77b227","$color_green_medium":"#008a00","$color_green_blue":"#009288","$color_grey":"#ddd","$color_grey_dark":"#555","$color_purple":"#5d237a","$color_purple_dark":"#6c2548","$color_pink":"#d73763","$color_pink_light":"#e1bee7","$color_pink_dark":"#a4286a","$color_blue":"#0066cd","$color_blue_light":"#a9a9ce","$color_blue_dark":"#084a67","$color_red":"#dc3232","$color_border_light":"#f7f7f7","$color_border_gutenberg":"#e2e4e7","$color_border":"#ccc","$color_input_border":"#ddd","$color_help_text":"#767676","$color_upsell_text":"#767676","$color_background_light":"#f7f7f7","$color_button":"#f7f7f7","$color_button_text":"#555","$color_button_border":"#ccc","$color_button_hover":"#fff","$color_button_border_hover":"#888","$color_button_text_hover":"#000","$color_button_border_active":"#000","$color_button_upsell":"#fec228","$color_button_upsell_hover":"#f2ae01","$color_headings":"#555","$color_marker_inactive":"#555","$color_marker_active":"#fff","$color_marker_disabled":"#a0a5aa","$color_error":"#dc3232","$color_orange":"#dc5c04","$color_orange_hover":"#c35204","$color_grey_hover":"#cecece","$color_pink_hover":"#cc2956","$color_grey_cta":"#ddd","$color_grey_line":"#ddd","$color_grey_quote":"#616161","$color_grey_text":"#616161","$color_grey_text_light":"#767676","$color_snippet_focus":"#1e8cbe","$color_snippet_hover":"#ccc","$color_snippet_active":"#555","$color_blue_link":"#0073aa","$color_blue_focus":"#5b9dd9","$color_blue_focus_shadow":"#1e8cbe","$color_yoast_focus":"#007fff","$color_yoast_focus_outer":"rgba(0,127,255,0.25)","$color_grey_medium_dark":"#888","$color_green_medium_light":"#64a60a","$color_grey_disabled":"#a0a5aa","$color_grey_medium":"#ccc","$color_grey_light":"#f1f1f1","$color_yellow":"#ffeb3b","$color_yellow_score":"#f5c819","$color_error_message":"#f9bdbd","$color_alert_link_text":"#004973","$color_alert_error_text":"#8f1919","$color_alert_error_background":"#f9dcdc","$color_alert_info_text":"#00468f","$color_alert_info_background":"#cce5ff","$color_alert_success_text":"#395315","$color_alert_success_background":"#e2f2cc","$color_alert_warning_text":"#674e00","$color_alert_warning_background":"#fff3cd"}
+{"$palette_white":"#fff","$palette_grey_ultra_light":"#f7f7f7","$palette_grey_light":"#f1f1f1","$palette_grey_medium_light":"#e2e4e7","$palette_grey":"#ddd","$palette_grey_medium":"#ccc","$palette_grey_disabled":"#a0a5aa","$palette_grey_medium_dark":"#888","$palette_grey_text_light":"#767676","$palette_grey_text":"#616161","$palette_grey_dark":"#555","$palette_black":"#000","$palette_purple":"#5d237a","$palette_purple_dark":"#6c2548","$palette_pink":"#d73763","$palette_pink_light":"#e1bee7","$palette_pink_dark":"#a4286a","$palette_blue":"#0066cd","$palette_blue_light":"#a9a9ce","$palette_blue_medium":"#1e8cbe","$palette_blue_link":"#0073aa","$palette_blue_focus":"#5b9dd9","$palette_yoast_focus":"#007fff","$palette_blue_dark":"#084a67","$palette_green":"#77b227","$palette_green_light":"#7ad03a","$palette_green_medium_light":"#64a60a","$palette_green_medium":"#008a00","$palette_green_blue":"#009288","$palette_orange":"#dc5c04","$palette_orange_light":"#ee7c1b","$palette_red":"#dc3232","$palette_red_light":"#f9bdbd","$palette_yellow":"#ffeb3b","$palette_yellow_score":"#f5c819","$palette_button_upsell":"#fec228","$palette_button_upsell_hover":"#f2ae01","$palette_link_text":"#004973","$palette_error_background":"#f9dcdc","$palette_error_text":"#8f1919","$palette_error_emphasis":"#dc3232","$palette_info_background":"#cce5ff","$palette_info_text":"#00468f","$palette_info_emphasis":"#007dff","$palette_success_background":"#e2f2cc","$palette_success_text":"#395315","$palette_success_emphasis":"#6ea029","$palette_warning_background":"#fff3cd","$palette_warning_text":"#674e00","$palette_warning_emphasis":"#ffc201","$color_bad":"#dc3232","$color_ok":"#ee7c1b","$color_good":"#7ad03a","$color_noindex":"#1e8cbe","$color_score_icon":"#888","$color_white":"#fff","$color_black":"#000","$color_green":"#77b227","$color_green_medium":"#008a00","$color_green_blue":"#009288","$color_grey":"#ddd","$color_grey_dark":"#555","$color_purple":"#5d237a","$color_purple_dark":"#6c2548","$color_pink":"#d73763","$color_pink_light":"#e1bee7","$color_pink_dark":"#a4286a","$color_blue":"#0066cd","$color_blue_light":"#a9a9ce","$color_blue_dark":"#084a67","$color_red":"#dc3232","$color_border_light":"#f7f7f7","$color_border_gutenberg":"#e2e4e7","$color_border":"#ccc","$color_input_border":"#ddd","$color_help_text":"#767676","$color_upsell_text":"#767676","$color_background_light":"#f7f7f7","$color_button":"#f7f7f7","$color_button_text":"#555","$color_button_border":"#ccc","$color_button_hover":"#fff","$color_button_border_hover":"#888","$color_button_text_hover":"#000","$color_button_border_active":"#000","$color_button_upsell":"#fec228","$color_button_upsell_hover":"#f2ae01","$color_headings":"#555","$color_marker_inactive":"#555","$color_marker_active":"#fff","$color_marker_disabled":"#a0a5aa","$color_error":"#dc3232","$color_orange":"#dc5c04","$color_orange_hover":"#c35204","$color_grey_hover":"#cecece","$color_pink_hover":"#cc2956","$color_grey_cta":"#ddd","$color_grey_line":"#ddd","$color_grey_quote":"#616161","$color_grey_text":"#616161","$color_grey_text_light":"#767676","$color_snippet_focus":"#1e8cbe","$color_snippet_hover":"#ccc","$color_snippet_active":"#555","$color_blue_link":"#0073aa","$color_blue_focus":"#5b9dd9","$color_blue_focus_shadow":"#1e8cbe","$color_yoast_focus":"#007fff","$color_yoast_focus_outer":"rgba(0,127,255,0.25)","$color_grey_medium_dark":"#888","$color_green_medium_light":"#64a60a","$color_grey_disabled":"#a0a5aa","$color_grey_medium":"#ccc","$color_grey_light":"#f1f1f1","$color_yellow":"#ffeb3b","$color_yellow_score":"#f5c819","$color_error_message":"#f9bdbd","$color_alert_link_text":"#004973","$color_alert_error_text":"#8f1919","$color_alert_error_background":"#f9dcdc","$color_alert_info_text":"#00468f","$color_alert_info_background":"#cce5ff","$color_alert_success_text":"#395315","$color_alert_success_background":"#e2f2cc","$color_alert_warning_text":"#674e00","$color_alert_warning_background":"#fff3cd"}

helpers.js

@@ -0,2 +1,34 @@
+import styled from "styled-components";
+
+import { getDirectionalStyle } from "@yoast/helpers";
+import colors from "./colors";
+
 /**
+ * Returns an angleRight SVG.
+ *
+ * @param {string} color The desired color for the SVG.
+ *
+ * @returns {string} The SVG image.
+ */
+export const angleRight = ( color ) => "data:image/svg+xml;charset=utf8," + encodeURIComponent(
+	'<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">' +
+	'<path fill="' + color + '" d="M1152 896q0 26-19 45l-448 448q-19 19-45 19t-45-19-19-45v-896q0-26 19-45t45-19 45 19l448 448q19 19 19 45z" />' +
+	"</svg>"
+);
+
+/**
+ * Returns an angleLeft SVG.
+ *
+ * @param {string} color The desired color for the SVG.
+ *
+ * @returns {string} The SVG image.
+ */
+export const angleLeft = ( color ) => "data:image/svg+xml;charset=utf8," + encodeURIComponent(
+	'<svg width="1792" height="1792" viewBox="0 0 192 512" xmlns="http://www.w3.org/2000/svg">' +
+	'<path fill="' + color + '" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 ' +
+	'270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"/>' +
+	"</svg>"
+);
+
+/**
  * Converts a hexadecimal color notation in a RGB notation.
@@ -42,1 +74,58 @@ *
 }
+
+/**
+ * Takes a component and extends it with caret styles.
+ *
+ * @param {Component} Component The component to be extended.
+ *
+ * @returns {Component} Component with added style.
+ */
+export const withCaretStyles = Component => {
+	return styled( Component )`
+		&::before {
+			display: block;
+			position: absolute;
+			top: -1px;
+			${ getDirectionalStyle( "left", "right" ) }: -25px;
+			width: 24px;
+			height: 24px;
+			background-image: url( ${ getBackgroundImage } );
+			background-size: 25px;
+			content: "";
+		}
+	`;
+};
+
+/**
+ * Gets the background image based on the color from the props and the language direction.
+ *
+ * @param {Object} props The component's props.
+ *
+ * @returns {string} The background image.
+ */
+function getBackgroundImage( props ) {
+	const rtlStyle = getDirectionalStyle(
+		angleRight( getCaretColor( props ) ),
+		angleLeft( getCaretColor( props ) )
+	);
+
+	return rtlStyle( props );
+}
+
+/**
+ * Returns the color of the caret for an InputContainer based on the props.
+ *
+ * @param {Object} props The props for this InputContainer.
+ * @returns {string} The color the caret should have.
+ */
+function getCaretColor( props ) {
+	if ( props.isActive ) {
+		return colors.$color_snippet_focus;
+	}
+
+	if ( props.isHovered ) {
+		return colors.$color_snippet_hover;
+	}
+
+	return "transparent";
+}

index.js

 import colors from "./colors";
 import breakpoints from "./responsive-breakpoints";
-import { rgba } from "./helpers";
+import { rgba, withCaretStyles, angleRight, angleLeft } from "./helpers";
 
@@ -9,2 +9,5 @@ export {
 	rgba,
+	withCaretStyles,
+	angleRight,
+	angleLeft,
 };

package.json

 {
   "name": "@yoast/style-guide",
-  "version": "0.11.2",
+  "version": "0.12.0-rc.3",
   "description": "Yoast style guide.",
@@ -23,3 +23,3 @@ "main": "index.js",
   },
-  "gitHead": "f85215b588519b4e9f54d06be3bfd3b7f9606131"
+  "gitHead": "37d894f0b13e31e2cdb0a3920d3c66ac1a024cc9"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26722

increased by10.56%

Lines of code

146

increased by204.17%

No dependency changes