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

package/src/stories/InlineSelector.stories.js

@@ -1,18 +0,0 @@
-import PsInlineSelector from '../components/controls/PsInlineSelector.vue'
-
-export default {
-  title: 'Controls & Selectors/InlineSelector',
-  component: PsInlineSelector,
-}
-
-const TemplateDefault = (args, {argTypes}) => ({
-  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({})

package/src/stories/Input.stories.js

@@ -1,240 +0,0 @@
-import PsInput from '../components/forms/PsInput.vue'
-export default {
-  title: 'Text fields & Forms/Input',
-  component: PsInput,
-  argTypes: {
-    disabled: { control: 'boolean' },
-    required: { control: 'boolean' },
-  },
-}
- 
-const TemplateInputText = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsInput },
-  data: () => {
-    return {
-      validator: {
-        hasError: true,
-        label: 'Error message!'
-      }
-    }
-  },
-  template: `    
-    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
- 
-      <div class="psui-col-span-3 psui-mt-8">
-        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Default</h1>
-      </div>
-     
-      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '' }" />
-      <PsInput label="Resting without hint" />      
-      <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" />      
- 
-      <PsInput v-bind="{...$props, label: 'Focus'}" />
-      <PsInput label="Typing" placeholder="Type to see the effect..." />
-      <PsInput v-bind="{...$props, label: 'Active', active: true }" />
-     
-      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" />
-      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
-      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" >
-        <template v-slot:append>
-          Append
-        </template>
-        <template v-slot:prepend>
-          Prepend
-        </template>
-      </PsInput>
- 
-      <PsInput label="Disabled" :disabled="true" value="100,000" />      
-      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
-      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
- 
-      <div class="psui-col-span-3 psui-mt-8">
-        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Layout Mini</h1>
-      </div>
- 
-      <PsInput layout="mini" label="Resting with hint" hint="This is a hint" value="1,653" />      
-      <PsInput layout="mini" label="Resting without hint" />      
-      <PsInput layout="mini" label="Resting with Placeholder" placeholder="This is a placeholder" />      
- 
-      <PsInput layout="mini" v-bind="{...$props, label: 'Focus'}" />
-      <PsInput layout="mini" label="Typing" placeholder="Type to see the effect..." />
-      <PsInput layout="mini" v-bind="{...$props, label: 'Active', active: true }" />
-     
-      <PsInput layout="mini" v-bind="{...$props, label: 'Error', hasError: true }" />
-      <PsInput layout="mini" v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />
-      <PsInput layout="mini" v-bind="{...$props, label: 'Prepend / Append ' }" >
-        <template v-slot:append>
-          Append
-        </template>
-        <template v-slot:prepend>
-          Prepend
-        </template>
-      </PsInput>
- 
-      <PsInput layout="mini" label="Disabled" :disabled="true" value="100,000" />      
-      <PsInput layout="mini" v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }" />
-      <PsInput layout="mini" v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" />      
- 
-    </div>
-  `
-})
- 
-const TemplateInputPassword = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsInput },
-  data: () => {
-    return {
-      validator: {
-        hasError: true,
-        label: 'Error message!'
-      }
-    }
-  },
-  template: `    
-    <div class="psui-p-8 psui-bg-gray-10 psui-grid psui-grid-cols-3 psui-gap-6">          
- 
-      <div class="psui-col-span-3 psui-mt-8">
-        <h1 class="psui-font-bold psui-border-b psui-border-gray-30">PSInput Password Layout Default</h1>
-      </div>
-     
-      <PsInput v-bind="{...$props, label: 'Resting with hint', placeholder: '', value: '', hint: 'Between 8 and 16 characters' }" >
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-      </PsInput>
- 
-      <PsInput label="Resting without hint" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-        </PsInput>
-       
-        <PsInput label="Resting with Placeholder" placeholder="This is a placeholder" hint="Between 8 and 16 characters">        
-          <template v-slot:append>
-            <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-              visibility_off
-            </span>
-          </template>
-      </PsInput>
- 
-      <PsInput v-bind="{...$props, label: 'Focus'}" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-      </PsInput>
- 
-      <PsInput v-bind="{...$props, label: 'Typing', placeholder: 'Type to see the effect...', value: '' }" hint="Between 8 and 16 characters" >
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-      </PsInput>
- 
-      <PsInput v-bind="{label: 'Active', active: true }" value="Password123" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility
-          </span>
-        </template>
-      </PsInput>
-     
-      <PsInput v-bind="{...$props, label: 'Error', hasError: true }" hint="Between 8 and 16 characters" />
-      <PsInput v-bind="{...$props, label: 'Error with custom message', hasError: 'Format invalid' }" />    
-      <PsInput v-bind="{...$props, label: 'Prepend / Append ' }" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          Append
-        </template>
-        <template v-slot:prepend>
-          Prepend
-        </template>
-      </PsInput>
- 
-      <PsInput label="Disabled" :disabled="true" value="100,000" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility
-          </span>
-        </template>
-      </PsInput>
- 
-      <PsInput v-bind="{...$props, label: 'Disabled without value', disabled: true, value: '', hint: false }">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-      </PsInput>
- 
-      <PsInput v-bind="{...$props, label: 'Active/Disabled', disabled: true, active: true }" hint="Between 8 and 16 characters">
-        <template v-slot:append>
-          <span class="material-icons-round psui-text-gray-50 psui-mr-2">
-            visibility_off
-          </span>
-        </template>
-      </PsInput>      
-    </div>
-  `
-})
- 
-const TemplateSlots = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsInput },
-  template: `
-    <div class="psui-p-8 psui-bg-gray-10">
-      <PsInput v-bind="$props" class="psui-mb-4">
-        <template v-slot:append>
-          ft²
-        </template>
-      </PsInput>  
-      <PsInput v-bind="$props" class="psui-mb-4">
-        <template v-slot:prepend>
-          ft²
-        </template>
-      </PsInput>  
-      <PsInput v-bind="$props" class="psui-mb-4">
-        <template v-slot:prepend>
-          ft²
-        </template>
-        <template v-slot:append>
-          ft²
-        </template>
-      </PsInput>
-    </div>
-  `
-})
- 
-export const InputText = TemplateInputText.bind({})
-InputText.args = {
-  label: 'Input Text',
-  placeholder: 'Placeholder',
-  hint: 'Optional Assistive text',
-  disabled: false,
-  required: false,
-  value: 10,
-}
- 
-export const InputPassword = TemplateInputPassword.bind({})
-InputPassword.args = {
-  type: 'password',
-  label: 'Password',
-  hint: 'Optional Assistive text',
-  disabled: false,
-  required: false,
-}
- 
-export const InputSlots = TemplateSlots.bind({})
-InputSlots.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  hint: 'Optional Assistive text',
-  disabled: false,
-  required: false,
-}

