@magicgol/polyjuice 0.50.2 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -14,16 +14,17 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/vue-fontawesome": "^2.0.6",
+    "bootstrap": "^5.2.3",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue": "^6.5.13",
+    "@storybook/vue": "^6.5.16",
     "@vue/cli-plugin-babel": "~4.5.15",
     "@vue/cli-plugin-eslint": "~4.5.15",
     "@vue/cli-service": "~4.5.15",

package/src/assets/svg/facebook.js

@@ -4,7 +4,7 @@ icon.register({
   'facebook': {
     width: 16,
     height: 16,
-    viewBox: '0 0 25 25',
-    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.213c-.486 0-.972.593-.972 1.403V8.37H13.5v3.997H8.694V24.3h-4.59V12.367H0V8.37h4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5v4.213H9.666z" _fill="#fff"/>'
+    viewBox: '0 0 23 24',
+    data: '<path pid="0" d="M23 12.07C23 5.719 17.851.57 11.5.57S0 5.719 0 12.07c0 5.74 4.205 10.497 9.703 11.36v-8.036h-2.92V12.07h2.92V9.536c0-2.882 1.717-4.474 4.344-4.474 1.258 0 2.574.225 2.574.225v2.83h-1.45c-1.429 0-1.874.886-1.874 1.796v2.157h3.19l-.51 3.324h-2.68v8.036C18.795 22.567 23 17.81 23 12.07z" _fill="#fff"/>'
   }
 })

package/src/assets/svg/google.js

@@ -4,7 +4,7 @@ icon.register({
   'google': {
     width: 16,
     height: 16,
-    viewBox: '0 0 18 18',
-    data: '<path pid="0" d="M9.003 7.415v3.439h4.9c-.64 2.084-2.381 3.576-4.9 3.576a5.431 5.431 0 010-10.86c1.349 0 2.58.496 3.528 1.31l2.532-2.534A8.966 8.966 0 009.003 0C4.03 0 0 4.03 0 9s4.03 9 9.003 9c7.555 0 9.224-7.067 8.482-10.573l-8.482-.012z" _fill="#fff"/>'
+    viewBox: '0 0 24 24',
+    data: '<rect pid="0" _fill="#fff"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M23.04 12.261c0-.815-.073-1.6-.21-2.352H12v4.448h6.19a5.29 5.29 0 01-2.296 3.471v2.886h3.717c2.174-2.002 3.429-4.95 3.429-8.453z" fill="#4285F4"/><path pid="2" fill-rule="evenodd" clip-rule="evenodd" d="M12 23.5c3.105 0 5.708-1.03 7.61-2.786l-3.716-2.886c-1.03.69-2.347 1.098-3.894 1.098-2.995 0-5.53-2.023-6.435-4.741H1.723v2.98A11.496 11.496 0 0012 23.5z" fill="#34A853"/><path pid="3" fill-rule="evenodd" clip-rule="evenodd" d="M5.565 14.185A6.913 6.913 0 015.205 12c0-.758.13-1.495.36-2.185v-2.98H1.723A11.496 11.496 0 00.5 12c0 1.856.444 3.612 1.223 5.165l3.842-2.98z" fill="#FBBC05"/><path pid="4" fill-rule="evenodd" clip-rule="evenodd" d="M12 5.074c1.688 0 3.204.58 4.396 1.72l3.299-3.299C17.703 1.64 15.1.5 12 .5A11.496 11.496 0 001.723 6.835l3.842 2.98C6.47 7.097 9.005 5.074 12 5.074z" fill="#EA4335"/>'
   }
 })

package/src/components/form/button/primary-button/PrimaryButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="d-block w-100 rounded text-white text-uppercase"
+    class="d-block w-100 text-white text-uppercase"
     :class="classes"
     :type="type"
     :disabled="disabled"
