@hubspot/cms-component-library 0.1.0-alpha.3 → 0.1.0-alpha.5

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 __NC__ from './index.js';
 
 export type __NC__ContentFieldsProps = {
   buttonTextDefault?: string;

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);
 

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,20 +1,13 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.5",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
-  "main": "index.ts",
-  "types": "index.ts",
+  "main": "./index.ts",
+  "types": "./index.ts",
   "exports": {
-    ".": {
-      "types": "./index.ts",
-      "import": "./index.ts",
-      "require": "./index.ts"
-    },
-    "./*": {
-      "types": "./components/componentLibrary/*/index.tsx",
-      "import": "./components/componentLibrary/*/index.tsx"
-    }
+    ".": "./index.ts",
+    "./*": "./components/componentLibrary/*/index.tsx"
   },
   "bin": {
     "hscl": "./cli/index.ts"