inital commit of new props, doc examples, storybook options

cengage · Jan 4, 2024 · cc59b80 · cc59b80
1 parent 40f070e
commit cc59b80
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 10 deletions.
diff --git a/.changeset/feat-paragraphMargins.md 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
@@ -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
@@ -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
@@ -11,6 +11,8 @@ export interface TypographyProps<T = HTMLParagraphElement>
   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
@@ -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 (
+    <>
+      <Paragraph noTopMargin visualStyle={TypographyVisualStyle.bodyLarge}>
+        Body large. Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noTopMargin visualStyle={TypographyVisualStyle.bodyMedium}>
+        Body medium (default). Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noTopMargin visualStyle={TypographyVisualStyle.bodySmall}>
+        Body small. Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noTopMargin visualStyle={TypographyVisualStyle.bodyXSmall}>
+        Body x-small. Lorem ipsum dolar sit amet.
+      </Paragraph>
+    </>
+  );
+}
+```
+
+## 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 (
+    <>
+      <Paragraph noBottomMargin visualStyle={TypographyVisualStyle.bodyLarge}>
+        Body large. Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noBottomMargin visualStyle={TypographyVisualStyle.bodyMedium}>
+        Body medium (default). Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noBottomMargin visualStyle={TypographyVisualStyle.bodySmall}>
+        Body small. Lorem ipsum dolar sit amet.
+      </Paragraph>
+
+      <Paragraph noBottomMargin visualStyle={TypographyVisualStyle.bodyXSmall}>
+        Body x-small. Lorem ipsum dolar sit amet.
+      </Paragraph>
+    </>
+  );
+}
+```
+
 ## Paragraph Props
 
 **This component uses `forwardRef`. The ref is applied to the outer `p` element.**