@policystudio/policy-studio-ui-vue 1.0.0

package/src/components/buttons/Button.vue

@@ -0,0 +1,82 @@
+<template>
+  <button
+    class="font-bold align-middle flex rounded-md"
+    :class="classes" 
+    @click="onClick()"
+  >
+    <i
+      v-if="icon"
+      class="my-auto material-icons mr-2"
+      :class="{ 'text-sm': size === 'small' }"
+    >
+    {{ icon }}
+    </i>
+    <div class="flex-grow text-left">{{ label }}</div>
+    <i
+      v-if="iconRight" class="my-auto material-icons ml-2" 
+      :class="{ 'text-sm': size === 'small' }"
+    >
+    {{ iconRight }}
+    </i>
+  </button>
+</template>
+
+<script>
+export const sizes = ['big', 'medium', 'small']
+export default {  
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    outline: {
+      type: Boolean,
+      default: false
+    },
+    ghost: {
+      type: Boolean,
+      default: false
+    },
+    textOnly: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+    },
+    iconRight: {
+      type: String,
+    },
+    size: {
+      type: String,
+      default: 'big',
+      validator: (value) => sizes.indexOf(value) !== -1
+    },
+    disabled: {
+      type: [Boolean, String]
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+    classes() {
+      let sizeCss = 'px-4 py-2'
+      if (this.size === 'medium') sizeCss = 'px-4 py-1'
+      if (this.size === 'small') sizeCss = 'px-2 py-px text-sm'
+      if (this.outline) return `${sizeCss} bg-white border ${this.disabled ? 'border-gray-40 text-gray-40' : 'border-blue-60 text-blue-60'}`
+      if (this.ghost) return `${sizeCss} ${this.disabled ? 'bg-gray-20 text-gray-40' : 'bg-blue-20 text-blue-60 active:shadow-inner'}`
+      if (this.textOnly) return `${sizeCss} ${this.disabled ? 'text-gray-40' : 'text-blue-60'}`
+      if (this.disabled) return `${sizeCss} bg-gray-20 text-gray-40`
+      return `${sizeCss} bg-blue-60 hover:bg-blue-50 text-white active:shadow-inner`
+    }  
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return false
+      this.$emit('click');
+    }
+  }
+}
+</script>

package/src/components/notifications/Dialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <div :class="cssClass">
+    <div class="material-icons my-auto">info</div>
+    <div class="w-full">{{ message }}</div>
+    <div class="cursor-pointer font-bold my-auto pr-4">OK</div>
+  </div>
+</template>
+
+<script>
+export const typeOptions = ['informative', 'success', 'alert']
+export default {
+  name: 'Dialog',
+  props: {
+    type: {
+      type: String,
+      default: 'informative',
+      validator: (value) => typeOptions.indexOf(value) !== -1
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      colors: {
+        informative: { background:'blue-20', color: 'blue-60' },
+        success: { background:'green-10', color: 'green-70' },
+        alert: { background:'yellow-10', color: 'yellow-70' }
+      }
+    }
+  },
+  computed: {
+    cssClass() {
+      return `flex space-x-4 font-small rounded-md py-2 px-4 align-middle flex bg-${this.colors[this.type].background} text-${this.colors[this.type].color}`
+    }
+  }
+}
+</script>

