@govuk-react/hint-text - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

es/index.js

@@ -1,3 +0,1 @@
-var _styled;
-
 // https://github.com/alphagov/govuk-frontend/tree/master/src/components/
@@ -7,5 +5,6 @@ import styled from 'react-emotion';
 import PropTypes from 'prop-types';
-import * as COLOUR from 'govuk-colours';
+import { SECONDARY_TEXT_COLOUR } from 'govuk-colours';
+import { SPACING_POINTS } from '@govuk-react/constants';
 import { withWhiteSpace } from '@govuk-react/hoc';
-import { FONT_SIZE, LINE_HEIGHT, MEDIA_QUERIES, NTA_LIGHT } from '@govuk-react/constants';
+import { typography } from '@govuk-react/lib';
 var StyledHint =
@@ -16,15 +15,12 @@ /*#__PURE__*/
   label: "StyledHint"
-})((_styled = {
+})(typography.font({
+  size: 19
+}), {
   display: 'block',
-  fontFamily: NTA_LIGHT,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  fontWeight: 400,
-  textTransform: 'none',
-  fontSize: FONT_SIZE.SIZE_16,
-  lineHeight: LINE_HEIGHT.SIZE_16
-}, _styled[MEDIA_QUERIES.LARGESCREEN] = {
-  fontSize: FONT_SIZE.SIZE_19,
-  lineHeight: LINE_HEIGHT.SIZE_19
-}, _styled.color = "" + COLOUR.GREY_1, _styled));
+  // NB non-responsive marginBottom here
+  marginBottom: SPACING_POINTS[3],
+  color: "" + SECONDARY_TEXT_COLOUR
+}); // NB govuk-frontend has styling adjustments for when hint-text is placed next to some other
+// components - we have not tried to replicate that here
+
 /**
@@ -41,3 +37,3 @@ *
  * ### References
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss
  */
@@ -49,5 +45,3 @@
 
-export default withWhiteSpace({
-  marginBottom: 0
-})(HintText);
+export default withWhiteSpace()(HintText);
 //# sourceMappingURL=index.js.map

lib/index.js

@@ -12,14 +12,13 @@ "use strict";
 
-var COLOUR = _interopRequireWildcard(require("govuk-colours"));
+var _govukColours = require("govuk-colours");
 
-var _hoc = require("@govuk-react/hoc");
-
 var _constants = require("@govuk-react/constants");
 
-var _styled;
+var _hoc = require("@govuk-react/hoc");
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+var _lib = require("@govuk-react/lib");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+// https://github.com/alphagov/govuk-frontend/tree/master/src/components/
 var StyledHint =
@@ -30,15 +29,12 @@ /*#__PURE__*/
   label: "StyledHint"
-})((_styled = {
+})(_lib.typography.font({
+  size: 19
+}), {
   display: 'block',
-  fontFamily: _constants.NTA_LIGHT,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  fontWeight: 400,
-  textTransform: 'none',
-  fontSize: _constants.FONT_SIZE.SIZE_16,
-  lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _styled[_constants.MEDIA_QUERIES.LARGESCREEN] = {
-  fontSize: _constants.FONT_SIZE.SIZE_19,
-  lineHeight: _constants.LINE_HEIGHT.SIZE_19
-}, _styled.color = "" + COLOUR.GREY_1, _styled));
+  // NB non-responsive marginBottom here
+  marginBottom: _constants.SPACING_POINTS[3],
+  color: "" + _govukColours.SECONDARY_TEXT_COLOUR
+}); // NB govuk-frontend has styling adjustments for when hint-text is placed next to some other
+// components - we have not tried to replicate that here
+
 /**
@@ -55,3 +51,3 @@ *
  * ### References
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss
  */
@@ -63,5 +59,3 @@
 
-var _default = (0, _hoc.withWhiteSpace)({
-  marginBottom: 0
-})(HintText);
+var _default = (0, _hoc.withWhiteSpace)()(HintText);
 
@@ -68,0 +62,0 @@ exports.default = _default;

package.json

 {
   "name": "@govuk-react/hint-text",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "dependencies": {
-    "@govuk-react/constants": "^0.5.0",
-    "@govuk-react/hoc": "^0.5.0",
+    "@govuk-react/constants": "^0.5.1",
+    "@govuk-react/hoc": "^0.5.1",
+    "@govuk-react/lib": "^0.5.1",
     "govuk-colours": "^1.0.3"
@@ -8,0 +9,0 @@ },

README.md

@@ -19,3 +19,3 @@ HintText
 ### References
-- https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+- https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss
 
@@ -22,0 +22,0 @@ ### Properties

src/index.js

@@ -6,27 +6,20 @@ // https://github.com/alphagov/govuk-frontend/tree/master/src/components/
 import PropTypes from 'prop-types';
-import * as COLOUR from 'govuk-colours';
+import { SECONDARY_TEXT_COLOUR } from 'govuk-colours';
+import { SPACING_POINTS } from '@govuk-react/constants';
 import { withWhiteSpace } from '@govuk-react/hoc';
-import {
-  FONT_SIZE,
-  LINE_HEIGHT,
-  MEDIA_QUERIES,
-  NTA_LIGHT,
-} from '@govuk-react/constants';
+import { typography } from '@govuk-react/lib';
 
-const StyledHint = styled('span')({
-  display: 'block',
-  fontFamily: NTA_LIGHT,
-  WebkitFontSmoothing: 'antialiased',
-  MozOsxFontSmoothing: 'grayscale',
-  fontWeight: 400,
-  textTransform: 'none',
-  fontSize: FONT_SIZE.SIZE_16,
-  lineHeight: LINE_HEIGHT.SIZE_16,
-  [MEDIA_QUERIES.LARGESCREEN]: {
-    fontSize: FONT_SIZE.SIZE_19,
-    lineHeight: LINE_HEIGHT.SIZE_19,
+const StyledHint = styled('span')(
+  typography.font({ size: 19 }),
+  {
+    display: 'block',
+    // NB non-responsive marginBottom here
+    marginBottom: SPACING_POINTS[3],
+    color: `${SECONDARY_TEXT_COLOUR}`,
   },
-  color: `${COLOUR.GREY_1}`,
-});
+);
 
+// NB govuk-frontend has styling adjustments for when hint-text is placed next to some other
+// components - we have not tried to replicate that here
+
 /**
@@ -43,3 +36,3 @@ *
  * ### References
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
+ * - https://github.com/alphagov/govuk-frontend/blob/master/src/components/hint/_hint.scss
  */
@@ -53,2 +46,2 @@ const HintText = props => <StyledHint {...props} />;
 
-export default withWhiteSpace({ marginBottom: 0 })(HintText);
+export default withWhiteSpace()(HintText);

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

17510

decreased by-15.37%

Dependency count

7

increased by16.67%

Number of package files

18

decreased by-5.26%

Lines of code

201

decreased by-9.46%

Dependency changes

• + Added@govuk-react/lib@^0.5.1

• Updated@govuk-react/constants@^0.5.1

• Updated@govuk-react/hoc@^0.5.1