@cruk/cruk-react-components 4.2.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/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/package.json

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