package/src/components/notifications/Toast.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="cssClass">
+    <span class="material-icons mr-4">{{ icon }}</span>
+    <div class="w-full">{{ message }}</div>
+    <div class="flex space-x-4">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export const typeOptions = ['info', 'success', 'warning', 'error']
+export const fillOptions = ['soft', 'intense']
+export default {
+  name: 'Toast',
+  props: {
+    type: {
+      type: String,
+      default: 'info',
+      validator: (value) => typeOptions.indexOf(value) !== -1
+    },
+    fill: {
+      type: String,
+      default: 'intense',
+      validator: (value) => fillOptions.indexOf(value) !== -1
+    },
+    message: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    icon() {
+      if (this.type === 'info') return 'info'
+      if (this.type === 'success') return 'check_circle'
+      return 'warning'
+    },
+    cssClass() {
+      const colors = {
+        info: 'blue-60',
+        success: 'green-20',
+        warning: 'yellow-20',
+        error: 'red-20'
+      }
+
+      const textColor = this.fill === 'intense' ? 'white': colors[this.type]
+      const background = this.fill === 'soft'? `${colors[this.type].split('-', 1)}-10` : colors[this.type]
+
+      return `font-bold shadow-md rounded-md p-3 h-12 flex bg-${background} text-${textColor}`
+    }
+  }
+}
+</script>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,99 @@
+<template>
+  <div :class="wrapperClasses" role="group">
+    <button
+      type="button" 
+      v-for="item in getItems" 
+      :key="item[keyValue]"
+      @click="selectTab(item)"
+      :class="[
+        classes, 
+        { 'bg-blue-60 text-white': getSelected === item[keyValue] && theme === 'standard' },
+        { 'border-b-2 border-blue-60 text-blue-60 font-bold': getSelected === item[keyValue] && theme === 'underline' },
+        { 'text-blue-60 font-bold bg-white hover:text-blue-60': getSelected === item[keyValue] && theme === 'folder' }
+      ]"
+    >
+      {{ item[keyLabel] }}
+    </button>
+  </div>
+</template>
+
+<script>
+export const themeOptions = ['standard', 'underline', 'folder']
+export default {
+  name: 'Tabs',
+  computed: {
+    wrapperClasses() {
+      if (this.theme === 'underline') {
+        return 'flex space-x-4 border-b border-gray-20'
+      }
+      if (this.theme === 'folder') {
+        return 'flex space-x-1'
+      }
+      return 'inline-flex rounded-md flex gap-x-px'
+    },
+    classes() {
+      if (this.theme === 'underline') {
+        return 'text-gray-60 pb-3 hover:text-blue-60'
+      }
+      if (this.theme === 'folder') {
+        return 'bg-gray-10 text-gray-50 py-2 px-4 rounded-t-lg hover:text-gray-60 active:text-blue-60'
+      }
+      return 'bg-gray-10 px-4 py-2 text-gray-60 hover:text-blue-60 last:rounded-r-lg first:rounded-l-lg active:text-white active:bg-blue-60'
+    },
+    getIsObject() {
+      return typeof this.selected === 'object'
+    },
+    getSelected() {
+      if (this.selected) {
+        if (typeof this.selected === 'object' && this.selected[this.keyValue] ) {
+          return this.selected[this.keyValue]        
+        } else {
+          return this.selected
+        }
+      } else {
+        return false
+      }
+    },
+    getItems() {
+      if (this.items.length > 0 && typeof this.items[0] !== 'object') {
+        return this.items.map((item) => { 
+          return {
+            [this.keyLabel]: item,
+            [this.keyValue]: item
+          }
+        })
+      } else {
+        return this.items
+      }
+    }
+  },
+
+  props: {
+    theme: {
+      type: String,
+      default: 'standard',
+      validator: (value) => themeOptions.indexOf(value) !== -1
+    },
+    items: {
+      type: Array,
+      required: true
+    },
+    selected: {},
+    keyLabel: {
+      type: String,
+      default: 'label'
+    },
+    keyValue: {
+      type: String,
+      default: 'value'
+    }
+  },
+  methods: {
+    selectTab(item) {
+      this.$emit('update:selected', this.getIsObject ? item : item[this.keyValue] )
+      this.$emit('change', this.getIsObject ? item : item[this.keyValue])
+    }
+  }
+
+}
+</script>

package/src/index.js

@@ -0,0 +1,14 @@
+import Toast from './components/notifications/Toast.vue';
+import Dialog from './components/notifications/Dialog.vue';
+
+export default {
+  install(Vue) {
+    Vue.component('Toast', Toast);
+    Vue.component('Dialog', Dialog);
+  },
+};
+
+export {
+	Toast,
+  Dialog
+}

package/src/stories/Button.stories.js

