@policystudio/policy-studio-ui-vue 1.1.89 → 1.1.90-beta.10

package/src/stories/Header.vue

@@ -0,0 +1,77 @@
+<template>
+  <header>
+    <div class="storybook-header">
+      <div>
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <span
+          class="welcome"
+          v-if="user"
+        >Welcome, aa<b>{{ user.name }}</b>!</span>
+        <my-button
+          size="small"
+          @click="$emit('logout')"
+          label="Log out"
+          v-if="user"
+        />
+        <my-button
+          size="small"
+          @click="$emit('login')"
+          label="Log in"
+          v-if="!user"
+        />
+        <my-button
+          primary
+          size="small"
+          @click="$emit('createAccount')"
+          label="Sign up"
+          v-if="!user"
+        />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import './header.css'
+import MyButton from './Button.vue'
+
+export default {
+  name: 'MyHeader',
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+
+  emits: ['login', 'logout', 'createAccount'],
+}
+</script>

package/src/stories/{HighlightRippleDot.stories.js → HighlightRippleDot.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Badges & Tags/Badges/HighlightRippleDot',
   component: PsHighlightRippleDot,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsHighlightRippleDot },
@@ -12,4 +12,5 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const HighlightRippleDot = Template.bind({})
+// @ts-ignore
 HighlightRippleDot.args = {}

package/src/stories/{Icon.stories.js → Icon.stories.ts}

@@ -5,7 +5,7 @@ export default {
     component: PsIcon,
     argTypes: {},
   }
-  
+  // @ts-ignore
   const Template = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsIcon },
@@ -18,4 +18,5 @@ export default {
   })
   
   export const IconSimple = Template.bind({})
+  // @ts-ignore
   IconSimple.args = {}

package/src/stories/{InlineSelector.stories.js → InlineSelector.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsInlineSelector,
 }
 
-const TemplateDefault = (args, {argTypes}) => ({
+const TemplateDefault = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: {PsInlineSelector},
   template: `

package/src/stories/{Input.stories.js → Input.stories.ts}

@@ -8,6 +8,7 @@ export default {
   },
 }
  
+// @ts-ignore
 const TemplateInputText = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -79,7 +80,7 @@ const TemplateInputText = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateInputPassword = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -183,7 +184,7 @@ const TemplateInputPassword = (args, { argTypes }) => ({
     </div>
   `
 })
- 
+ // @ts-ignore
 const TemplateSlots = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsInput },
@@ -212,6 +213,7 @@ const TemplateSlots = (args, { argTypes }) => ({
 })
  
 export const InputText = TemplateInputText.bind({})
