Update pattern library background & text examples

- Add better text examples to the Type scale story
- Set the background to white for Storybook stories
- fixes #8659

CHANGELOG.txt

@@ -39,6 +39,7 @@ Changelog
  * Add `button-secondary bicolor` variants to the pattern library and styleguide (Adinapunyo Banerjee)
  * Add better support for non-integer / non-`id` primary keys into Wagtail's generic views, including for Snippets and custom User models (Mehrdad Moradizadeh)
  * Upgrade jQuery UI to version 1.13.2 (LB (Ben) Johnston)
+ * Update pattern library background & text examples (Albina Starykova)
  * Fix: Prevent `PageQuerySet.not_public` from returning all pages when no page restrictions exist (Mehrdad Moradizadeh)
  * Fix: Ensure that duplicate block ids are unique when duplicating stream blocks in the page editor (Joshua Munn)
  * Fix: Revise colour usage so that privacy & locked indicators can be seen in Windows High Contrast mode (LB (Ben Johnston))

CONTRIBUTORS.rst

@@ -632,6 +632,7 @@ Contributors
 * Jadesola Kareem
 * Dauda Yusuf
 * Damilola Oladele
+* Albina Starykova
 
 
 Translators

client/scss/elements/_elements.scss

@@ -15,7 +15,6 @@
 }
 
 html {
-  background: $color-grey-4;
   height: 100%;
   // Set the whole admin to border-box by default.
   box-sizing: border-box;

client/src/tokens/typography.js

@@ -155,13 +155,13 @@ const typeScale = {
     color: 'colors.primary.DEFAULT',
     lineHeight: 'lineHeight.tight',
   },
-  'w-body-text': {
-    fontSize: 'fontSize.16',
+  'w-body-text-large': {
+    fontSize: 'fontSize.18',
     fontWeight: 'fontWeight.normal',
     lineHeight: 'lineHeight.normal',
   },
-  'w-body-text-large': {
-    fontSize: 'fontSize.18',
+  'w-body-text': {
+    fontSize: 'fontSize.16',
     fontWeight: 'fontWeight.normal',
     lineHeight: 'lineHeight.normal',
   },

client/src/tokens/typography.stories.tsx

@@ -28,6 +28,19 @@ export const FontFamilies = () => (
   </div>
 );
 
+const exampleText = {
+  'w-h1': 'Heading level (h1)',
+  'w-h2': 'Heading level 2 (h2)',
+  'w-h3': 'Heading level 3 (h3)',
+  'w-h4': 'Heading level 4 (h4)',
+  'w-label-1': 'Large label',
+  'w-label-2': 'Medium label',
+  'w-label-3': 'Small label',
+  'w-body-text-large': 'Large body text',
+  'w-body-text': 'Basic body text',
+  'w-help-text': 'Help text',
+};
+
 export const TypeScale = () => (
   <table>
     <caption>All text styles</caption>
@@ -42,7 +55,7 @@ export const TypeScale = () => (
         <tr key={textStyle}>
           <td>
             <span className={`${textStyle} w-mt-4`}>
-              {textStyle.replace('w-', '')}
+              {exampleText[textStyle] || textStyle.replace('w-', '')}
             </span>
           </td>
           <td>

docs/releases/4.1.md

@@ -61,6 +61,7 @@ This feature was developed by Karl Hobley and Matt Westcott.
  * Add `button-secondary bicolor` variants to the pattern library and styleguide (Adinapunyo Banerjee)
  * Add better support for non-integer / non-`id` primary keys into Wagtail's generic views, including for custom Snippets and User models (Mehrdad Moradizadeh)
  * Upgrade jQuery UI to version 1.13.2 (LB (Ben) Johnston)
+ * Update pattern library background & text examples (Albina Starykova)
 
 ### Bug fixes