@policystudio/policy-studio-ui-vue 1.1.90-beta.2 → 1.1.90-beta.21

package/src/stories/Accordion.stories.js

@@ -1,59 +0,0 @@
-import PsAccordionItem  from '../components/accordion/PsAccordionItem.vue'
-import PsAccordion from '../components/accordion/PsAccordion.vue'
-
-export default {
-  title: 'Components/Accordion',
-  component: PsAccordion,
-  subcomponents: { PsAccordionItem },
-}
-
-
-export const Index = (args, { argTypes }) => ({
-  props: Object.keys(argTypes, args),
-  components: { PsAccordion, PsAccordionItem },
-  template:
-    `
-    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-2 psui-gap-6">                    
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Big</h1>
-        </div>
-        <PsAccordion layout="big" class="psui-bg-white">
-          <PsAccordionItem title="Header 01">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-          <PsAccordionItem title="Header 02">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-          <PsAccordionItem title="Header 03">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-        </PsAccordion>
-      </div>
-
-      <div>
-        <div class="psui-my-4">
-          <h1 class="psui-font-bold psui-border-b psui-border-gray-30">Accordion Medium</h1>
-        </div>
-        <PsAccordion layout="medium" class="psui-bg-white">
-          <PsAccordionItem title="Header 01">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-          <PsAccordionItem title="Header 02" :opened="false">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-          <PsAccordionItem title="Header 03">
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, illum.</p>
-          </PsAccordionItem>      
-        </PsAccordion>
-      </div>
-    </div>  
-    `,
-})

package/src/stories/BadgeWithIcon.stories.js

@@ -1,31 +0,0 @@
-import  PsBadgeWithIcon  from '../components/badges-and-tags/PsBadgeWithIcon.vue'
-
-export default {
-    title: 'Badges & Tags/Badges/BadgeWithIcon',
-    component: PsBadgeWithIcon,
-    argTypes: {
-    },
-  }
-  
-  const TemplateDefault = (args, {argTypes})=>({
-    props: Object.keys(argTypes),
-    components:{PsBadgeWithIcon},
-    template: `
-        <div style="display: flex; flex-direction: column;">
-          <div style="width: fit-content; display:flex; gap:70px; margin-left: 40px;"> 
-            <span>Grey</span>
-            <span style="margin-left: 8px;">Blue</span>
-            <span style="margin-left: 5px;">Green</span>
-            <span>Yellow</span>
-          </div>
-          <div style="width: fit-content; display:flex; gap:5px;"> 
-            <PsBadgeWithIcon/>
-            <PsBadgeWithIcon layout="blue"/>
-            <PsBadgeWithIcon layout="green"/>
-            <PsBadgeWithIcon layout="yellow"/>
-          </div>
-        </div>
-    `
-  })
-
-  export const Default = TemplateDefault.bind({}) 

package/src/stories/BarChart.stories.js

@@ -1,17 +0,0 @@
-import PsBarChart from '../components/data-graphics/PsBarChart.vue'
-export default {
-  title: 'Data Graphics/Charts/BarChart',
-  component: PsBarChart,
-}
-
-const defaultTemplate = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsBarChart },
-  template: `
-    <div style='padding: 20px;'>
-      <PsBarChart v-bind="$props"/>
-    </div>
-    `
-})
-
-export const BarChart = defaultTemplate.bind({}) 

package/src/stories/Breadcrumb.stories.js

@@ -1,25 +0,0 @@
-import PsBreadcrumb from '../components/navigations/PsBreadcrumb.vue'
-export default {
-  title: 'Navigations/Breadcrumb',
-  component: PsBreadcrumb,
-  argTypes: {},
-}
-const items = [
-  { title: '1st level', route: '' },
-  { title: 'Big name that needs to be shortened', route: '#' },
-  { title: '3rd level', route: '' },
-  { title: '4th level', route: '' },
-]
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsBreadcrumb },
-  template: `
-    <PsBreadcrumb v-bind="$props" />
-  `,
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  items: items,
-}

package/src/stories/Button.stories.js

@@ -1,48 +0,0 @@
-import MyButton from './Button.vue'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: {
-      control: 'color',
-    },
-    onClick: {},
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-}
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-}
-
-export const Secondary = {
-  args: {
-    label: 'Button',
-  },
-}
-
-export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-}
-
-export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-}

