feat(paragraph): support monospace font family

glrodasz · Jan 11, 2022 · 180ede5 · 180ede5
1 parent 77cfacb
commit 180ede5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 0 deletions.
diff --git a/atoms/Paragraph/Paragraph.js b/atoms/Paragraph/Paragraph.js
@@ -11,6 +11,7 @@ export const Paragraph = ({
   className,
   isStriked,
   isInline,
+  isMonospace,
 }) => {
   return (
     <div
@@ -21,6 +22,7 @@ export const Paragraph = ({
         {
           'is-striked': isStriked,
           'is-inline': isInline,
+          'is-monospace': isMonospace,
         }
       )}
     >
@@ -38,6 +40,7 @@ Paragraph.propTypes = {
   className: PropTypes.string,
   isStriked: PropTypes.bool,
   isInline: PropTypes.bool,
+  isMonospace: PropTypes.bool,
 }
 
 Paragraph.defaultProps = {

diff --git a/atoms/Paragraph/Paragraph.module.css b/atoms/Paragraph/Paragraph.module.css
@@ -58,3 +58,7 @@
   display: inline-block;
   max-width: max-content;
 }
+
+.is-monospace {
+  font-family: var(--font-family-mono);
+}
diff --git a/atoms/Paragraph/Paragraph.stories.js b/atoms/Paragraph/Paragraph.stories.js
@@ -32,6 +32,9 @@ Striked.args = { isStriked: true }
 export const Inline = Template.bind({})
 Inline.args = { isInline: true, children: 'Swords are no more.' }
 
+export const Monospace = Template.bind({})
+Monospace.args = { isMonospace: true }
+
 export const Colors = ListTemplate.bind({})
 Colors.args = { items: options.colors.map((color) => ({ color })) }
 

diff --git a/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap b/atoms/Paragraph/__snapshots__/Paragraph.stories.js.snap
@@ -89,6 +89,29 @@ exports[`Storyshots Atoms/Paragraph Inline 1`] = `
 </div>
 `;
 
+exports[`Storyshots Atoms/Paragraph Monospace 1`] = `
+<div
+  style={
+    Object {
+      "alignContent": "flex-start",
+      "display": "flex",
+      "flexDirection": "column",
+      "flexWrap": "wrap",
+      "gap": "10px 30px",
+      "height": "100%",
+      "justifyContent": "flex-start",
+      "maxHeight": "auto",
+    }
+  }
+>
+  <div
+    className="paragraph color-base size-md weight-normal is-monospace"
+  >
+    Swords are no more use here. Esquire days mountain Fangorn champion brace waiting laboring preparing! Canopy plunder deceit cakehole strange Udùn piled fighters potent?
+  </div>
+</div>
+`;
+
 exports[`Storyshots Atoms/Paragraph Sizes 1`] = `
 <div
   style={