fix and render fonts in noto sans in docs

massgov · Oct 7, 2020 · 820c55d · 820c55d
1 parent b63fe5a
commit 820c55d
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 15 deletions.
diff --git a/assets/scss/00-base/_fonts-langs.scss b/assets/scss/00-base/_fonts-langs.scss
@@ -8,7 +8,7 @@
 @mixin langlist($stack, $dir, $langs) {
   @each $lang in $langs {
     &:lang(#{$lang}) {
-			font-family: '#{$stack} VF', $stack, $fonts;
+			font-family: '#{$stack} VF', $stack, $fonts !important;
       @if $enable-rtl { direction: $dir;}
 
 		}

diff --git a/assets/scss/00-base/_fonts.scss b/assets/scss/00-base/_fonts.scss
@@ -10,9 +10,6 @@
 
 @use "paths" as *;
 
-// load additional fonts for language support
-@use "fonts-langs-import";
-
 /* The fallback non-variable Noto Sans font */
 
 @font-face {

diff --git a/react/src/components/base/Typography/Typography.stories.mdx b/react/src/components/base/Typography/Typography.stories.mdx
@@ -2,6 +2,7 @@ import { styled } from '@storybook/theming';
 import { Canvas, Meta, Story, ArgsTable, CURRENT_SELECTION } from '@storybook/addon-docs/blocks';
 import DecorativeLink from 'MayflowerReactLinks/DecorativeLink';
 import Heading from 'MayflowerReactHeadings/Heading';
+import RichText from 'MayflowerReactOrganisms/RichText';
 
 import {
   characters,
@@ -35,12 +36,12 @@ const slugifyStyle = (style) => {
 
 It's selected to be the Mayflower typeface to:
 - enable all Commonwealth agencies to design, produce and deliver online and offline content with consistent typography, without additional costs or legal barriers.
-- provide the best language coverage for content internationalization.
+- provide comprehensive language coverage for content internationalization.
 - support the guiding principles of the Mass.gov brand identities: modern, dignified, human, helpful
 
 
 ## Characters
-<div className="sb-block">
+<RichText className="sb-block">
   <div className="sb-text">{letters.toUpperCase()}</div>
   <div className="sb-text">{letters}</div>
   <hr />
@@ -49,7 +50,7 @@ It's selected to be the Mayflower typeface to:
   <hr />
   <div className="sb-text">{characters}</div>
   <hr />
-</div>
+</RichText>
 
 
 ## Custom Preview

diff --git a/react/src/components/base/Typography/styles.scss b/react/src/components/base/Typography/styles.scss
@@ -3,20 +3,15 @@
 @use "00-base/fonts";
 @use "00-base/elements";
 @use "04-templates/general";
+@use "00-base/fonts-langs-import";
+@use "00-base/fonts-langs";
 
 .sb {
   &-text {
     overflow-wrap: break-word;
   }
 
   &-block {
-    // font-family: $fonts !important;
-    //
-    // &:lang(km) {
-    //   font-family: $fonts-khmer, $fonts !important;
-    //   font-size: 14px;
-    // }
-
     margin-top: 0 !important;
     margin-bottom: 2rem;
     padding: 1rem;
@@ -49,6 +44,9 @@
         th,td:not(:last-child) {
           display: none;
         }
+        textarea {
+          font-size: $fonts-medium;
+        }
       }
     }
   }

diff --git a/react/src/components/styles/_global.scss b/react/src/components/styles/_global.scss
@@ -1,5 +1,5 @@
 @forward "00-base/global" with (
   $assets-path: "~@massds/mayflower-assets/static" !default,
-  $enable-rtl: true !default,
+  $enable-rtl: true
 );
 @forward "00-base/z-index";