New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle

modules/primer-marketing-utilities/README.md

@@ -33,7 +33,7 @@ $ npm run build
 
 ## Documentation
 
-
+You can read more about utilities in the [docs folder](./docs/)
 
 ## License
 

modules/primer-marketing-utilities/docs/borders.md

@@ -1,7 +1,6 @@
 ---
 title: Borders
 status: New release
-status_issue: https://github.com/github/design-systems/issues/325
 ---
 
 The following border utilities are meant to used in addition to those within primer-core.
@@ -17,3 +16,22 @@ Top, right, bottom, and left border utilities are can be used responsively to ad
   .border-top-0
 </div>
 ```
+
+## Border Colors
+
+### White border with alpha transparency
+
+Use `.border-white-fade` to add a white border with an alpha transparency of 0.15. This is useful when you want a border that is a lighter shade of the background color. Additional border colors are available in [primer-core border utilities](/borders/#border-colors).
+
+```html
+<div class="bg-gray-dark text-white p-3 mb-2">
+  <span class="border border-white-fade p-2">
+    .border-white-fade .bg-gray-dark
+  </span>
+</div>
+<div class="bg-blue text-white p-3">
+  <span class="border border-white-fade p-2">
+    .border-white-fade .bg-blue
+  </span>
+</div>
+```

modules/primer-marketing-utilities/docs/layout.md

@@ -0,0 +1,33 @@
+---
+title: Layout
+status: New release
+---
+
+Marketing layout utilities build on top of [primer-core utilities](/layout/#position), adding the option of responsive positioning.
+
+{:toc}
+
+## Responsive position
+
+Use responsive position utilities to adjust the position of an element at different breakpoints.
+
+```html
+<div class="position-relative p-6 bg-gray">
+  <div class="d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2">
+    .position-md-absolute
+  </div>
+</div>
+
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+<div class="float-left position-lg-relative border m-3" style="width:100px; height:100px; top:12px; left:12px;">
+  .position-lg-relative
+</div>
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+<div class="float-left border m-3" style="width:100px; height:100px;">
+  default
+</div>
+```

modules/primer-marketing-utilities/index.scss

@@ -2,3 +2,4 @@
 // utilities
 @import "./lib/filters.scss";
 @import "./lib/borders.scss";
+@import "./lib/layout.scss";

modules/primer-marketing-utilities/lib/borders.scss

@@ -15,3 +15,6 @@
     .border-#{$breakpoint}-left-0   { border-left: 0 !important; }
   }
 }
+
+/* Use with .border to turn the border rgba white 0.15 */
+.border-white-fade { border-color: $white-fade-15 !important; }

modules/primer-marketing-utilities/lib/layout.scss

@@ -0,0 +1,15 @@
+// Layout utilities
+// stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before
+
+// Responsive position utilities
+
+@each $breakpoint in map-keys($breakpoints) {
+  @include breakpoint($breakpoint) {
+    /* Set position to relative */
+    .position-#{$breakpoint}-relative { position: relative !important; }
+    /* Set position to absolute */
+    .position-#{$breakpoint}-absolute { position: absolute !important; }
+    /* Set position to fixed */
+    .position-#{$breakpoint}-fixed    { position: fixed !important; }
+  }
+}

modules/primer-marketing-utilities/stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Marketing Utilities', module)
+.add('Responsive borders', () => (
+  <div className='border-top border-sm-right border-md-bottom border-lg-top-0'>.border-top-0</div>
+))
+.add('border-white-fade', () => (
+<div className='bg-blue text-white p-3'>
+  <span className='border border-white-fade p-2'>
+    .border-white-fade
+  </span>
+</div>
+))
+.add('Responsive position', () => (
+  <div className='position-relative p-6 bg-gray'>
+    <div className='d-inline-block position-md-absolute bottom-0 right-0 border bg-white p-2'>
+      .position-md-absolute
+    </div>
+  </div>
+))

modules/primer-utilities/docs/animations.md

@@ -16,6 +16,13 @@ The `.anim-fade-in` class is used to fade in an element on the page. This will r
 <span class="anim-fade-in"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
 ```
 
