From 1af06df37b3ebb4de498b257808b310245086673 Mon Sep 17 00:00:00 2001 From: Evgeni Nikolov Date: Thu, 28 Jul 2022 15:42:15 +0300 Subject: [PATCH] feat(PPDSC-2256): update dropcap logical props and presets (#312) * feat(PPDSC-2256): update dropcap logical props and presets * feat(PPDSC-2256): add unit test * feat(PPDSC-2256): design review comments * feat(PPDSC-2256): update story name --- .../__snapshots__/doc-theme.test.ts.snap | 168 ++++++++++---- site/theme/typography-presets.json | 14 +- .../__snapshots__/creator.test.ts.snap | 21 +- .../__snapshots__/theme.test.ts.snap | 32 ++- .../__snapshots__/index.test.ts.snap | 21 +- src/theme/presets/typography-presets.ts | 9 +- .../__snapshots__/paragraph.test.tsx.snap | 208 ++++++++++++++++-- .../__tests__/paragraph.stories.tsx | 25 ++- src/typography/__tests__/paragraph.test.tsx | 16 ++ src/typography/paragraph/defaults.ts | 11 +- src/typography/paragraph/paragraph.tsx | 9 +- 11 files changed, 436 insertions(+), 98 deletions(-) diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index deafd42014..d222b11be9 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -2075,16 +2075,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -4474,16 +4483,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -6876,16 +6894,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -9275,16 +9302,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -11677,16 +11713,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -14076,16 +14121,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -16478,16 +16532,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", @@ -18877,16 +18940,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight040}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily030.fontFamily}}", diff --git a/site/theme/typography-presets.json b/site/theme/typography-presets.json index 03d495d66b..c51025857e 100644 --- a/site/theme/typography-presets.json +++ b/site/theme/typography-presets.json @@ -109,5 +109,17 @@ "fontSize": "{{fonts.fontSize030}}", "fontWeight": "{{fonts.fontWeight010}}", "lineHeight": "{{fonts.fontLineHeight040}}" + }, + "editorialDropCap010": { + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontWeight": "{{fonts.fontWeight040}}" + }, + "editorialDropCap020": { + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontWeight": "{{fonts.fontWeight040}}" + }, + "editorialDropCap030": { + "fontFamily": "{{fonts.fontFamily030.fontFamily}}", + "fontWeight": "{{fonts.fontWeight040}}" } -} \ No newline at end of file +} diff --git a/src/theme/__tests__/__snapshots__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap index 6f839d339e..586407dbb3 100644 --- a/src/theme/__tests__/__snapshots__/creator.test.ts.snap +++ b/src/theme/__tests__/__snapshots__/creator.test.ts.snap @@ -840,16 +840,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap index 17d37d6549..390ea5d19d 100644 --- a/src/theme/__tests__/__snapshots__/theme.test.ts.snap +++ b/src/theme/__tests__/__snapshots__/theme.test.ts.snap @@ -856,16 +856,25 @@ Object { "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize120}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize130}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "{{fonts.fontFamily020.fontFamily}}", + "fontSize": "{{fonts.fontSize140}}", + "fontWeight": "{{fonts.fontWeight020}}", + "letterSpacing": "{{fonts.fontLetterSpacing030}}", + "lineHeight": "{{fonts.fontLineHeight020}}", }, "editorialHeadline010": Object { "fontFamily": "{{fonts.fontFamily020.fontFamily}}", @@ -2099,7 +2108,16 @@ Object { }, "paragraph": Object { "dropCap": Object { - "space": "space010", + "paddingBlockEnd": Object { + "lg": "space040", + "md": "space030", + "xs": "space020", + }, + "paddingInlineEnd": Object { + "lg": "space040", + "md": "space030", + "xs": "space020", + }, "stylePreset": "inkContrast", "typographyPreset": Object { "lg": "editorialDropCap030", diff --git a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap index 6371c69cf3..37ea74cab9 100644 --- a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap +++ b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap @@ -984,16 +984,25 @@ Object { "lineHeight": 1.125, }, "editorialDropCap010": Object { - "fontSize": "5.625em", - "lineHeight": 0.85, + "fontFamily": "\\"Bitter\\", serif", + "fontSize": "44px", + "fontWeight": 500, + "letterSpacing": "0", + "lineHeight": 1.125, }, "editorialDropCap020": Object { - "fontSize": "5.875em", - "lineHeight": 0.85, + "fontFamily": "\\"Bitter\\", serif", + "fontSize": "48px", + "fontWeight": 500, + "letterSpacing": "0", + "lineHeight": 1.125, }, "editorialDropCap030": Object { - "fontSize": "6em", - "lineHeight": 0.85, + "fontFamily": "\\"Bitter\\", serif", + "fontSize": "56px", + "fontWeight": 500, + "letterSpacing": "0", + "lineHeight": 1.125, }, "editorialHeadline010": Object { "fontFamily": "\\"Bitter\\", serif", diff --git a/src/theme/presets/typography-presets.ts b/src/theme/presets/typography-presets.ts index d458e624ea..d6b9dc53a1 100644 --- a/src/theme/presets/typography-presets.ts +++ b/src/theme/presets/typography-presets.ts @@ -337,14 +337,11 @@ typographyPresets.utilityButton030 = { // Dropcap typographyPresets.editorialDropCap010 = { - fontSize: '5.625em', - lineHeight: 0.85, + ...typographyPresets.editorialDisplay010, }; typographyPresets.editorialDropCap020 = { - fontSize: '5.875em', - lineHeight: 0.85, + ...typographyPresets.editorialDisplay020, }; typographyPresets.editorialDropCap030 = { - fontSize: '6em', - lineHeight: 0.85, + ...typographyPresets.editorialDisplay030, }; diff --git a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap index 9757d36103..1f3241aca1 100644 --- a/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap +++ b/src/typography/__tests__/__snapshots__/paragraph.test.tsx.snap @@ -142,30 +142,37 @@ exports[`Paragraph renders with drop cap 1`] = ` } .emotion-1 { - margin: 0 0.15em 0 0; float: left; - margin-top: 4px; color: #0A0A0A; } @media screen and (max-width: 767px) { .emotion-1 { - font-size: 5.625em; - line-height: 0.85; + font-family: "Bitter",serif; + font-size: 44px; + line-height: 1.125; + font-weight: 500; + letter-spacing: 0; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .emotion-1 { - font-size: 5.875em; - line-height: 0.85; + font-family: "Bitter",serif; + font-size: 48px; + line-height: 1.125; + font-weight: 500; + letter-spacing: 0; } } @media screen and (min-width: 1024px) { .emotion-1 { - font-size: 6em; - line-height: 0.85; + font-family: "Bitter",serif; + font-size: 56px; + line-height: 1.125; + font-weight: 500; + letter-spacing: 0; } } @@ -173,6 +180,30 @@ exports[`Paragraph renders with drop cap 1`] = ` fill: #0A0A0A; } +@media screen and (max-width: 767px) { + .emotion-1 { + -webkit-padding-end: 8px; + padding-inline-end: 8px; + padding-block-end: 8px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1023px) { + .emotion-1 { + -webkit-padding-end: 12px; + padding-inline-end: 12px; + padding-block-end: 12px; + } +} + +@media screen and (min-width: 1024px) { + .emotion-1 { + -webkit-padding-end: 16px; + padding-inline-end: 16px; + padding-block-end: 16px; + } +} + + .emotion-0 { + 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; +} + + + dropcap with logical props + + +`; + exports[`Subscript renders Subscript 1`] = ` .emotion-0 { diff --git a/src/typography/__tests__/paragraph.stories.tsx b/src/typography/__tests__/paragraph.stories.tsx index ba7012b212..e1a1747915 100644 --- a/src/typography/__tests__/paragraph.stories.tsx +++ b/src/typography/__tests__/paragraph.stories.tsx @@ -46,7 +46,7 @@ export const StoryParagraph = () => (


- with drop cap and multiply children + with drop cap and multiple children

This being Black History Month, last week was Politicians @@ -57,6 +57,29 @@ export const StoryParagraph = () => ( Politicians In Search Of An Eye-Catching Race-Related Policy Week.


+ + with logical props applied to drop cap (overrides) + +

+ 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{' '} diff --git a/src/typography/__tests__/paragraph.test.tsx b/src/typography/__tests__/paragraph.test.tsx index 3d15d03c54..1fffcb980e 100644 --- a/src/typography/__tests__/paragraph.test.tsx +++ b/src/typography/__tests__/paragraph.test.tsx @@ -69,6 +69,22 @@ describe('Paragraph', () => { expect(wrapper).toMatchSnapshot(); }); + test('renders with dropCap logical props', () => { + const wrapper = renderToFragmentWithTheme(Paragraph, { + children: 'dropcap with logical props', + dropCap: true, + overrides: { + dropCap: { + paddingInline: 'space020', + paddingBlock: 'space020', + marginBlock: 'space020', + marginInline: 'space020', + }, + }, + } as ParagraphProps); + expect(wrapper).toMatchSnapshot(); + }); + test('does not render dropCap when first children is not plain text', () => { const wrapper = renderToFragmentWithTheme(Paragraph, { children: ( diff --git a/src/typography/paragraph/defaults.ts b/src/typography/paragraph/defaults.ts index 810984a438..7c34cfdf32 100644 --- a/src/typography/paragraph/defaults.ts +++ b/src/typography/paragraph/defaults.ts @@ -9,7 +9,16 @@ export default { md: 'editorialDropCap020', lg: 'editorialDropCap030', }, - space: 'space010', + paddingInlineEnd: { + xs: 'space020', + md: 'space030', + lg: 'space040', + }, + paddingBlockEnd: { + xs: 'space020', + md: 'space030', + lg: 'space040', + }, }, }, }; diff --git a/src/typography/paragraph/paragraph.tsx b/src/typography/paragraph/paragraph.tsx index f57b92b373..ab23499334 100644 --- a/src/typography/paragraph/paragraph.tsx +++ b/src/typography/paragraph/paragraph.tsx @@ -5,7 +5,6 @@ import { getTypographyPreset, MQ, getStylePreset, - getResponsiveSpace, } from '../../utils/style'; import defaults from './defaults'; import {withOwnTheme} from '../../utils/with-own-theme'; @@ -21,8 +20,7 @@ export interface ParagraphProps { dropCap?: { stylePreset?: MQ; typographyPreset?: MQ; - space?: MQ; - }; + } & LogicalProps; } & LogicalProps; } @@ -30,7 +28,7 @@ const ThemelessParagraphText = styled.p` margin: 0; ${getStylePreset('paragraph', '')}; ${getTypographyPreset('paragraph', '')}; - ${logicalProps()} + ${logicalProps('paragraph', '')} `; export const ParagraphText = withOwnTheme(ThemelessParagraphText)({ defaults, @@ -41,11 +39,10 @@ We use this solution instead of css :first-letter since there is Firefox inconsi which causes the first letter to has less margin than desired. */ const ThemelessParagraphDropCap = styled.span` - margin: 0 0.15em 0 0; float: left; - ${getResponsiveSpace('marginTop', 'paragraph.dropCap', 'dropCap', 'space')}; ${getTypographyPreset('paragraph.dropCap', 'dropCap')}; ${getStylePreset('paragraph.dropCap', 'dropCap')}; + ${logicalProps('paragraph.dropCap', 'dropCap')} `; export const ParagraphDropCap = withOwnTheme(ThemelessParagraphDropCap)({ defaults,