@cruk/cruk-react-components 4.1.1 → 4.2.2

package/README.md

@@ -71,21 +71,15 @@ However this isn't as well maintained as the storybook stories and will soon be
 ## Testing
 
 Jest: Unit testing,
-Cypress: Component function, accessibility and image snapshot tests (Image snapshot test are run in headless mode only they will be skipped in interactive mode).
+Cypress: Component function, accessibility
+Chromatic: Image snapshot comparison service, this happens in CI, people are given access to this service via their Github login.
 
-Run all tests Jest and Cypress including image snapshots
-Make sure you have the docker desktop app running in the background
+Run all tests Jest and Cypress
 
 ```sh
  npm run test
 ```
 
-Update Cypress image snapshots
-
-```sh
-npm run test:update
-```
-
 Run Cypress interactive testing suite (functional and accessibility tests)
 
 ```sh
@@ -110,49 +104,19 @@ To run and update a specific snapshot headlessly
 ARGS="--spec src/components/Modal/test.cypress.tsx" npm run cypress-headless:update
 ```
 
-## Docker
-
-A docker-compose.yml file is provided to aid development/testing in a consistent environment.
-
-Install dependencies.
-
-```bash
-docker-compose run npm
-```
-
-Start local development environment
-
-```bash
-docker-compose up server
-```
-
-This should start the server and you should be able to see it running here: http://127.0.0.1:8080/
-Tests will not work locally unless this is running in a terminal
-
-Run Cypress tests
+### Maintaining
 
-```bash
-docker-compose run cypress
-```
+## Dependencies
 
-## Run Percy Test
+If you update cypress version make sure you update it in the package.json and in the in docker compose file.
 
-To run percy test locally , create an [.env](.env.example) file with PERCY_TOKEN:
+It is also advices that if you make change to storybook you try and run it before merging and if you make changes to roll up and it's plug ins you try and run
 
 ```bash
-npm run percy
-```
-
-To test specific component , go to .percy.yml and add the regex to match story to the include attribute. Example
-
-```
-#.percy.yml
-
-storybook:
-include: [UserBlock]
+npm run rollup:build-lib
 ```
 
-### Maintaining
+and see if it can successfully build the library before running the release script
 
 ## Releases
 
@@ -163,15 +127,3 @@ Run `npm i` to make sure that the correct version in the lockfile.
 Update the CHANGELOG.md which should list the changes for the release, instructions are at the bottom of the file.
 Make sure that you have the correct permissions for the @cruk on NPM
 Run the release script with `npm run release` this should make and push the tag, build the lib and release it on NPM.
-
-## Dependencies
-
-If you update cypress version make sure you update it in the package.json and in the in docker compose file.
-
-It is also advices that if you make change to storybook you try and run it before merging and if you make changes to roll up and it's plug ins you try and run
-
-```bash
-npm run rollup:build-lib
-```
-
-and see if it can successfully build the library before running the release script

package/lib/components/Carousel/Carousel.stories.d.ts

@@ -11,3 +11,4 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof Carousel>;
 export declare const Default: Story;
+export declare const WithExternalPositionState: Story;

package/lib/components/Carousel/index.d.ts

@@ -13,7 +13,12 @@ export type CarouselProps = {
 };
 /**
  *
- * Light weight carousel component that works with mouse and touch events, will work with divs and much anything you chuck in children
+ * Lightweight carousel component that works with mouse and touch events,
+ * Accepts react node array as children so will work with any html element as a child.
+ *
+ * Also works with external state that holds carousel postion,
+ * by accepting a starting position as a prop, whilst also accepting a handler
+ * with current position as a prop triggered when carousel component is interacted with.
  */
 export declare const Carousel: ({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element;
 declare const _default: React.MemoExoticComponent<({ startPosition, children, onPositionChanged, shrinkUnselectedPages, fullWidthChild, }: CarouselProps) => React.JSX.Element>;

package/lib/components/Pagination/Pagination.stories.d.ts

@@ -3,7 +3,7 @@ import { StoryObj } from "@storybook/react";
 import Pagination from ".";
 declare const _default: {
     title: string;
-    component: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, }: import(".").PaginationProps) => React.JSX.Element;
+    component: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, id, }: import(".").PaginationProps) => React.JSX.Element;
     args: {
         current: number;
         perPage: number;

package/lib/components/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 export type PaginationProps = {
     /** set current page number */
     current: number;
@@ -13,12 +13,12 @@ export type PaginationProps = {
     /** the name of the search param in the url that is modified on page click, defaults to 'page' */
     searchParam?: string;
     children?: ReactNode;
-};
+} & HTMLAttributes<HTMLElement>;
 /**
  *
  * Pagination is used when we are viewing large amounts of data.
 Data is split into multiple pages and pagination is used to
 easily navigate through these pages.
  */
-declare const Pagination: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, }: PaginationProps) => React.JSX.Element;
+declare const Pagination: ({ current, items, hideLast, pagerCallback, perPage, searchParam, children, id, }: PaginationProps) => React.JSX.Element;
 export default Pagination;