@@ -59,6 +59,7 @@ export default {
     appearance: none;
     background-color: map-get($palette, 'brand');
     border: 1px solid map-get($palette, 'brand');
+    border-radius: 15px;
     cursor: pointer;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;

package/src/components/form/button/secondary-button/SecondaryButton.stories.js

@@ -6,6 +6,11 @@ export default {
   component: MgSecondaryButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
     default: {
       description: "The default Vue slot",
       control: {

package/src/components/form/button/secondary-button/SecondaryButton.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="d-block bg-white w-100 p-2 rounded text-uppercase text-center text-decoration-none"
+    class="d-block bg-white w-100 text-uppercase text-center text-decoration-none"
     :class="classes"
     :disabled="disabled"
     @click="onClick"
@@ -16,12 +16,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['large', 'normal'].indexOf(value) !== -1;
+      },
+    },
   },
 
   computed: {
     classes() {
       return {
         'mg-secondary-button': true,
+        'mg-secondary-button-size-normal': this.size === 'normal',
+        'mg-secondary-button-size-large': this.size === 'large',
         'mg-secondary-button--disabled': this.disabled,
       };
     }
@@ -41,13 +50,24 @@ export default {
 .mg-secondary-button {
   appearance: none;
   border: 1px solid map-get($palette, 'brand');
+  border-radius: 15px;
   color: map-get($palette, 'brand');
   cursor: pointer;
   font-family: 'Ubuntu', sans-serif;
-  font-size: 0.8215rem;
   font-weight: 500;
   outline: none;
 
+  &-size {
+    &-normal {
+      font-size: 0.8215rem;
+      padding: 0.5rem;
+    }
+    &-large {
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+
   &--disabled {
     opacity: 0.6 !important;
     cursor: not-allowed !important;

package/src/components/form/form/Form.stories.js

@@ -0,0 +1,35 @@
+import MgForm from './Form.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Form',
+  component: MgForm,
+  // 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, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgForm },
+  template: `<mg-form @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-form>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'form container'
+};

package/src/components/form/form/Form.vue

@@ -0,0 +1,56 @@
+<template>
+  <form
+    class="p-2 p-md-4 mx-auto"
+    :class="classes"
+    @click="onClick"
+    @submit.prevent="$emit('submit.prevent')"
+  ><slot></slot></form>
+</template>
+
+<script>
+export default {
+  name: 'mg-form',
+
+  props: {
+    border: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-form': true,
+        'mg-form--bordered': this.border === true,
+      };
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '~bootstrap/scss/functions';
+  @import '~bootstrap/scss/variables';
+  @import '~bootstrap/scss/mixins/breakpoints';
+
+  .mg-form {
+    max-width: 570px;
+  }
+
+  @include media-breakpoint-up(md) {
+    .mg-form {
+      border-radius: 16px;
+
+      &--bordered {
+        border: 1px solid #d9d9d9;
+      }
+    }
+  }
+</style>

package/src/components/social/button/SocialButton.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="p-3 d-flex align-items-center w-100 text-white border-0"
+    class="p-3 d-flex align-items-center w-100 border-0"
     :class="classes"
     :disabled="disabled"
     @click="$emit('click')"
@@ -53,10 +53,11 @@ export default {
 
   .mg-social-button {
     appearance: none;
+    border-radius: 10px;
     cursor: pointer;
     font-family: 'Raleway', sans-serif;
-    font-size: 0.8125rem;
-    font-weight: 700;
+    font-size: 1rem;
+    font-weight: 600;
     outline: none;
     text-decoration: none;
 
@@ -68,10 +69,13 @@ export default {
 
     &--facebook {
       background-color: #4671b8;
+      color: #fff;
     }
 
     &--google {
-      background-color: #328bee;
+      background: #fff;
+      color: #626262;
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.084), 0 2px 3px rgba(0, 0, 0, 0.168);
     }
 
     &--disabled {

package/src/svg/facebook.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.2125C9.18 4.2125 8.694 4.806 8.694 5.616V8.37H13.5V12.3665H8.694V24.3005H4.104V12.3665H0V8.37H4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5V4.2125H9.666Z" fill="white"/>
+<svg viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M23 12.0698C23 5.71857 17.8513 0.569849 11.5 0.569849C5.14872 0.569849 0 5.71857 0 12.0698C0 17.8098 4.20538 22.5674 9.70312 23.4301V15.3941H6.7832V12.0698H9.70312V9.53626C9.70312 6.65407 11.42 5.06204 14.0468 5.06204C15.305 5.06204 16.6211 5.28665 16.6211 5.28665V8.11672H15.171C13.7424 8.11672 13.2969 9.00319 13.2969 9.91263V12.0698H16.4863L15.9765 15.3941H13.2969V23.4301C18.7946 22.5674 23 17.8098 23 12.0698Z" fill="white"/>
 </svg>

package/src/svg/google.svg

@@ -1,3 +1,7 @@
-<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.00327 7.41519V10.854H13.9025C13.2635 12.9379 11.5216 14.4295 9.00327 14.4295C6.00472 14.429 3.5739 11.9986 3.573 9.00001C3.57278 7.55975 4.14483 6.17841 5.16325 5.15999C6.18167 4.14157 7.56301 3.56952 9.00327 3.56974C10.3516 3.56974 11.5822 4.06556 12.5313 4.88046L15.0627 2.34574C13.4073 0.833677 11.2453 -0.00324253 9.00327 9.4415e-06C4.03036 9.4415e-06 0 4.03037 0 9.00001C0 13.9696 4.03036 18 9.00327 18C16.5584 18 18.2266 10.9334 17.4854 7.42746L9.00327 7.41519Z" fill="white"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect fill="white"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M23.04 12.2614C23.04 11.4459 22.9668 10.6618 22.8309 9.90909H12V14.3575H18.1891C17.9225 15.795 17.1123 17.013 15.8943 17.8284V20.7139H19.6109C21.7855 18.7118 23.04 15.7636 23.04 12.2614Z" fill="#4285F4"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.4998C15.105 23.4998 17.7081 22.4701 19.6109 20.7137L15.8943 17.8283C14.8645 18.5183 13.5472 18.926 12 18.926C9.00474 18.926 6.46951 16.903 5.56519 14.1848H1.72314V17.1644C3.61542 20.9228 7.50451 23.4998 12 23.4998Z" fill="#34A853"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.56523 14.1851C5.33523 13.4951 5.20455 12.758 5.20455 12.0001C5.20455 11.2421 5.33523 10.5051 5.56523 9.81506V6.83551H1.72318C0.944318 8.38801 0.5 10.1444 0.5 12.0001C0.5 13.8557 0.944318 15.6121 1.72318 17.1646L5.56523 14.1851Z" fill="#FBBC05"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.07386C13.6884 5.07386 15.2043 5.65409 16.3961 6.79364L19.6945 3.49523C17.7029 1.63955 15.0997 0.5 12 0.5C7.50451 0.5 3.61542 3.07705 1.72314 6.83545L5.56519 9.815C6.46951 7.09682 9.00474 5.07386 12 5.07386Z" fill="#EA4335"/>
 </svg>