package/src/stories/Button.vue

@@ -1,59 +0,0 @@
-<template>
-  <button
-    type="button"
-    :class="classes"
-    @click="onClick"
-    :style="style"
-  >
-    {{ label }}
-  </button>
-</template>
-
-<script>
-import './button.css'
-import { reactive, computed } from 'vue'
-
-export default {
-  name: 'MyButton',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  emits: ['click'],
-
-  setup(props, { emit }) {
-    props = reactive(props)
-    return {
-      classes: computed(() => ({
-        'storybook-button': true,
-        'storybook-button--primary': props.primary,
-        'storybook-button--secondary': !props.primary,
-        [`storybook-button--${props.size || 'medium'}`]: true,
-      })),
-      style: computed(() => ({
-        backgroundColor: props.backgroundColor,
-      })),
-      onClick() {
-        emit('click')
-      },
-    }
-  },
-}
-</script>

package/src/stories/CardInfos.stories.js

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

package/src/stories/ChartLegend.stories.js

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

package/src/stories/Checkbox.stories.js

@@ -1,45 +0,0 @@
-import PsCheckbox from '../components/controls/PsCheckbox.vue'
-// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Controls & Selectors/Checkbox',
-  component: PsCheckbox,
-}
-
-const defaultTemplate = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsCheckbox},
-  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;'>
-          <PsCheckbox v-bind="$props" label='Label 1' />
-          <PsCheckbox v-bind="$props" 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;'>
-          <PsCheckbox v-bind="$props" label='Label 3'  checked />
-          <PsCheckbox v-bind="$props" label='Label 4'  checked size='small'/>
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Mixed</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 5' layout='mixed' checked />
-          <PsCheckbox v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Disabled</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckbox v-bind="$props" label='Label 7' disabled/>
-          <PsCheckbox v-bind="$props" label='Label 8' size='small' disabled/>
-        </div>
-      </div>
-    </div>
-    `
-})
-
-export const Default = defaultTemplate.bind({}) 

package/src/stories/CheckboxSimple.stories.js

@@ -1,49 +0,0 @@
-import PsCheckboxSimple from '../components/controls/PsCheckboxSimple.vue'
-// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
-export default {
-  title: 'Text fields & Forms/Inputs V2/Checkbox',
-  component: PsCheckboxSimple,
-}
-
-const defaultTemplate = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: { PsCheckboxSimple },
-  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;'>
-          <PsCheckboxSimple :checked="checkBox1" @click="checkBox1 = !checkBox1" label='Label 1' />
-          <PsCheckboxSimple v-bind="$props" 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;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 3' checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 4' checked size='small'/>
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Mixed</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Label 5' layout='mixed' checked />
-          <PsCheckboxSimple v-bind="$props" label='Label 6' layout='mixed' size='small' checked />
-        </div>
-      </div>
-      <div style='display:flex; flex-direction:column; gap:5px;'>
-        <p>Disabled</p>
-        <div style='display: flex; flex-direction:column; gap: 10px;'>
-          <PsCheckboxSimple v-bind="$props" label='Input via inputAttrs' :inputAttrs="{ id: 'my-input-id' }" disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Input via component id' size='small' id="my-component-id" data-test="test" disabled/>
-          <PsCheckboxSimple v-bind="$props" label='Input fallback' size='small' disabled/>
-        </div>
-      </div>
-    </div>
-    `
-})
-
-export const Default = defaultTemplate.bind({}) 

package/src/stories/Chips.stories.js

@@ -1,31 +0,0 @@
-import PsChips from '../components/chips/PsChips.vue'
-
-export default {
-  title: 'Components/Chips',
-  component: PsChips,
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsChips },
-  data: ()=>{
-    return{
-      isChecked: true,
-      isCheckedTwo: null,
-    }
-  },
-  template: `<div style="display:flex; gap: 10px;">
-                <PsChips v-bind='$props' type="button" @update:checked='isChecked = $event' :checked='isChecked'/>
-                <PsChips v-bind='$props' label="Simple chips with icons" type="button" layout="with-icon" icon="home" @update:checked='isChecked = $event' :checked='isChecked'/>
-                <PsChips v-bind='$props' label="Radio chips" type="radio" @update:checked='isChecked = $event' :checked='isChecked'/>
-                <PsChips v-bind='$props' label="Checkbox chips" type="checkbox" @update:checked='isCheckedTwo = $event' :checked='isCheckedTwo'/>
-                <PsChips v-bind='$props' label="Rich chips" type="button" layout="rich" icon="text_snippet" @update:checked='isChecked = $event' :checked='isChecked'/>
-              </div>
-              `
-})
-
-export const Default = Template.bind({})
-Default.args = {
-  label: 'Simple Chip',
-  icon:'',
-}

package/src/stories/ClimateZoneBadge.stories.js

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

package/src/stories/Colors.mdx

@@ -1,70 +0,0 @@
-import {Meta } 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="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue click-to-copy" data-to-copy="psui-bg-blue">Blue <div>#5094D3</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-80 click-to-copy" data-to-copy="psui-bg-blue-80">Blue 80 <div>#002A3A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-70 click-to-copy" data-to-copy="psui-bg-blue-70">Blue 70 <div>#00465F</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-60 click-to-copy" data-to-copy="psui-bg-blue-60">Blue 60 <div>#318FAC</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-blue-50 click-to-copy" data-to-copy="psui-bg-blue-50">Blue 50 <div>#64B5CE</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-20 click-to-copy" data-to-copy="psui-bg-blue-20">Blue 20 <div>#E0EFF6</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-blue-10 click-to-copy" data-to-copy="psui-bg-blue-10">Blue 10 <div>#ECF7FB</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-blue-70 psui-bg-white click-to-copy" data-to-copy="psui-bg-white">White <div>#FFFFFF</div></div>
-</div>
-
-## Gray
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-80 click-to-copy" data-to-copy="psui-bg-gray-80">Gray 80 <div>#28323B</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-70 click-to-copy" data-to-copy="psui-bg-gray-70">Gray 70 <div>#34404A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-60 click-to-copy" data-to-copy="psui-bg-gray-60">Gray 60 <div>#515E6A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-50 click-to-copy" data-to-copy="psui-bg-gray-50">Gray 50 <div>#798490</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-gray-40 click-to-copy" data-to-copy="psui-bg-gray-40">Gray 40 <div>#A2ACB7</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-30 click-to-copy" data-to-copy="psui-bg-gray-30">Gray 30 <div>#D6DDE5</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-20 click-to-copy" data-to-copy="psui-bg-gray-20">Gray 20 <div>#E6ECF2</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-gray-50 psui-bg-gray-10 click-to-copy" data-to-copy="psui-bg-gray-10">Gray 10 <div>#F3F6F9</div></div>
-</div>
-
-## Yellow
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-80 click-to-copy" data-to-copy="psui-bg-yellow-80">Yellow 80 <div>#834C0D</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-70 click-to-copy" data-to-copy="psui-bg-yellow-70">Yellow 70 <div>#B87305</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-yellow-20 click-to-copy" data-to-copy="psui-bg-yellow-20">Yellow 20 <div>#EDAB3E</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-yellow-20 psui-bg-yellow-10 click-to-copy" data-to-copy="psui-bg-yellow-10">Yellow 10 <div>#FDF3E3</div></div>
-</div>
-
-## Green
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-80 click-to-copy" data-to-copy="psui-bg-green-80">Green 80 <div>#286943</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-70 click-to-copy" data-to-copy="psui-bg-green-70">Green 70 <div>#44A06A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-green-20 click-to-copy" data-to-copy="psui-bg-green-20">Green 20 <div>#5DB883</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-green-20 psui-bg-green-10 click-to-copy" data-to-copy="psui-bg-green-10">Green 10 <div>#DEF8E8</div></div>
-</div>
-
-## Red
-<div class="psui-flex">
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-80 click-to-copy" data-to-copy="psui-bg-red-80">Red 80 <div>#832F2E</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-70 click-to-copy" data-to-copy="psui-bg-red-70">Red 70 <div>#AA3937</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-red-20 click-to-copy" data-to-copy="psui-bg-red-20">Red 20 <div>#D65C5A</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-15 click-to-copy" data-to-copy="psui-bg-red-15">Red 15 <div>#EAC5C5</div></div>
-  <div class="psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-red-20 psui-bg-red-10 click-to-copy" data-to-copy="psui-bg-red-10">Red 10 <div>#FCEBEB</div></div>
-</div>
-
-## Chart colors
-<div class="psui-flex">
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-sky click-to-copy" data-to-copy="psui-bg-sky">Sky <div>#518BE2</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-teal click-to-copy" data-to-copy="psui-bg-teal">Teal <div>#57C0BA</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-emerald click-to-copy" data-to-copy="psui-bg-emerald">Emerald <div>#8CCA82</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-mustard click-to-copy" data-to-copy="psui-bg-mustard">Mustard <div>#E9CF74</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-orange click-to-copy" data-to-copy="psui-bg-orange">Orange <div>#FF906D</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-pink click-to-copy" data-to-copy="psui-bg-pink">Pink <div>#FF77B8</div></div>
-  <div class="psui-float-left psui-cursor-pointer psui-p-2 psui-h-24 psui-w-32 psui-text-white psui-bg-purple click-to-copy" data-to-copy="psui-bg-purple">Purple <div>#9278C9</div></div>
-</div>

