npm - @magicgol/polyjuice - Versions diffs - 0.1.0 - Mend

@magicgol/polyjuice 0.1.0

Files changed (25) hide show

package/.gitlab-ci.yml +18 -0
package/.nvmrc +1 -0
package/.storybook/main.js +12 -0
package/.storybook/preview-head.html +4 -0
package/.storybook/preview.js +15 -0
package/README.md +24 -0
package/babel.config.js +5 -0
package/lerna.json +6 -0
package/package.json +59 -0
package/public/favicon.ico +0 -0
package/public/index.html +38 -0
package/src/App.vue +28 -0
package/src/assets/global.css +4 -0
package/src/assets/logo.png +0 -0
package/src/assets/palette.scss +3 -0
package/src/components/form/primary-button/PrimaryButton.stories.js +61 -0
package/src/components/form/primary-button/PrimaryButton.vue +55 -0
package/src/components/form/primary-button/primary-button.scss +27 -0
package/src/components/form/secondary-button/SecondaryButton.stories.js +42 -0
package/src/components/form/secondary-button/SecondaryButton.vue +38 -0
package/src/components/form/secondary-button/secondary-button.scss +16 -0
package/src/components/form/tertiary-button/TertiaryButton.stories.js +42 -0
package/src/components/form/tertiary-button/TertiaryButton.vue +38 -0
package/src/components/form/tertiary-button/tertiary-button.scss +14 -0
package/src/main.js +8 -0

package/.gitlab-ci.yml ADDED Viewed

@@ -0,0 +1,18 @@
+# Sets the docker image for the job
+image: node:latest
+# Sets the stages for the pipeline
+stages:
+  - test
+# Installs the dependencies
+before_script:
+  - npm install
+#👇Adds Chromatic as a job
+chromatic_publish:
+  stage: test
+  script:
+    - npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
+  only:
+    - master

package/.nvmrc ADDED Viewed

	@@ -0,0 +1 @@
1	+ v16.0.0

package/.storybook/main.js ADDED Viewed

@@ -0,0 +1,12 @@
+module.exports = {
+  'stories': [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+  ],
+  'framework': '@storybook/vue',
+}

package/.storybook/preview-head.html ADDED Viewed

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+<link href="https://fonts.googleapis.com/css?family=Ubuntu:500" rel="stylesheet" />

package/.storybook/preview.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'responsive',
+  },
+}

package/README.md ADDED Viewed

@@ -0,0 +1,24 @@
+# polyjuice
+## Project setup
+```
+npm install
+```
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+### Compiles and minifies for production
+```
+npm run build
+```
+### Lints and fixes files
+```
+npm run lint
+```
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/babel.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/lerna.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "src/components/*"
+  ],
+  "version": "independent"
+}

package/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "@magicgol/polyjuice",
+  "version": "0.1.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=process.env.CHROMATIC_PROJECT_TOKEN"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/vue": "^6.4.22",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.4",
+    "babel-preset-vue": "^2.0.2",
+    "chromatic": "^6.5.4",
+    "css-loader": "^5.2.7",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "lerna": "^4.0.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    >
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
+    <meta charset="utf-8">
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    >
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0"
+    >
+    <link
+      rel="icon"
+      href="<%= BASE_URL %>favicon.ico"
+    >
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+              Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/assets/global.css ADDED Viewed

@@ -0,0 +1,4 @@
+*:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/assets/palette.scss ADDED Viewed

@@ -0,0 +1,3 @@
+$palette: (
+    'brand': #d81159,
+);

package/src/components/form/primary-button/PrimaryButton.stories.js ADDED Viewed

@@ -0,0 +1,61 @@
+import MgPrimaryButton from './PrimaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Primary Button',
+  component: MgPrimaryButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['submit', 'button'],
+      defaultValue: 'button'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
+    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: { MgPrimaryButton },
+  template: `<mg-primary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  type: 'button',
+  default: 'primary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  type: 'button',
+  default: 'primary button'
+};
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  type: 'button',
+  default: 'primary button'
+};

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

@@ -0,0 +1,55 @@
+<template>
+  <button
+    class="d-block w-100 rounded text-white text-uppercase"
+    :class="classes"
+    :type="type"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './primary-button.scss';
+export default {
+  name: 'mg-primary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'button',
+      validator: function (value) {
+        return ['button', 'submit'].indexOf(value) !== -1;
+      },
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['large', 'normal'].indexOf(value) !== -1;
+      },
+    }
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-primary-button': true,
+        'mg-primary-button-size-normal': this.size === 'normal',
+        'mg-primary-button-size-large': this.size === 'large',
+        'mg-primary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/primary-button/primary-button.scss ADDED Viewed

@@ -0,0 +1,27 @@
+@import '../../../assets/palette';
+.mg-primary-button {
+  appearance: none;
+  background-color: map-get($palette, 'brand');
+  border: 1px solid map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 500;
+  &-size {
+    &-normal {
+      font-size: 0.8215rem;
+      padding: 0.5rem;
+    }
+    &-large {
+      box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

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

@@ -0,0 +1,42 @@
+import MgSecondaryButton from './SecondaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Secondary Button',
+  component: MgSecondaryButton,
+  // 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: { MgSecondaryButton },
+  template: `<mg-secondary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-secondary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  default: 'secondary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  default: 'secondary button'
+};

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

@@ -0,0 +1,38 @@
+<template>
+  <button
+    class="d-block bg-white w-100 p-2 rounded text-uppercase text-center text-decoration-none"
+    :class="classes"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './secondary-button.scss';
+export default {
+  name: 'mg-secondary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-secondary-button': true,
+        'mg-secondary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/secondary-button/secondary-button.scss ADDED Viewed

@@ -0,0 +1,16 @@
+@import '../../../assets/palette';
+.mg-secondary-button {
+  appearance: none;
+  border: 1px solid map-get($palette, 'brand');
+  color: map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.8215rem;
+  font-weight: 500;
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

package/src/components/form/tertiary-button/TertiaryButton.stories.js ADDED Viewed

@@ -0,0 +1,42 @@
+import MgTertiaryButton from './TertiaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Tertiary Button',
+  component: MgTertiaryButton,
+  // 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: { MgTertiaryButton },
+  template: `<mg-tertiary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tertiary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  default: 'tertiary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  default: 'tertiary button'
+};

package/src/components/form/tertiary-button/TertiaryButton.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+  <button
+    class="bg-transparent border-0 text-uppercase"
+    :class="classes"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './tertiary-button.scss';
+export default {
+  name: 'mg-tertiary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-tertiary-button': true,
+        'mg-tertiary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/tertiary-button/tertiary-button.scss ADDED Viewed

@@ -0,0 +1,14 @@
+@import '../../../assets/palette';
+.mg-tertiary-button {
+  color: map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+Vue.config.productionTip = false
+new Vue({
+  render: h => h(App),
+}).$mount('#app')