@tds/community-callout-paragraph - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

CalloutParagraph.jsx

@@ -49,9 +49,9 @@ import React from 'react'
     text-align: ${props => (props.roundedCorners ? 'center' : undefined)};
-    font-size: ${props => (props.roundedCorners ? '14px' : '1rem')};
-    line-height: ${props => (props.roundedCorners ? '20px' : undefined)};
+    font-size: ${props => (props.compact ? '14px' : '1rem')};
+    line-height: ${props => (props.compact ? '20px' : undefined)};
     border-radius: ${props => (props.roundedCorners ? '5px' : undefined)};
     color: ${colorTelusPurple};
     background: #f2eff4;
-    padding-top: ${props => (props.roundedCorners ? '2px' : '0.5rem')};
-    padding-bottom: ${props => (props.roundedCorners ? '2px' : '0.5rem')};
+    padding-top: ${props => (props.compact ? '2px' : '0.5rem')};
+    padding-bottom: ${props => (props.compact ? '2px' : '0.5rem')};
     padding-left: ${props => paddingValue.desktop[props.spacing]};
@@ -70,5 +70,5 @@ padding-right: ${props => paddingValue.desktop[props.spacing]};
  */
-const CalloutParagraph = ({ children, spacing, roundedCorners, ...rest }) => {
+const CalloutParagraph = ({ children, spacing, roundedCorners, compact, ...rest }) => {
   return (
-    <TextWrapper spacing={spacing} roundedCorners={roundedCorners}>
+    <TextWrapper spacing={spacing} roundedCorners={roundedCorners} compact={compact}>
       <Paragraph {...safeRest(rest)}>{children}</Paragraph>
@@ -93,2 +93,6 @@ </TextWrapper>
   roundedCorners: PropTypes.bool,
+  /**
+   * Font size and padding around text will be smaller.
+   */
+  compact: PropTypes.bool,
 }
@@ -99,4 +103,5 @@
   roundedCorners: false,
+  compact: false,
 }
 
 export default CalloutParagraph

CalloutParagraph.md

@@ -47,1 +47,24 @@ ### Usage criteria
 ```
+
+### Compact
+
+```jsx
+<FlexGrid>
+  <FlexGrid.Row>
+    <FlexGrid.Col xs={12} md={5}>
+      <Card variant="defaultWithBorder">
+        <Box between={3}>
+          <Heading level="h3">Internet 15 - Special Offer</Heading>
+          <CalloutParagraph roundedCorners compact>
+            Save $70/month.
+          </CalloutParagraph>
+          <HairlineDivider />
+          <Text size="medium">Good for basic browsing, and posting to social media.</Text>
+          <Button>Add to cart</Button>
+          <ChevronLink href="#">Learn more</ChevronLink>
+        </Box>
+      </Card>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+</FlexGrid>
+```

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://github.com/telus/tds-community/compare/@tds/community-callout-paragraph@0.2.2...@tds/community-callout-paragraph@0.3.0) (2020-11-17)
+
+
+### Features
+
+* **community-callout-paragraph:** add compact prop ([4e7105a](https://github.com/telus/tds-community/commit/4e7105a6d6e5fe8325694d077ff9cbbb2b261c7f))
+
+
+
+
+
 ## [0.2.2](https://github.com/telus/tds-community/compare/@tds/community-callout-paragraph@0.2.1...@tds/community-callout-paragraph@0.2.2) (2020-11-10)
@@ -8,0 +19,0 @@

dist/index.cjs.js

@@ -116,11 +116,11 @@ 'use strict';
 }, function (props) {
-  return props.roundedCorners ? '14px' : '1rem';
+  return props.compact ? '14px' : '1rem';
 }, function (props) {
-  return props.roundedCorners ? '20px' : undefined;
+  return props.compact ? '20px' : undefined;
 }, function (props) {
   return props.roundedCorners ? '5px' : undefined;
 }, coreColours.colorTelusPurple, function (props) {
-  return props.roundedCorners ? '2px' : '0.5rem';
+  return props.compact ? '2px' : '0.5rem';
 }, function (props) {
-  return props.roundedCorners ? '2px' : '0.5rem';
+  return props.compact ? '2px' : '0.5rem';
 }, function (props) {
@@ -144,7 +144,9 @@ return paddingValue.desktop[props.spacing];
       roundedCorners = _ref.roundedCorners,
-      rest = objectWithoutProperties(_ref, ["children", "spacing", "roundedCorners"]);
+      compact = _ref.compact,
+      rest = objectWithoutProperties(_ref, ["children", "spacing", "roundedCorners", "compact"]);
 
   return React.createElement(TextWrapper, {
     spacing: spacing,
-    roundedCorners: roundedCorners
+    roundedCorners: roundedCorners,
+    compact: compact
   }, React.createElement(Paragraph, utilHelpers.safeRest(rest), children));
@@ -167,9 +169,15 @@ };
    */
-  roundedCorners: PropTypes.bool
+  roundedCorners: PropTypes.bool,
+
+  /**
+   * Font size and padding around text will be smaller.
+   */
+  compact: PropTypes.bool
 };
 CalloutParagraph.defaultProps = {
   spacing: 'default',
-  roundedCorners: false
+  roundedCorners: false,
+  compact: false
 };
 
 exports.default = CalloutParagraph;

dist/index.es.js

@@ -110,11 +110,11 @@ import React from 'react';
 }, function (props) {
-  return props.roundedCorners ? '14px' : '1rem';
+  return props.compact ? '14px' : '1rem';
 }, function (props) {
-  return props.roundedCorners ? '20px' : undefined;
+  return props.compact ? '20px' : undefined;
 }, function (props) {
   return props.roundedCorners ? '5px' : undefined;
 }, colorTelusPurple, function (props) {
-  return props.roundedCorners ? '2px' : '0.5rem';
+  return props.compact ? '2px' : '0.5rem';
 }, function (props) {
-  return props.roundedCorners ? '2px' : '0.5rem';
+  return props.compact ? '2px' : '0.5rem';
 }, function (props) {
@@ -138,7 +138,9 @@ return paddingValue.desktop[props.spacing];
       roundedCorners = _ref.roundedCorners,
-      rest = objectWithoutProperties(_ref, ["children", "spacing", "roundedCorners"]);
+      compact = _ref.compact,
+      rest = objectWithoutProperties(_ref, ["children", "spacing", "roundedCorners", "compact"]);
 
   return React.createElement(TextWrapper, {
     spacing: spacing,
-    roundedCorners: roundedCorners
+    roundedCorners: roundedCorners,
+    compact: compact
   }, React.createElement(Paragraph, safeRest(rest), children));
@@ -161,9 +163,15 @@ };
    */
-  roundedCorners: PropTypes.bool
+  roundedCorners: PropTypes.bool,
+
+  /**
+   * Font size and padding around text will be smaller.
+   */
+  compact: PropTypes.bool
 };
 CalloutParagraph.defaultProps = {
   spacing: 'default',
-  roundedCorners: false
+  roundedCorners: false,
+  compact: false
 };
 
 export default CalloutParagraph;

package.json

 {
   "name": "@tds/community-callout-paragraph",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "",
@@ -34,3 +34,3 @@ "main": "index.cjs.js",
   },
-  "gitHead": "93bf407c00c6d44824801b3f267a1eda42715257"
+  "gitHead": "17be50844aa4696639b137919c083ad35b5e79ef"
 }

No alert changes

Improved metrics

Total package byte prevSize

22208

increased by6.9%

Lines of code

440

increased by4.51%

No dependency changes