@nnc-digital/nnc-design-system 0.4.38 → 1.0.0-alpha1

package/README.md

@@ -6,17 +6,19 @@
 
 The design system for North Northamptonshire & West Northamptonshire, two brand new unitary councils encompassing Wellingborough, Corby, Daventry, East Northants, Kettering, Northampton, Northamptonshire County and South Northants.
 
+## Requirements
+
+Requires node v18 for Storybook v7. If you have nvm installed then you can run `nvm use` and it will autodetect the correct version of node to use.
 
 ## Installation
 
-### Installation and development of the Design System 
+### Installation and development of the Design System
 
 You need `node` and `npm` installed.
 
 1. Clone the repo and `npm i`
 2. `npm run dev` will start up the Storybook playground and start `rollup` watching for changes.
 
-
 ### Installation using docker
 
 This option is recommended if your using a windows machine
@@ -38,10 +40,8 @@ docker ps
 docker-compose stop
 ```
 
-
 ## Documentation
 
-
 This design system is made up from a combination of these libraries:
 
 - [Rollup](https://github.com/rollup/rollup)
@@ -49,22 +49,14 @@ This design system is made up from a combination of these libraries:
 - [TypeScript](https://www.typescriptlang.org/)
 - [Jest](https://jestjs.io/) and [React Testing Library](https://github.com/testing-library/react-testing-library) enabling testing of the components
 
-
-
-
 ## Examples
 
-
 👉 **[You can view the design system here](https://northants-design-system.netlify.app)**
 
 This is a living documentation powered by [Storybook](https://storybook.js.org/), where you can see all the available components, their variations and documentation.
 
-
-
 ### Using the design system in your project
 
-
-
 You can find the design system [here on NPM](https://www.npmjs.com/package/northants-design-system).
 
 ```
@@ -74,7 +66,7 @@ npm install nnc-design-system
 npm install react react-dom styled-components @reach/router
 ```
 
-This design system uses theming - **it will not work without a theme wrapped around the components** - to use a theme you will need to include a `ThemeProvider` from styled components, [you can find out more about how this works here](https://styled-components.com/docs/advanced#theming). Then you will need to import one of the three themes from the design system, or create your own. The three avaliable are `GDS_theme` (a basic style based on the [GDS design system](https://design-system.service.gov.uk/)), `west_theme` and `north_theme` (themes for North and West Northamptonshire styled components). 
+This design system uses theming - **it will not work without a theme wrapped around the components** - to use a theme you will need to include a `ThemeProvider` from styled components, [you can find out more about how this works here](https://styled-components.com/docs/advanced#theming). Then you will need to import one of the three themes from the design system, or create your own. The three avaliable are `GDS_theme` (a basic style based on the [GDS design system](https://design-system.service.gov.uk/)), `west_theme` and `north_theme` (themes for North and West Northamptonshire styled components).
 
 This `ThemeProvider` can be wrapped around the entire app, or around a single component
 
@@ -112,10 +104,8 @@ const MyComponent = () =>
   </ThemeProvider>
 ```
 
-
 ## Documentation
 
-
 ### Creating and generating new components
 
 There is a util file under `util` called `create-component.js`. Instead of copy pasting components to create a new component, you can just run this command to generate all the files you need to start building out a new component. To use it:
@@ -140,10 +130,8 @@ The default templates for each file can be modified under `util/templates`.
 
 Don't forget to add the component to your `index.ts` exports if you want the library to export the component.
 
-
-
-
 ### How to publish a new version to NPM
