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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/components/componentLibrary/Button/index.module.scss +5 -2
  2. package/components/componentLibrary/Button/index.tsx +51 -2
  3. package/components/componentLibrary/Button/scaffolds/fields.tsx.template +38 -2
  4. package/components/componentLibrary/Button/scaffolds/index.ts.template +9 -1
  5. package/package.json +1 -1
package/components/componentLibrary/Button/index.module.scss CHANGED
@@ -2,8 +2,11 @@
2
2
 
3
3
  @layer hscl-library {
4
4
  .button {
5
-
6
5
  @include component-base.hscl-component-conditional('button');
7
6
  @include component-base.hscl-component-hover-conditional('button');
8
7
  }
9
- }
8
+
9
+ .icon {
10
+ fill: var(--hscl-button-color, revert-layer);
11
+ }
12
+ }
package/components/componentLibrary/Button/index.tsx CHANGED
@@ -3,11 +3,15 @@
3
3
  import createHsclComponent from '../utils/createHsclComponent.js';
4
4
  import styles from './index.module.scss';
5
5
  import { BaseAndInternalComponentProps } from '../types/index.js';
6
+ import { Icon } from '@hubspot/cms-components';
6
7
 
7
8
  // Base props shared by all variants
8
9
  type BaseButtonProps = BaseAndInternalComponentProps & {
9
10
  disabled?: boolean;
10
11
  children?: React.ReactNode;
12
+ iconFieldPath?: string;
13
+ iconPosition?: 'left' | 'right';
14
+ iconSize?: number;
11
15
  };
12
16
 
13
17
  // Button variant props
@@ -48,10 +52,32 @@ const Component = (props: ButtonProps) => {
48
52
  props: Omit<ButtonVariantProps, 'buttonType' | 'hsclInternal'> &
49
53
  Partial<BaseButtonProps>
50
54
  ) {
51
- const { onClick, disabled = false, children, ...rest } = props;
55
+ const {
56
+ onClick,
57
+ disabled = false,
58
+ children,
59
+ iconPosition = 'right',
60
+ iconFieldPath,
61
+ iconSize = 18,
62
+ ...rest
63
+ } = props;
52
64
  return (
53
65
  <button {...sharedProps} onClick={onClick} disabled={disabled} {...rest}>
66
+ {iconFieldPath && iconPosition === 'left' && (
67
+ <Icon
68
+ fieldPath={iconFieldPath}
69
+ height={iconSize}
70
+ className={styles.icon}
71
+ />
72
+ )}
54
73
  {children}
74
+ {iconFieldPath && iconPosition === 'right' && (
75
+ <Icon
76
+ fieldPath={iconFieldPath}
77
+ height={iconSize}
78
+ className={styles.icon}
79
+ />
80
+ )}
55
81
  </button>
56
82
  );
57
83
  }
@@ -60,10 +86,33 @@ const Component = (props: ButtonProps) => {
60
86
  props: Omit<LinkVariantProps, 'buttonType' | 'hsclInternal'> &
61
87
  Partial<BaseButtonProps>
62
88
  ) {
63
- const { href = '', target = '_self', rel = '', children, ...rest } = props;
89
+ const {
90
+ href = '',
91
+ target = '_self',
92
+ rel = '',
93
+ children,
94
+ iconPosition = 'right',
95
+ iconFieldPath,
96
+ iconSize = 18,
97
+ ...rest
98
+ } = props;
64
99
  return (
65
100
  <a {...sharedProps} href={href} target={target} rel={rel} {...rest}>
101
+ {iconFieldPath && iconPosition === 'left' && (
102
+ <Icon
103
+ fieldPath={iconFieldPath}
104
+ height={iconSize}
105
+ className={styles.icon}
106
+ />
107
+ )}
66
108
  {children}
109
+ {iconFieldPath && iconPosition === 'right' && (
110
+ <Icon
111
+ fieldPath={iconFieldPath}
112
+ height={iconSize}
113
+ className={styles.icon}
114
+ />
115
+ )}
67
116
  </a>
68
117
  );
69
118
  }
package/components/componentLibrary/Button/scaffolds/fields.tsx.template CHANGED
@@ -1,4 +1,4 @@
1
- import { LinkField, TextField } from '@hubspot/cms-components/fields'
1
+ import { BooleanField, IconField, LinkField, TextField, IconFieldType, ChoiceField, Visibility } from '@hubspot/cms-components/fields'
2
2
  import __NC__ from './index.js';
3
3
 
