feat(typography):Update mdc-web to v0.35.0 (#96)

BREAKING CHANGES: Removed Display and Title, added Overline. Headline has now a level between 1 and 6.
matsp · Apr 24, 2018 · 7ddf97a · 7ddf97a
1 parent e8d5e5a
commit 7ddf97a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 77 deletions.
diff --git a/components/typography/Display.vue b/components/typography/Display.vue
diff --git a/components/typography/Headline.vue b/components/typography/Headline.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="mdc-typography--headline">
+  <span :class="classes">
     <slot />
   </span>
 </template>
@@ -8,6 +8,20 @@
 import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
-  mixins: [themeClassMixin]
+  mixins: [themeClassMixin],
+  props: {
+    level: {
+      type: Number,
+      required: true,
+      validator: (level) => level >= 1 && level <= 6 
+    }
+  },
+  computed: {
+    classes () {
+      let calc = {}
+      calc['mdc-typography--headline' + this.level] = true
+      return calc
+    }
+  }
 }
 </script>
diff --git a/components/typography/Title.vue → components/typography/Overline.vue b/components/typography/Title.vue → components/typography/Overline.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="mdc-typography--title">
+  <span class="mdc-typography--overline">
     <slot />
   </span>
 </template>

diff --git a/components/typography/README.md b/components/typography/README.md
@@ -4,9 +4,8 @@
 
 ```html
 <m-typography>
-    <m-typo-display :level="4">Display 4</m-typo-display>
-    <m-typo-headline>Headline</m-typo-headline>
-    <m-typo-title>Title</m-typo-title>
+    <m-typo-headline :level="1">Headline</m-typo-headline>
+    <m-typo-overline>Overline</m-typo-overline>
     <m-typo-subheading :level="1">Subheading 1</m-typo-subheading>
     <m-typo-body :level="2">Body 2</m-typo-body>
     <m-typo-caption>Caption</m-typo-caption>
@@ -16,9 +15,9 @@
 
 ### Slots
 
-| Slot | Prop dependencies | Description |
-|------|-------------------|-------------|
-| default | - | typography content |
+| Slot | Description |
+|------|-------------|
+| default | typography content |
 
 ## Body
 
@@ -27,7 +26,6 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | level | Number | - | body level could be 1 or 2 |
-| adjustMargin | Boolean | false | adjust margins to other elements |
 
 ### Slots
 
@@ -37,12 +35,6 @@
 
 ## Button
 
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| adjustMargin | Boolean | false | adjust margins to other elements |
-
 ### Slots
 
 | Slot | Description |
@@ -51,27 +43,6 @@
 
 ## Caption
 
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| adjustMargin | Boolean | false | adjust margins to other elements |
-
-### Slots
-
-| Slot | Description |
-|------|-------------|
-| default | content |
-
-## Display
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| level | Number | - | display level could be between 1 and 4 |
-| adjustMargin | Boolean | false | adjust margins to other elements |
-
 ### Slots
 
 | Slot | Description |
@@ -84,7 +55,7 @@
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| adjustMargin | Boolean | false | adjust margins to other elements |
+| level | Boolean | false | headline level between 1 and 6 |
 
 ### Slots
 
@@ -99,21 +70,14 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | level | Number | - | subheading level could be 1 or 2 |
-| adjustMargin | Boolean | false | adjust margins to other elements |
 
 ### Slots
 
 | Slot | Description |
 |------|-------------|
 | default | content |
 
-## Title
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| adjustMargin | Boolean | false | adjust margins to other elements |
+## Overline
 
 ### Slots
 

diff --git a/components/typography/index.js b/components/typography/index.js
@@ -1,9 +1,8 @@
 import Body from './Body.vue'
 import Button from './Button.vue'
 import Caption from './Caption.vue'
-import Display from './Display.vue'
 import Headline from './Headline.vue'
-import Title from './Title.vue'
+import Overline from './Overline.vue'
 import Subheading from './Subheading.vue'
 import Typography from './Typography.vue'
 import './styles.scss'
@@ -15,9 +14,8 @@ const plugin = {
     vm.component('m-typo-body', Body)
     vm.component('m-typo-button', Button)
     vm.component('m-typo-caption', Caption)
-    vm.component('m-typo-display', Display)
     vm.component('m-typo-headline', Headline)
-    vm.component('m-typo-title', Title)
+    vm.component('m-typo-overline', Overline)
     vm.component('m-typo-subheading', Subheading)
     vm.component('m-typography', Typography)
   }