@policystudio/policy-studio-ui-vue 1.1.90-beta.10 → 1.1.90-beta.17

package/src/stories/Dropdown.stories.ts

@@ -1,89 +0,0 @@
-import PsDropdown from '../components/forms/PsDropdown.vue'
-import PsDropdownList from '../components/forms/PsDropdownList.vue'
-export default {
-  title: 'Components/Dropdown',
-  component: { PsDropdown, PsDropdownList },
-}
-
-const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDropdown, PsDropdownList },
-  template: `
-    <div style='background: #E6ECF2; width:1200px; height: 700px; padding: 20px;' class='psui-flex psui-gap-64 psui-bg-gray-20 '>
-      <PsDropdown>
-        <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
-        </template>
-        <template #items>
-          <div class='psui-pb-5'>
-          <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 20px 8px 20px;'>divider label</p>
-
-          <ul>
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 01</li>
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 02</li>
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 03</li>
-
-            <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
-
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 04</li>
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 05</li>
-            <li style='padding: 7px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer'>Selectable option 06</li>
-          </ul>
-          </div>
-        </template>
-      </PsDropdown>
-
-      <PsDropdown>
-        <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-2'>more_horiz</i>
-        </template>
-        <template #items>
-          <div class='psui-pb-5'>
-          <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
-
-          <ul>
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
-
-            <p class='psui-uppercase psui-text-gray-40 psui-text-accentSmall' style='padding: 24px 24px 8px 24px;'>divider label</p>
-
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
-            <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
-          </ul>
-          </div>
-        </template>
-      </PsDropdown>
-
-      <PsDropdown>
-        <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
-        </template>
-        <template #items>
-          <PsDropdownList v-bind='$props'></PsDropdownList>
-        </template>
-      </PsDropdown>
-
-      <PsDropdown>
-        <template #dropdownTrigger>
-          <i class='psui-icon psui-text-gray-50 psui-cursor-pointer psui-h-auto'>more_horiz</i>
-        </template>
-        <template #items>
-          <div class='psui-my-3'>
-            <ul>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>public</i><span>Selectable option 01</span></li>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>share</i><span>Selectable option 02</span></li>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>person</i><span>Selectable option 03</span></li>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>settings</i><span>Selectable option 04</span></li>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>save</i><span>Selectable option 05</span></li>
-              <li style='padding: 5px 20px; font-size:14px' class='hover:psui-bg-blue-10 hover:psui-text-blue-60 psui-text-gray-60 psui-font-bold psui-cursor-pointer psui-flex psui-items-center psui-gap-3'><i style='font-size: 22px;' class='psui-icon'>equalizer</i><span>Selectable option 06</span></li>
-            </ul>
-          </div>
-        </template>
-      </PsDropdown>
-    </div>
-  `,
-})
-
-export const DropdownMenu = Template.bind({})

package/src/stories/DropdownList.stories.ts

