@phila/phila-ui-button 0.0.1 → 1.0.0-beta.0

package/README.md

@@ -1,85 +1,123 @@
 # Phila Button Component
 
-A simple, customizable Vue 3 button component built with TypeScript and Vite.
+The Vue component in this package is for development purposes only. See installation & usage documentation for more details.
 
 ## Features
 
-- 🎨 Multiple variants: primary, secondary, outline, ghost
-- 📏 Three sizes: small, medium, large
+- 🎨 Multiple variants: primary, secondary, destructive, standard (icon-button only)
+- 🔄 Multiple Layouts: text, icon-text, text-icon, icon-button
+- 📏 Four sizes: extra-small, small, medium, large, extra-large (icon-button only)
 - ♿ Accessibility features: focus states, disabled state
-- 🎯 TypeScript support with full type definitions
-- 🎨 Modern, clean design with hover effects
-- 📦 Tree-shakeable and lightweight
 
 ## Installation
 
+Note: Button styles are included in the core package, so installation of the button vue component is optional.
+
 ```bash
+npm install @phila/core
 npm install @phila/phila-ui-button
 # or
-yarn add @phila/phila-ui-button
-# or
+pnpm add @phila/core
 pnpm add @phila/phila-ui-button
 ```
 
+Import core styles and other components in your main entry file (e.g., `main.js|ts`):
+
+```typescript
+import "@phila/core/styles/template-light.css";
+```
+
 ## Usage
 
+Use a button element with the appropriate classes. You can also apply those classes to links to style a link as a button.
+
 ```vue
 <template>
-  <Button variant="primary" size="medium" @click="handleClick"> Click me! </Button>
+  <button class="phila-button phila-button--primary is-medium" @click="handleClick">Medium primary button</button>
+
+  <a class="phila-button phila-button--primary" href="#" @click.prevent="handleClick"> Link as a button </a>
 </template>
 
 <script setup lang="ts">
-import { Button } from "@phila/phila-ui-button";
-
 const handleClick = () => {
   console.log("Button clicked!");
 };
 </script>
 ```
 
-## Props
+## Button Classes
+
+The Phila UI button requires the `phila-button` class and one modifier class. You can apply the following modifier classes:
+
+### Variants
+
+- `phila-button--primary`
+- `phila-button--secondary`
+- `phila-button--destructive`
+
+### Sizes
 
-| Prop       | Type                                               | Default     | Description                    |
-| ---------- | -------------------------------------------------- | ----------- | ------------------------------ |
-| `variant`  | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | The visual style variant       |
-| `size`     | `'small' \| 'medium' \| 'large'`                   | `'medium'`  | The button size                |
-| `disabled` | `boolean`                                          | `false`     | Whether the button is disabled |
+- `is-extra-small`
+- `is-small`
+- `is-medium`
+- `is-large` (optional, large is default)
 
-## Events
+### States
 
-| Event   | Payload      | Description                                                 |
-| ------- | ------------ | ----------------------------------------------------------- |
-| `click` | `MouseEvent` | Emitted when the button is clicked (only when not disabled) |
+- Disabled: apply the `disabled` attribute to the button element.
 
-## Examples
+## Button layouts
 
-### All Variants
+There are three main layouts for the Phila UI button:
+
+1. **Text**: The default layout, displaying only text.
+2. **Text + Icon**: Displays both text and an icon.
+3. **Icon Button**: Displays only an icon.
+
+### Text
 
 ```vue
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
+<button class="phila-button phila-button--primary">
+  Button text
+  </button>
 ```
 
-### All Sizes
+Note: Overflow text will not be truncated with ellipsis unless the button text is wrapped in a span.
+
+### Text + Icon
+
+Icons require manual installation of FontAwesome.
 
 ```vue
-<Button size="small">Small</Button>
-<Button size="medium">Medium</Button>
-<Button size="large">Large</Button>
+<button class="phila-button phila-button--primary">
+  <span class="icon">
+    <i class="fas fa-search"></i>
+  </span>
+  <span>Button text</span>
+</button>
 ```
 
-### Disabled State
+### Icon + Text
 
 ```vue
-<Button disabled>Disabled Button</Button>
+<button class="phila-button phila-button--primary">
+  <span>Button text</span>
+  <span class="icon">
+    <i class="fas fa-search"></i>
+  </span>
+</button>
 ```
 
