fix(typography): running-text with blockquote and add blockquote styles

wework · Mar 19, 2019 · 1fec97e · 1fec97e
1 parent 74d8ad6
commit 1fec97e
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 10 deletions.
diff --git a/docs/html/typography/typography-utilities.html b/docs/html/typography/typography-utilities.html
@@ -0,0 +1 @@
+<div class="ray-text-monospace">Dock 72 at the brooklyn navy yard</div>
diff --git a/docs/principles/typography.md b/docs/principles/typography.md
@@ -27,14 +27,22 @@ title: Typography
 
 ## Running Text
 
-This utility is useful for long-form content, especially content that is dynamically genereated from markdown. It will directly style `h1`–`h6`, `p`, `ul`, and `ol` tags.
+This utility is useful for long-form content, especially content that is dynamically genereated from markdown. It will directly style `h1`–`h6`, `p`, `blockquote`, `ul`, and `ol` tags.
 
 <component
  component="typography"
  variation="typography-running-text"
  >
 </component>
 
+# Utilities
+
+<component
+ component="typography"
+ variation="typography-utilities"
+ >
+</component>
+
 # Font Family
 
 <p class="ray-p3">Limiting font-families, a tight type scale, and content limits will keep it tight.</p>

diff --git a/packages/core/src/global/_typography.scss b/packages/core/src/global/_typography.scss
@@ -193,6 +193,21 @@
  line-height: 12px;
  }
 
+ .#{$ray-class-prefix}text-monospace {
+ font-family: $ray-font-stack-mono;
+ font-weight: 400;
+ }
+
+ .#{$ray-class-prefix}blockquote {
+ padding: $ray-spacing-md;
+ margin: $ray-spacing-lg 0;
+ background-color: $ray-color-gray-02;
+ color: $ray-color-text-dark;
+ border-radius: $ray-border-radius;
+ border: 1px solid $ray-color-gray-10;
+ border-left: 2px solid $ray-color-blue-50;
+ }
+
  .#{$ray-class-prefix}running-text {
  h1,
  h2,
@@ -244,5 +259,9 @@
  ol li {
  list-style-type: decimal;
  }
+
+ blockquote {
+ @extend .#{$ray-class-prefix}blockquote;
+ }
  }
 }
diff --git a/packages/docs-app/src/components/CodeExample/code-example.scss b/packages/docs-app/src/components/CodeExample/code-example.scss
@@ -55,7 +55,6 @@ pre[class*='language-'] {
  border-top-width: 0;
  padding: $ray-spacing-md 0 $ray-spacing-md $ray-spacing-md;
  max-height: 12rem;
- min-height: 7rem;
  height: auto;
  display: flex;
  flex-direction: column;

diff --git a/packages/docs-app/src/styles/_page.scss b/packages/docs-app/src/styles/_page.scss
@@ -117,14 +117,6 @@ button,
 }
 
 blockquote {
- padding: $ray-spacing-md;
- margin: 1rem 0;
- background-color: hsla(240, 17%, 98%, 1);
- color: $ray-color-text-dark;
- border-radius: $ray-border-radius;
- border: 1px solid $ray-color-gray-10;
- border-left: 2px solid $ray-color-blue-50;
-
  p:last-child {
  margin: 0;
  }

diff --git a/packages/docs-app/src/templates/page.js b/packages/docs-app/src/templates/page.js
@@ -98,6 +98,9 @@ const renderAst = new RehypeReact({
  </table>
  );
  },
+ blockquote: function blockquote({ children }) {
+ return <blockquote className="ray-blockquote">{children}</blockquote>;
+ },
  pre: CodeSnippet,
  'page-intro': PageIntro,
  'flex-group': FlexGroup,