@policystudio/policy-studio-ui-vue 1.1.90-beta.30 → 1.1.90-beta.32

package/doc/src/stories/Dialog.stories.ts

@@ -0,0 +1,131 @@
+import PsDialog from '../../../src/components/notifications/PsDialog.vue'
+
+export default {
+  title: 'Notifications/Dialog',
+  component: PsDialog,
+}
+// @ts-ignore
+const TemplateExamples = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsDialog },
+  template: `
+          <div class="psui-grid psui-grid-cols-3 psui-gap-4">
+            
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Horizontal</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog theme="informative" layout="horizontal" message="teste">                
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog theme="success" layout="horizontal" :hasClose="false">
+                <template>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog theme="alert" layout="horizontal">
+                <template>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog theme="informative" layout="vertical">
+                <template>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div class="psui-text-red">
+              <h2>Success</h2>
+              <PsDialog theme="success" layout="vertical" :hasClose="false">
+                <template>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog theme="alert" layout="vertical">
+                <template>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                </template>
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+            
+            
+            <!-- PSDialog Vertical -->
+            <div class="psui-col-span-3 psui-mt-8">
+              <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSDialog Vertical Props Message</h1>
+            </div>
+
+            <div>
+              <h2>Informative</h2>
+              <PsDialog theme="informative" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Success</h2>
+              <PsDialog theme="success" layout="vertical" message="This component uses only the props message!" :hasClose="false">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+            
+            <div>
+              <h2>Alert</h2>
+              <PsDialog theme="alert" layout="vertical" message="This component uses only the props message!">
+                <template v-slot:action>
+                  <p style='font-weight: 700;'>Action</p>
+                </template>
+              </PsDialog>
+            </div>
+
+          </div>
+          `,
+})
+
+export const Examples = TemplateExamples.bind({})
+
+

package/doc/src/stories/Draggable.stories.ts

@@ -0,0 +1,23 @@
+import PsDraggable from '../../../src/components/controls/PsDraggable.vue'
+
+export default {
+  title: 'Controls & Selectors/Draggable',
+  component: PsDraggable 
+}
+// @ts-ignore
+const Template = (args, {argTypes}) => ({
+  props: Object.keys(argTypes),
+  components: { PsDraggable },
+  template: `
+    <div style='width: 300px; font-family: "Lato", sans-serif; font-size: 12px;'>
+        <PsDraggable v-bind='$props'/>
+    </div>
+  `
+})
+
+export const Component = Template.bind({})
+// @ts-ignore
+Component.args = {
+  getColumns: {columnGroups:[{title: 'COST EFFECTIVENESS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}, {title: 'PER HOME RESULTS', columns: [ 'Item 1' , 'Item 2' , 'Item 3', 'Item 4']}]},
+  module: 'comparison'
+}

package/doc/src/stories/Dropdown.stories.ts

@@ -0,0 +1,100 @@
+import PsDropdown from '../../../src/components/forms/PsDropdown.vue'
+import PsDropdownList from '../../../src/components/forms/PsDropdownList.vue'
+export default {
+  title: 'Components/Dropdown',
+  component: { PsDropdown, PsDropdownList },
+}
+// @ts-ignore
+const Template = (args, { argTypes }) => ({
+  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({})
+// @ts-ignore
+DropdownMenu.args = {
+  items: [
+    'Selectable option 01',
+    'Selectable option 02',
+    'Selectable option 03',
+    'Selectable option 04',
+    'Selectable option 05',
+    'Selectable option 06',
+  ],
+}

package/doc/src/stories/DropdownList.stories.ts

@@ -0,0 +1,213 @@
+// @ts-ignore
+import PsDropdownList, { itemStyle } from '../../../src/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/doc/src/stories/ElevationSystem.mdx

@@ -0,0 +1,41 @@
+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/doc/src/stories/HighlightRippleDot.stories.ts

@@ -0,0 +1,16 @@
+import PsHighlightRippleDot from '../../../src/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/doc/src/stories/Icon.stories.ts

@@ -0,0 +1,23 @@
+import PsIcon from '../../../src/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/doc/src/stories/InlineSelector.stories.ts

@@ -0,0 +1,18 @@
+import PsInlineSelector from '../../../src/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({})