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

Comparing version 0.8.0 to 0.9.0

es/index.js

@@ -6,3 +6,3 @@ import styled from 'styled-components';
 // TODO add support for differing font sizes, as per govuk-frontend - see:
-// https://github.com/alphagov/govuk-frontend/blob/master/src/components/label/_label.scss
+// https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/label/_label.scss
 
@@ -30,10 +30,23 @@ var StyledLabelText = styled('span').withConfig({
  *
+ * Styled text to use as a label for a form input.
+ *
+ * This is not a label element by default as it is assumed it will be wrap with Label.
+ *
  * Simple
+ *
  * ```jsx
- * <LabelText>Example</LabelText>
+ * import { Label, LabelText, HintText, ErrorText, Input } from 'govuk-react'
+ *
+ * <Label>
+ *   <LabelText>Example label</LabelText>
+ *   <HintText>Example hint</HintText>
+ *   <ErrorText>Example error</ErrorText>
+ *   <Input value={value} onClick={onClick} />
+ * </Label>
  * ```
  *
  * ### References:
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
  *
+ * - https://github.com/alphagov/govuk-frontend/tree/main/src/govuk/components/
+ *
  */
@@ -40,0 +53,0 @@

es/stories.js

 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withDocsCustom } from '@govuk-react/storybook-components';
 import LabelText from '.';
-import ReadMe from '../README.md';
-var stories = storiesOf('Form/LabelText', module);
-stories.addDecorator(withDocsCustom(ReadMe));
-stories.add('Component default', function () {
+export default {
+  title: 'Form/Label text',
+  component: LabelText
+};
+export var Default = function Default() {
   return /*#__PURE__*/React.createElement(LabelText, null, "Example");
-});
+};
 //# sourceMappingURL=stories.js.map

lib/index.js

@@ -18,3 +18,3 @@ "use strict";
 // TODO add support for differing font sizes, as per govuk-frontend - see:
-// https://github.com/alphagov/govuk-frontend/blob/master/src/components/label/_label.scss
+// https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/label/_label.scss
 var StyledLabelText = (0, _styledComponents["default"])('span').withConfig({
@@ -41,10 +41,23 @@ displayName: "src__StyledLabelText",
  *
+ * Styled text to use as a label for a form input.
+ *
+ * This is not a label element by default as it is assumed it will be wrap with Label.
+ *
  * Simple
+ *
  * ```jsx
- * <LabelText>Example</LabelText>
+ * import { Label, LabelText, HintText, ErrorText, Input } from 'govuk-react'
+ *
+ * <Label>
+ *   <LabelText>Example label</LabelText>
+ *   <HintText>Example hint</HintText>
+ *   <ErrorText>Example error</ErrorText>
+ *   <Input value={value} onClick={onClick} />
+ * </Label>
  * ```
  *
  * ### References:
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
  *
+ * - https://github.com/alphagov/govuk-frontend/tree/main/src/govuk/components/
+ *
  */
@@ -51,0 +64,0 @@

lib/stories.js

 "use strict";
 
+exports.__esModule = true;
+exports.Default = exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
 
-var _react2 = require("@storybook/react");
-
-var _storybookComponents = require("@govuk-react/storybook-components");
-
 var _ = _interopRequireDefault(require("."));
 
-var _README = _interopRequireDefault(require("../README.md"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var stories = (0, _react2.storiesOf)('Form/LabelText', module);
-stories.addDecorator((0, _storybookComponents.withDocsCustom)(_README["default"]));
-stories.add('Component default', function () {
+var _default = {
+  title: 'Form/Label text',
+  component: _["default"]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
   return /*#__PURE__*/_react["default"].createElement(_["default"], null, "Example");
-});
+};
+
+exports.Default = Default;
 //# sourceMappingURL=stories.js.map

package.json

 {
   "name": "@govuk-react/label-text",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "dependencies": {
-    "@govuk-react/lib": "^0.8.0"
+    "@govuk-react/lib": "^0.9.0"
   },
@@ -21,3 +21,3 @@ "peerDependencies": {
   "license": "MIT",
-  "homepage": "https://github.com/govuk-react/govuk-react/tree/master/components/label-text",
+  "homepage": "https://github.com/govuk-react/govuk-react/tree/main/components/label-text",
   "description": "Styled span element with children displayed as text.",
@@ -24,0 +24,0 @@ "private": false,

README.md

@@ -12,10 +12,23 @@ LabelText
 
+Styled text to use as a label for a form input.
+
+This is not a label element by default as it is assumed it will be wrap with Label.
+
 Simple
+
 ```jsx
-<LabelText>Example</LabelText>
+import { Label, LabelText, HintText, ErrorText, Input } from 'govuk-react'
+
+<Label>
+  <LabelText>Example label</LabelText>
+  <HintText>Example hint</HintText>
+  <ErrorText>Example error</ErrorText>
+  <Input value={value} onClick={onClick} />
+</Label>
 ```
 
 ### References:
-- https://github.com/alphagov/govuk-frontend/tree/master/src/components/
 
+- https://github.com/alphagov/govuk-frontend/tree/main/src/govuk/components/
+
 ### Properties
@@ -22,0 +35,0 @@ Prop | Required | Default | Type | Description

src/index.js

@@ -8,3 +8,3 @@ import styled from 'styled-components';
 // TODO add support for differing font sizes, as per govuk-frontend - see:
-// https://github.com/alphagov/govuk-frontend/blob/master/src/components/label/_label.scss
+// https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/label/_label.scss
 
@@ -29,12 +29,25 @@ const StyledLabelText = styled('span')(
  *
+ * Styled text to use as a label for a form input.
+ *
+ * This is not a label element by default as it is assumed it will be wrap with Label.
+ *
  * Simple
+ *
  * ```jsx
- * <LabelText>Example</LabelText>
+ * import { Label, LabelText, HintText, ErrorText, Input } from 'govuk-react'
+ *
+ * <Label>
+ *   <LabelText>Example label</LabelText>
+ *   <HintText>Example hint</HintText>
+ *   <ErrorText>Example error</ErrorText>
+ *   <Input value={value} onClick={onClick} />
+ * </Label>
  * ```
  *
  * ### References:
- * - https://github.com/alphagov/govuk-frontend/tree/master/src/components/
  *
+ * - https://github.com/alphagov/govuk-frontend/tree/main/src/govuk/components/
+ *
  */
-const LabelText = props => <StyledLabelText {...props} />;
+const LabelText = (props) => <StyledLabelText {...props} />;
 
@@ -41,0 +54,0 @@ LabelText.propTypes = {

src/stories.js

 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withDocsCustom } from '@govuk-react/storybook-components';
 
 import LabelText from '.';
-import ReadMe from '../README.md';
 
-const stories = storiesOf('Form/LabelText', module);
+export default {
+  title: 'Form/Label text',
+  component: LabelText,
+};
 
-stories.addDecorator(withDocsCustom(ReadMe));
-
-stories.add('Component default', () => <LabelText>Example</LabelText>);
+export const Default = () => <LabelText>Example</LabelText>;

No alert changes

Improved metrics

Total package byte prevSize

22968

increased by6.45%

Lines of code

286

increased by16.26%

Number of lines in readme file

39

increased by50%

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/lib@^0.9.0