@govuk-react/caption - npm Package Compare versions

Comparing version 0.8.0 to 0.9.0

es/index.js

@@ -45,3 +45,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  * Simple
+ *
  * ```jsx
+ * import { Caption } from 'govuk-react'
+ *
  * <Caption>Caption heading text</Caption>
@@ -51,4 +54,5 @@ * ```
  * With another header
+ *
  * ```jsx
- * import { H1 } from '@govuk-react/heading';
+ * import { H1 } from 'govuk-react'
  *
@@ -60,3 +64,3 @@ * <Caption size="XL">Supporting header text</Caption>
  * ### References
- * - https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
+ * - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/core/_typography.scss
  * - https://design-system.service.gov.uk/styles/typography/#headings
@@ -63,0 +67,0 @@ */

es/stories.js

 import React from 'react';
 import { CAPTION_SIZES, HEADING_SIZES, TYPOGRAPHY_SCALE } from '@govuk-react/constants';
-import { storiesOf } from '@storybook/react';
 import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { withDocsCustom } from '@govuk-react/storybook-components';
 import Heading from '@govuk-react/heading';
-import Caption, { CaptionWithKnobs } from './fixtures';
-import ReadMe from '../README.md';
-var stories = storiesOf('Typography/Caption', module);
-var examples = storiesOf('Typography/Caption/Examples', module);
-stories.addDecorator(withKnobs);
-stories.addDecorator(withDocsCustom(ReadMe));
-examples.addDecorator(withKnobs);
-stories.add('Component default', function () {
+import { CaptionWithKnobs } from './fixtures';
+import Caption from '.';
+export default {
+  title: 'Typography/Caption',
+  component: Caption,
+  decorators: [withKnobs]
+};
+export var Default = function Default() {
   return /*#__PURE__*/React.createElement(CaptionWithKnobs, null);
-});
+};
 var arrTypography = Object.keys(TYPOGRAPHY_SCALE);
 var captionOptions = [].concat(Object.keys(CAPTION_SIZES), arrTypography);
 var headingOptions = [].concat(Object.keys(HEADING_SIZES), arrTypography);
-examples.add('Placed with a heading component', function () {
+export var PlacedWithAHeadingComponent = function PlacedWithAHeadingComponent() {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Caption, {
@@ -26,4 +24,4 @@ size: select('size', captionOptions, 'XL')
   }, text('heading', 'Main heading text')));
-});
-examples.add('Placed inside a heading component', function () {
+};
+export var PlacedInsideAHeadingComponent = function PlacedInsideAHeadingComponent() {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Heading, {
@@ -34,4 +32,4 @@ size: select('heading size', headingOptions, 'XL')
   }, text('children', 'Supporting heading text')), text('heading', 'Main heading text')));
-});
-examples.add('Showing all standard caption sizes, with headings', function () {
+};
+export var ShowingAllStandardCaptionSizesWithHeadings = function ShowingAllStandardCaptionSizesWithHeadings() {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Caption, {
@@ -50,3 +48,3 @@ size: "XL"
   }, "Main heading size M"));
-});
+};
 //# sourceMappingURL=stories.js.map

lib/index.js

@@ -58,3 +58,6 @@ "use strict";
  * Simple
+ *
  * ```jsx
+ * import { Caption } from 'govuk-react'
+ *
  * <Caption>Caption heading text</Caption>
@@ -64,4 +67,5 @@ * ```
  * With another header
+ *
  * ```jsx
- * import { H1 } from '@govuk-react/heading';
+ * import { H1 } from 'govuk-react'
  *
@@ -73,3 +77,3 @@ * <Caption size="XL">Supporting header text</Caption>
  * ### References
- * - https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
+ * - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/core/_typography.scss
  * - https://design-system.service.gov.uk/styles/typography/#headings
@@ -76,0 +80,0 @@ */

lib/stories.js

 "use strict";
 
+exports.__esModule = true;
+exports.ShowingAllStandardCaptionSizesWithHeadings = exports.PlacedInsideAHeadingComponent = exports.PlacedWithAHeadingComponent = exports.Default = exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
@@ -7,33 +10,30 @@
 
-var _react2 = require("@storybook/react");
-
 var _addonKnobs = require("@storybook/addon-knobs");
 
-var _storybookComponents = require("@govuk-react/storybook-components");
-
 var _heading = _interopRequireDefault(require("@govuk-react/heading"));
 
-var _fixtures = _interopRequireWildcard(require("./fixtures"));
+var _fixtures = require("./fixtures");
 
