@magicgol/polyjuice 0.55.1 → 0.56.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.55.1",
3
+ "version": "0.56.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -154,7 +154,7 @@ export default {
154
154
 
155
155
  &-transparent {
156
156
  background: rgba(255, 255, 255, 0.95) !important;
157
- border: 1px solid #eee;
157
+ border: 1px solid #e2e7ef;
158
158
  box-shadow: none;
159
159
  }
160
160
  }
@@ -0,0 +1,21 @@
1
+ import MgTeamBadge from './TeamBadge.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Context/Team/Badge/Team Badge',
6
+ component: MgTeamBadge,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ };
9
+
10
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
11
+ const Template = (args, { argTypes }) => ({
12
+ props: Object.keys(argTypes),
13
+ components: { MgTeamBadge },
14
+ template: `<mg-team-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-team-badge>`,
15
+ });
16
+
17
+ export const Default = Template.bind({});
18
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
19
+ Default.args = {
20
+ colors: ['#fff', '#f00']
21
+ };
@@ -0,0 +1,46 @@
1
+ <template>
2
+ <div
3
+ class="d-inline-flex text-center rounded-circle justify-content-center align-items-center overflow-hidden"
4
+ :class="classes"
5
+ >
6
+ <div
7
+ v-for="color in colors"
8
+ :key="color"
9
+ :style="{'backgroundColor': color, 'width': width}"
10
+ class="h-100"
11
+ ></div>
12
+ </div>
13
+ </template>
14
+
15
+ <script>
16
+ export default {
17
+ name: 'mg-team-badge',
18
+
19
+ props: {
20
+ colors: {
21
+ type: Array,
22
+ default: () => [],
23
+ }
24
+ },
25
+
26
+ computed: {
27
+ classes() {
28
+ return {
29
+ 'mg-team-badge': true,
30
+ };
31
+ },
32
+ width () {
33
+ return (1 / this.colors.length * 100) + '%';
34
+ }
35
+ },
36
+ };
37
+ </script>
38
+
39
+ <style lang="scss">
40
+ .mg-team-badge {
41
+ border: 1px solid #efefef;
42
+ height: 1.125rem;
43
+ width: 1.125rem;
44
+ min-width: 1.125rem;
45
+ }
46
+ </style>