@hubspot/cms-component-library 0.1.0-alpha.4 → 0.1.0-alpha.6

package/components/componentLibrary/Button/index.module.scss

@@ -2,8 +2,11 @@
 
 @layer hscl-library {
   .button {
-
     @include component-base.hscl-component-conditional('button');
     @include component-base.hscl-component-hover-conditional('button');
   }
-}
+
+  .icon {
+    fill: var(--hscl-button-color, revert-layer);
+  }
+}

package/components/componentLibrary/Button/index.tsx

@@ -3,11 +3,15 @@
 import createHsclComponent from '../utils/createHsclComponent.js';
 import styles from './index.module.scss';
 import { BaseAndInternalComponentProps } from '../types/index.js';
+import { Icon } from '@hubspot/cms-components';
 
 // Base props shared by all variants
 type BaseButtonProps = BaseAndInternalComponentProps & {
   disabled?: boolean;
   children?: React.ReactNode;
+  iconFieldPath?: string;
+  iconPosition?: 'left' | 'right';
+  iconSize?: number;
 };
 
 // Button variant props
@@ -48,10 +52,32 @@ const Component = (props: ButtonProps) => {
     props: Omit<ButtonVariantProps, 'buttonType' | 'hsclInternal'> &
       Partial<BaseButtonProps>
   ) {
-    const { onClick, disabled = false, children, ...rest } = props;
+    const {
+      onClick,
+      disabled = false,
+      children,
+      iconPosition = 'right',
+      iconFieldPath,
+      iconSize = 18,
+      ...rest
+    } = props;
     return (
       <button {...sharedProps} onClick={onClick} disabled={disabled} {...rest}>
+        {iconFieldPath && iconPosition === 'left' && (
+          <Icon
+            fieldPath={iconFieldPath}
+            height={iconSize}
+            className={styles.icon}
+          />
+        )}
         {children}
+        {iconFieldPath && iconPosition === 'right' && (
+          <Icon
+            fieldPath={iconFieldPath}
+            height={iconSize}
+            className={styles.icon}
+          />
+        )}
       </button>
     );
   }
@@ -60,10 +86,33 @@ const Component = (props: ButtonProps) => {
     props: Omit<LinkVariantProps, 'buttonType' | 'hsclInternal'> &
       Partial<BaseButtonProps>
   ) {
-    const { href = '', target = '_self', rel = '', children, ...rest } = props;
+    const {
+      href = '',
+      target = '_self',
+      rel = '',
+      children,
+      iconPosition = 'right',
+      iconFieldPath,
+      iconSize = 18,
+      ...rest
+    } = props;
     return (
       <a {...sharedProps} href={href} target={target} rel={rel} {...rest}>
+        {iconFieldPath && iconPosition === 'left' && (
+          <Icon
+            fieldPath={iconFieldPath}
+            height={iconSize}
+            className={styles.icon}
+          />
+        )}
         {children}
+        {iconFieldPath && iconPosition === 'right' && (
+          <Icon
+            fieldPath={iconFieldPath}
+            height={iconSize}
+            className={styles.icon}
+          />
+        )}
       </a>
     );
   }

package/components/componentLibrary/Button/scaffolds/fields.tsx.template

