🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@govuk-react/checkbox

Package Overview
Dependencies
Maintainers
5
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@govuk-react/checkbox - npm Package Compare versions

Comparing version

to
0.9.0

13

es/index.js

@@ -105,3 +105,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 { Checkbox } from 'govuk-react'
*
* <Checkbox>Text displayed next to checkbox</Checkbox>

@@ -111,2 +114,3 @@ * ```

* With disabled state
*
* ```jsx

@@ -117,2 +121,3 @@ * <Checkbox disabled="disabled">Disabled checkbox option</Checkbox>

* Checkbox preselected
*
* ```jsx

@@ -123,2 +128,3 @@ * <Checkbox defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox preselected & disabled
*
* ```jsx

@@ -129,8 +135,11 @@ * <Checkbox disabled="disabled" defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox with hint text
*
* ```jsx
* <Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>
*```
* ```
*
* ### References:
* - https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/_checkboxes.scss
*
* - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/checkboxes/_checkboxes.scss
*
*/

@@ -137,0 +146,0 @@

30

es/stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withDocsCustom } from '@govuk-react/storybook-components';
import Checkbox from '.';
import ReadMe from '../README.md';
var stories = storiesOf('Form/Checkbox', module);
var examples = storiesOf('Form/Checkbox/Examples', module);
stories.addDecorator(withDocsCustom(ReadMe));
stories.add('Component default', function () {
export default {
title: 'Form/Checkbox',
component: Checkbox
};
export var Default = function Default() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, null, "Waste from animal carcasses"), /*#__PURE__*/React.createElement(Checkbox, null, "Waste from mines or quarries"), /*#__PURE__*/React.createElement(Checkbox, null, "Farm or agricultural waste"));
});
examples.add('Checkbox disabled', function () {
};
export var CheckboxDisabled = function CheckboxDisabled() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
disabled: "disabled"
}, "Disabled checkbox option"));
});
examples.add('Checkbox preselected', function () {
};
export var CheckboxPreselected = function CheckboxPreselected() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
defaultChecked: true
}, "Farm or agricultural waste"));
});
examples.add('Checkbox preselected & disabled', function () {
};
export var CheckboxPreselectedDisabled = function CheckboxPreselectedDisabled() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {

@@ -27,8 +25,8 @@ disabled: "disabled",

}, "Farm or agricultural waste"));
});
examples.add('Checkbox with hint text', function () {
};
export var CheckboxWithHintText = function CheckboxWithHintText() {
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
hint: "including English, Scottish, Welsh and Northern Irish"
}, "British"), /*#__PURE__*/React.createElement(Checkbox, null, "Irish"), /*#__PURE__*/React.createElement(Checkbox, null, "Citizen of another country"));
});
};
//# sourceMappingURL=stories.js.map

@@ -119,3 +119,6 @@ "use strict";

* Simple
*
* ```jsx
* import { Checkbox } from 'govuk-react'
*
* <Checkbox>Text displayed next to checkbox</Checkbox>

@@ -125,2 +128,3 @@ * ```

* With disabled state
*
* ```jsx

@@ -131,2 +135,3 @@ * <Checkbox disabled="disabled">Disabled checkbox option</Checkbox>

* Checkbox preselected
*
* ```jsx

@@ -137,2 +142,3 @@ * <Checkbox defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox preselected & disabled
*
* ```jsx

