{"_id":"@yoast/configuration-wizard","_rev":"129-fc6d1af6719e7f3f5a9e95f545631be5","name":"@yoast/configuration-wizard","dist-tags":{"rc-temp":"1.0.0-rc.6","rc":"2.22.0-rc.0","latest":"2.22.0"},"versions":{"1.0.0-rc.3":{"name":"@yoast/configuration-wizard","version":"1.0.0-rc.3","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0-rc.3","maintainers":[{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"42245553a61bc2b333b4e5b4984fcec38a2025bd","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0-rc.3.tgz","fileCount":14,"integrity":"sha512-jCYcLXyVpcnp9r+rb8T8gg+qJqTGFuDMPMW53vM283w7mDxjvDH+1O1gftokZEhS8J9YgFXm6oziqgwF5m1UJw==","signatures":[{"sig":"MEUCIQCgk/31tsxRvqFoKtdpc3OPE0uJ6a38H39lSObe1/OPiQIgL6ASTFiVzczntQVJQYoDGEHyeLeFz33PEKedQFQnawA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpjVHCRA9TVsSAnZWagAAVwMQAJKJqkdivn4uHghguUbG\nu6gnXt4a7/k6al/eZ6jkXghh1EtlaMpX4Y+fzuFRNEQT/yp4u8Frl5fqENXD\nKqBQKF1HFbNpfqCymU2t3V1EY7R8HnNSVLWrI8/vjtTk9aKJW8p8t7Ud9fEJ\ny/ftbXuS+Fqdvwu3ceKt3gDKjUH5W/66Vr1yqfStzp7pwVyXua7UGtntgfEI\nG4sJBIH9DmwINwkbQtJVBFXRy7rRhfccEW6JOI2cR8j2chwRYV1tm1CjwS61\nmiCSYl30JlB4SwnkaWRo8a+YGXnwokhZIBCyjaOLFAAWTfjPQ+qAdWQTOHQ0\nPOQfd+tC8qhu2XhA6SX5R3YVve+yA0zRHfBb/Z6LNFS76NJnszN4RxLb8HqH\nGlnRD5r/Lz75CGQWMT9Kfnln4ZIGpNbVXIvT5YN3ge2iQT26r5zC/x7/Bzz4\n5dYaIxq6a6CAshrg4f2v0tITUwAjrqU/fT7aERUCdw5VHvGS0FGZG/LuTQ9W\nezjrJfxcRGm7poFGrCQxzLf/lgUNj4W+VD6bHqV01WLITpsYEL7/zYOY8I/j\ndIL2DV0Q/kRueFpeIGPSBQf3LSaPIuMTxcq8EyTh6SrCVgyY1uXa4wWtW5F0\nT2KD6HYpAvkTumiSmDAX7hwuI/Bte5qmacG13K/iQtuSurKNQUN5JudkLstQ\ndci6\r\n=eNPe\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"3818063957cc316ff0ba387c8d891dc0432abf8d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\""},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0-rc.3","@yoast/style-guide":"^0.1.0-rc.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0-rc.3_1554396486215_0.1697837158227602","host":"s3://npm-registry-packages"}},"1.0.0-rc.4":{"name":"@yoast/configuration-wizard","version":"1.0.0-rc.4","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0-rc.4","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"39adfd6a41c698b946ed8aff4ab74b07a92dd4e8","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0-rc.4.tgz","fileCount":17,"integrity":"sha512-V4bnedfJsbnLBZOMtcdci718hzmL6ZQLCjlGYaJK/REklOfnfnkRb9r856iUMtdjV7FEdQuKTReuxNqrYAJgUw==","signatures":[{"sig":"MEYCIQCQECeiSdHhCU5N7Rj0uHqk7hHVhXo30jtz6F71YlvrawIhAKXQv5fbUgMmzvLoEuNJ8q4G/iZT8Np/7hkDyMbFn3sL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpxZoCRA9TVsSAnZWagAAGvsP/Av1KtRjHgUsNTMSshvC\nkMJW2QrqI9IxonlhxWY1PvWh5j/19KJGy3lA+SIYlIMGoRA/gD9WWZmsp2z5\n/fGjoRNbemahO2gRUrKVL+8vAxOhd6XluaY89c9PZMYT/b/csJ7IDtr8sozA\ntK86iX/3ZScHF4bSg1uVGps9yb0SjE1WvVaWSosFbIDWry/BL8uBUFg8o+4Z\nC8xP9Uypj53SzQaRK+n3yne5KJuhvrEyB4k1PO0Gd7GliO42rZSiULirIu2y\nzvnRav1gbGTLCxM9aXmUcTxEp7tjMefRWHLyjkuaHorDYTHu1+VTf+/82wGx\njNvhog3FvZ6qYM1W7rB6uZLraSCFE7J3wAxx2Hqn4uu38R1zGaUOFEg5JeUc\nLruFAs5VCyk85j7jquQqtKUc/hgRFUJdqs9OqOgVxzqW+YedyT7rFiOdRbZK\nNQUdZ7IteJpby/vUYLxvuNHWyZg4X99YCSydEfo5faxQ/CVTLQWVoEI2BKBq\nsh7U0eR3E6auP6UIqq1C+nh8RPunnvOFPlwgWd4fOUeDM6zTFnk+hQKZipTx\n7nvG7X0D3srvwpeK+Q9tAR53dc605vyPN2ziR4hn+Zm/AkERv6Mpwbpr5tSX\ny+m8FrMFtT5i72GS24+lUsoc4/WyL+s6ktzQXIYG0JMwzXXqcuJz6cZyTXnK\njLN/\r\n=KAIw\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"0454737135afef85ce8c123d1e58d0fdff0cb5a4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0-rc.4","@yoast/style-guide":"^0.1.0-rc.3","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0-rc.4_1554454119500_0.6274330067237459","host":"s3://npm-registry-packages"}},"1.0.0-rc.5":{"name":"@yoast/configuration-wizard","version":"1.0.0-rc.5","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0-rc.5","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"bfb0b1d8b4e5da66321b605823cd7e0b0223cdf9","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0-rc.5.tgz","fileCount":17,"integrity":"sha512-iIr0PwNH3/oN8S9n2uOUaax6DHJS/3xa9stjkhZcrzVNK2r2DX9cazzvMffFRIp+iPYnIWHl41Z1wEJ4fnlmfQ==","signatures":[{"sig":"MEQCIB+zQFOx6gOityoPnHhkXCdloKzuQNxwEhRPCfwi8VIWAiBl99XGdQ3yWst1R1Fq8UgOBWP6l1JdYR0IU6r7Nsi51g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcqwXeCRA9TVsSAnZWagAApckP/RckAiUZAjLSvgO8Mmm4\nsZfQtNcXwt0haGUjUzHY+fCqVgArDMvLPbs9ZOaeotw+XotVwvoYGxvSnmf7\nA8utmVehlzQqhFB1+gYbpzWQZHAaWo8va2NIJZqGndRXc79RIeZgnK7p51fZ\nquJSzmDsg0lNKCHI5al4UerCgLy1WmqBjUzIqrwHrT+ok5Nw+ugHMz9/WcGC\nDSVyAt04P9EUQYBoJu41M0G2rLjhlXy7IOQWhFxh+fZQJa2913ZZNRA/Qmvm\nFD7n6lt6XhwCG9ezo2bKa2du9ZL8bQ0kFxyg4phv9K6bp93G6lBOjZd8d7Qq\n8/9HxeYAq5DACAWVbgZ4MFPAo06bGE/i1CBr2UGNqrR3+yScpRnFqaxQ43lr\nccK++A2yKtGBr9z//HtO5V18DzAt24d7oFXAhrzohGSgXQZRf8J87vzgdqcx\nT2VnKqAV4/YPFhraSm01XxnMxZehc5B4R6m78l6Ue2/ad2AS5bh0dJ78yoGj\nF4vXaRs02X0WQuM//mLvU3vW13+69hvz476zvYn/kDpaH0xf0VaSM1dEuZQx\nK8TcNdMMN0MMAa7KrAScJYNALz2ID9WJ9lCx3PjUh8HScWgUGMpx51OH8ERq\ns4k7EJmBudyfUkKdqZztdyCnp/1Ktr/iKat5qL/TUYSxj1vOiwWTateuRF+9\nkBGx\r\n=iRQL\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"6a82a14722fadc020ec27599d1ae98147ddbfd9a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0-rc.5","@yoast/style-guide":"^0.1.0-rc.3","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0-rc.5_1554712029308_0.954492688678332","host":"s3://npm-registry-packages"}},"1.0.0-rc.6":{"name":"@yoast/configuration-wizard","version":"1.0.0-rc.6","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0-rc.6","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"635bc1754f58a90aa7b2433709a304638105b49c","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0-rc.6.tgz","fileCount":18,"integrity":"sha512-K59E37iw7ssyQ8ryigei3rv4hY0Zp7/miU6v3XjnxRuJRZshQT9TYyLtpIFlCFnUjvK86yqB2yFRJHo42lm/GA==","signatures":[{"sig":"MEUCIAfGq83CJMKIvbBpUBtFmXVu/riXL4JKWyUjYzhsCbdOAiEA3vdobUCTzBevrV4lDBH43IPFNXDltHq8cmv7uZ0mvdc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcryicCRA9TVsSAnZWagAASUEP/0Swim5QFA00fVBRNWM8\nCyiHOYtiEvO8sgrOegNrNXuFMUSAD3m2My9OpEODRPjbtg7YPb15fCa17c62\nSyefSlhWknwKnEH+/w3hNptLwACu6CdhUGJnwiuMSnW5/3gYiO1zl+yKv+rW\nUI/3P9hsJHNajajDJFHIGrNAUex8Mze6mDHMs2XqF1Om6hu9GhNm/7rDm1/t\nt9gvK5w/lqVPgn61SxneE46YxZCBfagvQSX7mHzZAI4Hp8SwSp5w3e+IG3Li\nAFEtmbUjW8gkLt1LawtJukL2bwQupEsktUzirN6zeZJE48QPYEPdxvUfrz5f\nobGdPaYc4MgCbcvVCma/cKQ5I0mfczkZQtYG0Ln/AieQEMFk9NjTEXs3TWic\nftDovobA6X6RwTzks6TnCJBsg1VX7wwAFzCCOYCVYvBvq4eMa+j0iPLnin7v\n4XV6jk6aoERKlukU4D+rTRgPscsx1E3zwiPgH+3yuzSbL567otF+/e6ncVIg\ndfACRbLF8bO8Z0ZT7iX/4oGvKIMWHgPds9RB0OoE0G4hIfo2eAGEqy7LpxrB\nK4O3V59vqMVuObun4gH7XXWoKrK4ebfDP0u450HMDrMbhfJVbJHPtraN3T00\ncqRdHpl/cQU8jwjFcEu9PBvhcUG2mnckVBdFJ8PlBntprXwaa+m3tCOAIS+B\nWywf\r\n=4+sl\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"1b63ce37fe107e038a72a840af724cc57fefd2b2","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.13.0+x64 (darwin)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.13.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0-rc.3","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0-rc.6","@yoast/style-guide":"^0.1.0-rc.4","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0-rc.6_1554983067450_0.7437353928446229","host":"s3://npm-registry-packages"}},"1.0.0-rc.7":{"name":"@yoast/configuration-wizard","version":"1.0.0-rc.7","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0-rc.7","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"8f9bae05045802010e464d717e0f936f4e47fc6e","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0-rc.7.tgz","fileCount":18,"integrity":"sha512-UAhqYnZKW8noBL+/9a+NFhV1SfPYNcU25ZhSzoJ9P9Q5pO6m4yw0Y0tHDS+hIxuJ3T1vWOerBlebXRBIO/2rgw==","signatures":[{"sig":"MEUCIQDv/XmgRUhNcftvLiSvjbzewVs/6qQXEEvbVh+NrhiJxAIgJHGvJQ7HlIkhs4ieODM53VaR7I3DXUSK8j+1CmTNJBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":61008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctyA1CRA9TVsSAnZWagAADi4P/00nvQBWa133UR1/DlvC\nEiByB2iOFTJCGFkOdb/sTdc9VjonUX3Oz4F9Is0wAOLWr68EPtS+cuiRxUz0\n2g8NX0c5WH+YWCwZ9lObpNWmtQI0Wq7As1IrAEEkk7fw+F1F9eyfpZ4S5E/8\nbLGbuNaPCTmACCRpWBXnSIZM1ZVa5VFQ7um1CJxXypoP5s+BWKiwylXrON1b\nNYa9ubyUVrBkGtd6kYdcEjuQvWAU5lNP67oiCsV5zycCmUwlrkk1sW5SiREG\nBfsC/O9++vgYtq7dZk53/oGQeR/6T5PnWGAB9SBza8x/YTObMWdbLePw3xrs\nkGDWCXo7AAYZkSm6bz1HXFnjeQM3ybRDOqW1jLoLFkifrvh65KAfaxneLIUa\nlmrztqQPNdUhcxPHoZVZ7W4QZz3Mp9EiHW2ybcSDzQIeXdOja0olr9SZFK+d\nMx82iGt+K/Fyg93Ad1TVtPQUVptWdJl7Ke9o/+W+A35kG5GxdD7Ye4ZdK77c\nqN++eUxUNrBXj9GPDCRE2Ha5zgTESzfBCE9mea+LYaLpwm62Kd/QKUjwGUJI\nhlYwWFESDyh5hm051OSjFKsEuHn7oLHKEvvtOGYQnAyst9837cFS7QfIikII\nqlij6fC5U+cbprhyTlbPT8QHLTkt5AzCyNTClAAOdYyMh8EwMODg7c3vckf8\nVe8o\r\n=z/y6\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f2be42cf4745dd31b2d36e61614b52e6bdb7ea3a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0-rc.4","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0-rc.7","@yoast/style-guide":"^0.1.0-rc.5","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0-rc.7_1555505204818_0.9852694446123607","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@yoast/configuration-wizard","version":"1.0.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.0.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"c5e89f26d2a22f5db4786c526e33657f757a3eac","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.0.0.tgz","fileCount":18,"integrity":"sha512-R38pVayD8Ktjs8qBp1/WMXFr5nC7yfRIAf7iwjV67cB77Fu4y7aEpPMlLno7ScIi4hSh4FHZzdFp/nXoMmhH+w==","signatures":[{"sig":"MEUCIQCUK6ysmsSw3F/glPXDTGZiBqEEX0Y6Efu6IhllTpihvgIgRl2WmxmGD8TmtjcGvxoYPEHorvXbsu/sQYvIcnBfK/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxvj7CRA9TVsSAnZWagAA/RkQAJ3kOCqGzhPKtEjQ/2FQ\nzFTubCAVvY0A5Lu/36c39drWmtkwWFMQsjUdKY7od+3BWL84h4T2oM4abMbN\ntPYh3vvgtz76gp7idXLJv8fgWSaz30NUNPViII80kJ5vytQrLtG7IDVYVthX\n2c79DFrKulD1cnEkz6nZLhGjZLfLMaC0ueHoin/Q761dEBD2F/nMc+B7rF2w\nRnRBOxX4/1ujtIQ3+qAhBlkbnZFL6Q2dp4N81fPnL12AHT2/QeheSRNtC3Ub\nWnCITdpK2QFmyZz1LE4EMrF+hInS/V1/g056uLTZRmC/vYrbPhZWNsHDzkfX\nzkq3VPBfudhEIM1O6nYo6xzcwmc1bei48tLcEMeEbr37ufB9nSEwQajx0rZn\nUqKmAl0h0P0MFHyp5t2Mj8ZLDW92qrWjCIyzWm8g0600VoCNZx3VIBVweh5y\ncWVF9/TT6AMZ7ofy/ONuXB3nB8cGwo56tKuGcO8KWxSt1WEFJDQCduVMU1JM\nFdFdeCJKOIof4abt3IyTy52GAWA4gGaO34rUH003CchBUqH3VtBFRaOsroOW\nMFV9EM4sWFZjKA9G+YL7yBDpXjJO/at57xEIfTShDTEmR+YJhW72OzMwy414\nm3KykhimwL+SUDNYDFCerHk226Xg2rzQZi6m05wjr9GAw43hS51Lx9Hog6y2\notd4\r\n=EN9O\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"91937113e8ac28ae0700d178ac2e74d1bf58c1ac","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.1.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.1.0","@yoast/style-guide":"^0.1.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.0.0_1556543738705_0.9534643882784462","host":"s3://npm-registry-packages"}},"1.1.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.1.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.1.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"ab8c5a0ec75ccb86e02de45133c0d73e8a6777c6","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.1.0-rc.0.tgz","fileCount":18,"integrity":"sha512-FIc/XDyNgLlOre/kymDlg8c+Gudp/oYvEUf3/3iF0taPF2BjnCLGxAToOyncqkSZp4SE/q15nXkmcKnqZQyPOg==","signatures":[{"sig":"MEUCIGllOhln4Idb+4hpwWeiW/F49srSZvfwGuZ4FvIuroHuAiEA5tS40+5BDZHZfAjMR6AuoEkig525Ma9TN40az8TjEx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcyGQhCRA9TVsSAnZWagAAPRsQAJXrLW1+VMj4AOa0Ge/t\n+sOXavr7HNGY1Pdp1u6Nl+qT1sEmB/tqh435mvjVv97BK/XdZRTPg0su8nBq\nX6a2qVDT1efGuVZP5LWNNfu1YTsfzUI4D1lNDlL7gyTgvR4sRSxUP7tT7HHS\nw/HmNx9JWGOjOEBQgP2jt4abHpcWN1NP0j21XlE6+2d9kcR/Z9jSojgvCsIN\nyDmnDregeT5Lq0iCCYUDZUTYBNlm272MPwgB8ETgvBzmshnKnOSa8TtXXW5c\nz1B+GycollBn+UyfF0Bp/DlQ6DkA2IctRujrFsFHao7V79sjDOzSwK96/8TS\nU712Px147Vck6n/vL4nXfr/WKTFgkFS3N61svqJztifvToN/nVF2XXBUkVTr\nWANtjYIrwJWntAvcLgZXvX9OVc5dDJySB21my7XVXoCBXiwp3+unXzViaBGv\nKNCJpg+3pRmTa9ZvmtTRniRTPsOYnSlt5kcZP6xHkGz/ZCIbzlEzHf8E/S7C\n8T5unZFeO8ywiz+4+Fu0+Ut4Yz4ijhkQIptZJq+2CQWXYk8kyqHWPauyN2dR\nt/I1LMpGchqGDrvgFwJ5bZx7FOLRyYsagSHBwCJP3Imv6YIKlb1lPBXSTeXi\nl1BFf0nofFBjcdto+wj54AvdXzW+JJNY+gF7Ipsjovqm8WklCA+NOtUCsIGe\ntyT7\r\n=bwTQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"d3c61df7400a9239768250cfcda748351eb8f6a4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"atimmer","email":"email@atimmer.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v11.10.1+x64 (darwin)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"11.10.1","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.2.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.2.0-rc.0","@yoast/style-guide":"^0.2.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.1.0-rc.0_1556636705234_0.3355999953037183","host":"s3://npm-registry-packages"}},"1.1.0-rc.1":{"name":"@yoast/configuration-wizard","version":"1.1.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.1.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"1fb125d96cb753a7ae12bb8c966586a57c2b8c1e","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.1.0-rc.1.tgz","fileCount":18,"integrity":"sha512-0GwdexEB6DgirZ2DBTNHdy9K0U9ylEIszLk2v5NYI5kVNSWbI9/40P1qA4csOjQL9V+temG9yuBddymtRjnjag==","signatures":[{"sig":"MEUCIQDc88aJdUYlqwlfMU+1uGwdCK0a1n2FlSPqQYAWtDOXuAIgYURAz0zoytaOKc+hyUAcGDWY3MzgxbxP/OhYwEEHuIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0pxgCRA9TVsSAnZWagAAbWoQAIlvce19ZQ70HqY+oVkh\n1GO7Vy0O6rSj5NR5JQHiPrzthYCnOqtIOIrI7uzFzwEzu4XkKKbCagpjVhL8\nOzmfCT10hoLZ9+mumvuTbQ3MswUkHdOZJTGoa4KQPxX1GAMxaGACNhvCL37D\nyZR0sQt1PI8/hEBm6fXH92gXcrkr2rZdRZ2gTKk0vQWKft3kDGXWGjOtUSYG\n9J21Y3CsOvLl7LRdknQUhsaGJIcx/4GlXj3ujmwz3o/YTJckpbIDFYx6nQXr\njOEoBb8QBFqL11wqlxZIXZ73NwOkX/GGuYNYYdKqpUzctgjrsv+9cBWHsoc6\nOJS4dCjd+Qeg2DygNtuczqQo3eAX/eC81az1C9b+Iv9WcLQA5r7fFywMl5Dg\nfpIdKCbmhKkGCVWGr3o46evj/TobKMRWKhBLYBjd9yD71pT1DvGAJzwRFAPB\nRHb7cgHMH76r2epoWS8fqrzIRL7uwfsmLzP1ZJCQExcbrMyDEzC0etiG5/8u\n9h3C7duvIcDdfeqPUgoylDiTIC144GLCdV2StfMV7s8mQ4ayHS49Kitne1GD\nXjr6Rrw1IZdGL05larOkEEB2oNh/JMms6tQan3akKPALzbGEglD2BwRfYMih\nvy8aI/ITCzrSR03rIITuNKVQlUy/By3BhXrU1vXj2WANbsI9Mh251T6coQKI\nr8RX\r\n=UrHG\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"e7ae95cf272da5447ee8ed43660155e20b136b6f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.2.0-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.2.0-rc.1","@yoast/style-guide":"^0.2.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.1.0-rc.1_1557306464115_0.42804696284591004","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@yoast/configuration-wizard","version":"1.1.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.1.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"c95c9cf93355ccfaacb23095586084159985299f","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.1.0.tgz","fileCount":18,"integrity":"sha512-BLEtEQwryowMmnQhpDcjUlvIM48eRLmXyYwKHU4ACHiTJ+Hf1yTeDrB0ngvcRrUh2H1gmbc9n3LCO+CeHqCpQA==","signatures":[{"sig":"MEQCIGQ6ICQPkVox9dRGhkUSZtAUNGUxf0Pg8g4WwqyLpBUeAiAGke7vm0IaPk321URgj2X+Lv0neGO8PlFnyKLJ5CSpJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2s6ZCRA9TVsSAnZWagAAkGcQAKRYdT+9mrZJZFvMY9mH\nurG6NnGM4W8Ora5X5Yp21HJxwJe2nnjxCILIEvocJX+9OGFshHBa14HyZAkW\nmqFhiD0eolV0RFh6CT2V0c2rL/eD8AxZizApLYzoL8TduYaDZ/LWm/l2a47e\nr/Gr/n6Emx/aQ0R1aJbq81dPO+FjcSvvmcU/DFltiQ4H2Kb7kCuMkF/u+qp6\nFbrXML8m0mNn7/bujzrwEr/r+KcjHsxuDK4pO2PQ7NA+c6VsnwnJr0V5tUs/\n220uizH24i3YOqJPFHTEhTSfh20PQ9kL/yY46LLM7HKe3YdcmU9w4sXICYPp\nwgGRwLq/DkTdRDF3yhHHP9gBerWfCkymzm1ZFLIzCOogOxDuAaBSZPAZC8YH\n7xBqSsrSowks4XIsBLgbOjURTPecmyD+vZUusD4/oeZyFnw3YujNCrT+lKR4\ngQsAvLcxIt/h/3I3Ia2ctuNUY/aqq62pyFpEFp7HjUvqFtnwzsYBKGjmC5hB\nhLuRO7/FNl4L2yLUN51FGbHmZLlERrZp53rTYjfOdk9M1Xgx+LKa+X1B+urz\nV3ZMspxpPLEhbapbKPKWupFrIoVMwnulhYGUXFbeMp23f7rPf+OzKLj2dGFc\nz5l5WNezoky1uJhBbtUQuHt/oPri31huzVYg72e8rNtg5os1+vqVaPCf670X\nkGCe\r\n=UnO/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"fc7243f7002c9c1163a9ca68ac4b412f610b2fc7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.2.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.2.0","@yoast/style-guide":"^0.2.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.1.0_1557843608886_0.7622562983363899","host":"s3://npm-registry-packages"}},"1.2.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.2.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.2.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"75795fc4e856dfce75a9a6fa3af67469151a5334","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.2.0-rc.0.tgz","fileCount":18,"integrity":"sha512-cOp2IjZjlZptbKq6rCqV4OJtVQbi56EWZiP+ZbxvktfalhCVqpLHo6V+1cBTzx355GiVZNPqDlcG0OJ0vxrhrA==","signatures":[{"sig":"MEUCIGtnohbRv3oWuy7RjgkeuC2vM1YRGhgVmOC4714vGDToAiEAg1/00PoVM7Qf2FfGVlrfkz5K4lS9GYWSJwzRONIgbEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2+wbCRA9TVsSAnZWagAArAMP/A3XEM/FkDTDX3hKWKkz\nrTzLuu4jYzylKxi2cioZnXb6Q9XVQuVdUgDHuRth/NbDAXDk937mS8n3DTWd\n4hG778sddB+s81NEKwF2bt2wVqKsl4i2NiRuHWFxRPuIOVJWfv/SWFdZCsge\n94RlDq6qq2Xy+B4OgOz8vmFvjrPdG2Lj+3HTYV2GYEbxVNjXtOHtTjlrWY6/\nIZCWUpDBtBljZEadYRUlA/GdWQSQPoRbvMeyccnmuGM498r4lctJwu+814/4\n+B/Oj46MqJddj+H/A+nn6jSfU90K6xnrvghT9MoAvx2h4wQeHGSmzxoj5aVb\nN+liffeRrPSwmEFftO2rinADC44RPZGfrKzHmQx235hzrFcBqtHbsV0gSHxO\nEjyCRg/zFq3aAHL2jI73bQZfRq7MMCLE2ivM4ANSndcDEq1pcYkwjddv0Shk\nPP+qJOmYYd3me3wSGLfF+bh1s9PAeNN/zhaGiIqaHqALZUFbJHv1YRTU0pP5\nuY2MAJhpFjQ+rhq676zbK2PWmrKeUOghffh00KfzDkFCX2HVGF6+2zLdNIt6\n/9nwtFcUj52HCkaD4wXy3PrbV5KjXqV7hdCs8g77iTJOkK1rVplS37I/r0CQ\n9AVxikNV3TPd8R+9Np3BJqYSY+yvoI5qyN/V5O0MtYAePLy6hoDawADaVeuC\nod52\r\n=acK3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"29810c7a9c45b76ba3e678e05bd049a4a89e317a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.3.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.3.0-rc.0","@yoast/style-guide":"^0.3.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.2.0-rc.0_1557916698887_0.07960488479471883","host":"s3://npm-registry-packages"}},"1.3.0-rc.1":{"name":"@yoast/configuration-wizard","version":"1.3.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.3.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"37ad2fc6a65dddda43e404fdbe3dd022ab438653","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.3.0-rc.1.tgz","fileCount":18,"integrity":"sha512-2fvD/miNaqei4MFQLonEen6dl3gyMZ8qykj/vieHNyzDnQbFR1WMYY3aoLvfn5sH8WQyxAyicBKT6J1y2IvoUA==","signatures":[{"sig":"MEQCIDgMhvW00yIBnL94tgKYsyTP8KfyeLvBQN62xzpy40y8AiBzTR2LhCcvxsP7HWkWWTAS6gZu+oskWJ8n0GnEDxRFEg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc565VCRA9TVsSAnZWagAAfDwP+QB3yaA4CIYNZ3Ne37wm\nczXq79XosPtXhuu3EuBzGETWm6LweWCbZe8g8ywh/RGq1JOZVUJNh1v6fOX1\nfskb7Otzqqet54qUXcOgYIB62s4PwDm5X/cWSJbHzk3H6hcapno3zCr17vGu\n+yDqbHjWbNRu3yykt4x5SvH5i5Ma0OYhcT2HH+mNdcjAiokwPOjxHyASDRBy\nmIVB4jjQTwVexT4Bhq4CKNif6w+NzE5sc6iUAnqxYcYsiYJxJimeG3zJUlM9\nDw8BP2t4fawzvZI7XWR0WDEVBw6ocqHtApR2uYboLBA9Gc+191TSgGSiZeYz\nZI2NNkIXc2ytjDD83T5GBRazS/NfJDvLGTXGR/jmPDHxGLrLFnKqZeQ0LgZy\n+HTUDCmKmMHMMpQzH1r+CEx6rHnAiNGh4NOHDaQx5MFUil8w+mqEimqNRej9\nMZOht/SxKh2tbSSKM9juc9togl2uGW2F9hIBgXOWAvRGykprkrnyHx/zFRUN\n+Y9tTMn4gVWW8zMCfs/aumlPHhviP1J9AW31ib2QKdNxiEvEjRDbsc27vdkU\nFiUHwIU7ZhtygFjl3uasGmJRB/XL39oixCWkALPFQUHBafKuflTo5mCqo4qJ\nGmFuQmV4PvQJNHeyrCuocjsNzYBo/+aPAAMOaGTWsVOCyecBgPye7dvR92FA\nuASW\r\n=87xO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"b136db964fbadef7515772288b6e3191a86f2280","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.4.0-rc.1","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.3.0-rc.1_1558687316425_0.13048664435299284","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"@yoast/configuration-wizard","version":"1.2.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.2.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"114d2725884d6dd98e98605d8089c50d9a7eaa53","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.2.0.tgz","fileCount":18,"integrity":"sha512-PY+XRqpJg2CBIsWU2/tD/Xr3wCuT8KV4R2kWLtDIBFyiYCcx/XlUJYaFrGBz7UOHuNKIS4ljUgj0phz9cPzi/g==","signatures":[{"sig":"MEUCIQCozkLJeSRVXorwRrpa8qfRs1Hw69S49/4KEVlz9ps0cAIgay4r8sMJH7NVkSKyVX4udDn5UNnmw2Vcxdbj9mTBkUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc6+gGCRA9TVsSAnZWagAA1YwP/3s3ZSs4uutEKRNpHqZm\n6zgt2bzrlUjDWrdh0LOQe7epKtggZfWJBa3Bi6Qe5EPwvKxKXsyUQAp+zdP8\nnSMxm4WZg8AXqjXNBv3aweTZg40NdosDNu7MpoKVB5qHEsq6LTGEV1Wo1wk6\nlOdxBdeYmAgoNq73CIXNxFWW9Dt9K3CFb0RYXasagaMJkh93N6JsBYpICcW6\nm/3HWYHmaYgzpDB9GGqvJ372grgH66ar8gm2ID0WqSj1g1trj3yMTx8yLY70\nC4DZ2mM/vCvxjEhMa2byGO+2iH7ZsOVQRlmshzYyHHrgky6jxAHtEXFSpgAL\nKSbqK8UWNAK+ttsHr+Dl1TY8mvkN1oKdV2TTZHdoTPEjo0mVoIqcMm1TRbdS\nKNLEaD9hk/RlkaCv4G3HK3aSo4TGVljD1BRV7T9Nn2SGhwTgLLL7j6wnjNtr\nHYViLEIaqyVvhJNzn9lpf5zGEsCaAsTciSTGKDR4iOjuIZJfUry7dWrKabts\nigJlA+vAnMBxnTIfP2UwMIUb5OUM+Owf8wV4FsjOlhKpbo7/G9iGWincoG9u\nz+LJsYlMebhsCYKJNAieR5a3gSLk69b0ZWdrEfkGLmAZ6mzTLhP1+EE4zYeD\nE3XMbUKqePx+ORO5cTCECSTyhrnXFrqSaYsjpifmbdzk7u46ChSBL2KiTuQt\njhk/\r\n=6xt2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"d53103683f010cebcbf9cd76f8544dd9c6e3741d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.3.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.3.0","@yoast/style-guide":"^0.3.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.2.0_1558964230293_0.16141650989793632","host":"s3://npm-registry-packages"}},"1.3.0-rc.2":{"name":"@yoast/configuration-wizard","version":"1.3.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.3.0-rc.2","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"e1713ef10c67e36c41ffba3dd7764aa62d7880a3","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.3.0-rc.2.tgz","fileCount":18,"integrity":"sha512-f7lYgtMm8vK4bSirNR4VRZX4HVB6LqtsPrvhuiRZau0WFehW+yMKEEoaDeo7WEpKQOJZ1Hn+73/cDrzSghhiMA==","signatures":[{"sig":"MEQCIBIA8e544lKcVoWAUFdcIZ8V9J/UEygDdQznz3VTlVk7AiBjLjZOj40Lx+AUvoVMxvE8EbUu4463/zGWQkVQ/aAD+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7QeqCRA9TVsSAnZWagAAjSwQAIpDp6VQDZCb9JKQrCYA\ntx8GHvLIWBbdwCK/mJrQSrxiTECBEuYgMxexfWfj20dwZTpJ8nL72i0qRi0D\n9Uz8/+xgIkCGCbKeXfP1+7kSRH/IAGl2J00I3JYQwCyODKpXBnW/S9LiwIw2\n10sKFeVN4fOOT1tNZLw4WT70MmPeNrFJSU1SX5n3RGLMHxs9E/v4fZld9wXT\nw5VYKCF154+hQ87LR7ZdryzDr5sOoPsivL2Hzzs3bNZjcUh+hSx+bFp3p2cz\n0/S1EgKoHoy55A89M9YB0Vvc0BIDgg+9ZxZR6HcOwvPldE4LC5imgPppRI44\ndnyZbV13FGA9iFZ0CSxsXI2+rXBrUnjEPtpksipHAaxG3mNS9eYpc/c14UJr\n3VERd+XwFzj0TpVBV5z41yyJ90mTQrch9Wydjs9VtRPwNWhofOIk+tHYNooM\nkeUlIdT+xd5Ly+60Q5lCoTHtzpuxC6Gr7tqi6mc1rPSxIjEQKyIj8E1O+Ih8\nmRwsiAqhl8polQNJxfZhy9hGPeSFQUswEi45ohevfFfX4x/UPU8EtwhMb674\nkpeOsDFbK8BXiTt6UIE8u5GqtTnGQDdiCyLST++dLrt0J8TfpRPwx5/U5S3+\nhLKM789hOcvssB0p4MjPcZXjANNZQEF9G1DTF/BbqGio23k4tX1h+wcFyWUC\nVbjD\r\n=TS0B\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"3df8e252c3568ad0c2728d4afd8c8d0ef32c2839","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.15.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.15.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.4.0-rc.2","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.3.0-rc.2_1559037866262_0.43845305639511256","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@yoast/configuration-wizard","version":"1.3.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.3.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"8b735fcb73b29be651d2a8158a985d4fdace37a1","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.3.0.tgz","fileCount":18,"integrity":"sha512-l4EsSm5YiFSPnx858jur7eyg5ijUn5XEmnSN5Yhz8UU4WZqshegkYYClpfVavrbkb827I03A+2dqXoVIf2n93A==","signatures":[{"sig":"MEYCIQCxmSfI9NjJ3Pp2lPmD1hOfzwpQL+lYq/sV2T3dvl1vnwIhAIQyubQedQJysWJo67Xvtm3rJN/kIJ5xNwXSEGFmQPVi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/7ZJCRA9TVsSAnZWagAAnUcP/1zfCn1uR1K3JCvXE4Iq\nT4zSzJKqny83xVVErDgxzwbvGOPb2xCQ+0QNzm+7T5/ytNep1ddcshlqYnfr\nZDwzmNAjmlGNAUQ+Qt8HWHskBRG2B/hfrF8rRIpHoI2cNxth+k5D5ik0j3NF\nhPM+uK3C9fAwuHl7wOa2yZ0PUWQwZvNAhOYzsM+1G8+Z1UGl8bGE/z+8N3TT\nMws3E+9xw4gT0SrzWz3b325ZXhCv7SSMwszmKKx6eQWZjBcDVfhcEbx23o2x\nHjh6B+TmwILBqYxkpl04Lnpu18qD8Eeeq5nNbzYbwzYHfiYgo37yKCQg/k+7\nKMxjTYMJnro40uyb6ZoDj/BpxXQ15TCMCGz+9N8QIKQLlTsZEwj8CacjXkzr\nzLHWtYDYQGHPrbjZQ52J7aywVivmKwkRQhTQPlk24DwEgf5Tp/Jb1vy0EZk7\nafp9FyOMVnAtZfHb2zUuGv5mJAXIQ/env+w1WD4Daz7wEw054z1e5c1YwUvx\n9j6JdVKYeo6PdvhMUIE3kPADsEWGvJI8wxHJ5bZobpt9qy8Cr/1MLggRLgoh\nMXxIEneA+EEmpQNwbwbYF4MPtbc5Y4YfF7XcOiv1dCYB05wuXdhFejRoMVPL\noPZCjCLi2M5K1tSSit+yl9pujwrq9GBR1Uegz5buTHQ/yuW4vpCgYhb6CwVK\nKPFs\r\n=Two3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"e94bf442412eedd63add95fb3232cad4391687ee","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.0+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.4.0","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.3.0_1560262217305_0.17827456866907454","host":"s3://npm-registry-packages"}},"1.4.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.4.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.4.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"78eee792d1e106f78929fbb8965f9ea8f0ab77da","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.4.0-rc.0.tgz","fileCount":18,"integrity":"sha512-+S5vXiIgcY1xmhWSsDLV4mgmNUfAsoLo6/mcUNspDn+3o3q7dVlGs0+hRx9+/LYNpvq37/3peXC0+YButvnA3A==","signatures":[{"sig":"MEUCIQDDrHkVlKqelTDKXBJipnj6Lj+3QxCql1By2Lxntr6ipQIgPcKAnH84UPCLLNCFNEZ35U38N2wbbAZjJLtciPkniuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAMNzCRA9TVsSAnZWagAAIAMP/RBWpQHLSWGartyf3haZ\nOoEPaNG7ZK3+cSwCZg9KRqAhv6Kb3yMCdSD2vKjWGeWxy4Mjiwdq4ghekjkk\nt1YJhM5wswkpzD6tfD2GIxFmINTK6+X1Ca9b9XImIgS1/n9ZJIBXzaMHoSfC\nL2KutBPnjqCnO1JDKD9SOuqfBLFR1kixL0dvZBx7U0PtkZazc/xIYxGE8yJQ\n4q64RpUk/KAw0H5XL1rFnYMe8/dD4yOLIEVgKs/QavzNBfjE3Nn7Hmmd9V6b\nbcjBZwKiFWotLq5FEwBI+9VUNAMAKOa6Miq+vQxovU7E8l/pCgI1PC3PcR/z\ntOelTS6lABI1w+NaphH6J/4lUV5PZIiN5n8idC9KWCBiUWyWdi64OH1/w3Y6\nVLzw2amKnD+Fd2loTDOYmwludnrHnY7Fcg7u8tLXBG3BZOD2gx8uZsJCRRJX\nHGYVPWDlbSu5zzv+cgOa5WzKA/YO09+ky6ug3qXGjIm9eKcog0NgCBizPGEs\nTdZckwiJsdQfmpHmOrnf0TKC8DoP71TPSRpWxxqOycS2luFQSD5JNubE2jP9\nUn54fRD2RDwKJfoLIoOShwJbZ4j4OhrEjP4plHaUKT9gGsZqXrn/i79kbcGM\nZOUYXhU+8vnkmhCm49lbuq2rSw60PQVXSx4P8wTzm2BKAM5J9cLoBhCv+Xjo\nVEUR\r\n=KzM9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"0a3d4cd88c83f10b59b648e13be6c05844d5a4ec","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.0+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.5.0-rc.0","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.4.0-rc.0_1560331122711_0.9754028565552677","host":"s3://npm-registry-packages"}},"1.4.0-rc.1":{"name":"@yoast/configuration-wizard","version":"1.4.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.4.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"aa969d3d8df5a6fdfea751cde92cbdd14f7cfeb4","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.4.0-rc.1.tgz","fileCount":18,"integrity":"sha512-AW1CplcC0WtyXwI+IVYxjKCa2D92hhx4F1Ye3RjjFxQK/d/gz0S1sIO5f4Jzn7/Ey3aVhq38UnRLinniTeM/OQ==","signatures":[{"sig":"MEQCIFqtPMQeIJEznKW5vBHxni7OXX7LDqRH9KRgCgQlUwfvAiA/rwUVbRpeNWEoFQ/wmFb90nFUKMUteSTa+AZaDbJ0Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEeNbCRA9TVsSAnZWagAADogP/RRfC9kEsMRw3bO+jZAn\nMFSSMmA169lxRzooH7knyKfN0BasmKYsBNmtjBihEgPNVpRxPN5VhuoFTISp\nnRHVytDyPkOL1bVKiHuSNJRWpfCuoqhbPgiBdVj0ivHyijFldFyF74LYCCIU\n8wt7PQqY0gsraTfs8fjiufSnm/Bn3A09q+MdKhOG11e8AMHBSl/5DfqawiMn\ngQdqyGmLbEIwZDPTMecPVKcaYxVrz3gQi8jPblxTYbuGodk5JTxvChKbMdc1\nGDZW9Lpn9jtWeSK0veWxnXhbYcZErT2n2CibWw8xKrQ6WjXLJ9AwksFhvSCx\nSXe00SUvD1UZwaTlYRA2wjH4KKf0zAnu4Es5db8wVuEgEC4P3N/ciaCG2oG0\nJvQq+Ts+EU0c60F8BPl1vbLF468R39M9GwKb5mC8yEbNnjNXJOX0bCjwncqy\nqLE9Rf0wBLzVG/QMIGEVxuX3PY9H/N9OThIAEMGbvT4gMOWIhXxzFlsQfIts\nsHZC/9/5271NTGR4TD+9TQ+MKV2K0TK26PzM+/e2PNkqGX1PftWzSSkpXeaL\nYB83IA/xtUKBp8yPhozFhvdVW0+idkTl30KlzXKA4xjHgqM61NIIiaf8g9Nn\nBhA/UMPhL1FmhMv+SP8EthZNVxHfAAB3kBnrAXLK/i1d1pIdF4ZGh88z1+iN\ndLBs\r\n=+nbD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"c3b7111d9478ae9e51f83b43baf22a3379a137c7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.0+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.5.0-rc.1","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.4.0-rc.1_1561453403213_0.9767804835688074","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"@yoast/configuration-wizard","version":"1.4.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.4.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b795b4c243df548aea2041ca32c47a18f5909e21","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.4.0.tgz","fileCount":18,"integrity":"sha512-vfOd5S7bLixAi+YXhGNbO3Vc8tyYPbTGEa+vNW7G4AaNaWZpQwPTpHlBlposbicP/VA/+lRb9ywILQYn5ws7/w==","signatures":[{"sig":"MEUCIQCK0vUipc3eOC8pSuUrWPVpOrfcDXmXXRxe/qeP1SJELgIgIc6hEwzqLCYgcyYS+dm5XQ+83vlXFaSX5INDTrvQ9Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdIwkeCRA9TVsSAnZWagAAnokP/jwJHX67YNPB5pTB+YvD\nqP+F/1Kfr0rBZf1S2Nid8nCdJil/cSr3Wtqy1Lj08LVXDpeAXPQ8+0NS9k3+\nENz5a99kAj5lxKW2rilLzAx3q+RAHEtIK1RImzFHq6TU/i9WdvnTf7ZwQObT\nxxSxQd73LLOKAX69JyqAPp8ponkH4I5HftaYmjYe7kdVodvutmcPxBIO4rkX\nqnie8z+ETMaHZbcIfqIUiIOnuP9EZT4cHS2JZRHdB5TxtkfXsSD8UIQW0MIg\nv/pDfFKlUaqFiWvASndaNQ1vZOcA5Nu+kX/JsbK4sziKCy48hzGd3XvHW6wZ\n9nwSu+RhKu11g/VEqAbFBM+1cFH+S1lq0GMFxVJEQn87qDilGU5HqXvZNSRD\noXzh0Y8w28KjCxNkMKH+wpYJFOgrA6mlF4FXznmNFwQc6KyATWOuS2kwZUvC\nEyOEyCSzxQQqSHZueo+dG3EOifYh1JKoMZJvf4/+AkHZWecvLVAbxbezpFJv\nTyei1N29SB9ECiyTewLdaAjYcuonB6IhYib+MgCZQGJZrdn+A/pmhhzMjXdi\nYCOx5yd6Li+HNj7VTC5G6/LKIsuxVdyC71LVzJe0j9FwidFGLNCif8ZVUxDP\nYzSNFT3WCCCxZ+EJtWBUNLcwqt9swdzv2x4bsLxfoIj8XW5iRYLN0oojkjW+\nNJIs\r\n=WAJf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"75244c02557542b9ca9c78d9533be6437d42fe12","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.0+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.5.0","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.4.0_1562577181213_0.14834611684202148","host":"s3://npm-registry-packages"}},"1.5.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.5.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.5.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"e4cf90efb879d48c218af0418b37aecc050dc164","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.5.0-rc.0.tgz","fileCount":18,"integrity":"sha512-LE0piEnDlWc1Che11AxeI6gGrZwP3cWrCRNJGoHUd/tNgeEf6wdI3N/AYvUBIeK+wVGfBKJOzNE/Oj62g+5hmA==","signatures":[{"sig":"MEUCIQCU+e2Sf0/w+OfsEUqOs6MibKmFg+H0D+x+rI6aWzBCkAIgY9Lpfe8EbnmD8+3wR8vqH7ANbHJY5cGA+OAF+GgU3jQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdI00uCRA9TVsSAnZWagAAOooP/iSVoDZdwrNpIlm18L54\nvlZqex9oxkosdwfEsRNzpHuLHbTedQ7s40fFINBk09dRkgbgr8G4sY6vv+/C\ntpj1tONcVtdjixe5eYkmDxTu6b22KwtaLu0audum0EBzrQMUMgtrSBs46+BE\nzamE+ZBe/whstPVLW268KJlysB+/TsLduauMTa17UkS+HEktwAkNS78hWDJg\nWl91rrin771xsurSfBYkpuTay+qBwBCmEqI7YQnpjOW8v/o3n0lKkC9eX2Wv\n9dn4+convc/fxig5WP/1FkQ2G9YDE26slxPxNthGpokkqO2ybmuLUEFkL+nK\n9ho/Gf42WoYgh6n5v/Cs1CEtB4/V6b4ycS+fb9OKPJnh5A3xRkGjuG//JvE6\nMoF9eBGyCiit9PO/han3lAZAcTz7XB7YdSqGXCTPm0T3ehOeNOCbzjDqvOum\n8Hq70efaQTFaCJ12kWWdJaBDHQDPWLsIVEnNMy0uYS7kAfG+onNAs0IR45vh\nDR1g4zbg0FAw7PV63ResH9Y67fAH3iyrybfIgdYtjd2jRl/KYV/s5aZ0fLR1\nKWPMWDsMZ00L9K4azxShipmdvMtFNiWOK7k8CPDJJIVsI2CNHSG92EVKpAgw\nhs2RDk/m0XlmQHUrzGHfdHRErGinF+V5GXV91QXbO2QzAcQx1wmQEIpYHD2+\nW/kN\r\n=seR+\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f2395436c34672fbc6fc48aca29ef23d9067d75d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.0+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.0","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.6.0-rc.0","@yoast/style-guide":"^0.4.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.5.0-rc.0_1562594605759_0.22456186573268688","host":"s3://npm-registry-packages"}},"1.5.0":{"name":"@yoast/configuration-wizard","version":"1.5.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.5.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"90bdc7f6e21dfb2da1776651e2e9f3f6cb8dc3b2","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.5.0.tgz","fileCount":18,"integrity":"sha512-N2AB2MJ2dEZRNd8Z9bNbdUapvHa23g2QKZIpqKxOjnXTCLKUZRS06ROffYP49W8J2lWE/6b657L6RC2siwWKEw==","signatures":[{"sig":"MEQCIB2+kSSSdKZGKBYBmixlvTPK0PgJYBfaz2P/c0yQhwUnAiA54q7otgpAIbCxrP+zD1pHWmWxGtv52wswULYZ3uT/KQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf1jnCRA9TVsSAnZWagAAQKgP/iA1Bu7+WiNmrCCaxIXk\na7pTGoHCdluDZVK9ToENo8+bk7r4KcUBpuRBRYEzW/wT/appAgZdv2SOXZTY\nf8FsfvZnEeha1ttYaRDXIpp/5gxSXeorpyeCBLyyX0wxDOh3riFAjBuN4QQ7\nhYLPDAcFQ++6kImtokgxLPlEQTrpFE7tFm0czGdn9cpc4Lujy3vBH5oYNLpf\nIVoVvMnScixamI5P5nvulpwvcB3rdAODdqzUzlWfacJSYRaTbv3nwAsyzjtg\nlZOXdN+qL+OXEScFyA+DKueueH5yplokzVba/J9b67y9satlBsNjQqcgo//P\nzfV6XMCEwGNHzyNR7Ul+iE9AAkoNON4ChWdvpH8UKpyRBHnxDivcwYsrsrSg\n7AKjX3A4fQGC0V7DftgmPZP60/zlUzIW05B2TLNbNWs+ssAMQuzzgEh+sqKL\nQzy0yYk+VWUSxmXAvCwNbPnMweiT4lLDQvc4kk524s5fpxcck+WZmJUn/Cg/\nE8HxU7L7AOIczRYN31HqkwuWI7l2aY2DFQbIm5blRS0P55h3bYyx57U7Bxla\nn94qZTBg4vJemBvYRINqiuItPlDPlo1JwizwOo7ggcY1p6XG0DJvs/0OkXQF\nKOhh5vu8SQghrNtAvrReWgnMoet6D8eP1/+laS9M52YRe7ncTPFyKPa+jOWO\nQkXK\r\n=Thwd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"c040a1052d040d549072dbc75983e301490b52f4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.4.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.6.0","@yoast/style-guide":"^0.4.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.5.0_1568626918741_0.5237752684267647","host":"s3://npm-registry-packages"}},"1.6.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.6.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.6.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"5400acc4d878e6a9e8fd8fcf3aa7491faa18e8c4","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.6.0-rc.0.tgz","fileCount":18,"integrity":"sha512-61zvB/0oQxtm0AKAcrtUQtQ1uxtJ247TwW/YZJscVIHrHxBkzlX/MLet2PT+j1gAAsSPpjJrfPp5PjTd/kEG9A==","signatures":[{"sig":"MEQCIEzOitjXCRl+GdFZXSZFbySOi2kktWv2I3FCshV/In0YAiBYySsZTlR10gNn/Kqf28hYWyPseYOhcw5kasKSOxQPiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgKgbCRA9TVsSAnZWagAA3oQQAJuhVm7FewhqyYXzuZUb\n4IUo7u67m5t/ngGajWVtxRw0bqQpZBxbI01sRIhD4Tb7KYoGryxnzLFKBUrh\ntSAnCriGPMBdUG+gKVsWjUtb4BZi1WgFpQxqeanZDUhW8ndpWEgFn9Xj7eDI\nsBrl3hD0+PwvrYqQ5wPkeQ0DPkxnzLFMbcWlb3VVPSeSU/aggxo9PrQfHQfc\n9P+u+d6YULamSZsx08bJwXTCr0iPqnz1bFV1ChbSUJ/F7EeP4/kXAGluPzMz\n7AcM9QF2fBQyTMuAfSNB0DJt4R7KQCMgWoHLELsLsQ5FcyUPxPrOP2N+ztDg\nv6iw9eOucVBBsEdokkbv3wn9dgaWRntVU3EmyMEmoz5Atg4qw2o60gbv99Gl\nqwQ2Bd1G1YBxEseXlAfFbkRGiX8WeuMuFgCmwCrq1WKsCJeuBb/S4UPG2BeG\nGYooX9jdyb7PzAF1WZ4c3WtDmKUGWTUvuYgB/O966eD1RHqqRlBlwseSxL9q\n25gveZA0uVNsEQ63EkJlU0wytrjKJN2ijkpZpP9wlh9sP7tx4bEU/+9w9hNC\niQFQE2rPz3M6OjcCfEc3eldru07dSdX9tFwonTEH+hLygOkEI82OdnXsIkIq\nJd6bZEHc0orwQaBWlj5TKoWXwlR08kXH/LhPTJNIfgqgRRyJ/inAboTO4ThD\nTZYg\r\n=QFjE\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"2099d0e3364246ca339bf2d5e3ad526380ad29ed","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.5.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.7.0-rc.0","@yoast/style-guide":"^0.5.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.6.0-rc.0_1568712731220_0.30292442917408136","host":"s3://npm-registry-packages"}},"1.6.0":{"name":"@yoast/configuration-wizard","version":"1.6.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.6.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"f6d35d92661cc6d2ef6e998fa67a7afda57e1a2e","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.6.0.tgz","fileCount":18,"integrity":"sha512-WWPNPFZtiObUhRnbnZT5Cigc1qIfjiBiMVIVDTU2ILjUR8I30VBuodayB8IjKg4+K7w3EONVjHIzxHga5PXCNg==","signatures":[{"sig":"MEUCIQDE0aDM60JPh5xXVISh4Pb+/vKE4+U+jdmfbIoVxqV1JwIgdpaQ1Ua+9YE/amwhTfIZ+tom3lpiGBb9z2kq/5IguZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkb6jCRA9TVsSAnZWagAAG+MP/2pBpFufc4IsXHUmsEl+\nYdVLmTbLw5hsXpIGIrrhKeO33EpF7HY/yUpvpyp59KnvyhMVqwALOZ9o9uv+\nlKHIHkzg/vykOE0aLh7zHKEfJUAM9rXQsEKYwhu1ltVO4PdcfYiF1vQt0kox\n7lsRwvGp2xNvrqEIufmYe5sY8OEsoMzGQphmiG7BaPwujWFpyDhY2jbZH4Nw\nNTh2565nSwC3Wjo8+U+W5eBx3EKf48QC0MFBhsL5YLY15ZjNClvGpple14ob\nClE7a446OJVizEg7XJLJZ/hHg5FEXy1YI39saeCFmAJkA+0GpbesMBUyZ1lU\nAm/ELKbQPzHDBVyerOIwUXnuHoSmcX2bzm0k6EuU9YBEQ6e7f2/iKBZhmpDJ\nNgVtBl9DBYEe5mqCBW1t+WQSwZH32gd4E0obutC+i+TY9ICR6+L+frPhzCzX\njCJmjKR1r+UT072vY5lNQZE2vAucTz6CaRE/dSfp57KEasmxjwcfrlVGIzmJ\nJxhEeGFazTGyNLUGDdwp/WXPoYDkfUwbx8FU7HtnT9fFxT74gDz7FvH3FaRq\nV5ENQt0zpX6GDobgLL2IlMP70mQg1dbwJAChQmJXdtNf7rvdS0B5lGf56TzZ\nQv1EpbDKHtkuQVm592AZ8h3EZvuD6+M1oJxmadfCK5TQIKk2FsSNXhE4Vxgv\nHPe1\r\n=FOHp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"70be804cca2061567f1fdd2a7b26c044735f015b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.5.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.7.0","@yoast/style-guide":"^0.5.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.6.0_1569832611139_0.6004279812137483","host":"s3://npm-registry-packages"}},"1.7.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.7.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.7.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"bb6d7e9306cb85e9fd92cd54de52204df6a5027b","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.7.0-rc.0.tgz","fileCount":18,"integrity":"sha512-us3CWLRkL0xo6VIhVVu+jGFK4mUA+ton/KfWOHhJhJDYlqfS9Duh3yQn+9pK3xmX8sLL618qWs99NjXHNXANOg==","signatures":[{"sig":"MEYCIQDtn5Yca0WTSQS57PGTuvuM6VD5WODMUv2uI13KDlGopQIhAOod6uVUv7Fu2r9xQtF+W4nr4sMYoogzttFwegcVE7BT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkepZCRA9TVsSAnZWagAAq30P/jdcsypW358dkyfGzaJK\nL1c6dN1W3PW9XOhhSalBUBJpxajVFIEHgV4PcussOmaRR+QWdCDqGg4Bfvh1\nSpHPw9BIJY8fPfVg2j2xg5ZuNmdvNcGzGD2kl+RQXR3LoDU1mC0QbqG6wb23\nCPDIF4aSjtcfEWost7fgIuKxU68nekTr/lV2/WeC/YqBMnom9dw4sCth11Ko\nim61gt4cLF3DvpjpyQ+Ck+VQkNel8eerjOyNlNijQNKk7YNAmaKMLnsYdZPz\n4N9aCZixKblnFsESngloT8JWv4K9goSDaBcAt0lNFX+9gRYXoRsnbt66exM3\nv4H/XXVgzovtKIxWdKgL5lIgpEjJWSkuFegNi23bSoeCtwx7xAoVde7njVrA\nLRkMrF0/hXhR7mTs1rX/IFX0NwWFY8HXNbVYivVfGZAAPARV+W7jMyv0JD91\n5gaPjxuUTOtXSIx0QhmGpbF5eAtjQg8DXSEoucSaP+jXLKy2GYf4x1UM17mM\njJB2exnV48WM7GQX27kD8oZQMVk04Rexx9uTPINmJdCLUmHvomiZ+HCwUnkv\nNNAhHJ2pbud8xf9E49VKR73MZrcSW2N3qcBrZo/2PNSPpleAl4b3wuYaqyXY\n/re+kbqg2OObvpdfGMYxjmS7VAiRM9PH2J2PXKAaw55FIdcddHn4/FmrnvhX\nL6vf\r\n=PKrO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"6f061066a56112212c8fc6e3af7979449164eaea","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.6.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.8.0-rc.0","@yoast/style-guide":"^0.6.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.7.0-rc.0_1569843800898_0.03130196797530127","host":"s3://npm-registry-packages"}},"1.7.0":{"name":"@yoast/configuration-wizard","version":"1.7.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.7.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"e43ca8662241a21e07ced58bf766fa83e0892809","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.7.0.tgz","fileCount":18,"integrity":"sha512-BYIdwB0TEuxLSj/Uw+QY+/nUHlST8axj96Kp5gRMS07//i6G6jxcDsGxxj0LIkMiRhwwCMZgRsilIfgsg4TBQA==","signatures":[{"sig":"MEYCIQDHet5t2Vv2a8FHQQ38mwTFT6dBJbzR6XZPFRTczZBJFQIhAL0m1Wjpx8JjoSKc18hEPB8aZq3hxC29tbGsBeBzqwIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpEfACRA9TVsSAnZWagAACd8P/iuKrK2Db+xGo70LaoCe\nV1EMGhuf3TKOohIhOmgR4yYmks7vIkurewJ13hyAw0vJHIV/d+lCYQJTxOQw\nTToT6FrzdKHokiOH2n6car/AtjahQG+PJSYqhfbSG5StAFZ1WuWNgG9sto0e\nqNaYtOJR53wqBfnQqoWOAwzUceGlkcuAWPMNpyJaC36p56qrwX9F3F8AuS2z\noe+H2xcE6sV6LlpJjezp3WFrvx1RzlEDB0F0R+cU750IrwVItYumJ4L/CIrV\nzsoa+wOSNlm7YgY5EN7k/w9kVpJLSzXL5TwxFhd+3HUJisj3oQs4OikfQhUH\nUcbAbcvrHDp7gX/Xjm7+sYG4d6DOR/6LL5Q1g5jGh/KRAwvNXKrNx2IJJW7D\n6IorFCz3i7ovLuxPWJkqJT7kjqKHp87Rgp9wrQhjptofTLhTG+24wUipU5mV\n9lRl1YUMd06NB9iWfD8GI24iZcLFVK6KL00XxYWMu0NfCCgyBA/PsS5F1C5b\nx+mWmipXNSsbxOBxVjcn7FZqA2aDpn1s2EkoG+0y6Vw0xgkvVz5LwXqaDwGj\nRvVU/t/vtPIzNcWWuVpcVV+QoulIF26ocA44DgYV2S+rSETl8AYYX84z4nQv\n8XJ+AN6fWr0lrMfW9phQovPUoc5pVJw7/keOv0rKVkuMNGZctAidKBOAhNey\n1iad\r\n=ncss\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"340fe40137448819bcaaea2aa7ddff4c4f1709ae","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.6.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.8.0","@yoast/style-guide":"^0.6.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.7.0_1571047359550_0.3360951649633688","host":"s3://npm-registry-packages"}},"1.8.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.8.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.8.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b11b53527c01848a40be5c6108f1c09d166e776b","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.8.0-rc.0.tgz","fileCount":18,"integrity":"sha512-EKOnd2fToGgyLE+86UfUSctYYp8GfEEWPcV0MpnYp/cKn9BPvbNsXK/4kMNgQ4KYc7oP1sqEK3SUOQMjIr8JAg==","signatures":[{"sig":"MEQCID0iHi3jeD2/imrnWgKPNvnXZop0X8FyOv1W4tFBqT1AAiAlvIVP9zgP/qr4HNkealnjvwgabi0ce/mY4PYhjFmnJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpH59CRA9TVsSAnZWagAAZzYP/1CyklSw1eo216pAyxKJ\nnDlf+D2Al/hjT/v4zQ35apSN0XhX6CgihvYnphgCZ/TMcSQUj6FiX5d2VZn5\nIWwz09Gnv1VvUzedyFEad4SekXHEggpdyVOmEuWRG0wc5I7z/EvS1G7GtV5H\nuAEYbD/0umuVNN4deTgpaQuFyarb4PTwDbQ7g4BbLi+U06N2lXtXMod6BeSj\nO29QKNyLGz5zyTprZosfkLkG10Vpo2wqkXNpS2JufGQ9XasDbuOJD/9pkhN/\nLFRbgJeX9MfTHSkxtyQLEL2UkdKEdM6G9JHc/eQNNCTXwpNkQzUQHjDnlTVr\nvV3Ehdr73tVBC3KpMNSm+jm4gHdt/v2NSEQ3im8I7S9FOtPXdNg+OIdRQ9lX\n5epRy1LfO6sJlU4c4YavNCcoydoQI43mnw8IlEpUqgZARE2FgedNyOT2QRYf\nbIXms9SYaDj9B4sFbsH3IGZ5MQL51PB5WInqSPaTmQw1ONL6bzioQ4HqwAEg\n00WnkkAGnCwBexC3gquM1+IMsac30lrE6LLl5nQ1k9cpLc+NG1FUjC+FtZNX\nmd/h6RXkd26gvVjtecIHNRa6D+hUwxi6nN9v7TQZybzl0jzlOp3oaQ6C/hYB\njygyrRrIi1dCwiV9wmhoHQeA1wWJA8ZpKC2fGWWyKioHghrzqUKjK84N+8yb\n+H6f\r\n=Q3AO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"805a7bdd7467567841651413c3f7c8e89895b2b7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.7.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.9.0-rc.0","@yoast/style-guide":"^0.7.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.8.0-rc.0_1571061373294_0.35230807193420777","host":"s3://npm-registry-packages"}},"1.9.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.9.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.9.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"ca2cda2a25e8ca6d9f7f3b86ceeac39459f18870","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.9.0-rc.0.tgz","fileCount":18,"integrity":"sha512-1o0IDke5lnEqxgBKnt1TljIGucsWNoG+Va3/O+0h5FmZF+B7ghvnJYmOaZMyuKBD3bBihJXXElfajapz/cwqEA==","signatures":[{"sig":"MEYCIQCKq6l8O0uK3E7OV5mMVxpZX9yYVCo3lMjg4+LGyaZyCwIhAOh9rlYk1trjblUmtaIN6cPnAHGBAhZaMXYDf/YEBb+o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtw/7CRA9TVsSAnZWagAAS/wP/j6GYfqwunisNuxK4coA\nYjJ7t1TEKjIXkXrC0InH8/ZXv5FCuOfptE6id/daBnQk9dSG6CNaWw3TxFoH\nvkXrVJR3TQsWBjkMgaz1xBGM4iRh/Ly8djQA0OcVFTgDdhAmuRfHDcM9FJHq\nK6s6i347nQGfJ53H9XY8nbU38Ek6eXoo7u/O21BetMSV02He/0Due6acsf2H\nKloLFmKdD6Dxt+XE7STrRkuoS4+6tDsvNdjUypoqyLjDR1pbv8orv5y3IAO3\nlriPsBfWPCrcP8HIPU+6NEKcMq8FCqNJawEmO8xNsZ0258Pa321tW/wi0C47\nlvFnvnoBbram4T0pxNpujhqQCP+xwExKzqlHWewCJ7WiU4Lwo+BObKedh4HR\nlVG6MPpJyY0u61rZg63jZeYvpn1GGH3ZFSOMrT+eRt0YUly/v6ynTLHkGoXe\nkJuUYEAI+79ranZpCt9S6zvmmrJkyOqJdjIXP0JE+6+Ny6FKbSSAZSyP7/R6\nBskPX4nmPey1HcDMAL2vrMhDEFEdY7NMYPsWduE4ORzX5UQgTXHQstZmRuqt\nTl+qk0k4iwEAfmH5s/EUQ2G4O3VPla4oL+utPouGQdZeigmFwfGZ0xFFsALu\nUrDT6LgjluYDaxS3KQPIsbaHlEKAhjh4UDPHJc6IxtWkDqzeT2gIZM/fswOd\n+8RQ\r\n=DcyJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"8f9b957b21ce834b15da65f3173c340410728aa6","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.8.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.10.0-rc.0","@yoast/style-guide":"^0.8.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.9.0-rc.0_1572278266647_0.5110453408007498","host":"s3://npm-registry-packages"}},"1.9.0":{"name":"@yoast/configuration-wizard","version":"1.9.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.9.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"a923d06ccaaf92878caf113d01836cb6d782726d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.9.0.tgz","fileCount":18,"integrity":"sha512-W3IxLLvYpkGdJp+7G+vLYkLqhoxRD9ShHbvAWkhBMPf8yxoL3Ei65ug87oWnQGEyd45GdcmPGrieJHYfLUeqnw==","signatures":[{"sig":"MEUCIDix3GEYSxdVAlB2eFDwHvkIAXaKlXxlbbSITtW+BkWfAiEA0mNbo4VzIm9ykcDcQrJU6l/JBTsPBrJfZgRBsth0pqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyVp2CRA9TVsSAnZWagAA8oUP/3ZSin1gFW31BQIDYEcd\nEuMskgy/1OxAsW6KMnThT7IOzuSBQAtzEHjkAUdZ4AfMbFQnl7PxqV/B58SS\n3UueOgvIpdurhStin/raCWhbB2bPH23+bylRDdvg3GVjGlcO4U1dMq16FOPA\npgrAF7J+Jd9Ioqq6kRKhKwNsdAHF3qdxTq0wpkg7L35B860DAcXtVLYFHWDu\nleYd8dJC4pzUaBerMfLcznCI9xW17V7d+LHdTVfCrARwMQS12LgyebSMVyCp\nC83/x9SnJ4asOhE5csErD84Qn9WhiWDf053LzWw2OhB3wI6tG79hw9nbgSIh\nP9LH4iNJtZEo782Vzvvnz5B2hSWCoqqQRhymPewsy4ilzxvHkvrAXdoDfY3T\nmuvaWip/UAtGKFMB4+a6oTcfnsZG/Ry7KW2pO3oXDoA7nA19Ay2aMUDIlZuB\nKiuueI+QKLlR142PXdXhoa7TD07GAtMYpLX3QXqOoNXj0QSqW26CA816jhbb\n6qFRGQCgMZvQaKfaxsT0QWyVf53OeR1z3Etn7bGlqW5hbxx1ax9L5IRKkkrW\ntUwrNa1QOmxkLghkQlY4AljPYzv+eKEBlC5xIi43q8S2wfqKpChnw+dV/gKT\nv6PuVslYT4btet3UaZnI+cIXclOErG0ELqBSxLBcmRBTH5dXMDpPFlfL2H3J\nZ9f0\r\n=6iG3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"05aa5db25b17341f90a017bc27fb706e9fb333f6","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.8.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.10.0","@yoast/style-guide":"^0.8.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.9.0_1573476982393_0.032378756774943396","host":"s3://npm-registry-packages"}},"1.10.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.10.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.10.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"6565c43b00bd17a9403a547e7d1fd83887663989","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.10.0-rc.0.tgz","fileCount":18,"integrity":"sha512-I9CqtOAB2qoEEJ/rfVrfq0OvM6oerIaILFy+y3mdTu0UoPC0KY/QtZKf0aweuBjI+eQuhmmuTHmlTX7tm1Kvbg==","signatures":[{"sig":"MEUCICzGdXysDay1psZ0dli2UjEnhRcFL03WP+Z3SW0DFXrjAiEA7X76MMc2gJCFJMwq4Yyiu18QCclUCMhvjhad29PikVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyp8gCRA9TVsSAnZWagAAr6QP/0IZ/VL7uYHd7ow2ykUk\nC0YLDPL8Xn6LW8Mfz9dF/Abzz9+D1mkYH/aGzwMvKefVL5zGSEckYIBQB0h7\nBqder6olyIodYGN7dlasxMs5r0ePjKBSB9QV53PxlofYylPQgqEmO9cqxqj1\nzkEnACImAzZA3zaxsIV60QB4ZOYck9tO/Vj/XvyArcaT+Cg2KcDiSzenu9ji\nfZKx0FaCHyjeh45+z1DXTMCxjKeLaVenM7ldJHBVC8Hq2I7W6JJO5Y602YW3\nQZsZs38qsE3/wI/2oR8zzxIHl9YvlREQ0ndWjsAJ+Xl0GTH0M0sCb4vCCYKn\nMwilLpvU9QmgrrdHxFUAzrbt7hee7zJvauUSX0Bl7fuSs/JKMsGoZD+6rx0+\nNCfCxoR3S2lFUNCb497WMLRgmVVsPX9c117luFgl7CxlOwBnoFhjpJZSTns8\nV9F5g0d3Nt4y7rM0Q6MhsDMz+MZTW2RIAJ4KMxDFUeiKz9nIEllFuYnF2FlD\naOewkIZ9Uho6Qz+V4pkrkVfSFORdTPs9NEvO2/mL2mvVmO+dXXWbLDOogOro\nHgLVGXnbUFo0QqkmG7ZM6OF14cQBOwGCmPC00O7nsFHFrk3vx0PSbEeI+WVV\nAlGJ2VhoDL9HiNuazaOfy29abNuHkSzAp58mTmk1OinOYiZup+3mTk4k17Kp\nsydx\r\n=az0M\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"c0a08b7458f1f7a30cf3831d7c6d43c4b1f12d8c","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.9.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.11.0-rc.0","@yoast/style-guide":"^0.9.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.10.0-rc.0_1573560095843_0.09268621876358596","host":"s3://npm-registry-packages"}},"1.10.0-rc.1":{"name":"@yoast/configuration-wizard","version":"1.10.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.10.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"1296cbeab2099d6799e3e757976d1198210ec66c","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.10.0-rc.1.tgz","fileCount":18,"integrity":"sha512-fDX8JDm8wnX7lmr/q3eOhzibzhv/8iftLbIDvao+Vperhxd76WAkmmt1SuJNi2l2dPMuhFy4moWCoTS0kc6D9A==","signatures":[{"sig":"MEUCIFlD3DBwLWyJcvh2UUVLbRTMUGMGDPQYmnifYa0Ag3qQAiEAqwR+nrxhLffDeBUjKmubi28K0EmuCmkmrp8medKK5To=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3RobCRA9TVsSAnZWagAA++MQAJkQKwDkUNbnpu36shCG\n1nZO1VA+C6y/1vSAUM05tORQtURHlyrV40H5u50kk/tLBumSnMgRsCpRZ9dm\ngeC/VY+D+3pqLs5KjTCVj3UKmAvyqw4KGy8YF8b5Aq8wVpR+l2DJN1DyzxOH\nveimqcwXVGUd9Y45aTtO2HuHIE7sGqgxN7MjKku4FrqfUEs+wbgzURXgBD8c\neFYNnUYJTi0eUNBhBofTlDjT2R3Q4vPgI1VuIcM+4CQ/Gi88siBlmFg84nry\nrPlDeW0Jhp5P6U/buNGuy7a6SlyeJCtuOc3Q/cngVNbbFx9qLAg2OTGjwwqz\ny8W05y4vq0QnSTQKT7Ysw69tB7vRTDvGbc/c+tPKVPk9suR21qn6FZaB1+b5\nXIxiRkhWtc96Lw0EbHhSbKQUmCSAmU5rIf9YvOlMtFi7XS8wU6vPF1qlRp1x\nzBLoj0epGai0kOO6oBKia75zPEyNtNLNf975m8cZL89790J9EY0DPoMgbEFW\noSTIPRNWHRZImni8B94kRZRAZLj8ySmcCN7higP/xDYVGywH6hFMx58a+KFo\nw2IfZgJb7we+tlcmAk6urB8BvJ8qrXdKkaeENUdU5zmnFtrhczC7Lfnp2ciH\nmSZL71mfEfXTOS0e/ju2RjfBoODpjTXd1950JmTXxzZSeZi0w/QI6VxrFetC\nualy\r\n=SVW3\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"9d11f195ae9c624a943fc49e55f53b5419eab067","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.9.0-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.11.0-rc.1","@yoast/style-guide":"^0.9.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.10.0-rc.1_1574771227397_0.019633554320235946","host":"s3://npm-registry-packages"}},"1.10.0":{"name":"@yoast/configuration-wizard","version":"1.10.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.10.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"9c40507620a5c2e2fb379d44159c56ab4a1ca5e9","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.10.0.tgz","fileCount":18,"integrity":"sha512-ubGYzp06+zFlng+2G4ndFGBT16f/KmDi1UAx0WrGTE7JwVuDCnxVISnQmAbIMaPugiFVmnEXa6MThqzmcSP/dw==","signatures":[{"sig":"MEYCIQCATq4ZK+2tkpY3ria5MniW8LBoT+7NlzYLNbWqB4ILBgIhAKUz84Iqdru/iJCh7kUJDL0v5Rn2TxKpaNrqvpqlWxiE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7j8bCRA9TVsSAnZWagAAbMoP/jrP7V1gByNTNI8JjfuE\nKwO9cwv4XxV8eVfCDzd8uWwaZPwFpblXUWmTlWRg5oixeZGDdNnk7xwYh2Vd\n4cI01Zru3tNC7DEXSRuLIhD3feacvsFw54vqCQjYUSkFVKMRgGzmDfYeBtOJ\n5orDRXVoNrDhAvt44BuGijdIcco+q/XdCjXD9e2I2ojDCs1jHrR4xXx8IxBz\nwGhMuc2s82mco1v8MQaQezsWH8VrZkDZd40D5qsiJtq020DSTAG3wxoLL0Rg\nlaTr1+us/esfS41FOs0i9SZ4O/YnhATOg5peRemXQr63uM6i+fN6/12yMy9u\nsqNmUjCruLSHR+4VpPVBwoVYHz/8kAOmI+m168fevD6D9EJOpFfk0Kr4p5Zz\ni34ghE7WL5mBsc9XvLpPE5oPoB9rt2uZPFzuLwtDf13BomdxatuABMxe4VbQ\n2xGvlRWCMi7CY9AuPy/2nCMvRfetX478mU7Ng4CGia/XV07w/dbCcRlc0mcQ\nPtR8fAjYbD63jnXoist+51DO5ywWS/PRGsQeN006p7DxCOYnsM+myFI4PUlp\nojrV7YxLTiAgRBEDebioDCcVhXE8yOFAx3+YjZUTRUWVC8xNAS7g9G0pf9Bx\nX4ITqfUX3r9U0W/MJHlrpf+NLTowjCAoYoaXKgjf+FwRtUcWgZkJIWnmGXpd\ng0A3\r\n=3vv6\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"811942da4c29cf8061e707f714720a19cd2b97a1","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.9.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.11.0","@yoast/style-guide":"^0.9.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.10.0_1575894811577_0.9586687369858775","host":"s3://npm-registry-packages"}},"1.11.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.11.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.11.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"aac6ebbe2d87082ee87da04d81a4808cd9092e28","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.11.0-rc.0.tgz","fileCount":18,"integrity":"sha512-Un6huT83S1De6Yx+nVZ0OD/mN/POFmOMCy+kLRExIyP/KtFdoXe8GKLxcpK5eShkhBkk0tkYsY99FAW8Kr8Dvg==","signatures":[{"sig":"MEYCIQDpYtzfVDBJI4MeB0+OOkj4SVBCItZq1gSaQl1ihKcvIQIhAMKV1oETVqnYYgYVk/of5gtx7iYgLLyYsZ5WNMlhClVm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7lpLCRA9TVsSAnZWagAAmKEP/0/QBYyED6mx/ZjF1fXw\nmz/eKSIhkAQfX5B4xp+9mF7kYCC5seCsCNEhLYF+glUlgR/PB4SqJrAZvmHU\nehRjKcSzXR+fa5FFCBXZQH3tw7hlW+IHKazQK8HXihOqq8Bop42GD/cPYeRv\niIT02RotiuAdNhSO4jvJmP3rVH3xhbwRrMoEoWfRUsqTM0wftglSVnFwceil\ndCRGGvDZCwnI5Tijrgjabvt/eL/5oCVw8/MTjhrO58ePDoXjgsKbmZDTh7wC\nWIn6hHexPs8mnXdPZhs6zDzsbqgatRjJpJKi6BchnEnOZslKu/VpKzEO97jR\nOQXdJEonEqLxIrfknowH7b1jU+XbDG1WrCLZp6JkCwnUUl6p5KyZvThTGgcr\nGNP7DMqKja7DrryHVdypQQFe46Rm9w3Wa0AfdjO9ij9wsWqRgKcprcnDYejO\nZNPtgLD1IHeWgsPHAXZCP2bDKF/DNVTDKrhxqkmQZpKYyzZ0kldafOgsn7uw\nTgNL9GxJxvx23eZlznV1V49dhUN178FOni0fQ3kyJh0SybQ60ZORhgja+ELk\nM3BRJYsr2Mx2FkivhxtE1nDWrgX+WG6r3vshSHZOVXCuhJyw/oWw8jl2Fqta\nW/8VCWHga3R+hbQm/mW9yd6EAbALNzbQBc0vpe3WUZLRbtUvbYkZtZIOGdzH\nK/em\r\n=YMCd\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"0584d9bd98a8171024374c97364fd86f15de439d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.10.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.12.0-rc.0","@yoast/style-guide":"^0.10.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.1.0-rc.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.11.0-rc.0_1575901770853_0.5678641216019351","host":"s3://npm-registry-packages"}},"1.11.0-rc.1":{"name":"@yoast/configuration-wizard","version":"1.11.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.11.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"f3fd1cba25d4de768c91e13bc6a25d317c0b5ac8","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.11.0-rc.1.tgz","fileCount":18,"integrity":"sha512-BJKyxh9oetViGTVWgB1etIwaHTFRDUCPpQg/LezDVkO3rj1PR/6cEOMSvb02G7Af+n4snrAN5aQIuKE/w4wA/A==","signatures":[{"sig":"MEUCIHiEWNkleZlFNEBnySOI2xp4Tc4fhPoD3leqYJRC2qNIAiEAht2wutS6WtbK2CHTp1Gg/+lKLZKYiF9ib75IthllW/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd91QYCRA9TVsSAnZWagAAbY8P/RtMaQQs5bVgUZ07MB7R\n7M9xfXWQjYJ++I4gnLMYK8JFtMzShKD6dg2Y62Xgw6QZG0IvnQZzmcCDGSbG\n/hBJF/YXoYYxeojARoW0jCDdSLVvxKKbwqYbdBPiKbw4rD5CNKnEeAgnnYrM\nl4AbGg3iXag9j/X1FxJrjEwKO1B4Y4ub2QpRTovdY6LJ5vYyagmZ1mPpkqHn\nSu597QVRFoduIEJKL2UMOA2Kl1KJNd+SA5YC5U252sFyeeEfJmEPJaL2qBjR\n1CD2W3aP+HnsUbHrMyY3oGZLDhVdqw3IYxmlJ7gWDMy5EeJYJ8r8Zs41tI8Z\nemvZ6kZe9R8kDeu83pFEEX6J1VomcU7BvwfOYhJeWNsvXpAf/gmdEYmkvqoB\n0HcCFFZ6Zq0ege+mdMlbqVcZV5zvyUd8XrYGTfK8SDgRTgPkdBe7d+/9FLch\nMzbZy2RdvF8/JYRsXskOGvDSwxnEgGBjIajeAJ7stFsBAQS1vpfQOB72JGrJ\nMFyPy3GY2EU2ab7m+n/tg5n0Yzj0Bln4NqfOJoMM3Yk92JiObocO0QzEcO3F\n9PXvwD4fMgrjghsBNblK7rE+xqnI59x5didNZbT0CTMkYBJ8xJ/MXVb4i1+l\nVS9oSyARyQn3EsBHmwclgA4VPXhT92ysdOFS78968KT3DfmMjycNAOMvtusv\nfNyJ\r\n=yB7x\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"b811be605d7666d21b8d3e130a487e0f6e92fd23","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.10.0-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.12.0-rc.1","@yoast/style-guide":"^0.10.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.1.0-rc.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.11.0-rc.1_1576490008189_0.1421618349846232","host":"s3://npm-registry-packages"}},"1.11.0-rc.2":{"name":"@yoast/configuration-wizard","version":"1.11.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.11.0-rc.2","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"30f8383bca17e9ef86c2ee131f651979be0abfa7","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.11.0-rc.2.tgz","fileCount":18,"integrity":"sha512-SZHNNn8j36wQ76vjMlZyK/IN7251QxzdwMhFDti4a5vrOtTG99YV9aCRCKtQrd8FlFR3FGs7bELcB7ygZ0bLFg==","signatures":[{"sig":"MEUCIFFNXlIU/bbmzuFptGplSicYAPofsyppZo9m1Ii9LQtpAiEAspwB6GCGORzDqRgfFEU/Bsr3Y6DMzfqREg1unR9x7KI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd93pjCRA9TVsSAnZWagAAyxIP+gPtoKMMvhSI+Peco7j1\niTT5yEvfOanWLtLUwlnrWBhvp7zu/R4CB3MPLMCXTB5ikSfGT2qgB9WTNH49\nUzvO6e3pzzR6iicuS/hIPTbc4NOa5NDQLInL+/c+CFMlr6xvw0xHjexIR/2d\na/y/+S6zyW3RzlMA1cwHCCoQ7ZjJakjtTifgEj9u04XBIRHsqW+f+0SnvxHx\nCkh3kDRxFfRQi1RJUhDD5RqLzy00lvxjXIdE+ZCFDsob0Z7Uj6NW51niU2MA\n+TaVgOo0P+3a6lofzPI87XpIj3gXzvs8JXBsci2rcJeWx9JvQeumRnYm3k/z\n324jGDhpdv8iVyThS7fUT8NDRRCrO81h0ZqFLX+V/9dZfUzjyiQKiI2ReHPf\nryEilpsf5l7EiTsH7dxDngje2MKU1GQLb6mibobVQEfRx39HiEpJQBV/xOty\n/GRsCCMImPrxybxnTFuUB3dEdDFnOybncBtYUk7+BwPc7SSL7FI2z3iVvueh\neLw+PzFTpyEMvc6gYVSMHVwVdBWUfvIIahpElAOcuDaRjbnogpe3p0wS+L4L\nMNhiPj+y73UMxfWcghrByGTLdolQuDpXGoEiyoopsI+gnVrPTJrWuCv+q3nf\njdDrRRt/rlq3S4w7bRwtFF2ueX9la+BUnaNjIZYZ+m1aJy0QWKumoigKhvgQ\nOLkn\r\n=6SrS\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"2d8704d3fb8b11a8f66f0fc1a2c89bc41bc64639","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.10.0-rc.2","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.12.0-rc.2","@yoast/style-guide":"^0.10.0-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.1.0-rc.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.11.0-rc.2_1576499810590_0.9259501797755798","host":"s3://npm-registry-packages"}},"1.11.0":{"name":"@yoast/configuration-wizard","version":"1.11.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.11.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"cd0593dd78af260dd9132883575607dfb6cd30b8","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.11.0.tgz","fileCount":18,"integrity":"sha512-W0dR+ZMBb1u9Vz5gnNirHatlVD7nHjYeYgV3nL8vluXc/HV5cPKo3VJgfkE568KoRYuKTShXjlCpgBA7SIR4BA==","signatures":[{"sig":"MEYCIQDTaEC2+Zx6LSnHuDcs4jGWRp6pnIHuZSffYMEvkpu47QIhAIuClp8ORHeEb/7D4hJ0Ku0mSNnNVrRKB35NOIIRQWzg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeEwl8CRA9TVsSAnZWagAAMd8QAJiz9rj5CO7mJZPMheG7\n1KEmZ9J412W4XPlx6w6NoXhkefVqKmOgIW2bgZNjad9iXcilf0EaOoKe0lkQ\nzLiIMVARa+8IwgQb4azxHze07bN9gHVpchV/Ot3qBgiLokkl2cfom99SBG8x\nGPVITobHNWV5FGYYpCd7PQYUzzgppdMYKL0j6qED+sbPZDkLeIE6OEzBDAqY\ntDBLX/xndEzxg+GY72Zgn7wc+EBV2/T+PQCAPVNYkMQ5CW91KhtR6yEzULWm\n3BgwGdmvD28gs2zaUDJzV2fbvhABGxORxX2KHB79N9lzoOzPyNGpARgqYc7i\nbJutAm5F8On216pxtbieK80OZnALMNW9dXd5OaoS1sBVfCRpo3ycMHfX7XOy\nShGQ6RXuOPCUghN9jufWHj1OiB1rbyoINYVHyXd3g7vH6IqRyeAMCFativlO\n/+6076bivmkCFMcIwpn324Q52KjgVOJa3GK4qki7nvMsAGEoBiZSMCUJOmvY\n/zpn0QK1FtJHFbaJw2RMB8/Na+VymhLYJlye4nZsO7MakPUUPTJ82wJlybt5\nau+PFNwFFGhrtcM3OVcUaGsBu4IwTpZw1p6Z0UcK0AVMyWkZ/9A5a0fIHCL7\nCXopDEnjH7/qwrXw9ACrRp4m26N/m+YNhXrC3Mo0agegvi4xY8PKpcdKJQih\nquY6\r\n=rjA2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"26bf977642101756f303516b8b318c090eb8c14f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.10.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.12.0","@yoast/style-guide":"^0.10.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.1.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.11.0_1578305916118_0.05671180241659424","host":"s3://npm-registry-packages"}},"1.12.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.12.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.12.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"f98e4db8fed53829068d908c1b129d5969e251d2","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.12.0-rc.0.tgz","fileCount":18,"integrity":"sha512-tU2ksKtZ9CxRJ9iJLCxxw1X76tI7Ov/d47FHuW2I0rXcGZTq2EzzDrEm1MSEk4OuhXNweDhJsUSgVWUKvtXU7w==","signatures":[{"sig":"MEUCIQDElCTqgLCPJmhodMImWEhUti/Z3yXcqswZZhJzMsRXZQIgFLJdN3hm032F+iYILTYHe4IfS0PyXU4dYiR9K9wpQDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeEyoSCRA9TVsSAnZWagAAs7AP/jLdh2qzfIludQx+v1i5\njkI1RIboUXdXVi7NE2DEjpd4TVukRLyOJsbjKjpBPUAava93jyFL4wfErMc4\nbdZpF8kjuBKvd6zeg0YIXvMKqsWWA8sGxxnW3rfnjfkm5u1P2mOr56t6a9Of\nXP0L/g/zoKIxT/OC0eWf1WhTbAFjrVO+zDZQKdJR4Ly35I4S1AqFggRJSweV\nDmd2haPm4xtTa/EzlMQivm8J1szbzuhi7UZNvjdnUnqUpH7tc6t/VdwkziB/\ne7eXLYrLO5oIKTTQHKNMxELrhGxheB5LNSj40iWeIv7kSgC6zdKZv8XrUdDC\n6bDtvkDS9sH0qdYPif/ir9vMEnXLKZeo/lUbvQQ7lRFNWSFv5ZxXDqxy04YF\nAFlTcJ8ZlWptdAQXLROtA3McK+bjbwCYqitAIA1R6LcEEKx63dItSTtyJIni\nNnYsC+NuUFqk0bdjyqznS5vDIaulaBMqBILTtTjZgs6MrCMy7lJeH5Wah1+u\ndEat7mxD8nVdWgePbfIUD5htKZ3A1gSBgpDHZuB10fcFfemCngngrlepnc8Q\nXEGf8bP7wKijD3Wkh6oLLwRy+Ogzp5koBIapmNLJ6F5XJF1hufI/W9zPdJmN\n1AIDfIHgG/amJiMXxUcqauTFGKmxouVLLrVf55T2D0wWgW8VfcfuqYTonRcK\noRJi\r\n=NEkJ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"b58119fe23928c94742f0aa66c4f235fe8ea9f33","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.13.0-rc.0","@yoast/style-guide":"^0.11.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.0-rc.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.12.0-rc.0_1578314257733_0.05155666685088334","host":"s3://npm-registry-packages"}},"1.12.1":{"name":"@yoast/configuration-wizard","version":"1.12.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.12.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"1c42e4d4469f62f945d6f78ad8f59024763360c2","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.12.1.tgz","fileCount":18,"integrity":"sha512-VskNNKdT0y0I7fJpGTaqmZuqxcqHLg2MbN884XS7PFlC8A8aleUPrRtUKv8VCG972DhqIVroxv+Cjx77mGIsfg==","signatures":[{"sig":"MEUCIHk+PUKMBWBfYYY4YHmwi+jnp+ABUE0jDcRtpIjfh5ctAiEApIKkKNXljmKcmSRFr5KLYDeIPJyp4Wf2BDDV4IgjiAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJaTMCRA9TVsSAnZWagAARSUP/iGBc1KD256BzlOUMpDO\ni40nV2PyMx0+At2rD/VY8gKRQLPOacKA6cpJlEvR+nB4bc/c6vKX2V6ojEYE\nAyVfekily4xIuxrtmrr8vm1asI58fyMQZTm3T4vFn3yw+LQA0M9Yv7w874l2\nLRi1lU3AcDSvBMsSTfihT786bFzYu4U4G91bWLESsvjBAG5GwFUtlsqmnUZs\nKP7B5ub/Zv+5q8dmU+hFQI06vaHcCdS4Km2qaKs6KjUgdqNu7Q6uIPBxxGjg\ndoLfLc0n5rAm2P3R2WDQ+J+5j18muGDgEirVjaAIizdM/khAi0hwuXqSU+Qu\nwQcXkKqOnOqKYz7NTsloPPU0w/1ZrnBWnNkzLeCupkJJZAyscWZGWpcdGMbV\nd6lk1VGkav7CMamC0XUgkjYd6VrH7eW9VZeDnda8aiTZ4kgMa/6JwvRoXL6f\nO6yvLab2/vrlr0asJBHYltgg7XXbM2r7oXIZjl0Ob9sWeW4t8U5653ttMs0l\nwtduco0KPX3QAutBuIFEldONkP2nzTO+vlWMadNac61W58QyKCR2hTYf4ZEt\nYUcu7WfREhLNNzQa4l0Wm9AU/0FExJlT/lTz5gtlHV4ehj7cB5t34TLEjljx\n+ueyV/roG4YuNve9/iv6UjRDGN7/NLwOxCSqpTx491oUi+GbYv6CTxPmSe8k\nkXUR\r\n=t4Sp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"51331d444152d6d89319531b042cf3b568aee443","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.13.1","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.12.1_1579525324447_0.6257734893147322","host":"s3://npm-registry-packages"}},"1.12.2-internal-linking.0":{"name":"@yoast/configuration-wizard","version":"1.12.2-internal-linking.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.12.2-internal-linking.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"75688725534326c1c969018de6a0e8a3f9dfb58b","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.12.2-internal-linking.0.tgz","fileCount":18,"integrity":"sha512-QllYJ2IscLaj7N201wNAkyM4iRUUzL0BqNbsLYYwn7zYruCOj3fguwTjW4pImg3qyTr9FyQ8bN3umQYO7MmIjw==","signatures":[{"sig":"MEUCIQD7mmuNqQ4sNDJIKEYkv/v0sb3Jsp1DbCLyPLLExHiLRAIgWR1nJnOXvdJcKp8uVaG7foD5VBQ5yTyzYsdyPT+aAQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJumaCRA9TVsSAnZWagAAvuAP/jDa0t/ZiqIVAyvo+Bwi\nVma0FTHye8tYWnWzaOo1+RKwLXK+CDuit1Ip5jLcY7bfrHeD2L8V+wSHYLns\nGEbbh4fB2GC5SJYt63V38xdsKv+9bms9Y58rNnU+SEetSwwn0BtAz9sjj7zH\nr5L7GLorefhgTV72z2oEVg3W9XZjOL+C6rk+uyFnKb0lj7KBe4AR8xTF5mKD\n+RX3x85vvTNlxKkuDWhs2SNzxAIt0BZfgU1xxxjCKMS6njjTp2qZgLSdT1XG\nufq6rIXut6d3OdUjmQflBwc5ezLoXqdQKAYx9PSwFii8B9ZSIY7a8ypfVxDa\n64dv7HHstiMeOF52mS3uFffOVECi6AlDSslIWCcr4P4QjOHpPWzItjZEN5d1\nE98ZtrpuYxKCMNF8jLEu7VAo61/mIJ7+bo7nEeuOeLIbVvRZZ+3FpVs/argB\nPoXhHvW8ucplsF5LbskNYSCrjVhcQkLs/XiOwn+kTWdDrSKW0NC0hzsReog/\ndtgnBzhfkqEFWGS9yiTn/1e/f8mogaQ9wgbX5WIRwi3aTx72nW7Sb8O4QBhR\n31D6klRuVmEt8uReIVrcKX6V+WSFNFY+Dsz5PWMCA4w/pyYi7iY32P6Ir0Ao\ngQ8rp/vGp02NRAmHpNr1j98tMYakuuy2hnRdegG/pQh3r6QUUIGIC5i3DpI6\n74tX\r\n=yjq/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f45b00ec3acf195f0807f3314a338fb22fba4151","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.13.2-internal-linking.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.12.2-internal-linking.0_1579608474202_0.6054787275773861","host":"s3://npm-registry-packages"}},"1.12.2-internal-linking.1":{"name":"@yoast/configuration-wizard","version":"1.12.2-internal-linking.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.12.2-internal-linking.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"9a76766171f23bc0a3fd2d1b690fd87334d5e309","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.12.2-internal-linking.1.tgz","fileCount":18,"integrity":"sha512-uv8kbJTS/nt75v0iHU8cGM6YuiDtCFyzTaCO86phvepx9tCeN4RFL5wfql2XwI5jd+Xpq5tAjUaWgHhKqqOdHQ==","signatures":[{"sig":"MEYCIQDBBRtk3m5hpOf9UmTLQsQkmXPZNkEGa/FrovRI5eg5XwIhAMtot3R5gCbLiin66JE+i1ACNwdTpHjk0VcKtrSHtyjx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJvQuCRA9TVsSAnZWagAAd2UQAIUfeXATrqovGmQLSsnq\nWKAs2SrnpC++Zt7Eywj3CrULWNFMRjqgmiu/9DPo3WNRC+qsDB5CKF4mq+vJ\n0bdg3iMvIW9AQpu6R1bbZIQcdAguPVOwLkXP5Dm8BvP+HyNloT+jXDf3S5Y4\n8G/wIjbsIFdH4zf+UF3J3LhNTdgCAo3FjiwHyno4HtCtmyRWQVutlem+5OEz\nMh3aqUekE5ohcBwON5B0NXXTHUOt7bXPgLQXEJjZSld7UH7NIknweU1bzw1C\nnJdIzqnvkXgcYwgGat39dXb1o/guVeTIiKeN+sLfQMlbyreruTi/xHT6wP4i\nNZPrRYrgmx6OEIM5p5YdrzIJR6TVH+R4eD3aF4okftQ1lVQp6M5MnhLCfTLQ\nP4OoWyP02y5R4GynRttUCBuchUN6VBE4ZhOF3dVyiVb8raRHDNrpxJmrC4Mj\nk3JzxTkjCnBpPYwlj3J2o3JFk2C7+g84iFN7Rz4UtNGzglbMUVGMV5NLNBOC\nXgySANJ7XOQlCVPgeEVGB6HpfcKxg1QwCzhfDCMpbvXJKuLPowiXUil4ZFI2\nUFvK2w/bACG7/3e7T/N1MkGJ19vD4cT7g+M3MOontaIIWl7/Q8fEuEor6WDj\nmcyWOBvvPw5ZDuwOte0o8G4R0B17zUzISlP9EY92KACEsK49gVDRarMHYcsg\niI6s\r\n=mHmb\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"9fd451752a72a6ec16676ce00429ef8c67d21817","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.13.2-internal-linking.1","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.12.2-internal-linking.1_1579611182129_0.07400754146247146","host":"s3://npm-registry-packages"}},"1.13.0-rc.0":{"name":"@yoast/configuration-wizard","version":"1.13.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.13.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"19ed3d69a996d9758c8171c791672c3854afade5","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.13.0-rc.0.tgz","fileCount":18,"integrity":"sha512-g9vCEi5i0YJnw+pFyi81AEOxQZjec9Oe6m9iQNatljy4RPVy3JkTvbDTR6d6F7fW9ERPLZx/LFM4xnsl9epQSQ==","signatures":[{"sig":"MEUCIErKCXi7Iec1b2xJeodLAcJnV7m9Frqg3pvEHcOujBvoAiEAvIlPwQXCl7rGci4DN081DtY8WuQzDxdbdKzcWw5f3Lw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecM2eCRA9TVsSAnZWagAAzpgQAIGEOwD1QX//FvMxIqNL\n+HrgjfX0x0mTKubWUs9byjulJdS98QiUDA5zEE2Xq1CcqsF6l4e/YTX+32y+\nO01FiYrtBw2y9/9+WGEvg1VD2+Y7eS8IHAIRvf/CpEKB1zhLE8Kdl19+EDh5\ng0kMQw/IB6gwhzgBBxwR5cMiVb4BWHsQdJLojUu//Ppqbp40H72vMqp0CDzX\nNjgUEGH3Vj1YLjPG6ZRorKN44yBgq/+3lAS/lIVJ1gtP0YOHcTH+QnPwnsri\nxwZVTU3fwa/Ker+7rgvxSQxAeczcIhDW7QynePbBVX1Ec67F/ECIE38kNgTF\ncaYItD1CSddlHKfcKiAWf1341ryOSLXIFCW4SCp70oskUhG/O5DmEYI6ArQ6\ndZxMdrNnM4o5Nv5HTSLfeUaChsCGzImDEPP+elfUUe3k4ZLwrqBPAnLlrdpL\ni517XDXt2YlwEABzltzOng9p+QrXoqskPClGjyGFIXrBglpV8GAVsuRFLUsR\noJqgpGg2l37z8IqNwRh4dP1HhIph0a082Jag/pIKSX3V5Sc0P3aro0ec0ay4\nH7yZjGJP7tLKY8fCx7nPCthNmwXha/G4sVuGetE0MT4VI11EmSBZl83O8K3i\n8sAJd550vRV20gmTkebpySePpd66Y/FNHNg2ITVEAUk16CeH5UmIp9ifkHUP\nSFmu\r\n=GX3O\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"d4c609dec596738d187cecfcc3d9f641020cbafc","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.14.0-rc.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.13.0-rc.0_1584450973598_0.6728440695865359","host":"s3://npm-registry-packages"}},"1.13.0":{"name":"@yoast/configuration-wizard","version":"1.13.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@1.13.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"a3fde452b4229a2da22474ba0b3fa9a650695c37","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-1.13.0.tgz","fileCount":18,"integrity":"sha512-GRxZfXTJDr1NiwVkrrqDWE81buvoTwODik8KREQRVMqCU9UQO6o9u6pgAsfY5w4vA9bRPZcWS32Fl7Ezd23HLA==","signatures":[{"sig":"MEUCIQDGngy90IotIPmlueD+5xetNL0MqKMW+yuhdkn0ViIahAIgCs4bLYa8vVhnsKgBu/SRiYnFjmWdYX6Q+ZxFRodnXWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegbkCCRA9TVsSAnZWagAANzgP/2AYBaulE7Rr+I3rj8Ig\nikAfibd8yuquVo3ztzNHMcZyrLn8O/oP5aO2xYBjSNajD8G47tFKVwyx2fKf\nKksPRscmI3NcYMt0SN0ieijFwvMFRmtq+TVCrJYgEIHEZ6aD7GnYzfjzVNB8\ncmR4q2N1sE7bBfO1kkIM4GbufXn7cDbOVBS+4kbb+T98u+CJta0JyqwLfdcQ\n+nq7X1zhSnb38tswyKVRzSAfo791VDt2wWGBb6hHlzQxABtGDHleveq68tBb\nXwgMp7vzPAANk7vdBwpkVeplH4yDGjQd0q8MyNgi09mEt5K8lLCkxFtzQKrC\nprZ9uxfwJJNuL+dNI4FMKfU4ca+H3H0VADk9720j19FS9+vkfFFjjA/YPIp+\n8PvgP4MCQo1F4QMYidx96IUAUhbXxFiHQgEhFyvKWu84gdWZtfOm4uA4uTC+\nTptlkuzQseODo5BDb1YO2Z0kMf0UmZveNMJ+vdewCvb5QdkMspBYmgspy3eU\no1RhFT+irrehpJUiMCRZLRSJXAI0saLZmQxOfYw3luKrjhUZqK9IJHbw5jwP\niualZ1Ouzyys1wHtoG0ILh3wHj795FNSD6uCuk1CYzz79h6Q9HjSOmCYbYgv\nmt9wn35WGn1Y0tGaoQvMDsxCJ318vtKkCLvqcUM0SWOCKsXPKM+4Nax/7MtZ\n+hvd\r\n=6Mpq\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"72edec50027364a8d84ae9b50ab7eefa24f5730a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^0.14.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_1.13.0_1585559810478_0.9826618960822404","host":"s3://npm-registry-packages"}},"2.0.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.0.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.0.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b07a25e91df7fb365b548eefe9029fa0159cff9f","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.0.0-rc.0.tgz","fileCount":18,"integrity":"sha512-5O/a5S/0ZyRqFDz7DWU/Ftb1z4HrMjCebvjjkY+aeIfK3dIcpGNQw0kPzARkvWRlVgnB4/8GjCPHjB7UtchZzg==","signatures":[{"sig":"MEQCIFw5fb84YJL6IDmwHXxNonJNQQzpa3YYuMQy7+5BCXBfAiATe60dzJ/Qe0yKLLCVAHgD64gEx7R0XuXofVzHnFc9uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJegvKdCRA9TVsSAnZWagAAb3MP/AsGRDWw31IEYcLbiIKM\nO46GuvUQaCyYs4LRpZsgYQ7QmkIysRFFMQi14xhhj+ePd8fxB4KWfpVwbTdt\nq3bNBNcRW6BYdugd/gQle8/DtwU9l+PC21ywP0KtmXIGaGQ+fQtDHMxhUjXR\n8wwNovUyMd88IhVg8b3f6cOMgA5BMhLmp8qqSxrrX62+sc5laF0Vw7/5P2Zq\nD7H9KrUJdaynytngzLCtS2/s+tMBu3PUwkgLLWBgHhSdamWvYhk5O15bRz5I\nOrdHeAkH+P++EQ0Y+BNicI1zftpSlQ1npYQS2F4VTtveVj5obGzlHngjRZ+w\nkVe+/hKJKyk6WI9I/B8CrD08M7jbRYp0PnSSiJcI7bkzbwQjyCft2v2s1V6Y\nk9OWpxw1IQvB4NWeNkuGXB8meK0en6ifTut4DfekSDQ208xx87fC0CA+NajD\nR1FV9BvrkYv/dgAyIOOMRgvA1maZu9ReN4YDrEo77412enaZDil9BT6o1LGx\nHibbB2yumJcGIPDyE+ZsAKb+mJaFlYi9uWBUjV8RiijFr7h1DcFyg6YZBu/M\nrr/P8FikQtHVT+cqOSrQypVsRUWaKvkuUbThKZ0mg1QDJMueJIV4oRpGfOAh\n1Ya9COV6Fll291NjP+tLBLfCPe9nhohjSflO2nqNGD2uly33AerrppCF8+Ey\nJBHV\r\n=MFhf\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"c3e61b9fb150c68dfd5f22c6651619a754d6eb3e","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^1.0.0-rc.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.0.0-rc.0_1585640093454_0.43170156199538545","host":"s3://npm-registry-packages"}},"2.1.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.1.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.1.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"aa6c383073d785d88ec84d20afdf3a478b3afe03","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.1.0-rc.0.tgz","fileCount":18,"integrity":"sha512-AMGOS2zsFdnjADHtkhJUyBZTz5RrwtmZUP6Si/NIadN/j9UiRtlQSLE9lhjntWeEoJ8HD0pgTdkS9jkPGx0xQw==","signatures":[{"sig":"MEYCIQCmszLlkPL0O5g6PBIz8/evjFVE9PJq9wEHSK4SfMLTRQIhAMbGO/IYYYhUmu+Ub89n7idDRGmZRjzVyrSBJbTB+JBE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejBkiCRA9TVsSAnZWagAAmDgQAKKVbgKWmytpYNPPZb9/\nCBeDBZWXwaJdTy4bY2TQZFs6Gbo9qPRzekkxv3IYEB8Q4LtvHlbxJXo12FtW\nFLWvEneyIOxquZaFrlzYZrlFZ8X481ZAj0S66g2HDOZN3hHTPeFMzcuDHW/2\n78pH+zlxG7CqPAIu5TAD+a5MiYceBkIvQZW9JvdNApagbyA9Y7ikIUfpKzZx\nnOyNKTI+2R1OVbvb1eWNZHFHAzUxvTK1Xa5zQrI3Fv7POgq5hvvzqFKnuBFY\nbalRacpUqZuZ0GZgWhkuEcTHppQsnyvvJMUqvN4ALzxTebf4651XZHXFWE2P\nSmrmeIGxCfG11p/7Z7Jy/ZNZFsGzQ3xNo3wxdelE6n9gheod9nZ0491BguMU\nDLRI+ewwo9uerKLhEXtxujATpr9gwP4dkwfg5Oj5KwDGo4gI2mPwkS/6I4P1\nSRGvWHYFWYjnJ84Z+ERBcjusCzBFyUAXneKNQ3+8DDj3IKyO8CO19Pi6fo6E\nve03M2tt9ZvwbY4iYd2P80XCVrWVHgXhx3qcZ6F69VBBVbUU/w1LRVDLoBOY\nqidAIachDJL3jKRnYCL636gWuuqLX1o068pnMPdoHki46mC6SLUdMLCXR1Qz\nAj59T1rEkZGhGwDpLfRuSdWv7MkGxn4mUz3Z+C8IDzjbj7V6ALAWL7p9AWKc\nvskp\r\n=5/fR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"6f6a65fb0e34af66868a5d799de79008e93cdad7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^1.1.0-rc.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.1.0-rc.0_1586239778089_0.3578723469545879","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@yoast/configuration-wizard","version":"2.1.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.1.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"8546b5e3cbba17d1a3cb8d8546339039a0d86dea","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.1.0.tgz","fileCount":18,"integrity":"sha512-24Dg7hPZk2rThkM6QGuWwTAqmf+k1pIf9QluCNpx2vOz9/Te44QYdLyj8aBzjdzELtNOLBeMcKJgt3vKhJAtUA==","signatures":[{"sig":"MEYCIQDzpsu+rSPI7rk7sbrbqdW+49P039d+pjVsrFcE/Y5e0gIhAL3zffdSiwIq2mevT5JujJpdk7hWkLYLzaNxHcmWOT9k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejvMPCRA9TVsSAnZWagAAGYEP/0M8NDEhO11d+UpO0PZR\n4XTXYNCKuB++E56lf+lDuHavR24WKH6RZ+EKe9uk6XH/TlTixSAUNRycy/29\nlb9p+jNCdP0CN01TT6EoL9Bx3j7ZybpNW0naRGpJv1vrispESBJo2sqGnfr0\niBj7S7kbIfZfp38zvkq8dom4tGVfpbJV+m6WHT4E7OB4Hwe/NCKzKRcBUsDP\nvmIqja3LZkGSyFzC01wMk27kjdeT0sZvrK+tYT19dp886FmVGwp8NEsT/rDw\nuxzGWxaxI3Eo7G6TLWIK9S85FlAYGVd1dEroI0GkTiNz2Q7jnOZBtVsy0vds\nptzfm79QpU0jxcu1tkSS0BNhgLvKO2wfoMnH1xG1/vp72mD2Zrs7PIMfG0zu\n6KMYc9a3byriL7bcJMlgh4QbZckhbEbmpnTISLxdXwqlMvFazTCYVQHCrXbi\n9sYSPRIim43Ab3vux0uROFFr5NScIcEUVa7kWloLQMTlpwRN8VB56lG8YRO1\n3eyiZ6IOVzIDv9quubKPYlB7NLaHFE+o443jFzeB5pyEBwsYcITgWkH0Yww9\nvmi5kgzdA3WrlIFHdxUHPXasuMq4cXYDRZbjKxftVkpASWUJb1Mm/80/yLEv\nNz5W1RuoEnwUwR3GR5adQdD4NRr68pIj/TyneohZGI1t5t143J3Nf2dHbZT8\nikB9\r\n=7b92\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"c07349f311ac15f03c3ce2b89fc2c13b66837cb3","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^1.1.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.1.0_1586426639080_0.00864983548719378","host":"s3://npm-registry-packages"}},"2.2.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.2.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.2.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"50f23ea61876111723c74ccdfc9fd4d95ca1c88a","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.2.0-rc.0.tgz","fileCount":18,"integrity":"sha512-JDHswdRDazYN1skNgFMP1wywT6AkdYUPQg7lURPHWiIUR0mfvuJWCiCQBncjonKcNXesOMAsGmYnKDRJiJrXvg==","signatures":[{"sig":"MEQCIGjO7/7YN4yYB2ZnkxMZo6qAwO1VMF49WegonScwWY8VAiBUsBH4ehllwyXttpzXE89IWtqaDdtVNpIsrZQhqxrSBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejxPdCRA9TVsSAnZWagAAGQsP/R87nL61a9qkaCfCCDO6\nswsrwznuzLt1mKPnMwyTcUs/AlNvyLrcPfoiy7JUdOjIZ1mtjGmMk5qmHVnW\nQPFe+8o9svmQxdPtryO5BUYbVbuXSIwCXYd0f0cyPPIDWSjvhvFgx80pCmjz\nsEx5IBq6LqAJtF+4heXRdkuRrplCtk2B+qk1BrYq5yG9x+D5N+D2G2NVBztb\n3oEp8TzpBB8Vsbh4Q0+IEDVosIlMtSnFsqpxLFDZfJ0oL4LNOvwEdjGUnTJx\n0QLdqE6aG+PNHCYRmJhRHO/90DM7kfxlWRsFwo9DKoXMBNsM1EQyWY+SU1Bb\ncuipHG2qgLFmS1M/ShZS1a5tJqYMMp0YRUAbQ4ZC/HC/nC+Hv+cco1k5sEDv\nFMdi0lpOWDnYTNDaVvrEV7aVt2op3XfwE+JVXQODq1wtqASgracT0eW2Ucek\n6FihayOwFiMG0/lbJCHFxv1oipfvKWNJAIrKrFyPkDZrKVb/qiJq9LxvUPno\nVQ8WLloMOZlzmf9yUFxfy2JlcIRtWApHxArmJFrmI7cknGPMH2yCW8gx1C9q\n53pbWaGFE2J9Kr1gdy+cBHhP4kvSaOY15S4yOeGHPZ5bKVEVFqcnKsPVuL7R\nLw+1X5bBYehXrLkZkeO8LAj3/7yP234QCiUVJr+v3Rp+Cd7Nq+Z5W8A9hzTL\np8rW\r\n=248K\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f1dab606047daa254a6dff5df4af917c6f592f15","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.0.0-rc.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.2.0-rc.0_1586435037251_0.4829187800755992","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@yoast/configuration-wizard","version":"2.2.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.2.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"def83b379733a5e4cdb93f27636581f96c7feaf3","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.2.0.tgz","fileCount":18,"integrity":"sha512-ZwFFZB02kIACnmODX1qcOV2QQ7ZZNA8qM7hn9z9NNEtWd5diK6Iet1gG5yFuTf3V2CdtulbpHl1UqHkLMX7Utg==","signatures":[{"sig":"MEUCIGTtv/w0v+3xhHTOOPcp21oEjCLue4lzzVoIcLb0CJADAiEAmrojLVa3jlDWbPQuGhaQDvIAbsLLQz8PVzYsSUtLkW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoS0dCRA9TVsSAnZWagAA0LsP/RKARnsu/Dagu6vaeer7\n+De17Tly8dy71cOnxTZwi87QSRiUKO6vTiY2gdZJyg/kXXvd/MKJVttxxOKb\n9afo0hSryBkUMLqWqRUqko/5lFDFyso/br5QlusvNN+d4DpbKRIk0IOQcaAJ\ncY5bD0o0iOBMIaoqiAO8CzbZFnyzw134DXYBEDudVjV9JsIzE8Pe4xnZK/hk\nnEJTAlMLGlqNfW4vIW0KZ8ihrc6ZckZwTAZLOdaK3jVoRwxNQYUCFStA3Gq0\nmBi2/OXF+xEOdfe5jLgIaj/QqeBkAJMfwVOW9xk4T+cIT8rNOZYo/TAekRaf\natACFIJmK6WgEZp2P5Bvlyr1RCD1BzIp/E25Qge+HHJXxIB+CE41JTxddatZ\nd9/kN9k0Y2pxKjHD4KR2wCkrPD12HqACyGuc8P+HSV4k1fyPpZYL5eOy2sE4\ntRiTy6CmyL2el9Ow/J9ptcywS5gvSsTiGPJeIa12NX82bENLR5mx8k9NgdIC\nkXGZStZIFQR0roUYEj2ifutLgTX71WN6btNrvKl7SzwI3OztLZaPs0JZquEd\n0RABzLMQT4vBSnxrubOP2EIKGmeP2ZEtz1ERQ9jxU0zo6pXpDITVCPanVpHm\nT5ULEYbyWOocPselPZMEObYn5mDVCh7ip/504vlDhkNpvyeS29lfLvhKQi7k\nDufn\r\n=GK9E\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"6ed776e54fe9c092d791a8a5c5b1113980696b9f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.11.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.0.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.2.0_1587621149069_0.7295758283759355","host":"s3://npm-registry-packages"}},"2.3.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.3.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.3.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"89a50ac5522984211175055a0f318a7cb0be579d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.3.0-rc.0.tgz","fileCount":18,"integrity":"sha512-AIE59pbppOX+9VVlWP8pW4RoQexBwKxH6spkQ57iQ6UX2fEElmlMqHkUOLwcnbZzO0b6zywX6Pda4GwrkIKeHA==","signatures":[{"sig":"MEQCIDcEQYvj4AfJp56dWEVckmub0aD2/rDC2WZvy25LkSLjAiB6KbLYL3O6vSWZqsFhrBtio3VXo7FcP7/PDzkKjFj6cA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoYzRCRA9TVsSAnZWagAAES0P/0C+CZg21i4TKSLoGlRM\n2kI8o9Mob62fjMEKRL1N8uU4A3nTied0o8edQ+P2u9uLDmDjjAeApjIh9Dkv\nsEHv03Oc7S+Z2/LjGQwA3gJDkrQFlVrP+kvRDlBMVvZYjMDsk3kmQ8yqHqec\nCF0phEwkh301NQRXne+1oVgYQk4VhhjB3EPH53f6kt+8G06R4pjNU98EoPtN\nh7ZZklH5u4bCKqpAuqyEOTH/1/Bsku2leS2ZJIoI//8dB36JEWSwLrkJ/b31\nsVI+mKRHKzJ5881069iRu1E/+KeWhn1WOcdHBmo9/01TDeWHaxRO13c7oMkU\nyFqkzO/PEeCA1zSQv9T88a8WcKNWs2DqdTDwQO8mBXNu8J8Zl7NyqZVe7WdI\n2mM7jGWE1/5NjzT38EZYOP/0xOcZ4gHT+ogtu1agFP3FZ2tnAdjKCLVRDVjD\nYCx8FHi3ar4Ct0BVDS23HNMC1J5VuEf3rOlr/7EDxAeJRzm+dVgddLvV2x0t\ntd/QlVvFkdxnfsccyV5XJI17RRXijJ8SLFnu3w65tMvq+UwMIk8G7Mxm5jOF\nt/o4VVI8ll5/9f9jQVv7QmhCjw3RYrbQiJcZpwU/ACP0cIgrMlFW4/ldT3XN\nHtXlDlUNXVmGAHet/2sBT2j37Rmk7yjkfhPkMJdggKPjy/rsIucGi2gqRZib\nNWfg\r\n=K3g/\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"ac7beb6e19dba0030477cf30f7ed147a58707c2d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.1.0-rc.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.3.0-rc.0_1587645648539_0.37945471853776414","host":"s3://npm-registry-packages"}},"2.3.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.3.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.3.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"de21839cca92751c477a5f9823a45507e8e47660","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.3.0-rc.1.tgz","fileCount":18,"integrity":"sha512-ROOQKy8R1f2MAqGAm0yhBUDvy6AH+VczOSvtHq0ibwjMZQdskmro80foTZm5VMa8C5XG9CUJMSa5IeiX27BgMw==","signatures":[{"sig":"MEUCIQC0HY33+Bzum1+M5rxYOhBb5q4IuKbSNgZWu2ODSpPslgIgDTzBiVu6PnpP6jkvpGv311qKKvISL22CQQ5aFnl1AZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60557,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep+oxCRA9TVsSAnZWagAAnGMP/jaVxdkL8FbMVcec6/35\n26vhGaBxZ0InO7WLZgx31fQ2BvnDiLc+Mk+os8Yg/lDV08CDcpyNTxrRAoOj\ngM/LRZqs6KkGtGh3PtyTXTsnQY/rn6pqYUU4Lwij45YhwFIJJfW1ztKxV8bl\nFBQ6FzVw81Uh9MCfLYHm+GY9rolAPqQxyzGWM66Bz6gl/d2OBjtGD6xn2F2V\nYyr3awu9AcwsMfs4fPSZKM+tzfEvzG+kDoTfZBY42O5A/ljmWeB1yfmXb7ls\n+Xxl8CnGYBWCj23ttegdbrrIQSg7Og9JFiuXgA1QkOnbX5Et4O0T3DJo3gF4\n3ds0n789tFwRP0juVn2JZv+/KoghTd5faZwrky4bxHQybkBEYnrecQFUPAbj\n1yGi9pMUr6lCD0jWvPV7JyL6JruoqZsqyBZF2UhN8YTsnRp8dANg2+6yFU37\n6IHAkapt/EAlnyG632+j21tgFDTXBGOWKsif5EzOWge5Sz/z7U7DGJ6wQWrZ\nhftEphDUEERDeghME0ogcSOzHPZHjlhenC8p+F6Cw5ZumeG58uYYtMwqWuT+\n3px/wZTlReP21nx2h5STRFrlSaJAn09pJQVqwEMPn1U6gQemf+EWI0FrNKLM\nx7e+NSkzyWhpOPGqZTFRDty74v11xZbF1JVlYSZ84AR1zRrxHBT95zSrF2zD\nZbk4\r\n=Hb9h\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"ee0e38d56d8232d4b6aead3653d7364763ec6317","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.1.0-rc.1","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.3.0-rc.1_1588062768907_0.292898474075177","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@yoast/configuration-wizard","version":"2.3.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.3.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"d8e707b96006a007ef72786e9e5052d01b2e3db6","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.3.0.tgz","fileCount":18,"integrity":"sha512-ZOhfaS/ah9sGdMNWQRx7RXH4fgitp5kjmqnCTT7m6gsDJsm6yVbQiqDUcezlL/Y3vaD6jd7Szp0l9ueukXYx4Q==","signatures":[{"sig":"MEUCIQDFtfRDtKa7L5Wc19MjbuWXu5WNAYlRVpUnt81Nu0AgGgIgFB69Tk4XB5+OOhMqXay0fb+PB92oni0wGA9d15b6LUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuOnCCRA9TVsSAnZWagAApPQP/1setQzR8vXwF1wvX/lH\nrx+GefPrkn9/zyQ2n7R1F94m8uDJnIrhH583MxBUxSDBPTC6YmQVhFMwpKqz\n2cHiwPxFlQW5WWXg52mUCivDgYVpsIrBSoOWJGl3LciKzBqbxnodqrjgAUVH\nXypTBiTRyYwYqtCcRuCFSencoTcP5esU1EyHbI9/cqPo1LJ4biWsKawVNHWx\nU+tq0yZRy2/XnVVYa4PdBPOEku3ZENOrq80WDg6+D9lx1AVuDG3UlNKszXwM\n0bULuVWY+VQOyWHWFS/3LjpAEofk8yZOLoMd5jcE5W3KOTAzDJAxkiZixRkB\nNOxOXwnPHDodY6KEPyNfwU5wIcN5nshzQ+4crQLiz5n99eItKBzQwxYPUKTK\ngs/OO7W/DzHV5EJPENCYL3X14noBxSkHHb7QIwfGJvxbsGRGU2ZAGalr/ixc\nUgeZESIFP6pBNsrwlhXDt/CFB+SyTkJKcavhLWkjLiCoNlUIzCz4YwyWObeo\nrQgbRpkOFy7ltR670dK1PQHVGAkALnIxvAnTDusBOzP68i8yYZ+CzaGOdlLB\nRmV1A4Ia2LkcgLRYErz2t4ueu7hGJj9j2iKH2DGksplgg3Wh1aRjqtn9LV4k\nXs+87EHys6JcDvaS4B2H5krrNW+GvmQ7PCiMTzpdChKdhrKsS/Q/fNBO6rlg\nvZpg\r\n=RByO\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"651ec5c17bfdbcbd08bcd531864bd0ccfc8ca520","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.1.0","@yoast/style-guide":"^0.11.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.3.0_1589176770123_0.11490451427591553","host":"s3://npm-registry-packages"}},"2.4.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.4.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.4.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"d608ae1cff84b2bcec027ed02035e454b675d5fb","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.4.0-rc.1.tgz","fileCount":18,"integrity":"sha512-MUdGcYXhPnCahJELdWm80RBAsRRKxs/p+z/7kInhqWzv7B5SDkidfZOvgDFiyI5/HH1Kct5JlY1mKGypWW7HAg==","signatures":[{"sig":"MEQCIF6wQkfSHhkngYaE1bVbmC6hEy/shdPUP8tBYOFETbqXAiA1yRccBPuhhqqctfcWri6f3XhPIvZBhFubJ3hax8TSRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuSeVCRA9TVsSAnZWagAAwaEP/RBkRX4DkoE0GnfS6rcE\nV2ej8PrGQsKAAVOFeElJrxEn3oTzmzo5g4kL8t5o/Q1cib8fKotJMHHJlE3w\nCHtGWDAdY7gK73pRJ89GYQMtj3f4sA5HrSJsaC5/sWdXa6NSQBSF0pPLSJEv\nLc6K6Iga3wsfK2wZzw63KuK8pvBoU68GbmhZSWTlH4qzz0CNzUhieItYcTiX\nTEFKyd0IWFqQWBi0e/8V9soNLP1bR3KV97jl6bj40jtRPzgKWjh9PpyHcOWQ\nCnBZ6gm0Ak3IqDda7XcN27NoghLxH2ITybpjWdoPYRNWzaqQ0ZLsFZ6M1l7w\nMxskQaoblqtZZqMCsGGAPQ6E1OEH8ivASgwztaSJvrLDOoQ9ixa8AOQgtTi/\nC19gZojqVG/1qGKZUpDUX5vrWKeF21NxFScK32YK/OtClep1e0gTE8VnYsGZ\nz28qc2DtP83Fy9MQilE/aJFUZs6ObdyBhN3VCXJ1TF4HFFkLJi/6+oqCr4fp\nC2jR240ef2E16FHL5IqNgIFIZLNAn0iUE14yzx7ynkteY1uc8EuU2TTCcVGb\nU5OPKBj/SGzYS7nsff27ArrPw5n3oiFoLen+E4VxR7gWZIDLMx3fJwnwT9Td\nfJWHrjfjIuKC5Plu7aUQ2UD3W6KqugWE9eoJGcDJTxOrCo6y5ZhaoSlemRV0\nIRwC\r\n=qrbr\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"ae5818aaa8d9f3225c2c502b5187ab004d1fcb6a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.2.0-rc.1","@yoast/style-guide":"^0.11.2-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2-rc.0","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.4.0-rc.1_1589192596872_0.5511627854297707","host":"s3://npm-registry-packages"}},"2.4.0-rc.2":{"name":"@yoast/configuration-wizard","version":"2.4.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.4.0-rc.2","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"97bbb3931a3dca5d85f5a4adeb4ebfde1ce45058","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.4.0-rc.2.tgz","fileCount":18,"integrity":"sha512-SDEHxjfZUyEjCuw7cUlZ8ujFIYoSow1MHEM9qw0x6R3JO/ZV2AsYSq+CEn6pziuiT+t1oPk9cmmpCHt6IF8gZg==","signatures":[{"sig":"MEYCIQDeNFPCpfBYLYfLHgD4sDhQLpgPzz2DJNV0i43I5D0nowIhANPBpztXeIWDA03s2BRZUt8yE1EK+6odeut7BYNThXGT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuS3jCRA9TVsSAnZWagAAjS4P/2gRNG4gJnM0ITgCa2OQ\nEBUF6wJZAQuI2CR5Y24qQD2QmYYtFljNlyAhXhbgGnPYSC1V1XoFOmiMKU5T\n+7PukKU7QU9VWft7ChPA+ItSaK0lrQN39qQMYJsyybOhGCB38fUsLFFfvr0Q\nGw6zm8nhRlXFBaqXhsTYsIwxNC7HEtw+VjYtpkmGHyulOvSaeFyDejYQHDxq\nKdXHouSYwBjv4yo2C3Jkt7xCjMYEzX0Eb9Ie3vAStCkBjZG8JDBpPdzcFCaa\ny23OwJILhJ/w5KzqTswq96KlInbdjfjAgY7gRBz282h5xGhNd6Y0KPEGDodE\nIPKodLYlxTi/dQi8+OhEdpY5TELRJXhP08ER02NfbeApacstJY7AV1rYPXEN\n998Hg5anWw8mz8ma9eqsmKIVRqhK0kmdXEZ3j5cfFMCreyaGa3hj6AMwI05l\nLPwbJ7T6X4l4COuUPInHZVdqm7eZlyuJkhHxgKt1f8Chzcp0BDmdCkbX9v3F\n3ZEC+acL4l/nxEMINe/PPQj2UPSP39CMpedPTARzM2XfHs187EUfxH+BfjrN\nPKENOFc6F8ZqNfWgLquMKutbEb/9EJc4VgH6er3CD7P6kwEPyWeSzvgh8M1K\nlhk9jDoed703+/dRARZFvfvxmSIerU5xZFVhQ2QZ+IAn1EbeCM1aIbfXauSs\nNsy7\r\n=WvN9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"5efa3fac041d615dcf4bcf5b14632381033995b7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.2.0-rc.2","@yoast/style-guide":"^0.11.2-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2-rc.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.4.0-rc.2_1589194211137_0.6465337993217881","host":"s3://npm-registry-packages"}},"2.4.0-rc.3":{"name":"@yoast/configuration-wizard","version":"2.4.0-rc.3","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.4.0-rc.3","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"69639e28390048dbaf5f05ad21f034e46a968199","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.4.0-rc.3.tgz","fileCount":18,"integrity":"sha512-A78263vaufmN09cxkeYusypqvXLTaVEH3l0BY/q8kHLyql7/hx3uAyIDuDGHOXc1krYebhLc4klTw24UAZqC0A==","signatures":[{"sig":"MEYCIQCFFMm+lFZnZ8tRNz4uGfx/0v9y6fKTKdea5PLAfZ8H1AIhAJlcrJFOWZOrh85Z9p60JVdFrKMdIkJciGZuz4nGpid5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew82xCRA9TVsSAnZWagAAd1IP/20ZfogSdCDjTyviUSxS\nqanscdwNByxbBip6rCvc0cUrzXmrzgyKofo6XUkGMuaYRAwdvgD93XDKMdDB\nqMBDgwmAOg0X2H2hMP+y47C/pz/4Iua+pyd9yClEai3i5fHa9o9m1GDIbufZ\nMbeik6T7IwWD0gi0+sQ8HYNO3waIJljVoewbJmJNpae50c3tqk8MF86Y8v9y\nfg3nXPtfjKeYTxg2rluF1jWqvUqfEJ0WB4v7aRqgI9iU4Vs46CzUo3hR4OP/\nIn5PDKKo+Y2k/A8qVu6ExS+aRu1vS9rde8mvXhEu8MPCFJiF6uqpOGj8IVrk\nzMOrpFMcjVsTEF/DEZE4I2dpvw+qQIiyKuNdu4zgSzlOl12NNfdU1S7NnJIB\nlCU1oMyz2fYU8Af8ClxpJOoJdkFnDSZKPgSco45Nw8wLJm+Ew8+eOv+kYrcN\ndGsNngG8V2lfFvwqUb7QIuvDZ60oi7iEyEuQnoS7GPhYvX2QNP09UpNL77ci\n7/P8ujKyfZRZdjrXCLkG/rnzpOiw4VSaaH7EpAqEw5erlBLJ5ib1EKZvR8Tv\nDHSkmGtMIE3l4WcC6LKf6FEAAI51oBxWrdqX78aR3PggXvY6ZjE6RqRM+u+m\nl4FSFXE+avW+bqYo/rU1UcVjyAQ0zhrNqXuc7+AeWjrD4DvXOxsF6aJW4COU\nh5i1\r\n=ipva\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"c4820bd45b414f880cb65505bc6a1c3bfd13bf4d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1-rc.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.2.0-rc.3","@yoast/style-guide":"^0.11.2-rc.1","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2-rc.1","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.4.0-rc.3_1589890481277_0.847844610877377","host":"s3://npm-registry-packages"}},"2.4.0":{"name":"@yoast/configuration-wizard","version":"2.4.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.4.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"d4656d5ebb6865b446696e5302db79e53a25bc80","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.4.0.tgz","fileCount":18,"integrity":"sha512-+aAeXRk3KJysrICZ92z1GfR8SdfSjd/qVmTNjM0e2Uw+6ZbHmgkojgD0KyIc0+jLcr6bJwCNQzIj9iAK3w4ujQ==","signatures":[{"sig":"MEYCIQCMufppfNPzB9NcCENRs7KmPXMXwrsTPNaRKBlo0IfCKgIhAPCe9YU6u+Rh8W7lRU5KCYjihuXJckCrvnIS6ryapiOe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJey3roCRA9TVsSAnZWagAAmtEP/1Y4n7vv0oTkqsRSzQUA\nqc0FVqxhFWDioxO4Flg885m42c3/NErc6cIn1FjSwN3h5TOHQ9iK2DXYo/QX\nOhvqfynBJ2gma+NGny+zAZmITFNISDK4nLGPsJF3lZ+kiLEgFvXdR/vB49eP\nEx9TMTH9GXx8lkPh/0PYxRWhOSFp+Q7H3m0W1W9u6G1BwVXlusaN++OfmkI5\nU78evGwmOdCdO9rU2r1bLjN36BvV2Q6k+OCHDQpfhfScXzxFwXAOsnmLSD/x\n628cAyrJgR6BOyNYb2n6oJNmG2V3/8oiIE0llLlAEFB24kd23I5dTqPp995u\nuw6/UScH+OO3AMNFp3AvlexbXmKHhQYVItStCek3pY/LffGB/83UXgydIal1\nVAR2ivvl/cFTZUt7WbjChOE83MbzgCfBoo/xIqGGBntAzOV4cS3TFxUGGsvh\nxLo+jbcJFbg7ZI3u+z1L0S56o5qHkNvzbbbvWrhUCby4Zvw1i4pzg465MvUi\nEQS6OLWKBHmdBxNXo2BFwNOmXgaB6tKMbc4g9EX4/6VE8rHatyO2IujBni97\n4C2wk2pia8B48DXZnSnlf6pYRT5Qb111d2A4TPMHiOSmSjXZTkTkJcnDJrHX\nQcKFk/xBjQL+JaSUFLMKFGTqtwgkAmgLjxMV65kffFFx3cA2PLTDLXswhTF7\nMz7U\r\n=Mcah\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"f85215b588519b4e9f54d06be3bfd3b7f9606131","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.2.0","@yoast/style-guide":"^0.11.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.4.0_1590393576586_0.05345500638234957","host":"s3://npm-registry-packages"}},"2.5.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.5.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.5.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b5ebab20ee0c5e08222c1966808dde4632ba8dc7","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.5.0-rc.0.tgz","fileCount":18,"integrity":"sha512-Eo6oMpv2AK35RMXLrDAurxGaka/mYC/UODRayxFeU2HdHLsxG/+d10y7NT+WPHZAKGpEVi6QRU5mEgt9Gwn2Dw==","signatures":[{"sig":"MEUCICpzNE3KoiLyMwU1nDEWIkLvqkkCVq9ThGVUuL7AlTEXAiEA06DJNbWEIrvt4g3w/TyIImujO1DmT+VNxP1Edr9BdzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2e0+CRA9TVsSAnZWagAAB6IP/i0IPceMH1E5Mlwp0FCq\nJdMXJhU0497k50qUx9Bt8js/Jd8yaof9pJKlXxoPHpsLwQ2yyumj2PwlmQ/z\neKEo1KSLeGx43NF3ORc8IDRxeR5YfFIZLpnPS2HT2ry4v4gGJG1tvo8U/H/r\nUjt0MsNIY917fMLNKsbZMnCcb4a6RuxdWbX6au2mgD5KIwQjPsafoppqUBiE\nvDmDoRprMhya70WWoXT2yywg4w16zbjqf9Ly1nbpT9LIoI0+6gm44F0/06qW\nPBaqpS4MAM5738Z+v3j4/Y2Nvm1bllfN4tBHTqBR2xDu86tryzMF4QNTQwC6\n7DX+PAmgPy3LFJDlTCMrWwOH0U1UMg1cv0mBtqnuJYCyC0j0q8/oKnw0wCKZ\nLAXalzxRJqlXeShn387aO6P1UdP2aDJ+9Mt/u4t1LZHev7+fFDv2hHYyKl2P\nPxFb1Hx4XWCGogI83pS3nGJ9kA/dhLHque0aRc1RA+arjME7a3M1V/nzU2Bp\nA2yDxonQrzspdOd5haDTCaDczAGaWjt8al+QZnDytFThpiyZkTpfAobprSuA\ngPTwceXduxwVrpNfZtn4bTUB+/TiOuPCGO5tTu559/W/5xPwViuPzSLcvqKQ\nr/dZ7ufGXsm4g0oqNKKg4bhMY5ZRnV60Rl3W2Sa0VFXHhW0DaFoBF+8T0xUG\nV70b\r\n=5RGg\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"0ba2d28d379c3926e765ac21497be847b7eda72a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.3.0-rc.0","@yoast/style-guide":"^0.11.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.5.0-rc.0_1591340349663_0.13038249349246245","host":"s3://npm-registry-packages"}},"2.5.0":{"name":"@yoast/configuration-wizard","version":"2.5.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.5.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b5a43ff1bd4b9bd50f2cc9a793ae386899629db4","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.5.0.tgz","fileCount":18,"integrity":"sha512-OB6yxnR7Q93EwHdKpHZlXq2He1zqkoEJgDSS6JOGC7dad7QORcP457ZlfAzJT3yD+Z/hguBpiVkzw2uz9M/NXA==","signatures":[{"sig":"MEUCIQColgOvCUOG7+h5OewJSPXeQmVeabSTLO1z3fpytsC4AwIgMfF2tC/31SSVAaowWgU6tNZEQd06S44fA4bX6fDzvyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3d3sCRA9TVsSAnZWagAAoCgP/Ry4yQfAYatO/YFmhK05\n/K0dVrC/8CEv29mqUAz+b/v2Y1KhXUtUDrEaPADZYriFEb8Ngx9s+zCLtw0U\nFzmtJa5ctU1dFS9kmiTQy4H4M2WUqjQFcfz5zCydyYg1OFnhtEgHQ8U9olJS\nplkHnWTgbtNLYhdU9ARVyRQikNI+MhUpuQawgl0DHLqggNPdsiyqwLdafLQJ\nBMSGEoEIaaLlutKqH8mb7DSKS7iP2TFmbDCxQUzZZzlnfnoMDf8gL87zzvNd\nMXihbfHUypp0RF7s8kh4q+Hdgv6KQDJDgVhBp6BTiLFNY00NlV4s4sBHtn3i\np+bUJlYYqihz7cBl5YY77MkVo16y6enEmD78Dah21T/8lB6iODereTI0CZpq\n2cUlzXBlpPTb5ZZTRxbwYrMJJ4NX+B2AiADXrLbJuo84MHeti+a9nu79xCPn\n+ofQkR8pxS2/GrfrmegYgfFw8fT9bdhPF8KBh/ZfmwQSYJOk5GUC3zL2gQNa\nD2pJx68371eZbmM9URe+rTADKd7iB4jGstpG4Cm95Eg2pmvbCd/Cwzy2VuB5\ng4C/XDWSov+6DW0vF4L8qfuqSCoozNwxdMHDfii4WAr2uwzu/7l4lLG/q4GC\nvUlDUHmOXhn4BP4kyqvbRaajBxs7fVek10p8gAz2JfG2zXfU5iSpD/V3oSYV\nSG8y\r\n=QE9i\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"aa6c676b56bc13e1b6566980254b2096c430dcb9","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.3.0","@yoast/style-guide":"^0.11.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.5.0_1591598572162_0.20552118889199722","host":"s3://npm-registry-packages"}},"2.6.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.6.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.6.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"4b2327a3923d179db8d6a7fb2c187693fd5bddc5","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.6.0-rc.0.tgz","fileCount":18,"integrity":"sha512-h+Jw4iNtZHD9cPFYYBI+yEiJHgxHQLf4obF4ys6HcmTPExZDIOyx9o00bft2tpL4cdTYzvQkO8tK6IgHW0vWMg==","signatures":[{"sig":"MEUCIQCJ08h0iNeaNAV/kZ8XZO258G6sAFZD/xnAKJEWf9MLDAIgE07vaqPuDOKcgENqxcRIbdAZP9GRx+6q119AKk1NFNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3gvHCRA9TVsSAnZWagAAQH0P/jlfVR2djm0i/vciZFcQ\nMXm6BJTwxaEI8SOUC70nkGdC924JJ1pXdj0yTDn/KV7HmbcWCC3GQ0yQ2/87\nhTUxGYzzN5ySx8duDLmcrvO+5dWZSqw5sxvq9WB32fnjXjDGB3nFJBBvZEsl\n0CIzkOVvwualm2MhV1biaaOR7bW3GvcKdRH7Hw8HxlmQY+aeRKxsVH8LaML4\nh0OTY0aTFHPg1YajIkYBSpU3MCJMNZTwtClMPUDDO5DJ0GRjykiUqV9XRTCd\nN2+o10T9rCtESTKlEhVNziwwH6QxscWgBH4OItY+TZgs+7o7k77v05QW29BQ\n8hp3UJzqSxAUlHo/tJ1kr15e7C96Rpr8ybyrMlZMKSIHYmOpoUPIBfGxLyAB\nDKpFAGX/3yAgIOr4iXjKSjeRcVr2mTBJM2Lh/Qc3tQy01uC1SIy4rxCRTIC+\nOXp5gcdhP5EuvfhJQ65L2/9WzN5NNvmnh5Qo/ntSsHNum5YHjLlWQ/Z/2W24\n/X3BoEqSIdwCPfNAiRT8f970JGsmewDf0EtbkNSk6Huio6VK9yvyqppiTnuu\nBx7DoDyiJkqbZE3HiuKAUx55YoUj57U+j4W7tZDjK6JABOb+2Kgh2WLKDQb5\nC2KmzYBr3Ckcx/uyIxwejcf5BwQhNo5hlHdHNmgsO3Oh2IYEXj7zQF5N4vyR\nAHw8\r\n=eFTN\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"bea5c93029af550cc216dfa7d80d2ff56a3eb78b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.4.0-rc.0","@yoast/style-guide":"^0.11.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.6.0-rc.0_1591610311452_0.06848723507598731","host":"s3://npm-registry-packages"}},"2.6.0":{"name":"@yoast/configuration-wizard","version":"2.6.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.6.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"9d554dcb91510e8351b8fda648e9bbc5eec7ff40","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.6.0.tgz","fileCount":18,"integrity":"sha512-ZctXNcK0+TQIqEnSyvI5tk5tRcZlR5c8aWg3YHu27Qa3I8lPw3xo9T8h6/piJUIVOfTxGn/3H+i7MEQDisSxqQ==","signatures":[{"sig":"MEQCIFCWi9v1VyrufaTFViDRF7RR1KboHZZ59T0p6cTT14fVAiAIRaIFHS1CwMWUSN+ebeFXCZFmv+aNxnA49E72hUNLoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":60542,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8HR7CRA9TVsSAnZWagAAqigP/ilSe26FwTD+DbNW2Boe\nhM4VQ7EGdkeTeXVjvdQGa/coxz5CwglIiVhy5SjXCD3EP/jzfSsCO2rIP0Vg\nWNjjtmLBRDX9Y7WUBivvrV2c0tWV8KnjOiWZAdqcS0o2p5t3pxeUUXfZJvts\n6XSsFtUur974rFaUUZi5G/51EOTzgD5BPBTX/JF3bK4q+CD4PNuQqZ23C+HC\n4rcTbn001Rb0bm4SLGdeT1mvlpGRSw6Rei79XtcCXZ+EU2uBdpiCzgpnSGnO\n0wXzblAPVkRrdpKGeNXbk8E+q876Ltu1szn/nzRIY/6xy/Nehu9uAeJAcd4f\nMWc8WPlZJz6MtnTGZGzm42lFoZrQOXM0xAH4/klVVgDajnWaf5BQvN0Bs78z\nXrXD2nlp88W1lbBUglFikQH0Jt+N/cc4WA9raxxmDiADyxJZ//azylTbf+wv\nEMDDF45WjdZvQW6N6vknWz67zJXnamTGFUWk/w8JZnnJvF+HJs9R/33aT224\nm4AnEn6qr4BhWSsqHzSty/aWi6zCL5qKLP4aSfcQ4qG3l+0qVa6fH6H7Bf50\n4C/m07zQlO6YOhUArVQ47vHBfzH5i9EWO2FMsFKNSRWgVNBgl+BK7osLBt1g\nMhWVVHSJg4Ls/lm9dz1TP3ZtzHn9leEGXA3jS25l3rxxfwkj1SNhqVw1muyv\nvQJ+\r\n=1T5f\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"8b7f02d1d76c5ef3feaf36b8b2212544d86f6493","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && cp src/configuration-wizard.scss dist/src/configuration-wizard.scss && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.12.1","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.4.0","@yoast/style-guide":"^0.11.2","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.6.3","enzyme":"3.9.0","react-dom":"16.6.3","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.6.0_1592816763059_0.6977948839355461","host":"s3://npm-registry-packages"}},"2.7.0-rc.3":{"name":"@yoast/configuration-wizard","version":"2.7.0-rc.3","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.7.0-rc.3","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"8643776a2e78fe024f02f877f8eb629bb1473877","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.7.0-rc.3.tgz","fileCount":16,"integrity":"sha512-DVFFV7t3Cc8VzO9JY5NYgwxTonoZ0kNYSpzuRYnpUv7NEUBY+5ubGJjociXYiESNrdg6AyoTN9qpSF0GMveu9Q==","signatures":[{"sig":"MEQCIBNTDeFmW5tApwh6PA/81TrNtBZSIFVwWoeK7N5fG1gdAiAx9gijHKEtPeypwTLY0876rivJwhRkLWwijMbtKSFnaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8dPNCRA9TVsSAnZWagAAqEcP/R4BsvYcy7z3LLnfg03h\n6sDejYSLXv1MNn9LAe1+IbMDttZY1aUBEc4IwP0QXAEs7Hv20Y62Uv3AQ5fi\nUlwHrWGxcHkXKvdhKaMMrdV+0TIo/MlqVFozTL6JiztVmyinT55wMFQ+sVVe\nu/Uo4zZxpX0ZOFv4pfVPAg/Xm1Ozh+oiCwy7nbOuM20GD/bTQKBDNMqRQrSX\n6KjfqhljTBjT5aSVAJm2LD/A/AAzcDCaUPZF8YREEfvRUGA7+LvEAZgFJFQv\nqCG3thZSygxGXswP1bD9tCVs1fwEFsQkCMcpxdMzu1bHBlexOt1AVu7PXq6u\n6FiwVNRbP4sP6PcAOsFD2X71ktwfnKd1m4Q8UpqyP5AS9hzKCsRF2gnDsLZ1\noBuRl6YqpoYceyv+4fDtcuTUmd9rBREBaAn9r7P8WEXsmYmIvnZYiI/CnaXa\n8RgBvOMFkue9tK0dP8XRgGq4kG6dnFB3Q3bRkg+E3xm/KJYL2szAgxhuzrVy\nmX1uV1D7Pmj6CJIJOEiM6OzrZ4RLM42TnMpzuBG93xZzxxCjmi1tddKDWvRp\nryFRkKl5SEm09gqBZBl9HxlhPaU2+d1vvQ4I2wtF6D/0WWm0Qa3ecJh0ouX4\nVYR+8LbpGAa8sEoRa0vEak3wuNcrPT6YbuY0kauc1fxlNu8mM1eUZUbmF8q6\nayvk\r\n=lk+b\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"37d894f0b13e31e2cdb0a3920d3c66ac1a024cc9","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0-rc.3","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.5.0-rc.3","@yoast/style-guide":"^0.12.0-rc.3","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.7.0-rc.3_1592906701232_0.896646139494855","host":"s3://npm-registry-packages"}},"2.7.0-rc.4":{"name":"@yoast/configuration-wizard","version":"2.7.0-rc.4","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.7.0-rc.4","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"322266ba7139c6a9de2abb9a9f542d8f1607c7d3","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.7.0-rc.4.tgz","fileCount":16,"integrity":"sha512-/jex4jURkN8cnjxmmPmkVnb48i6WLYYyBMHyFCgR2zbfbhvoAwwmu0A7zh5yl3mAXnExQ5pUr3GKPJnSsjvFCw==","signatures":[{"sig":"MEYCIQD5nKFkRdvfVC+pv36AZwvUyEQpKVMcyj5G5YoegKsrWAIhAKFgOC2Z6lMPyz8UdE/nJn0GvIMZfwzm/hKUDhFeYHRe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":51596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ehCCRA9TVsSAnZWagAA/GEP/icf8Fpl/xoCSa+UlWre\n6RQmL0kP0JwYeTI8HrIqZgBWhHRRLrf69fv5svxu1+1m2C5TbBeN5j8r+Bjs\n/GGaCUDyBB11zkbIHv3OSq+3P48uBG2nxOzDq0Iw4a6RdCbavAdL8pYn6C9y\nso06ECkD/6PThv/PSbi7VUVGkiNgoCam2qo52Sv3NYwVH8EfUZsIsB99zmHF\nMjZ9Vb/4WHtizLxfW5XwXfDqELTMK9rSwhPuZaYjFhhQ0PrWzyvOzwzFT0hl\nYEtqAXO5bGVgcbEjVEgbizWtu2gz17Ctfdi/YSvTr+Xlvotle3x1IGvQ8pxi\npqeCGTaB7amcHqRrZi6HQtMCnAr/m6/B+ZZ/0VGV57rWfyitvVykl0pqESPi\nqj/pVKVXSwYb/BQSjObIuYSGMHd3DNPz9+ET2psDVEr+8DVtoTjJ9KudgxJF\nHvoUl7NeGH1rcOLrwga9h4tgQeoY6BnwFxFLshd2gaYR7wih4qpkkO/6Pfuo\nmUUq5j3wTQKwDMDtLsLDduU6sdaybDZM3IayCcLPgdH6Zlnp1eAEnt1ulWAL\nL3TiqEhkZJlAVllMmISUlKZBRqZm5IW0d5RQNUqwo7IIjkPUb80bdcE82apn\n9G+5/CK8bgo8BgJi46kmmnOHOO4jPSu8uBI6om/bPMSEfAgYAZbdF5lYquSD\nxa1C\r\n=3q/8\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"9647a468ab472ed29875942312c6e294720bccb4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0-rc.3","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.5.0-rc.4","@yoast/style-guide":"^0.12.0-rc.3","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.7.0-rc.4_1593174082481_0.06557053361587295","host":"s3://npm-registry-packages"}},"2.7.0-rc.6":{"name":"@yoast/configuration-wizard","version":"2.7.0-rc.6","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.7.0-rc.6","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"84b2831a691ddbbfb764717843bc6fdc6e463f9c","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.7.0-rc.6.tgz","fileCount":16,"integrity":"sha512-Q3+tRB3Uug7h3x7C+BAgbfb8vEvR9b4aw4qaY7cnS09lpORBxZ8TpHbbZpc+rh3D2ZVu5n4EwSyAxT0bby9/lQ==","signatures":[{"sig":"MEYCIQDb6+AXN2cTthidQOy0wNA/KuKe7nBumaRfj8Gis/wbcwIhANtOPtjN9O32hrc0Vb/ElPzmRSHIr0hidkq5qUzClRDQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBHY8CRA9TVsSAnZWagAAvwIP/2kqeQPoJhYMTVvGZC91\n/QYe2LimtjLiJay6iCKOA+sDWaXi+Nal+WIvRTrXmjZa4y8ns7lmI6pHkLwP\nhPKyWZepZdsMvo0LSw6QvR+Q9TZv/MvMEPzUU9DhspkdMzy6i2DxcPm+boU1\n/Gmk07N89fXYhM+vrepc/kuVLLF1wDk3ghsanolSk8ppI//vyO8w4Znlne8e\nvUsTP+62qiFxzTSh03ny9epyG78QelE1hN5ZlG/BWWMX1+S2+9CE6/x8pzpV\nab5+o0i4LO+6tMEQkxR0ZJPKSgP0jcyet5R104XNBW/zYJu86XRNGV7AmO5m\n27vRIXMkN9cL/CJZcJ0LQEZoL3CFKAdQtb06K0NmPDUbMrkZhE/FFzltL6I8\nWCNmXNN8V0gzmlYeo3moL0o41R0RgRkKP/9OPrfy/x0mCXcIor51tfAq5sUK\nNzVZVf9WAwix0v99mtEALHH72BRB3GMghtTU5ebjNhqMH6vTKXmkcv0VmxqM\n66m+XNZ9ATSFpcpnq0P9lRCiEBmZj/NRRngu49cZj+2DiG1tk0DufVLbmdam\n0cLvHHD8/kHCCf1MwEZsQmrdY5PYOiCV7wxQcD2MHPVLobERl9T539SW2gKk\nOu+Bl0flG9WKlBV7Op2kpHnu6QzZFtphqk2KK+1ltOLEHbo1Ru+p/25FQ9Jl\nEjla\r\n=cGTK\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"b3acd2a426647c34cd23ed2ee24bac0a29535ff8","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0-rc.5","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.5.0-rc.6","@yoast/style-guide":"^0.12.0-rc.5","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.7.0-rc.6_1594127932023_0.975593019493606","host":"s3://npm-registry-packages"}},"2.7.0-rc.7":{"name":"@yoast/configuration-wizard","version":"2.7.0-rc.7","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.7.0-rc.7","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"8d6415a9bcc757393b6258132d5296e82656d18a","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.7.0-rc.7.tgz","fileCount":16,"integrity":"sha512-KgeOWPM3Y4FCzzdOW5FiyywtefKmddlXJYxfQaNv8fPVroE7Khyqdw7YOnIdUjCoWUKJjuO5/dRt5ZIOEQUNsw==","signatures":[{"sig":"MEUCIQDv+doW+jdxWKJt2/C4hxOASEUG43SxfyGM0/QurYMZsQIgJj/PRH6oMmKn2Cp+EXUdIxY7TX0ptBp73W1CX7hit/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD/YbCRA9TVsSAnZWagAACt0P/RInjGn9fzJOFilWkwTo\n9jExTWL9ExZPwZ3z0KbmAAz7KeQ77NuKb21dJlXhOQURXjU2hlVMKZzZQr+o\n5zDi9V/qUsDn5YOKS/dd6uUfiHurQarXM4qHt0xjdqBV/ihgJ0XHDbg7lSbG\nUZWrqjhB/+IUdmtNe+O5JumxB+5cQuzRTj5uOcToYqhVCt7Xv9d1RaM0BBKJ\n+Sqqj0Ssv8dBJZaLktwfQuuS235Klb+IH7aAfQQwvEz2Ap/BjdCsYEjB/CKN\niRyavvW2z3tR23AreISX9LnynoZ5UU2u3lCog7sR2CkYymcfYaHk4v0t1oSF\nTV/aWWHUJK2rGAERg/2ITS3YTz9S1/YMPIywtW2FSs3/FYTOam8zlDK1i89Y\nIAJcpIJ/QZa3JEIWnxxI9aOBYlSn6Ydv7MyEVltVNIf6iCt9IT5EUEjAAD4Z\nTeVNM0RiHqIK7QxChRf8eHolmQOGY2iWsWiYh1BqdvGcakmPZqRz/6hBGuUn\njNpthIQRgwwRFCRDVEFg637PPalGmq699beiCAPBlrWn+0BrDR3GXA1qddtq\n5VPdOsWXkkWrowbTbIyCkWC433rUVMaAKGwCJrKOSMZpE3ICXJ46R3Q93XLD\nSE5n74kh6VrBOKo1D++Yjx2uO7xCM9zl5tOCwTuT3j/buAmFWEL+DhC+kmIA\nSsLx\r\n=IR0V\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"11629a1e058afa398560600f0c1fed8703152448","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0-rc.5","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.5.0-rc.7","@yoast/style-guide":"^0.12.0-rc.5","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.7.0-rc.7_1594881562756_0.03605559163491834","host":"s3://npm-registry-packages"}},"2.7.0":{"name":"@yoast/configuration-wizard","version":"2.7.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.7.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"cb1d5caf1adc0ba9fb3dbff723d315bcd7f46f00","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.7.0.tgz","fileCount":16,"integrity":"sha512-uib2S2HDfLra26RVYcuEgWs7/BWDBO7+DMkywwbdLpT3J3RftbwrEEFPE/erBKixfa0awOQRGDUwfK/5tiBLzw==","signatures":[{"sig":"MEUCIA1+T6oCUp7JppLcYR/LrnN9dokoJiNnOeZbZfDL5BbPAiEArioe0qR6E43YSE8YZIpVuhYxxdpiNAch1zh1eq19HlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFUpTCRA9TVsSAnZWagAAs38P/1WthjQAYRpajy7v/ziQ\nsfhHHpcZePf2vkH442Jc0FO4kc+9nXZj+CUe50wJq2151JOdXK/FsHaFCOW2\nU8Go/cKjV+05HyHmaxA/3jEkjyCdQN9KdiNNeB5dMCPo71Ba+qW+e5NfMs+Y\nyFY7u/ezEWZ6psdOyQi1tG7XdQhOLEpNlTdBvhBw/TCFTA0clB/SR39tkly9\n5wxqlF4J9z+ul8FrrwD5fZAXtyDcl717QUKE5EgRkiIPxgGzeyQGsr9Ppahv\n5iI+Z5hg84zNTQxhuFmcK2Rbwr2g4X37Z3bCX1Hmm5xAF6aVWud1XtFY3Eeo\nD+C/g5gtQtlap80nBaH3KZAe/IePtdRyLLosr3gnw488au7kXLfRQk5yMWXZ\nAR6o1Z4DljvdQktLZo9BJNZesjz4kdU5XMbkcBTgxmPrIMNyawgUt3hor65w\ncZcU+6q3rFw0PnSQQgrLKtpCSSuU66pkerGSDNyih+LUIx1KS4P05sJxvfVM\nOIROmjfFwW/7SFA4UKOWfbHRhvdGbE4Ddam4MBos0J53evGL0jqAd8hub6BW\nX6QbnvDtAq6MELtn/5nBMygmqt6ixlffMKOXuo6Tzq5kIZognjneAiTzom2r\nyNK5VGOxncrAtJYZTM7SrVwb7N8NVHXPPFsb6HwwQPCpP3gwphJUejyjr1sJ\nYhI3\r\n=0N3t\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"815dd401382f86e6780df2a902f3683dccd77044","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.5.0","@yoast/style-guide":"^0.12.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.7.0_1595230803518_0.35088335170347285","host":"s3://npm-registry-packages"}},"2.8.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.8.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.8.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b5fd742c02b5392791eb7287446970780b827789","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.8.0-rc.0.tgz","fileCount":16,"integrity":"sha512-aI7CRavgjN4AaPnKvrgpbB1kHFUe61JtxoEmP05NMv8BgWVqtN5fZo1ZC9uY9XFy8nS3JvsLrgSml2JhjfrRCQ==","signatures":[{"sig":"MEUCID7p/cU+VaiYhoDIVmOHWqoF4yqvjW4WATisAO4sFZrcAiEA+4yt2WkhAKsjUC9fLoRuMspEtZRfOEQGqPnzFLX4its=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50222,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFZXeCRA9TVsSAnZWagAAQJwQAJlmKfWvV80I0Ps8As4o\n0ccR1KmNUaZlKO7HMjcy0xXv5dFPdfde6cicJDbVwidmubjzkOHtiUhnlpeu\nLjJKgG4B3GrEKwpEWjeauaN8NzozZOlo+b9dFMZV0Vvf7hKxAxAmqaQcsbKX\nmz2spWrLb0R0/6Wswhg7FWu11iJnXmlw0daDnFuKNA22DJMtsNDG7Un1LFnR\ncbZlm1gNOGrq/pItnkquG/5JCr55TioWRlbbuHW//oB2h4IMrgHahqauWCqx\noTXBYVNpJwcVnehY5XO7RRHPgkEimbxYaTWwaBGkq6ENx9p5ThFFVqQrkQkW\n2P5MJOIc5dud1utv2u2DPK8uz2DqztI6d9PZjbv4SAbwmi/dR1iAuE2OONAr\nJXtW/UZQtqorFRszqU3VnS5j+qelHiFUKZAxywPzZpifN0h5Z+KgBRWH8wP2\nzC1n5D7UWySQD8Ihg0Kgr0zOXmq60eGwlN3QPipoe3tWDGWvs5QE87x72BAk\nkWOTaupg+SCFdSfQ1JgAdsHlpwhzUsu8vMac8uvKDs2s2csgjqc97xYj7atY\nDFTqgLM95wKJ1CezKEMSeml/msk02cEJ6NeYlrTMGLkwy3Ydn57im4cKRu1F\nNIcpV0HMzuuSerzfqfnwRVcpyWGNMc/iVQxu/ZSfmBzmanzraUWBYb84hJtb\nFxrz\r\n=VuZQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"cd7a398b418fd72d6e642217f09b4da5ceb9a624","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.6.0-rc.0","@yoast/style-guide":"^0.13.0-rc.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.8.0-rc.0_1595250141797_0.7939374394368155","host":"s3://npm-registry-packages"}},"2.8.0":{"name":"@yoast/configuration-wizard","version":"2.8.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.8.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"091cf82e5c4b8e42f7f4e2ec900522562e675519","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.8.0.tgz","fileCount":16,"integrity":"sha512-eUNRdAstsqu0W1SZWpyDVKiadek59kZk4/eD97h91kTpr6oMr6G0uJpTrGpjFJVzLM76M5UVo+wMN5ZMbhoCyQ==","signatures":[{"sig":"MEUCIBR+5YjKiUnx0ta/b0FF2DPxDz0y40yYNdwpYBC+Y+mKAiEAhef8Ayc1JPh314PrrpieL0CaOdtRc8JnnVOp/3smczY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJ7FrCRA9TVsSAnZWagAArLEP/j44Bvn//ffriah2FQAb\nJ21BXHwKA7Aur7fq/u8stpgcHMozsmZJ/M4jrioT0Ud1SFCqolqRWtjb50vK\nYb7ZBrbep21LArcs5++ClRUpogznm3qAWeocuw9bi4PQ+DTEnzlPr5nZB+4C\nUrFWK2i1c/PY76RsBNtbf1cUm7hG16mwNg/ZqsndaJCkHVcWi1WKGETzepeb\nSJkYX93FcQLIJFIBaJbmcjyiTz9HbOw/0r31ubRFmM4yEI2yVB30xVJXTwgm\n7L1DsRpvNxEnSHeoAKyoebrTLcMxv5J7AsIUaZJYbl970tAotq5ax3N4sIOS\nZt7AXYJtrvGkzh1pHkil4SQ8gIHgBmhCsiqm0702Ae+sY7KFigs7xZqTjFYW\nOgUUdPQwKqeHGLnEJqmEutYEqyGSTWBeITtewoHvVLtNYhrJrRuzRziRoPQj\nJA2MP/f8+XURcgR2A/ACoVinNydDtsdVr7sZGWzyub1cnFJi7ghjeoovirwq\nQWSYO5yB0c8yzQhf+vxUtulrriGkKPyR3jFdwYq1x7YLrCnIbFIciPEmoVD/\nRGXpBxGGRXwZXUE+fDS5fdpbYVPRxUY8/PFMcKSGAqsu/FenyMYD0w41wJng\nEYTfqrKuJ96f6BgtVMEdJINy3wz9slVy/pk8CpZ+Fok1z1+pVbXAMxRd+jFQ\nkkKr\r\n=jsaQ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"582d1e8cbd165c6d59270ab1ac3a1a325e204341","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.6.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.8.0_1596436843481_0.8863798504949525","host":"s3://npm-registry-packages"}},"2.9.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.9.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.9.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"001fd76c564fb3579931663662f76670c720eb25","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.9.0-rc.0.tgz","fileCount":16,"integrity":"sha512-ydvQpnrzy+ocf1msIZ2Lg5fOJgLVJR0NKbMv7OyWL1xWV/TGak+T66Du9qMbK+35l76B80HEKffH46lD+24ezA==","signatures":[{"sig":"MEUCIQD88ilCsMcUhecu26z42rT2ZNNtoX9giqNhw5DJqiWUjwIgNvbd/Rxll+TuzbJzSd8FOt86WXX6vOjyUVJlBUOw5N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJ+BrCRA9TVsSAnZWagAAm/AP/iRfb6vcFvD9EEgSGwoA\nDiFOriPTM5TMEUO8+ODa1f5yZWjQs1hS1nx1KJ3Wy7h/advpD1MNtSykIG4R\ncUNDJKkgfzksZll7CXsUJM++bo/x8A0BaolBDyOt80t3Ts+cWiMuEz0XgB+u\nM62gNgZvIp6SLaOGKjQk7t7hty1zq4168+huJ3JdgAVbJhZJzVAmPPfK0jL9\nmDC0BZLnZcbN5mV/jCPU9SsX4yNSp+GTlLXNx9B7GpSrhXQzMHhkRYPTKhPp\nY7J+PgclnmGHw+d7x85QFnCR/mRdOUWPP6JJpXnTM6nQgFNR6eeiTSs+isg2\n+DWQtlekZNYpXT/Qs+uMfnVKCadr2bgx+cB1ww8v/a7CZaj99mn+6/g+RkAE\n/NoQiP5LuBi0ExM8kSpQ8mJW85in4QvqvmF/xgZrD21/iq4LP6jWm8B++kV2\njLBse1driy0HmgiH77XHnqJLwYHLoKVdKlW1gEjwzM2nTsuQQ+KM9CJiY/nb\nyQNOWxqDjEwlSrGaCagbPcg1rbCCC8uh4Hl15GY7iNNd3an/WpBNJHaCqZyM\nXIoGMPLiqkP1Fo3EC2sHBiu3PgJzLWt33btxppMgVC7TrsRxCnwoBDk3qfhP\nN3zcFT9CLrLac+BVvzGct/oxdMQxM+0GPpJOApt686k+YXBrHliOw0e3raZT\nwf64\r\n=BN2q\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f958262320350f0298a4b2230fc3b5dd16c98be2","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.7.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.9.0-rc.0_1596448874839_0.06770134936590066","host":"s3://npm-registry-packages"}},"2.9.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.9.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.9.0-rc.1","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"4d41e4a1212bbb4f04bd4fceb57f6ed4760559b4","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.9.0-rc.1.tgz","fileCount":16,"integrity":"sha512-xzqMj0soBic4xuo8B96Wm/S4SuIgs/IT9Hl86buI6BPNooF41y1eBi7Jwv6WZVSBJtUC8scHm8WaOXW0iP37rQ==","signatures":[{"sig":"MEUCIQCQNbslRBYaPFyvg88tfQsAztlQGPWwnwzvJDhTGA7JEAIgflkLyBHnbiuDfUwEi5NVpHxzs5f5FbiniWoIvgcDrdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNSTBCRA9TVsSAnZWagAAC6MQAIzpXN8TRguCrvXTXUZc\n/qSbYKy1JU88tGtPqFiucfYBBmXLWkQq6DWRxMzMoPjOwi2mH6dGTUFYVwei\nuTEwBF4bP2WV2qS6wL3h9Qu/NW/8bz0DEBv87HB8e6NQ2Oe2VXGrMV0/b3Q1\nKkFoD5ZF+tKm/W8q95sXwVEkr3Oz/1aIJPJIw4hi/I003UCgo9DpfVsQbngP\nBPEeDC0gi0sn7TY7elJVYIQpQTQleu8tkBDjuz+3Qtq4+Owzyi4lZDVhhY4z\nHYlickSNhli42WoTQalAd5YbUWT3p/50OwnO+q0Xg4wH/VyQHd3ezPgJ7Eas\n1DuxJ66KAKneJQYJavHnodvAWF+blLyjCA+D3+7zu2+SFP7M1D3DvRAPOb9b\njwZXZ8P7ybzgxwDd78EaN3XDtNfpmiN+MNyct9Rin5PH/G+YAkCBgbFnMQeZ\nnto8MXaIqJc52DzXZRyFSM6rlgC5t7ClSszeSQuXlU2XQum+4U40EnMtnJni\nrezdvbe2UCcoaLX6AuDaNDY/RdjzrxESwmmKS/g5NmOCyCNtFlILqOcIcWV0\njJ/84iLBn8ppDdlVOKPJLmA736ThmMq2na+mPJG0lHhG3QmjXm957kST9U7i\n/TDAU48hNRJsjKB27XFQ3inuEyTjDGGYJcN7JA0NbH1tZpzJMHQf020kHWqc\njaEp\r\n=dGM9\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"d3f421645dea0eb94384703d53f831ff01ddfd8f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.7.0-rc.1","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.9.0-rc.1_1597318337060_0.905467729742157","host":"s3://npm-registry-packages"}},"2.9.0":{"name":"@yoast/configuration-wizard","version":"2.9.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.9.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"516c1739fd8da814e656f4af0df363e507afd980","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.9.0.tgz","fileCount":16,"integrity":"sha512-beiptIH4qrz6GGjxfIgk6mXt7mQN4ICgmaZiOAFxwlgmIfs1Gi0bbzDGhdtP2+YmPVDkqAZHQBRMcA0cJ8LhZA==","signatures":[{"sig":"MEQCICbftsZWvsMAq92QtEBbjC1GGBEVVuJjfY0PNiqluuqoAiBe1Yrl1ckiz5ChOQd0lmSXTzX7CwSo9s0pQ62FYPP/ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOm4sCRA9TVsSAnZWagAAReMP/1lHs7Ut2WB8qR/7KfaS\no4GqYHKJHt2ZWZizHavjmECMx+vb3MverOGDPio4W8Rf8/urhGwkl1iaWltQ\nqBt1Gv/13MHJmH4uwOMP9GTO0Qt8Qa/be1o1FV2VUj0IAtnd/N9j+o02IFaI\np9M1g2nczskMUhaY/q9QXcTPC7BbGFJqUgGLYU7CoijPQdi/0Lb6PoOUF8YI\nW31EFASKOU1JmX+HzLetQqCtzS5fyvE3cqcjl3Ra/hJivCFY1kRKlqAcX8Xf\n80GO6JruYaBmrMgz6tdQPiPwlGMO+3W9KpVbvFQkDWGgB+n8oH8vcBgNxywh\n2+7zAL4PFLol/ErQtvJRnGV0X2q9qq9DxJaEqt65STqApJTssyrG7CmNdrri\naQ75OyHwrGT4saOZlVjqmi15BGx0QNcKMsbfmYo8C/oPKpS/zm1hBJnhdDIh\ndbDwbwcP6SdB7lgP0Y8XHzgMSrcy0HmsvwlTQC4kXyKLEUxBF9ThTNb53R8K\nuCd0ppvKZqQCKnuKfrTKokNjU6lj/8LOaqGkSY6PZBWED2JT5X7oS+StutQz\nwhlOYtY45wniNYT/CyEem8NhNNF955qRhCosjLguVhU54dshV9ZnM39oWuL6\nmaeP1s0RzrUtNJLcSR8Jy45LBtb+pHMdNZjIoLoghUYYAt2rW1Je5mY1IMdH\nf1n7\r\n=/jj+\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"b6a29f69aa0ce05df0d3ae9519f01022002cf36b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.7.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.9.0_1597664812347_0.16645938675862215","host":"s3://npm-registry-packages"}},"2.10.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.10.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.10.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"44b3d93f2a2f8ff06cc95d1494fbb094229a275d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.10.0-rc.0.tgz","fileCount":16,"integrity":"sha512-LpqKefjhZMQyvrDyJPQgFzhqSTQJ1Ddeh1IEyR5UHmofEfDsfU1cH9URkz8yB6vd1no95vJGbui1kDRPSoO7NQ==","signatures":[{"sig":"MEUCIQDISgG22YejN/u4BiydUq/jmSdOpKrTiwkkaalkWjJwUAIgXqbZYPGjSx2Zdm0TZMlUx2SW6CUsHm+BbHzx4+51ln8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOoKbCRA9TVsSAnZWagAAPlgP/RVoEM+m5YB1nssxC3II\nmcmKfq0+qLPZ2s5oXm+xzj6m0oNMFJXnH0MAcsGk7m/pTS3dOuFutHZBlUHi\nLd5kKcrYk7KrppLncNtuLpHwbxSwFf0GNCm1yopraedogIua11apQjvlQSbS\nK378pqgvwNvMN+tD12dFRvSjVl2z+mak4KQFVFSTKVUOxjXHBOfT/zi3OINr\niofF/9Z9NkFbMxGVzNwtd8F6XSGro16zJO1awEQGa/rdiLNZ6a/V8LKpM3mP\nbf/bTbi2Ckd6yQuAWT1S8wkG3Djc4AxLok0oyn1ansn64qIV4A7koUQ6Hkzm\nzmCcKEVMKjug2bzukNOLsYTVBr9+XatAlbxFxGSIvyrc6N5x9Zj6rOkE45Vx\nVGsohUySJcQLlK0AodBwV6lwwLM9iR2mrZ88SrZV6pt+owBmq23Omk5I3fGD\nINln7im5TkmV67Flk/kUAjiwSYPUEZpbtCYBnUiMAoAJ5eCu7ioE07iNOHL+\n1VUNZpXBfasKCs81e5B/KS87J+8Tu5XUvdg4VSDmcFng12ETk63YqUvyyZcH\ni3PQ8lv1Fh/URt3GDAdnbC+x6xDzw1eZnqZH5fNbYVb4pwbXYmtpAfnCf8p2\nB77QbbfuVf9ziYe0c26gJhz3smOXLQkoPa2SvceX652fTBLg+VCb44dqwAKx\ns7Jc\r\n=4SzR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"38be5ea23279a319cccbc01ae97141fbd29db2cb","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.8.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.10.0-rc.0_1597670042640_0.7924910158410825","host":"s3://npm-registry-packages"}},"2.10.0":{"name":"@yoast/configuration-wizard","version":"2.10.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.10.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"d270f15a17a305d47f164bb6d97b5ccde818c1ee","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.10.0.tgz","fileCount":16,"integrity":"sha512-zm7lr/G/JqS7wzo7qKyuee9xVm2sLdMzJY+wK0yneRrsSjDZt6LDJrEji6fumQrFSgw0G57kRYuTayrIGe96kQ==","signatures":[{"sig":"MEUCIACVMTFZ49/Ff1gnAKIV8wqL2uM7EYKyUQC00Jhgq8+dAiEAk9Vo8lDpTFedEPAA8ZJ0SucXxiHET6ChdIEuVfzvGOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTKlVCRA9TVsSAnZWagAAbx0P/3lW0PmBXhFVYrM8XWHF\ntY9Vm3HXL8F7m8eDlaA+eJWRp59wAoIX66oDCZ1UjTif2lqFmeRSRb6IlMd5\nZa/6L1RbnV5VCBlVsMT77QUNgaqpjokQ9iAIgTGA7BxUTF8ymp8pa1kPQNCq\nNmV8bAJMILnWiXeEqWZGdO6v9ePzkLqOYBKg+fXJzVxmKW91KkBlLK5U5kMr\nbuWj/2cc6tuLeAh72Acom+Bhv1G9SguRHev7U6O+a4M+OwHeJA36JU5BLL4E\n225oCF9Q0Oy2WNitiBtB5+TZ3ofVUqgblIUINn+BJe/tcZ9kxf5FI9aD83hV\nLi9QXuUwH/zdddfnuLOmEhsLojwn4yRZkzLc06kTWMuyibBZlzcKUdoeVm4D\nd3HhF37eNU5ExzHYriRoVmrbrd6XroQyN531XpikdSe/lZED2iFNMaHwJE3u\n7rD9g8axniYmO8+g/skKf4qM31BwqfVl8EWhHxOp+Ad59uZXmIfMgScIq9PJ\nl6pvGsJD8/9RC7dB69ztarrJ8uAUvK5C9IX2JEurdLyKkxSYpXELfzeVdq+q\nERddKL0aRyKpKl0QaGL+qrwAsJXva/KxhS1/9irnE6GMXkS73+iArPOIuxfX\n5b6jZfsVsqOz0jAPc4cP7iA8d/S8M8ETJWem0V2vIdFrdt3d3beJwTQoYvoj\nRiD9\r\n=ewEk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"0d221c3a38ba6a14a685f53ea7b674296b7034ea","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.8.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.10.0_1598859604689_0.9440748091276465","host":"s3://npm-registry-packages"}},"2.11.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.11.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.11.0-rc.0","maintainers":[{"name":"atimmer","email":"email@atimmer.com"},{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"yoastbot","email":"webmaster@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"e7bfb58636dc7cc8278a0955a60edef70e434fe0","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.11.0-rc.0.tgz","fileCount":16,"integrity":"sha512-s54IthHt3OeLIA/OgudrlL1G0z0YjFfbLwkL8sjRK3Ve6I1y+nI5keKTpv4ChONHi19HFOkbGRnX6/hASK1iDA==","signatures":[{"sig":"MEUCIQD95UrxKyg1om0ayqYaXcRNqEDOyOkwaKNZ5vSgZ4hWSQIgI+voyu+446COrg5eeiVBLuXOKCl+QVfr1I4r3R+ASFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTMX0CRA9TVsSAnZWagAApLAP/3wORf+yP4r7bGq5qNUS\n3ii0gAUYCkD2ZWPgNy63hS5rwUUr2odTWJJJg0qfqny/BzN71PDny4DpSZ/C\nLxW/JUAi//lR1bAQvZXy736Ltz9a0WjDPqLhg7gqX7PCbaF83wSkTM6D84q6\ncBJy7DVMTJL/JblhR5Jl9A7TF9EBLovLOAJybCBNZad9Arj0NkoNYv2h+O/o\nsFe6vyzn8OrkvhwYoSMK+5ckaLRyrOy3pj30WbsRZ6Vx8VllniNcb7De/fLB\ncYTexAmMDQMetRpCLpnZf1aFqXvwgZswQUkNTX/P7crZFi8AulzZF+k7luV9\nD2YB26gvTAfKxYe4kzREpEfyeL7E94kgXB/ce9vN1/sc2ou9OUe8z/QAZ0af\n0qSjYSZxUaqW9bgXZdERKxCoeCkWtmwPXZozksLAdyz068iZaD9sO7juiVwA\nPxomTSKY/kpUqHhXZeJK9zFjcCUMieJk3xh9PhOgXL7u8fkgx/h+iC9Qr0fc\nVsNS3aQQlfPKG5tlGVELzV5SxWlfGRdMcnSy+T4AjjM3SMI9oOa8+Y/9eTbV\nR0374A3ureOloRK7QUOps+QQ2K7UK4E/SDAjSHdQY8lcVpyTX1p6P2GyrdFo\nKVX8Bvj79ID1uuNJsK5S1tk9m41aYcCIZA1ht6hWAZG4BYmfqJOkS16jdOvf\nVEpp\r\n=MtR2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"13bd0e213c37374fd48aced17507c6919ba7c68b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.9.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.11.0-rc.0_1598866931890_0.38381735226200475","host":"s3://npm-registry-packages"}},"2.11.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.11.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.11.0-rc.1","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"6d99884b1405ea590efcbaa76c7df222110ec5be","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.11.0-rc.1.tgz","fileCount":16,"integrity":"sha512-1t1dUIvIv9moqB5g1gsV7PH6EEF/uJokl68AJvjRoKWdMUuUYGXRdcLbEw9gldyQJqYM6IxsX4Ufl/BQenL0lg==","signatures":[{"sig":"MEUCIDSIEq49++IWuNBFxNKTIEL42cjXLbOWbOFNXh/8yd76AiEAoTm8aEpAOQuBupLzGq+l7w0t5nikWNvJ5ucRoa0iIMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV4RZCRA9TVsSAnZWagAAwQUP/iGQV0gXah4qnxVDhX77\nbxf5fOwpmAU/J3ElE5qzB7e8AihO9E5zZo/4rsSjGUX1VI5xv19HkOd9PnWY\n5QCFBHCZeoyT6AjSdAhSjjjjIhPBPRip8pQu8R3hXd5IDIPDWdmU/N0tDBCh\nggZ5tWdPEGEoS0222c9ImbCcjbG3pwPxLMdtMXs01qYyITSITYNhxsE7Ygkv\n8wgv9k5DewVrbNnTDmzfEQOvlobNeVPjBiPW7UL/uWEuFnnLe42YFhT5x8uH\n/f61V/ZZFXM0KSsUHwrnn97DWSPlfLsQJ+J9yiPxjO9nIpNNh17djEwK9A/G\nISvG5Clon0qXs7PjNGFrPp1WpKiOMny1fQRQgDZMiJyKgIRrmcsLxHc4hzsw\nh7Ot42LH34IYDwrw8IZWW2SmURQlaTsprzexm6yYpYksyaO6j+rvis1mJgwo\nURQjpZQYC+Abdzej23+iUnHXd5M05WzYKa4AWwyCFSEmrwosnKFueRVcML91\nV2ZHdqGZQf/mobr9qMfHODo70PcScXTAU7GfH4WAtPahtpekWu6NdpfHzn1S\nOZtdGjsgSalshIkL/1VZEype+uwxuB4wGzvdBl7xTp2WV6sDU7EwZvLztlIa\nGHfGMdV9UpBAzaDfOaBwIkKXPwiPI8zGTIttV412h/Dyp5GC8HE/+s5UEhx/\n7TUu\r\n=yIE2\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f3c26b7dcc20148e183a919e7899e4aabccbe37e","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.9.0-rc.1","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.11.0-rc.1_1599571033130_0.8915534478071545","host":"s3://npm-registry-packages"}},"2.11.0-rc.2":{"name":"@yoast/configuration-wizard","version":"2.11.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.11.0-rc.2","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"eb3cd5a0cd0eb8bc9af0450961200334ebf50b6d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.11.0-rc.2.tgz","fileCount":16,"integrity":"sha512-C0jRxpPdGaBmHggJPs+2/PzlQo+Ow478gYU3soBhT5nfTbEFhPdn4qPHjNvnZxWPpvSfUUhAyubEXUoURFecgw==","signatures":[{"sig":"MEQCICGm0R+LxMwJMOr8DQgSK6b2vjtCIv1oZoJOCYVq4z3lAiBYOw2gw2vUfm08ovffgN/Cf+s3/tX35ih3mBoP0pnyYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYGkSCRA9TVsSAnZWagAAECQP/1cIfcAnK57ouD2OeWY9\nwzB3N+SzRd3qIrR3fErlIparubsy6UNm5SBmrcwHEgU/j69Ym00p38WVxGJT\nhGki0gLTyc0xYr0aJyyEN4z7A+I5gvlSNx9ROr67domlUDKdZUq+g80X8zNc\n6QpsbyAHAnQpKLFqndADvBtOxqLSmC2TvWpt6kA/XZA3uiOgHUogQa0z4YG3\n0nyesh2oKFSx8CXtueY7pjM1hyF1cHKwXoOqLXzd31PqnoFUStX7hsE29EMx\nx+wSqpFmcWQxso8bMEcJyf5DIfvxZCIeavj7yoKgQxyAp2eL65etJmeGAhtu\nK0aZ46sozZzI4Bub4zCwiASqQhTmaB/JWrve8IdUU73o2TnXvUTXRahdJ3Uy\nb3EELdAt87bVjcjrmaIYuhp+3X2W0TTRNLl7pDy0leEoYjmTJurFpIGiX3d8\nTY4ejgB2nTvX84l3U28G6zveHPXykkWPdo6vfZkZpqQ0OIclMfJ/9Ox5DuaI\nAr8r3yoC2MNJuVBxt1/HhsYRH647lHqsFKTJthjDWH296oyk42aJxbUzJDzC\nlVtsBFnGLIDaQAKXZgtmWKbB1FFvfG8J7Oi+b4qI1VxS6cTv17bNQJz6Yybt\ncjUa1VFAG9v+7+ObW5Hs6XcCYRp8i7a8Fjp/3jRCvAp+njKBWT3Qvw4c6ooi\npDZi\r\n=4Ge7\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"79392a6eca376c7d3ff6bf8458400e026295df37","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.9.0-rc.2","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.11.0-rc.2_1600153873913_0.35159645463347","host":"s3://npm-registry-packages"}},"2.11.0":{"name":"@yoast/configuration-wizard","version":"2.11.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.11.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"510561108873ff10ce2d8e59d6019eac13c309ea","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.11.0.tgz","fileCount":16,"integrity":"sha512-x+RK8BC7p2UsGzJLK5M2xZbKxEf+DD1NpOXXB90ToxUiROqRWRgk2XyKs1z0CZT0nFX3V4PvtgsGC0v2GxCpEg==","signatures":[{"sig":"MEUCIQDC9NrQLa/u46HvNMCrhuiW8rrVVev46JTbolhoV95RiwIgWD5nKK2H/aolSjcMuZdqu6HZZQAg2DifnEkIvVggtgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYxIrCRA9TVsSAnZWagAAgm0P/io333KxU5QHPoEEEBOA\noSl1fsuYweiQFkaooWyvnm17S9SeyzgiAFyfavDwvUDAMNds5/R4w4I9X8nC\n6h7axVRLFj2GdXDEqegM2SFs5iADq+j6C6Unc7IVx9CjgDApUEJtAhIB0IQ7\nQF7OH3pp4L35nuPHqL+SGfJgsoiTAkTowRLH6EEx1RDRVMq8LJh9H/wkpPkj\nY5XFpDuHB8r7TLrOqNTuemdk7Pi+aJ6IHPINLU/qCJuzocz8Wjsc57xdx1fE\n6G3E9xkyiXJ6D4ilbwabJzsXcgH9GQ8Mcz0k940SV7YJ3Up97eVKcv08sNbw\nnKh05e6akzz1AFfg1GOZZeHj3hpF0upvbsTUp/+/9gLDklIlaYhHD+Eo7mje\nXfx4H0S5caOFT/ANx+fROe8TUwZeVqZGMSLLQpZKwN3nILETVr4DxtSfv+HW\np3PCN06RWyqLakv8fiLh+GUa7Ok4OLCYOlEIYa3ux27pTcYUtVs9jf3UsZEy\nzvw7zFkM4R+XK+2hTkHTJweUZ4gAJI4u7hGZxha+8eSUE29KP1ghD/EP2im4\nl2X3vGnge2af402gSMDZJNNK3qJjHp3aWBBbqQ0W7tbbvgnn/vAozsdLXuLC\nr1Kee0FTHHBjRDpS8zteZzMlrIyoZdjzpzVyYikHxncv1rj73gCaAAE1P1cC\ndP/H\r\n=MJI5\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"be2741e5b28aad1ac654c413d12483e0fd7f2404","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.9.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.11.0_1600328235019_0.41989760198741166","host":"s3://npm-registry-packages"}},"2.12.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.12.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0-rc.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"atimmer","email":"email@atimmer.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b3900e72ad825497f7678eb9d2ccb9e5812bf667","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0-rc.0.tgz","fileCount":16,"integrity":"sha512-wJb6yb1AqLswqGL6FI16mVAr25jLQwY8mmU+BYWQACpQBrBkMMOUtCmIRsodThMopz3rdwnu2PZFbC3dB0Wg3A==","signatures":[{"sig":"MEUCIQD/8+t1GiyFgR9ROZFfUiQP5kZ+RxksOHO8eBOjNxmIigIgHEf3A7fpWG9sJAcbEK1pCi7lMFlg8eXHwGFyt4SWWOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYy2TCRA9TVsSAnZWagAAG+IP/jGBXw2OUv+el18KAuIg\nYXgRdWE5ft4gCy0GArzD6+485vVXum1jUwa3v3AADLFDQQxKGWRrpFsPL+A4\nFVe7CvMXv139mn5uH/wNBT/SI87MYVHmV3OThx9brGa9DY21OaeorL17nYUe\n88vJU91la48eAC5YRXbnVSz6XdDIAQ9YJLKJj1tRI01rxaA/Xibk4anaPbeX\nZk2OlCxKYtsvNoSDdmBe6nWkOKOhhfJbekBPHSg+2wr8nbc3ef1LJ3ZvG1s9\n9rW5uO2bHPQYIuVtKZXMQQyY3Dnfn/icrIETe0cJiis+ZlQ0h4ZtEk3Axfyr\nbo7RedtwHlyHVlDPXbpDPzEhIqkebzK/VsZKzjvrXEw+vppKBd2ANer1KFIp\n8wQqq6LtWseqLwYswVExJWtMenKZkgeeCyEHM5cZEIxpnX9aRIYUp7UZGjX8\nkxfsELP4bS7RbKbgv3iLVo8C0kb9ph33AaUPKbfYWTFqHVdlaeAUHmYmuwOH\nCb5hjGEdR261CRf5jB5KRLZ3FsJw4sLfnaRCoqnm6Xpr5RYTqQl4GbXQ4HDq\ny9LxLpkC7NqsIC1Pk1MC8Xc1igGpo9EvRYg0hTO6WBlW0dROtBweRzRqRiii\n9qYtNnnc/B6diI6fLJy0ZsicwdMgjjfubKxkkz3USvd5fo/dWwt5VV/DruTa\nnUIG\r\n=wPzX\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"e31409fa6cd3b46f53998286719e21d8439f51c4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0-rc.0_1600335251457_0.24467590980233234","host":"s3://npm-registry-packages"}},"2.12.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.12.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0-rc.1","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"47037c6447c8cadb65271e282f816cf52872db33","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0-rc.1.tgz","fileCount":16,"integrity":"sha512-YXvtlh0HD8RFcO4fzaUWtTo6MPDgtKUi1bKmEBu8Z2kpDRz+BwFCJJ0eoCm+OJZWJ+VqyhOAAzFzgj744RgAMw==","signatures":[{"sig":"MEYCIQDft3Nf5D6D1ogOKQ58F0k3aArORbYfTgPjs8Wiiw/ImgIhAMCDBmKMDaFGqKq9gsTb5ReZjeOjvm8kaa5iChJqh44n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbDvYCRA9TVsSAnZWagAAmCsP/A37l3ZloinLa+kLwRyQ\ngZta3kUrLk2I0bvVzLAO8dsd+JtDkR7fY10qIXHhCRcYTv6c3kI4+rubEVhJ\n+CZ2T8ap0IaoYhbIlOD1N3fgaNz4fjiOCIAnqNud+fUE96zf7QTRpLnsAgMJ\nA3BTeHfkrlnmpG9Ncn1J7je/LZrxrKMlkYOTxiy6AZqUzZ3VQ1XzidvssKgS\nHx0kgiNTtK5bqpd0P4MXDuiP5Jk6ckA1RJ0ua8Uv/rCFIuqLba49v8gZi3xp\nFINxJmFTxeculEE/FVYgtEsQAiwt2/6Ubye/GbLSdMO+bUG26ETa19oa+ruR\neZ98v6AuBL8ES9EZ+tpmmsMY2sFjk7Uhfum4zbnsVjag4+rqU1R4Hqz66LQC\nLKHZkD6kuvmGSz5px4abAAU4T1LVIppfUlK9JSk+7XZz/XwiN2RdI4gWYW6S\ntGZaLLXgPm7GPxx9LLfa0YWHlyAIBYoSwUbSOJPZVSYWyGSmPEqIksBH+hbl\nq73gue/MK3wSzcmQeMcQ0zcb5mXWYMlD4ADmjCgnVZiyDrImH2tnUzuYoWuW\niRxYoNms1M5tvPIS5YGn2KVIVkhlRtgD8/7dEM4sktw6MD5QprzC7sXLTuT3\nxoC5wSsrN1PUT4qIjMQ2R7D95fSfr2He95eE+H0u1ZG/jWUHUP1ogbnRgKJn\nJ41j\r\n=ePvi\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"f9c5b232eb0d203e7043a814d37b693adb16e773","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0-rc.1","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0-rc.1_1600928728227_0.6101450662348429","host":"s3://npm-registry-packages"}},"2.12.0-rc.2":{"name":"@yoast/configuration-wizard","version":"2.12.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0-rc.2","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"6ee8aed4b6ed13d0d9005edef9ff53bd58cda72b","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0-rc.2.tgz","fileCount":16,"integrity":"sha512-TrmItaZg6AjqBc+Xxst0kt8aqHkuuGtiHr+Ma8kyOnFemlFQl0NvMIN2zPewVTGfy7hBt90PSDiKpOsYNQj16Q==","signatures":[{"sig":"MEUCIQCn1kLJZkepQCH0wP68dESh94L2CtmiqTtN8YMDl7q7MgIgVq0f3Wckbr17FUj40d1iVG0kd6bjXHHtT25kZBRzJCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffEIZCRA9TVsSAnZWagAAnXAP/iRMEtGMaF6qJZ0GVXuA\n29iruFvu2RWvdxwf6AnYtxYfE8CBv5lDpSiSEMgnzy61dHQFx7DlvrhRKnDA\nLmgTYs6zhyYtwBKjfOIMe+BsqqNLF7mmTvsLOgE0vDayJciS35Pn0ltwlkmS\neJwyeQuorB9FHdCxlSumyouXNnlshY3QG0JqaNFW1cJDfUp0NIj+OieTEdFs\n3epPTNZNTSUZ4oH/aMJsyyS5zsQEtUUUBl95j/Eehi3XoM1NcJ96AHKwgt4z\n1psH/LAN1KqKUHitejtkBBJ9JosGBGwx3YdrgdLP3S8JnPddZjUQy2aGUG8l\nbplAek7VPMVPCDMdNmNOO3a883EmeXhg8Xknt2YsqlxYs15Aj6pkMYf2z2Dd\nwoHZIHGgfAjs9ypDmy4cIzPLQWnQl0xx/GApqR41XV0oCxRlnPo8wQmn04d2\nCAJx+WLpPg8FEXVYKhA88hpUmcD+0jTSunR30eEepCGDjddGZR1wf/MbFD0B\nJc+LeDn9qX2qIlJPpxpWvRRJz6JTGyldhTC31ecc7aAgyp0CeEr4Tn9ujBWA\n8MmgSvJGCscZBrKKDMpRjl4fTFETRsR9H6ujdPrc7U3EjOCvDTSFFy1oreeY\njlffdaKjR9V+HcXc8cbqVmWbojpThjNcEAcyYAJhUi1s/GTGYfmJ+d2q1mdi\n1V7l\r\n=BeHp\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"c946c661962f6314179a531d6ebdce7caaff076d","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0-rc.2","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0-rc.2_1601978905118_0.6290111959327365","host":"s3://npm-registry-packages"}},"2.12.0-rc.3":{"name":"@yoast/configuration-wizard","version":"2.12.0-rc.3","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0-rc.3","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"c526e5bf9e9ea768b5721e28e47be16656cf6e3d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0-rc.3.tgz","fileCount":16,"integrity":"sha512-ezbWGjFiFteJ7ALHkARUpZKXs2FbwwDPCae1YgZVcec8lKpAKz0JK8Djrc42Y3b3be/46E2nkxipQLiZC9xIig==","signatures":[{"sig":"MEQCIE+C6ylX5rG63GhEHGklMP36Fs8ZSGwys8qkXoz4agVzAiBFGHInl6a0lLqT3FltsP12BMzMTiueLIdlh7KBqqC5pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffEkwCRA9TVsSAnZWagAA5W4P/0zgj6cGLMlxdFGXzTsl\na6U37Qkgxh+lkOf0s43D+cwHt5gs4o8C2iISsGnt0jXEYGH1Fn5XVDTxRQsT\nH1E9tkQSvk0aLNfEkK7Re9EpNX5cwsqp9ZAwM8FP2LZXTtE+YsOQrnyDrNi8\nwOirDWDiNqFWa06e6IR81/iaGAWmu6eZfCx/MgcQZPZzGvuHG9CtOEa6rqP9\nd0CQn1J1175n71NIi8sFR4mL/YJy0jAGds7W9bOBQchGBHP+fzUkWonAxss/\npJWkSZ8FSd3wMYFDYSwHmIcBsry8gXA9QAMC6EZkIKFsdsGxWANpQfQ4RFGD\nducg82Hs3G3Azr6nd1zVT1EJjIjs1wTWrOKEAELwsq7Rf1pU2wHYpR0TqYnX\ntBDYGDrHKpv+C8sl4KQVvnwbSz1AOep/230qgyQG8NboVqZLp1/4S5w8Bo31\noRW5WlD1dPRPPlXmSAfHdDryauqy3oERJ45RkuE4M8rO9gIoGdhWfGGGxUEB\noOjn9XaUllclLcdJzdXxebrHqlMPzrZymA7UpkdhZKBjA37P4bBZ5FwmoNLP\npVWhjuXjZZBA3/jmnIs1kvUTk+oR4cZdaDFOLIvUX/d3AZRwB0ZfTzGNlwek\nxjehCQ4qKRgtKpoyAaTZBVkKNx04PwN3xeuHU8NZhZ+M8W7jF9yA5ueR5mVi\nKhr+\r\n=K3/z\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"ff5fcaba5c7173b99ab096efeb9d9dc3b5407eab","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0-rc.3","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0-rc.3_1601980720622_0.17125136431307775","host":"s3://npm-registry-packages"}},"2.12.0-rc.4":{"name":"@yoast/configuration-wizard","version":"2.12.0-rc.4","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0-rc.4","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"5c667fdaafb572d5303f5f6c29fc22d89da375ce","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0-rc.4.tgz","fileCount":16,"integrity":"sha512-WRiagZjqggHVM9m3jhJqDVg/19by3vAmKMD+a4sSZdZIm86vvNtspD6V9mSnqx7FpqsLC9AKOVpCCBUjQqg9Ew==","signatures":[{"sig":"MEYCIQCulsmN1BYmtPEZZAWzK4kMZb6YoYvAoBc+/YcM4qpTigIhAJc5uJ0k3PlbYSC09q1DFos/z+GK0ijAA7sWf+IELofa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffF07CRA9TVsSAnZWagAAJEcP+gIYE7sTFLIuzHjzTDQ0\n3/eFN3mHC2wUbmg82XCUearBWmUhRWQDTl/MQSBuSeIy8Ln7OBJVhSfUcp+/\nTQHqPdZtcCf8umO4FBxUIhnwL2t3mfbeELEdv1gI0OF7y2MsIWPRrmOoRu7Y\nF0viMTNO60kDAxCxyDZpAud1MMODLu6MbwPOui7qGdHi/lBIx0DZVRKripxE\nhiChJEpoqr3Az5jskS/fAdEtM5wLTet7cma2Zd8XipudClYBXcDTsDzlqiyt\nrtyPo+qH66gnyAA3faemDEre1UsMv95CJI9fZOb7BF8WtxhCLD6f6Ig9TGYo\nVbyPOX95MXUCCIba2M4Az2brLTDdZOScXAjTvnyC7qHVMwyEEoK+Bs1gisU6\nF3dROrcjMCjARjXgSS0tpaY+peJtsaE8B77keoyL5KQmmDwP+zkL7oQnCs4t\nZShv5pPmZcKI9wrVnieGRase8s/D+50PHwgI+jZ7tktecKhjeJEzWCyLneWc\nP6EwjO2JAF2QAAEYK339zoFaIIGWk2a7lD9HOilK3m9hkgMO3fGTa7auSL6K\nwPfG4pXZl6bFvJe781S1Ntq66whsIqfKnC4zre3paabxiADVL6QlQ7b8NnBf\nRsRphnHtkuElS9SEoVTJ1fHhAVX1f/F4rFbIg03MWIazYK4KMMTA8o7OzpYf\nq+lQ\r\n=3jW+\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"e58252005c6a8897eb38ad482fc90855c0a2f603","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0-rc.4","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0-rc.4_1601985850695_0.508094877443245","host":"s3://npm-registry-packages"}},"2.12.0":{"name":"@yoast/configuration-wizard","version":"2.12.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.12.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"cd13f67c00aa080b9f7ccd4b3d1e25196edafccc","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.12.0.tgz","fileCount":16,"integrity":"sha512-wgDWdOKSv6P4JayLZwVxr2hByX1T+5YgmM+QOo31O0q5nNk5RbyKU757PYx9NsAM+hzqWhA1OdWl23UqmPTZqA==","signatures":[{"sig":"MEYCIQDfE97PVUpKoQbOyX7kcuiR0weVDsPmvoJ5FiWz/3QfGQIhAKvc59LhCNaZ4N2U24wb823JzshMCVp/djBDAzdyze+s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhWYLCRA9TVsSAnZWagAAR2EP/1b0jBeAHKvfe7jGzwF8\nFZX6eAZuQJInwR+T8rjUEg6Qg/XTb4/Rpy9JbH1e+SeF6qyeNFtXuCKJFJtO\nKscmBsTIVUlaxkkyPMLnq5KgjNz5Ha35z7/d3S0G00H7ex5k7URyOFWHUP8r\nbT+4SQ9mdQrHQs0vlw38J9ibcPIrqcyE6QYD6TKOMUxKgr9dgzeDV4Nyk/GP\nfMgJWcq3vaC8x8EcHfory2NrJPV45FeHMNTmRoA5qNHmjiQRhrB+znStbmnG\nXNF0FifORTasu2TLjgoaqOXpzJsqQHW/BHxTxGqOP423HtHBdTj9LDq+XThM\nUOItkziHZNonN2B80KIhPgrrGHS0o4QEoV9FpJfj5w2QDt65SES+ta7erE5p\nV7S02mpDAa+Sc441pfx31bYdQrWmEHgF6Djho9O8DNmzm7aw5EjQUTPq0K42\nAntIjwhGj+9qlm2maud6/6fvieqrIlqHwcXDEPuBDsrn8Gl/00IsJRJ2jxV9\nW2yBUi+HD65WLKi9t0GtvGmtiEmYBBieZmRNDanBhEQQ7865ZmpcejFD9NW5\nPgsEusD/9nAeVG34oX18PTJVzHRjF5SnDp0tnE1kvDRkGJTkTL8mLZ+1US7H\n1Do7RtyBjmv6x4v6p6Kg4OehCqbQYxWITwr2Ff1hwEF2sqhcpKZyJMJMaIaC\naENF\r\n=idYY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"3bdeb4375a0e98446c6c9130b2ebb1072c9c644a","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.13.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.10.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.12.0_1602577931104_0.9306840675517625","host":"s3://npm-registry-packages"}},"2.13.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.13.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.13.0-rc.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"db36affe6c210a487fbe135dd6b7f7e440a03022","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.13.0-rc.0.tgz","fileCount":16,"integrity":"sha512-nsMmro4GQPeStM+ZBZYlIxkojETmrYYD4vsmSeOr2cwP2eqZE/43cz6wbRnToM/IkfuC1G638uv4vDoXermaJw==","signatures":[{"sig":"MEQCICAcNq+y+A2iUFwHgSktQ6iUDxDrCuuF3QyaQvE5hrKKAiA4jxLMLt1cYRqc9YKhNeKA3+gMIcHpa2qA6mJojzbwag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhYPMCRA9TVsSAnZWagAAYwMP/RmcmXQZ8+fRLoRjBPj3\nR63VGyxb3ZypRQbRMGeKoSxFVhGXr5i2DILMtKvQ72wvz8cAjWAYa1Hac/Sh\nwJU9Y93GtuFUzQh/fdzoQ6gyGy57JjNzKNckQLKLNiQ2mqll6KpAxcukQBnt\n5yd+4XfoEAPdyx1zIUSWZdCkS0cyG5ZOfH4uOhJ1Q/Epu8s71YBQ+X2VccCd\nEzTvoAxg461FI6v3WJ1iSgVCZGVVnDe3y7OpzMTGW1wT7Alw0hGA94oJIQCR\ngg0juAwmkAzeduVX/yCqp5kyriVin7DwpyORI5OXt9sOkRg1qffNaCz90knk\nzzJqBSuw8nxh5lTQ97MmRkfS39v1OYFXSv5ZXQMylN78yCl92MD68+RuOW6h\nk8NPY8PPGUevxQanYx3LDBtX2rtaLlmya2P30aNGI6MMevxaiuipz0D5Si6z\nkgIPTlar+5OW2lUcE/G/Bo7yUpDc6MVlEz4bq917b8APj4tcqFV/4bFKf0nz\nfRglg4ec30KFTUdw7vTB5zp8PzJERgqHpXrE9oYEx/wZUrYRMXNmRkTEeNOs\nQAjs8WrrrKfCflaJt9ua/vVVO/YPyu3kQsazXWqDoL4AeLQryhxje8O/MMJu\nWF48CxI6iukRpLu5Mc9UA7UgztAFTjwgNY/wwqqMtL9envnTwh/UKNg/79fk\nlX6R\r\n=vBY7\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"db9177ec3301939e1d155caaa8bfff35d04332dd","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.11.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.13.0-rc.0_1602585547985_0.7207174990747909","host":"s3://npm-registry-packages"}},"2.13.0":{"name":"@yoast/configuration-wizard","version":"2.13.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.13.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"da08b675371d64c0df8692aae712b0c2c03b25bd","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.13.0.tgz","fileCount":16,"integrity":"sha512-Z+CVfPXknLnlUfNFTURzE0nHVE2Nh8bFjj+CE5Yf/7EwR10RMdwT6nNmprjIPxXX+SjDmIkIYzcYal9MhN4niA==","signatures":[{"sig":"MEYCIQDiLDsW0pMzCPmELV4ITyqvo3TxcbHtAfwmdq6o8CjbtQIhAKYgRMOdP3BkKeOwHVi2ckim7X/zyCkNo8brWSa+TibZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflpEgCRA9TVsSAnZWagAA9+EQAKEaRJDZsWWH0IG2jgqp\nCIOMyFp2Fd+yiMiZ3eCsQAlfN3ZShC3YTNWIAiewZJwXLYR0NW0/ObAr18Uh\nJfqDnyJn8mAmTFF2L4SdoiMbBA7dBjXp1vb5g5VosvsTfn81yQqJ61Xn3h8W\nxC1tnOep5JDpAolFAJ3qRpfp4/qobl2Z/TgoDc8WifIIsk3uNR8RbbLp0C56\nBPtu6wgrPnfOPHGy05aTghPyqdve27R9ueTFAyxiFVI9Lvm9TkF/mLtg7A42\ndbYbafsbrOcvFv76jJ4fvUj8XgwZeZktCIHtFkzN5Zy5xSLSYAm6vMntqGpy\nkxyVgmwzL07v/5MhVolSN6BPVvwf8WqaEXRsghE7pZ+uqTlDMaTDh6mTSrj3\nqxf4WthzAZaw+5tRrAPOpqFxaBANov/SfsDVyrbyRB/LZexvaA8YEvvyh1Al\n0It6GzkCgfHCP2eKK13mfxNHYV//EOuIPSuDghEgdFBLU1Qx/0k8ftNuCoJf\nL8OCPm+0fCsQ117XPliLHbrzNV7VKL0ur4fn7q+YuTtdGJXtjXNIopapalm6\nNZC63hhkADzvTUCcn2WR875qFCLNUnFDsNuBITyTIgVUw5Jl5AW8uBWduLGM\nEVXZGoczXBxpbZpyxhCvH8g1/+Jj30lK7GTF5jLOVy6yadOYLF871iWtCh3i\nQ2je\r\n=rPQS\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"3109df28cee641f0492ccbf4b064a20e164120bd","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.11.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"16.12.0","enzyme":"3.9.0","react-dom":"16.12.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.13.0_1603703071753_0.5047600105899177","host":"s3://npm-registry-packages"}},"2.14.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.14.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.14.0-rc.1","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"9464ae3f515b3e8083131862ab95c177dbed824f","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.14.0-rc.1.tgz","fileCount":16,"integrity":"sha512-48KNoKn146s3hjWpGZiLM80WiIb30kmjTBUr++CTm5rO0YMZdVK7L761OCsno7TLUUoHWGRqkuOhCnCKo6Yifw==","signatures":[{"sig":"MEUCIBLvLnutDMmWGrdpVVbdpAR9B2QgpiljmplhDn0rOwUjAiEA7gFHB7HPQZwpQVDBNvHyvEh+wlHvT31TfaBb9QyuaaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsoP1CRA9TVsSAnZWagAAWdsP+wQJppXQxcjPsAzj09im\neBU53gbOj4Y0my4P8f0q+RKnPrh9kJb/4pDow7WYEu6F/C+9Y7yuZbgDfAHR\nr/lsDbcuo/SMr6WgeaMuZks6OOAgahtJx8NUFj79P6jMEPn4+G/sWU9w81Bl\neeXISqf6TjYo56Ns4/bW4THsKT9mHIH19E8d7wPhMSvpRJ0hcbMyh74FkaOw\ntYK/tRmUm3y5ZxaTcvZAre7+2G5CSQb5UsNMBUK4oBSJTJKt3IkIMjdZZkPB\ng7/ygMytsSqDcR8gvVWzjQQMXVp1irSDTypilPmhgNHbE5bLOGrRGBBtI9Dq\nlcu6wluzpgb5rfvZauVrLB/OdgxVQFknIr50svdIaHh+kPoa0reVWS3sPHVY\nmP7U2tkot9z2XepTPAalgbkzsTx0grjsxA5SlWnm/4HaMzLVigUZpvMmR5Cz\nThwkHBp9R5R/YIm5upAFSGaS0FSC6k4UvM7lLYmOS2Y024PFkZRnpqXGOXQj\nQ6aEcrefRGfxeWrhPC/VgHBE77Qvw5hiwSCanftbPxpoGsDTyx0o5VdB0dq1\nHeyKMa0/iAmf+Yz1cDarb4Jb9/zCtu8w0JkOHxHtDMl1KNRtp1OgN1qI+U3T\nW3xvFW20qk4vss5h1aXScUFg4LNp/k+/Z9qxSarsn5q4q0K6Ogk9yJLAeRds\nPrPD\r\n=MbQC\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"60848556eaf51fc4fe940b72742a2c12985ee236","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.11.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"^16.13.0","enzyme":"3.9.0","react-dom":"^16.13.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.14.0-rc.1_1605534709403_0.22216023548781516","host":"s3://npm-registry-packages"}},"2.14.0":{"name":"@yoast/configuration-wizard","version":"2.14.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.14.0","maintainers":[{"name":"bintzandt","email":"bramintzandt@yoast.com"},{"name":"irenestr","email":"irene@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"2047fbd5ccd28da60545518e610561a37c067144","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.14.0.tgz","fileCount":16,"integrity":"sha512-UI5sjlORwgVWsR9UKBnJRatoA+fedaB0/1995adwxkw8OA9jSnbONJHsmZOAwczMvfYDTmXuXhig6S5zNuYd8g==","signatures":[{"sig":"MEQCIHRbyUW/p1edT1TQLpKp5YJiOY9yfgGvlhNV1JzEzjuPAiAOap2JnrKMUnG0iCBRdKxtUPzyLwq1KsFe7blkn88EmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxLRTCRA9TVsSAnZWagAACBgP/3sb0DWdE7eHJaAfv3BU\nc1JeD14tfqNJQCdDLFpXasdHDLyHbEPeSO05EKGLdN1XrsU7BXeF2Puee1Lq\nKCAWruRaJz9YyCRUucb92UQkdlPRihNcUmT5cQsDXroKfuJbq0RAlbXOO1dm\n0SPVUjvOGCq5aHrfFzgWKysWuKMY5x3Nma9pFwHCrXpcnfTy0j+GZQ3D03by\n9IZJ/c0ksz+ob2AwKAKWnGTHJcaqQBDvpKtKJmIbzBnDlQ8F8RWxeohxjDm5\n/vb3ORvL/gElwSEarjSm7+MEMylipK509yeONJgshKI0BxJkou64nADLf1mL\ndm64k2hBVJ56Zd/OTRTS3yO2YSDInFISxd1OFS3y+QEWWv4qa+1WYGeym91m\nYQcKQkz6wxyEJAzWS4HU/93jCPb2I5h7F5fGylhoYmst5h3H5BS+ry5ipKvM\nDF5JTUDkEYZZVlob/TXd2WyNaYEPujswKeFIAu5kbRQT38LOu11m8fxfENtF\nqbR8400UcsGJXhZlL0gOxexwqkQY0KtoY2nYkK44GidDZM+B9Mm2QmrQVx2w\nQfUotdtXqZWz/TFyjlsOAI6HRv3ckx4Q48J+sMW1RCtzs1yCy5I+Uc0Eg8uz\njeBrh2K34gUiBZpi8MivaT/t4dEvpKT0938lrt+81ha6KFCtDDsCc9uCi/7H\naQbz\r\n=Vgq0\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"ee70070ee645c341adff3d15ff0c7ec3ff3a0e73","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.11.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"^16.13.0","enzyme":"3.9.0","react-dom":"^16.13.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.14.0_1606726738544_0.32244021156600455","host":"s3://npm-registry-packages"}},"2.15.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.15.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.15.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"fd4b63659b8da1db5288fd70a90353ba84d3ecac","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.15.0-rc.0.tgz","fileCount":16,"integrity":"sha512-U0KHq30e0ZiJfErTTbRxUpORmig/S7Zs9gWxmT8rbE3bCm2RvtEqHIz2sjGZ+EwoZj3DsCKAbFRi2vIOm8u6PQ==","signatures":[{"sig":"MEUCIH2/JUFETEhYZaDnc66Bwn2vc+nC5w+palvAlT2e3R//AiEApVzurcxi6cnC2Y6fojhuS6UzY6ru/9EpJ+FG7rwO3KI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50251,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6a+rCRA9TVsSAnZWagAAjM4P/1GE85SDsaM9caapJxRQ\nGdBtRkRAtkKVO0bJvzxmxoBQn+J8j0jzyoBGrxeN7Db+GYLNcG4KG44HPth9\niiEYuJxkKKsGzOlJAI6Q72r7O7UppXC7yrjuzca7gaknL5eOlKISTs9p63P8\n5HDM/C9VFsUOUUvpDN50GTwFBoud54UDRzfQSEzE5uErD/p7n/kxzZ8YtQ39\nyt1lY0ae7s5Poe6qB+AN81zvvs+KLiYjoYYmkfk6qBCy2XDU6qy2fouAKNot\nSuZsvZ9+U8ENMEEXrGNBDBaA5Nfq/W6ZkDHwL1Qhtb76H45UZqyF2tdb36Je\nmWophkqD5G/Pu+3i6K90bCIgX4NPfvxQw9fMiaCmZkSUQ7pdXbeGMOzD0Nf1\nQle8GxmZPmil5CxXsfvIaRtL7JuAN06QpvjqpghpWK+KDGat51ok1QqwD8X5\nXo4lCXND1R1oIw9JyWQHbjXoMJ3f185fkdMUO9S29MCAowsfhWsjO41WP/Lq\nBMTlHqxJQ9HfLW+4gtGJOE1c6eTKq96yS2ecWEuPwSnZuaCSUEaE0e4x1k6g\n4HdNAYtD9P3IUO/2on4ZTNypiJRsZeb1k+Q1c91eTYtYbWF/z1JJMzlVelg3\nJ+WC3gFJlC2iZJjybqU2kCksjurno+gil+D2h5nAZfDxEV35xmY+eNe0BcG4\nwTdq\r\n=qhbc\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"fb4ba4ee26cc7f87b9a75d04e01f93519dc83016","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.12.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","react":"^16.13.0","enzyme":"3.9.0","react-dom":"^16.13.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.15.0-rc.0_1609150379144_0.3426839142268554","host":"s3://npm-registry-packages"}},"2.15.0":{"name":"@yoast/configuration-wizard","version":"2.15.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.15.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"87c1f7affd55c571312b0d3b85f258e4182537a2","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.15.0.tgz","fileCount":16,"integrity":"sha512-O9ZoHrm2i4BeuCutdMwodQeSASLczpSa77+V/6umL1tF+JOtD+ozDkBhP52SNaJgSNmrTGeBzEtC89Jc1wbjYQ==","signatures":[{"sig":"MEYCIQDR0d/psmqI71BHx5ONEfpW3vLQ2Z0TEa1kBSyNz9Gh8QIhAPzlWlrTvGnueOROu6QcvxVphE2itY5RCoqcH2ohakoa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50241,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/B2KCRA9TVsSAnZWagAAn3kP/Rtxw1d9bRegzlYXNhvF\nCyjtoyOSpt+RjZ/NEE/tFbfLorl7JHMHsJaQ6L4IR0Ss9zGKNHrFYYvdPDek\nyxgAeZVVF8en3LS6GlKu6N/67B8h4S4Vgpzzcd3fN5pvuVrUPEZOHQYH9h7h\nEkkoR/VVzcRCzyc5xaHIbQjw8Lb/qg4GjqmYbjnz3PoxWeLR7md+04hI78OI\nswK3SdHyUp7opfEdlENEGS+MLsUWWDn0X9Re041yhTSduQ7ae6iMEKuXXyS9\ne9uK2mITfqLdo3QMF2vtMLW3BKQkl2EhFwFu/c/TNaFWZFZMWMgBq2flSZ15\nCjwK8a6ZH/ddpCYTspa7TAr1XqMfpz6Jg3KLFDhnbnKgxfa/IjyYydINM8Un\ntpOvM54veuNoZKQ/Gc/bWRjSoSIqyBXp614QToUqbDaSXlS305dou2uk6wrA\nb6AOuAjPIH7//LolvGSNHHBBJLqvsWEDEsasQOqcDICUDwG6RCAz1I6kBZmv\ncH7za9gbS/LpBFMfL6oyV5GQBlD+uoKs4iOgmn7EkOb6CGeGAoRcdtoqrk5z\nT/LlQkWRGF8TY2nRXbQe8VwgB8e2ETHBQ2oOqju0UstuuOu9bfJ0XXVVDrBp\nhk2FDSpQBUgBeXpM1IMRfPiIYKChmtPeL0JuFb95vSb7ke82w8/9Iu9JpDtL\nQ5rS\r\n=5Gdk\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"c24b6ec3b6c1d64c01aff1bfe7266406097ae848","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.14.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.12.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","react":"^16.13.0","enzyme":"3.9.0","react-dom":"^16.13.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.2.0","react-dom":"16.2.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.15.0_1610358154466_0.6382013115370468","host":"s3://npm-registry-packages"}},"2.16.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.16.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.16.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"b03b7ac78416681119b005b68075e678849d7edf","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.16.0-rc.0.tgz","fileCount":16,"integrity":"sha512-teneYhX2DcHWGKcLvCrn/+QBG8hkr8pPccKyqA/pEWg6o/nXBGUbdZqBSByjvb36T7Xm+UhVxKYT6UUQ6UKlzg==","signatures":[{"sig":"MEQCIHyLbiaYqOVc4G3KCGyRHLTK9+mLzj9yOwQB2cBYBREPAiBwBGzRFPFS/lWodNnQCINJpXMALWvgO0M6otKzj84W1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/C9tCRA9TVsSAnZWagAAvF0P/jlGwCWM6bR69IhJBPbC\nluoNYYIrX/Wl9k8s5+KbU2T+EaUsnbFLD/q5dMhp4mUsf8xHjeYFA1KcVqAI\nNVS4j6pwzzb05PFH/7XAHrThSEF9TTOkbYAXD2W15Id9j130/Jytg1EyGrTQ\nsghkXPwLGOthsNCOwgTwfi4Yw4QOHWgCAFyCymA+O9qGWlnwvqRTAH3m0trC\nbgeVFPZbF3P3LA3xofCXCHLiKUoGmunJcnjdNvsps3HPEX0yM5P05yaDjbkN\nw8QbG6QRV0YtYrPAjT1bDTYy/oyAPTe9ENlknzhaltoHnWFq1teT8zDhJmpt\n4ytLu2KI4Z/m/UW26vrv3IuLRPl9DDlBu0dx5+8OVE1WnKLMlqFpbtDFRINy\nmUE/PgNDfcbdH+y69mqJTkRP966uCF6wEthruxK2rKiy4LELceOepR41eh4M\nGXkpgmhtjFgVR3qHwCtHqf6MnrqHgQ2sSv/lxnhbCO+e5EOwABwSMSCaPfhx\nMt6NaBfhX89MbwlVaa0YYV0FetkrWuWUkOPJjk95tfn5ZFpMynG1Ah/US3gJ\nRuIG9rcKQoWY+FggYE2N2aoxC8BY5RJvmBxbzBYERiDujxwX7iVcJnH+3AI5\nTf49sEu+9QkIYYAYvEmA7mbauehoQNOIDRjqoHXr9wd99cPDORICzToyGaqO\noZaK\r\n=b5kj\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"44e66274ad5410e94a05abc67dcdaf38dfbc5a54","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0-rc.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.13.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.16.0-rc.0_1610362733545_0.5929084748899289","host":"s3://npm-registry-packages"}},"2.16.0":{"name":"@yoast/configuration-wizard","version":"2.16.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.16.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"0e7adabd5784fb67a1b1eb7cee5efd91d12ad3fd","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.16.0.tgz","fileCount":16,"integrity":"sha512-BCGp5HCHKK+50T1Kksdpe64bdnMkwXG53ykxqv1yZQB9DBaIUXxheCNqdppGdn/WXN90Lkz3iycav1AkTsXuRw==","signatures":[{"sig":"MEUCIAio2TGXS6IHRGOhDmYzoJ0NPvmX4DdtkkDtQ5A7S16aAiEA/ad1ghf4ElNiSAVy2xaDuEGVdrB0OcOb8TJLjA+0oj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDpSNCRA9TVsSAnZWagAAb18P/2fF4aVx4+6v8vT/bc25\nRPL/fUpzdqoZ+WVcJIG7DlRuKEt9Gp+xKpgmlQFsKSFx52eoQdlv0G53qqdE\nzEjoleVOH+9VvL7AkggSiJ0vpI7GQ+0LD27jlMfFmCyyI2hNdQCjKT1UNTo9\n3C/Mj2HdFkKVgR6bbqYxUxU/cmYK2GKTC7w3ifDVNMlFr8sxAOLsSjFXHIIM\nxhX+vyImMJrdCvHslF++rEIimelw3mE7LDGHCmdZxkVPUJwGhq+5j+0xbPFx\nKfTOQtm+3DY9n61wxJOTfDzTxuVCbU3Ahvvx+rctoY8eAS0+TkzjD/GMVvbj\nrBLQiNH20tmHV7FPMp8d4vAq9Lc52Ol2o6BmClb9ZX9I++piIilq9WV8Hg5A\ny1Br1urYGZ7pkZFR1TLbe7jABU9hF+EWqWcD+JisCr928gDBRa7qwcnAvzWw\nEGYQIilwho4bHc3GOJY26HRtIg49f53QldMJpeaAmsuNiUjLQzZAEGOK9JQG\n9qopnIGLKJf+oUSrqheIpb26mMBUItXVRq6T00Z4CKnGpOkaXm9B2w5ZEBjD\n860RCJbhoYaio6rbPCl4L5mRUhWtgHp7BaLAzXhpcOKj2/Onx3lT+UXXfZyn\n8QV2Ebat8uca1GKuiNfVUvOLF5gC3YmSAqQvIHwYfieOeeFZp4eN4qlb3osI\nx8pI\r\n=YAQY\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"b9ceda9a583f98525d06b5f1decf0f1690cb6e43","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.13.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.16.0_1611568269336_0.5426059582901603","host":"s3://npm-registry-packages"}},"2.17.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.17.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.17.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"6ea06894edeea1db1da6f08a310f59f462816549","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.17.0-rc.0.tgz","fileCount":16,"integrity":"sha512-18A9HBRcnmhqouZMk58fL9r8mNNO7faPZQ2EP8XhUG2WCP9xjcpBr35sV9crPERz2NpB0zgoLBeH9YXLoTljcw==","signatures":[{"sig":"MEUCIGH9Imb7wyO6azJONoKRaWBrkMwprHKAN/ZxtFbsqYHsAiEAgZfwAfRxk/dN1OPGkbQ1+4GLgjci9wrmrBgVhwCq1S4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDuoYCRA9TVsSAnZWagAA62EP/Agb2TguUXu08X8PpLd8\nmDMozSJnFiD26vURzg4NFWWYg+jN68dVqXI4l7FcDrrhxhtGn11R6svYRMj9\nMAqUqaIz8PfZJMqAdXvVO752TM/YWdRxmboesYeTGF35L2jt5d4jauSlqG/W\nx2NXkv6ev4kNqVuFYp5RH30iJyT0AyzRH/pHb3oUZhGYwH9Qpqbl3wROCSTr\n/vER59LQifq0Bwrde6Is1SV9t0gj//jFir7JsHhe9mAbYpiczv69O4MikKBW\n3AcwHWB3NUXjTfXalIHUoeZDt4c6azja2RkvaPR0t3WcfUznRz/1DvX/eVKY\nUsxYHMWLWOQyjrEW5JwJmLLmijZMHhMNQDnxyPa18ZF6Mexi/5v9+HFo9j4X\nHnRdcZPnsbye9mNzIYJqjdIlcgyRaUKrTH8vdHqr3VL9Utj84NaR7eMjne3k\nH3JOMQI2Armnl23bjjzvaptuKHLzdvv4VT/oV8+OweuirhwH3Wy97adkP2Ff\n4rV/QXpjTfvSi9gtDqj9cKxU5Cqj4BaWxDdKuqzvBtKMR6Zr3Lc88ja5j5sV\nf4piqnkIT1Q+yihC5ZSiuTdE1WcU8FGmdizpFuSLPTEzPT58wNjkic0p46YN\nkjPA6PZc2FktVuR5HEqiZ+ukuhmQmZfL5HxCY+Jq97nWG0XOwhnDR1XKRR66\nVb8w\r\n=SlK1\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"00db3a74b61a45bd4e6b587ab6094a25b15891c2","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.14.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.17.0-rc.0_1611590167766_0.15616688378833943","host":"s3://npm-registry-packages"}},"2.17.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.17.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.17.0-rc.1","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"40a39049c1b1054b2dc1241257f8eb2406d2a0ea","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.17.0-rc.1.tgz","fileCount":16,"integrity":"sha512-WupOcT0n+o8CBELTHNZRMcGCg3Dqmoaoc5m0qTq+g5fXqDVu9GbJj49oMS4eNznmZqIV1ueFAKIvJ3kIYHa73A==","signatures":[{"sig":"MEUCIH6Aj7rwkkiSipSkr2+wuK3GjuY/OcD5+N44sz8lgowQAiEAnOsGJ4+vPDm9n9vZC3Xc24oNsMk1514AVpI4/J7OoF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGpV0CRA9TVsSAnZWagAA8HkP/1VK9cNJ6gs02FnkVrLR\ny4pV9CSTqjRnqkAMm3W/u1yazZnjOkhjsGHSbpwWRxkhD7QM1FOYfxqOH+dV\n40iNU780ieeer2zWwIAYghwDqQmh/QD6+B9eIJKgpK6LBSC8euZNK7Tf7SkV\nzpb1w40zZFKx+bEGT4JDoTuZ7JdbQ9OJ/WFlhXaAPbFLxTEGO38dAl3Sa6BF\nsjKvWtQ1AVZs2HS0OMHODrNUP/aQS+cJJ8+mkk3Hz81cA5lfMr36cmV2ZMAS\n9UHyfvxDCgqdRJBJL/Mwp4gCBPOkpfbNzdEmHbqIQKjm6qi315FNFmjobFn8\nzkX4AD41OVK+2q43Iqaav2qzIypWr4JQQz7znWFWM8Tqs3xS95So+MSf4Gbh\nptxUtg9J556b0rqZlLjh1eUs0ZYO7rfRxhgCxV1clZW/9EMbXC45zwd9aPYd\nwAxN43jazdNtJos+vcToP90QsC27IA0gFqRd7ofVYlapeY2uuSwuZKJvxH5J\nNIM4uqacp9QXIU7DtrmNVGvPkGy4a/R5uciTEC42yVh//YsA5SfqIpFG97Nd\nxBB2MHGkUtnVIxf256umUUR6hmOFwKBI9K5xdQQ7c+2U7SIitvnCVJqgmEWH\nAAAOGzRXS06LIM9zK3Q4G66Xfmznz2q+ekapgbjnNoovM4jnGl/BO0AZcNWi\ngrqf\r\n=wzXD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"2979cf82225f5f3cdae1a97b8340244e922d6b18","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.14.0-rc.1","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.17.0-rc.1_1612354931512_0.5756023520167219","host":"s3://npm-registry-packages"}},"2.17.0-rc.2":{"name":"@yoast/configuration-wizard","version":"2.17.0-rc.2","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.17.0-rc.2","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"628a1509cb9ecb15ed181347c47f14b5a0b76280","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.17.0-rc.2.tgz","fileCount":16,"integrity":"sha512-yTCyQq9JGctL0ITdEoQO4q0PhpvWeTazLD2XfMldpoIokBHhKaJlM7nyhBv487SV9ORZnGt8/d0MsCHz9pyb3A==","signatures":[{"sig":"MEQCIHrcOS1/wlGaLRzEaZ++0YxlyrkFEhUGN2lk9MYInx8oAiAhjXD1dSyxo1pBkeevHQuPTd0PG1kzZLRfoDUPoMytEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG/oBCRA9TVsSAnZWagAA9j4QAJz5HL24HSsgXSpdvOi6\n/XrNu+Or8w/0cQOdH2AGBi8Pg404VVVsQSzB7sseMVU6CbU0DVtJAXcvhw4y\nGTiO+pvM+SQhAmlApKmWjvvQnTvyjdnzIVT/KoScvPTl0rEv+Ncx+FBFk1Jd\n0/5UyiwhfeABx5fg/pe4OaBb0ZfASWsBML2IybYfBfCf2UtY9Am0tz1mf9y0\nGq47/gfOv3gbHZ/bq0SKP6VUQP05/QLZCxP7K6I0Xxc6CqVGwldN+jgGmHek\nwiRAr+zvrHFmUzVJW6NFxoSwBon/v3ZdQTm72tv9flDsMCE7SnvhbXKoVk7d\njhP5fpfY7fpaEw7eSpFufGXKJeTxEeNHq1tf3jUNXZsA+JC4BAtSQRGEEW8W\nluxzS9jOSVDNtAAVbMw0KGevIl/636vol07WjuJZyYJua6Gw5UAs6mptdMNg\nsQoazHQouYCcWwHY2a519yxH4IndV/IJRUR6NPrRoEWKXEToFBWjjL5fMN/6\nniggjSA7m3Mnb/aX/CP04uEIFQli0XCF3SsbuYlKl/ChLp3N5FKSMcUyhIc0\n9d3jcFKX0XT/aMuGEbP5pGZ1lCf/LbL3t/fYjFrN7iXk7EvL8bSWYtvRcPcv\nNntKuo1m6+yk7O3+nrHDTFPbWI7j8vl6r7aql3WVDIqbvmtSU39zXEc2yyXv\nvmzg\r\n=3H2r\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"8bbfb480410900cdceb58e1c70e17743fd4f7d4b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.14.0-rc.2","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.17.0-rc.2_1612446209138_0.7641062124072242","host":"s3://npm-registry-packages"}},"2.17.0":{"name":"@yoast/configuration-wizard","version":"2.17.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.17.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"009a87eb697baec3bac53d6de4cdfb39616f3568","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.17.0.tgz","fileCount":16,"integrity":"sha512-7CyW0PDGDXqAbkVutQh7MgjGnwU6PXuuFEQkTKOD6764GYtLNsVKuLQvmX7LuEnIYzSkpObQ43wgL3bOHGSsqQ==","signatures":[{"sig":"MEUCIQCMdLMxYcnwVNS6GzjK53+Lz0WydFOXVTmydPk2+Xn+AAIgY8ykCHNsiV0tCjfAkMdKKXYi/9wdOUUm/jicUNH+9ow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIQF9CRA9TVsSAnZWagAAL38P/0bLpUgYIq2B44TJe2mX\n5chNyHbo8Ghws8Kjr+Zt5OuKYMcoQxB4ii0Q8HFZfcuwGITRXAK5NXW28JSf\nQ8fVdwG/6MVjUWOcoH4ooo8pxf+8uru+npaZchWX4DZP7l3d9YXe5jMViC4O\npYpjyVjZxLKh5WzuhEytcSquDcUnpuXj4kp6Q90XrU/JuuVNtRzaJ2PjJPpD\n0uvt/XorixQdhPBZNTopxUy5o0Tz5h/j1FIUPolrbHsqfDlpn8bRyoYgbp1x\n4ZJfLfEpEV8Zzt/wFdxRQDyabe29+n1OnBNRO7CNUz2ETcWgHk+6P6Fk+Gha\nKENF6ZbW63AT8MT6LOOu9G8xpFeGBxzGX93aydFhjVN2OfL5P8laj1JT8yv3\ndqrQ6mNlRLOJabTMw0MgIcGTtctngPO6JzJCpDsOOCreDiKp9uPnRO6aLgzs\nRjG0v8oM/iAmc/BUUeQzGg64FeCa4Y3FoCQ1U30nNJuhDIRZoXb+AcjDnzzp\nq9rEPhp7010yNX4Fv7G4/lI3D7i5TZjUlLhDlJrrkL96mLb1XRF5DsDmil5i\n6EauAtOMcX5tydCsvPuL2LNFe115/lGmvl8zvz37fA7fmqbhvJItGIKi0Uu6\nCI78+wkMtiS5DK0HmTA0N/ziY4Oj+fBMzuykeZnCQzH5KoTzrfupJgkTZDXv\nm5je\r\n=Xp56\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"747952835b0d636164321587f737fd719569a8d7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.14.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.17.0_1612775805001_0.5884022648964629","host":"s3://npm-registry-packages"}},"2.18.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.18.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.18.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"68b186ca323aa59f5b7a4ad91469a4acc1426066","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.18.0-rc.0.tgz","fileCount":16,"integrity":"sha512-advySyH4LHmF0arcvEb4dikaSv4d09AKa0eq/C58wLx317RP03g4KdRQU0TvsRhyCAEtidK9yNnvoAlGMBcwlA==","signatures":[{"sig":"MEUCIDIi3znS3rd89GqBEIyQAYbfgGnh56wtfIMPOFxVVNbwAiEA/KhYzWA66Z+u/1arWSE0yv9Ve69NUMVR/o29CK0ngMI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI+m3CRA9TVsSAnZWagAA+FcP/RX8ll7P+RjDiYayIdS+\nfU6QUoZzc6jC2rLU1EceF8KZQD6hkoYbpVwB1c/WdBxq9AKwDOjc1ft6+0Jm\nTx97Eo/iWiZQ50kCtmUwSVk74I/qWuvj7K6dXUjAjbdnfR47QfhHm0xeWDx2\nf3IWbgoNmv7jOvuWrXuNqcayDuCcQCe/l9g/283pyh4TLS1OAz7GrVAqsJOc\nZRDtsU1WP4vqcBO4xz/TYCGPLkTmvfEsNnAndgCmU6ih/QzXBndFZ7rmsJCr\nqHO8lDRj/sVwUEv8XKyi0jn9VQ3gLYnWysmvprk90fukOB0YZgN+Op9lRcrO\njJjbFSAiiyV/SPItJT9gtM8Hu4sdPZ2nNxf246/dThPSca/S/loFKQlw8efK\nQIOLJ9SidsuuTaUbPRmhsVjEfng9xI9NmC+wYCWOdjIHadM4X3w2kz7VAHY3\nd9K0mS6pl/uRUJQmZpTV8y6CFDZkwd4E1lUMhrI3M2ZKaEjQ56/Xc2cnEE5b\nPj8o8aVE8dpPNS7V1WrTtV+loKBoEJEBT+e9mt451UxzY5NRQSqyzLJjUcJ5\nJBIIG80SEW/y11IQRHH+K5ca2QJ2Lp8X0LChJA86900R7NS0hIeFbsjhaj2y\ndhhYnfdsyP0STz5YXjdeDc4Iowf7ExkPXd8SrubPlqTivVwcm7J8IOvyA+xy\nI+4I\r\n=uKQv\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"86d764a9b7826974137979c79fce5e988b08f726","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.15.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.18.0-rc.0_1612966326912_0.6061204741761645","host":"s3://npm-registry-packages"}},"2.18.0":{"name":"@yoast/configuration-wizard","version":"2.18.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.18.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"588949a8771a1e2c0abcca910efef3bc3712fef9","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.18.0.tgz","fileCount":16,"integrity":"sha512-OqCu5DfHTXOA0Z+JgOkS2Aqv1fSEk5xYKAeTyeXgNkypx82OJyFRsN7q+6aeZagfj/OOLNWbnCJ+rDZKos+yRw==","signatures":[{"sig":"MEYCIQDjDf3AyvdBdFwvFJZCJD5ngTwBC+fWl27vXrDmhsRnkgIhAL34Ba7En54oY6frJh0elb/LV3dZuUKSaUlTilXxUCUe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM3sICRA9TVsSAnZWagAACmsQAIDwOYBuZ55NCIShyBeu\n9MeAa5O91xNMQOQjeKTgz6Obdi5xzlpxM2QFYc+t2QWrXKv2j7FyntOm86Cm\nPxeXI+05cCQ0Qc/j2Kc7QBNwYGHIzhWzPSB6hfP7JRmb3vfrA5h9f+k8akq2\nxlPCQCRMUH6pjsD4ALvAxjGoKR2ZJfJ2+FOfLqsP8w+CoLWOnyFwtH7lXluO\nX0sW+EJ4fmUAQHCur18teey33xffGiQiGuiOJuBVUglk/OntaO4dsor+QvaT\neOC+pkghvezNy8elMSgopYUxXXSzab4gN2vk47alCKZC1/nHztZGPTczwglk\nMI/aC1uxyPP+kR7ikLc/YJoreixnquNd3hRCXsf+Y/uGYOZHZkYfYg/9vCXS\nL6FsCWjsbMkcau24wLTyTXND9SUbhxjsgpF7clHKuuQipmDxEpBwy8JywONn\nRo0lQiX5XotBzNUMhykKIamSqxV/1n+fl4B1mwfoj8SZ531Kbanh9eLc7JS2\n8qpB7oVAQyC/JnKPOomyLyXTDAeh4bf2BvGB9HSyjjABs4W0wNKxz+GB23oD\nqfnLcdq+eE6ScvZTZ3Sr7z4gdaxolruPLVSXCN5QRKA3T6/1KhB7TC7D2dBS\n8i0wuUnFa7aQvEN+2InCsnGP8Rihtj685dyZpYzT/rt4XTo0lSci2cM3GTWl\nQMFb\r\n=VJGW\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"d64df1ebf93848d893fa3a92eb108091d9602043","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.15.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.18.0_1613986568102_0.8622191446303831","host":"s3://npm-registry-packages"}},"2.19.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.19.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.19.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"91784bfe4e7f61cf30ec97ac172e4354ed0d90ae","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.19.0-rc.0.tgz","fileCount":16,"integrity":"sha512-NP0G8/SHN6n92lztjVHOmWzN/7CE4q73jIM0FV8jYEh608uozbT2/Mf9/mIVoSmd4l6xCDv0LmIyD6mNOByq1A==","signatures":[{"sig":"MEQCIAjAeOOuZEkotlRKb6jAf7Uw+TAeKM5gsubTcZNWX9X9AiBHKpehHDDEzRGNli01F+gIEiVCKB+fvuRpv76S/OpzYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgM5AZCRA9TVsSAnZWagAATbsP/jUDtgUc+EHSQO7U1O8c\ns+G9XgpfrYeHN422UTPlhC96MlT8UtxHRc2kfpMsfjkZYKjVB3tyWBxGA3RH\ntlk3g5Z8yBypgP0RDtZiCnBcYWCLDEyjpT9CmEvIq1S6FxUuJwNDKbtgz1nf\n2A7EBuav7AUCuGsCIWRBgJYBKEX75MCmBYZAqyd4FejKVSxxjzt02Hk9Et19\nzCSMK/FxRPcZI/msbMciWCYZ8fJTrOVqJDqmRVMQ1Gakw6FtuyorK34mfh6Y\nz2yMFPEJiW2lcQHz37xTfX6pEoMAnSIyji97jpsXupQGAOhIUwp/9cTSpDjQ\nw5eAEjLtPQEIkWTkoyLIrHNsLc06w0OQcSLwfb8Komjahw6j12K90bDk8HPm\njssL6qa4OYeK2WBkPQI47aY/iuW3GcniFRq1s9YtIdKSytuOqyvfYMdg3cQC\nGXxnfu82GGIX128SmCkLmv0gpLBKhuGzu1L249WV+vy+0bu+/43XK9ewxuWb\nS/Z9ChGhONM5gjB8fjCWcAfiZtM0Y5FLXvJGBmEAOdKKsssCgfEtRizD00l3\ndlIIyWUTcYZ8HaHlv1+UVJ0Bsz19mVXqknfJuUtnybaM4+vXAMh42OyGeUCs\nWGD+N3cGuBxAUnUp7N81e/2G49zXr/vvv0SEnrQI27sEHvRELcW1MKzGMsQ5\nzkIx\r\n=zwZG\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"24b023b6e3c46d4e251b0681e090be8aa4a60d64","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.15.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.16.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.19.0-rc.0_1613991961131_0.680866943306643","host":"s3://npm-registry-packages"}},"2.19.0":{"name":"@yoast/configuration-wizard","version":"2.19.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.19.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"81b06947825223e254e831f214214447fc559c5e","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.19.0.tgz","fileCount":16,"integrity":"sha512-6TMXNmRypvTwAeH6de6Rx34TA45UYab3csc1TnUZA7soEEEzw0xp/gVLSBe/8oRwylR+k+LTdblCX5rTXFm4xg==","signatures":[{"sig":"MEQCIDdLhIHhhbBI/qHP9d9p6Uex5+yz3Yda7pXNcW1yXe6TAiAiTLJbSRN+uSG6jKFck7lFY/tsmY26EQQnjW0YznJY1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTyj+CRA9TVsSAnZWagAAQXAP/iTghcLOOaRvM89GwgRy\nQc+m/QlqBpw/FkLbzvRUr1tZilfanPb9HyJg8kX8hEJw8PBTLEkOwjXV50tp\nv9kXhfAmw5m5ncYee/f9ea9EhJ4tICr1xQCHtC5+kUN0DJPO/alv2bgREmod\nyP/QXllUjmJezl8BLPq9/LiSGCCtRh1QzODeLeMKxY9X4x8/DKcj3cb2qBV4\nY7LWcI3u2Fozq+Gw86brh7l5nS2XZ62/jbjlFsZ2i+m+dm4DmpIs/AMlw/iI\nyS2w0tX2V2XX6V05d6vKBUP+PPdajw2XSo1TDQinoEycSR0mFoJ8CNTEs9IU\nZMA66iyiQmBBKGQsk6CuH3DPgyE1v/3n65Ri6P3qMrTIhT4KdGIZN+lvrREa\njPyMCT1nfo0ZPQsp+PrFFGjY6zdGdkn8CK68znCLDI0oZaMWyg3YYRQF5P1Z\nSFlHEgG6xcgkElrkHR/T76OdUQd/5T3edZgHVVDaX2ryj3X1aaZym+viHPMO\noUrKAQnfKfOBpfS9gZPommhbCeAxBAR3NwwxNaTk6iAg/gxvpX3KkoPwKzMd\nHqNkDK8YI4oCyE7/HP6MB7lmAWLQvZ3pBTbsN6qrXhy5v7EjnBZdpaYtQYpA\n1+BX0CyS6sjBPBQKvKK0KKLyCVbTjzFn/Xp822m3nh+VD9IVQLkuTKgLN7Ck\nmPcy\r\n=Z5KA\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"59161c59027dbadcb2125c4272402f5297f88bb7","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.16.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.19.0_1615800573589_0.5689146468724671","host":"s3://npm-registry-packages"}},"2.20.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.20.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.20.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"f520194bbc6a0bb5ecf7a26df16630d3f89dade2","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.20.0-rc.0.tgz","fileCount":16,"integrity":"sha512-Tx+j5yy9GhHQzpD8bZQdBNsxqnsmt4eEYmNg2MOOujvSg3m+3LsOyCSFh9oQuBtjPQJYiWKN7dRRwLSd2Xuqdg==","signatures":[{"sig":"MEQCIGN3g1/M8pf/+CDE15puxE8S1uRBbWA8SWb7WWUQ2we0AiB86jBB86YRivthZKplJQg3oi1HyDr5E7CIGT6/DjFtrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT4XBCRA9TVsSAnZWagAA/40P/3XMV97NC2wnMUpOOXmN\npbhz0bVTva1fXwcCpAVCQN6BD+9FMlwTZYbNi/3k23jOyULc5XMW0BX0ZoTA\nxz1A7WmSR+A2ImXjd7D/VHQ4c0y9/mAwXKddj7q8dK1G7GTpMl8bcYcV0Bi1\nSOdrYEI9U3d5kWG4PslitCSpIbXV0yMF74RoVS0E5nPwStwVkn6thP5R6p2y\nZ3LAwtqCvEACDPgOTpK+XEvH174liLgoSAxv7swADEW3alkJiV8VzXRVMECs\nSrXM3PV/UzhjfPP1Zaw57UfniCzx4K9GbAgvaL0FS9n1t3IFNIJ4iKRHHhnV\nE4GAb8/9lh6m29rZAPOFSpL5NbXPFk5Bkm1m+wEZVWpNmVPdbitCU4k+f/s5\n2bYo0QBNoIfHzRmvH7Ayq+6x2aR1RqZ7meWZHsrdq+BxebhTF2I99rzTh9oX\nQ3rKPJSjlUx5yQLq6j7/91X1Hrtr9hhvjEbIDShSdN9wh3EdvNPRyorVlTjM\nVSEHu/9J+DOg2zqZzhDl2Ym+OZ3ss+w19acqjH936rRmdIpL2UItOLsV2Jiv\nCyofMRXvjY09VOi9KGQbHYnCd3Ayso43RQYbUY0qpFrMg+abHPBcuZzMgAgZ\n2HJ1lp+23JfhCcyoDjLRWn0IECF6htxAdtfHKjmOpdlxdyQhXyIUXOmvBC2S\nQLOa\r\n=X8WR\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"3474bfe5e4d0f28faf204c4ee4122b061bfe202f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.17.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.20.0-rc.0_1615824321366_0.47707599270570533","host":"s3://npm-registry-packages"}},"2.20.0-rc.1":{"name":"@yoast/configuration-wizard","version":"2.20.0-rc.1","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.20.0-rc.1","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"0228e60da9976d80d5865056acfc085015c2e3d1","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.20.0-rc.1.tgz","fileCount":16,"integrity":"sha512-35wVOAc8FuDJbPIYZ+1UQf8IahXPXKrFtkeqZwiCDYxsgcXffHIRIfa6I3gQsuiFnj0dlZbhm7/l2XlpyXHIyA==","signatures":[{"sig":"MEUCIQCRZNs/73b3i7yxIdw9ZiQB3Wbmm1vShQVyDMr2QCq0hQIgLK9jA9EvC44oTILZLTwrQEgxNLVgtI+XpUpDuQWhbqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUIwaCRA9TVsSAnZWagAAnvkP/jNUi1pvC2+S0pzLEE0j\nKHqOWKGHRWf2VONYoVEJrduSiMiLY5ybK5FsDtwE2Eeu5nd8q5Ytd26cdS2s\nDCQB+cJw9zSEWZOLlznEkJPvX4qHlSngqzOOPyBoMPCB6yoPs+8hYt7/i0BU\ngAF0/HJgmjA17HzCNvSmuBc/VUYO3zrLoCys3Im1rcFan6U2EJgBNRqu2q7T\njTWnjINk6TrUGLeG+edb3FW42SdsawWSm2P2f0ypV3k3jPz4Z4P0ccy7kXFi\n9OiJbuiv4xqU7uQpdc4lPy0aU+Sho40PSNsvWYFy/HgDo7nTG158wjVOVMb7\n+dDD+nggk6V6pdWbq2Sej0FxdYd4uOmHsqVy2Dz+KfZymi8M2s7nznquHU+5\nyqp5ENJMZHup2V5D0afgUP/cRs/iXj0MJFhvYRgJCcbEVEXEM4ylQACWSFRB\nIytGSwFqtLQ+Z621Rf0FN0TbeE8azdiTF9oSJqwVIp90Bj7V3fdrJ4nGlZXL\nrMmvx9jGbCDosuJz/R76er7gphI45gcYmPjms5EWrSGyrMiESgxIreezE6NT\nYiX/K43wOT2FFr3H0iJE1hdFpMOZD3G9tFpahv3CZpHccOlGBUG/FTfnULuk\nCbeaGLJoTkHjI6SwPBpo3gk9GQu2pB3nPJbuFy3AtJdl77NHLAZzDnpPVEp+\nLP3S\r\n=UtnU\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"23c01d6b43c519fd780562b841497709a38203c4","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.17.0-rc.1","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.20.0-rc.1_1615891482202_0.6203999152972604","host":"s3://npm-registry-packages"}},"2.20.0":{"name":"@yoast/configuration-wizard","version":"2.20.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.20.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"e76b46149d4c1664343adc2ae77c2a8ddc32bd1f","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.20.0.tgz","fileCount":16,"integrity":"sha512-NvI96ZC4Nq/hMVJ2GjlJ0VBH/9KSL3EWE6BY5yUiYhhYdFTMJfwmilpxZnILVuVt35IasYNZBX3+xUWqRZuR/A==","signatures":[{"sig":"MEQCIFuMT6Kqg7u7UOSmBV5JoL8sY3WR+eJpr8guje1YzxNJAiBh/jlGnH/QprbLwL8PzvdrcSz+vj5ZL7CIvRQcNJoNvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZWyCCRA9TVsSAnZWagAAn9EP/2zZm5roNpuR3q2ZHXsY\nZJq5fLi0yw9bfxIftVBYecTc6rJ+MA+4MYRs+E+vK2wpIs9cdOKBU3/VFWRg\nd1N3eEVeqW/7R51F/o1Khnh/wvwIoWezoU1dNaHt8ciWziN0ndZOQVhttl16\n8tpopiFpVNmfuK0Ek78VClTwc2/gKO6shCuMuVOnki8xIvOZ1MhazbO/nlVO\nF+dU08X53W9GAYmv9yGVLz9UFtNT4X9yMp5fF+2JNRjvVeeRGO8mzHL+qTSd\nCVdEr0dmJPi/MnsWhQly6t+V9/4iLrrOkIXa/Ct6LNdPNOonfuPdh/T40l5N\nUYnZd6da3/yjoGjbhaULhFTVZY2P1P7RKYzPl2DgAhbxKziFyy93PU/j+dLB\nBwowIYiJGxSKZfFvbYhoIscx1N10VaEAv9WQeSZIAHWz8jHSwpkATU/3RjDm\nm5fAHh2e3kL6YQFLA3pgMvRZDaKcmIdiCS/o1EsgnObt3s9PIfYWaOfkDlQe\npiEiUPV9JOqEQHEnyUsht4s05LaGImm2D7Yb/aWiiNq/6I6I+tdMwUy2KkBd\ne7z3Dhrs3BaDm2NZwq51JzJiOi/1m0MgyYP8xoBGHWfzaRXQHBCkknKLLsvH\nNbxQ2gfo9G9zFiSE4r3I+YJcrBfpHkUg2rabg9hs92mmv+3OxPqcWOhCmHEV\n9BKc\r\n=9/zA\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"0d7d32d2590ee009635dcb72de05070c8185343f","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.17.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.20.0_1617259650446_0.6866939960888936","host":"s3://npm-registry-packages"}},"2.21.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.21.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.21.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"ba599ce6f4167e016bc5626132eda6644c85b75c","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.21.0-rc.0.tgz","fileCount":16,"integrity":"sha512-vneIgvRejr+WJ5jXVi84qDI0pY7WA2tgtjFd0B/9wm6IZI6GpThS74KhCnELpTW6617C15lKtnamZAbDsQY5rA==","signatures":[{"sig":"MEYCIQDGfL6EVlkOm6uoLaUpiPHXAD5449zIXRgJ1K/Od8BEGAIhAPVKkFWxNvqiUxOWyUZZ4YSqalkI/srUtC5B5+R4c4Dz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbDnwCRA9TVsSAnZWagAA15oP/2M6QZ0A8MaJC7sPHxPq\naIWtvL3cCYAq6mowUMwuCEhavRKxWQTeGmUTTDSlU1k6myY6H3fGXtfBCARU\nAyfq/dKSS3V0vRClbmhk0X3n5ZyIUOe0Aw3J3mN+Ri6HRIjmrbymHYiP2WIf\nns6ndbdokyOONDZruKX7r6D4QRk1NNjozqSyVuUXZQZokhyXCgs5EO2HHgNJ\n1L+o/tesx2ciWrnpIdlSO9wBfoOxM+IITXHnvkrnkAPSb76Go3NSGoBasp8r\nUib+AmkUgyDq9XQLWNafdUy0RepJhFCs/gRhCyozTKXSXOAMxqOtmd4WVuA/\nnDVZZRhXCDNRky3c7arCagYHzBBq2airE3LAS3DcLVqgSjydEdatYGtjlOJZ\nD/vHgQXPWnOlGwCuCsBDrCFeJTIhTVBOMoSiL4niqKm08NacBGRdWtUT0Dl+\nICf+Y2clb829MoDmesX6VLFusuLRPGV3Mxp+uHa+EIrs5p4JY0pU6b80tGX2\nuheiblVOYAXrn3ZPdsIKr326j65t1SHTnOlTGgQ1J5aTyCxnGcS7LyeFEDhU\n6Kr3ZGW7KPhpCr3rt1qD20U4hlxfWqkmFneA0sNC+7h8RoGrZv2mSsrMuv1V\n8OhBDTNJFG9AcSGT6V3vaqmVt6+CTun+AerSyavZa0hjP2Vm5Tn6MBc+TSbZ\no1y5\r\n=m4zo\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"86e8ac05c1d8f6a49031611e7b867fb3816fe10b","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.18.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.21.0-rc.0_1617705456220_0.33267601586270357","host":"s3://npm-registry-packages"}},"2.21.0":{"name":"@yoast/configuration-wizard","version":"2.21.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.21.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"d17af7e3d58c41f1e6cd26a91b599b9693948ff9","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.21.0.tgz","fileCount":16,"integrity":"sha512-ZEH35+Em0Rg35cySDy1kzBisu9joXfMp0iNZRBUYNKuNJkF4BGgZF1Pp79hXcqe+smC0xlK/QqeeqgJ3alLBkA==","signatures":[{"sig":"MEYCIQDl9SIjlYTvbgRalR0vZidlLa8mIVubgNEHdv4VrPYWpwIhANXJSvoZjHgzrnIINshAiBnDuYpkQz6uLWFlvfT8BQjH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggqdcCRA9TVsSAnZWagAAy6YQAIPhlQ+LwyAbFt6pVEuF\nURi4strmb1PqMnNWB6j+ddsNCqJF1rYQrekAOmY6BxS+4bUsVppJ2Tq4888k\nq7RQhO95tbOjuX7H4opxh3tE9a7fHX0VohtTi8GXSBfUgUXpLh4qMr025Our\nUYgDIs9/9ZLO1RIS9a5wfqCCIx8/+/23igY5rEwiVq8yYSo/5cSM8+UPWR9M\nNShCuaKr/yIVX14frV4W/0KFuESTvMMxYUAsV/sjuq4Q9A2mDR08O5DwyeIK\nQvI9EDqonkG4Jf5bMCQZU1aZ6HYhO+B3iJuNdVKs4ENnM61Q0W5+RyPtcVbF\ncdVXUjTjAS69hiQV8q6CMB63iq2Bus7kK0Ie7b11P26DvZLxeKAr/tu79hor\nBOmdfEJzEIIMemJyvttZn/glLcDD9DRbA/s5KEj9dI1+dH1NzS8Sou2yxoE9\nOAOh7F2kcbf103oXHe1cxxaJu341nfunlDR25+rCQB3z9aCJY/CSzZ4t9npq\nQf2a54CTG8awe3y+Ff8kaVoY7kNHdDHT2OcRxYHVp2BPJlIzpxoK93jgHfJ2\nl1J1mATuX2M4ezgXKirQbEkE7eea1yXgBqFD4JM2sKwabNQ9kvs/E3FZ1Cz7\nbY50nBK727tFhBnhxDL4yYSYg/wNHtZ1V4a7/dUcTSJ0u4coSIa3KHv9vYb0\nv+75\r\n=HEbe\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"95ce09dc521fdbe4c62d3ef6e5214e9b6e5c64c6","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.18.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.21.0_1619175259760_0.4634733613324711","host":"s3://npm-registry-packages"}},"2.22.0-rc.0":{"name":"@yoast/configuration-wizard","version":"2.22.0-rc.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.22.0-rc.0","maintainers":[{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"5183c740137d1fc379f607773566a4d82e38d18d","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.22.0-rc.0.tgz","fileCount":16,"integrity":"sha512-FsmXg54WzrzE0qtbTkA1TilDHWrrMpLrkxMEYmfPgXmb/3Pgn2/UiAKvTtsz0NI8JN72NBOLycQOgZcY7LXmPQ==","signatures":[{"sig":"MEYCIQDtCKtsXwNkGefaSglog4SLKrUV2gH3+uiqJy9K1xRObAIhAJSwpskUJWFCoJ5I0ncURb3s1ih6J6OqhwNlwRtmFPb3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50200,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghnPNCRA9TVsSAnZWagAAhrQP/1CH4ChZZHv7lUQwd9ei\n3DWYJtuXZwJDBWIflKRAuQkYy5bK5EE8pnorV29qgzxEIra6s6b9BC7M0Ekp\npVuBRQEV9tEJFftQSZWlPZiLXi6TK2PJWLIIjhvQaIl0OKzJzNdqCf9cjaHQ\nlcoqfpSsHQgnxV7VezthwN2Oi19nbIHaohzPQZMm+hhDqG/trZGSPY6qQ6fV\nnjsxr7gk9YJqltfG00uAbZf3b9rmCSUfbTDpZuGeEXh9yZFsD+HhHP6M5g59\nkjwUX+CPadEgaOwKZGqM6Oo2fOq6f6RKlzeIS6pIyVmWQXgu783vKrufj2fP\nzkeEanSMlsZSSuY74e/mtiJsVPDAybquaA2TUS3+49R+AVDq3lgtYnOizinG\nPt5UloDQU2IGsPX0CQtL7yR2VQH3lhYQd4WEq0xsrLlHVREdowu2BHrGvMWX\n7AIPAvc5suLF4iAOte7V84deZUp9ekkEoerLWds9+KRtb0erikOKWkaNY4dU\n6cPmCyQsszZ4YtweQj61776AdHNsE3gEEDtL+7mQnYmmg8NV0GmP/hg/W1xD\n3CszS+js0vSbR7kM7AG4Fu6x5gnE2fpFjP99MwWqPkq+WYw4sW/9pwsl3Omm\nxgq1RHmetMYqQNFsMFn48zZcK0pIQROqb5uXMu9V2oZyTPxzzxvqHSMqnVf2\nHvB1\r\n=apSZ\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","gitHead":"94ccecb5145d8384fb350833c7ba327d7ddaa520","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.19.0-rc.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.22.0-rc.0_1619424205313_0.07505817068840659","host":"s3://npm-registry-packages"}},"2.22.0":{"name":"@yoast/configuration-wizard","version":"2.22.0","author":{"name":"Yoast"},"license":"GPL-3.0","_id":"@yoast/configuration-wizard@2.22.0","maintainers":[{"name":"arnoudnpn","email":"arnoud@yoast.com"},{"name":"marijnyoast","email":"marijn@yoast.com"},{"name":"omarreiss","email":"omar@yoast.com"},{"name":"moorscode","email":"jip@yoast.com"},{"name":"yoastbot","email":"webmaster@yoast.com"},{"name":"joostdevalk","email":"joost@yoast.com"},{"name":"igorschoester","email":"igor@yoast.com"},{"name":"xyfi","email":"a.botteram@gmail.com"},{"name":"irenestr","email":"irene@yoast.com"}],"homepage":"https://github.com/Yoast/javascript#readme","bugs":{"url":"https://github.com/Yoast/javascript/issues"},"dist":{"shasum":"9a99c7ab849ecd370b154e720b981b76f95ad458","tarball":"https://registry.npmjs.org/@yoast/configuration-wizard/-/configuration-wizard-2.22.0.tgz","fileCount":16,"integrity":"sha512-yf8zkjV0Rkn+D7qGFRe/RbCqJSnyc7y3WPpScOByoSrDnucc0K4dm20+Z2Avl6O3iU5yGhIWSx3DRI5fN9nPMg==","signatures":[{"sig":"MEUCIE7bldlMxgmhSnTnTXIH811KdBC8F6ZvgvoYJHL8hkzAAiEAx8LYaXHBKbuBDeLZFb01AnoChrZp+uq/kTHG9Ale8vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":50190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgo26ICRA9TVsSAnZWagAAwq4P/3Go2GVF5eGAqjBgz5VU\nHAQWeBt87QtRSS9pehOCjjluFhePbe5VLLZBtSt6zoUwogP5FAG4e/+Xsx2O\nA69/9GGCO5lL+J8gvdjre6sw/ax+6jORam2oF7YchA/9743a3SVLMbphxAmp\nP4hZMaL56xdRO4ofjuEyBs5LTBCJGhDb+w8WHiKnNeawm5zoPgB6odVgo4UD\ntrtuaS9824k770dYNSXHKiadInN2a5q6GgpSfrLvVwq4vj5i6b6KqDw6noyl\nmYoMvKY/kk3BRqLcJzeaT8z/XhtYu5+h1kyNrPEZDV4G8lNgRWDexCNSAQ6C\nRq4MVGthAtPQkwsCq0Yad6FEojCaf/AqpR6gLEFZMzKyEVCtZGgfbhdZjWP7\nSL+Ta3RHIIzzOm3f0mt8nu4zPVHgosS/kL8r+hkjfIsl2An2ZvA74qWRUXGg\nEfkkHsp1rFSihugtnU48ZFPC6iS1zbTo9MadHsG4Z46C1bOWbO4oXo8D09nM\nk0pYvx8Q7lnIKmw6Y0wj9hz1Ineag1eudgqueTAi7N/NkeXgxgHZjJk1rl0l\n9lW7zMFB56mYv74ZdBDRu9CeHmC9Fk3V4eBF5VxLeyMkRs/i1hcbJmU0Fare\nr3c6Boo0PkbtfiNGtgPpMj0azwTgKQzSip/OPkK1/yD8fuVXGJEuMu07X/ZZ\n9OBp\r\n=kzdD\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"testURL":"http://localhost","testRegex":".*Test.js$","transform":{"^.+\\.jsx?$":"babel-jest"},"moduleNameMapper":{"\\.css$":"/tools/jest/CSSStub.js"},"snapshotSerializers":["enzyme-to-json/serializer"],"transformIgnorePatterns":["/node_modules/(?!yoastseo|lodash-es).+\\.js$"],"setupTestFrameworkScriptFile":"/tools/jest/setupTests.js"},"main":"src/index.js","gitHead":"12520ef960f8c1f7789c337354f160a3fc3ac98c","private":false,"scripts":{"lint":"eslint . --max-warnings=11","test":"jest","prepublishOnly":"rm -rf dist && cp -R src dist && cp package.json dist/package.json && json -I -f dist/package.json -e \"this.main='index.js'\" && mkdir dist/src && mkdir dist/src/helpers && cp src/helpers/_colors.scss dist/src/helpers/_colors.scss && cp .babelrc dist/.babelrc"},"_npmUser":{"name":"yoastbot","email":"webmaster@yoast.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"_npmVersion":"lerna/3.13.1/node@v10.16.3+x64 (linux)","description":"Package for our configuration wizard","directories":{},"_nodeVersion":"10.16.3","dependencies":{"lodash":"^4.17.11","prop-types":"^15.7.2","@yoast/helpers":"^0.16.0","@wordpress/i18n":"^1.1.0","@yoast/components":"^2.19.0","@yoast/style-guide":"^0.13.0","interpolate-components":"^1.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^22.4.3","enzyme":"3.9.0","babel-core":"^6.25.0","babel-jest":"^22.4.3","material-ui":"^0.18.6","babel-loader":"^7.1.1","browserslist":"^4.7.3","babel-polyfill":"^6.23.0","enzyme-to-json":"3.3.5","babel-preset-react":"^6.24.1","babel-preset-es2015":"^6.24.1","react-test-renderer":"^16.8.4","jest-styled-components":"^5.0.1","enzyme-adapter-react-16":"1.10.0","@yoast/browserslist-config":"^1.2.2","babel-plugin-styled-components":"^1.5.1"},"peerDependencies":{"react":"^16.12.0","react-dom":"^16.12.0","material-ui":"^0.18.6"},"_npmOperationalInternal":{"tmp":"tmp/configuration-wizard_2.22.0_1621323399998_0.09249454755541131","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-04-04T16:48:06.032Z","modified":"2026-03-20T13:06:27.804Z","1.0.0-rc.3":"2019-04-04T16:48:06.409Z","1.0.0-rc.4":"2019-04-05T08:48:39.659Z","1.0.0-rc.5":"2019-04-08T08:27:09.587Z","1.0.0-rc.6":"2019-04-11T11:44:27.675Z","1.0.0-rc.7":"2019-04-17T12:46:44.955Z","1.0.0":"2019-04-29T13:15:38.812Z","1.1.0-rc.0":"2019-04-30T15:05:05.358Z","1.1.0-rc.1":"2019-05-08T09:07:44.237Z","1.1.0":"2019-05-14T14:20:08.965Z","1.2.0-rc.0":"2019-05-15T10:38:19.060Z","1.3.0-rc.1":"2019-05-24T08:41:56.682Z","1.2.0":"2019-05-27T13:37:10.397Z","1.3.0-rc.2":"2019-05-28T10:04:26.404Z","1.3.0":"2019-06-11T14:10:17.438Z","1.4.0-rc.0":"2019-06-12T09:18:42.839Z","1.4.0-rc.1":"2019-06-25T09:03:23.347Z","1.4.0":"2019-07-08T09:13:01.382Z","1.5.0-rc.0":"2019-07-08T14:03:25.914Z","1.5.0":"2019-09-16T09:41:58.892Z","1.6.0-rc.0":"2019-09-17T09:32:11.364Z","1.6.0":"2019-09-30T08:36:51.292Z","1.7.0-rc.0":"2019-09-30T11:43:21.117Z","1.7.0":"2019-10-14T10:02:39.726Z","1.8.0-rc.0":"2019-10-14T13:56:13.418Z","1.9.0-rc.0":"2019-10-28T15:57:46.817Z","1.9.0":"2019-11-11T12:56:22.642Z","1.10.0-rc.0":"2019-11-12T12:01:36.135Z","1.10.0-rc.1":"2019-11-26T12:27:07.572Z","1.10.0":"2019-12-09T12:33:31.732Z","1.11.0-rc.0":"2019-12-09T14:29:31.021Z","1.11.0-rc.1":"2019-12-16T09:53:28.324Z","1.11.0-rc.2":"2019-12-16T12:36:50.769Z","1.11.0":"2020-01-06T10:18:36.245Z","1.12.0-rc.0":"2020-01-06T12:37:37.936Z","1.12.1":"2020-01-20T13:02:04.624Z","1.12.2-internal-linking.0":"2020-01-21T12:07:54.398Z","1.12.2-internal-linking.1":"2020-01-21T12:53:02.253Z","1.13.0-rc.0":"2020-03-17T13:16:13.732Z","1.13.0":"2020-03-30T09:16:50.562Z","2.0.0-rc.0":"2020-03-31T07:34:53.579Z","2.1.0-rc.0":"2020-04-07T06:09:38.232Z","2.1.0":"2020-04-09T10:03:59.247Z","2.2.0-rc.0":"2020-04-09T12:23:57.502Z","2.2.0":"2020-04-23T05:52:29.296Z","2.3.0-rc.0":"2020-04-23T12:40:48.751Z","2.3.0-rc.1":"2020-04-28T08:32:49.054Z","2.3.0":"2020-05-11T05:59:30.252Z","2.4.0-rc.1":"2020-05-11T10:23:17.017Z","2.4.0-rc.2":"2020-05-11T10:50:11.244Z","2.4.0-rc.3":"2020-05-19T12:14:41.468Z","2.4.0":"2020-05-25T07:59:36.711Z","2.5.0-rc.0":"2020-06-05T06:59:09.771Z","2.5.0":"2020-06-08T06:42:52.275Z","2.6.0-rc.0":"2020-06-08T09:58:31.596Z","2.6.0":"2020-06-22T09:06:03.196Z","2.7.0-rc.3":"2020-06-23T10:05:01.368Z","2.7.0-rc.4":"2020-06-26T12:21:22.608Z","2.7.0-rc.6":"2020-07-07T13:18:52.154Z","2.7.0-rc.7":"2020-07-16T06:39:22.914Z","2.7.0":"2020-07-20T07:40:03.634Z","2.8.0-rc.0":"2020-07-20T13:02:21.903Z","2.8.0":"2020-08-03T06:40:43.687Z","2.9.0-rc.0":"2020-08-03T10:01:14.935Z","2.9.0-rc.1":"2020-08-13T11:32:17.201Z","2.9.0":"2020-08-17T11:46:52.437Z","2.10.0-rc.0":"2020-08-17T13:14:02.782Z","2.10.0":"2020-08-31T07:40:04.889Z","2.11.0-rc.0":"2020-08-31T09:42:12.018Z","2.11.0-rc.1":"2020-09-08T13:17:13.253Z","2.11.0-rc.2":"2020-09-15T07:11:14.063Z","2.11.0":"2020-09-17T07:37:15.175Z","2.12.0-rc.0":"2020-09-17T09:34:11.615Z","2.12.0-rc.1":"2020-09-24T06:25:28.373Z","2.12.0-rc.2":"2020-10-06T10:08:25.267Z","2.12.0-rc.3":"2020-10-06T10:38:40.742Z","2.12.0-rc.4":"2020-10-06T12:04:10.854Z","2.12.0":"2020-10-13T08:32:11.242Z","2.13.0-rc.0":"2020-10-13T10:39:08.098Z","2.13.0":"2020-10-26T09:04:31.885Z","2.14.0-rc.1":"2020-11-16T13:51:49.564Z","2.14.0":"2020-11-30T08:58:58.758Z","2.15.0-rc.0":"2020-12-28T10:12:59.309Z","2.15.0":"2021-01-11T09:42:34.565Z","2.16.0-rc.0":"2021-01-11T10:58:53.715Z","2.16.0":"2021-01-25T09:51:09.455Z","2.17.0-rc.0":"2021-01-25T15:56:07.947Z","2.17.0-rc.1":"2021-02-03T12:22:11.646Z","2.17.0-rc.2":"2021-02-04T13:43:29.319Z","2.17.0":"2021-02-08T09:16:45.124Z","2.18.0-rc.0":"2021-02-10T14:12:07.090Z","2.18.0":"2021-02-22T09:36:08.353Z","2.19.0-rc.0":"2021-02-22T11:06:01.421Z","2.19.0":"2021-03-15T09:29:33.753Z","2.20.0-rc.0":"2021-03-15T16:05:21.506Z","2.20.0-rc.1":"2021-03-16T10:44:42.344Z","2.20.0":"2021-04-01T06:47:30.599Z","2.21.0-rc.0":"2021-04-06T10:37:36.399Z","2.21.0":"2021-04-23T10:54:19.980Z","2.22.0-rc.0":"2021-04-26T08:03:25.484Z","2.22.0":"2021-05-18T07:36:40.145Z"},"bugs":{"url":"https://github.com/Yoast/javascript/issues"},"author":{"name":"Yoast"},"license":"GPL-3.0","homepage":"https://github.com/Yoast/javascript#readme","repository":{"url":"git+https://github.com/Yoast/javascript.git","type":"git","directory":"packages/configuration-wizard"},"description":"Package for our configuration wizard","maintainers":[{"email":"webmaster@yoast.com","name":"yoastbot"},{"email":"deepthought@yoast.com","name":"deepthoughtyoast"},{"email":"dennis@yoast.com","name":"dennisatyoast"},{"email":"aida@yoast.com","name":"famarfuaty"},{"email":"jordi.prats@yoast.com","name":"jo_pv"},{"email":"enrico@yoast.com","name":"enricoyoast"},{"email":"vraja.das@yoast.com","name":"vrajadas"},{"email":"diede@yoast.com","name":"diedex"}],"readme":"# Onboarding wizard\nThe configuration wizard is a generic library that can be used to dynamically generate an configuration wizard. The wizard and all of its underlying components are built with React in ES2015.\n\n\n\n- [Installing](#installing)\n\t- [Prerequisities](#prerequisities)\n\t- [Loading the wizard onto your page.](#loading-the-wizard-onto-your-page)\n- [Configuring the wizard](#configuring-the-wizard)\n\t- [General configuration](#general-configuration)\n\t- [Fields](#fields)\n\t\t- [Specification](#specification)\n\t\t- [Available components](#available-components)\n\t\t- [Custom components](#custom-components)\n\t\t- [Fields definition example](#fields-definition-example)\n\t\t- [Setting the initial field data](#setting-the-initial-field-data)\n\t- [Steps](#steps)\n\t\t- [Specification](#specification)\n\t\t- [Steps definition example](#steps-definition-example)\n\t- [Translations](#translations)\n\t- [Persisting data](#persisting-data)\n- [Accessibility](#accessibility)\n\n\n\n## Installing\n\n### Prerequisities\nThe wizard depends on a few other modules/libraries. Before you start the following software has to be installed on your system:\n- Node\n- NPM\n- Sass\n\n### Loading the wizard onto your page.\nThis chapter explains how you can render the wizard onto a webpage.\n\nAdd the following line into a scss file that you load on the page.\n\n```CSS\n@import \"../../node_modules/yoast-components/css/all.scss\";\n```\n\nRender the wizard into a `div` element on your page.\n\n```JS\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ConfigurationWizard from \"@yoast/configuration-wizard\";\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n}\n\nReactDOM.render( , document.getElementById( \"wizard\" ) );\n```\n\n## Configuring the wizard\n\nA wizard has a variable amount of steps. Each step can contain a set of predefined fields, through which the user can configure settings. A user can traverse through these steps by using the available navigation controls (a stepper and buttons). Whenever a user switches steps, the fields in the current step are saved to the server.\n\n### General configuration\n\nThe following config attributes can / should be specified:\n\n- Required attributes:\n - `fields`, _object_, The field definitions.\n - `steps`, _object_, The step definitions.\n - `endpoint`, _string_, The endpoint URL used to save the data submitted by the user.\n - `finishUrl`, _string_, The finish URL for the wizard to redirect the user to after completing/closing the wizard. \n- Optional attributes:\n - `customComponents`, _object_, Here you can inject custom components (fields) to be used within steps.\n\n### Fields\n\n#### Specification\n\nFields have the following attributes:\n\n- `name`, _string_, the name of the field.\n - `component`, _string_, references the component that should be used to render the field in the component tree.\n - `properties`, _object_, contains properties that will be passed to the component when it's rendered. This is specific for the component that is used.\n - `requires`, _object_, (optional) can be used to make sure a field is only rendered when another field has a certain value.\n \t- `field`, _string_, the field name for the other field.\n \t- `value`, _string_, the value this field has to have.\n - `data`, _mixed_, the value of the field. This can be used to set the initial state of the field.\n\n#### Available components\n\nCurrently we've implemented three different field components from which you can choose:\n\n- `Choice`\n Renders a choice interface, like a group of radio buttons or a select button. Currently only radio buttons have been implemented.\n - `Properties`:\n - `label`: The label for the input element to be rendered.\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the choice field.\n - `choices`: a JSON string with choices where the key represents the `value` and the value is an object with `choice` properties:\n - `label`, _string_, The label of the choice.\n - `screenReaderText`, _string_, (optional) can be used to provide a little extra context per choice for people using screenreaders.\n- `Input`\n Renders a textarea.\n - `properties`:\n - `label`: The label for the input element to be rendered.\n - `placeholder`: placeholder text.\n - `pattern`: a regular expression that can be used to validate the string format. (not MVP)\n - `explanation`, _string_, (optional) An extra explanation that is shown underneath the input field.\n- `HTML`\n Takes a piece of HTML and renders it. This can be used to render some paragraph of text in the steps. Purely meant for adding copy to the wizard in a generic way, not functionality.\n - `properties`:\n - `html`: The html to be rendered.\n\n#### Custom components\nIt is possible to inject custom component fields into the `Wizard`. The custom components have to be React elements that can be rendered by the wizard. They should be implemented beforehand and they can be required and injected when instantiating the Wizard. Below is an example of how to add your custom components to the wizard's config.\n\n```JS\nimport CustomComponent1 from \"/example/path/CustomComponent1\";\nimport CustomComponent2 from \"/example/path/CustomComponent2\";\n \nlet config = {\n fields: {},\n steps: {},\n endpoint: \"\",\n finishUrl: \"\",\n customComponents: {\n CustomComponent1,\n CustomComponent2\n }\n};\n\nclass App extends React.Component {\n\trender() {\n\t\treturn ;\n\t}\n};\n```\n\n#### Fields definition example\n\n```JSON\n\"fields\": {\n \"introduction\": {\n \"component\": \"HTML\",\n \"properties\": {\n \"html\": \"

Welcome to the configuration wizard!

\"\n }\n },\n \"favoriteColor\": {\n \"component\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"green\": {\n \"label\": \"Green\"\n },\n \"purple\": {\n \"label\": \"Purple\"\n },\n },\n },\n \"data\": \"\",\n \"default\": \"purple\"\n },\n \"lastName\": {\n \"component\": \"Input\",\n \"properties\": {\n \"label\": \"What is your last name?\",\n },\n \"data\": \"{last_name}\"\n },\n \"shadesOfGreen\": {\n \"componentName\": \"Choice\",\n \"properties\": {\n \"label\": \"What is your favorite color?\",\n \"choices\": {\n \"darkGreen\": {\n \"label\": \"Dark green\"\n },\n \"lightGreen\": {\n \"label\": \"Light green\"\n },\n },\n },\n \"requires\": {\n \"field\": \"favoriteColor\",\n \"value\": \"green\",\n },\n \"data\": \"\",\n \"default\": \"darkGreen\"\n\t}\n}\n```\n\n#### Setting the initial field data\nThe wizard loads the data for each field from it's config. The `data` attribute for each field contains the intial state for that field. When the value for the field is changed, it's stored in the wizard's state and saved to the server when the user switches steps.\n\n### Steps\n\n#### Specification\n\nA Step has the following attributes:\n\n- `id`, _string_, identifier\n - `title`, _string_, the title of the step.\n - `fields`, _array_, list of strings referencing fields by key. \n\nAs an example let's use the fields specified above. In the config you could define the steps like this:\n\n#### Steps definition example\n\n```JSON\n\"steps\": {\n \"credentials\": {\n \"title\": \"Credentials\",\n \"fields\" : [\"lastName\"]\n },\n \"personalPreferences\": {\n \"title\": \"Personal preferences\",\n \"fields\" : [\"favoriteColor\", \"shadesOfGreen\"]\n }\n}\n```\n\n### Translations\nThe wizard doesn't have a lot of copy of its own, but the strings in it are translatable. This is done in a similar way to [i18n Calypso - localize](https://github.com/Automattic/i18n-calypso#localize). \n\nThe translations can be added to the config in the following way:\n\n```JS\nimport { setTranslations } from \"yoast-components/utils/i18n\";\n\nlet translations = {\n \"domain\": \"your-textdomain\",\n \"locale_data\": {\n \"your-textdomain\": {\n \"Next\": [\"Volgende\"],\n \"Previous\": [\"Vorige\"],\n \"Close\": [\"Sluiten\"]\n }\n }\n}\n\nsetTranslations( translations );\n```\n\n### Persisting data\nThe wizard uses API requests to send its data to the endpoint that is set via the config that is provided to the wizard. The wizard uses [jQuery](http://api.jquery.com/jquery.ajax/) for sending it's requests, but if it is not available a module called [fetch](https://github.com/github/fetch) is used.\n\nLet's say you have a step that is build up like this:\n\n```JSON\n\"publishingEntity\": {\n \"title\": \"Personal Data\",\n \"fields\" : [\"nameField\", \"lastnameField\", \"adressField\"]\n}\n```\n\nThe wizard will send a request containing the following parameters to the configured endpoint:\n\n```JSON\n{\n \"nameField\": \"John\", \n \"lastnameField\": \"Doe\", \n \"adressField\": \"Silicon valley 1\", \n}\n```\nThe configured endpoint has to process this request to store the field values.\n\n## Accessibility\nThe wizard is built with accessibility in mind. We trying to uphold a baseline level of a11y making sure it's mobile, keyboard and a screenreader accessible out of the box. All input fields in the forms have labels that are linked to them. Choice elements also have an extra screen reader text that you can add. This adds an aria-label to the options, the screenreader will read this label instead of the label that is visible on the page. This way you can add a better description for people who use a screenreader.\n","readmeFilename":"README.md"}