package/src/stories/InputSelect.stories.js

@@ -1,30 +0,0 @@
-import PsInputSelect from '../components/forms/PsInputSelect.vue'
-
-export default {
-  title: 'Text fields & Forms/InputSelect',
-  component: PsInputSelect
-}
-
-const TemplateDefault = (args, {argTypes})=> ({
-    props: Object.keys(argTypes),
-    components: {PsInputSelect},
-    template: `
-  <div style='display:flex; gap: 30px;'>  
-    <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
-        <span>Default Select</span>
-        <PsInputSelect v-bind="$props" label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
-        <PsInputSelect v-bind="$props" disabled label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
-    </div>
-    <div style='width:90px; display:flex; flex-direction: column; gap:20px;'>
-        <span>Mini Select</span>
-        <PsInputSelect v-bind="$props" layout="mini" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
-        <PsInputSelect v-bind="$props" layout="mini" disabled keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
-    </div>
-  </div>
-    `
-})
-
-export const Default = TemplateDefault.bind({})
-Default.args = {
-    items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
-}

package/src/stories/InputTextArea.stories.js

@@ -1,25 +0,0 @@
-import PsInputTextArea from '../components/forms/PsInputTextArea.vue'
-
-export default {
-  title: 'Text fields & Forms/Input Textarea',
-  component: PsInputTextArea,
-}
-
-const Template = (args, {argTypes}) => ({
-  props: Object.keys(argTypes),
-  components: {PsInputTextArea},
-  template: `
-  <div style='background-color:#F3F6F9; width:400px; height: 100%; padding: 20px 20px; display: flex: display; flex-direction: column;'>
-      <div style='display: flex; align-items:center; gap:30px;'>
-          <h1>Default</h1>
-          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" optionalLabel="Optional helper/feedback text"></PsInputTextArea>    
-      </div>
-      <div style='display: flex; align-items:center; gap:30px; margin-top:40px;'>
-          <h1>Disable</h1>
-          <PsInputTextArea v-bind='$props' placeholder='Optional placeholder' label='Drop us a line' rows="${10}" disabled ></PsInputTextArea>
-      </div>
-  </div>
-  `
-}) 
-
-export const Default = Template.bind({})

