@hubspot/cms-component-library 0.1.0-alpha.1 → 0.1.0-alpha.11

package/components/componentLibrary/Button/ContentFields.tsx

@@ -0,0 +1,54 @@
+import { TextField, LinkField } from '@hubspot/cms-components/fields';
+import Icon from '../Icon/index.js';
+import { ContentFieldsProps } from './types.js';
+
+export default function ContentFields(props: ContentFieldsProps) {
+  const {
+    buttonTextLabel = 'Button Text',
+    buttonTextName = 'buttonText',
+    buttonTextDefault = 'Click me',
+    buttonLinkLabel = 'Button Link',
+    buttonLinkName = 'buttonLink',
+    buttonLinkDefault = {
+      url: {
+        type: 'EXTERNAL',
+        content_id: null,
+        href: 'https://www.hubspot.com',
+      },
+    },
+    showButtonLink = true,
+    iconLabel,
+    iconName,
+    iconDefault,
+    showIconLabel = 'Show Button Icon',
+    showIconName,
+    showIconDefault,
+  } = props;
+
+  const iconContentFieldsProps = {
+    iconLabel,
+    iconName,
+    iconDefault,
+    showIconLabel,
+    showIconName,
+    showIconDefault,
+  };
+
+  return (
+    <>
+      <TextField
+        label={buttonTextLabel}
+        name={buttonTextName}
+        default={buttonTextDefault}
+      />
+      {showButtonLink && (
+        <LinkField
+          label={buttonLinkLabel}
+          name={buttonLinkName}
+          default={buttonLinkDefault}
+        />
+      )}
+      <Icon.ContentFields addIconToggle={true} {...iconContentFieldsProps} />
+    </>
+  );
+}

package/components/componentLibrary/Button/StyleFields.tsx

@@ -0,0 +1,28 @@
+import { ChoiceField } from '@hubspot/cms-components/fields';
+
+export default function StyleFields(props: {
+  buttonVariantLabel?: string;
+  buttonVariantName?: string;
+  buttonVariantDefault?: string;
+}) {
+  const {
+    buttonVariantLabel = 'Button Variant',
+    buttonVariantName = 'buttonVariant',
+    buttonVariantDefault = 'primary',
+  } = props;
+
+  return (
+    <>
+      <ChoiceField
+        label={buttonVariantLabel}
+        name={buttonVariantName}
+        choices={[
+          ['primary', 'Primary'],
+          ['secondary', 'Secondary'],
+          ['tertiary', 'Tertiary'],
+        ]}
+        default={buttonVariantDefault}
+      />
+    </>
+  );
+}

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