package/lib/es/src/components/Carousel/index.js

@@ -1,2 +1,2 @@
-import e,{memo as t,useState as r,useRef as n,useEffect as l}from"react";import{InView as o}from"../../../node_modules/react-intersection-observer/index.mjs.js";import i from"../Box/index.js";import{Dots as c}from"./Dots.js";import{CarouselWrapper as a,CarouselScrollArea as s,CarouselCard as u,CarouselCardInner as d}from"./styles.js";var f=function(t){var f=t.startPosition,h=void 0===f?0:f,m=t.children,v=t.onPositionChanged,g=t.shrinkUnselectedPages,E=void 0!==g&&g,p=t.fullWidthChild,C=void 0!==p&&p,x=r(h),P=x[0],j=x[1],y=r(!0),T=y[0],W=y[1],k=n(null),b=e.Children.toArray(m).filter(Boolean),B=function(e){if(k&&k.current){var t=k.current.scrollWidth,r=0===e,n=e===k.current.children.length-1,l=k.current.children[e];if(!l)return;var o=l.offsetLeft;r?k.current.scrollTo(0,0):n?k.current.scrollTo(t,0):k.current.scrollTo(o,0),T||W(!0)}};l((function(){0!==h&&W(!1)}),[h]),l((function(){!1===T&&B(h)}),[T]);var S=1===b.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(a,null,e.createElement(s,{ref:k,"aria-live":"assertive",smoothScrolling:T,tabIndex:0},b.map((function(t,r){var n=r===P;return e.createElement(u,{key:"card".concat(r),onlyChild:S,fullWidthChild:C},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&P!==(t=r)&&(j(t),v&&v(t))}},e.createElement(d,{onlyChild:S,isSelected:n,shrinkUnselectedPages:E,fullWidthChild:C},t)))}))))),b.length>1?e.createElement(i,null,e.createElement(c,{count:b.length,currentPosition:P,scrollToPosition:B,next:function(){B(P+1)},previous:function(){B(P-1)}})):null)},h=t(f);export{f as Carousel,h as default};
+import e,{memo as t,useState as r,useRef as n,useEffect as l}from"react";import{InView as o}from"../../../node_modules/react-intersection-observer/index.mjs.js";import i from"../Box/index.js";import{Dots as c}from"./Dots.js";import{CarouselWrapper as u,CarouselScrollArea as s,CarouselCard as a,CarouselCardInner as d}from"./styles.js";var f=function(t){var f=t.startPosition,m=t.children,h=t.onPositionChanged,v=t.shrinkUnselectedPages,g=void 0!==v&&v,E=t.fullWidthChild,p=void 0!==E&&E,C=e.useRef(),x=void 0!==f,P=r(f||0),T=P[0],j=P[1],y=r(!x),W=y[0],k=y[1],b=n(null),B=e.Children.toArray(m).filter(Boolean),S=function(e){if(b&&b.current){var t=b.current.scrollWidth,r=0===e,n=e===b.current.children.length-1,l=b.current.children[e];if(!l)return;var o=l.offsetLeft;r?b.current.scrollTo(0,0):n?b.current.scrollTo(t,0):b.current.scrollTo(o,0),W||k(!0)}};l((function(){x&&k(!1)}),[f]),l((function(){W||S(f||0)}),[W]);var U=1===B.length;return e.createElement(e.Fragment,null,e.createElement(i,null,e.createElement(u,null,e.createElement(s,{ref:b,"aria-live":"assertive",smoothScrolling:W,tabIndex:0},B.map((function(t,r){var n=r===T,l="card-".concat(r);return e.createElement(a,{key:l,onlyChild:U,fullWidthChild:p},e.createElement(o,{threshold:.5,as:"div",onChange:function(e){var t;e&&T!==(t=r)&&(j(t),C&&clearTimeout(null==C?void 0:C.current),C.current=setTimeout((function(){h&&W&&h(t)}),500))}},e.createElement(d,{onlyChild:U,isSelected:n,shrinkUnselectedPages:g,fullWidthChild:p},t)))}))))),B.length>1?e.createElement(i,null,e.createElement(c,{count:B.length,currentPosition:T,scrollToPosition:S,next:function(){S(T+1)},previous:function(){S(T-1)}})):null)},m=t(f);export{f as Carousel,m as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Collapse/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../_virtual/_tslib.js";import t,{useState as n,useRef as r,useEffect as a}from"react";import{useTheme as o}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js";import l from"../../themes/cruk.js";import{CustomHeader as c,DefaultHeader as d,FlippingIcon as m,CollapseContent as u,transitionDurationSeconds as s}from"./styles.js";var p=function(p){var h=p.id,f=p.headerTitleText,x=p.headerTitleTextColor,v=p.headerTitleTextSize,y=p.headerTitleTextFontFamily,T=p.headerComponent,b=p.startOpen,k=p.onOpenChange,C=p.children,E=n(b||!1),g=E[0],j=E[1],F=n(b?"initial":"0"),S=F[0],_=F[1],w=r(null),z=r(null),D=o(),H=e(e({},l),D),I=function(){var e=w.current;(null==z?void 0:z.current)&&clearTimeout(null==z?void 0:z.current);var t=!g;j(t),null!==e&&_("".concat(e.scrollHeight,"px")),!1===t?setTimeout((function(){return _("0")}),10):z.current=setTimeout((function(){return _("initial")}),1e3*s),void 0!==k&&k(t)};return a((function(){j(b||!1),_(b?"initial":"0")}),[b]),t.createElement("div",null,T?t.createElement(c,{theme:H,"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:I,"aria-disabled":!1,"aria-label":f,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),I())},role:"button",tabIndex:0},T):t.createElement(d,{"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:I,theme:H,appearance:"tertiary",type:"button",textColor:x,textSize:v,textFontFamily:y},f,t.createElement(m,{faIcon:i,open:g})),t.createElement(u,{theme:H,id:"".concat(h,"-content"),ref:w,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(h,"-header"),contentHeight:S,openStatus:g},C))};export{p as default};
+import{__assign as e}from"../../../_virtual/_tslib.js";import t,{useState as r,useRef as n,useEffect as a}from"react";import{useTheme as o}from"styled-components";import{faChevronDown as i}from"../../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js";import l from"../../themes/cruk.js";import{CustomHeader as c,DefaultHeader as d,FlippingIcon as m,CollapseContent as u,transitionDurationSeconds as s}from"./styles.js";var p=function(p){var h=p.id,f=p.headerTitleText,x=p.headerTitleTextColor,v=p.headerTitleTextSize,y=p.headerTitleTextFontFamily,T=p.headerComponent,b=p.startOpen,k=p.onOpenChange,C=p.children,E=r(b||!1),g=E[0],j=E[1],F=r(b?"initial":"0"),S=F[0],_=F[1],w=n(null),z=n(null),D=o(),H=e(e({},l),D),I=function(){var e=w.current;(null==z?void 0:z.current)&&clearTimeout(null==z?void 0:z.current);var t=!g;j(t),null!==e&&_("".concat(e.scrollHeight,"px")),!1===t?setTimeout((function(){return _("0")}),10):z.current=setTimeout((function(){return _("initial")}),1e3*s),void 0!==k&&k(t)};return a((function(){j(b||!1),_(b?"initial":"0")}),[b]),t.createElement("div",{id:h},T?t.createElement(c,{theme:H,"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:I,"aria-disabled":!1,"aria-label":f,onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key&&"Spacebar"!==e.key||(e.preventDefault(),I())},role:"button",tabIndex:0},T):t.createElement(d,{"aria-controls":"".concat(h,"-header"),"aria-expanded":g,id:"".concat(h,"-header"),onClick:I,theme:H,appearance:"tertiary",type:"button",textColor:x,textSize:v,textFontFamily:y},f,t.createElement(m,{faIcon:i,open:g})),t.createElement(u,{theme:H,id:"".concat(h,"-content"),ref:w,role:"region","aria-hidden":!g,"aria-labelledby":"".concat(h,"-header"),contentHeight:S,openStatus:g},C))};export{p as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Footer/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import l from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as c,StyledRegulatorLogo as i,FooterSectionLinks as s,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as x}from"./styles.js";var g=function(g){var S=g.children,y=g.middleSection,h=t.Children.toArray(S),z=n(),C=e(e({},l),z);return t.createElement(r,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(c,null,t.createElement(i,{alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(s,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,h.length?h.map((function(e,n){return t.createElement(u,{key:"footerLink".concat(n)},e)})):null))),t.createElement(p,null,y?"string"==typeof y?t.createElement(o,{textSize:"s"},y):t.createElement(t.Fragment,null,y):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(x,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))};export{g as Footer,g as default};
+import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as n,ThemeProvider as r}from"styled-components";import l from"../../themes/cruk.js";import{Text as o}from"../Text/index.js";import{StyledFooter as a,FooterContentWrapper as m,FooterSectionLogo as i,StyledRegulatorLogo as c,FooterSectionLinks as s,StyledNav as E,StyledUL as f,StyledLI as u,FooterSection as p,FooterSectionAddress as d,StyledAddress as g}from"./styles.js";var x=function(x){var h=x.children,S=x.middleSection,y=t.Children.toArray(h),z=n(),C=e(e({},l),z);return t.createElement(r,{theme:C},t.createElement(a,null,t.createElement(m,null,t.createElement(i,null,t.createElement(c,{width:130,height:40,alt:C.siteConfig.footerLogoAlt||"",src:C.siteConfig.footerLogoSrc||""})),t.createElement(s,null,t.createElement(E,{"aria-label":"footer links"},t.createElement(f,null,y.length?y.map((function(e,n){return t.createElement(u,{key:"footerLink".concat(n)},e)})):null))),t.createElement(p,null,S?"string"==typeof S?t.createElement(o,{textSize:"s"},S):t.createElement(t.Fragment,null,S):t.createElement(o,{textSize:"s"},C.siteConfig.footerCopyText)),t.createElement(d,null,t.createElement(g,null,t.createElement(o,{as:"span",textSize:"s"},"2 Redman Place"),t.createElement(o,{as:"span",textSize:"s"},"London"),t.createElement(o,{as:"span",textSize:"s"},"E20 1JQ"))))))};export{x as Footer,x as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Header/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../_virtual/_tslib.js";import t,{useState as l}from"react";import{useTheme as o,ThemeProvider as n}from"styled-components";import r from"../../hooks/useScrollPosition.js";import i from"../../themes/cruk.js";import{StyledHeader as m,HeaderStickyPlaceHolder as a,HeaderStickyContainer as c,SkipToMain as s,HeaderMainContent as u,StyledLink as f,LogoWrapper as g,Logo as E,Tagline as S,ChildWrapper as d,ChildInner as k}from"./styles.js";var p=function(p){var y=p.isSticky,h=p.siteSlogan,j=p.logoAltText,v=p.logoImageSrc,C=p.logoLinkTitle,w=p.logoLinkUrl,x=p.fullWidth,A=p.children,L=l(!1),P=L[0],T=L[1],U="undefined"!=typeof window,W=o(),_=e(e({},i),W);return r((function(e){var t=e.currPos,l=!!U&&t.y>240;l!==P&&T(l)}),[P],null,!0,50),t.createElement(n,{theme:_},t.createElement(m,null,t.createElement(a,null,t.createElement(c,{"data-cy":"header-sticky-container",isSmall:P,isSticky:y},t.createElement(s,{href:"#main"},"Skip to main content"),t.createElement(u,{fullWidth:x},t.createElement(f,{href:null!=w?w:_.siteConfig.logoUrl,title:null!=C?C:"Home"},t.createElement(g,{isSmall:P,isSticky:y},t.createElement(E,{src:null!=v?v:_.siteConfig.logoSrc,alt:null!=j?j:_.siteConfig.logoAlt}))),h?t.createElement(S,{isSmall:P,isSticky:y},h):null,t.createElement(d,null,t.createElement(k,null,A)))))))};export{p as Header,p as default};
+import{__assign as e}from"../../../_virtual/_tslib.js";import t,{useState as l}from"react";import{useTheme as o,ThemeProvider as n}from"styled-components";import r from"../../hooks/useScrollPosition.js";import i from"../../themes/cruk.js";import{StyledHeader as m,HeaderStickyPlaceHolder as a,HeaderStickyContainer as c,SkipToMain as s,HeaderMainContent as u,StyledLink as f,LogoWrapper as g,Logo as E,Tagline as S,ChildWrapper as h,ChildInner as d}from"./styles.js";var k=function(k){var p=k.isSticky,y=k.siteSlogan,j=k.logoAltText,v=k.logoImageSrc,C=k.logoLinkTitle,w=k.logoLinkUrl,x=k.fullWidth,A=k.children,L=l(!1),P=L[0],T=L[1],U="undefined"!=typeof window,W=o(),_=e(e({},i),W);return r((function(e){var t=e.currPos,l=!!U&&t.y>240;l!==P&&T(l)}),[P],null,!0,50),t.createElement(n,{theme:_},t.createElement(m,null,t.createElement(a,null,t.createElement(c,{"data-cy":"header-sticky-container",isSmall:P,isSticky:p},t.createElement(s,{href:"#main"},"Skip to main content"),t.createElement(u,{fullWidth:x},t.createElement(f,{href:null!=w?w:_.siteConfig.logoUrl,title:null!=C?C:"Home"},t.createElement(g,{isSmall:P,isSticky:p},t.createElement(E,{height:80,src:null!=v?v:_.siteConfig.logoSrc,alt:null!=j?j:_.siteConfig.logoAlt}))),y?t.createElement(S,{isSmall:P,isSticky:p},y):null,t.createElement(h,null,t.createElement(d,null,A)))))))};export{k as Header,k as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Pagination/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import n from"../../themes/cruk.js";import{PagerWrapper as r,PagerList as l,PagerItem as o,PagerLink as i}from"./styles.js";var m=function(m){var s=m.current,d=m.items,u=m.hideLast,f=m.pagerCallback,p=m.perPage,E=m.searchParam,v=void 0===E?"page":E,h=m.children,b=a(),k=e(e({},n),b),y=p>0?p:1,x=Math.ceil(d/y)||1,g=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(v?"".concat(v,"=").concat(e):""),onClick:function(t){t.preventDefault(),f(e)}}};return t.createElement(c,{theme:k},d>p&&t.createElement(r,null,t.createElement(l,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({name:"Prev",disabled:1===s,"aria-disabled":1===s},1===s&&{tabIndex:-1},1!==s&&g(s-1)),"Prev")),function(a,c){for(var n=[],r=[],l=1;l<=c;l+=1)n.push(t.createElement(o,{key:l},t.createElement(i,e({active:l===a},g(l),{"aria-label":"page ".concat(l," of ").concat(c)}),l)));var m=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),s=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return r=n.slice(0,c),c>7&&(r=a<=4?u?n.slice(0,7):n.slice(0,5).concat(s):a>c-4?m.concat(n.slice(-5)):u?m.concat(n.slice(a-3,a+2)):m.concat(n.slice(a-2,a+1)).concat(s)),r}(s,x),t.createElement(o,{key:"Next"},t.createElement(i,e({name:"Next",disabled:s===x,"aria-disabled":s===x},s===x&&{tabIndex:-1},s!==x&&g(s+1)),"Next"))),h))};export{m as default};
+import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as a,ThemeProvider as c}from"styled-components";import n from"../../themes/cruk.js";import{PagerWrapper as r,PagerList as l,PagerItem as o,PagerLink as i}from"./styles.js";var m=function(m){var s=m.current,d=m.items,u=m.hideLast,p=m.pagerCallback,f=m.perPage,v=m.searchParam,E=void 0===v?"page":v,h=m.children,b=m.id,k=a(),y=e(e({},n),k),x=f>0?f:1,g=Math.ceil(d/x)||1,P=function(e){return{href:"".concat("undefined"!=typeof window?window.location.pathname:"","?").concat(E?"".concat(E,"=").concat(e):""),onClick:function(t){t.preventDefault(),p(e)}}};return t.createElement(c,{theme:y},d>f&&t.createElement(r,null,t.createElement(l,null,t.createElement(o,{key:"Prev"},t.createElement(i,e({"data-cta":b?"".concat(b,"-prev"):null,name:"Prev",disabled:1===s,"aria-disabled":1===s},1===s&&{tabIndex:-1},1!==s&&P(s-1)),"Prev")),function(a,c){for(var n=[],r=[],l=1;l<=c;l+=1)n.push(t.createElement(o,{key:l},t.createElement(i,e({"data-cta":b?"".concat(b,"-").concat(l):null,active:l===a},P(l),{"aria-label":"page ".concat(l," of ").concat(c)}),l)));var m=n.slice(0,1).concat(t.createElement(o,{key:"first"},t.createElement("span",null,"..."))),s=n.slice(n.length-1).concat(t.createElement(o,{key:"last"},t.createElement("span",null,"..."))).reverse();return r=n.slice(0,c),c>7&&(r=a<=4?u?n.slice(0,7):n.slice(0,5).concat(s):a>c-4?m.concat(n.slice(-5)):u?m.concat(n.slice(a-3,a+2)):m.concat(n.slice(a-2,a+1)).concat(s)),r}(s,g),t.createElement(o,{key:"Next"},t.createElement(i,e({"data-cta":b?"".concat(b,"-next"):null,name:"Next",disabled:s===g,"aria-disabled":s===g},s===g&&{tabIndex:-1},s!==g&&P(s+1)),"Next"))),h))};export{m as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Totaliser/index.js

@@ -1,2 +1,2 @@
-import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as r}from"styled-components";import{formatMoneyWithCommas as n,calculatePercentRounded as m}from"../../utils/Helper.js";import a from"../../themes/cruk.js";import{Text as l}from"../Text/index.js";import o from"../Badge/index.js";import i from"../Box/index.js";import{TotaliserWrapper as c,CompactWrapper as s,Summary as p,BubbleWrapper as u,BubbleText as d,Total as E,GiftAid as f,ProgressBarWrapper as g,StyledProgressBar as h}from"./styles.js";var x=function(x){var j=x.total,v=x.additionalAmount,y=x.giftAid,A=x.target,B=void 0===A?null:A,C=x.isCompact,H=x.summaryMessage,T=void 0===H?void 0:H,_=x.children,b=r(),k=e(e({},a),b),z=m(+j,B||0),G=m(v?+j+(v||0):0,B||0),M="".concat(z,"% of the £").concat(n(B||0)," target");return t.createElement(c,{isCompact:C||!1,theme:k},C?t.createElement(s,{theme:k},t.createElement(i,{marginHorizontal:"none",marginRight:"xxs",marginBottom:"none"},t.createElement(o,null,"£".concat(n(j)))),null!==B&&t.createElement(p,null,t.createElement(l,{as:"span"},M))):t.createElement(u,{theme:k},t.createElement(d,null,"Total raised"),t.createElement(E,null,"£",n(j)),t.createElement(f,null,"+ £",n(y||0)," Gift Aid")),(!!B||!!T)&&t.createElement(g,{isCompact:C||!1,theme:k},t.createElement(h,{theme:k,percentage:z,secondaryPercentage:G}),!C&&(T?t.createElement(p,null,T):t.createElement(p,null,t.createElement(l,{as:"span"},M)))),_)};export{x as default};
+import{__assign as e}from"../../../_virtual/_tslib.js";import t from"react";import{useTheme as r}from"styled-components";import{formatMoneyWithCommas as n,calculatePercentRounded as m}from"../../utils/Helper.js";import a from"../../themes/cruk.js";import{Text as l}from"../Text/index.js";import o from"../Badge/index.js";import i from"../Box/index.js";import{TotaliserWrapper as c,BubbleWrapper as s,BubbleText as p,Total as u,GiftAid as d,ProgressBarWrapper as E,StyledProgressBar as f,Summary as g,CompactWrapper as h}from"./styles.js";var x=function(x){var j=x.total,v=x.additionalAmount,y=x.giftAid,A=x.target,B=void 0===A?null:A,C=x.isCompact,H=x.summaryMessage,T=void 0===H?void 0:H,_=x.children,b=r(),k=e(e({},a),b),z=m(+j,B||0),F=m(v?+j+(v||0):0,B||0),G="".concat(z,"% of the £").concat(n(B||0)," target");return t.createElement(c,{isCompact:C||!1,theme:k},C?t.createElement(i,{marginHorizontal:"none",marginRight:"xxs",marginBottom:"none"},t.createElement(o,null,"£".concat(n(j)))):t.createElement(s,{theme:k},t.createElement(p,null,"Total raised"),t.createElement(u,null,"£",n(j)),t.createElement(d,null,"+ £",n(y||0)," Gift Aid")),(!!B||!!T)&&t.createElement(t.Fragment,null,t.createElement(E,{isCompact:C||!1,theme:k},t.createElement(f,{theme:k,percentage:z,secondaryPercentage:F}),C?t.createElement(h,{theme:k},null!==B&&t.createElement(g,null,t.createElement(l,{as:"span"},G))):T?t.createElement(g,null,T):t.createElement(g,null,t.createElement(l,{as:"span"},G)))),_)};export{x as default};
 //# sourceMappingURL=index.js.map

