@westpac/ui 1.1.2 → 1.2.0

package/.agents/skills/creating-gel-component/SKILL.md

@@ -7,9 +7,13 @@ description: 'Scaffolds a new GEL design system UI component following project c
 
 Scaffolds a new React component in `packages/ui/src/components/`. All conventions (file naming, imports, patterns) are defined in the `packages/ui/.agents/AGENTS.md` — follow those automatically.
 
-## Step-by-Step Workflow
+## When to Use
 
-### 1. Create the types file (`{name}.types.ts`)
+Use this skill when you want to create a new GEL design system component. This includes scaffolding the necessary files (component, styles, types, tests, stories), following the established patterns for responsive variants and Tailwind styling, and registering the component in the main index.
+
+## Steps
+
+1. Create the types file (`{name}.types.ts`)
 
 ```tsx
 import { HTMLAttributes } from 'react';
@@ -30,7 +34,7 @@ export type {PascalName}Props = {
 } & HTMLAttributes<HTMLElement>;
 ```
 
-### 2. Create the styles file (`{name}.styles.ts`)
+2. Create the styles file (`{name}.styles.ts`)
 
 ```ts
 import { tv } from 'tailwind-variants';
@@ -41,7 +45,7 @@ export const styles = tv({
 });
 ```
 
-### 3. Create the component file (`{name}.component.tsx`)
+3. Create the component file (`{name}.component.tsx`)
 
 ```tsx
 'use client';
@@ -78,14 +82,14 @@ function Base{PascalName}(
 export const {PascalName} = forwardRef(Base{PascalName});
 ```
 
-### 4. Create the index file (`index.ts`)
+4. Create the index file (`index.ts`)
 
 ```ts
 export { {PascalName} } from './{kebab-case-name}.component.js';
 export { type {PascalName}Props } from './{kebab-case-name}.types.js';
 ```
 
-### 5. Create the test file (`{name}.spec.tsx`)
+5. Create the test file (`{name}.spec.tsx`)
 
 ```tsx
 import { render } from '@testing-library/react';
@@ -102,7 +106,7 @@ describe('{PascalName}', () => {
 
 See the `writing-gel-tests` skill for comprehensive testing guidance.
 
-### 6. Create the stories file (`{name}.stories.tsx`)
+6. Create the stories file (`{name}.stories.tsx`)
 
 ```tsx
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react-vite';
@@ -137,7 +141,7 @@ export const Example = () => {
 };
 ```
 
-### 7. Register the component
+7. Register the component
 
 Add the export to `packages/ui/src/components/index.ts`:
 
@@ -145,7 +149,7 @@ Add the export to `packages/ui/src/components/index.ts`:
 export * from './{kebab-case-name}/index.js';
 ```
 
-### 8. Verify
+8. Verify
 
 Run these commands from `packages/ui/`:
 

package/.agents/skills/reviewing-gel-component/SKILL.md

@@ -7,15 +7,25 @@ description: 'Reviews GEL design system components for convention compliance, ac
 
 Reviews components in `packages/ui/src/components/` against the conventions defined in `packages/ui/.agents/AGENTS.md`.
 
-## Review Checklist
+## When to Use
 
-### 1. File Structure
+Use this skill when a maintainer asks to "review my component", "check my code", "audit this component", or "ensure this follows GEL conventions". This includes checking file structure, types, styles, component implementation, accessibility, and index exports for any component in `packages/ui`.
+
+## Use vercel skills first
+
+Before continuing with this skill, check using `vercel-react-best-practices` and `web-design-guidelines` skills to catch common React and web development issues.
+
+## Project Review Checklist
+
+The below checklist is based on project specific conventions that may not be covered by general best practices. Use this to review the component for compliance with GEL design system standards.
+
+1. File Structure
 
 - [ ] All required files exist: `index.ts`, `*.component.tsx`, `*.styles.ts`, `*.types.ts`, `*.spec.tsx`, `*.stories.tsx`
 - [ ] File names use kebab-case matching the directory name
 - [ ] Component is exported from `packages/ui/src/components/index.ts`
 
-### 2. Types
+2. Types
 
 - [ ] `Variants` type alias derived from `VariantProps<typeof styles>`
 - [ ] Responsive props wrapped with `ResponsiveVariants<Variants['...']>`
@@ -24,7 +34,7 @@ Reviews components in `packages/ui/src/components/` against the conventions defi
 - [ ] Uses `Omit<>` for conflicting HTML attributes
 - [ ] `.js` extensions on relative imports
 