-### With Click Handler
+### Icon Button
+
+Icon buttons require the `icon-button` class. The default size is "extra-large". For other sizes, include the appropriate size class. To use the "standard" variant, replace `phila-button--primary|secondary|destructive` with `icon-button--standard`.
 
 ```vue
-<Button @click="handleClick">Click Me!</Button>
+<button class="phila-button phila-button--primary icon-button">
+  <span class="icon">
+    <i class="fas fa-search"></i>
+  </span>
+</button>
 ```
 
 ## Development
@@ -90,24 +128,38 @@ const handleClick = () => {
 pnpm install
 ```
 
-### Run Demo
+### Run Storybook demo
+
+```bash
+npm run storybook
+```
+
+### Run lint
 
 ```bash
-pnpm dev
+npm run lint
 ```
 
-### Build Library
+### Create Production Build
 
 ```bash
-pnpm build
+npm run build
 ```
 
-### Type Check
+## Test locally in your development environment
 
 ```bash
-pnpm type-check
+npm pack
+cp ./dist/*.tgz ~/path/to/your/local/npm/repo
+cd ~/path/to/your/local/npm/repo
+npm install *.tgz
+
 ```
 
+## Publishing to NPM
+
+Follow the [release instructions](../../RELEASE.md) using changesets.
+
 ## License
 
 MIT

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("@phila/phila-ui-core"),r=["disabled"],u=e.defineComponent({__name:"PhlButton",props:{disabled:{type:Boolean,default:!1}},emits:["click"],setup(s,{emit:n}){const o=s,l=n,a=e.computed(()=>i.cn("phila-button",o.className)),c=t=>{o.disabled||l("click",t)};return(t,d)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(a.value),disabled:t.disabled,onClick:c},[e.renderSlot(t.$slots,"default")],10,r))}});exports.Button=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=e.defineComponent({__name:"PhlButton",props:{disabled:{type:Boolean,default:!1}},setup(n){const o=n;return(l,t)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[t[0]||(t[0]=e.createElementVNode("h3",null,"Example button",-1)),e.createElementVNode("button",e.mergeProps({class:"phila-button"},o),[e.renderSlot(l.$slots,"default")],16)],64))}});exports.Button=r;

package/dist/index.mjs

@@ -1,24 +1,19 @@
-import { defineComponent as c, computed as i, createElementBlock as r, openBlock as d, normalizeClass as m, renderSlot as u } from "vue";
-import { cn as p } from "@phila/phila-ui-core";
-const b = ["disabled"], h = /* @__PURE__ */ c({
+import { defineComponent as r, createElementBlock as s, openBlock as a, Fragment as p, createElementVNode as t, mergeProps as u, renderSlot as m } from "vue";
+const c = /* @__PURE__ */ r({
   __name: "PhlButton",
   props: {
     disabled: { type: Boolean, default: !1 }
   },
-  emits: ["click"],
-  setup(o, { emit: s }) {
-    const t = o, n = s, l = i(() => p("phila-button", t.className)), a = (e) => {
-      t.disabled || n("click", e);
-    };
-    return (e, f) => (d(), r("button", {
-      class: m(l.value),
-      disabled: e.disabled,
-      onClick: a
-    }, [
-      u(e.$slots, "default")
-    ], 10, b));
+  setup(o) {
+    const n = o;
+    return (l, e) => (a(), s(p, null, [
+      e[0] || (e[0] = t("h3", null, "Example button", -1)),
+      t("button", u({ class: "phila-button" }, n), [
+        m(l.$slots, "default")
+      ], 16)
+    ], 64));
   }
 });
 export {
-  h as Button
+  c as Button
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-button",
-  "version": "0.0.1",
+  "version": "1.0.0-beta.0",
   "description": "Button component for Phila UI library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -25,7 +25,7 @@
   "license": "MIT",
   "peerDependencies": {
     "vue": "^3.0.0",
-    "@phila/phila-ui-core": "1.0.25"
+    "@phila/phila-ui-core": "2.0.0-beta.0"
   },
   "dependencies": {},
   "devDependencies": {