@bufferapp/components - npm Package Compare versions

Comparing version 2.3.3 to 2.3.4-beta.1

LinkifiedText/index.jsx

@@ -56,5 +56,14 @@ import React from 'react';
   unstyled,
+  whitespace,
 }) => {
   const options = { unstyled, newTab };
-  return <Text size={size} color={color}>{calulateLinkifiedText(options, links, children)}</Text>;
+  return (
+    <Text
+      whitespace={whitespace}
+      size={size}
+      color={color}
+    >
+      {calulateLinkifiedText(options, links, children)}
+    </Text>
+  );
 };
@@ -76,2 +85,3 @@
   unstyled: PropTypes.bool,
+  whitespace: PropTypes.string,
 };
@@ -78,0 +88,0 @@

LinkifiedText/story.jsx

@@ -98,2 +98,16 @@ import React from 'react';
     </LinkifiedText>
+  ))
+  .add('long text with normal whitespace handling', () => (
+    <LinkifiedText
+      whitespace='normal'
+    >
+      {'some long text goes here\n\n- item 1\n- item 2\n\nmore text here'}
+    </LinkifiedText>
+  ))
+  .add('long text respecting whitespace ', () => (
+    <LinkifiedText
+      whitespace='pre-wrap'
+    >
+      {'some long text goes here\n\n- item 1\n- item 2\n\nmore text here'}
+    </LinkifiedText>
   ));

package.json

 {
   "name": "@bufferapp/components",
-  "version": "2.3.3",
+  "version": "2.3.4-beta.1",
   "description": "A shared set of UI Components",
@@ -5,0 +5,0 @@ "main": "index.js",

Popover/index.jsx

@@ -11,13 +11,2 @@ import React from 'react';
 
-const popoverWrapperStyle = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  display: 'flex',
-  flexDirection: 'column',
-  height: '100vh',
-  width: '100vw',
-  justifyContent: 'center',
-  alignItems: 'center',
-};
 
@@ -30,26 +19,40 @@ const Popover = ({
   right,
+  width,
   onOverlayClick,
   transparentOverlay,
-}) => (
-  <div style={popoverWrapperStyle}>
-    <div
-      style={calculateStyles({
-        default: {
-          position: 'absolute',
-          left,
-          top,
-          bottom,
-          right,
-          zIndex: modal,
-        },
-      })}
-    >
-      {children}
+}) => {
+  const popoverWrapperStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    width: `${width || '100vw'}`,
+    justifyContent: 'center',
+    alignItems: 'center',
+  };
+  return (
+    <div style={popoverWrapperStyle}>
+      <div
+        style={calculateStyles({
+          default: {
+            position: 'absolute',
+            left,
+            top,
+            bottom,
+            right,
+            zIndex: modal,
+          },
+        })}
+      >
+        {children}
+      </div>
+      <Overlay
+        onClick={onOverlayClick}
+        transparent={transparentOverlay}
+      />
     </div>
-    <Overlay
-      onClick={onOverlayClick}
-      transparent={transparentOverlay}
-    />
-  </div>
-);
+  );
+};
 
@@ -62,2 +65,3 @@ Popover.propTypes = {
   right: PropTypes.string,
+  width: PropTypes.string,
   onOverlayClick: PropTypes.func,
@@ -64,0 +68,0 @@ transparentOverlay: PropTypes.bool,

Text/index.jsx

@@ -24,5 +24,13 @@ import React from 'react';
 } from '../style/font';
+import {
+  whiteSpaces,
+  normal,
+  pre,
+  preLine,
+  preWrap,
+  noWrap,
+} from '../style/whiteSpaces';
 import colors from '../style/color';
 
-const Text = ({ children, size, weight, color }) => {
+const Text = ({ children, size, weight, color, whitespace }) => {
   const style = calculateStyles({
@@ -76,2 +84,17 @@ default: {
     },
+    preWrap: {
+      whiteSpace: preWrap,
+    },
+    normal: {
+      whiteSpace: normal,
+    },
+    preLine: {
+      whiteSpace: preLine,
+    },
+    pre: {
+      whiteSpace: pre,
+    },
+    noWrap: {
+      whiteSpace: noWrap,
+    },
   }, {
@@ -93,2 +116,8 @@ // Weights
     small: size === 'small',
+    // White-Space
+    preWrap: whitespace === preWrap,
+    normal: whitespace === normal,
+    preLine: whitespace === preLine,
+    pre: whitespace === pre,
+    noWrap: whitespace === noWrap,
   });
@@ -105,2 +134,3 @@ return (
   color: PropTypes.oneOf(Object.keys(colors)),
+  whitespace: PropTypes.oneOf(whiteSpaces),
 };
@@ -107,0 +137,0 @@

Text/story.jsx

@@ -7,2 +7,3 @@ import React from 'react';
 const text = 'The quick brown fox jumps over the lazy dog';
+const longText = 'Test this out\n\n- lots of stuff\n- some things\n\nlong with spaces';
 
@@ -54,2 +55,17 @@ storiesOf('Text', module)
     <Text weight={'thin'}>{text}</Text>
+  ))
+  .add('normal', () => (
+    <Text whitespace={'normal'}>{longText}</Text>
+  ))
+  .add('noWrap', () => (
+      <Text whitespace={'nowrap'}>{longText}</Text>
+  ))
+  .add('pre', () => (
+      <Text whitespace={'pre'}>{longText}</Text>
+  ))
+  .add('preLine', () => (
+    <Text whitespace={'pre-line'}>{longText}</Text>
+  ))
+  .add('preWrap', () => (
+    <Text whitespace={'pre-wrap'}>{longText}</Text>
   ));

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

969303

increased by2.26%

Number of package files

214

increased by4.39%

Lines of code

7231

increased by1.2%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes