From fa208cae28a9819cc2ea18a0b0a4dd2a8a63119f Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Tue, 27 Nov 2018 12:01:05 -0800 Subject: [PATCH 1/8] add new buttons, update docs and stories test --- modules/primer-marketing-buttons/README.md | 37 +++++------ .../primer-marketing-buttons/lib/button.scss | 63 ++++++++++++------- modules/primer-marketing-buttons/stories.js | 22 +++---- 3 files changed, 68 insertions(+), 54 deletions(-) diff --git a/modules/primer-marketing-buttons/README.md b/modules/primer-marketing-buttons/README.md index 1a7c8e62..f2500119 100644 --- a/modules/primer-marketing-buttons/README.md +++ b/modules/primer-marketing-buttons/README.md @@ -14,38 +14,31 @@ title: Marketing Buttons status: New Release --> -Marketing buttons extend primer-core buttons with more color and fill styles. +Marketing buttons come in different colors and sizes, and are also available in a blue outlined version. +## Colors and outlined -## Colors +Marketing buttons can be solid blue, outlined blue, or solid green. -Marketing buttons are available in orange. +The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis. ```html - + + + ``` -## Outline button colors +## Sizes -The `btn-outline` has also been extended with orange, purple, and green. +Available in two sizes, marketing buttons have a default size and a large size. ```html - -Link button - -``` - -## Transparent button - -A button can also be transparent and displayed with a white border with `btn-transparent`. - -```html -
- -
+ + + + + + ``` diff --git a/modules/primer-marketing-buttons/lib/button.scss b/modules/primer-marketing-buttons/lib/button.scss index 930de9e9..7df67d80 100644 --- a/modules/primer-marketing-buttons/lib/button.scss +++ b/modules/primer-marketing-buttons/lib/button.scss @@ -1,24 +1,45 @@ -.btn-orange { @include btn-solid($white, lighten($orange-500, 7.5%), darken($orange-500, 7.5%)); } - -.btn-outline-purple { @include btn-outline($purple); } -.btn-outline-orange { @include btn-outline($orange); } -.btn-outline-green { @include btn-outline($green); } - -@mixin btn-transparent-active { - color: $gray-800; - background-color: $white; - background-image: none; - border-color: $white; -} - -.btn-transparent { +.btn-mktg { + display: inline-block; + padding: $spacer-3 $spacer-4; + font-size: $h5-size; + font-weight: $font-weight-semibold; color: $white; - background-color: transparent; - background-image: none; - border: $border-width $border-style $white-fade-50; - - &:hover, - &:active { - @include btn-transparent-active; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + background-color: $blue-450; + border: 0; + border-radius: $border-radius; + transition: $transition-time / 2; + appearance: none; // Corrects inability to style clickable `input` types in iOS. + &:hover { + text-decoration: none; + background-color: $blue-500; + } +} + +.btn-primary-mktg { + background-color: $green-450 !important; + + &:hover { + background-color: $green-500 !important; + } +} + +.btn-large-mktg { + padding: 20px $spacer-5; + font-size: $h4-size; +} + +.btn-outline-mktg { + color: $blue-450 !important; + background-color: rgba($white, 0) !important; + box-shadow: 0 0 0 1px rgba($blue-450, 0.5) inset; + + &:hover { + color: $blue-500 !important; + text-decoration: none; + box-shadow: 0 0 0 1px rgba($blue-450, 1) inset; } } diff --git a/modules/primer-marketing-buttons/stories.js b/modules/primer-marketing-buttons/stories.js index f84d0241..dec371fa 100644 --- a/modules/primer-marketing-buttons/stories.js +++ b/modules/primer-marketing-buttons/stories.js @@ -2,20 +2,20 @@ import React from 'react' import { storiesOf } from '@storybook/react' storiesOf('Marketing buttons', module) - .add('Button colors', () => ( + .add('Button colors and outlined', () => (
- + + +
)) - .add('Outline colors', () => ( + .add('Button sizes', () => (
- - Link button - -
- )) - .add('Transparent button', () => ( -
- + + + + + +
)) From 2598e4c0b186baaecba659f766d177bd6e16ce5c Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Tue, 27 Nov 2018 12:12:54 -0800 Subject: [PATCH 2/8] adds color vars to primer-marketing-support --- modules/primer-marketing-buttons/package.json | 1 + modules/primer-marketing-support/lib/variables.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json index ce73f4a0..78b20149 100644 --- a/modules/primer-marketing-buttons/package.json +++ b/modules/primer-marketing-buttons/package.json @@ -31,6 +31,7 @@ "publish": "../../script/notify success" }, "dependencies": { + "primer-marketing-support": "1.5.4", "primer-support": "4.7.0" }, "keywords": [ diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 21f0ddb2..95560bc7 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -2,6 +2,10 @@ $alt-body-font: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif; $alt-mono-font: $mono-font; +// Colors +$blue-450: mix($blue-500, $blue-400, 50%); +$green-450: mix($green-500, $green-400, 50%); + // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12 // i.e. After 40px, we have 48, 64, 80, 96, etc. $spacer-7: $spacer * 6; // 48px From 43a6b2fc326e4102719066831807eb44e711984c Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Fri, 30 Nov 2018 16:59:19 -0800 Subject: [PATCH 3/8] add missing things --- modules/primer-marketing-buttons/README.md | 18 +++++++++--------- modules/primer-marketing-buttons/package.json | 2 +- modules/primer-marketing-buttons/stories.js | 18 +++++++++--------- .../lib/variables.scss | 3 +++ modules/primer-marketing-support/package.json | 5 ++++- 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/modules/primer-marketing-buttons/README.md b/modules/primer-marketing-buttons/README.md index f2500119..644a719f 100644 --- a/modules/primer-marketing-buttons/README.md +++ b/modules/primer-marketing-buttons/README.md @@ -23,9 +23,9 @@ Marketing buttons can be solid blue, outlined blue, or solid green. The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis. ```html - - - + + + ``` ## Sizes @@ -33,12 +33,12 @@ The solid blue and solid green buttons have more visual emphasis than the blue o Available in two sizes, marketing buttons have a default size and a large size. ```html - - - - - - + + + + + + ``` diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json index 78b20149..5d0cd372 100644 --- a/modules/primer-marketing-buttons/package.json +++ b/modules/primer-marketing-buttons/package.json @@ -31,7 +31,7 @@ "publish": "../../script/notify success" }, "dependencies": { - "primer-marketing-support": "1.5.4", + "primer-marketing-support": "^1.5.4", "primer-support": "4.7.0" }, "keywords": [ diff --git a/modules/primer-marketing-buttons/stories.js b/modules/primer-marketing-buttons/stories.js index dec371fa..8b0108de 100644 --- a/modules/primer-marketing-buttons/stories.js +++ b/modules/primer-marketing-buttons/stories.js @@ -4,18 +4,18 @@ import { storiesOf } from '@storybook/react' storiesOf('Marketing buttons', module) .add('Button colors and outlined', () => (
- - - + + +
)) .add('Button sizes', () => (
- - - - - - + + + + + +
)) diff --git a/modules/primer-marketing-support/lib/variables.scss b/modules/primer-marketing-support/lib/variables.scss index 95560bc7..c99e4b0f 100644 --- a/modules/primer-marketing-support/lib/variables.scss +++ b/modules/primer-marketing-support/lib/variables.scss @@ -6,6 +6,9 @@ $alt-mono-font: $mono-font; $blue-450: mix($blue-500, $blue-400, 50%); $green-450: mix($green-500, $green-400, 50%); +// Animations +$transition-time: 0.4s; + // Increases primer-core scale first by 8px for spacer-7 then by 16px step increments for spacer-8 to spacer-12 // i.e. After 40px, we have 48, 64, 80, 96, etc. $spacer-7: $spacer * 6; // 48px diff --git a/modules/primer-marketing-support/package.json b/modules/primer-marketing-support/package.json index 498b29fe..c0b413c1 100644 --- a/modules/primer-marketing-support/package.json +++ b/modules/primer-marketing-support/package.json @@ -35,5 +35,8 @@ "functions", "variables", "scss" - ] + ], + "dependencies": { + "primer-support": "^4.7.0" + } } From 03fa9d5034a87ed55e0691aad614caae79c80999 Mon Sep 17 00:00:00 2001 From: Catherine Bui Date: Thu, 3 Jan 2019 11:52:29 -0800 Subject: [PATCH 4/8] update stories.js --- modules/primer-marketing-buttons/stories.js | 24 ++++++--------------- 1 file changed, 6 insertions(+), 18 deletions(-) diff --git a/modules/primer-marketing-buttons/stories.js b/modules/primer-marketing-buttons/stories.js index 8b0108de..8e04dd40 100644 --- a/modules/primer-marketing-buttons/stories.js +++ b/modules/primer-marketing-buttons/stories.js @@ -1,21 +1,9 @@ import React from 'react' import { storiesOf } from '@storybook/react' +import storiesFromMarkdown from '../../.storybook/lib/storiesFromMarkdown' -storiesOf('Marketing buttons', module) - .add('Button colors and outlined', () => ( -
- - - -
- )) - .add('Button sizes', () => ( -
- - - - - - -
- )) +const stories = storiesOf('Marketing buttons', module) + +for (const {title, story} of storiesFromMarkdown(require.context('.', true, /\.md$/))) { + stories.add(title, story) +} From 38ed069ebae8c0a36a2c68d5d0424d10dc78ab63 Mon Sep 17 00:00:00 2001 From: Tyson Rosage Date: Tue, 8 Jan 2019 13:42:42 -0700 Subject: [PATCH 5/8] updated buttons css to include disabled states --- .../primer-marketing-buttons/lib/button.scss | 37 +++++++++++++++---- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/modules/primer-marketing-buttons/lib/button.scss b/modules/primer-marketing-buttons/lib/button.scss index 7df67d80..7d3f4219 100644 --- a/modules/primer-marketing-buttons/lib/button.scss +++ b/modules/primer-marketing-buttons/lib/button.scss @@ -9,21 +9,41 @@ cursor: pointer; user-select: none; background-color: $blue-450; - border: 0; + border: 1px solid $blue-450; border-radius: $border-radius; transition: $transition-time / 2; appearance: none; // Corrects inability to style clickable `input` types in iOS. + &:hover { text-decoration: none; background-color: $blue-500; + border-color: $blue-500; + } + + &:focus { + outline: 0; + box-shadow: 0 0 0 0.2em rgba($blue-500, 0.3); + } + + &:disabled, + &.disabled { + pointer-events: none; // Disable hover styles + cursor: default; + opacity: 0.65; } } .btn-primary-mktg { - background-color: $green-450 !important; + background-color: $green-450; + border-color: $green-450; &:hover { - background-color: $green-500 !important; + background-color: $green-500; + border-color: $green-500; + } + + &:focus { + box-shadow: 0 0 0 0.2em rgba($green-500, 0.3); } } @@ -33,13 +53,14 @@ } .btn-outline-mktg { - color: $blue-450 !important; - background-color: rgba($white, 0) !important; - box-shadow: 0 0 0 1px rgba($blue-450, 0.5) inset; + color: $blue-450; + background-color: $white; + border-color: rgba($blue-450, 0.5); &:hover { - color: $blue-500 !important; + color: $blue-500; text-decoration: none; - box-shadow: 0 0 0 1px rgba($blue-450, 1) inset; + background-color: $white; + border-color: rgba($blue-450, 1); } } From ed40a564fe7f873f5bfe61c13bc7dd4fe4e7d502 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 23 Jan 2019 15:41:55 -0800 Subject: [PATCH 6/8] chore: bump primer-marketing-support in primer-marketing-buttons/package.json --- modules/primer-marketing-buttons/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-buttons/package.json b/modules/primer-marketing-buttons/package.json index 939d910c..fd8b007c 100644 --- a/modules/primer-marketing-buttons/package.json +++ b/modules/primer-marketing-buttons/package.json @@ -31,7 +31,7 @@ "postpublish": "../../script/notify success" }, "dependencies": { - "primer-marketing-support": "^1.5.4", + "primer-marketing-support": "1.5.6", "primer-support": "4.7.2" }, "keywords": [ From 3ce1b945f0efe8c4517723a178eab4371e7b4558 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 23 Jan 2019 15:42:18 -0800 Subject: [PATCH 7/8] fix(marketing-buttons): explicitly import primer-marketing-support --- modules/primer-marketing-buttons/index.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/modules/primer-marketing-buttons/index.scss b/modules/primer-marketing-buttons/index.scss index 9ba7d965..ff345ef9 100644 --- a/modules/primer-marketing-buttons/index.scss +++ b/modules/primer-marketing-buttons/index.scss @@ -1,3 +1,4 @@ // support files @import "primer-support/index.scss"; +@import "primer-marketing-support/index.scss"; @import "./lib/button.scss"; From 127dd98f7e40b05aea0ac0891d4083688dbab670 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Wed, 23 Jan 2019 15:57:20 -0800 Subject: [PATCH 8/8] chore(marketing-support): update primer-support version --- modules/primer-marketing-support/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/primer-marketing-support/package.json b/modules/primer-marketing-support/package.json index 766c5299..39db2407 100644 --- a/modules/primer-marketing-support/package.json +++ b/modules/primer-marketing-support/package.json @@ -37,6 +37,6 @@ "scss" ], "dependencies": { - "primer-support": "^4.7.0" + "primer-support": "4.7.2" } }