From 7149012d7d66f21c86570147f8ef470bff127604 Mon Sep 17 00:00:00 2001 From: leaannbradford Date: Thu, 9 May 2024 14:33:55 -0700 Subject: [PATCH 1/4] add truncatedLength as an option to card body --- src/compounds/Item/CardBody.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/compounds/Item/CardBody.jsx b/src/compounds/Item/CardBody.jsx index 6815261..59f3ef3 100644 --- a/src/compounds/Item/CardBody.jsx +++ b/src/compounds/Item/CardBody.jsx @@ -4,7 +4,7 @@ import { Button, Card, Collapse } from 'react-bootstrap' import NextLink from '../../components/NextLink/NextLink' import LinkedButton from '../LinkedButton/LinkedButton' -const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, markdownDescriptionExtended, orientation, titleLink, withButtonLink, withTitleLink }) => { +const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, markdownDescriptionExtended, truncatedLength, orientation, titleLink, withButtonLink, withTitleLink }) => { const { id, description, name, snippet } = item const [open, setOpen] = useState(false) @@ -26,13 +26,13 @@ const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, {orientation === 'horizontal' ? ( <> -
+
{markdownDescriptionTruncated}
{markdownDescriptionExtended}
- {description?.length > 300 && ( + {description?.length > truncatedLength && ( @@ -86,6 +86,7 @@ CardBody.propTypes = { PropTypes.string, PropTypes.elementType, ]), + truncatedLength: PropTypes.number, orientation: PropTypes.oneOf(['horizontal', 'vertical']), titleLink: PropTypes.string, withButtonLink: PropTypes.bool, @@ -100,6 +101,7 @@ CardBody.defaultProps = { }, markdownDescriptionTruncated: '', markdownDescriptionExtended: '', + truncatedLength: 300, orientation: 'vertical', titleLink: '', withButtonLink: false, From 4e29e2af7f168abb0c8b380c702d6d8f4d605a41 Mon Sep 17 00:00:00 2001 From: leaannbradford Date: Fri, 10 May 2024 11:35:30 -0700 Subject: [PATCH 2/4] add props --- src/compounds/Item/Item.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/compounds/Item/Item.jsx b/src/compounds/Item/Item.jsx index 65ee165..e37d267 100644 --- a/src/compounds/Item/Item.jsx +++ b/src/compounds/Item/Item.jsx @@ -8,8 +8,8 @@ import ItemLoading from './ItemLoading' import NextLink from '../../components/NextLink/NextLink' import './item.scss' -const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownDescriptionExtended, href, isLoading, item, orientation, titleLink, withButtonLink, - withTitleLink, width }) => { +const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownDescriptionExtended, truncatedLength, href, isLoading, item, orientation, titleLink, + withButtonLink, withTitleLink, width }) => { if (isLoading) { return ( <> @@ -69,6 +69,7 @@ const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownD item={item} markdownDescriptionTruncated={markdownDescriptionTruncated} markdownDescriptionExtended={markdownDescriptionExtended} + truncatedLength={truncatedLength} orientation={orientation} titleLink={link} withButtonLink={withButtonLink} From 1e8511d1a17ce36bba82955a924de7515b4b5cfd Mon Sep 17 00:00:00 2001 From: Alisha Evans Date: Fri, 10 May 2024 11:48:35 -0700 Subject: [PATCH 3/4] show the truncated length on the Item story also update the Default Item story to show the proper values. Co-authored-by: leaannbradford - ref: https://github.com/scientist-softserv/phenovista-digital-storefront/issues/71 --- src/compounds/Item/Item.jsx | 1 + src/compounds/Item/Item.stories.jsx | 30 ++++++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/compounds/Item/Item.jsx b/src/compounds/Item/Item.jsx index e37d267..b0d45c7 100644 --- a/src/compounds/Item/Item.jsx +++ b/src/compounds/Item/Item.jsx @@ -49,6 +49,7 @@ const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownD markdownDescriptionExtended={markdownDescriptionExtended} orientation={orientation} titleLink={link} + truncatedLength={truncatedLength} withButtonLink={withButtonLink} withTitleLink={withTitleLink} /> diff --git a/src/compounds/Item/Item.stories.jsx b/src/compounds/Item/Item.stories.jsx index 53cb3a9..922f790 100644 --- a/src/compounds/Item/Item.stories.jsx +++ b/src/compounds/Item/Item.stories.jsx @@ -25,14 +25,42 @@ Default.args = { }, name: 'Microbiological Sterility Testing', slug: 'microbiological-sterility-testing', + snippet: '' }, titleLink: '/', orientation: 'vertical', style: {}, withButtonLink: false, withTitleLink: false, + markdownDescriptionTruncated: null, + markdownDescriptionExtended: null +} + +export const Horizontal = Template.bind({}) +Horizontal.args = { + buttonLink: '/', + buttonProps: { + backgroundColor: '#A9A9A9', + label: 'Request this item', + }, + item: { + description: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.', + id: 1, + img: { + src: item, + alt: 'Several rows of test tubes with a liquid being put into one.', + }, + name: 'Microbiological Sterility Testing', + slug: 'microbiological-sterility-testing', + }, + titleLink: '/', + orientation: 'horizontal', + style: {}, + withButtonLink: false, + withTitleLink: false, markdownDescriptionTruncated: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.', - markdownDescriptionExtended: ' Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.' + markdownDescriptionExtended: 'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.', + truncatedLength: 300 } export const isLoading = Template.bind({}) From 7de06108e20268855770ce997d0f2a5cadc2899e Mon Sep 17 00:00:00 2001 From: leaannbradford Date: Fri, 10 May 2024 12:25:21 -0700 Subject: [PATCH 4/4] feedback --- src/compounds/Item/CardBody.jsx | 10 +++++----- src/compounds/Item/Item.jsx | 6 +++--- src/compounds/Item/Item.stories.jsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/compounds/Item/CardBody.jsx b/src/compounds/Item/CardBody.jsx index 59f3ef3..e47b901 100644 --- a/src/compounds/Item/CardBody.jsx +++ b/src/compounds/Item/CardBody.jsx @@ -4,7 +4,7 @@ import { Button, Card, Collapse } from 'react-bootstrap' import NextLink from '../../components/NextLink/NextLink' import LinkedButton from '../LinkedButton/LinkedButton' -const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, markdownDescriptionExtended, truncatedLength, orientation, titleLink, withButtonLink, withTitleLink }) => { +const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, markdownDescriptionExtended, orientation, titleLink, truncateAt, withButtonLink, withTitleLink }) => { const { id, description, name, snippet } = item const [open, setOpen] = useState(false) @@ -26,13 +26,13 @@ const CardBody = ({ buttonLink, buttonProps, item, markdownDescriptionTruncated, {orientation === 'horizontal' ? ( <> -
+
{markdownDescriptionTruncated}
{markdownDescriptionExtended}
- {description?.length > truncatedLength && ( + {description?.length > truncateAt && ( @@ -86,7 +86,7 @@ CardBody.propTypes = { PropTypes.string, PropTypes.elementType, ]), - truncatedLength: PropTypes.number, + truncateAt: PropTypes.number, orientation: PropTypes.oneOf(['horizontal', 'vertical']), titleLink: PropTypes.string, withButtonLink: PropTypes.bool, @@ -101,7 +101,7 @@ CardBody.defaultProps = { }, markdownDescriptionTruncated: '', markdownDescriptionExtended: '', - truncatedLength: 300, + truncateAt: 300, orientation: 'vertical', titleLink: '', withButtonLink: false, diff --git a/src/compounds/Item/Item.jsx b/src/compounds/Item/Item.jsx index b0d45c7..0546046 100644 --- a/src/compounds/Item/Item.jsx +++ b/src/compounds/Item/Item.jsx @@ -8,7 +8,7 @@ import ItemLoading from './ItemLoading' import NextLink from '../../components/NextLink/NextLink' import './item.scss' -const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownDescriptionExtended, truncatedLength, href, isLoading, item, orientation, titleLink, +const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownDescriptionExtended, href, isLoading, item, orientation, titleLink, truncateAt, withButtonLink, withTitleLink, width }) => { if (isLoading) { return ( @@ -49,7 +49,7 @@ const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownD markdownDescriptionExtended={markdownDescriptionExtended} orientation={orientation} titleLink={link} - truncatedLength={truncatedLength} + truncateAt={truncateAt} withButtonLink={withButtonLink} withTitleLink={withTitleLink} /> @@ -70,7 +70,7 @@ const Item = ({ buttonLink, buttonProps, markdownDescriptionTruncated, markdownD item={item} markdownDescriptionTruncated={markdownDescriptionTruncated} markdownDescriptionExtended={markdownDescriptionExtended} - truncatedLength={truncatedLength} + truncateAt={truncateAt} orientation={orientation} titleLink={link} withButtonLink={withButtonLink} diff --git a/src/compounds/Item/Item.stories.jsx b/src/compounds/Item/Item.stories.jsx index 922f790..436252c 100644 --- a/src/compounds/Item/Item.stories.jsx +++ b/src/compounds/Item/Item.stories.jsx @@ -60,7 +60,7 @@ Horizontal.args = { withTitleLink: false, markdownDescriptionTruncated: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.', markdownDescriptionExtended: 'Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.', - truncatedLength: 300 + truncateAt: 300 } export const isLoading = Template.bind({})