@magicgol/polyjuice 0.16.0 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/palette.scss

@@ -4,6 +4,7 @@ $palette: (
     'freemium' :#004781,
     'coin': #ffcf73,
     'expertClub': #075169,
+    'text': #343434,
     // ALERT
     'error': #ed4949,
     'warning': #ff614c,

package/src/components/form/button/toggle-button/ToggleButton.vue

@@ -44,7 +44,7 @@ export default {
       };
     },
     contentVisibility() {
-      return 'content' in this.$slots && this.value === true;
+      return 'content' in this.$slots && !!this.$slots.content && this.value === true;
     }
   },
 };

package/src/components/label/traffic-light/TrafficLight.vue

@@ -40,6 +40,9 @@ export default {
   .mg-traffic-light {
     border: 2px solid;
     border-radius: 50px;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1.3125rem;
+    font-weight: 500;
     height: 2.25rem;
 
     &--error {

package/src/components/typography/h1/HeadingOne.vue

@@ -18,6 +18,7 @@ export default {
 
 <style lang="scss">
   .mg-h1 {
+    color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 1.25rem;
     font-weight: 500;

package/src/components/typography/h2/HeadingTwo.stories.js

@@ -0,0 +1,34 @@
+import MgHeadingTwo from './HeadingTwo.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Typography/Heading/H2',
+  component: MgHeadingTwo,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = args => ({
+  components: { MgHeadingTwo },
+  template: `<mg-heading-two><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-two>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'heading 2'
+};

package/src/components/typography/h2/HeadingTwo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div v-bind:class="classes"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'mg-heading-two',
+
+  computed: {
+    classes() {
+      return {
+        'mg-h2': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  .mg-h2 {
+    color: #343434;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+</style>

package/src/components/typography/h3/HeadingThree.vue

@@ -18,8 +18,9 @@ export default {
 
 <style lang="scss">
   .mg-h3 {
+    color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 400;
   }
 </style>

package/src/components/typography/h4/HeadingFour.vue

@@ -18,6 +18,7 @@ export default {
 
 <style lang="scss">
   .mg-h4 {
+    color: #343434;
     font-family: 'Ubuntu', sans-serif;
     font-size: 0.875rem;
     font-weight: 700;

package/src/documentation/Typography.stories.mdx

@@ -0,0 +1,10 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
+
+<Meta title="Colors/Brand" />
+
+<ColorPalette>
+    <ColorItem
+        title="Text"
+        colors={{'Mine Shaft': '#343434'}}
+    />
+</ColorPalette>