Merge pull request #3 in BUDC/concorel-frontend from feature/CONCOREL…

…-82-apply-button-elements-styles to develop * commit '1cfb32e34cdbc58810d814cf67688f42042167b5': CONCOREL-81: Make possible to use some elements without base .button class. Reorganise demo CONCOREL-82: Update classes for form buttons preview in styleguide CONCOREL-82: Adjust data file to contain proper variant class CONCOREL-82: Refactor button styles to fit BEM
unic · Dec 19, 2016 · 7d8680f · 7d8680f
2 parents b940eed + 1cfb32e
commit 7d8680f
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 129 deletions.
diff --git a/source/assets/css/globals/_mixins.scss b/source/assets/css/globals/_mixins.scss
@@ -143,87 +143,3 @@
 		font-size: $max;
 	}
 }
-
-/**
- * Button
- */
-
-@mixin button() {
-	display: inline-block;
-	box-sizing: border-box;
-	padding: 15px 26px;
-	font-size: 15px;
-	font-weight: $fontWeightBlack;
-	text-decoration: none;
-	border: 0;
-	border-radius: 100px;
-	color: $colorWhite;
-	background-color: $colorMetallicBlue;
-	transition: all 0.25s ease-in-out;
-
-	&:hover,
-	&:active,
-	&:focus {
-		background-color: $colorDenim;
-	}
-
-	&[disabled],
-	&:disabled,
-	&.var_disabled,
-	{
-		&,
-		&:hover,
-		&:active,
-		&:focus {
-			color: rgba($colorWhite, .5);
-			background-color: rgba($colorMetallicBlue, .5);
-		}
-	}
-}
-
-@mixin animateButtonHover($iconWidth: 8px, $iconHeight: 10px, $margin: 6px){
-	position: relative;
-
-	@include iconDataurl('arrow-link', $after: true);
-	&:after {
-		content: '';
-		position: absolute;
-		opacity: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		right: 10px;
-		width: $iconWidth;
-		height: $iconHeight;
-		transition: all 0.25s ease-in-out;
-	}
-
-	&:hover,
-	&:active,
-	&:focus {
-
-		background-color: $colorDenim;
-		transform: translateX(- ($iconWidth + $margin) /2);
-		padding-right: 26px + $margin + $iconWidth;
-
-		&:after {
-			opacity: 1;
-			right: 10px + $iconWidth + $margin/2;
-		}
-	}
-
-	// Turn off animaton if the button is disabled
-	&[disabled],
-	&:disabled,
-	&.var_disabled {
-		&:after {
-			display: none;
-		}
-
-		&:hover,
-		&:active,
-		&:focus {
-			padding-right: 26px;
-			transform: none;
-		}
-	}
-}
diff --git a/source/modules/button/button.data.js b/source/modules/button/button.data.js
@@ -17,9 +17,9 @@ var data = _.merge(defaultData, {
 		{
 			meta: {
 				title: 'Secondary',
-				desc: 'Variant class: var_secondary'
+				desc: 'Variant class: button--secondary'
 			},
-			variant: 'var_secondary'
+			variant: 'button--secondary'
 		}
 		]
 	});