@@ -0,0 +1,54 @@
+import Button, { sizes } from '../components/buttons/Button.vue';
+const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    disabled: { control: 'boolean' },
+    icon: { control: { type: 'select',  options: icons} },
+    iconRight: { control: { type: 'select',  options: icons} }
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Button },
+  template: `
+  <Button v-bind="$props" />
+  `
+});
+
+export const Solid = Template.bind({});
+Solid.args = {
+  label: 'Solid button',
+  size: 'big',
+  disabled: false,
+  iconRight: 'add_circle'
+};
+
+export const Outline = Template.bind({});
+Outline.args = {
+  label: 'Outline button',
+  size: 'big',
+  disabled: false,
+  icon: 'add_circle',
+  outline: true
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  label: 'Ghost button',
+  size: 'big',
+  disabled: false,
+  ghost: true
+};
+
+export const TextOnly = Template.bind({});
+TextOnly.args = {
+  label: 'TextOnly button',
+  disabled: true,
+  icon: 'add_circle',
+  size: 'big',
+  textOnly: true
+};

package/src/stories/Colors.stories.mdx

@@ -0,0 +1,22 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Colors" />
+
+<style>{`
+.mx-auto { margin: 0 auto; }
+`}</style>
+
+# Colors
+Out colors are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. The support colors are used as a visual support to communicate and provide better and more meaningful feedback.
+
+## Blue
+
+<div class="grid grid-flow-col">
+  <div class="p-2 h-20 text-white bg-blue-80">Blue 80</div>
+  <div class="p-2 h-20 text-white bg-blue-70">Blue 70</div>
+  <div class="p-2 h-20 text-white bg-blue-60">Blue 60</div>
+  <div class="p-2 h-20 text-white bg-blue-50">Blue 50</div>
+  <div class="p-2 h-20 text-blue-70 bg-blue-20">Blue 20</div>
+  <div class="p-2 h-20 text-blue-70 bg-blue-10">Blue 10</div>
+  <div class="p-2 h-20 text-blue-70 bg-white ">White</div>
+</div>

package/src/stories/Dialog.stories.js

@@ -0,0 +1,34 @@
+import Dialog from '../components/notifications/Dialog.vue';
+
+export default {
+  title: 'Components/Dialog',
+  component: Dialog,
+  argTypes: {
+    type: { control: { type: 'select', options: ['informative', 'success', 'alert'] } },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Dialog },
+  template: '<Dialog v-bind="$props" />',
+});
+
+export const Informative = Template.bind({});
+Informative.args = {
+  type: 'informative',
+  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  type: 'success',
+  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  type: 'alert',
+  message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+};
+

package/src/stories/ElevationSystem.stories.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Elevation system" />
+
+<style>{`
+.mx-auto { margin: 0 auto; }
+`}</style>
+
+# Elevation system
+Elevation is the distance between two surfaces on the z-axis. Evidenced by the use of shadows.
+
+## 1. Introduction
+Elevation is evidenced by the use of shadows. It's another way to establish a visual hierarchy, create prominence, and increase contrast between interface elements and regions. Because shadows express the degree of elevation between surfaces, they must be used consistently across the tool.
+
+### 1.1. Shadow and light
+The shadows in our elements are projected by these two light sources: main light and ambient light.
+<div class="grid grid-cols-3 gap-4">
+  <div class="bg-gray-20 pt-8">
+    <div class="bg-white w-48 h-48 rounded-md shadow mx-auto"></div>
+    <p class="text-center">Shadow cast by main light</p>
+  </div>
+  <div class="bg-gray-20 pt-8">
+    <div class="bg-white w-48 h-48 rounded-md shadow-sm mx-auto"></div>
+    <p class="text-center">Shadow cast by ambient light</p>
+  </div>
+  <div class="bg-gray-20 pt-8">
+    <div class="bg-white w-48 h-48 rounded-md shadow-md mx-auto"></div>
+    <p class="text-center">Combined shadow from main and ambient lights</p>
+  </div>
+</div>
+
+## 2. Elevation system
+Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
+<div class="grid grid-cols-2 gap-6 p-6 bg-gray-20">
+  <div class="rounded-md p-8 h-20 shadow-inner">Elevation -5</div>
+  <div class="rounded-md p-8 h-20 bg-white shadow-sm">Elevation 5</div>
+  <div class="rounded-md p-8 h-20 bg-white shadow">Elevation 10</div>
+  <div class="rounded-md p-8 h-20 bg-white shadow-md">Elevation 20</div>
+  <div class="rounded-md p-8 h-20 bg-white shadow-lg">Elevation 30</div>
+  <div class="rounded-md p-8 h-20 bg-white shadow-xl">Elevation 40</div>
+</div>

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,211 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Policy Studio" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to UI Explorer
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>