@@ -1,5 +1,5 @@
-import { LinkField, TextField } from '@hubspot/cms-components/fields'
-import __NC__ from './buttonIndex.js';
+import { BooleanField, IconField, LinkField, TextField, IconFieldType, ChoiceField, Visibility } from '@hubspot/cms-components/fields'
+import __NC__ from './index.js';
 
 export type __NC__ContentFieldsProps = {
   buttonTextDefault?: string;
@@ -9,10 +9,26 @@ export type __NC__ContentFieldsProps = {
   buttonLinkName?: string;
   buttonLinkDefault?: {url: {type: 'EXTERNAL', content_id: number, href: string}};
   showButtonLink?: boolean;
+  showButtonIcon?: boolean;
+  buttonIconLabel?: string;
+  buttonIconName?: string;
+  buttonIconDefault?: IconFieldType['default'];
+  buttonShowIconLabel?: string;
+  buttonShowIconName?: string;
+  buttonShowIconDefault?: boolean;
+  buttonIconPositionLabel?: string;
+  buttonIconPositionName?: string;
+  buttonIconPositionDefault?: string;
 }
 
 export function contentFields(props: __NC__ContentFieldsProps) {
-  const { buttonTextDefault, buttonTextLabel, buttonTextName, buttonLinkLabel, buttonLinkName, buttonLinkDefault, showButtonLink = true } = props;
+  const { buttonTextDefault, buttonTextLabel, buttonTextName, buttonLinkLabel, buttonLinkName, buttonLinkDefault, showButtonLink = true , buttonShowIconLabel, buttonShowIconName, buttonShowIconDefault, buttonIconLabel, buttonIconName, buttonIconDefault, buttonIconPositionLabel, buttonIconPositionName, buttonIconPositionDefault} = props;
+
+  const SHOW_ICON_VISIBILITY_RULES: Visibility = {
+    operator: 'EQUAL',
+    controlling_field: 'showIcon',
+    controlling_value_regex: 'true',
+  }
 
   return (
     <>
@@ -28,6 +44,26 @@ export function contentFields(props: __NC__ContentFieldsProps) {
           default={buttonLinkDefault || {url: {type: 'EXTERNAL', content_id: 0, href: 'https://www.google.com'}}}
         />
       )}
+      <BooleanField
+        id="showIcon"
+        label={buttonShowIconLabel || 'Show Icon'}
+        name={buttonShowIconName || 'showIcon'}
+        display='toggle'
+        default={buttonShowIconDefault || false}
+      />
+      <IconField
+        label={buttonIconLabel || 'Button Icon'}
+        name={buttonIconName || 'buttonIcon'}
+        default={buttonIconDefault || {name: 'fa-arrow-right'}}
+        visibility={SHOW_ICON_VISIBILITY_RULES}
+      />
+      <ChoiceField
+        label={buttonIconPositionLabel || 'Button Icon Position'}
+        name={buttonIconPositionName || 'buttonIconPosition'}
+        choices={[['left','Left'], ['right','Right']]}
+        default={buttonIconPositionDefault || 'right'}
+        visibility={SHOW_ICON_VISIBILITY_RULES}
+      />
     </>
   )
 }

package/components/componentLibrary/Button/scaffolds/index.ts.template

@@ -1,14 +1,14 @@
-import Button, { ButtonProps } from '@hubspot/cms-component-library/Button';
+import DefaultButton, { ButtonProps as DefaultButtonProps } from '@hubspot/cms-component-library/Button';
 import { createComponentInstance } from '@hubspot/cms-component-library';
 import { __NC__ContentFieldsProps, __NC__StyleFieldsProps, contentFields, styleFields } from './fields.js';
 
-export type __NC__Props = ButtonProps & {
+export type __NC__Props = DefaultButtonProps & {
   variant: 'solid' | 'outline' | 'unstyled';
   size: 'small' | 'medium' | 'large' | 'xlarge';
   borderRadius: 'none' | 'small' | 'medium' | 'large' | 'full';
 };
 
-const  __NC__ = createComponentInstance<__NC__Props>(Button)
+const  __NC__ = createComponentInstance<__NC__Props>(DefaultButton)
   .withContentFields<__NC__ContentFieldsProps>(contentFields)
   .withStyleFields<__NC__StyleFieldsProps>(styleFields);
 
@@ -47,24 +47,28 @@ __NC__.setDimension('size')
   .setProps({
     fontSize: '12px',
     padding: '12px 16px',
+    iconSize: 12,
     ...sharedSizeProps
   })
 .setOption('medium')
   .setProps({
     fontSize: '16px',
     padding: '16px 20px',
+    iconSize: 16,
     ...sharedSizeProps
   })
 .setOption('large')
   .setProps({
     fontSize: '24px',
     padding: '20px 24px',
+    iconSize: 24,
     ...sharedSizeProps
   })
 .setOption('extraLarge')
   .setProps({
     fontSize: '30px',
     padding: '24px 30px',
+    iconSize: 30,
     ...sharedSizeProps
   })
 .createDimensionChoiceField();
@@ -92,4 +96,5 @@ __NC__.setDimension('borderRadius')
   })
 .createDimensionChoiceField();
 
