Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@govuk-react/icons
Advanced tools
@govuk-react/icons - npm Package Compare versions
Comparing version 0.8.0 to 0.9.0
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ArrowLeft from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('ArrowLeft', function () { | ||
| import ArrowLeftComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var ArrowLeft = function ArrowLeft() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(ArrowLeft, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(ArrowLeftComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ArrowRight from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('ArrowRight', function () { | ||
| import ArrowRightComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var ArrowRight = function ArrowRight() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(ArrowRight, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(ArrowRightComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ButtonArrow from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('ButtonArrow', function () { | ||
| import ButtonArrowComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var ButtonArrow = function ButtonArrow() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(ButtonArrow, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(ButtonArrowComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import IconImportant from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('IconImportant', function () { | ||
| import IconImportantComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var IconImportant = function IconImportant() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(IconImportant, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(IconImportantComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
@@ -1,15 +0,9 @@ | ||
| import _ArrowLeft from './ArrowLeft'; | ||
| export { _ArrowLeft as ArrowLeft }; | ||
| import _ArrowRight from './ArrowRight'; | ||
| export { _ArrowRight as ArrowRight }; | ||
| import _IconImportant from './IconImportant'; | ||
| export { _IconImportant as IconImportant }; | ||
| import _Search from './Search'; | ||
| export { _Search as Search }; | ||
| import _Spinner from './Spinner'; | ||
| export { _Spinner as Spinner }; | ||
| import _ButtonArrow from './ButtonArrow'; | ||
| export { _ButtonArrow as ButtonArrow }; | ||
| import _SVGBase from './SVGBase'; | ||
| export { _SVGBase as SVGBase }; | ||
| import ArrowLeft from './ArrowLeft'; | ||
| import ArrowRight from './ArrowRight'; | ||
| import IconImportant from './IconImportant'; | ||
| import Search from './Search'; | ||
| import Spinner from './Spinner'; | ||
| import ButtonArrow from './ButtonArrow'; | ||
| import SVGBase from './SVGBase'; | ||
| export { ArrowLeft, ArrowRight, IconImportant, Search, Spinner, ButtonArrow, SVGBase }; | ||
| //# sourceMappingURL=index.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import Search from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('Search', function () { | ||
| import SearchComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var Search = function Search() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(Search, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(SearchComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import Spinner from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('Spinner', function () { | ||
| import SpinnerComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var Spinner = function Spinner() { | ||
| var fillColour = color('fill', 'black'); | ||
| var width = text('width', '100%'); | ||
| var height = text('height', '100%'); | ||
| return /*#__PURE__*/React.createElement(Spinner, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(SpinnerComponent, { | ||
| width: width, | ||
@@ -17,3 +18,3 @@ height: height, | ||
| }); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import SVGBase from '.'; | ||
| var stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| stories.add('SVGBase', function () { | ||
| import SVGBaseComponent from '.'; | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs] | ||
| }; | ||
| export var SVGBase = function SVGBase() { | ||
| var fill = color('fill', 'transparent'); | ||
| var stroke = color('stroke', 'orange'); | ||
| var viewBox = text('viewBox', '0 0 500 500'); | ||
| return /*#__PURE__*/React.createElement(SVGBase, { | ||
| var width = text('width', '256px'); | ||
| var height = text('height', '256px'); | ||
| return /*#__PURE__*/React.createElement(SVGBaseComponent, { | ||
| width: width, | ||
| height: height, | ||
| viewBox: viewBox, | ||
@@ -19,3 +24,3 @@ title: "Example of SVGBase", | ||
| })); | ||
| }); | ||
| }; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.ArrowLeft = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('ArrowLeft', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var ArrowLeft = function ArrowLeft() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.ArrowLeft = ArrowLeft; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.ArrowRight = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('ArrowRight', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var ArrowRight = function ArrowRight() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.ArrowRight = ArrowRight; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.ButtonArrow = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('ButtonArrow', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var ButtonArrow = function ButtonArrow() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.ButtonArrow = ButtonArrow; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.IconImportant = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('IconImportant', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var IconImportant = function IconImportant() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.IconImportant = IconImportant; | ||
| //# sourceMappingURL=stories.js.map |
@@ -5,31 +5,31 @@ "use strict"; | ||
| var _ArrowLeft2 = _interopRequireDefault(require("./ArrowLeft")); | ||
| var _ArrowLeft = _interopRequireDefault(require("./ArrowLeft")); | ||
| exports.ArrowLeft = _ArrowLeft2["default"]; | ||
| exports.ArrowLeft = _ArrowLeft["default"]; | ||
| var _ArrowRight2 = _interopRequireDefault(require("./ArrowRight")); | ||
| var _ArrowRight = _interopRequireDefault(require("./ArrowRight")); | ||
| exports.ArrowRight = _ArrowRight2["default"]; | ||
| exports.ArrowRight = _ArrowRight["default"]; | ||
| var _IconImportant2 = _interopRequireDefault(require("./IconImportant")); | ||
| var _IconImportant = _interopRequireDefault(require("./IconImportant")); | ||
| exports.IconImportant = _IconImportant2["default"]; | ||
| exports.IconImportant = _IconImportant["default"]; | ||
| var _Search2 = _interopRequireDefault(require("./Search")); | ||
| var _Search = _interopRequireDefault(require("./Search")); | ||
| exports.Search = _Search2["default"]; | ||
| exports.Search = _Search["default"]; | ||
| var _Spinner2 = _interopRequireDefault(require("./Spinner")); | ||
| var _Spinner = _interopRequireDefault(require("./Spinner")); | ||
| exports.Spinner = _Spinner2["default"]; | ||
| exports.Spinner = _Spinner["default"]; | ||
| var _ButtonArrow2 = _interopRequireDefault(require("./ButtonArrow")); | ||
| var _ButtonArrow = _interopRequireDefault(require("./ButtonArrow")); | ||
| exports.ButtonArrow = _ButtonArrow2["default"]; | ||
| exports.ButtonArrow = _ButtonArrow["default"]; | ||
| var _SVGBase2 = _interopRequireDefault(require("./SVGBase")); | ||
| var _SVGBase = _interopRequireDefault(require("./SVGBase")); | ||
| exports.SVGBase = _SVGBase2["default"]; | ||
| exports.SVGBase = _SVGBase["default"]; | ||
| function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } | ||
| //# sourceMappingURL=index.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.Search = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('Search', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var Search = function Search() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.Search = Search; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.Spinner = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,8 +14,12 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('Spinner', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var Spinner = function Spinner() { | ||
| var fillColour = (0, _addonKnobs.color)('fill', 'black'); | ||
| var width = (0, _addonKnobs.text)('width', '100%'); | ||
| var height = (0, _addonKnobs.text)('height', '100%'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
@@ -26,3 +31,5 @@ width: width, | ||
| }); | ||
| }); | ||
| }; | ||
| exports.Spinner = Spinner; | ||
| //# sourceMappingURL=stories.js.map |
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.SVGBase = exports["default"] = void 0; | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _react2 = require("@storybook/react"); | ||
| var _addonKnobs = require("@storybook/addon-knobs"); | ||
@@ -13,9 +14,17 @@ | ||
| var stories = (0, _react2.storiesOf)('Icons', module); | ||
| stories.addDecorator(_addonKnobs.withKnobs); | ||
| stories.add('SVGBase', function () { | ||
| var _default = { | ||
| title: 'Utility/Icons', | ||
| decorators: [_addonKnobs.withKnobs] | ||
| }; | ||
| exports["default"] = _default; | ||
| var SVGBase = function SVGBase() { | ||
| var fill = (0, _addonKnobs.color)('fill', 'transparent'); | ||
| var stroke = (0, _addonKnobs.color)('stroke', 'orange'); | ||
| var viewBox = (0, _addonKnobs.text)('viewBox', '0 0 500 500'); | ||
| var width = (0, _addonKnobs.text)('width', '256px'); | ||
| var height = (0, _addonKnobs.text)('height', '256px'); | ||
| return /*#__PURE__*/_react["default"].createElement(_["default"], { | ||
| width: width, | ||
| height: height, | ||
| viewBox: viewBox, | ||
@@ -28,3 +37,5 @@ title: "Example of SVGBase", | ||
| })); | ||
| }); | ||
| }; | ||
| exports.SVGBase = SVGBase; | ||
| //# sourceMappingURL=stories.js.map |
| { | ||
| "name": "@govuk-react/icons", | ||
| "version": "0.8.0", | ||
| "version": "0.9.0", | ||
| "dependencies": { | ||
| "@govuk-react/constants": "^0.8.0", | ||
| "@govuk-react/constants": "^0.9.0", | ||
| "govuk-colours": "^1.1.0" | ||
@@ -7,0 +7,0 @@ }, |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ArrowLeft from '.'; | ||
| import ArrowLeftComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('ArrowLeft', () => { | ||
| export const ArrowLeft = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <ArrowLeft width={width} height={height} fill={fillColour} title="Example ArrowLeft implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return ( | ||
| <ArrowLeftComponent width={width} height={height} fill={fillColour} title="Example ArrowLeft implementation" /> | ||
| ); | ||
| }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ArrowRight from '.'; | ||
| import ArrowRightComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('ArrowRight', () => { | ||
| export const ArrowRight = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <ArrowRight width={width} height={height} fill={fillColour} title="Example ArrowRight implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return ( | ||
| <ArrowRightComponent width={width} height={height} fill={fillColour} title="Example ArrowRight implementation" /> | ||
| ); | ||
| }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import ButtonArrow from '.'; | ||
| import ButtonArrowComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('ButtonArrow', () => { | ||
| export const ButtonArrow = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <ButtonArrow width={width} height={height} fill={fillColour} title="Example ButtonArrow implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return ( | ||
| <ButtonArrowComponent width={width} height={height} fill={fillColour} title="Example ButtonArrow implementation" /> | ||
| ); | ||
| }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import IconImportant from '.'; | ||
| import IconImportantComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('IconImportant', () => { | ||
| export const IconImportant = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <IconImportant width={width} height={height} fill={fillColour} title="Example IconImportant implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return ( | ||
| <IconImportantComponent | ||
| width={width} | ||
| height={height} | ||
| fill={fillColour} | ||
| title="Example IconImportant implementation" | ||
| /> | ||
| ); | ||
| }; |
@@ -1,7 +0,9 @@ | ||
| export ArrowLeft from './ArrowLeft'; | ||
| export ArrowRight from './ArrowRight'; | ||
| export IconImportant from './IconImportant'; | ||
| export Search from './Search'; | ||
| export Spinner from './Spinner'; | ||
| export ButtonArrow from './ButtonArrow'; | ||
| export SVGBase from './SVGBase'; | ||
| import ArrowLeft from './ArrowLeft'; | ||
| import ArrowRight from './ArrowRight'; | ||
| import IconImportant from './IconImportant'; | ||
| import Search from './Search'; | ||
| import Spinner from './Spinner'; | ||
| import ButtonArrow from './ButtonArrow'; | ||
| import SVGBase from './SVGBase'; | ||
| export { ArrowLeft, ArrowRight, IconImportant, Search, Spinner, ButtonArrow, SVGBase }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import Search from '.'; | ||
| import SearchComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('Search', () => { | ||
| export const Search = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <Search width={width} height={height} fill={fillColour} title="Example Search implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return <SearchComponent width={width} height={height} fill={fillColour} title="Example Search implementation" />; | ||
| }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import Spinner from '.'; | ||
| import SpinnerComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('Spinner', () => { | ||
| export const Spinner = () => { | ||
| const fillColour = color('fill', 'black'); | ||
| const width = text('width', '100%'); | ||
| const height = text('height', '100%'); | ||
| return <Spinner width={width} height={height} fill={fillColour} title="Example Search implementation" />; | ||
| }); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return <SpinnerComponent width={width} height={height} fill={fillColour} title="Example Search implementation" />; | ||
| }; |
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { withKnobs, color, text } from '@storybook/addon-knobs'; | ||
| import SVGBase from '.'; | ||
| import SVGBaseComponent from '.'; | ||
| const stories = storiesOf('Icons', module); | ||
| stories.addDecorator(withKnobs); | ||
| export default { | ||
| title: 'Utility/Icons', | ||
| decorators: [withKnobs], | ||
| }; | ||
| stories.add('SVGBase', () => { | ||
| export const SVGBase = () => { | ||
| const fill = color('fill', 'transparent'); | ||
| const stroke = color('stroke', 'orange'); | ||
| const viewBox = text('viewBox', '0 0 500 500'); | ||
| const width = text('width', '256px'); | ||
| const height = text('height', '256px'); | ||
| return ( | ||
| <SVGBase viewBox={viewBox} title="Example of SVGBase" fill={fill} stroke={stroke}> | ||
| <SVGBaseComponent | ||
| width={width} | ||
| height={height} | ||
| viewBox={viewBox} | ||
| title="Example of SVGBase" | ||
| fill={fill} | ||
| stroke={stroke} | ||
| > | ||
| <polygon points="250,60 100,400 400,400" /> | ||
| </SVGBase> | ||
| </SVGBaseComponent> | ||
| ); | ||
| }); | ||
| }; |
@@ -10,3 +10,3 @@ // every export from @govuk-react/icons should be a React component that renders an SVG | ||
| // filter out private exports e.g. __esModule | ||
| const componentNames = Object.keys(exports).filter(componentName => !componentName.startsWith('_')); | ||
| const componentNames = Object.keys(exports).filter((componentName) => !componentName.startsWith('_')); | ||
| for (let n = 0; n < componentNames.length; n += 1) { | ||
@@ -13,0 +13,0 @@ const key = componentNames[n]; |
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
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
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
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
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.87%
139248
- Lines of code
- increased by5.29%
1474
Dependency changes
+ Added@govuk-react/constants@0.9.1(transitive)
- Removed@govuk-react/constants@0.8.0(transitive)