@@ -1,213 +0,0 @@
-// @ts-ignore
-import PsDropdownList, { itemStyle } from '../components/forms/PsDropdownList.vue'
-export default {
-  title: 'Components/Dropdown/Dropdown List',
-  component: { PsDropdownList },
-  argTypes: {
-    layout: { 
-      control: { 
-        type: 'inline-radio', 
-        options: itemStyle 
-      } 
-    },
-    rigthLabelFormatter: {
-      control: {
-        type: 'select',
-        options: [null, 'label', 'function']
-      }
-    }
-  }
-}
-// @ts-ignore
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsDropdownList },
-  data: () => ({
-    selected: item,
-    onlyTextItems: onlyTextItems,
-    richItems: richItems,
-  }),
-  template: `
-    <div style="width:100%;" class="psui-flex psui-gap-8 psui-bg-gray-20 psui-rounded-xl psui-p-10">
-      <div class="psui-w-1/2">
-        <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">OnlyText</p>
-
-        <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
-          <PsDropdownList 
-            v-bind="$props" 
-            :items="onlyTextItems"
-            :selected.sync="selected" 
-            left-label="title"
-            key-value="key" 
-            layout="onlytext"
-            :study-data="study_data" 
-          />
-        </div>
-      </div>
-
-      <div class="psui-w-1/2">
-        <p class="psui-text-h4 psui-font-bold psui-text-blue-80 psui-mb-2">Rich</p>
-
-        <div class="psui-rounded psui-bg-white psui-shadow-elevation-20 psui-py-3">
-          <PsDropdownList 
-            v-bind="$props" 
-            :items="richItems"
-            :selected.sync="selected" 
-            left-label="title"
-            key-value="key" 
-            layout="rich"
-            :study-data="study_data" 
-          />
-        </div>
-      </div>
-    </div>
-  `,
-})
-
-const onlyTextItems = [
-  {
-    'key': 'item_01',
-    'title': 'Dropdown Item',
-  },
-  {
-    'key': 'item_02',
-    'title': 'Dropdown Item',
-  },
-  {
-    'key': 'item_03',
-    'title': 'Dropdown Item',
-  },
-  {
-    'key': 'item_04',
-    'title': 'Dropdown Item',
-  },
-  {
-    'key': 'item_05',
-    'title': 'Dropdown Item',
-  },
-  {
-    'key': 'item_06',
-    'title': 'Dropdown Item',
-  },
-]
-
-const richItems = [
-  {
-    'isActive': true,
-    'key': 'forecast_units_affected',
-    'title': 'Affected Units',
-    'description': '(lifecycle)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 17,
-      'slug': 'forecast_units_affected'
-    },
-    'chartProjection': {
-      'title': 'Number of Affected Units',
-      'subtitle': ''
-    }
-  },
-  {
-    'isActive': false,
-    'key': 'forecast_initial_cost',
-    'title': 'Compliance Cost',
-    'description': '(lifecycle)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 20,
-      'slug': 'forecast_initial_cost'
-    },
-    'chartProjection': {
-      'title': 'Compliance Cost',
-      'subtitle': ''
-    }
-  },
-  {
-    'isActive': true,
-    'key': 'forecast_emissions_savings',
-    'title': 'Emissions Reductions',
-    'description': '(lifecycle MTCO²e)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 18,
-      'slug': 'forecast_emissions_savings'
-    },
-    'chartProjection': {
-      'title': 'Emissions Reductions',
-      'subtitle': 'MTCO²e'
-    }
-  },
-  {
-    'isActive': true,
-    'key': 'forecast_lifecycle_savings',
-    'title': 'Lifecycle Savings',
-    'description': '(on-bill)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 19,
-      'slug': 'forecast_lifecycle_savings'
-    },
-    'chartProjection': {
-      'title': 'Bill Savings',
-      'subtitle': ''
-    }
-  },
-  {
-    'isActive': false,
-    'key': 'forecast_kwh_savings',
-    'title': 'Electricity Savings',
-    'description': '(lifecycle kWh)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 21,
-      'slug': 'forecast_kwh_savings'
-    },
-    'chartProjection': {
-      'title': 'Electricity Savings',
-      'subtitle': 'kWh'
-    }
-  },
-  {
-    'isActive': false,
-    'key': 'forecast_therms_savings',
-    'title': 'Gas Savings',
-    'description': '(lifecycle therms)',
-    'right_label': '00',
-    'hasProjections': true,
-    'hasHelper': {
-      'type': 'helpers',
-      'id': 22,
-      'slug': 'forecast_therms_savings'
-    },
-    'chartProjection': {
-      'title': 'Gas Savings',
-      'subtitle': 'therms'
-    }
-  }
-]
-const item = richItems[0]
-const studyData = {
-  'forecast_units_affected': 7001.75,
-  'forecast_emissions_savings': 17575.66588897,
-  'forecast_therms_savings': 5060589.279978376,
-  'forecast_kwh_savings': -104561078.77158748,
-  'forecast_lifecycle_savings': -40645997.14350001,
-  'forecast_initial_cost': -21144739.311334003
-}
-
-export const DropdownList = Template.bind({})
-// @ts-ignore
-DropdownList.args = {
-  items: onlyTextItems,
-  study_data: studyData,
-}

package/src/stories/ElevationSystem.mdx