package/src/stories/Introduction.mdx

@@ -1,211 +0,0 @@
-import { Meta } from "@storybook/blocks";
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Policy Studio" />
-
-#Welcome to UI Explorer
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
-
-<style>
-{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-`}
-</style>

package/src/stories/MiniTag.stories.js

@@ -1,52 +0,0 @@
-import PsMiniTag, {
-  typeOptions,
-} from '../components/badges-and-tags/PsMiniTag.vue'
-
-export default {
-  title: 'Badges & Tags/Tags/Mini Tag',
-  component: PsMiniTag,
-  argTypes: {
-    type: {
-      control: {
-        type: 'select',
-        options: typeOptions,
-      },
-    },
-  },
-}
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PsMiniTag },
-  template: '<PsMiniTag v-bind="$props" />',
-})
-
-export const Info = Template.bind({})
-Info.args = {
-  layout: 'info',
-  message: 'This is an info alert',
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  layout: 'success',
-  message: 'This is a success alert',
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  layout: 'warning',
-  message: 'This is a warning alert',
-}
-
-export const Error = Template.bind({})
-Error.args = {
-  layout: 'error',
-  message: 'This is an error alert',
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  layout: 'default',
-  message: 'This is a default color',
-}

package/src/stories/Playground.stories.js

@@ -1,16 +0,0 @@
-import PsScrollBar from '../components/playground/PsScrollBar.vue'
-
-export default {
-    title: 'Components/Playground',
-    component: PsScrollBar
-}
-
-const Template =  (args, {argTypes}) => ({
-    props: Object.keys(argTypes),
-    components: { PsScrollBar},
-    template: `
-            <PsScrollBar v-bind='$props' scrollWidth='30'></PsScrollbar>
-    `
-})
-
-export const ScrollBar = Template.bind({})

package/src/stories/ProgressBar.stories.js

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

package/src/stories/RadioButton.stories.js

@@ -1,40 +0,0 @@
-import PsRadioButton from '../components/controls/PsRadioButton.vue'
-
-export default {
-  title: 'Controls & Selectors/Radio Button',
-  component: PsRadioButton,
- }
-
- const DefaultTemplate = (args,{ argTypes}) => ({
-   props: Object.keys(argTypes),
-   components: { PsRadioButton},
-   template: `
-    <div style='display: flex; gap: 20px;'>
-      <div style='display: flex; flex-direction: column; gap:10px;'>
-        <span>Resting</span>
-        <div style='display: flex; flex-direction:column; gap:5px;'> 
-          <PsRadioButton v-bind='$props' label='Label 1' size='big'/>
-          <PsRadioButton v-bind='$props' label='Label 2' size='small'/>
-        </div>
-      </div>  
-      <div style='display: flex; flex-direction: column; gap:10px;'>
-        <span>Active</span>
-        <div style='display: flex; flex-direction:column; gap:5px;'> 
-          <PsRadioButton v-bind='$props' label='Label 3' size='big' checked/>
-          <PsRadioButton v-bind='$props' label='Label 4' size='small' checked/>
-        </div>
-      </div>  
-      <div style='display: flex; flex-direction: column; gap:10px;'>
-        <span>Disable</span>
-        <div style='display: flex; flex-direction:column; gap:5px;'> 
-          <PsRadioButton v-bind='$props' label='Label 5' size='big' disabled/>
-          <PsRadioButton v-bind='$props' label='Label 6' size='small' disabled/>
-        </div>
-      </div>  
-    </div>  
-  `
- })
-
-
-export const Default = DefaultTemplate.bind({})
-