Remove CTA button. Modify button--link class to look exactly like an …

…a tag. Add documentation for buttons. Closes #115
codeforamerica · Dec 14, 2019 · 3fbce1c · 3fbce1c
1 parent c28980c
commit 3fbce1c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/app/assets/stylesheets/atoms/_buttons.scss b/app/assets/stylesheets/atoms/_buttons.scss
@@ -41,22 +41,6 @@
   }
 }
 
-.button--cta {
-  color: #FFFFFF;
-  background-color: $color-magenta;
-  border-color: $color-magenta;
-  box-shadow: 0 2px 0px $color-magenta-dark;
-  &:hover {
-      background-color: $color-magenta-dark;
-      border-color: $color-magenta-dark;
-      color: #FFFFFF;
-  }
-  &:active {
-      background-color: $color-magenta-dark;
-      border-color: $color-magenta-dark;
-  }
-}
-
 .button--primary {
     color: #FFFFFF;
     background-color: $color-teal;
@@ -98,12 +82,23 @@
 }
 
 .button--link {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  text-decoration: underline;
+  // This is in place to remove default HTML button styling
+  align-items: normal;
+  background-color: rgba(0,0,0,0);
+  border-style: none;
+  box-sizing: content-box;
   cursor: pointer;
-  color: inherit;
+  display: inline;
+  font: inherit;
+  height: auto;
+  padding: 0;
+  perspective-origin: 0 0;
+  text-align: start;
+  text-decoration: underline;
+  transform-origin: 0 0;
+  width: auto;
+
+  @extend a
 }
 
 .button__icon {

diff --git a/app/assets/stylesheets/molecules/_accordion.scss b/app/assets/stylesheets/molecules/_accordion.scss
@@ -7,7 +7,12 @@
 }
 
 .accordion__button {
-	@extend .button--link;
+	background: transparent;
+	border: none;
+	box-shadow: none;
+	cursor: pointer;
+	color: inherit;
+
 	position: relative;
 	display: block;
 	width: 100%;

diff --git a/app/views/examples/atoms/_buttons.html.erb b/app/views/examples/atoms/_buttons.html.erb
@@ -1,8 +1,4 @@
 <div class="h4">Small</div>
-<p>
-  <button class="button button--small button--cta">CTA Button</button>
-  <button class="button button--small button--cta button--disabled" disabled>Disabled CTA Button</button>
-</p>
 <p>
   <button class="button button--small button--primary">Primary Button</button>
   <button class="button button--small button--primary button--disabled" disabled>Disabled Primary Button</button>
@@ -17,10 +13,6 @@
 </p>
 
 <p class="h4">Standard</p>
-<p>
-  <button class="button button--cta">CTA Button</button>
-  <button class="button button--cta button--disabled" disabled>Disabled CTA Button</button>
-</p>
 <p>
   <button class="button button--primary">Primary Button</button>
   <button class="button button--primary button--disabled" disabled>Disabled Primary Button</button>
@@ -40,5 +32,18 @@
   <button class="button"><i class="button__icon--left icon-arrow_back"></i></span> Button with icon</button>
 </p>
 <p>
-  <button class="button button--link">A button styled to look like a link</button>
+  <button class="button--link">A button styled to look like a link</button>
+</p>
+
+<p class="pattern__explanation">
+  The teal primary is your default button. White buttons are for secondary actions.
+</p>
+<p class="pattern__explanation">
+  Danger buttons tell users to pause and make sure they’re certain of the action they’re about to take. It can be a way to signal that an action is discouraged (e.g. submitting a minimal application in GCF) , or irreversible (e.g. deleting a client in ClientComm).
+</p>
+<p class="pattern__explanation">
+  Disabled buttons are placeholders for actions that can’t be taken at the moment. Use these rather than hiding the button if you want to show that the action exits, or if your layout requires it.  Disabled buttons have a corresponding cursor state.
 </p>
+<p class="pattern__explanation">
+  When using the button styled like a link, don’t use the "button" class.
+</p>