+## Fade Out
+
+The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
+
+```html
+<span class="anim-fade-out"><%= octicon("mark-github", :height => 32, :class => "v-align-middle mr-2") %> Hello from GitHub!</span>
+
 ## Fade Up
 
 The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
@@ -55,3 +62,13 @@ The `.anim-pulse` class will pulse an element infinitely.
 ```html
 <%= octicon("mark-github", :class => "anim-pulse") %>
 ```
+
+## Hover animation
+
+The `.hover-grow` class will increase the scale of the element upon hover.
+
+```html
+<div class="Box hover-grow p-4">
+  <%= octicon("mark-github", :height => 32) %>
+</div>
+```

modules/primer-utilities/docs/borders.md

@@ -109,7 +109,7 @@ Use `border-dashed` to give an element a dashed border.
 
 ## Rounded corners
 
-Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px.
+Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 3px, `rounded-2` applies a border radius of 6px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
 
 ```html
 <div class="Box rounded-0 mb-2">
@@ -118,7 +118,10 @@ Add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1`
 <div class="border rounded-1 mb-2">
   .rounded-1
 </div>
-<div class="border rounded-2">
+<div class="border rounded-2 mb-2">
   .rounded-2
 </div>
+<div class="border circle p-3" style="width: 100px; height: 100px;">
+  .circle
+</div>
 ```

modules/primer-utilities/docs/margin.md

@@ -31,7 +31,7 @@ Since margin utilities have many variations and will be used in many places, we
 
 _**Note:** The blue in the examples represents the element, and the orange represents the margin_
 
-## Uniform spacing
+## Uniform margins
 
 Use uniform spacing utilities to apply equal margin to all sides of an element. These utilities can change or override default margins, and can be used with a spacing scale from 0-6.
 
@@ -59,7 +59,7 @@ Use uniform spacing utilities to apply equal margin to all sides of an element.
 </div>
 ```
 
-## Directional spacing
+## Directional margins
 
 Use directional utilities to apply margin to an individual side, or the X and Y axis of an element. Directional utilities can change or override default margins, and can be used with a spacing scale of 0-6.
 

modules/primer-utilities/docs/padding.md

@@ -30,7 +30,7 @@ Since padding utilities have many variations and will be used in many places, we
 
 _**Note:** The blue in the examples below represents the element, and the green represents the padding._
 
-## Uniform spacing
+## Uniform padding
 
 Use uniform spacing utilities to apply equal padding to all sides of an element. These utilities can be used with a spacing scale from 0-6.
 
@@ -58,7 +58,7 @@ Use uniform spacing utilities to apply equal padding to all sides of an element.
 </div>
 ```
 
-## Directional spacing
+## Directional padding
 
 Use directional utilities to apply padding to an individual side, or the X and Y axis of an element. Directional utilities can change or override default padding, and can be used with a spacing scale of 0-6.
 

modules/primer-utilities/lib/animations.scss

@@ -1,7 +1,7 @@
 // This file contains reusable animations for github.
 // stylelint-disable primer/selector-no-utility
-// Fade in
-// A class to fade in an element on the page.
+
+/* Fade in an element */
 .anim-fade-in {
   animation-name: fade-in;
   animation-duration: 1s;
@@ -22,6 +22,27 @@
   }
 }
 
+/* Fade out an element */
+.anim-fade-out {
+  animation-name: fade-out;
+  animation-duration: 1s;
+  animation-timing-function: ease-out;
+
+  &.fast {
+    animation-duration: 0.3s;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 /* Fade in and slide up an element */
 .anim-fade-up {
   opacity: 0;
@@ -151,3 +172,12 @@
     transform: scale3d(1, 1, 1);
   }
 }
+
+/* Increase scale of an element on hover */
+.hover-grow {
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: scale(1.025);
+  }
+}

modules/primer-utilities/lib/borders.scss

@@ -61,3 +61,5 @@
 .rounded-1 { border-radius: $border-radius !important; }
 /* Add a 2x border-radius to all corners */
 .rounded-2 { border-radius: $border-radius * 2 !important; }
+/* Add a 50% border-radius to make something into a circle */
+.circle { border-radius: 50% !important; }

modules/primer-utilities/stories.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Utilities', module)
+.add('hover-grow', () => (
+  <div className='Box hover-grow p-4'>
+    .hover-grow
+  </div>
+))
+.add('circle', () => (
+  <div className='border circle p-3' style={{width: '100px', height: '100px'}}>
+    .circle
+  </div>
+))