-### 3. Styles
+3. Styles
 
 - [ ] Uses tailwind styling except when animations/dynamic styles are required
 - [ ] Uses `tv()` from `tailwind-variants`, exported as `styles`
@@ -33,7 +43,7 @@ Reviews components in `packages/ui/src/components/` against the conventions defi
 - [ ] Uses `slots` for multi-element components
 - [ ] Uses `compoundSlots` for variant combinations
 
-### 4. Component
+4. Component
 
 - [ ] Has `'use client';` if using hooks or client-side rendering
 - [ ] Uses `forwardRef` pattern when appropriate
@@ -44,7 +54,7 @@ Reviews components in `packages/ui/src/components/` against the conventions defi
 - [ ] `.js` extensions on all relative imports
 - [ ] Plain function declarations (not `React.FC`)
 
-### 5. Accessibility
+5. Accessibility
 
 - [ ] Interactive elements use appropriate ARIA attributes
 - [ ] Decorative icons use `aria-hidden`
@@ -52,19 +62,19 @@ Reviews components in `packages/ui/src/components/` against the conventions defi
 - [ ] Semantic HTML elements used
 - [ ] `react-stately` hooks for state management where applicable
 
-### 6. Index
+6. Index
 
 - [ ] Exports component and props type only
 - [ ] Does NOT re-export styles
 - [ ] `.js` extensions
 
-### 7. Tests
+7. Tests
 
 - [ ] At minimum a "renders the component" test
 - [ ] Uses `userEvent.setup()` (not `fireEvent`) for interactions
 - [ ] Imports from `.component.js` (not index)
 
-### 8. Stories
+8. Stories
 
 - [ ] Imports from `@storybook/react-vite`
 - [ ] Has `tags: ['autodocs']` and standard decorator

package/.agents/skills/writing-gel-tests/SKILL.md

@@ -7,6 +7,10 @@ description: 'Writes Vitest + React Testing Library tests for GEL design system
 
 Guides writing tests for components in `packages/ui/src/components/`. Test conventions are also summarised in `packages/ui/.agents/AGENTS.md`.
 
+## When to Use
+
+Reference this when a maintainer asks to "write tests for my component", "add tests", "improve test coverage", or "ensure this is well tested". Tests should also be written/updated after functionality has been added or changed. This includes writing new tests, improving existing tests, and ensuring comprehensive coverage for any component in `packages/ui`.
+
 ## Test Environment
 
 - **Runner**: Vitest with `jsdom` environment
@@ -48,7 +52,7 @@ Import from `./component-name.component.js` (NOT from `index`), sub-components f
 
 ## Test Categories
 
-### 1. Render Tests (Required)
+1. Render Tests (Required)
 
 ```tsx
 it('renders the component', () => {
@@ -57,7 +61,7 @@ it('renders the component', () => {
 });
 ```
 
-### 2. Variant Rendering
+2. Variant Rendering
 
 ```tsx
 it('renders as an anchor tag', () => {
@@ -70,7 +74,7 @@ it('renders as an anchor tag', () => {
 });
 ```
 
-### 3. User Interactions
+3. User Interactions
 
 Always use `userEvent.setup()` (NOT `fireEvent`):
 
@@ -89,7 +93,7 @@ it('calls onClick when clicked', async () => {
 });
 ```
 
-### 4. Visibility / State
+4. Visibility / State
 
 ```tsx
 it('shows content when expanded', async () => {
@@ -109,7 +113,7 @@ it('shows content when expanded', async () => {
 });
 ```
 
-### 5. Icon Rendering
+5. Icon Rendering
 
 ```tsx
 it('renders an icon when passed', () => {
@@ -118,7 +122,7 @@ it('renders an icon when passed', () => {
 });
 ```
 
-### 6. Utility Functions
+6. Utility Functions
 
 ```tsx
 describe('ComponentName utils', () => {

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @westpac/ui
 
+## 1.2.0
+
+### Minor Changes
+
+- ba74b1e: - added hideFilter prop to MultiSelect to hide the filter in dropdown
+  - added hideSelectAll prop to MultiSelect to hide the Select All option in dropdown
+  - added width prop to MultiSelect for fixed widths similar to the Input component
+
+### Patch Changes
+
+- 5aa6631: - fix security issues in style-config
+  - fix deprecated prop usage in autocomplete after package updates
+
 ## 1.1.2
 
 ### Patch Changes