@@ -1,9 +1,51 @@
-@use '../styles/_component-base';
+// CSS variables that can be mapped to theme settings
+.button {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  gap: var(--hscl-button-gap, 8px);
+  background-color: var(--hscl-button-backgroundColor);
+  color: var(--hscl-button-color);
+  padding: var(--hscl-button-paddingBlock) var(--hscl-button-paddingInline);
+  border-radius: var(--hscl-button-borderRadius);
+  border: var(--hscl-button-borderWidth) solid var(--hscl-button-borderColor);
+  font-size: var(--hscl-button-fontSize);
+  font-weight: var(--hscl-button-fontWeight);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--hscl-button-backgroundColor-hover);
+    color: var(--hscl-button-color-hover);
+    border-width: var(--hscl-button-borderWidth-hover);
+    border-color: var(--hscl-button-borderColor-hover);
+    text-decoration: none;
+  }
+
+  &:focus {
+    background-color: var(--hscl-button-backgroundColor-focus);
+    color: var(--hscl-button-color-focus);
+    border-width: var(--hscl-button-borderWidth-focus);
+    border-color: var(--hscl-button-borderColor-focus);
+    outline: var(--hscl-button-outlineWidth-focus) solid var(--hscl-button-outlineColor-focus);
+    outline-offset: var(--hscl-button-outlineOffset-focus);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
-@layer hscl-library {
-  .button {
 
-    @include component-base.hscl-component-conditional('button');
-    @include component-base.hscl-component-hover-conditional('button');
+  svg {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    fill: var(--hscl-button-icon-fill);
   }
-}
+}
+
+

package/components/componentLibrary/Button/index.tsx

@@ -1,69 +1,120 @@
-/* eslint-disable */
-
-import createHsclComponent from '../utils/createHsclComponent.js';
 import styles from './index.module.scss';
-import { BaseAndInternalComponentProps } from '../types/index.js';
-
-// Base props shared by all variants
-type BaseButtonProps = BaseAndInternalComponentProps & {
-  disabled?: boolean;
-  children?: React.ReactNode;
-};
-
-// Button variant props
-type ButtonVariantProps = {
-  buttonType: 'button';
-  onClick?: () => void;
-};
+import Icon from '../Icon/index.js';
+import ContentFields from './ContentFields.js';
+import StyleFields from './StyleFields.js';
+import cx from '../utils/classname.js';
+import {
+  ButtonProps,
+  ButtonAsButtonProps,
+  ButtonAsLinkProps,
+  BaseButtonProps,
+  RenderWithIconProps,
+} from './types.js';
 
-// Link variant props
-type LinkVariantProps = {
-  buttonType: 'link';
-  href?: string;
-  target?: string;
-  rel?: string;
-};
-
-// Main component props using discriminated union
-export type ButtonProps = BaseButtonProps &
-  (ButtonVariantProps | LinkVariantProps);
-
-const componentName = 'button';
-
-const Component = (props: ButtonProps) => {
-  // Extract shared/base props that are always consumed
+const ButtonComponent = (props: ButtonProps) => {
   const {
     buttonType = 'link',
-    hsclInternal: { hsclProcessedClasses, hsclProcessedStyles },
+    variant = 'primary',
+    className = '',
+    style = {},
     ...rest
   } = props;
 
-  // Shared props for both elements
+  const variantClass = styles[`hscl-button-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.
+  const defaultClasses = cx(styles.button, variantClass);
   const sharedProps = {
-    className: hsclProcessedClasses,
-    style: hsclProcessedStyles,
+    className: cx(defaultClasses, className),
+    style: style,
+  };
+
+  const RenderWithIcon = ({
+    iconFieldPath,
+    iconSize,
+    showIcon,
+    iconPurpose,
+    iconTitle,
+    iconPosition = 'right',
+    children,
+  }: RenderWithIconProps) => {
+    if (!iconFieldPath) return <>{children}</>;
+
+    const icon = (
+      <Icon
+        fieldPath={iconFieldPath}
+        height={iconSize}
+        className={styles.icon}
+        showIcon={showIcon}
+        purpose={iconPurpose}
+        title={iconTitle}
+      />
+    );
+
+    return (
+      <>
+        {iconPosition === 'left' && icon}
+        {children}
+        {iconPosition === 'right' && icon}
+      </>
+    );
   };
 
   function renderButton(
-    props: Omit<ButtonVariantProps, 'buttonType' | 'hsclInternal'> &
-      Partial<BaseButtonProps>
+    props: Omit<ButtonAsButtonProps, 'buttonType'> & Partial<BaseButtonProps>
   ) {
-    const { onClick, disabled = false, children, ...rest } = props;
+    const {
+      onClick,
+      disabled = false,
+      children,
+      iconPosition = 'right',
+      iconFieldPath,
+      iconSize = 18,
+      showIcon,
+      iconPurpose,
+      iconTitle,
+      ...rest
+    } = props;
+    const iconProps = {
+      iconFieldPath,
+      iconSize,
+      showIcon,
+      iconPurpose,
+      iconTitle,
+      iconPosition,
+    };
     return (
       <button {...sharedProps} onClick={onClick} disabled={disabled} {...rest}>
-        {children}
+        <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
       </button>
     );
   }
 
   function renderLink(
-    props: Omit<LinkVariantProps, 'buttonType' | 'hsclInternal'> &
-      Partial<BaseButtonProps>
+    props: Omit<ButtonAsLinkProps, 'buttonType'> & Partial<BaseButtonProps>
   ) {
-    const { href = '', target = '_self', rel = '', children, ...rest } = props;
+    const {
+      href = '',
+      target = '_self',
+      rel = '',
+      children,
+      iconPosition = 'right',
+      iconFieldPath,
+      iconSize = 18,
+      showIcon,
+      iconPurpose,
+      iconTitle,
+      ...rest
+    } = props;
+    const iconProps = {
+      iconFieldPath,
+      iconSize,
+      showIcon,
+      iconPurpose,
+      iconTitle,
+      iconPosition,
+    };
     return (
       <a {...sharedProps} href={href} target={target} rel={rel} {...rest}>
-        {children}
+        <RenderWithIcon {...iconProps}>{children}</RenderWithIcon>
       </a>
     );
   }
@@ -75,9 +126,14 @@ const Component = (props: ButtonProps) => {
   return renderLink(rest);
 };
 
-Component.hsclComponentName = componentName;
-Component.cssModule = styles;
+// Create compound component with proper typing
+type ButtonComponentType = typeof ButtonComponent & {
+  ContentFields: typeof ContentFields;
+  StyleFields: typeof StyleFields;
+};
 
-const Button = createHsclComponent(Component);
+const Button = ButtonComponent as ButtonComponentType;
+Button.ContentFields = ContentFields;
+Button.StyleFields = StyleFields;
 
 export default Button;