@channel.io/bezier-react 2.5.0 → 2.5.1
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.
- package/dist/cjs/components/ListItem/ListItem.js +2 -1
- package/dist/cjs/components/ListItem/ListItem.js.map +1 -1
- package/dist/cjs/components/ListItem/ListItem.module.scss.js +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/ListItem/ListItem.mjs +2 -1
- package/dist/esm/components/ListItem/ListItem.mjs.map +1 -1
- package/dist/esm/components/ListItem/ListItem.module.scss.mjs +1 -1
- package/dist/esm/styles.css +1 -1
- package/dist/types/components/ListItem/ListItem.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ListItem/ListItem.module.scss +6 -4
- package/src/components/ListItem/ListItem.tsx +2 -0
- package/src/components/Slider/Slider.stories.tsx +26 -12
|
@@ -32,6 +32,7 @@ const ListItem = /*#__PURE__*/forwardRef(function ListItem({
|
|
|
32
32
|
onClick,
|
|
33
33
|
...rest
|
|
34
34
|
}, forwardedRef) {
|
|
35
|
+
const clickable = !isNil(onClick);
|
|
35
36
|
const isLink = !isEmpty(href);
|
|
36
37
|
const Comp = isLink ? 'a' : as !== null && as !== void 0 ? as : 'div';
|
|
37
38
|
return /*#__PURE__*/React__default.createElement(Comp, Object.assign({}, isLink && {
|
|
@@ -40,7 +41,7 @@ const ListItem = /*#__PURE__*/forwardRef(function ListItem({
|
|
|
40
41
|
target: '_blank',
|
|
41
42
|
rel: 'noopener noreferrer'
|
|
42
43
|
}, {
|
|
43
|
-
className: classNames(styles.ListItem, styles[`size-${size}`], styles[`variant-${variant}`], disabled && styles.disabled, focused && styles.focused, active && styles.active, className),
|
|
44
|
+
className: classNames(styles.ListItem, styles[`size-${size}`], styles[`variant-${variant}`], disabled && styles.disabled, focused && styles.focused, active && styles.active, clickable && styles.clickable, className),
|
|
44
45
|
ref: forwardedRef,
|
|
45
46
|
onClick: !disabled ? onClick : undefined,
|
|
46
47
|
"data-testid": LIST_ITEM_TEST_ID
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\ntype ListItemRef = HTMLDivElement & HTMLAnchorElement\n\nfunction renderNewLineComponent(value: string) {\n return value.split('\\n').map((str, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <React.Fragment key={index}>\n {index !== 0 && <br />}\n {str}\n </React.Fragment>\n ))\n}\n\nexport const LIST_ITEM_TEST_ID = 'bezier-list-item'\n\nexport const ListItem = forwardRef<ListItemRef, ListItemProps>(\n function ListItem(\n {\n className,\n as,\n variant = 'monochrome',\n size = 's',\n content,\n description,\n descriptionMaxLines,\n leftContent,\n rightContent,\n active = false,\n focused = false,\n disabled = false,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const isLink = !isEmpty(href)\n const Comp = isLink ? 'a' : ((as ?? 'div') as 'div')\n\n return (\n <Comp\n {...(isLink && {\n href,\n draggable: false,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n className={classNames(\n styles.ListItem,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n focused && styles.focused,\n active && styles.active,\n className\n )}\n ref={forwardedRef}\n onClick={!disabled ? onClick : undefined}\n data-testid={LIST_ITEM_TEST_ID}\n {...rest}\n >\n <div className={styles.ListItemContent}>\n {!isNil(leftContent) && (\n <div className={styles.ListItemLeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.ListItemLeftIcon}\n source={leftContent}\n size=\"s\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <div className={styles.ListItemTitle}>\n {isString(content) ? (\n <Text\n truncated\n typo={size === 'l' ? '16' : '14'}\n >\n {content}\n </Text>\n ) : (\n content\n )}\n </div>\n\n {description && (\n <div className={styles.ListItemDescription}>\n <Text\n typo=\"12\"\n color=\"txt-black-darker\"\n truncated={descriptionMaxLines}\n >\n {isString(description)\n ? renderNewLineComponent(description)\n : description}\n </Text>\n </div>\n )}\n </div>\n\n {rightContent && (\n <div className={styles.ListItemRightContent}>{rightContent}</div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["renderNewLineComponent","value","split","map","str","index","React","createElement","Fragment","key","LIST_ITEM_TEST_ID","ListItem","forwardRef","className","as","variant","size","content","description","descriptionMaxLines","leftContent","rightContent","active","focused","disabled","href","onClick","rest","forwardedRef","isLink","isEmpty","Comp","Object","assign","draggable","target","rel","classNames","styles","ref","undefined","ListItemContent","
|
|
1
|
+
{"version":3,"file":"ListItem.mjs","sources":["../../../../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client'\n\nimport React, { forwardRef } from 'react'\n\nimport { isBezierIcon } from '@channel.io/bezier-icons'\nimport classNames from 'classnames'\n\nimport { isEmpty, isNil, isString } from '~/src/utils/type'\n\nimport { Icon } from '~/src/components/Icon'\nimport { Text } from '~/src/components/Text'\n\nimport { type ListItemProps } from './ListItem.types'\n\nimport styles from './ListItem.module.scss'\n\ntype ListItemRef = HTMLDivElement & HTMLAnchorElement\n\nfunction renderNewLineComponent(value: string) {\n return value.split('\\n').map((str, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <React.Fragment key={index}>\n {index !== 0 && <br />}\n {str}\n </React.Fragment>\n ))\n}\n\nexport const LIST_ITEM_TEST_ID = 'bezier-list-item'\n\nexport const ListItem = forwardRef<ListItemRef, ListItemProps>(\n function ListItem(\n {\n className,\n as,\n variant = 'monochrome',\n size = 's',\n content,\n description,\n descriptionMaxLines,\n leftContent,\n rightContent,\n active = false,\n focused = false,\n disabled = false,\n href,\n onClick,\n ...rest\n },\n forwardedRef\n ) {\n const clickable = !isNil(onClick)\n const isLink = !isEmpty(href)\n const Comp = isLink ? 'a' : ((as ?? 'div') as 'div')\n\n return (\n <Comp\n {...(isLink && {\n href,\n draggable: false,\n target: '_blank',\n rel: 'noopener noreferrer',\n })}\n className={classNames(\n styles.ListItem,\n styles[`size-${size}`],\n styles[`variant-${variant}`],\n disabled && styles.disabled,\n focused && styles.focused,\n active && styles.active,\n clickable && styles.clickable,\n className\n )}\n ref={forwardedRef}\n onClick={!disabled ? onClick : undefined}\n data-testid={LIST_ITEM_TEST_ID}\n {...rest}\n >\n <div className={styles.ListItemContent}>\n {!isNil(leftContent) && (\n <div className={styles.ListItemLeftContent}>\n {isBezierIcon(leftContent) ? (\n <Icon\n className={styles.ListItemLeftIcon}\n source={leftContent}\n size=\"s\"\n />\n ) : (\n leftContent\n )}\n </div>\n )}\n\n <div className={styles.ListItemTitle}>\n {isString(content) ? (\n <Text\n truncated\n typo={size === 'l' ? '16' : '14'}\n >\n {content}\n </Text>\n ) : (\n content\n )}\n </div>\n\n {description && (\n <div className={styles.ListItemDescription}>\n <Text\n typo=\"12\"\n color=\"txt-black-darker\"\n truncated={descriptionMaxLines}\n >\n {isString(description)\n ? renderNewLineComponent(description)\n : description}\n </Text>\n </div>\n )}\n </div>\n\n {rightContent && (\n <div className={styles.ListItemRightContent}>{rightContent}</div>\n )}\n </Comp>\n )\n }\n)\n"],"names":["renderNewLineComponent","value","split","map","str","index","React","createElement","Fragment","key","LIST_ITEM_TEST_ID","ListItem","forwardRef","className","as","variant","size","content","description","descriptionMaxLines","leftContent","rightContent","active","focused","disabled","href","onClick","rest","forwardedRef","clickable","isNil","isLink","isEmpty","Comp","Object","assign","draggable","target","rel","classNames","styles","ref","undefined","ListItemContent","ListItemLeftContent","isBezierIcon","Icon","ListItemLeftIcon","source","ListItemTitle","isString","Text","truncated","typo","ListItemDescription","color","ListItemRightContent"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var styles = {"ListItemLeftIcon":"b-VVQ4r","ListItem":"b--YGnT","variant-monochrome":"b-rFKfG","size-xs":"b-Aklfx","size-s":"b-bUl-D","size-m":"b-nVB-T","size-l":"b-8OVWw","disabled":"b-eQ9bA","active":"b-RcPOk","focused":"b-N5dtL","variant-blue":"b-eF9qy","variant-red":"b-45lcS","variant-green":"b-pjx7F","variant-cobalt":"b-eMoOR","ListItemContent":"b-GJz9e","ListItemRightContent":"b-qnwpN","ListItemTitle":"b-3Wym5","ListItemDescription":"b-BuVX1","ListItemLeftContent":"b-cqOmY"};
|
|
1
|
+
var styles = {"ListItemLeftIcon":"b-VVQ4r","ListItem":"b--YGnT","variant-monochrome":"b-rFKfG","size-xs":"b-Aklfx","size-s":"b-bUl-D","size-m":"b-nVB-T","size-l":"b-8OVWw","clickable":"b-u3ZAD","disabled":"b-eQ9bA","active":"b-RcPOk","focused":"b-N5dtL","variant-blue":"b-eF9qy","variant-red":"b-45lcS","variant-green":"b-pjx7F","variant-cobalt":"b-eMoOR","ListItemContent":"b-GJz9e","ListItemRightContent":"b-qnwpN","ListItemTitle":"b-3Wym5","ListItemDescription":"b-BuVX1","ListItemLeftContent":"b-cqOmY"};
|
|
2
2
|
|
|
3
3
|
export { styles as default };
|
|
4
4
|
//# sourceMappingURL=ListItem.module.scss.mjs.map
|