+
 export default __NC__;

package/components/componentLibrary/Heading/scaffolds/index.ts.template

@@ -1,13 +1,12 @@
-import { createComponentInstance } from '@hubspot/cms-component-library/';
-import Heading from '@hubspot/cms-component-library/Heading'
-import { HeadingProps } from '@hubspot/cms-component-library/Heading'
+import { createComponentInstance } from '@hubspot/cms-component-library';
+import DefaultHeading, { HeadingProps as DefaultHeadingProps } from '@hubspot/cms-component-library/Heading'
 import { __NC__ContentFieldsProps, __NC__StyleFieldsProps, contentFields, styleFields } from './fields.js';
 
-export type __NC__Props = HeadingProps & {
+export type __NC__Props = DefaultHeadingProps & {
   displayAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
 
-export const __NC__ = createComponentInstance<__NC__Props>(Heading)
+const __NC__ = createComponentInstance<__NC__Props>(DefaultHeading)
   .withContentFields<__NC__ContentFieldsProps>(contentFields)
   .withStyleFields<__NC__StyleFieldsProps>(styleFields);
 
@@ -44,3 +43,5 @@ __NC__.setDimension('displayAs')
   })
 .createDimensionChoiceField();
 
+export default Heading
+

package/components/componentLibrary/Image/index.module.scss

@@ -0,0 +1,13 @@
+@use '../styles/_component-base';
+
+@layer hscl-library {
+  .image {
+    @include component-base.hscl-component-conditional('image');
+    @include component-base.hscl-component-hover-conditional('image');
+  }
+  .responsive {
+    display: var(--hscl-image-display, block);
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+}

package/components/componentLibrary/Image/index.tsx

@@ -0,0 +1,54 @@
+/* eslint-disable */
+
+import createHsclComponent from '../utils/createHsclComponent.js';
+import styles from './index.module.scss';
+import { BaseAndInternalComponentProps } from '../types/index.js';
+import cx from '../utils/classname.js';
+
+export type ImageProps = BaseAndInternalComponentProps & {
+  src: string;
+  alt: string;
+  title?: string;
+  imgWidth: number; // <img width={imgWidth} /> (html attribute)
+  imgHeight: number; // <img height={imgHeight} /> (html attribute)
+  loading?: 'lazy' | 'eager' | 'disabled';
+  responsive?: boolean;
+};
+
+const componentName = 'image';
+
+const Component = (props: ImageProps) => {
+  const {
+    title = '',
+    loading = 'lazy',
+    imgWidth,
+    imgHeight,
+    responsive = true,
+    hsclInternal: { hsclProcessedClasses, hsclProcessedStyles },
+    ...rest
+  } = props;
+
+  const classes = cx(
+    hsclProcessedClasses,
+    responsive ? styles.responsive : null
+  );
+
+  return (
+    <img
+      style={hsclProcessedStyles}
+      className={classes}
+      title={title}
+      loading={loading !== 'disabled' ? loading : 'eager'}
+      width={imgWidth}
+      height={imgHeight}
+      {...rest}
+    />
+  );
+};
+
+Component.hsclComponentName = componentName;
+Component.cssModule = styles;
+
+const Image = createHsclComponent(Component);
+
+export default Image;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "main": "./index.ts",