@@ -143,8 +149,11 @@ * <Checkbox disabled="disabled" defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox with hint text
*
* ```jsx
* <Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>
*```
* ```
*
* ### References:
* - https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/_checkboxes.scss
*
* - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/checkboxes/_checkboxes.scss
*
*/

@@ -151,0 +160,0 @@

"use strict";
exports.__esModule = true;
exports.CheckboxWithHintText = exports.CheckboxPreselectedDisabled = exports.CheckboxPreselected = exports.CheckboxDisabled = exports.Default = exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _ = _interopRequireDefault(require("."));
var _storybookComponents = require("@govuk-react/storybook-components");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var _ = _interopRequireDefault(require("."));
var _default = {
title: 'Form/Checkbox',
component: _["default"]
};
exports["default"] = _default;
var _README = _interopRequireDefault(require("../README.md"));
var Default = function Default() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], null, "Waste from animal carcasses"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Waste from mines or quarries"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Farm or agricultural waste"));
};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
exports.Default = Default;
var stories = (0, _react2.storiesOf)('Form/Checkbox', module);
var examples = (0, _react2.storiesOf)('Form/Checkbox/Examples', module);
stories.addDecorator((0, _storybookComponents.withDocsCustom)(_README["default"]));
stories.add('Component default', function () {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], null, "Waste from animal carcasses"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Waste from mines or quarries"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Farm or agricultural waste"));
});
examples.add('Checkbox disabled', function () {
var CheckboxDisabled = function CheckboxDisabled() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
disabled: "disabled"
}, "Disabled checkbox option"));
});
examples.add('Checkbox preselected', function () {
};
exports.CheckboxDisabled = CheckboxDisabled;
var CheckboxPreselected = function CheckboxPreselected() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
defaultChecked: true
}, "Farm or agricultural waste"));
});
examples.add('Checkbox preselected & disabled', function () {
};
exports.CheckboxPreselected = CheckboxPreselected;
var CheckboxPreselectedDisabled = function CheckboxPreselectedDisabled() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {

@@ -36,8 +45,13 @@ disabled: "disabled",

}, "Farm or agricultural waste"));
});
examples.add('Checkbox with hint text', function () {
};
exports.CheckboxPreselectedDisabled = CheckboxPreselectedDisabled;
var CheckboxWithHintText = function CheckboxWithHintText() {
return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_["default"], {
hint: "including English, Scottish, Welsh and Northern Irish"
}, "British"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Irish"), /*#__PURE__*/_react["default"].createElement(_["default"], null, "Citizen of another country"));
});
};
exports.CheckboxWithHintText = CheckboxWithHintText;
//# sourceMappingURL=stories.js.map
{
"name": "@govuk-react/checkbox",
"version": "0.8.0",
"version": "0.9.0",
"dependencies": {
"@govuk-react/constants": "^0.8.0",
"@govuk-react/hint-text": "^0.8.0",
"@govuk-react/hoc": "^0.8.0",
"@govuk-react/lib": "^0.8.0",
"@govuk-react/constants": "^0.9.0",
"@govuk-react/hint-text": "^0.9.0",
"@govuk-react/hoc": "^0.9.0",
"@govuk-react/lib": "^0.9.0",
"govuk-colours": "^1.1.0"

@@ -25,3 +25,3 @@ },

"license": "MIT",
"homepage": "https://github.com/govuk-react/govuk-react/tree/master/components/checkbox",
"homepage": "https://github.com/govuk-react/govuk-react/tree/main/components/checkbox",
"description": "Styled checkbox component, also displaying label.",

@@ -28,0 +28,0 @@ "private": false,

@@ -13,3 +13,6 @@ Checkbox

Simple
```jsx
import { Checkbox } from 'govuk-react'
<Checkbox>Text displayed next to checkbox</Checkbox>

@@ -19,2 +22,3 @@ ```

With disabled state
```jsx

@@ -25,2 +29,3 @@ <Checkbox disabled="disabled">Disabled checkbox option</Checkbox>

Checkbox preselected
```jsx

@@ -31,2 +36,3 @@ <Checkbox defaultChecked>Farm or agricultural waste</Checkbox>

Checkbox preselected & disabled
```jsx

@@ -37,8 +43,11 @@ <Checkbox disabled="disabled" defaultChecked>Farm or agricultural waste</Checkbox>

Checkbox with hint text
```jsx
<Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>
```
### References:
- https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/_checkboxes.scss
- https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/checkboxes/_checkboxes.scss
### Properties

@@ -45,0 +54,0 @@ Prop | Required | Default | Type | Description

@@ -95,3 +95,6 @@ import React from 'react';

* Simple
*
* ```jsx
* import { Checkbox } from 'govuk-react'
*
* <Checkbox>Text displayed next to checkbox</Checkbox>

@@ -101,2 +104,3 @@ * ```

* With disabled state
*
* ```jsx

@@ -107,2 +111,3 @@ * <Checkbox disabled="disabled">Disabled checkbox option</Checkbox>

* Checkbox preselected
*
* ```jsx

@@ -113,2 +118,3 @@ * <Checkbox defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox preselected & disabled
*
* ```jsx

@@ -119,8 +125,11 @@ * <Checkbox disabled="disabled" defaultChecked>Farm or agricultural waste</Checkbox>

* Checkbox with hint text
*
* ```jsx
* <Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>
*```
* ```
*
* ### References:
* - https://github.com/alphagov/govuk-frontend/blob/master/src/components/checkboxes/_checkboxes.scss
*
* - https://github.com/alphagov/govuk-frontend/blob/main/src/govuk/components/checkboxes/_checkboxes.scss
*
*/

@@ -127,0 +136,0 @@ const Checkbox = ({ children, className, hint, ...props }) => (

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

@@ -19,17 +16,17 @@ <Checkbox>Waste from animal carcasses</Checkbox>

</div>
));
);
examples.add('Checkbox disabled', () => (
export const CheckboxDisabled = () => (
<div>
<Checkbox disabled="disabled">Disabled checkbox option</Checkbox>
</div>
));
);
examples.add('Checkbox preselected', () => (
export const CheckboxPreselected = () => (
<div>
<Checkbox defaultChecked>Farm or agricultural waste</Checkbox>
</div>
));
);
examples.add('Checkbox preselected & disabled', () => (
export const CheckboxPreselectedDisabled = () => (
<div>

@@ -40,5 +37,5 @@ <Checkbox disabled="disabled" defaultChecked>

</div>
));
);
examples.add('Checkbox with hint text', () => (
export const CheckboxWithHintText = () => (
<div>

@@ -49,2 +46,2 @@ <Checkbox hint="including English, Scottish, Welsh and Northern Irish">British</Checkbox>

</div>
));
);

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet