@tds/core-heading - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

__tests__/Heading.spec.jsx

@@ -17,4 +17,3 @@ import React from 'react'
     )
-
-    return heading.find(heading.props().level)
+    return heading.find(heading.props().tag || heading.props().level)
   }
@@ -40,2 +39,15 @@
 
+  it('renders a heading in the specified level and specified tag, when level and tag are different', () => {
+    const heading = doMount({ level: 'h4', tag: 'h3' })
+
+    expect(heading).toHaveClassName('h4')
+    expect(heading).toHaveTagName('h3')
+  })
+
+  it('renders a heading in the same tag as level if tag is not specified', () => {
+    const heading = doMount({ level: 'h4' })
+
+    expect(heading).toHaveTagName('h4')
+  })
+
   describe('colour', () => {
@@ -42,0 +54,0 @@ it('can be inverted', () => {

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/telusdigital/tds/compare/@tds/core-heading@1.0.2...@tds/core-heading@1.1.0) (2018-06-08)
+
+
+### Features
+
+* **core-heading:** decouple semantic heading level from visual size ([2153864](https://github.com/telusdigital/tds/commit/2153864))
+* **core-heading:** decouple visual heading level from semantic tag ([364a8b3](https://github.com/telusdigital/tds/commit/364a8b3))
+
+
+
+
 <a name="1.0.2"></a>
@@ -8,0 +20,0 @@ ## [1.0.2](https://github.com/telusdigital/tds/compare/@tds/core-heading@1.0.1...@tds/core-heading@1.0.2) (2018-05-14)

dist/index.cjs.js

@@ -77,60 +77,40 @@ 'use strict';
 
-var BaseHeading = function BaseHeading(_ref) {
+var getClassNames = function getClassNames(invert, level) {
+  if (invert) {
+    return styles.inverted;
+  }
+  if (level === 'h1' || level === 'h2') {
+    return styles.secondary;
+  }
+  return styles.default;
+};
+
+/**
+ * Page headings. Renders an HTML `<h1-h4>` element.
+ *
+ * @version ./package.json
+ */
+var Heading = function Heading(_ref) {
   var level = _ref.level,
-      color = _ref.color,
-      size = _ref.size,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === undefined ? level : _ref$tag,
+      invert = _ref.invert,
       children = _ref.children,
-      rest = objectWithoutProperties(_ref, ['level', 'color', 'size', 'children']);
-  return React.createElement(level, _extends({}, safeRest(rest), {
-    className: joinClassNames(size, color)
+      rest = objectWithoutProperties(_ref, ['level', 'tag', 'invert', 'children']);
+
+  return React.createElement(tag, _extends({}, safeRest(rest), {
+    className: joinClassNames(styles[level], getClassNames(invert, level))
   }), children);
 };
 
-BaseHeading.propTypes = {
-  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
-  color: PropTypes.string.isRequired,
-  size: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
-
-  /**
-   * Page headings. Renders an HTML `<h1-h4>` element.
-   *
-   * @version ./package.json
-   */
-};var Heading = function Heading(_ref2) {
-  var level = _ref2.level,
-      invert = _ref2.invert,
-      children = _ref2.children,
-      rest = objectWithoutProperties(_ref2, ['level', 'invert', 'children']);
-
-  var baseHeadingProps = _extends({}, rest, {
-    level: level
-  });
-
-  if (level === 'h1' || level === 'h2') {
-    var color = invert ? styles.inverted : styles.secondary;
-
-    return React.createElement(
-      BaseHeading,
-      _extends({}, baseHeadingProps, { color: color, size: styles[level] }),
-      children
-    );
-  }
-
-  return React.createElement(
-    BaseHeading,
-    _extends({}, baseHeadingProps, {
-      color: invert ? styles.inverted : styles.default,
-      size: styles[level]
-    }),
-    children
-  );
-};
-
 Heading.propTypes = {
   /**
-   * The heading level.
+   * The visual level of the heading. If `tag` is not specified, then `level` determines what HTML element to render.
    */
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
   /**
+   * The semantic level of the heading. Renders the specified HTML element, otherwise it matches `level`.
+   */
+  tag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
+  /**
    * Invert the text color to appear light on dark backgrounds.
@@ -140,3 +120,3 @@ */
   /**
-   * The text. Can be text, other components, or HTML elements.
+   * The content. Can be text, other components, or HTML elements.
    */
@@ -146,3 +126,4 @@ children: PropTypes.node.isRequired
 Heading.defaultProps = {
-  invert: false
+  invert: false,
+  tag: undefined
 };
@@ -149,0 +130,0 @@

dist/index.es.js

@@ -73,60 +73,40 @@ import React from 'react';
 
-var BaseHeading = function BaseHeading(_ref) {
+var getClassNames = function getClassNames(invert, level) {
+  if (invert) {
+    return styles.inverted;
+  }
+  if (level === 'h1' || level === 'h2') {
+    return styles.secondary;
+  }
+  return styles.default;
+};
+
+/**
+ * Page headings. Renders an HTML `<h1-h4>` element.
+ *
+ * @version ./package.json
+ */
+var Heading = function Heading(_ref) {
   var level = _ref.level,
-      color = _ref.color,
-      size = _ref.size,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === undefined ? level : _ref$tag,
+      invert = _ref.invert,
       children = _ref.children,
-      rest = objectWithoutProperties(_ref, ['level', 'color', 'size', 'children']);
-  return React.createElement(level, _extends({}, safeRest(rest), {
-    className: joinClassNames(size, color)
+      rest = objectWithoutProperties(_ref, ['level', 'tag', 'invert', 'children']);
+
+  return React.createElement(tag, _extends({}, safeRest(rest), {
+    className: joinClassNames(styles[level], getClassNames(invert, level))
   }), children);
 };
 
-BaseHeading.propTypes = {
-  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
-  color: PropTypes.string.isRequired,
-  size: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
-
-  /**
-   * Page headings. Renders an HTML `<h1-h4>` element.
-   *
-   * @version ./package.json
-   */
-};var Heading = function Heading(_ref2) {
-  var level = _ref2.level,
-      invert = _ref2.invert,
-      children = _ref2.children,
-      rest = objectWithoutProperties(_ref2, ['level', 'invert', 'children']);
-
-  var baseHeadingProps = _extends({}, rest, {
-    level: level
-  });
-
-  if (level === 'h1' || level === 'h2') {
-    var color = invert ? styles.inverted : styles.secondary;
-
-    return React.createElement(
-      BaseHeading,
-      _extends({}, baseHeadingProps, { color: color, size: styles[level] }),
-      children
-    );
-  }
-
-  return React.createElement(
-    BaseHeading,
-    _extends({}, baseHeadingProps, {
-      color: invert ? styles.inverted : styles.default,
-      size: styles[level]
-    }),
-    children
-  );
-};
-
 Heading.propTypes = {
   /**
-   * The heading level.
+   * The visual level of the heading. If `tag` is not specified, then `level` determines what HTML element to render.
    */
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
   /**
+   * The semantic level of the heading. Renders the specified HTML element, otherwise it matches `level`.
+   */
+  tag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
+  /**
    * Invert the text color to appear light on dark backgrounds.
@@ -136,3 +116,3 @@ */
   /**
-   * The text. Can be text, other components, or HTML elements.
+   * The content. Can be text, other components, or HTML elements.
    */
@@ -142,3 +122,4 @@ children: PropTypes.node.isRequired
 Heading.defaultProps = {
-  invert: false
+  invert: false,
+  tag: undefined
 };
@@ -145,0 +126,0 @@

Heading.jsx

@@ -11,17 +11,10 @@ import React from 'react'
 
-const BaseHeading = ({ level, color, size, children, ...rest }) =>
-  React.createElement(
-    level,
-    {
-      ...safeRest(rest),
-      className: joinClassNames(size, color),
-    },
-    children
-  )
-
-BaseHeading.propTypes = {
-  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
-  color: PropTypes.string.isRequired,
-  size: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
+const getClassNames = (invert, level) => {
+  if (invert) {
+    return styles.inverted
+  }
+  if (level === 'h1' || level === 'h2') {
+    return styles.secondary
+  }
+  return styles.default
 }
@@ -34,26 +27,10 @@
  */
-const Heading = ({ level, invert, children, ...rest }) => {
-  const baseHeadingProps = {
-    ...rest,
-    level,
-  }
-
-  if (level === 'h1' || level === 'h2') {
-    const color = invert ? styles.inverted : styles.secondary
-
-    return (
-      <BaseHeading {...baseHeadingProps} color={color} size={styles[level]}>
-        {children}
-      </BaseHeading>
-    )
-  }
-
-  return (
-    <BaseHeading
-      {...baseHeadingProps}
-      color={invert ? styles.inverted : styles.default}
-      size={styles[level]}
-    >
-      {children}
-    </BaseHeading>
+const Heading = ({ level, tag = level, invert, children, ...rest }) => {
+  return React.createElement(
+    tag,
+    {
+      ...safeRest(rest),
+      className: joinClassNames(styles[level], getClassNames(invert, level)),
+    },
+    children
   )
@@ -64,6 +41,10 @@ }
   /**
-   * The heading level.
+   * The visual level of the heading. If `tag` is not specified, then `level` determines what HTML element to render.
    */
   level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']).isRequired,
   /**
+   * The semantic level of the heading. Renders the specified HTML element, otherwise it matches `level`.
+   */
+  tag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4']),
+  /**
    * Invert the text color to appear light on dark backgrounds.
@@ -73,3 +54,3 @@ */
   /**
-   * The text. Can be text, other components, or HTML elements.
+   * The content. Can be text, other components, or HTML elements.
    */
@@ -80,2 +61,3 @@ children: PropTypes.node.isRequired,
   invert: false,
+  tag: undefined,
 }
@@ -82,0 +64,0 @@

Heading.md

@@ -5,4 +5,10 @@ ```jsx
   <Heading level="h2">Heading level 2</Heading>
+  <Heading level="h2" tag="h3">
+    Heading level 2 tag 3
+  </Heading>
   <Heading level="h3">Heading level 3</Heading>
   <Heading level="h4">Heading level 4</Heading>
+  <Heading level="h4" tag="h3">
+    Heading level 4 tag 3
+  </Heading>
 </Box>
@@ -14,6 +20,7 @@ ```
 * Be mindful of SEO and accessibility
-* Organise headers in a nested order: h1, then h2, then h3
+* Organize headers in a nested order: h1, then h2, then h3
 * Try **not** to skip levels where possible: h1, then h3
 * Use one h1 per page
+* The semantic HTML tag and visual appearance of the Heading component can be controlled using the `level` and `tag` props together
 * For Hero overlays, Headlines, or Promo blocks, use [`DisplayHeading`](#displayheading)
 * For subtext in the Hero overlays, or Headlines, use [`Text`](#text)

package.json

 {
   "name": "@tds/core-heading",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Page headings",
@@ -5,0 +5,0 @@ "main": "index.cjs.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

35723

decreased by-2.63%

Lines of code

511

decreased by-6.41%

No dependency changes