+// @ts-ignore
 InputText.args = {
   label: 'Input Text',
   placeholder: 'Placeholder',
@@ -222,6 +224,7 @@ InputText.args = {
 }
  
 export const InputPassword = TemplateInputPassword.bind({})
+// @ts-ignore
 InputPassword.args = {
   type: 'password',
   label: 'Password',
@@ -231,6 +234,7 @@ InputPassword.args = {
 }
  
 export const InputSlots = TemplateSlots.bind({})
+// @ts-ignore
 InputSlots.args = {
   label: 'Label',
   placeholder: 'Placeholder',

package/src/stories/{InputSelect.stories.js → InputSelect.stories.ts}

@@ -4,7 +4,7 @@ export default {
   title: 'Text fields & Forms/InputSelect',
   component: PsInputSelect
 }
-
+// @ts-ignore
 const TemplateDefault = (args, {argTypes})=> ({
     props: Object.keys(argTypes),
     components: {PsInputSelect},
@@ -25,6 +25,7 @@ const TemplateDefault = (args, {argTypes})=> ({
 })
 
 export const Default = TemplateDefault.bind({})
+// @ts-ignore
 Default.args = {
     items: [{title:'Text 1', value:'Value 1'}, {title:'Text 2', value:'Value 2'}]
 }

package/src/stories/{InputTextArea.stories.js → InputTextArea.stories.ts}

@@ -5,7 +5,7 @@ export default {
   component: PsInputTextArea,
 }
 
-const Template = (args, {argTypes}) => ({
+const Template = (args:any, {argTypes}:{argTypes:any}) => ({
   props: Object.keys(argTypes),
   components: {PsInputTextArea},
   template: `

package/src/stories/{Introduction.stories.mdx → Introduction.mdx}

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/blocks";
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';
@@ -10,7 +10,104 @@ import StackAlt from './assets/stackalt.svg';
 
 <Meta title="Policy Studio" />
 
-<style>{`
+#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;
@@ -110,102 +207,5 @@ import StackAlt from './assets/stackalt.svg';
     font-size: 12px;
     display: inline-block;
   }
-
-  
-`}</style>
-
-# 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>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
+`}
+</style>

package/src/stories/{MiniTag.stories.js → MiniTag.stories.ts}

@@ -1,4 +1,6 @@
+
 import PsMiniTag, {
+  // @ts-ignore
   typeOptions,
 } from '../components/badges-and-tags/PsMiniTag.vue'
 
@@ -14,7 +16,7 @@ export default {
     },
   },
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsMiniTag },
@@ -22,30 +24,35 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Info = Template.bind({})
+// @ts-ignore
 Info.args = {
   layout: 'info',
   message: 'This is an info alert',
 }
 
 export const Success = Template.bind({})
+// @ts-ignore
 Success.args = {
   layout: 'success',
   message: 'This is a success alert',
 }
 
 export const Warning = Template.bind({})
+// @ts-ignore
 Warning.args = {
   layout: 'warning',
   message: 'This is a warning alert',
 }
 
 export const Error = Template.bind({})
+// @ts-ignore
 Error.args = {
   layout: 'error',
   message: 'This is an error alert',
 }
 
 export const Default = Template.bind({})
+// @ts-ignore
 Default.args = {
   layout: 'default',
   message: 'This is a default color',

package/src/stories/{Playground.stories.js → Playground.stories.ts}

@@ -4,7 +4,7 @@ export default {
     title: 'Components/Playground',
     component: PsScrollBar
 }
-
+// @ts-ignore
 const Template =  (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: { PsScrollBar},

package/src/stories/{ProgressBar.stories.js → ProgressBar.stories.ts}

@@ -12,7 +12,7 @@ export default {
     },
   },
 }
-
+// @ts-ignore
 const TemplateDefault = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsProgressBar },
@@ -20,4 +20,5 @@ const TemplateDefault = (args, { argTypes }) => ({
 })
 
 export const Default = TemplateDefault.bind({})
+// @ts-ignore
 Default.args = {}

package/src/stories/{RadioButton.stories.js → RadioButton.stories.ts}

@@ -5,6 +5,7 @@ export default {
   component: PsRadioButton,
  }
 
+ // @ts-ignore
  const DefaultTemplate = (args,{ argTypes}) => ({
    props: Object.keys(argTypes),
    components: { PsRadioButton},

package/src/stories/{RadioButtonSimple.stories.js → RadioButtonSimple.stories.ts}

@@ -5,7 +5,7 @@ export default {
     component: PsRadioButtonSimple,
   }
 
-  const defaultTemplate = (args, {argTypes}) => ({
+  const defaultTemplate = (args:any, {argTypes}:{argTypes:any}) => ({
     props: Object.keys(argTypes),
     components: { PsRadioButtonSimple },
     data: () => ({

package/src/stories/{SimpleAlert.stories.js → SimpleAlert.stories.ts}

@@ -4,7 +4,7 @@ export default {
     title: 'Notifications/Simple Alert',
     component: PsSimpleAlert,
   }
-
+// @ts-ignore
   const TemplateDefault = (args, { argTypes }) => ({
     props: Object.keys(argTypes),
     components: { PsSimpleAlert },
@@ -16,6 +16,7 @@ export default {
   })
   
   export const Default = TemplateDefault.bind({})
+  // @ts-ignore
   Default.args = {
     message:'lorem'
   }

package/src/stories/{Slider.stories.js → Slider.stories.ts}

@@ -7,7 +7,7 @@ export default {
   //   layout: { control: { type: 'inline-radio', options: sliderLayout } },
   // },
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSlider },
@@ -29,6 +29,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Label = Template.bind({})
+// @ts-ignore
 Label.args = {
   min: 0,
   max: 200,
@@ -39,6 +40,7 @@ Label.args = {
 }
 
 export const NoLabel = Template.bind({})
+// @ts-ignore
 NoLabel.args = {
   min: 0,
   max: 200,
@@ -48,6 +50,7 @@ NoLabel.args = {
 }
 
 export const Bubble = Template.bind({})
+// @ts-ignore
 Bubble.args = {
   min: 0,
   max: 200,
@@ -62,6 +65,7 @@ const sliderColors = [
   { start: 170, end: 200, bgColor: '#D65C5A' },
 ]
 export const Rich = Template.bind({})
+// @ts-ignore
 Rich.args = {
   min: 0,
   max: 200,

package/src/stories/{Switch.stories.js → Switch.stories.ts}

@@ -3,7 +3,7 @@ export default {
   title: 'Controls & Selectors/Switch',
   component: PsSwitch,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsSwitch },

package/src/stories/{TabHeader.stories.js → TabHeader.stories.ts}

@@ -7,6 +7,7 @@ export default {
   component: PsTabHeader,
   argTypes: {}
 }
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTabHeader },
@@ -31,6 +32,7 @@ const Template = (args, { argTypes }) => ({
 })
 
 export const Standard = Template.bind({})
+// @ts-ignore
 Standard.args = {
   layout: 'standard',
   items: items,
@@ -38,6 +40,7 @@ Standard.args = {
 }
 
 export const Underline = Template.bind({})
+// @ts-ignore
 Underline.args = {
   layout: 'underline',
   items: items,
@@ -45,6 +48,7 @@ Underline.args = {
 }
 
 export const Folder = Template.bind({})
+// @ts-ignore
 Folder.args = {
   layout: 'folder',
   items: items,

package/src/stories/{TableResults.stories.js → TableResults.stories.ts}

@@ -1,3 +1,4 @@
+// @ts-ignore
 import PsTableResults, { tableLayout } from '../components/table-results/PsTableResults.vue'
 import PsTableResultsHead from '../components/table-results/PsTableResultsHead.vue'
 import PsTableResultsHeadFlexible from '../components/table-results/PsTableResultsHeadFlexible.vue'
@@ -18,7 +19,7 @@ export default {
     onCollapse: { action: 'clicked' },
   },
 }
-
+// @ts-ignore
 const TableResults = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsTableResults, PsTableResultsHead, PsTableResultsHeadComparison, PsTableResultsHeadFlexible },
@@ -54,6 +55,7 @@ const TableResults = (args, { argTypes }) => ({
 })
 
 export const Results = TableResults.bind({})
+// @ts-ignore
 Results.args = {
   layout: 'results',
   header: resultsDataHeader,
@@ -64,6 +66,7 @@ Results.args = {
 }
 
 export const Comparison = TableResults.bind({})
+// @ts-ignore
 Comparison.args = {
   layout: 'comparison',
   header: comparisonDataHeader,
@@ -74,6 +77,7 @@ Comparison.args = {
 }
 
 export const Flexible = TableResults.bind({})
+// @ts-ignore
 Flexible.args = {
   layout: 'flexible',
   header: flexibleDataHeader,

package/src/stories/{TagScope.stories.js → TagScope.stories.ts}

@@ -3,7 +3,7 @@ export default {
   title: 'Badges & Tags/Tags/Tag Scope',
   component: PsTagScope,
 }
-
+// @ts-ignore
 const defaultTemplate = (args, {argTypes}) => ({
   props: Object.keys(argTypes),
   components: { PsTagScope },

package/src/stories/{TestimonialCard.stories.js → TestimonialCard.stories.ts}

@@ -4,7 +4,7 @@ export default {
     title: 'Components/TestimonialCard',
     component: PsTestimonialCard,
   }
-
+// @ts-ignore
   const Template = (args,{argTypes}) => ({
     props: Object.keys(argTypes),
     components:{PsTestimonialCard},
@@ -18,7 +18,7 @@ export default {
 }) 
 
 export const Default = Template.bind({})
-
+// @ts-ignore
 Default.args = {
   testimonial: 'I used to spend most of my time helping California cities make reach codes. Now, i just show them the Explorer and get to focus on helping cities in other states.',
   user:'Amy Rider',

package/src/stories/{Toast.stories.js → Toast.stories.ts}

@@ -3,7 +3,7 @@ export default {
   title: 'Notifications/Toast',
   component: PsToast,
 }
-
+// @ts-ignore
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { PsToast },