4
4
  export type __NC__ContentFieldsProps = {
@@ -9,10 +9,26 @@ export type __NC__ContentFieldsProps = {
9
9
  buttonLinkName?: string;
10
10
  buttonLinkDefault?: {url: {type: 'EXTERNAL', content_id: number, href: string}};
11
11
  showButtonLink?: boolean;
12
+ showButtonIcon?: boolean;
13
+ buttonIconLabel?: string;
14
+ buttonIconName?: string;
15
+ buttonIconDefault?: IconFieldType['default'];
16
+ buttonShowIconLabel?: string;
17
+ buttonShowIconName?: string;
18
+ buttonShowIconDefault?: boolean;
19
+ buttonIconPositionLabel?: string;
20
+ buttonIconPositionName?: string;
21
+ buttonIconPositionDefault?: string;
12
22
  }
13
23
 
14
24
  export function contentFields(props: __NC__ContentFieldsProps) {
15
- const { buttonTextDefault, buttonTextLabel, buttonTextName, buttonLinkLabel, buttonLinkName, buttonLinkDefault, showButtonLink = true } = props;
25
+ const { buttonTextDefault, buttonTextLabel, buttonTextName, buttonLinkLabel, buttonLinkName, buttonLinkDefault, showButtonLink = true , buttonShowIconLabel, buttonShowIconName, buttonShowIconDefault, buttonIconLabel, buttonIconName, buttonIconDefault, buttonIconPositionLabel, buttonIconPositionName, buttonIconPositionDefault} = props;
26
+
27
+ const SHOW_ICON_VISIBILITY_RULES: Visibility = {
28
+ operator: 'EQUAL',
29
+ controlling_field: 'showIcon',
30
+ controlling_value_regex: 'true',
31
+ }
16
32
 
17
33
  return (
18
34
  <>
@@ -28,6 +44,26 @@ export function contentFields(props: __NC__ContentFieldsProps) {
28
44
  default={buttonLinkDefault || {url: {type: 'EXTERNAL', content_id: 0, href: 'https://www.google.com'}}}
29
45
  />
30
46
  )}
47
+ <BooleanField
48
+ id="showIcon"
49
+ label={buttonShowIconLabel || 'Show Icon'}
50
+ name={buttonShowIconName || 'showIcon'}
51
+ display='toggle'
52
+ default={buttonShowIconDefault || false}
53
+ />
54
+ <IconField
55
+ label={buttonIconLabel || 'Button Icon'}
56
+ name={buttonIconName || 'buttonIcon'}
57
+ default={buttonIconDefault || {name: 'fa-arrow-right'}}
58
+ visibility={SHOW_ICON_VISIBILITY_RULES}
59
+ />
60
+ <ChoiceField
61
+ label={buttonIconPositionLabel || 'Button Icon Position'}
62
+ name={buttonIconPositionName || 'buttonIconPosition'}
63
+ choices={[['left','Left'], ['right','Right']]}
64
+ default={buttonIconPositionDefault || 'right'}
65
+ visibility={SHOW_ICON_VISIBILITY_RULES}
66
+ />
31
67
  </>
32
68
  )
33
69
  }
package/components/componentLibrary/Button/scaffolds/index.ts.template CHANGED
@@ -13,7 +13,10 @@ const __NC__ = createComponentInstance<__NC__Props>(DefaultButton)
13
13
  .withStyleFields<__NC__StyleFieldsProps>(styleFields);
14
14
 
15
15
  const sharedVariantProps = {
16
- display: 'inline-block',
16
+ display: 'inline-flex',
17
+ gap: '10px'
18
+ flex-direction: 'row'
19
+ align-items: 'center'
17
20
  textDecoration: 'none',
18
21
  }
19
22
 
@@ -47,24 +50,28 @@ __NC__.setDimension('size')
47
50
  .setProps({
48
51
  fontSize: '12px',
49
52
  padding: '12px 16px',
53
+ iconSize: 12,
50
54
  ...sharedSizeProps
51
55
  })
52
56
  .setOption('medium')
53
57
  .setProps({
54
58
  fontSize: '16px',
55
59
  padding: '16px 20px',
60
+ iconSize: 16,
56
61
  ...sharedSizeProps
57
62
  })
58
63
  .setOption('large')
59
64
  .setProps({
60
65
  fontSize: '24px',
61
66
  padding: '20px 24px',
67
+ iconSize: 24,
62
68
  ...sharedSizeProps
63
69
  })
64
70
  .setOption('extraLarge')
65
71
  .setProps({
66
72
  fontSize: '30px',
67
73
  padding: '24px 30px',
74
+ iconSize: 30,
68
75
  ...sharedSizeProps
69
76
  })
70
77
  .createDimensionChoiceField();
@@ -92,4 +99,5 @@ __NC__.setDimension('borderRadius')
92
99
  })
93
100
  .createDimensionChoiceField();
94
101
 
102
+
95
103
  export default __NC__;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hubspot/cms-component-library",
3
- "version": "0.1.0-alpha.5",
3
+ "version": "0.1.0-alpha.7",
4
4
  "description": "HubSpot CMS React component library for building CMS modules",
5
5
  "license": "Apache-2.0",
6
6
  "main": "./index.ts",