@magicgol/polyjuice 0.35.0 → 0.36.1

package/package.json

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

package/src/components/content/box/vertical-box/VBox.vue

@@ -3,6 +3,7 @@
     class="p-3"
     :class="classes"
     :selected="selected"
+    @click="$emit('click')"
   >
     <slot></slot>
   </div>

package/src/components/context/club/plate/ClubPlate.stories.js

@@ -2,7 +2,7 @@ import MgClubPlate from './ClubPlate.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Context/Club/Button/Club Plate',
+  title: 'Context/Club/Plate/Club Plate',
   component: MgClubPlate,
 };
 

package/src/components/context/club/square/ClubSquare.stories.js

@@ -0,0 +1,31 @@
+import MgClubSquare from './ClubSquare.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Context/Club/Square/Club Square',
+  component: MgClubSquare,
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgClubSquare },
+  template: `<mg-club-square v-bind="$props"></mg-club-square>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+};
+
+export const Trial = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Trial.args = {
+  trial: true
+};
+
+export const Disabled = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Disabled.args = {
+  disabled: true
+};

package/src/components/context/club/square/ClubSquare.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="d-flex rounded p-2"
+    :class="classes"
+  >
+    <svgicon v-bind:name="icon"></svgicon>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-club-square',
+
+  props: {
+    trial: {
+      type: Boolean,
+      default: false
+    },
+
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-club-square': true,
+        'mg-club-square--disabled': this.disabled === true,
+      };
+    },
+    icon () {
+      return this.trial ? 'star-stroke-p' : 'star-c';
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-club-square {
+    background-color: lighten(map-get($palette, 'expertClub'), 55%);
+    height: 2.25rem;
+    width: 2.25rem;
+
+    svg {
+      fill: map-get($palette, 'expertClub');
+      height: 1.25rem;
+      min-height: 1.25rem;
+      min-width: 1.25rem;
+      width: 1.25rem;
+    }
+
+    &--disabled {
+      background-color: #efefef;
+
+      svg {
+        fill: #6d6d6d;
+      }
+    }
+  }
+</style>

package/src/components/form/radio/Radio.vue

@@ -3,6 +3,7 @@
     <input
       class="d-none"
       type="radio"
+      :name="name"
       :value="value"
       @input="onInput"
     />
@@ -26,6 +27,11 @@ export default {
       type: Boolean,
       default: false
     },
+
+    name: {
+      type: String,
+      default: 'radio'
+    },
   },
 
   computed: {