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

package/doc/src/stories/Button.stories.ts

@@ -0,0 +1,130 @@
+import PsButton, { sizes } from '../../../src/components/buttons/PsButton.vue'
+const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Components/Button',
+  component: PsButton,
+  argTypes: {
+    size: { control: { type: 'select', options: sizes } },
+    disabled: { control: 'boolean' },
+    icon: { control: { type: 'select', options: icons } },
+    iconRight: { control: { type: 'select', options: icons } },
+  },
+}
+
+const TemplateDefault = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { PsButton },
+  template: `
+  <div style="display:flex; flex-direction: column;">     
+    <p>Size: Big</p> 
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;">
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon'  layout='solid' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='solid' />
+          <PsButton label='Disabled'   layout='solid' icon='verified' iconPosition='left' disabled/>          
+          <PsButton label='Loading Solid'   layout='solid' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon'  layout='outline' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon'    layout='outline' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only'  layout='outline'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Outline' layout='outline' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='ghost' />
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Ghost' layout='ghost' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='onlytext'/>
+          <PsButton label='Disabled' layout='onlytext' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Only-Text' layout='onlytext' icon='verified' iconPosition='left' loading />
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right'/>
+          <PsButton label='Text Only' layout='caution' />
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled/>
+          <PsButton label='Loading Caution' layout='caution' icon='verified' iconPosition='left' loading />
+    </div>
+
+
+    </div>
+    <p>Size: Medium</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='solid'  size='medium'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: blue;">Outline Style</span>
+          <PsButton label='Left Icon' layout='outline' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='outline' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='outline' size='medium'/>
+          <PsButton label='Disabled' layout='outline' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: brown;">Ghost Style</span>
+          <PsButton label='Left Icon' layout='ghost' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='ghost' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='ghost' size='medium'/>
+          <PsButton label='Disabled' layout='ghost' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='onlytext' size='medium'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='medium'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='medium'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='medium'/>
+          <PsButton label='Text Only' layout='caution' size='medium'/>
+          <PsButton label='Disabled' layout='caution' icon='verified' iconPosition='left' disabled size='medium'/>
+      </div>      
+    </div>
+    <p>Size: Small</p>
+    <div style="display: flex; flex-direction: column; gap: 10px;">
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: black;">Solid Style</span>
+          <PsButton label='Left Icon' layout='solid' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='solid' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='solid' size='small'/>
+          <PsButton label='Disabled' layout='solid' icon='verified' iconPosition='left' disabled size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: green;">Only-Text Style</span>
+          <PsButton label='Left Icon' layout='onlytext' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='onlytext' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='onlytext' size='small'/>
+          <PsButton label='Disabled' layout='onlytext' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+      <div style="display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; justify-items: center; align-items: center;" >
+          <span style="text-align: center; color: red;">Caution Button</span>
+          <PsButton label='Left Icon' layout='caution' icon='verified' iconPosition='left' size='small'/>
+          <PsButton label='Right Icon' layout='caution' icon='verified' iconPosition='right' size='small'/>
+          <PsButton label='Text Only' layout='caution' size='small'/>
+          <PsButton label='Disabled' layout='caution' disabled icon='verified' iconPosition='left' size='small'/>
+      </div>
+    </div>
+    </div>
+  `,
+})
+
+export const Default = TemplateDefault.bind({})

package/doc/src/stories/CardInfos.stories.ts

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

package/doc/src/stories/ChartLegend.stories.ts

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

package/doc/src/stories/Checkbox.stories.ts

@@ -0,0 +1,45 @@
+import PsCheckbox from '../../../src/components/controls/PsCheckbox.vue'
+// const icons = ['add_circle', 'delete', 'done', 'info', 'send']
+export default {
+  title: 'Controls & Selectors/Checkbox',
+  component: PsCheckbox,
+}
+
+const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
+  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/doc/src/stories/CheckboxSimple.stories.ts

@@ -0,0 +1,49 @@
+import PsCheckboxSimple from '../../../src/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:any, {argTypes}:{argTypes:any}) => ({
+  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/doc/src/stories/Chips.stories.ts

@@ -0,0 +1,30 @@
+import PsChips from '../../../src/components/chips/PsChips.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta<typeof PsChips> = {
+  component: PsChips
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsChips>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsChips },
+    setup(){
+      return { args }
+    },
+    template: `<div style="display:flex; gap: 10px;">
+                <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>
+              `,
+    args:{
+      label: 'Simple Chip',
+      icon:'',
+    }
+  })
+}

package/doc/src/stories/ClimateZoneBadge.stories.ts

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

package/doc/src/stories/Collapse.stories.ts

@@ -0,0 +1,46 @@
+import PsCollapse from '../../../src/components/collapse/PsCollapse.vue'
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+const meta: Meta<typeof PsCollapse> = {
+  title: 'Collapse/Collapse/Default',
+  component: PsCollapse
+}
+
+export default meta
+
+type Story = StoryObj<typeof PsCollapse>
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { PsCollapse },
+    setup(){
+      return { ...args }
+    },
+    template: `<div style="width: 150px;">
+                <PsCollapse :title="title">
+                <template #header-action>
+                  <span>a</span>
+                </template>
+                  <template #content>
+                    <PsCollapse  :title="title_second" :disabled="true">
+                      <template #header-action>
+                        <div>a</div>
+                      </template>
+                      <template #content>
+                        <div style="display: flex; flex-direction: column; padding: 0px 8px;">
+                          <span>Active</span>
+                          <span>Resting</span>
+                          <span>Disabled</span>
+                        </div>
+                      </template>
+                    </PsCollapse>
+                  </template>
+                </PsCollapse>
+              </div>
+              `,
+            }),
+            args:{
+              title: 'First Level',
+              title_second: '2nd Level Dis'
+            }
+}

package/doc/src/stories/Colors.mdx

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

@@ -0,0 +1,24 @@
+import PsCostEffectBar from '../../../src/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:any, { argTypes }:{ argTypes:any }) => ({
+  props: Object.keys(argTypes),
+  components: { PsCostEffectBar },
+  template: '<PsCostEffectBar v-bind="$props" />',
+})
+
+export const SimpleProgressBar = Template.bind({})
+// @ts-ignore
+SimpleProgressBar.args = {}

package/doc/src/stories/Datatable.stories.ts

@@ -0,0 +1,53 @@
+// @ts-ignore
+import PsDataTable, { alignment } from '../../../src/components/datatable/PsDataTable.vue'
+import PsDataTableItem from '../../../src/components/datatable/PsDataTableItem.vue'
+
+export default {
+    title: 'Data Tables/DataTable',
+    component: PsDataTable,
+    subcomponents: { PsDataTableItem },
+    argTypes: {
+        align: { control: { type: 'select', options: alignment } },
+    }
+}
+
+const Template = (args:any, { argTypes }:{ argTypes:any }) => ({
+    props: Object.keys(argTypes),
+    components:  {PsDataTable},
+    template: `
+        <div style="width:400px;">
+            <PsDataTable v-bind="$props" />
+        </div>
+        `
+})
+
+const RichTemplate = (args:any, { argTypes }:{ argTypes:any } ) => ({
+    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({})
+// @ts-ignore
+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({})
+// @ts-ignore
+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/doc/src/stories/DateCardInfo.stories.ts

@@ -0,0 +1,20 @@
+import PsDateCardInfo from '../../../src/components/badges-and-tags/PsDateCardInfo.vue'
+
+export default {
+    title: 'Components/DateCardInfo',
+    component: PsDateCardInfo,
+  }
+
+  const Template = (args:any, {argTypes}:{argTypes:any}) => ({
+    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({})