Merge pull request #39 from silinternational/feature/fix-typography

Fix typography in some components

Author: hobbitronics

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
+## [2.0.0](https://github.com/silinternational/ui-components/releases/tag/v2.0.0) - 2021-07-02
 ### Changed
 - README - Instructions for running Storybook locally
 - global.css is compiled during Storybook dev and deployment build from global.scss and used only for Storybook
@@ -19,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - $$props.class to Badge, Form, CustomCard, Tour and StaticChip so they can accept global classes
+- mdc-typography class to Badge, StaticChip and Card as it was not being applied
 - Badge, CustomCard, Drawer, Form, StaticChip and Tour stories to Storybook
 - global.scss to generate full range of padding and margin from 1rem to 8rem, height and width from 0 to 100% in increments of 5, z-index from 0 to 10.
 - align-item and align-self flex utilites to global.scss

README.md

@@ -5,7 +5,7 @@ Reusable Svelte components for some internal applications
 To install to your Svelte project, open your project's root directory in a terminal. Type `npm i @silintl/ui-components` and press enter.
 
 ### bundler configuration
-Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte (it may work still without autoPreprocess):
+Your Svelte project will need the bundler (rollup most likely) configured to compile Sass files. If you are using rollup your plugins in your "rollup.config.js" should look something like this taking special note of postcss and svelte:
 ```
 import postcss from 'rollup-plugin-postcss';
 import autoPreprocess from 'svelte-preprocess';
@@ -179,7 +179,7 @@ An example of using Drawer:
 ```
 
 ### storybook
-Try out our components at https://silinternational.github.io/ui-components/
+Try out our components and see examples at https://silinternational.github.io/ui-components/
 or run storybook locally. Just copy this repo to your machine and run `npm install` then `npm run dev.` Storybook should open a browser window when it finishes building.
 
 ### CSS utility classes

components/Badge.svelte

@@ -14,4 +14,4 @@
   }
 </style>
 
-<span class="dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>
+<span class="mdc-typography dib text-align-center white fs-16 br-50 background {$$props.class}" style="--theme-color: {color}" ><slot /></span>

components/StaticChip.svelte

@@ -10,7 +10,7 @@
   }
 </style>
 
-<div class="chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
+<div class="mdc-typography chip black flex justify-center align-items-center mb-1 mr-2 fs-14 br-16px {$$props.class}">
   <div class="chip-content flex align-items-center">
     <slot></slot>
   </div>  

components/mdc/Card/Card.svelte

@@ -18,7 +18,7 @@ export let color = 'white'
 }
 </style>
 
-<div class="mdc-card {$$props.class}" style="background-color: {color}" class:mdc-card--outlined={outlined}>
+<div class="mdc-card mdc-typography {$$props.class}" style="background-color: {color}" class:mdc-card--outlined={outlined}>
   {#if secondary.length}
     <div class="secondary-text uppercase gray">
       {secondary}