-var _README = _interopRequireDefault(require("../README.md"));
+var _ = _interopRequireDefault(require("."));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = {
+  title: 'Typography/Caption',
+  component: _["default"],
+  decorators: [_addonKnobs.withKnobs]
+};
+exports["default"] = _default;
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_fixtures.CaptionWithKnobs, null);
+};
 
-var stories = (0, _react2.storiesOf)('Typography/Caption', module);
-var examples = (0, _react2.storiesOf)('Typography/Caption/Examples', module);
-stories.addDecorator(_addonKnobs.withKnobs);
-stories.addDecorator((0, _storybookComponents.withDocsCustom)(_README["default"]));
-examples.addDecorator(_addonKnobs.withKnobs);
-stories.add('Component default', function () {
-  return /*#__PURE__*/_react["default"].createElement(_fixtures.CaptionWithKnobs, null);
-});
+exports.Default = Default;
 var arrTypography = Object.keys(_constants.TYPOGRAPHY_SCALE);
 var captionOptions = [].concat(Object.keys(_constants.CAPTION_SIZES), arrTypography);
 var headingOptions = [].concat(Object.keys(_constants.HEADING_SIZES), arrTypography);
-examples.add('Placed with a heading component', function () {
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_fixtures["default"], {
+
+var PlacedWithAHeadingComponent = function PlacedWithAHeadingComponent() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: (0, _addonKnobs.select)('size', captionOptions, 'XL')
@@ -43,20 +43,26 @@ }, (0, _addonKnobs.text)('children', 'Supporting heading text')), /*#__PURE__*/_react["default"].createElement(_heading["default"], {
   }, (0, _addonKnobs.text)('heading', 'Main heading text')));
-});
-examples.add('Placed inside a heading component', function () {
+};
+
+exports.PlacedWithAHeadingComponent = PlacedWithAHeadingComponent;
+
+var PlacedInsideAHeadingComponent = function PlacedInsideAHeadingComponent() {
   return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_heading["default"], {
     size: (0, _addonKnobs.select)('heading size', headingOptions, 'XL')
-  }, /*#__PURE__*/_react["default"].createElement(_fixtures["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: (0, _addonKnobs.select)('size', captionOptions, 'XL')
   }, (0, _addonKnobs.text)('children', 'Supporting heading text')), (0, _addonKnobs.text)('heading', 'Main heading text')));
-});
-examples.add('Showing all standard caption sizes, with headings', function () {
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_fixtures["default"], {
+};
+
+exports.PlacedInsideAHeadingComponent = PlacedInsideAHeadingComponent;
+
+var ShowingAllStandardCaptionSizesWithHeadings = function ShowingAllStandardCaptionSizesWithHeadings() {
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: "XL"
   }, "Supporting heading size XL"), /*#__PURE__*/_react["default"].createElement(_heading["default"], {
     size: "XL"
-  }, "Main heading size XL"), /*#__PURE__*/_react["default"].createElement(_fixtures["default"], {
+  }, "Main heading size XL"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: "L"
   }, "Supporting heading size L"), /*#__PURE__*/_react["default"].createElement(_heading["default"], {
     size: "L"
-  }, "Main heading size L"), /*#__PURE__*/_react["default"].createElement(_fixtures["default"], {
+  }, "Main heading size L"), /*#__PURE__*/_react["default"].createElement(_["default"], {
     size: "M"
@@ -66,3 +72,5 @@ }, "Supporting heading size M"), /*#__PURE__*/_react["default"].createElement(_heading["default"], {
   }, "Main heading size M"));
-});
+};
+
+exports.ShowingAllStandardCaptionSizesWithHeadings = ShowingAllStandardCaptionSizesWithHeadings;
 //# sourceMappingURL=stories.js.map

package.json

 {
   "name": "@govuk-react/caption",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "dependencies": {
-    "@govuk-react/constants": "^0.8.0",
-    "@govuk-react/lib": "^0.8.0",
+    "@govuk-react/constants": "^0.9.0",
+    "@govuk-react/lib": "^0.9.0",
     "govuk-colours": "^1.1.0"
@@ -23,3 +23,3 @@ },
   "license": "MIT",
-  "homepage": "https://github.com/govuk-react/govuk-react/tree/master/components/caption",
+  "homepage": "https://github.com/govuk-react/govuk-react/tree/main/components/caption",
   "description": "Renders children passed inside a styled span element.",
@@ -26,0 +26,0 @@ "private": false,

README.md

@@ -13,3 +13,6 @@ Caption
 Simple
+
 ```jsx
+import { Caption } from 'govuk-react'
+
 <Caption>Caption heading text</Caption>
@@ -19,4 +22,5 @@ ```
 With another header
+
 ```jsx
-import { H1 } from '@govuk-react/heading';
+import { H1 } from 'govuk-react'
 
@@ -28,3 +32,3 @@ <Caption size="XL">Supporting header text</Caption>
 ### References
-- https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
+- https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/core/_typography.scss
 - https://design-system.service.gov.uk/styles/typography/#headings
@@ -31,0 +35,0 @@

src/index.js

@@ -42,3 +42,6 @@ import styled from 'styled-components';
  * Simple
+ *
  * ```jsx
+ * import { Caption } from 'govuk-react'
+ *
  * <Caption>Caption heading text</Caption>
@@ -48,4 +51,5 @@ * ```
  * With another header
+ *
  * ```jsx
- * import { H1 } from '@govuk-react/heading';
+ * import { H1 } from 'govuk-react'
  *
@@ -57,6 +61,6 @@ * <Caption size="XL">Supporting header text</Caption>
  * ### References
- * - https://github.com/alphagov/govuk-frontend/blob/master/src/core/_typography.scss
+ * - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/core/_typography.scss
  * - https://design-system.service.gov.uk/styles/typography/#headings
  */
-const Caption = props => <StyledCaption {...props} />;
+const Caption = (props) => <StyledCaption {...props} />;
 
@@ -63,0 +67,0 @@ Caption.propTypes = {

src/stories.js

 import React from 'react';
 import { CAPTION_SIZES, HEADING_SIZES, TYPOGRAPHY_SCALE } from '@govuk-react/constants';
-import { storiesOf } from '@storybook/react';
 import { select, text, withKnobs } from '@storybook/addon-knobs';
-import { withDocsCustom } from '@govuk-react/storybook-components';
-
 import Heading from '@govuk-react/heading';
 
-import Caption, { CaptionWithKnobs } from './fixtures';
-import ReadMe from '../README.md';
+import { CaptionWithKnobs } from './fixtures';
+import Caption from '.';
 
-const stories = storiesOf('Typography/Caption', module);
-const examples = storiesOf('Typography/Caption/Examples', module);
+export default {
+  title: 'Typography/Caption',
+  component: Caption,
+  decorators: [withKnobs],
+};
 
-stories.addDecorator(withKnobs);
-stories.addDecorator(withDocsCustom(ReadMe));
-examples.addDecorator(withKnobs);
+export const Default = () => <CaptionWithKnobs />;
 
-stories.add('Component default', () => <CaptionWithKnobs />);
-
 const arrTypography = Object.keys(TYPOGRAPHY_SCALE);
@@ -25,3 +21,3 @@ const captionOptions = [...Object.keys(CAPTION_SIZES), ...arrTypography];
 
-examples.add('Placed with a heading component', () => (
+export const PlacedWithAHeadingComponent = () => (
   <div>
@@ -31,5 +27,5 @@ <Caption size={select('size', captionOptions, 'XL')}>{text('children', 'Supporting heading text')}</Caption>
   </div>
-));
+);
 
-examples.add('Placed inside a heading component', () => (
+export const PlacedInsideAHeadingComponent = () => (
   <div>
@@ -41,5 +37,5 @@ <Heading size={select('heading size', headingOptions, 'XL')}>
   </div>
-));
+);
 
-examples.add('Showing all standard caption sizes, with headings', () => (
+export const ShowingAllStandardCaptionSizesWithHeadings = () => (
   <div>
@@ -53,2 +49,2 @@ <Caption size="XL">Supporting heading size XL</Caption>
   </div>
-));
+);

src/test.js

@@ -23,3 +23,3 @@ import React from 'react';
     const sizes = ['XL', 'XLARGE', 'L', 'LARGE', 'M', 'MEDIUM'];
-    sizes.forEach(size => {
+    sizes.forEach((size) => {
       expect(mount(<Caption size={size}>Tests</Caption>).exists()).toBeTruthy();
@@ -26,0 +26,0 @@ });

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

Improved metrics

Lines of code

534

increased by1.52%

Number of lines in readme file

40

increased by11.11%

Worsened metrics

Total package byte prevSize

46945

decreased by-4.08%

Dependency changes

• + Added@govuk-react/constants@0.9.1(transitive)

• + Added@govuk-react/lib@0.9.1(transitive)

• - Removed@govuk-react/constants@0.8.0(transitive)

• - Removed@govuk-react/lib@0.8.0(transitive)

• Updated@govuk-react/constants@^0.9.0

• Updated@govuk-react/lib@^0.9.0