@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
|
@@ -34,6 +34,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem({
|
|
|
34
34
|
onClick,
|
|
35
35
|
...rest
|
|
36
36
|
}, forwardedRef) {
|
|
37
|
+
const clickable = !type.isNil(onClick);
|
|
37
38
|
const isLink = !type.isEmpty(href);
|
|
38
39
|
const Comp = isLink ? 'a' : as !== null && as !== void 0 ? as : 'div';
|
|
39
40
|
return /*#__PURE__*/React.createElement(Comp, Object.assign({}, isLink && {
|
|
@@ -42,7 +43,7 @@ const ListItem = /*#__PURE__*/React.forwardRef(function ListItem({
|
|
|
42
43
|
target: '_blank',
|
|
43
44
|
rel: 'noopener noreferrer'
|
|
44
45
|
}, {
|
|
45
|
-
className: index.default(ListItem_module.default.ListItem, ListItem_module.default[`size-${size}`], ListItem_module.default[`variant-${variant}`], disabled && ListItem_module.default.disabled, focused && ListItem_module.default.focused, active && ListItem_module.default.active, className),
|
|
46
|
+
className: index.default(ListItem_module.default.ListItem, ListItem_module.default[`size-${size}`], ListItem_module.default[`variant-${variant}`], disabled && ListItem_module.default.disabled, focused && ListItem_module.default.focused, active && ListItem_module.default.active, clickable && ListItem_module.default.clickable, className),
|
|
46
47
|
ref: forwardedRef,
|
|
47
48
|
onClick: !disabled ? onClick : undefined,
|
|
48
49
|
"data-testid": LIST_ITEM_TEST_ID
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.js","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.js","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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"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
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"};
|
|
5
|
+
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"};
|
|
6
6
|
|
|
7
7
|
exports.default = styles;
|
|
8
8
|
//# sourceMappingURL=ListItem.module.scss.js.map
|