@@ -1,41 +0,0 @@
-import { 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="psui-grid psui-grid-cols-3 psui-gap-4">
-  <div class="psui-bg-gray-20 psui-pt-8">
-    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow mx-auto"></div>
-    <p class="psui-text-center">Shadow cast by main light</p>
-  </div>
-  <div class="psui-bg-gray-20 psui-pt-8">
-    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-sm mx-auto"></div>
-    <p class="psui-text-center">Shadow cast by ambient light</p>
-  </div>
-  <div class="psui-bg-gray-20 psui-pt-8">
-    <div class="psui-bg-white psui-w-48 psui-h-48 psui-rounded-md psui-shadow-md mx-auto"></div>
-    <p class="psui-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="psui-grid psui-grid-cols-2 psui-gap-6 psui-p-6 psui-bg-gray-20">
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-shadow-elevation--5">Elevation -5</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-5">Elevation 5</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-10">Elevation 10</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-20">Elevation 20</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-30">Elevation 30</div>
-  <div class="psui-rounded-md psui-p-8 psui-h-20 psui-bg-white psui-shadow-elevation-40">Elevation 40</div>
-</div>

package/src/stories/Header.stories.ts

@@ -1,42 +0,0 @@
-import MyHeader from './Header.vue'
-
-export default {
-  title: 'Example/Header',
-  component: MyHeader,
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // @ts-ignore
-  render: (args) => ({
-    // Components used in your story `template` are defined in the `components` object
-    components: {
-      MyHeader,
-    },
-    // The story's `args` need to be mapped into the template through the `setup()` method
-    setup() {
-      // Story args can be spread into the returned object
-      return {
-        ...args,
-      }
-    },
-    // Then, the spread values can be accessed directly in the template
-    template: '<my-header :user="user" />',
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
-  },
-}
-
-export const LoggedIn = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-}
-
-export const LoggedOut = {
-  args: {
-    user: null,
-  },
-}

package/src/stories/Header.vue

@@ -1,77 +0,0 @@
-<template>
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            fill="none"
-            fill-rule="evenodd"
-          >
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        <span
-          class="welcome"
-          v-if="user"
-        >Welcome, aa<b>{{ user.name }}</b>!</span>
-        <my-button
-          size="small"
-          @click="$emit('logout')"
-          label="Log out"
-          v-if="user"
-        />
-        <my-button
-          size="small"
-          @click="$emit('login')"
-          label="Log in"
-          v-if="!user"
-        />
-        <my-button
-          primary
-          size="small"
-          @click="$emit('createAccount')"
-          label="Sign up"
-          v-if="!user"
-        />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import './header.css'
-import MyButton from './Button.vue'
-
-export default {
-  name: 'MyHeader',
-
-  components: { MyButton },
-
-  props: {
-    user: {
-      type: Object,
-    },
-  },
-
-  emits: ['login', 'logout', 'createAccount'],
-}
-</script>

package/src/stories/HighlightRippleDot.stories.ts

@@ -1,16 +0,0 @@
-import PsHighlightRippleDot from '../components/badges-and-tags/PsHighlightRippleDot.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/HighlightRippleDot',
-  component: PsHighlightRippleDot,
-}
-// @ts-ignore
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsHighlightRippleDot },
-  template: '<PsHighlightRippleDot v-bind="$props" />',
-})
-
-export const HighlightRippleDot = Template.bind({})
-// @ts-ignore
-HighlightRippleDot.args = {}

package/src/stories/Icon.stories.ts

@@ -1,22 +0,0 @@
-import PsIcon from '../components/ui/PsIcon.vue'
-
-export default {
-    title: 'Components/Icon',
-    component: PsIcon,
-    argTypes: {},
-  }
-  // @ts-ignore
-  const Template = (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { PsIcon },
-    template: `
-    <div class='psui-flex'>  
-      <PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg" />
-      <PsIcon v-bind="$props" type='svg' icon="/images/multifamily-units.svg"/>
-    </div>
-    `,
-  })
-  
-  export const IconSimple = Template.bind({})
-  // @ts-ignore
-  IconSimple.args = {}

package/src/stories/InlineSelector.stories.ts

@@ -1,18 +0,0 @@
-import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
-
-export default {
-  title: 'Controls & Selectors/InlineSelector',
-  component: PsInlineSelector,
-}
-
-const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
-  props: Object.keys(argTypes),
-  components: {PsInlineSelector},
-  template: `
-    <div style="width: auto; margin-right: auto; display: flex; align-items: center;">  
-        <PsInlineSelector v-bind="$props"></PsInlineSelector>
-    </div>
-  `
-})
-
-export const Default = TemplateDefault.bind({})