hp-design-system 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hp-design-system",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "main": "dist/hp-design-system.umd.js",
   "scripts": {

package/src/index.ts

@@ -1,10 +1,14 @@
 import { App } from 'vue'
 import * as components from './components'
+import * as tokens from './views/tokens'
 
-function install (app: App) {
+function install(app: App) {
   Object.keys(components).forEach((key) => {
     app.component(key, components[key as keyof typeof components])
   })
+  Object.keys(tokens).forEach((key) => {
+    app.component(key, tokens[key as keyof typeof tokens])
+  })
 }
 
 // import '../assets/main.scss';

package/src/views/tokens/Colors.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import HpColors from './Colors.vue'
+
+const meta: Meta = {
+  title: 'Componentes/Colors',
+  component: HpColors,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      },
+      table: {
+        category: 'Propriedades',
+        type: {
+          summary: 'string',
+          detail: 'Tipo de texto'
+        },
+        defaultValue: { summary: 'Label padrão' }
+      },
+      description: 'Texto do botão'
+    }
+  }
+}
+
+export default meta
+
+const Template: StoryFn<{ label: string }> = (args) => ({
+  // Define explicitamente o tipo de args
+  components: { HpColors },
+  setup() {
+    return { args }
+  },
+  template: '<HpColors :label="args.label" />'
+})
+
+export const Example = Template.bind({})
+Example.args = {
+  label: 'Label'
+}

package/src/views/tokens/index.ts

@@ -0,0 +1,3 @@
+import { colors } from './Colors'
+
+export { colors }