+
 First, make sure you have an NPM account and are [logged into NPM using the `npm login` command.](https://docs.npmjs.com/creating-a-new-npm-user-account)
 
 1. **information about testing needed here**
@@ -155,19 +143,15 @@ First, make sure you have an NPM account and are [logged into NPM using the `npm
     - Create and publish a tarball to NPM
 4. If you are wanting to utilise the updated design system you will then need to update the version number of the design system in the `package.json` file within that repo.
 
-
-
-
 ### Installing component library locally for IE11 (or other uses) but this is easier and less buggy
 
 https://www.viget.com/articles/how-to-use-local-unpublished-node-packages-as-project-dependencies/
 
-
 Good article on this can be found [here](https://www.viget.com/articles/how-to-use-local-unpublished-node-packages-as-project-dependencies/)
 
-Install yalc **globally**    
-Using NPM: `npm i yalc -g`  
-Using Yarn: `yarn global add yalc`  
+Install yalc **globally**
+Using NPM: `npm i yalc -g`
+Using Yarn: `yarn global add yalc`
 
 In the **nnc-design-system**  
 You will need node v14.17.3 > to build on windows
@@ -179,8 +163,6 @@ run `yalc add nnc-design-system` then run `npm install` or `yarn`
 
 Then run `npm run start` to run the application.
 
-
-
 You will need node v14.17.3 > to build on windows
 
 Install yalc 
@@ -192,12 +174,10 @@ Using Yarn:
 
 `yarn global add yalc`
 
-
 run `yalc publish` in the design system folder
 
 run `yalc add nnc-design-system` in ie11-test-folder
 
-
 `npm install`
 
 to make changes and update them 
@@ -206,9 +186,6 @@ in design system `yalc push` (this automatically updates all dependencies on all
 
 or `yalc publish` in design system and `yalc update` in your projects repo
 
-
-
-
 ### Installing Component Library Locally
 
 Let's say you have another project (`test-app`) on your machine that you want to try installing the component library into without having to first publish the component library. In the `test-app` directory, you can run:

package/build/index.esm.js

@@ -26670,6 +26670,185 @@ const SignpostContainer = styled.div`
   }
 `;
 
+styled.div`
+`;
+
+styled.p`
+`;
+
+var NoResultsMessage = function () {
+    return (React.createElement(PageMain, null,
+        React.createElement(Container$g, { "data-testid": "NoResultsMessage" },
+            React.createElement(Result, null,
+                "Sorry - we couldn\u2019t find what you\u2019re looking for!",
+                React.createElement("br", null),
+                React.createElement("br", null),
+                "You can try again with a different search term or complete one of our top tasks:"),
+            React.createElement("div", { className: "table-container" },
+                React.createElement("table", null,
+                    React.createElement("thead", null,
+                        React.createElement("tr", null,
+                            React.createElement("th", { scope: "col" }, "Area"),
+                            React.createElement("th", { scope: "col" }, "Task"))),
+                    React.createElement("tbody", null,
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/make-payment" }, "Pay")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/make-payment" }, "Make a payment for our\u00A0services"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/benefits" }, "Benefits")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/benefits/apply-council-tax-support-or-housing-benefit" }, "Benefits application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/benefits/report-benefits-change" }, "Report a benefits change"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/bins-recycling-and-street-cleansing" }, "Bins")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/bin-collections/garden-waste" }, "Garden waste\u00A0subscription")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/bin-collections/bulky-item-collections" }, "Bulky item collection request")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/bin-collection-services/missed-bin-collections" }, "Missed collections report")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/bin-collection-services/new-replacement-or-damaged-bins" }, "New, replacement, or damaged bins request"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/business-rates" }, "Business rates")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/business-rates/make-business-rates-change" }, "Business rates changes")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/business-rates" }, "Discounts and exemptions")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/business-rates/report-business-rates-move" }, "Move your\u00A0business"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/counciltax" }, "Council tax")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/counciltax/moving-home" }, "Move home")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/paycounciltax" }, "Pay council tax")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/counciltax/council-tax-recovery/set-arrangement" }, "Request an arrangement")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/counciltax/single-person-discount" }, "Single person discount application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/counciltax/student-discount" }, "Student discount application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/counciltax/council-tax-household-changes" }, "Make a general change"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/councillors-and-democracy" }, "Democratic")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/elections-and-voting/register-vote" }, "Register to vote"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/environment" }, "Environment and cleansing")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/street-cleansing/fly-tipping" }, "Fly-tipping")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/environment/litter-dead-animals-and-street-cleaning" }, "Litter and street cleaning")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/environment/noise" }, "Noise")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/environment/odours-and-drains" }, "Odour and drains")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/animals-dogs-and-pests/pest-control" }, "Pest control")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/environment/smoke-and-bonfires" }, "Smoke and bonfire")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/environment/issues-grass-cutting-trees-hedges-and-weeds" }, "Grass cutting, trees and bushes"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/health-and-wellbeing" }, "Health")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/keeping-healthy/blood-tests" }, "Book a blood test"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/housing" }, "Housing")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/council-housing/repairs" }, "Repair request for a council house")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/housing/keyways-housing-register" }, "Housing register application"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/parking-roads-and-transport" }, "Parking, roads and transport")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/blue-badges/apply-or-renew-blue-badge" }, "Blue badge application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/buses-and-transport/older-persons-bus-pass" }, "Older person's bus pass application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/parking-roads-and-transport/report-potholes-or-highway-problem" }, "Report an issue with the highway"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/planning-and-building-control" }, "Planning and building control")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/applications-appeals-and-enforcement/comment-planning-application" }, "Comment on an application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/building-control-and-local-land-charges/request-building-control-quote" }, "Request a building control quote"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/births-deaths-and-marriages" }, "Registrations")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/births-deaths-and-marriages/register-birth" }, "Birth registrations")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/births-deaths-and-marriages/register-death" }, "Death registrations")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/births-deaths-and-marriages/notice-marriage-or-civil-partnership" }, "Notice of marriage or civil partnerships"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                React.createElement("a", { href: "/schools-and-education" }, "Schools")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/schools-and-education/free-school-meals-and-pupil-premium" }, "Free school meals application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/primary-school-places/apply-primary-school-place" }, "Primary school application")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/secondary-school-places/apply-secondary-school-place" }, "Secondary school application"))))),
+                        React.createElement("tr", null,
+                            React.createElement("td", null,
+                                "Social services for ",
+                                React.createElement("a", { href: "/adult-social-services" }, "adults"),
+                                " and ",
+                                React.createElement("a", { href: "/children-and-families" }, "children")),
+                            React.createElement("td", null,
+                                React.createElement("ul", null,
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/help-and-support-adults/get-social-care-help" }, "Get social care help for an adult"),
+                                        "\u00A0"),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/adult-social-care/report-safeguarding-concern-about-adult" }, "Report a concern about an adult")),
+                                    React.createElement("li", null,
+                                        React.createElement("a", { href: "/children-and-families/report-concern-about-child" }, "Report a concern about a child")))))))))));
+};
+
 const SignpostList = styled.ul`
 
     ${props => props.theme.fontStyles}
@@ -26750,7 +26929,7 @@ var SearchResultsList = function (_a) {
     var themeContext = useContext(ThemeContext);
     if (totalResults === 0) {
         return (React.createElement(Container$g, { "data-testid": "SearchResultsList" },
-            React.createElement(ResultInfo$2, null, "No results found")));
+            React.createElement(NoResultsMessage, null)));
     }
     else {
         return (React.createElement(Container$g, { "data-testid": "SearchResultsList" },