package/lib/es/src/components/Totaliser/styles.js

@@ -1,2 +1,2 @@
-import{__makeTemplateObject as n}from"../../../_virtual/_tslib.js";import t,{css as o}from"styled-components";import r from"../ProgressBar/index.js";var e,i,a,l,p,f,m,s,c,u,d,g=t.div(e||(e=n(["\n  text-align: center;\n  background-color: ",";\n  border-radius: 3.2rem;\n  padding: 5px;\n  position: relative;\n  p {\n    margin: 0;\n  }\n"],["\n  text-align: center;\n  background-color: ",";\n  border-radius: 3.2rem;\n  padding: 5px;\n  position: relative;\n  p {\n    margin: 0;\n  }\n"])),(function(n){return n.theme.colors.totaliserBubbleColor})),y=t.div(a||(a=n(["\n  padding: 0 46px 12px;\n  margin-top: ",";\n  position: relative;\n\n  ",";\n"],["\n  padding: 0 46px 12px;\n  margin-top: ",";\n  position: relative;\n\n  ",";\n"])),(function(n){return n.theme.spacing.s}),(function(t){return!0!=!!t.isCompact&&o(i||(i=n(['\n      div > div > div:not(:first-child) {\n        &:after {\n          content: "\\25bc";\n          color: ',";\n          position: absolute;\n          top: -30px;\n          right: -15px;\n          font-size: 32px;\n        }\n      }\n    "],['\n      div > div > div:not(:first-child) {\n        &:after {\n          content: "\\\\25bc";\n          color: ',";\n          position: absolute;\n          top: -30px;\n          right: -15px;\n          font-size: 32px;\n        }\n      }\n    "])),(function(n){return n.theme.colors.totaliserBubbleColor}))})),h=t.p(l||(l=n(["\n  color: ",";\n  font-size: 2.625rem;\n  line-height: 3rem;\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-size: 2.625rem;\n  line-height: 3rem;\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTotalColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),x=t.p(p||(p=n(["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTextColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),b=t.p(f||(f=n(["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTotalColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),v=t.span(m||(m=n(["\n  display: block;\n  text-align: right;\n  margin-top: 12px;\n  margin-bottom: 0;\n  font-family: ",";\n"],["\n  display: block;\n  text-align: right;\n  margin-top: 12px;\n  margin-bottom: 0;\n  font-family: ",";\n"])),(function(n){return n.theme.typography.fontFamilyBase})),T=t.div(c||(c=n(["\n  font-family: ",";\n  margin: 0;\n  ","\n"],["\n  font-family: ",";\n  margin: 0;\n  ","\n"])),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(t){return t.isCompact&&o(s||(s=n(["\n      "," {\n        border: none;\n        padding: 0;\n      }\n    "],["\n      "," {\n        border: none;\n        padding: 0;\n      }\n    "])),y)})),B=t.div(u||(u=n(["\n  justify-content: space-between;\n  display: flex;\n"],["\n  justify-content: space-between;\n  display: flex;\n"]))),C=t(r)(d||(d=n([""],[""])));export{x as BubbleText,g as BubbleWrapper,B as CompactWrapper,b as GiftAid,y as ProgressBarWrapper,C as StyledProgressBar,v as Summary,h as Total,T as TotaliserWrapper};
+import{__makeTemplateObject as n}from"../../../_virtual/_tslib.js";import t,{css as o}from"styled-components";import r from"../ProgressBar/index.js";var e,i,a,l,f,p,m,s,c,d,u,g=t.div(e||(e=n(["\n  text-align: center;\n  background-color: ",";\n  border-radius: 3.2rem;\n  padding: 5px;\n  position: relative;\n  p {\n    margin: 0;\n  }\n"],["\n  text-align: center;\n  background-color: ",";\n  border-radius: 3.2rem;\n  padding: 5px;\n  position: relative;\n  p {\n    margin: 0;\n  }\n"])),(function(n){return n.theme.colors.totaliserBubbleColor})),y=t.div(a||(a=n(["\n  padding: 0 46px 12px;\n  margin-top: ",";\n  position: relative;\n\n  ",";\n"],["\n  padding: 0 46px 12px;\n  margin-top: ",";\n  position: relative;\n\n  ",";\n"])),(function(n){return n.theme.spacing.s}),(function(t){return!0!=!!t.isCompact&&o(i||(i=n(['\n      div > div > div:not(:first-child) {\n        &:after {\n          content: "\\25bc";\n          color: ',";\n          position: absolute;\n          top: -30px;\n          right: -15px;\n          font-size: 32px;\n        }\n      }\n    "],['\n      div > div > div:not(:first-child) {\n        &:after {\n          content: "\\\\25bc";\n          color: ',";\n          position: absolute;\n          top: -30px;\n          right: -15px;\n          font-size: 32px;\n        }\n      }\n    "])),(function(n){return n.theme.colors.totaliserBubbleColor}))})),h=t.p(l||(l=n(["\n  color: ",";\n  font-size: 2.625rem;\n  line-height: 3rem;\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-size: 2.625rem;\n  line-height: 3rem;\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTotalColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),x=t.p(f||(f=n(["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTextColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),b=t.p(p||(p=n(["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"],["\n  color: ",";\n  font-family: ",";\n  text-transform: ",";\n"])),(function(n){return n.theme.colors.totaliserBubbleTotalColor}),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(n){return n.theme.typography.headerTextTransform})),v=t.span(m||(m=n(["\n  display: block;\n  text-align: right;\n  margin-top: 12px;\n  margin-bottom: 0;\n  font-family: ",";\n"],["\n  display: block;\n  text-align: right;\n  margin-top: 12px;\n  margin-bottom: 0;\n  font-family: ",";\n"])),(function(n){return n.theme.typography.fontFamilyBase})),T=t.div(c||(c=n(["\n  font-family: ",";\n  margin: 0;\n  ","\n"],["\n  font-family: ",";\n  margin: 0;\n  ","\n"])),(function(n){return n.theme.typography.fontFamilyHeadings}),(function(t){return t.isCompact&&o(s||(s=n(["\n      "," {\n        border: none;\n        padding: 0;\n      }\n    "],["\n      "," {\n        border: none;\n        padding: 0;\n      }\n    "])),y)})),B=t.div(d||(d=n(["\n  justify-content: flex-end;\n  display: flex;\n"],["\n  justify-content: flex-end;\n  display: flex;\n"]))),C=t(r)(u||(u=n([""],[""])));export{x as BubbleText,g as BubbleWrapper,B as CompactWrapper,b as GiftAid,y as ProgressBarWrapper,C as StyledProgressBar,v as Summary,h as Total,T as TotaliserWrapper};
 //# sourceMappingURL=styles.js.map

package/lib/es/src/themes/rfl.js

@@ -1,2 +1,2 @@
-import{__assign as t}from"../../_virtual/_tslib.js";import a from"./cruk.js";var o=t({},a.utilities),s=t(t({},a.siteConfig),{logoSrc:"https://rcl.assets.cancerresearchuk.org/images/logos/rfl-sl.svg"}),e=t(t({},a.avatar),{path:"".concat(s.assetPath,"images/avatar/rfl/")}),r=t({},a.button),i=t({},a.breakpoint),n=t({},a.tokenColors),l=t(t({},a.colors),{textHeaderDefault:n.navy_600,headerTaglineText:n.navy_600}),g=t({},a.spacing),p=t({},a.shadows),c=t({},a.fontSizes),f=t(t({},a.typography),{fontWeightHeadings:600}),h={name:"rfl",avatar:e,breakpoint:i,button:r,tokenColors:n,colors:l,spacing:g,fontSizes:c,siteConfig:s,typography:f,shadows:p,utilities:o};export{e as AVATAR,i as BREAKPOINT,r as BUTTON,l as COLORS,c as FONT_SIZES,p as SHADOWS,s as SITE_CONFIG,g as SPACING,n as TOKEN_COLORS,f as TYPOGRAPHY,o as UTILITIES,h as default};
+import{__assign as a}from"../../_virtual/_tslib.js";import t from"./cruk.js";var o=a({},t.utilities),r=a(a({},t.siteConfig),{logoSrc:"https://rcl.assets.cancerresearchuk.org/images/logos/rfl-sl.svg"}),s=a(a({},t.avatar),{path:"".concat(r.assetPath,"images/avatar/rfl/")}),e=a({},t.button),i=a({},t.breakpoint),n=a({},t.tokenColors),g=a(a({},t.colors),{textHeaderDefault:n.navy_600,headerTaglineText:n.navy_600,progressBar:n.magenta_700,progressBarSecondary:n.navy_600}),l=a({},t.spacing),p=a({},t.shadows),c=a({},t.fontSizes),f=a(a({},t.typography),{fontWeightHeadings:600}),h={name:"rfl",avatar:s,breakpoint:i,button:e,tokenColors:n,colors:g,spacing:l,fontSizes:c,siteConfig:r,typography:f,shadows:p,utilities:o};export{s as AVATAR,i as BREAKPOINT,e as BUTTON,g as COLORS,c as FONT_SIZES,p as SHADOWS,r as SITE_CONFIG,l as SPACING,n as TOKEN_COLORS,f as TYPOGRAPHY,o as UTILITIES,h as default};
 //# sourceMappingURL=rfl.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruk/cruk-react-components",
-  "version": "4.1.1",
+  "version": "4.2.2",
   "description": "React components implementing CRUK, SU2C & Bowelbabe designs",
   "license": "MIT",
   "publishConfig": {