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

package/src/stories/RadioButtonSimple.stories.js

@@ -1,43 +0,0 @@
-import PsRadioButtonSimple from '../components/controls/PsRadioButtonSimple.vue'
-
-export default {
-    title: 'Text fields & Forms/Inputs V2/RadioButton',
-    component: PsRadioButtonSimple,
-  }
-
-  const defaultTemplate = (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: { PsRadioButtonSimple },
-    data: () => ({
-      checkBox1 : true
-    }),
-    template: `
-      <div style='display:flex; gap: 20px;'>
-        <div style='display:flex; flex-direction:column; gap:5px;'>
-          <p>Resting</p>
-          <div style='display: flex; flex-direction:column; gap: 10px;'>
-            <PsRadioButtonSimple :checked="radioButton1" @click="radioButton1 = true" label='Label 1' />
-            <PsRadioButtonSimple :checked="radioButton2" @click="radioButton2 = true" label='Label 2' size='small' />
-          </div>
-        </div>
-        <div style='display:flex; flex-direction:column; gap:5px;'>
-          <p>Active</p>
-          <div style='display: flex; flex-direction:column; gap: 10px;'>
-            <PsRadioButtonSimple v-bind="$props" label='Label 3' checked />
-            <PsRadioButtonSimple v-bind="$props" label='Label 4' checked size='small'/>
-          </div>
-        </div>
-        <div style='display:flex; flex-direction:column; gap:5px;'>
-          <p>Disabled</p>
-          <div style='display: flex; flex-direction:column; gap: 10px;'>
-            <PsRadioButtonSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
-            <PsRadioButtonSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
-            <PsRadioButtonSimple v-bind="$props" label='Input fallback' size='small' disabled/>
-          </div>
-        </div>
-      </div>
-      `
-  })
-  
-  export const Default = defaultTemplate.bind({}) 
-  

package/src/stories/SimpleAlert.stories.js

@@ -1,21 +0,0 @@
-import PsSimpleAlert from '../components/notifications/PsSimpleAlert.vue'
-
-export default {
-    title: 'Notifications/Simple Alert',
-    component: PsSimpleAlert,
-  }
-
-  const TemplateDefault = (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components: { PsSimpleAlert },
-    template: `
-      <div style="width:300px;">
-        <PsSimpleAlert v-bind="$props" class="psui-text-blue-60 psui-bg-blue-20"/>
-      </div>
-        `,
-  })
-  
-  export const Default = TemplateDefault.bind({})
-  Default.args = {
-    message:'lorem'
-  }

package/src/stories/Slider.stories.js

@@ -1,75 +0,0 @@
-import PsSlider from '../components/controls/PsSlider.vue'
-
-export default {
-  title: 'Text fields & Forms/Slider',
-  component: PsSlider,
-  // argTypes: {
-  //   layout: { control: { type: 'inline-radio', options: sliderLayout } },
-  // },
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsSlider },
-  template: `
-    <div style="width: 500px;display:block;margin:0 auto;">
-      <PsSlider 
-        v-if="$props['layout'] == 'rich'"
-        v-bind="$props" 
-        :value.sync="value" 
-        class="psui-bg-gray-10 psui-p-10 psui-rounded psui-border psui-border-gray-30 psui-border-dashed"
-      />
-      <PsSlider 
-        v-else
-        v-bind="$props" 
-        :value.sync="value" 
-      />
-    </div>
-  `
-})
-
-export const Label = Template.bind({})
-Label.args = {
-  min: 0,
-  max: 200,
-  maxValue: 200,
-  value: 30,
-  label: 'Score Label',
-  layout: 'default'
-}
-
-export const NoLabel = Template.bind({})
-NoLabel.args = {
-  min: 0,
-  max: 200,
-  maxValue: 200,
-  value: 15,
-  layout: 'default'
-}
-
-export const Bubble = Template.bind({})
-Bubble.args = {
-  min: 0,
-  max: 200,
-  maxValue: 200,
-  value: 23,
-  bubble: true,
-  layout: 'default'
-}
-
-const sliderColors = [
-  { start: 140, end: 170, bgColor: '#FF906D' },
-  { start: 170, end: 200, bgColor: '#D65C5A' },
-]
-export const Rich = Template.bind({})
-Rich.args = {
-  min: 0,
-  max: 200,
-  maxValue: 200,
-  value: 20,
-  bubble: true,
-  dividers: true,
-  layout: 'rich',
-  sliderColors: sliderColors,
-  gridData: [0, 30, 55, 80, 100]
-}

package/src/stories/Switch.stories.js

@@ -1,39 +0,0 @@
-import PsSwitch from '../components/controls/PsSwitch.vue'
-export default {
-  title: 'Controls & Selectors/Switch',
-  component: PsSwitch,
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsSwitch },
-  data(){
-    return {
-      dt: false
-
-    }
-  },
-  template: `
-    <div style='display: flex; gap:10px;'> 
-      <div style='display: flex; gap: 10px; flex-direction: column; margin-right: 10px;'>
-        <span>Size</span>
-        <span>BIG</span>
-        <span>SMALL</span>
-      </div>
-      <div style='display: flex; gap: 10px; flex-direction: column;'>
-        <span>Disable</span>
-        <PsSwitch v-bind="$props" v-model="dt" label='Switch1' disabled size='big'/>
-        <PsSwitch v-bind="$props" v-model="dt" label='Switch2' disabled size='small'/>
-      </div>
-      <div style='display: flex; gap: 10px; flex-direction: column;'>
-      <span>Enable</span>
-        <PsSwitch v-bind="$props" label='Switch3' value size='big'/>
-        <PsSwitch v-bind="$props" label='Switch4' value size='small'/>
-      </div>
-    </div>
-  `
-})
-
-export const Default = Template.bind({})
-
-

package/src/stories/TabHeader.stories.js

@@ -1,52 +0,0 @@
-import PsTabHeader from '../components/tabs/PsTabHeader.vue'
-const items = ['Existing Buildings', 'New Constructions', 'Other tab']
-const item = items[0]
-
-export default {
-  title: 'Components/Tab Header',
-  component: PsTabHeader,
-  argTypes: {}
-}
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsTabHeader },
-  data: () => {
-    return {
-    }
-  },
-  template: `
-  <div class="psui-bg-gray-20 psui-p-8">
-    <PsTabHeader :selected.sync=selected v-bind="$props"/>
-    <div v-if="$props['selected'] === 'Existing Buildings'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
-      <p v-for="i of 4">Tab Existing Buildings Selected</p>
-    </div>
-    <div v-if="$props['selected'] === 'New Constructions'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
-      <p v-for="i of 4">Tab New Constructions Selected</p>
-    </div>
-    <div v-if="$props['selected'] === 'Other tab'" class="psui-bg-white psui-p-4" :class="{ 'psui-mt-4' : $props['layout'] === 'standard'}">
-      <p v-for="i of 4">Other tab Selected</p>
-    </div>
-  </div>
-  `
-})
-
-export const Standard = Template.bind({})
-Standard.args = {
-  layout: 'standard',
-  items: items,
-  selected: item
-}
-
-export const Underline = Template.bind({})
-Underline.args = {
-  layout: 'underline',
-  items: items,
-  selected: item
-}
-
-export const Folder = Template.bind({})
-Folder.args = {
-  layout: 'folder',
-  items: items,
-  selected: item
-}