@hubspot/cms-component-library 0.2.0 → 0.3.0

package/components/componentLibrary/Button/StyleFields.tsx

@@ -1,11 +1,21 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { ChoiceField, Visibility } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
   buttonVariantLabel = 'Button variant',
   buttonVariantName = 'buttonVariant',
   buttonVariantDefault = 'primary',
+  buttonIconPositionLabel = 'Icon position',
+  buttonIconPositionName = 'buttonIconPosition',
+  buttonIconPositionDefault = 'right',
 }: StyleFieldsProps) => {
+  // iconComponentShowIcon is the hardcoded id in @components/componentLibrary/Icon/ContentFields.tsx
+  const iconPositionVisibility: Visibility = {
+    operator: 'EQUAL',
+    controlling_field: 'iconComponentShowIcon',
+    controlling_value_regex: 'true',
+  };
+
   return (
     <>
       <ChoiceField
@@ -18,6 +28,16 @@ const StyleFields = ({
         ]}
         default={buttonVariantDefault}
       />
+      <ChoiceField
+        label={buttonIconPositionLabel}
+        name={buttonIconPositionName}
+        choices={[
+          ['left', 'Left'],
+          ['right', 'Right'],
+        ]}
+        default={buttonIconPositionDefault}
+        visibility={iconPositionVisibility}
+      />
     </>
   );
 };

package/components/componentLibrary/Button/llm.txt

@@ -234,18 +234,22 @@ Configurable props for customizing field labels, names, and defaults:
 
 #### StyleFields.tsx
 
-Configurable props for variant selection:
+Configurable props for variant and icon position:
 
 ```tsx
 <Button.StyleFields
   buttonVariantLabel="Button variant"
   buttonVariantName="buttonVariant"
   buttonVariantDefault="primary"
+  buttonIconPositionLabel="Icon position"
+  buttonIconPositionName="buttonIconPosition"
+  buttonIconPositionDefault="right"
 />
 ```
 
 **Fields:**
 - `buttonVariant`: ChoiceField for selecting visual style (primary, secondary, tertiary)
+- `buttonIconPosition`: ChoiceField for selecting icon placement (left, right). This field has a hardcoded visibility rule — it is only shown when the icon toggle is enabled (`iconComponentShowIcon === true`), which corresponds to the `BooleanField` id hardcoded in `Icon.ContentFields`.
 
 ### Module Usage Example
 

package/components/componentLibrary/Button/types.ts

@@ -4,6 +4,8 @@ import {
 } from '@hubspot/cms-components/fields';
 import { IconContentFieldsWithToggleProps } from '../Icon/types.js';
 
+export type IconPositionHorizontal = 'left' | 'right';
+
 // Base props shared by all variants
 export type BaseButtonProps = {
   variant?: 'primary' | 'secondary' | 'tertiary'; // !todo: not used atm but keeping for when we need to add variant system.
@@ -11,7 +13,7 @@ export type BaseButtonProps = {
   style?: React.CSSProperties;
   children?: React.ReactNode;
   iconFieldPath?: string;
-  iconPosition?: 'left' | 'right';
+  iconPosition?: IconPositionHorizontal;
   iconSize?: number;
   showIcon?: boolean;
   iconPurpose?: 'SEMANTIC' | 'DECORATIVE';
@@ -56,6 +58,9 @@ export type StyleFieldsProps = {
   buttonVariantLabel?: string;
   buttonVariantName?: string;
   buttonVariantDefault?: string;
+  buttonIconPositionLabel?: string;
+  buttonIconPositionName?: string;
+  buttonIconPositionDefault?: IconPositionHorizontal;
 };
 
 export type RenderWithIconProps = Pick<

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {
@@ -16,7 +16,8 @@
     "url": "git@git.hubteam.com:HubSpot/cms-component-library.git"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "type": "module",
   "dependencies": {