From cc59b804850bb6610ce9af6501ea9eac628fb438 Mon Sep 17 00:00:00 2001 From: Chris Cedrone Date: Thu, 4 Jan 2024 13:58:06 -0500 Subject: [PATCH] inital commit of new props, doc examples, storybook options --- .changeset/feat-paragraphMargins.md | 5 ++ .../Paragraph/Paragraph.stories.tsx | 18 +++++ .../src/components/Paragraph/index.tsx | 10 +++ .../src/components/Typography/index.tsx | 77 ++++++++++++++++--- .../src/pages/api/paragraph.mdx | 62 +++++++++++++++ 5 files changed, 162 insertions(+), 10 deletions(-) create mode 100644 .changeset/feat-paragraphMargins.md diff --git a/.changeset/feat-paragraphMargins.md b/.changeset/feat-paragraphMargins.md new file mode 100644 index 000000000..b1a48cc23 --- /dev/null +++ b/.changeset/feat-paragraphMargins.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': minor +--- + +feat(Paragraph): Adding more configuration for the Paragraph component margins. `noTopMargin` and `noBottomMargin` both allow a removal of the margin from one side. diff --git a/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx b/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx index a786583ed..9e8916c28 100644 --- a/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx +++ b/packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx @@ -14,6 +14,24 @@ export default { }, defaultValue: false, }, + noMargins: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + noBottomMargin: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + noTopMargin: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, }, } as Meta; diff --git a/packages/react-magma-dom/src/components/Paragraph/index.tsx b/packages/react-magma-dom/src/components/Paragraph/index.tsx index f0291637b..1b0ce1f5a 100644 --- a/packages/react-magma-dom/src/components/Paragraph/index.tsx +++ b/packages/react-magma-dom/src/components/Paragraph/index.tsx @@ -29,6 +29,16 @@ export interface ParagraphProps * @default false */ noMargins?: boolean; + /** + * If true, the component will not have the default bottom margin and instead will have a value of 0 + * @default false + */ + noBottomMargin?: boolean; + /** + * If true, the component will not have the default top margin and instead will have a value of 0 + * @default false + */ + noTopMargin?: boolean; /** * @internal */ diff --git a/packages/react-magma-dom/src/components/Typography/index.tsx b/packages/react-magma-dom/src/components/Typography/index.tsx index 1c51b60ab..fc3b492cc 100644 --- a/packages/react-magma-dom/src/components/Typography/index.tsx +++ b/packages/react-magma-dom/src/components/Typography/index.tsx @@ -11,6 +11,8 @@ export interface TypographyProps element?: string; isInverse?: boolean; noMargins?: boolean; + noBottomMargin?: boolean; + noTopMargin?: boolean; ref?: any; /** * @internal @@ -123,7 +125,13 @@ const baseParagraphStyles = props => css` export const paragraphLargeStyles = props => css` ${baseParagraphStyles(props)} - margin: ${props.noMargins ? '0' : `${props.theme.spaceScale.spacing06} 0`}; + margin: ${props.noMargins + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing06} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing06} 0` + : `${props.theme.spaceScale.spacing06} 0`}; font-size: ${props.theme.typographyVisualStyles.bodyLarge.mobile.fontSize}; line-height: ${props.theme.typographyVisualStyles.bodyLarge.mobile @@ -157,7 +165,13 @@ export const paragraphMediumStyles = props => css` font-size: ${props.theme.typographyVisualStyles.bodyMedium.mobile.fontSize}; line-height: ${props.theme.typographyVisualStyles.bodyMedium.mobile .lineHeight}; - margin: ${props.noMargins ? '0' : `${props.theme.spaceScale.spacing06} 0`}; + margin: ${props.noMargins + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing06} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing06} 0` + : `${props.theme.spaceScale.spacing06} 0`}; @media (min-width: ${props.theme.breakpoints.small}px) { font-size: ${props.theme.typographyVisualStyles.bodyMedium.desktop @@ -175,7 +189,13 @@ export const paragraphSmallStyles = props => css` .letterSpacing}; line-height: ${props.theme.typographyVisualStyles.bodySmall.mobile .lineHeight}; - margin: ${props.noMargins ? '0' : `${props.theme.spaceScale.spacing05} 0`}; + margin: ${props.noMargins + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing05} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` + : `${props.theme.spaceScale.spacing05} 0`}; @media (min-width: ${props.theme.breakpoints.small}px) { font-size: ${props.theme.typographyVisualStyles.bodySmall.desktop.fontSize}; @@ -194,7 +214,13 @@ export const paragraphXSmallStyles = props => css` .letterSpacing}; line-height: ${props.theme.typographyVisualStyles.bodyXSmall.mobile .lineHeight}; - margin: ${props.noMargins ? '0' : `${props.theme.spaceScale.spacing03} 0`}; + margin: ${props.noMargins + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing03} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing03} 0` + : `${props.theme.spaceScale.spacing03} 0`}; @media (min-width: ${props.theme.breakpoints.small}px) { font-size: ${props.theme.typographyVisualStyles.bodyXSmall.desktop @@ -263,7 +289,13 @@ export const headingXLargeStyles = props => css` font-weight: ${props.theme.typographyVisualStyles.headingXLarge.fontWeight}; line-height: ${props.theme.typographyVisualStyles.headingXLarge.mobile .lineHeight}; - margin: ${props.noMargins ? 0 : `0 0 ${props.theme.spaceScale.spacing05}`}; + margin: ${props.noMargins + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing05} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` + : `0 0 ${props.theme.spaceScale.spacing05}`}; @media (min-width: ${props.theme.breakpoints.small}px) { font-size: ${props.theme.typographyVisualStyles.headingXLarge.desktop @@ -313,8 +345,13 @@ export const headingLargeStyles = props => css` font-weight: ${props.theme.typographyVisualStyles.headingLarge.fontWeight}; line-height: ${props.theme.typographyVisualStyles.headingLarge.mobile .lineHeight}; + margin: ${props.noMargins - ? 0 + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing10} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` : `${props.theme.spaceScale.spacing10} 0 ${props.theme.spaceScale.spacing05}`}; @media (min-width: ${props.theme.breakpoints.small}px) { @@ -366,8 +403,13 @@ export const headingMediumStyles = props => css` font-weight: ${props.theme.typographyVisualStyles.headingMedium.fontWeight}; line-height: ${props.theme.typographyVisualStyles.headingMedium.mobile .lineHeight}; + margin: ${props.noMargins - ? 0 + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing09} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` : `${props.theme.spaceScale.spacing09} 0 ${props.theme.spaceScale.spacing05}`}; @media (min-width: ${props.theme.breakpoints.small}px) { @@ -420,8 +462,13 @@ export const headingSmallStyles = props => css` font-weight: ${props.theme.typographyVisualStyles.headingSmall.fontWeight}; line-height: ${props.theme.typographyVisualStyles.headingSmall.mobile .lineHeight}; + margin: ${props.noMargins - ? 0 + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing08} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` : `${props.theme.spaceScale.spacing08} 0 ${props.theme.spaceScale.spacing05}`}; @media (min-width: ${props.theme.breakpoints.small}px) { @@ -472,8 +519,13 @@ export const headingXSmallStyles = props => css` font-weight: ${props.theme.typographyVisualStyles.headingXSmall.fontWeight}; line-height: ${props.theme.typographyVisualStyles.headingXSmall.mobile .lineHeight}; + margin: ${props.noMargins - ? 0 + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing06} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing05} 0` : `${props.theme.spaceScale.spacing06} 0 ${props.theme.spaceScale.spacing05}`}; @media (min-width: ${props.theme.breakpoints.small}px) { @@ -528,8 +580,13 @@ export const heading2XSmallStyles = props => css` line-height: ${props.theme.typographyVisualStyles.heading2XSmall.mobile .lineHeight}; text-transform: uppercase; + margin: ${props.noMargins - ? 0 + ? '0' + : props.noBottomMargin + ? `${props.theme.spaceScale.spacing06} 0 0 0` + : props.noTopMargin + ? `0 0 ${props.theme.spaceScale.spacing03} 0` : `${props.theme.spaceScale.spacing06} 0 ${props.theme.spaceScale.spacing03}`}; @media (min-width: ${props.theme.breakpoints.small}px) { diff --git a/website/react-magma-docs/src/pages/api/paragraph.mdx b/website/react-magma-docs/src/pages/api/paragraph.mdx index 73cf75d82..d5c007e40 100644 --- a/website/react-magma-docs/src/pages/api/paragraph.mdx +++ b/website/react-magma-docs/src/pages/api/paragraph.mdx @@ -254,6 +254,68 @@ export function Example() { } ``` +## No Top Margin + +When the `noTopMargin` prop is used, the element will have a top margin value of 0. + +```tsx +import React from 'react'; +import { Paragraph, TypographyVisualStyle } from 'react-magma-dom'; + +export function Example() { + return ( + <> + + Body large. Lorem ipsum dolar sit amet. + + + + Body medium (default). Lorem ipsum dolar sit amet. + + + + Body small. Lorem ipsum dolar sit amet. + + + + Body x-small. Lorem ipsum dolar sit amet. + + + ); +} +``` + +## No Bottom Margin + +When the `noBottomMargin` prop is used, the element will have a bottom margin value of 0. + +```tsx +import React from 'react'; +import { Paragraph, TypographyVisualStyle } from 'react-magma-dom'; + +export function Example() { + return ( + <> + + Body large. Lorem ipsum dolar sit amet. + + + + Body medium (default). Lorem ipsum dolar sit amet. + + + + Body small. Lorem ipsum dolar sit amet. + + + + Body x-small. Lorem ipsum dolar sit amet. + + + ); +} +``` + ## Paragraph Props **This component uses `forwardRef`. The ref is applied to the outer `p` element.**