@magicgol/polyjuice 0.15.1 → 0.16.0

package/package.json

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

package/src/assets/palette.scss

@@ -5,6 +5,7 @@ $palette: (
     'coin': #ffcf73,
     'expertClub': #075169,
     // ALERT
+    'error': #ed4949,
     'warning': #ff614c,
     'success': #349B50,
     'info': #004781,

package/src/components/box/filing-cabinet/FilingCabinet.vue

@@ -9,13 +9,15 @@
       </div>
     </div>
     <div class="p-4">
-      <slot></slot>
+      <div class="px-2">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'mg-filing-cabinet',
+  name: 'mg-filing-cabinet'
 };
 </script>

package/src/components/card/vertical-card/VCard.stories.js

@@ -18,6 +18,11 @@ export default {
         },
       }
     },
+    theme: {
+      control: { type: 'select' },
+      options: [null, 'club'],
+      defaultValue: null
+    },
     footer: {
       description: "The footer content goes here",
       control: {

package/src/components/card/vertical-card/VCard.vue

@@ -4,9 +4,9 @@
     :class="classes"
     @click="onClick"
   >
-    <div class="p-3 bg-white"><slot></slot></div>
+    <div class="mg-v-card-content p-3"><slot></slot></div>
     <div
-      class="mg-footer p-3"
+      class="mg-v-card-footer p-3"
       v-if="footerVisibility"
     ><slot name="footer"></slot></div>
   </div>
@@ -16,10 +16,21 @@
 export default {
   name: 'mg-v-card',
 
+  props: {
+    theme: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['club'].indexOf(value) !== -1;
+      },
+    }
+  },
+
   computed: {
     classes() {
       return {
         'mg-v-card': true,
+        'mg-v-card--theme-club': this.theme === 'club',
       };
     },
     footerVisibility() {
@@ -41,7 +52,20 @@ export default {
 .mg-v-card {
   box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
 
-  .mg-footer {
+  &-content {
+    background: white;
+  }
+
+  &--theme {
+    &-club {
+      & .mg-v-card-content {
+        background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
+        color: #777;
+      }
+    }
+  }
+
+  &-footer {
     background-color: rgba(map-get($palette, 'brand'), 0.04);
   }
 }

package/src/components/label/traffic-light/TrafficLight.stories.js

@@ -0,0 +1,41 @@
+import MgTrafficLight from './TrafficLight.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Label/Traffic Light',
+  component: MgTrafficLight,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    light: {
+      control: { type: 'select' },
+      options: ['red', 'yellow', 'green'],
+      defaultValue: 'green'
+    },
+    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, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgTrafficLight },
+  template: `<mg-traffic-light v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-traffic-light>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  light: 'green',
+  default: '300',
+};

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

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="d-inline-flex bg-white align-items-center px-3"
+    :class="classes"
+  >
+    <div><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-traffic-light',
+
+  props: {
+    light: {
+      type: String,
+      default: 'green',
+      validator: function (value) {
+        return ['red', 'yellow', 'green'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-traffic-light': true,
+        'mg-traffic-light--error': this.light === 'red',
+        'mg-traffic-light--warning': this.light === 'yellow',
+        'mg-traffic-light--success': this.light === 'green',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-traffic-light {
+    border: 2px solid;
+    border-radius: 50px;
+    height: 2.25rem;
+
+    &--error {
+      border-color: map-get($palette, 'error');
+    }
+
+    &--warning {
+      border-color: map-get($palette, 'warning');
+    }
+
+    &--success {
+      border-color: map-get($palette, 'success');
+    }
+  }
+</style>

package/src/components/typography/h1/HeadingOne.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading one'
+  default: 'heading 1'
 };

package/src/components/typography/h3/HeadingThree.stories.js

@@ -0,0 +1,34 @@
+import MgHeadingThree from './HeadingThree.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Typography/Heading/H3',
+  component: MgHeadingThree,
+  // 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: { MgHeadingThree },
+  template: `<mg-heading-three><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'heading 3'
+};

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

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

package/src/components/typography/h4/HeadingFour.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading four'
+  default: 'heading 4'
 };

package/src/components/typography/h6/HeadingSix.stories.js

@@ -30,5 +30,5 @@ const Template = args => ({
 export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
-  default: 'heading six'
+  default: 'heading 6'
 };