From 6635292760912df938625afb37272c9f4991cce2 Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Thu, 2 Jun 2022 11:06:54 +0300 Subject: [PATCH 1/9] fix(PPDSC-2203): handle multilpe children in paragraph --- .../__snapshots__/sidebar.test.tsx.snap | 8 +- .../__snapshots__/paragraph.test.tsx.snap | 159 +++++++++++++++--- src/typography/__tests__/paragraph.test.tsx | 25 +++ src/typography/paragraph/paragraph.tsx | 87 +++++++--- 4 files changed, 227 insertions(+), 52 deletions(-) diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index 6660d16b4c..ca6c2475ad 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -746,10 +746,10 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-504 { margin: 0; color: #2E2E2E; - font-family: "Poppins",sans-serif; + font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 1.5; - font-weight: 500; + font-weight: 400; letter-spacing: 0; } @@ -7278,10 +7278,10 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-504 { margin: 0; color: #2E2E2E; - font-family: "Poppins",sans-serif; + font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 1.5; - font-weight: 500; + font-weight: 400; letter-spacing: 0; } diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap index 23754139e9..d1d529783b 100644 --- a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap @@ -1,5 +1,32 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Paragraph does not render dropCap when first children is not plain text 1`] = ` + + .emotion-0 { + margin: 0; + color: #2E2E2E; + font-family: "DM Sans",sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + letter-spacing: 0; +} + +.emotion-0 svg { + fill: #2E2E2E; +} + +

+ + paragraph + + component +

+ +`; + exports[`Paragraph renders Paragraph 1`] = ` .emotion-0 { @@ -28,7 +55,7 @@ exports[`Paragraph renders Paragraph with overrides 1`] = ` .emotion-0 { margin: 0; - color: #FFFFFF; + color: #2E2E2E; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 1.5; @@ -37,7 +64,7 @@ exports[`Paragraph renders Paragraph with overrides 1`] = ` } .emotion-0 svg { - fill: #FFFFFF; + fill: #2E2E2E; }

.emotion-0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - max-width: 100%; + margin: 0; + color: #2E2E2E; + font-family: "DM Sans",sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; + letter-spacing: 0; +} + +.emotion-0 svg { + fill: #2E2E2E; } .emotion-1 { + margin: 0 0 0 0.15em; + float: left; + margin-top: 4px; + color: #0A0A0A; +} + +@media screen and (max-width: 767px) { + .emotion-1 { + font-size: 5.625em; + line-height: 0.85; + } +} + +@media screen and (min-width: 768px) and (max-width: 1023px) { + .emotion-1 { + font-size: 5.875em; + line-height: 0.85; + } +} + +@media screen and (min-width: 1024px) { + .emotion-1 { + font-size: 6em; + line-height: 0.85; + } +} + +.emotion-1 svg { + fill: #0A0A0A; +} + +.emotion-2 { + display: block; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +

+ + + paragraph + + component +

+ +`; + +exports[`Paragraph renders with drop cap and complex children 1`] = ` + + .emotion-0 { margin: 0; color: #2E2E2E; font-family: "DM Sans",sans-serif; @@ -90,44 +192,43 @@ exports[`Paragraph renders with drop cap 1`] = ` letter-spacing: 0; } -.emotion-1 svg { +.emotion-0 svg { fill: #2E2E2E; } -.emotion-2 { - margin: 0; +.emotion-1 { + margin: 0 0 0 0.15em; float: left; - margin-right: 0.15em; margin-top: 4px; color: #0A0A0A; } @media screen and (max-width: 767px) { - .emotion-2 { + .emotion-1 { font-size: 5.625em; line-height: 0.85; } } @media screen and (min-width: 768px) and (max-width: 1023px) { - .emotion-2 { + .emotion-1 { font-size: 5.875em; line-height: 0.85; } } @media screen and (min-width: 1024px) { - .emotion-2 { + .emotion-1 { font-size: 6em; line-height: 0.85; } } -.emotion-2 svg { +.emotion-1 svg { fill: #0A0A0A; } -.emotion-3 { +.emotion-2 { display: block; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); @@ -139,26 +240,34 @@ exports[`Paragraph renders with drop cap 1`] = ` width: 1px; } -
- + aragraph + - paragraph component + paragraph -
+ + component + + with + + link + +

`; diff --git a/src/typography/__tests__/paragraph.test.tsx b/src/typography/__tests__/paragraph.test.tsx index ac21692bec..97230bbded 100644 --- a/src/typography/__tests__/paragraph.test.tsx +++ b/src/typography/__tests__/paragraph.test.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { Paragraph, P, @@ -43,6 +44,30 @@ describe('Paragraph', () => { expect(wrapper).toMatchSnapshot(); }); + test('renders with drop cap and complex children', () => { + const wrapper = renderToFragmentWithTheme(Paragraph, { + children: ( + <> + paragraph component with link + + ), + dropCap: true, + } as ParagraphProps); + expect(wrapper).toMatchSnapshot(); + }); + + test('does not render dropCap when first children is not plain text', () => { + const wrapper = renderToFragmentWithTheme(Paragraph, { + children: ( + <> + paragraph component + + ), + dropCap: true, + } as ParagraphProps); + expect(wrapper).toMatchSnapshot(); + }); + test('P alias for Paragraph', () => { expect(P).toEqual(Paragraph); }); diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 3012cf29c4..6df19909e8 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -1,18 +1,18 @@ import React from 'react'; +import {isFragment} from 'react-is'; import { styled, getTypographyPreset, MQ, - getSpace, getStylePreset, + getResponsiveSpace, } from '../../utils/style'; import defaults from './defaults'; import {withOwnTheme} from '../../utils/with-own-theme'; import {ScreenReaderOnly} from '../../screen-reader-only'; export interface ParagraphProps { - // eslint-disable-next-line - children: any; + children: React.ReactNode; dropCap?: boolean; overrides?: { stylePreset?: MQ; @@ -35,11 +35,9 @@ export const ParagraphText = withOwnTheme(ThemelessParagraphText)({ }); const ThemelessParagraphDropCap = styled.span` - margin: 0; + margin: 0 0 0 0.15em; float: left; - margin-right: 0.15em; - - margin-top: ${getSpace('paragraph.dropCap', 'dropCap')}; + ${getResponsiveSpace('marginTop', 'paragraph.dropCap', 'dropCap', 'space')}; ${getTypographyPreset('paragraph.dropCap', 'dropCap')}; ${getStylePreset('paragraph.dropCap', 'dropCap')}; `; @@ -47,28 +45,71 @@ export const ParagraphDropCap = withOwnTheme(ThemelessParagraphDropCap)({ defaults, }); -const ParagraphContainer = styled.div` - display: inline-flex; - max-width: 100%; -`; +const getFirstWord = ( + children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], +): string => { + if (children.length > 0 && typeof children[0] === 'string') { + return children[0].split(' ')[0]; + } + if (children.length && isFragment(children[0])) { + return getFirstWord(React.Children.toArray(children[0].props.children)); + } + return ''; +}; + +const removeFirstWord = ( + children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], +) => { + if (children.length > 0 && typeof children[0] === 'string') { + // eslint-disable-next-line no-param-reassign + children[0] = children[0].split(' ').slice(1).join(' '); + } else if (children.length && isFragment(children[0])) { + // eslint-disable-next-line no-param-reassign + children[0] = removeFirstWord( + React.Children.toArray(children[0].props.children), + ); + } + + return children; +}; + +/** + +For a11y reason we need to add aria-hidden to the first word of the paragraph. +Creating the fallowing structure: +

+ + This is paragraph text +

+ + */ export const Paragraph: React.FC = ({ - children, + children: ch, overrides = {}, dropCap = false, -}) => - dropCap && children ? ( - - +}) => { + const children = React.Children.toArray(ch); + const firstWord = getFirstWord(children); + const useDropCap = dropCap && firstWord; - {children} - - ) : ( - {children} + return ( + + {useDropCap && ( + <> + + {firstWord} + + )} + {useDropCap ? removeFirstWord(children) : children} + ); +}; Paragraph.displayName = 'Paragraph'; export const P = Paragraph; From c8af16526ad3c19ec7c58e5b9909b5d098153b6f Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Thu, 2 Jun 2022 11:33:16 +0300 Subject: [PATCH 2/9] fix(PPDSC-2203): fix css issue --- .../__tests__/__snapshots__/paragraph.test.tsx.snap | 4 ++-- src/typography/paragraph/paragraph.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap index d1d529783b..52935eb66f 100644 --- a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap @@ -114,7 +114,7 @@ exports[`Paragraph renders with drop cap 1`] = ` } .emotion-1 { - margin: 0 0 0 0.15em; + margin: 0 0.15em 0 0; float: left; margin-top: 4px; color: #0A0A0A; @@ -197,7 +197,7 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` } .emotion-1 { - margin: 0 0 0 0.15em; + margin: 0 0.15em 0 0; float: left; margin-top: 4px; color: #0A0A0A; diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 6df19909e8..f2b91631c8 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -35,7 +35,7 @@ export const ParagraphText = withOwnTheme(ThemelessParagraphText)({ }); const ThemelessParagraphDropCap = styled.span` - margin: 0 0 0 0.15em; + margin: 0 0.15em 0 0; float: left; ${getResponsiveSpace('marginTop', 'paragraph.dropCap', 'dropCap', 'space')}; ${getTypographyPreset('paragraph.dropCap', 'dropCap')}; From d3ac058db2f887c745e83aca19cba3c0a72d8258 Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Mon, 6 Jun 2022 14:39:35 +0300 Subject: [PATCH 3/9] fix(PPDSC-2203): add comment --- src/typography/paragraph/paragraph.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index f2b91631c8..193c188a1c 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -34,6 +34,10 @@ export const ParagraphText = withOwnTheme(ThemelessParagraphText)({ defaults, }); +/* +We use this solution instead of css :first-letter since there is Firefox inconsistences, +which causes the first letter to has less margin than desired. +*/ const ThemelessParagraphDropCap = styled.span` margin: 0 0.15em 0 0; float: left; From cc42de9389802f1b62b0428f6ed9be03cd458a2a Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Tue, 7 Jun 2022 14:15:42 +0300 Subject: [PATCH 4/9] fix(PPDSC-2203): address some of comments --- src/typography/paragraph/paragraph.tsx | 36 ++++++++++++++------------ 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 193c188a1c..62f9422edd 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -52,26 +52,28 @@ export const ParagraphDropCap = withOwnTheme(ThemelessParagraphDropCap)({ const getFirstWord = ( children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], ): string => { - if (children.length > 0 && typeof children[0] === 'string') { - return children[0].split(' ')[0]; + const [firstChild] = children; + if (children.length > 0 && typeof firstChild === 'string') { + return firstChild.split(' ')[0]; } - if (children.length && isFragment(children[0])) { - return getFirstWord(React.Children.toArray(children[0].props.children)); + if (children.length && isFragment(firstChild)) { + return getFirstWord(React.Children.toArray(firstChild.props.children)); } return ''; }; const removeFirstWord = ( children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], -) => { - if (children.length > 0 && typeof children[0] === 'string') { - // eslint-disable-next-line no-param-reassign - children[0] = children[0].split(' ').slice(1).join(' '); - } else if (children.length && isFragment(children[0])) { - // eslint-disable-next-line no-param-reassign - children[0] = removeFirstWord( - React.Children.toArray(children[0].props.children), - ); +): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] => { + const [firstChild, ...rest] = children; + if (children.length > 0 && typeof firstChild === 'string') { + return [firstChild.split(' ').slice(1).join(' '), ...rest]; + } + if (children.length && isFragment(firstChild)) { + return [ + removeFirstWord(React.Children.toArray(firstChild.props.children)), + ...rest, + ]; } return children; @@ -89,12 +91,12 @@ Creating the fallowing structure: */ export const Paragraph: React.FC = ({ - children: ch, + children, overrides = {}, dropCap = false, }) => { - const children = React.Children.toArray(ch); - const firstWord = getFirstWord(children); + const childrenAsArray = React.Children.toArray(children); + const firstWord = getFirstWord(childrenAsArray); const useDropCap = dropCap && firstWord; return ( @@ -110,7 +112,7 @@ export const Paragraph: React.FC = ({ {firstWord} )} - {useDropCap ? removeFirstWord(children) : children} + {useDropCap ? removeFirstWord(childrenAsArray) : childrenAsArray} ); }; From 9d8a41c71c7d12ae414a465c05eddf8ca8fbc116 Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Tue, 7 Jun 2022 16:46:54 +0300 Subject: [PATCH 5/9] fix(PPDSC-2203): fix a11y issue in the paragraph --- .../__snapshots__/paragraph.test.tsx.snap | 80 ++++++++++--------- src/typography/paragraph/paragraph.tsx | 60 +++++--------- 2 files changed, 63 insertions(+), 77 deletions(-) diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap index 52935eb66f..d373caff5a 100644 --- a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap @@ -55,7 +55,7 @@ exports[`Paragraph renders Paragraph with overrides 1`] = ` .emotion-0 { margin: 0; - color: #2E2E2E; + color: #FFFFFF; font-family: "DM Sans",sans-serif; font-size: 16px; line-height: 1.5; @@ -64,7 +64,7 @@ exports[`Paragraph renders Paragraph with overrides 1`] = ` } .emotion-0 svg { - fill: #2E2E2E; + fill: #FFFFFF; } + .emotion-0 { display: block; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); @@ -157,26 +168,11 @@ exports[`Paragraph renders with drop cap 1`] = ` width: 1px; } -

- - - paragraph - - component -

+ paragraph component + `; @@ -228,7 +224,27 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` fill: #0A0A0A; } -.emotion-2 { + + .emotion-0 { display: block; clip: rect(0 0 0 0); -webkit-clip-path: inset(100%); @@ -240,24 +256,10 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` width: 1px; } -

- - - paragraph - + paragraph component @@ -267,7 +269,7 @@ exports[`Paragraph renders with drop cap and complex children 1`] = ` > link -

+ `; diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 62f9422edd..6709ab8860 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -49,29 +49,29 @@ export const ParagraphDropCap = withOwnTheme(ThemelessParagraphDropCap)({ defaults, }); -const getFirstWord = ( +const getFirstLetter = ( children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], ): string => { const [firstChild] = children; - if (children.length > 0 && typeof firstChild === 'string') { - return firstChild.split(' ')[0]; + if (typeof firstChild === 'string') { + return firstChild.split('')[0]; } - if (children.length && isFragment(firstChild)) { - return getFirstWord(React.Children.toArray(firstChild.props.children)); + if (isFragment(firstChild)) { + return getFirstLetter(React.Children.toArray(firstChild.props.children)); } return ''; }; -const removeFirstWord = ( +const removeFirstLetter = ( children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[], ): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] => { const [firstChild, ...rest] = children; - if (children.length > 0 && typeof firstChild === 'string') { - return [firstChild.split(' ').slice(1).join(' '), ...rest]; + if (typeof firstChild === 'string') { + return [firstChild.split('').slice(1).join(''), ...rest]; } - if (children.length && isFragment(firstChild)) { + if (isFragment(firstChild)) { return [ - removeFirstWord(React.Children.toArray(firstChild.props.children)), + removeFirstLetter(React.Children.toArray(firstChild.props.children)), ...rest, ]; } @@ -79,41 +79,25 @@ const removeFirstWord = ( return children; }; -/** - -For a11y reason we need to add aria-hidden to the first word of the paragraph. -Creating the fallowing structure: -

- - This is paragraph text -

- - */ - export const Paragraph: React.FC = ({ children, overrides = {}, dropCap = false, }) => { const childrenAsArray = React.Children.toArray(children); - const firstWord = getFirstWord(childrenAsArray); - const useDropCap = dropCap && firstWord; + const firstLetter = getFirstLetter(childrenAsArray); + const useDropCap = dropCap && firstLetter; - return ( - - {useDropCap && ( - <> - - {firstWord} - - )} - {useDropCap ? removeFirstWord(childrenAsArray) : childrenAsArray} - + return useDropCap && children ? ( + <> + + {children} + + ) : ( + {children} ); }; From 7055a8a02c45094f3fed11d5ac9704c2ccde8a91 Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Wed, 8 Jun 2022 08:27:47 +0300 Subject: [PATCH 6/9] fix(PPDSC-2203): add a story --- src/typography/__tests__/paragraph.stories.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/typography/__tests__/paragraph.stories.tsx b/src/typography/__tests__/paragraph.stories.tsx index d488adfa6e..d355994c7f 100644 --- a/src/typography/__tests__/paragraph.stories.tsx +++ b/src/typography/__tests__/paragraph.stories.tsx @@ -48,6 +48,18 @@ export const StoryParagraph = () => ( Week.


+ + with drop cap and multiply children + +

+ This being Black History Month, last week was Politicians + In Search Of An Eye-Catching Race-Related Policy Week. Both Theresa May + and Jeremy Corbyn had their own announcement, each + seemingly benign and right-on, each actually destructive and wrong-headed. + This being Black History Month, last week was + Politicians In Search Of An Eye-Catching Race-Related Policy Week. +

+
with Sup and Sub elements

Paragraph component containing a subscript element and a{' '} From a3f8f92da3254dae8089123bb61347ff0c8c39fd Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Wed, 8 Jun 2022 15:34:34 +0300 Subject: [PATCH 7/9] fix(PPDSC-2203): update unit tests --- .../sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap index ca6c2475ad..6660d16b4c 100644 --- a/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap +++ b/site/components/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap @@ -746,10 +746,10 @@ exports[`Sidebar renders correctly when closed 1`] = ` .emotion-504 { margin: 0; color: #2E2E2E; - font-family: "DM Sans",sans-serif; + font-family: "Poppins",sans-serif; font-size: 16px; line-height: 1.5; - font-weight: 400; + font-weight: 500; letter-spacing: 0; } @@ -7278,10 +7278,10 @@ exports[`Sidebar renders correctly when open 1`] = ` .emotion-504 { margin: 0; color: #2E2E2E; - font-family: "DM Sans",sans-serif; + font-family: "Poppins",sans-serif; font-size: 16px; line-height: 1.5; - font-weight: 400; + font-weight: 500; letter-spacing: 0; } From 4569894c6d7df27340ab968f864cf7bd43534a2c Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Wed, 8 Jun 2022 15:58:56 +0300 Subject: [PATCH 8/9] fix(PPDSC-2203): fix coverage --- src/typography/paragraph/paragraph.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 6709ab8860..4be8aa4aed 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -76,6 +76,7 @@ const removeFirstLetter = ( ]; } + /* istanbul ignore next */ return children; }; From dcab4db1143d11a4a8708e11a33502fa2ac192fe Mon Sep 17 00:00:00 2001 From: Stoyan Delev Date: Wed, 8 Jun 2022 16:30:04 +0300 Subject: [PATCH 9/9] fix(PPDSC-2203): change from arrat to string methods --- src/typography/paragraph/paragraph.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index 4be8aa4aed..3bae0a7739 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -54,7 +54,7 @@ const getFirstLetter = ( ): string => { const [firstChild] = children; if (typeof firstChild === 'string') { - return firstChild.split('')[0]; + return firstChild.charAt(0); } if (isFragment(firstChild)) { return getFirstLetter(React.Children.toArray(firstChild.props.children)); @@ -67,7 +67,7 @@ const removeFirstLetter = ( ): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] => { const [firstChild, ...rest] = children; if (typeof firstChild === 'string') { - return [firstChild.split('').slice(1).join(''), ...rest]; + return [firstChild.substring(1), ...rest]; } if (isFragment(firstChild)) { return [