package/src/stories/CostEffectBar.stories.js

@@ -1,23 +0,0 @@
-import PsCostEffectBar from '../components/badges-and-tags/PsCostEffectBar.vue'
-
-export default {
-  title: 'Badges & Tags/Badges/CostEffectBar',
-  component: PsCostEffectBar,
-  argTypes: {
-    value: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-    breakEven: {
-      control: { type: 'number', min: 0, max: 100 },
-    },
-  },
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsCostEffectBar },
-  template: '<PsCostEffectBar v-bind="$props" />',
-})
-
-export const SimpleProgressBar = Template.bind({})
-SimpleProgressBar.args = {}

package/src/stories/Datatable.stories.js

@@ -1,50 +0,0 @@
-import PsDataTable, { alignment } from '../components/datatable/PsDataTable.vue'
-import PsDataTableItem from '../components/datatable/PsDataTableItem.vue'
-
-export default {
-    title: 'Data Tables/DataTable',
-    component: PsDataTable,
-    subcomponents: { PsDataTableItem },
-    argTypes: {
-        align: { control: { type: 'select', options: alignment } },
-    }
-}
-
-const Template = (args, { argTypes }) => ({
-    props: Object.keys(argTypes),
-    components:  {PsDataTable},
-    template: `
-        <div style="width:400px;">
-            <PsDataTable v-bind="$props" />
-        </div>
-        `
-})
-
-const RichTemplate = (args, { argTypes } ) => ({
-    props: Object.keys(argTypes),
-    components: {PsDataTable, PsDataTableItem},
-    template: `
-            <div style="width:400px">    
-                <PsDataTable v-bind="$props">
-                    <PsDataTableItem v-bind="$props"/>
-               </PsDataTable>
-            </div>   
-    `
-})
-
-
-export const Simple = Template.bind({})
-Simple.args = {
-    header: ['year', 'month', 'sale'],
-    data: [{ year: '1992', month: '12', sale: '1000.00' }, { year: '1989', month: '02', sale: '1200.00' }],
-    footer: ['Footer 1', 'Footer 2', 'Footer 3'],
-    type: 'simple',
-}
-
-export const Rich = RichTemplate.bind({})
-Rich.args = {
-    header: ['header 1', 'header 2', 'header 3'],
-    data:[[ [ 20, -3],  [  20,  2], [  20,  2] ], { header4: { value: 20, delta: 2}, header5: { value: 20, delta: 2}, header6: { value: 20, delta: 2} }],
-    footer: ['Footer 1', 'Footer 2', 'Footer 3'],
-    type: 'rich'
-}

package/src/stories/DateCardInfo.stories.js

@@ -1,24 +0,0 @@
-import PsDateCardInfo from '../components/badges-and-tags/PsDateCardInfo.vue'
-
-export default {
-    title: 'Components/DateCardInfo',
-    component: PsDateCardInfo,
-  }
-
-  const Template = (args,{argTypes}) => ({
-    props: Object.keys(argTypes),
-    components:{PsDateCardInfo},
-    template: `
-      <div style="width: 1000px; background:#DBE9F1; display:flex; gap: 7px; padding: 20px; height: 100%;">
-        <PsDateCardInfo v-bind="$props"/>
-        <PsDateCardInfo v-bind="$props"/>
-        <PsDateCardInfo v-bind="$props"/>
-      </div>
-    `
-}) 
-
-export const Default = Template.bind({})
-
-Default.args = {
-  date: '2021/02/23'
-}