diff --git a/source/modules/button/button.hbs b/source/modules/button/button.hbs
@@ -1,16 +1,46 @@
-<h3> Button </h3>
-<p> <button {{#if variant}}class="{{variant}}"{{/if}}>Button</button> </p>
-<p> <button type="button" {{#if variant}}class="{{variant}}"{{/if}}>Button: type button</button> </p>
-<p> <button type="reset" {{#if variant}}class="{{variant}}"{{/if}}>Button: type reset</button> </p>
-<p> <button type="submit" {{#if variant}}class="{{variant}}"{{/if}}>Button: type submit</button> </p>
-<p> <button {{#if variant}}class="{{variant}}"{{/if}}disabled>Disabled</button></p>
-
-<h3> CTA </h3>
-<p> <a href="#" class="var_button {{variant}}"> CTA anchor </a> </p>
-<p> <a href="#" class="var_button var_disabled {{variant}}"> Disabled </a> </p>
-
-<h3> Button-like input </h3>
-<p> <input type="button" value="Input: type button" {{#if variant}}class="{{variant}}"{{/if}}> </p>
-<p> <input type="reset" value="Input: type reset" {{#if variant}}class="{{variant}}"{{/if}}> </p>
-<p> <input type="submit" value="Input: type submit" {{#if variant}}class="{{variant}}"{{/if}}> </p>
-<p> <input type="button" value="Disabled" {{#if variant}}class="{{variant}}"{{/if}} disabled> </p>
+<table class="sg_table_demo">
+	<thead>
+	<tr>
+		<th></th>
+		<th>Default</th>
+		<th>With animated hover</th>
+		<th>Disabled</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr>
+		<td>Button</td>
+		<td>
+			<button class="{{variant}}"> Button </button>
+		</td>
+		<td>
+			<button class="button--animated-right {{variant}}"> Button </button>
+		</td>
+		<td>
+			<button class="{{variant}}"disabled> Button </button>
+		</td>
+	</tr>
+	<tr>
+		<td>CTA</td>
+		<td>
+			<a href="#" class="button {{variant}}"> Call to action! </a>
+		</td>
+		<td>
+			<a href="#" class="button button--animated-right {{variant}}"> Call to action! </a>
+		</td>
+		<td>
+			<a href="#" class="button button--disabled {{variant}}"> Call to action! </a>
+		</td>
+	</tr>
+	<tr>
+		<td>Button-like input</td>
+		<td>
+			<input type="button" value="Input: type button" class="{{variant}}">
+		</td>
+		<td>-</td>
+		<td>
+			<input type="button" value="Input: type button" class="{{variant}}" disabled>
+		</td>
+	</tr>
+	</tbody>
+</table>
diff --git a/source/modules/button/button.md b/source/modules/button/button.md
@@ -1,7 +1,20 @@
-## Description
+Supported html elements that don't require base `.button` class are:
+* Input type button
+* Input type reset
+* Input type submit
+* Input type submit disabled
+* Button type button
+* Button type reset
+* Button type submit
+* Button type button disabled
+* Button
 
+Other elements, like anchors, spans or divs, require base class `.button` to use the default button styles.
 
+Available variations: 
+ * `.button--secondary` - secondary styles for buttons
+ * `.button--animated-right` - adds animated hover/active/focus effect. Currently **not** supported for `<input>` tags.
+
+All variations can be mixed together.
 
-## Integration
 
-Copy HTML.
diff --git a/source/modules/button/button.scss b/source/modules/button/button.scss
@@ -1,41 +1,124 @@
+// Primary button
+
 button,
 input[type='button'],
 input[type='reset'],
 input[type='submit'],
-a.var_button {
+.button {
+	display: inline-block;
+	box-sizing: border-box;
+	padding: 15px 26px;
+	font-size: 15px;
+	font-weight: $fontWeightBlack;
+	text-decoration: none;
+	border: 0;
+	border-radius: 100px;
+	color: $colorWhite;
+	background-color: $colorMetallicBlue;
+	transition: all 0.25s ease-in-out;
 
-	@include button;
+	&:hover,
+	&:active,
+	&:focus {
+		color: $colorWhite;
+		background-color: $colorDenim;
+	}
 
-	&.var_secondary {
-		color: $colorMetallicBlue;
-		background-color: $colorPaleGrey;
+	&[disabled],
+	&:disabled,
+	&.button--disabled,
+	{
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: rgba($colorWhite, .5);
+			background-color: rgba($colorMetallicBlue, .5);
+		}
+	}
+}
 
+
+// Secondary button
+.button--secondary,
+button.button--secondary,
+input[type='button'].button--secondary,
+input[type='reset'].button--secondary,
+input[type='submit'].button--secondary {
+	color: $colorMetallicBlue;
+	background-color: $colorPaleGrey;
+
+	&:hover,
+	&:active,
+	&:focus {
+		border: 0;
+		color: $colorWhite;
+		background-color: $colorMetallicBlue;
+	}
+
+	&[disabled],
+	&:disabled,
+	&.button--disabled,
+	{
+		&,
 		&:hover,
 		&:active,
 		&:focus {
-			border: 0;
-			color: $colorWhite;
-			background-color: $colorMetallicBlue;
+			color: rgba($colorMetallicBlue, .5);
+			background-color: rgba($colorPaleGrey, .5);
 		}
+	}
+}
+
+// Animation variations
+.button--animated-right {
+	$iconWidth: 8px;
+	$iconHeight: 10px;
+	$margin: 6px;
 
-		&[disabled],
-		&:disabled,
-		&.var_disabled,
-		{
-			&,
-			&:hover,
-			&:active,
-			&:focus {
-				color: rgba($colorMetallicBlue, .5);
-				background-color: rgba($colorPaleGrey, .5);
-			}
+	position: relative;
+
+	@include iconDataurl('arrow-link', $after: true);
+	&:after {
+		content: '';
+		position: absolute;
+		opacity: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		right: 10px;
+		width: $iconWidth;
+		height: $iconHeight;
+		transition: all 0.25s ease-in-out;
+	}
+
+	&:hover,
+	&:active,
+	&:focus {
+
+		background-color: $colorDenim;
+		padding-right: 26px + $margin + $iconWidth;
+
+		&:after {
+			opacity: 1;
+			right: 10px + $iconWidth + $margin/2;
 		}
 	}
 
+	// Turn off animaton if the button is disabled
+	&[disabled],
+	&:disabled,
+	&.button--disabled {
+		&:after {
+			display: none;
+		}
 
+		&:hover,
+		&:active,
+		&:focus {
+			padding-right: 26px;
+			transform: none;
+		}
+	}
 }
 
-button,
-a.var_button {
-	@include animateButtonHover;
-}
+
diff --git a/source/preview/assets/css/main.scss b/source/preview/assets/css/main.scss
@@ -416,3 +416,16 @@ $sg_defaultTransition: $sg_defaultTransitionProperty $sg_defaultTransitionDurati
 	padding: 1em 0;
 	position: relative;
 }
+
+// Preview: helper classes
+
+.sg_table_demo {
+	td {
+		padding: 10px 15px;
+		text-align: center;
+
+		&:first-child {
+			text-align: right
+		}
+	}
+}
diff --git a/source/preview/styleguide/forms.hbs b/source/preview/styleguide/forms.hbs
@@ -7,7 +7,7 @@
 					<fieldset>
 						<p><input type="button" value="Input type button"></p>
 						<p><input type="reset" value="Input type reset"></p>
-						<p><input type="submit" value="Input type submit"> </p>
+						<p><input type="submit" value="Input type submit"></p>
 						<p><input type="submit" value="Input type submit disabled" disabled></p>
 						<p><button type="button">Button type button</button></p>
 						<p><button type="reset">Button type reset</button></p>