From 9110b403f82624e053e6470d4183b0fa563d52bd Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Fri, 4 Dec 2020 11:27:27 -0600 Subject: [PATCH 1/7] fix: fix types for button test, move opinionated button styles to default theme --- ...shows inner text without a provider #0.png | Bin 1266 -> 0 bytes ...ton renders with a theme provider #0.png | Bin 1487 -> 0 bytes ...renders with default theme provider #0.png | Bin 0 -> 1346 bytes ...ton renders without default theme #0.png | Bin 0 -> 1179 bytes .../Themed Button (Click) #0.png | Bin 0 -> 1346 bytes .../{button.spec.tsx => button.spec.js} | 24 +- cypress/tsconfig.json | 15 +- package.json | 5 +- src/Button/index.tsx | 17 -- src/index.tsx | 2 +- src/theme.ts | 22 +- src/types.tsx | 272 ++++++++++++++++++ src/utils.ts | 26 ++ types/index.d.ts | 14 +- 14 files changed, 368 insertions(+), 29 deletions(-) delete mode 100644 cypress/components/__image_snapshots__/Button renders and shows inner text without a provider #0.png delete mode 100644 cypress/components/__image_snapshots__/Button renders with a theme provider #0.png create mode 100644 cypress/components/__image_snapshots__/Button renders with default theme provider #0.png create mode 100644 cypress/components/__image_snapshots__/Button renders without default theme #0.png create mode 100644 cypress/components/__image_snapshots__/Themed Button (Click) #0.png rename cypress/components/{button.spec.tsx => button.spec.js} (65%) create mode 100644 src/types.tsx diff --git a/cypress/components/__image_snapshots__/Button renders and shows inner text without a provider #0.png b/cypress/components/__image_snapshots__/Button renders and shows inner text without a provider #0.png deleted file mode 100644 index 4b20f28219d86d7e5d05a6925df2b39703ecf3e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1266 zcmVO1C+Vph%{Pg_a3|YH&?fOkybGdu(J_yj&Wu>jXgUYHK zoGrdcdF6F7(o&ISnSm%Oxx}i^Hjw;6A|_KPO_pX>uKpam-9hsBM4lHNy^@mR$ldk@ zUQVZrjazcbKU2cFi>1uSOlKgvyC2bHX`#pIM58Efnp@hj+Uz_}I{G2Y66tBFoIG8G z&1OeaSbUM{2emAkKO2L=A5HaxT27oi%k1pwSejcob*2Qj+s!YBk5f}y&#l|{usa-- zUj382L&umqD+^hcsJeEO6ZwVIH#8Au8pe#wbW$cIBM1UktBnH(k1};i3bl0&l$BTE z@pzb=GLe~C83=-aj(+s?I4L-L4nIFV3Grq$mrE-+f3cL=*_jv&{%Gpz8`+x+ufu2z#^HF#>NOkL`(qyIX{mTAZV%t?*g#T3EG@0=EPQtvXNxW{Cwn>~y$t^T zj5Uv8ta&uC<}t*_#-P{B96Wr2^Os6_UT)pFM`Ken3+82GGzOyy2rw{jRu+zj52?Oi zi&sWkDv9x9(S(^oi5VS5m(_+wN3YSNBl+}`<@9yuZZ#k0tYhbQ`afo6EP2|*C>@;CV7ushI*JVkWWD9ka@bamOV+Z{ZK z&E{Y*BuR(H=~C#+YPF*%ZbCzicnujcg#L&;MN4ZNx9?UH7#Ki6fB{L;;c~gK+3aW( zMd3!|o1VI$>3J5TuCQ@a==g^~lcj|{Km3fBF(in% zSThUXn8mcz6f~Kyrg6Enf`Y>H6cnDv7!u5)1#`$d^c!Aru`!Go9?t%}Bk29~ELr>} zG?OO(}mS)BPe(%vLxa0sB~GaNRmWgfB}ui{tXAlw+L`X;w{gGt}lPMH0Q4}zS1k;x&ibReYN#v-JJPQ#YCE}w*e3Xcf c67f-g14ppd;hY&(asU7T07*qoM6N<$f~HtmaR2}S diff --git a/cypress/components/__image_snapshots__/Button renders with a theme provider #0.png b/cypress/components/__image_snapshots__/Button renders with a theme provider #0.png deleted file mode 100644 index 59a7cc6fc2ac8d03231c1d804774b91e2a62118b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1487 zcmV;=1u*)FP)Z%Y@N^B~Nrc*PdXJ)CZt-`B$P!!2( zWm!-t=%g>ra&BaT)}|;fmx|0}b6lL6rK7EpO1~FHk*sDyfZOe&t|mex6kuX9iA`R- zI7_rPf|L@+2ZcjxC>D$4^95u!w}4mEa4gU3^^naiAa%n)Q6!G#DT;!w8%P`_kvK{s zag;>jD2c>T5{aWE5=Ti?%AiotxiC7;-^bo> z-_EwJTljBg=jJ&)FvRA*4Ro}(5Km0=!r)PMZ2ufJHC24vRLVq3$=!SRaO3qGF)fos zBE@4*KFt%qeuis%x~Y%W@}JDj&GY*|4p3KHO-FkR$>|jPpF7B=zV+19RPk|BDH9=} z((fY}T!Sqf3iA2wH}S~hzac$yi9lct1A|BDUALC5&Ngi4&R^i|6DRr14VxHz`8b(O zj$^OBf$hXQr!aJbKMf4w)jYJdHZwXFWANo;B$6qb8l&vEc`K1{5ZmBO$EdE3P$=m9 z?X44Nnul#$x6snuKsl(a0L!wNiYGb#+M9$!K^p4on4iz^?DL1vG!I>!ZP?yBJIsMU zyuh_R-NYv27=}SSG0o&;oQYT*qgZ5OGS1w5mUmD8lkeYiKhbC{o$W0Q3?Ak1zz~oB z{KwQsYdQ4d5MyI8R8`@c?k-NAI>V8ng z9aUAi>&~we46GrZnC9OJ1_RvIzl*m|oMiWxZsDfS-oX0a9^QHPAMCmPD_q^x!4K|x zkfx@39{I@+@%w$mCgXhLyZ7?!^M|d|BcKm)Hw)$u- z?XAs>j>RYxbZk9qucE239$Qmm6wTuyo6AuSDrF+2;OedpHur5{$&J@dU zosRZaK1|njN|DXx$mjEff&ng96$ufWjANQ6HjldkAp|xlB?v*eNLG+;7%VL0u?ZoN zQj*UXSTZs?PAMw=el$&E5VyO6m8McArfG5N%=@S=70a?nr)M}a z^cwS-EL%Rk3BS)vBogA)zx(=q!*{uJ+@nK*~UYUKE>|-Z{hQK+1$5*(`VjC2ndIQT+{ste)r6CD2im~7jLGe zxq$~C{uLgNo7?(#F%?hp&AsQ4~zmBA!SxJ2y{beH}iZmz9>7 zPJ?Bka)r6w6*M+PS&o#FK%kN(s;UqORI)@$LA0)hXk86gn#55OiK8SEM@b}(l1LmS zkvK{sag;==s)At@aV*a;im0lJ)I4r7*&L4LWwSXnj~f{Y2Z$$9n5K#2gHq{BD2l}6 zsX+RDUc#XO=Z43bo6k}#nyhA)Ws%S8OeLmCr)O!buSE!f%A%@B5U=Lp;>;|usU*5? puv!Tr&@?xdJ}>R9jYui5{R;#;^kMYh!cYJJ002ovPDHLkV1kyB-b4TZ diff --git a/cypress/components/__image_snapshots__/Button renders with default theme provider #0.png b/cypress/components/__image_snapshots__/Button renders with default theme provider #0.png new file mode 100644 index 0000000000000000000000000000000000000000..a7674ba69df56e9fe53d235e57ce7245c0dc6862 GIT binary patch literal 1346 zcmV-I1-<%-P)1f_0D$55`+yfQ6P#Uq6kx53# z(otHPg4bI>dRiL)2MQ^0@!};Oeyo(v%$fZ-Gp0|$jEaq08BiD?81P}J*tnGeg#m&A zAOAIl6nbglGfbLzFS@32J`!cw>#KNoZ8@Vx+)2;dZsFgoE89rvtZ4)TJ`C&1Hc~ok z8o_{%|C&My2`P|5K$kA$x?S8oW&~gFJ4h^^z%cLm#oT{iF-4<>VK{p1S5~fC$I3UB zuw>~9RJD~2o2qDQYv;(%M^V*QHf*Y*t*xEMr%tBvT$mMat>xSAe!%IlGq$9NnNL1S zMn*dOzWI(%cYQ(em=Tm$d_=gZnc>3*v+%j6NlR0>T9OoMYz$LfQ%C4jE&C6A&)WAZ z$j|c-^!qRzICzL~QwvG4c!Hk}|3Z6vJ4GXhVhH$s1pGdVMh?Xg@cRh(eO$V9iRn+x zr@E$&MK8`}%0myZ{)5fDvEm&J&CTceeD8jiEL}nIT_fq;t0!BkcJlGgJ*0v{3YC>t zQdV9`M-NRJ&*jS+QcC{GxO<9tZTV^j6#5x7Fo@x`<*OM`=x5NtAUk(`&e_H=l@)8~ z-Rm|CLI~bmwT@>>pCD=VTgxa6_Gjvp2buiHEKY`MNCkxyDxEcr`^FVxh(w}%d+-o% zuUSvP?_+GqXs*V|Pz^R)7PsGiD@nnC55ws*^&|!TK9YL$=*Ic;5mG@Rg>rJT$?}sNYXBA7^ILSNhwK^LXawwYe>^H z>gyYDIvp5nwk*^{D@oNgb(rPtnoo7jZ$zRol8&7?iJ@yj9@m;e3LQUwlD%IY!0>y0 z10QbQ#@WU&CB-8#^z-#*+m7A%{e5X`Yh&&E8|WxABZE+=mPjN@PEIzN85x8^wL~IO zMvof8n)g1Sth|!hGp2Gb+(hM;PZ&OQFdmPaYfT}Aw(r=(_8ogj3I=@4pF5LbL+-#Z zWBL^4%zK5>xi8~(-NfXH_p+sGCqf7e6ULWNR$hq^uz1k|CX6qkth^E-VDX{_y!z5S zmc71;4V$Vk`1|$Yy7?lrE&Fr(;mn zRurWR>FMbhRJE1by3^#kUF79?5JGUR{dnX!3fGyUD0J`EmA_-NWzmt%mPJQ4TNeHM z_2GJxSWJ;vOp#bjkyuQTSWJ;vOp#bjkx~dWO~=wXP1BJ=AnmqHV(|o)&c)&h?6yp# zC)Y)NLl{ldvHY2)>C`ub@#MOYZdW!=hm8}VIwH|Hnx=E3(=?q(G|q`o9ZrW0w<{Zk zE4q90Xl{vewy}xo+TYQ1og0}H0=q4f{F~jlUD+7^0IB!Gd)10NLI3~&07*qoM6N<$ Eg1)+fh5!Hn literal 0 HcmV?d00001 diff --git a/cypress/components/__image_snapshots__/Button renders without default theme #0.png b/cypress/components/__image_snapshots__/Button renders without default theme #0.png new file mode 100644 index 0000000000000000000000000000000000000000..22c8b7703d1133d13e93e42476bb553f27674b54 GIT binary patch literal 1179 zcmV;M1Z4Y(P)f0KoC@Jv?%7;CUPe2*)AsFA=@y#1LksYeTFw3`Ns0G)*dcp;as0Qfr##Tk145 ztkjt@8>P9*N@o@lq97okrULR72nYv9PM;@#8`o}59XS8!J|B&G15QZ7Nl7><2`44t zq-1V*A|;)+_6{8Bbne8)L@|Hf^E?=LAN|$SW8-2?9YGc|o}L~EHMN&e6oruBAnp~3 zK1MGCS@SZ;nwPq@l5y{;I4x%goGdN=hrRTe5Tw3qDxRy(H7e zVlgv&)-)VF5RS(ZU>jOx~QoP|Mo&TRBlu zhMQK)=!B8HI{yVsCL_X%RU0uF^n`{4v1`w_)YM!eE-r?g?75iD{>a>dqA1iiG_mcg z-3X74NkC|Cze3@kC+O<3@*h>Dps<+8h)}}ALh$u5QB{2oUmp`jqXBb(KW_2=VJ6Ske)V?E~}Niz5Ds2posjuTs%B3)w#v`08Eyrf-ZA>?jeg(WZmVbsXsy!Gy4cJ0n*PUdv%)_$^>q{MgxS(e#<;2=FV8!~;2UIwO3 zorIt$3XP4;6ciTo#r8dfg$9$7JeGSwRaJgDbd-qj5G;WK*d>jQN2sVggPqyzPf}t$ zcCj&$>_2djrluBT`dBPxGBeU~)Y)Yvea1`d+4~(S$z!>dYuBzZ5FJ-K5k@@x0FDL? zk};e8X>4l7&g5;xk=D%>K~)tb?m$1-lj!IO%F3&-TD!TGrsfs~!cD71XlcESBb%+4 z`uaxvhx%bBNg8fP;to1GIw?9{LTpSVo}M1)bnXZ(m)o!_J$0IaaCdjZ&(}mjVKIuL zU{_Ur4k0QsjQ)`6Q&(5dmfW4#wYIkL>*3$&>9O%_>XQf&;UNesS8t-L%ZiI6v3lJW z9C>93~`>qv&`EIqxhYKQEWmN#m(+Xk^E(Z^+;GBZ5xn z&gKov@iBR0CrJ{HG-wbs8Vwrt1_r3N_aB=7ZXwX@kBf^7H&axV*4E1m(d*G_T@kKc zy-Jt08*if*b{!p^T&$_XV9;X;48X<3h5nMc3vO;&h6M$3JCa6&ua5~wuCA_l8(nc^ tFz9*65X;?=a8eRZO2SD=I4KDy^)Kr@dGgBw+Oq%v002ovPDHLkV1izZD_H;l literal 0 HcmV?d00001 diff --git a/cypress/components/__image_snapshots__/Themed Button (Click) #0.png b/cypress/components/__image_snapshots__/Themed Button (Click) #0.png new file mode 100644 index 0000000000000000000000000000000000000000..a7674ba69df56e9fe53d235e57ce7245c0dc6862 GIT binary patch literal 1346 zcmV-I1-<%-P)1f_0D$55`+yfQ6P#Uq6kx53# z(otHPg4bI>dRiL)2MQ^0@!};Oeyo(v%$fZ-Gp0|$jEaq08BiD?81P}J*tnGeg#m&A zAOAIl6nbglGfbLzFS@32J`!cw>#KNoZ8@Vx+)2;dZsFgoE89rvtZ4)TJ`C&1Hc~ok z8o_{%|C&My2`P|5K$kA$x?S8oW&~gFJ4h^^z%cLm#oT{iF-4<>VK{p1S5~fC$I3UB zuw>~9RJD~2o2qDQYv;(%M^V*QHf*Y*t*xEMr%tBvT$mMat>xSAe!%IlGq$9NnNL1S zMn*dOzWI(%cYQ(em=Tm$d_=gZnc>3*v+%j6NlR0>T9OoMYz$LfQ%C4jE&C6A&)WAZ z$j|c-^!qRzICzL~QwvG4c!Hk}|3Z6vJ4GXhVhH$s1pGdVMh?Xg@cRh(eO$V9iRn+x zr@E$&MK8`}%0myZ{)5fDvEm&J&CTceeD8jiEL}nIT_fq;t0!BkcJlGgJ*0v{3YC>t zQdV9`M-NRJ&*jS+QcC{GxO<9tZTV^j6#5x7Fo@x`<*OM`=x5NtAUk(`&e_H=l@)8~ z-Rm|CLI~bmwT@>>pCD=VTgxa6_Gjvp2buiHEKY`MNCkxyDxEcr`^FVxh(w}%d+-o% zuUSvP?_+GqXs*V|Pz^R)7PsGiD@nnC55ws*^&|!TK9YL$=*Ic;5mG@Rg>rJT$?}sNYXBA7^ILSNhwK^LXawwYe>^H z>gyYDIvp5nwk*^{D@oNgb(rPtnoo7jZ$zRol8&7?iJ@yj9@m;e3LQUwlD%IY!0>y0 z10QbQ#@WU&CB-8#^z-#*+m7A%{e5X`Yh&&E8|WxABZE+=mPjN@PEIzN85x8^wL~IO zMvof8n)g1Sth|!hGp2Gb+(hM;PZ&OQFdmPaYfT}Aw(r=(_8ogj3I=@4pF5LbL+-#Z zWBL^4%zK5>xi8~(-NfXH_p+sGCqf7e6ULWNR$hq^uz1k|CX6qkth^E-VDX{_y!z5S zmc71;4V$Vk`1|$Yy7?lrE&Fr(;mn zRurWR>FMbhRJE1by3^#kUF79?5JGUR{dnX!3fGyUD0J`EmA_-NWzmt%mPJQ4TNeHM z_2GJxSWJ;vOp#bjkyuQTSWJ;vOp#bjkx~dWO~=wXP1BJ=AnmqHV(|o)&c)&h?6yp# zC)Y)NLl{ldvHY2)>C`ub@#MOYZdW!=hm8}VIwH|Hnx=E3(=?q(G|q`o9ZrW0w<{Zk zE4q90Xl{vewy}xo+TYQ1og0}H0=q4f{F~jlUD+7^0IB!Gd)10NLI3~&07*qoM6N<$ Eg1)+fh5!Hn literal 0 HcmV?d00001 diff --git a/cypress/components/button.spec.tsx b/cypress/components/button.spec.js similarity index 65% rename from cypress/components/button.spec.tsx rename to cypress/components/button.spec.js index e5acbfc5..ae88997c 100644 --- a/cypress/components/button.spec.tsx +++ b/cypress/components/button.spec.js @@ -8,6 +8,7 @@ import { GlobalStyles, defaultTheme, } from '../../dist/minerva-ui.esm'; + import { createGlobalStyle } from 'styled-components'; const text = 'Button'; @@ -39,7 +40,7 @@ const MinervaProvider = ({ children, theme = customTheme }) => ( ); describe(' @@ -48,5 +49,26 @@ describe(' + + ); + + cy.contains(text).should('be.visible'); + cy.get('button').toMatchImageSnapshot(); }); }); diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index 8b4ff642..e4c11852 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -1,3 +1,16 @@ { - "extends": "../tsconfig.json" + "compilerOptions": { + "target": "es5", + "lib": [ + "es5", + "dom" + ], + "types": [ + "cypress", "cypress-plugin-snapshots" + ] + }, + "include": [ + "**/*.ts", + "cypress-plugin-snapshots" + ] } \ No newline at end of file diff --git a/package.json b/package.json index 37932853..b042ae5d 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,10 @@ "(.d.ts)$", ".stories.tsx$" ], - "testPathIgnorePatterns": ["/node_modules/", "cypress"], + "testPathIgnorePatterns": [ + "/node_modules/", + "cypress" + ], "moduleNameMapper": { "\\.(css|less)$": "/test/__mocks__/styleMock.js" }, diff --git a/src/Button/index.tsx b/src/Button/index.tsx index dd898113..42827015 100644 --- a/src/Button/index.tsx +++ b/src/Button/index.tsx @@ -89,25 +89,8 @@ export const Button = forwardRef(function Button( as={Comp} disabled={disabled || isLoading} role="button" - transition="all 150ms ease 0s" - outline="none" cursor="pointer" - fontFamily="body" - _hover={{ - backgroundColor: '#f9fafb', - }} - _focus={{ - borderColor: '#a4cafe', - boxShadow: '0 0 0 3px rgba(118,169,250,.45)', - outline: 0, - }} - _active={{ - borderColor: '#a4cafe', - boxShadow: '0 0 0 3px rgba(118,169,250,.45)', - outline: 0, - }} _disabled={{ - opacity: 0.4, cursor: 'not-allowed', }} aria-busy={isLoading} diff --git a/src/index.tsx b/src/index.tsx index a00f68b5..ecb085cb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -69,7 +69,7 @@ export { default as Stack } from './Stack'; /** * Inputs */ -export { default as Button } from './Button'; +export * from './Button'; export { default as Checkbox } from './Checkbox'; export { default as Switch } from './Switch'; export { default as Input } from './Input'; diff --git a/src/theme.ts b/src/theme.ts index 1bc1aea3..ea5dd9e8 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -9,7 +9,7 @@ const logoColor = '#551A8B'; export interface ThemeComponent extends React.CSSProperties, PseudoBoxProps {} export interface MinervaTheme extends Theme { - Button?: React.CSSProperties; + Button?: ThemeComponent; Drawer?: React.CSSProperties; Heading?: React.CSSProperties; Modal?: React.CSSProperties; @@ -67,6 +67,26 @@ const defaultTheme: MinervaTheme = { borderRadius: '5px', borderStyle: 'solid', borderColor: '#d2d6dc', + fontFamily: 'body', + outline: 'none', + transition: 'all 150 ms ease 0s', + _hover: { + backgroundColor: '#f9fafb', + }, + _focus: { + borderColor: '#a4cafe', + boxShadow: '0 0 0 3px rgba(118,169,250,.45)', + outline: 0, + }, + _active: { + borderColor: '#a4cafe', + boxShadow: '0 0 0 3px rgba(118,169,250,.45)', + outline: 0, + }, + _disabled: { + opacity: 0.4, + cursor: 'not-allowed', + }, }, Checkbox: {}, Drawer: {}, diff --git a/src/types.tsx b/src/types.tsx new file mode 100644 index 00000000..00bb9644 --- /dev/null +++ b/src/types.tsx @@ -0,0 +1,272 @@ +// These utility types are from Reach UI and make it easier to deal with typing for React components that accept the "as" prop +// https://github.com/reach/reach-ui/blob/main/packages/utils/src/types.tsx + +import * as React from 'react'; +// import { forwardRefWithAs } from './index'; +// import styled from 'styled-components'; + +/** + * React.Ref uses the readonly type `React.RefObject` instead of + * `React.MutableRefObject`, We pretty much always assume ref objects are + * mutable (at least when we create them), so this type is a workaround so some + * of the weird mechanics of using refs with TS. + */ +export type AssignableRef = + | { + bivarianceHack(instance: ValueType | null): void; + }['bivarianceHack'] + | React.MutableRefObject; + +/** + * Type can be either a single `ValueType` or an array of `ValueType` + */ +export type SingleOrArray = ValueType[] | ValueType; + +/** + * The built-in utility type `Omit` does not distribute over unions. So if you + * have: + * + * type A = { a: 'whatever' } + * + * and you want to do a union with: + * + * type B = A & { b: number } | { b: string; c: number } + * + * you might expect `Omit` to give you: + * + * type B = + * | Omit<{ a: "whatever"; b: number }, "a"> + | Omit<{ a: "whatever"; b: string; c: number }, "a">; + * + * This is not the case, unfortunately, so we need to create our own version of + * `Omit` that distributes over unions with a distributive conditional type. If + * you have a generic type parameter `T`, then the construct + * `T extends any ? F : never` will end up distributing the `F<>` operation + * over `T` when `T` is a union type. + * + * @link https://stackoverflow.com/a/59796484/1792019 + * @link http://www.typescriptlang.org/docs/handbook/advanced-types.html#distributive-conditional-types + */ +export type DistributiveOmit< + BaseType, + Key extends PropertyKey +> = BaseType extends any ? Omit : never; + +/** + * Returns the type inferred by a promise's return value. + * + * @example + * async function getThing() { + * // return type is a number + * let result: number = await fetchValueSomewhere(); + * return result; + * } + * + * type Thing = ThenArg>; + * // number + */ +export type ThenArg = T extends PromiseLike ? U : T; + +//////////////////////////////////////////////////////////////////////////////// +// The following types help us deal with the `as` prop. + +export type As = React.ElementType; + +export type PropsWithAs< + ComponentType extends As, + ComponentProps +> = ComponentProps & + Omit< + React.ComponentPropsWithRef, + 'as' | keyof ComponentProps + > & { + as?: ComponentType; + }; + +export type PropsFromAs< + ComponentType extends As, + ComponentProps +> = (PropsWithAs & { as: ComponentType }) & + PropsWithAs; + +// TODO: Remove in 1.0 +export type ComponentWithForwardedRef< + ElementType extends React.ElementType, + ComponentProps +> = React.ForwardRefExoticComponent< + ComponentProps & + React.HTMLProps> & + React.ComponentPropsWithRef +>; + +export interface FunctionComponentWithAs< + DefaultComponentType extends As, + ComponentProps +> { + /** + * Inherited from React.FunctionComponent with modifications to support `as` + */ + ( + props: PropsWithAs, + context?: any + ): React.ReactElement | null; + ( + props: PropsWithAs, + context?: any + ): React.ReactElement | null; + + /** + * Inherited from React.FunctionComponent + */ + displayName?: string; + propTypes?: React.WeakValidationMap< + PropsWithAs + >; + contextTypes?: React.ValidationMap; + defaultProps?: Partial>; +} + +// TODO: Remove in 1.0 +export interface ComponentWithAs + extends FunctionComponentWithAs {} + +interface ExoticComponentWithAs< + DefaultComponentType extends As, + ComponentProps +> { + /** + * **NOTE**: Exotic components are not callable. + * Inherited from React.ExoticComponent with modifications to support `as` + */ + ( + props: PropsWithAs + ): React.ReactElement | null; + ( + props: PropsWithAs & { + as: ComponentType; + } + ): React.ReactElement | null; + + /** + * Inherited from React.ExoticComponent + */ + readonly $$typeof: symbol; +} + +interface NamedExoticComponentWithAs< + DefaultComponentType extends As, + ComponentProps +> extends ExoticComponentWithAs { + /** + * Inherited from React.NamedExoticComponent + */ + displayName?: string; +} + +export interface ForwardRefExoticComponentWithAs< + DefaultComponentType extends As, + ComponentProps +> extends NamedExoticComponentWithAs { + /** + * Inherited from React.ForwardRefExoticComponent + * Will show `ForwardRef(${Component.displayName || Component.name})` in devtools by default, + * but can be given its own specific name + */ + defaultProps?: Partial>; + propTypes?: React.WeakValidationMap< + PropsWithAs + >; +} + +export interface MemoExoticComponentWithAs< + DefaultComponentType extends As, + ComponentProps +> extends NamedExoticComponentWithAs { + readonly type: DefaultComponentType extends React.ComponentType + ? DefaultComponentType + : FunctionComponentWithAs; +} + +export interface ForwardRefWithAsRenderFunction< + DefaultComponentType extends As, + ComponentProps = {} +> { + ( + props: React.PropsWithChildren< + PropsFromAs + >, + ref: + | (( + instance: + | (DefaultComponentType extends keyof ElementTagNameMap + ? ElementTagNameMap[DefaultComponentType] + : any) + | null + ) => void) + | React.MutableRefObject< + | (DefaultComponentType extends keyof ElementTagNameMap + ? ElementTagNameMap[DefaultComponentType] + : any) + | null + > + | null + ): React.ReactElement | null; + displayName?: string; + // explicit rejected with `never` required due to + // https://github.com/microsoft/TypeScript/issues/36826 + /** + * defaultProps are not supported on render functions + */ + defaultProps?: never; + /** + * propTypes are not supported on render functions + */ + propTypes?: never; +} + +export type ElementTagNameMap = HTMLElementTagNameMap & + Pick< + SVGElementTagNameMap, + Exclude + >; + +/* +Test components to make sure our dynamic As prop components work as intended +type PopupProps = { + lol: string; + children?: React.ReactNode | ((value?: number) => JSX.Element); +}; +export const Popup = forwardRefWithAs( + ({ as: Comp = "input", lol, className, children, ...props }, ref) => { + return ( + + {typeof children === "function" ? children(56) : children} + + ); + } +); +export const TryMe1: React.FC = () => { + return ; +}; +export const TryMe2: React.FC = () => { + let ref = React.useRef(null); + return ; +}; +export const TryMe3: React.FC = () => { + return ; +}; +export const TryMe4: React.FC = () => { + return ; +}; +export const Whoa: React.FC<{ + help?: boolean; + lol: string; + name: string; + test: string; +}> = props => { + return ; +}; +let Cool = styled(Whoa)` + padding: 10px; +` +*/ diff --git a/src/utils.ts b/src/utils.ts index 159b42f8..1028013e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,4 +1,10 @@ +import { forwardRef } from 'react'; import { system } from 'styled-system'; +import { + As, + ForwardRefExoticComponentWithAs, + ForwardRefWithAsRenderFunction, +} from './types'; // const isNumber = n => typeof n === 'number' && !isNaN(n); // const getWidth = (n, scale) => @@ -258,3 +264,23 @@ export const filteredArgs = filterProps.reduce((result, propName) => { result[propName] = { table: { disable: true } }; return result; }, {}); + +/** + * From: https://github.com/reach/reach-ui/blob/97b32791ce33f822f6bc9f07f6cebfb343d8032d/packages/utils/src/index.tsx#L195 + * This is a hack for sure. The thing is, getting a component to intelligently + * infer props based on a component or JSX string passed into an `as` prop is + * kind of a huge pain. Getting it to work and satisfy the constraints of + * `forwardRef` seems dang near impossible. To avoid needing to do this awkward + * type song-and-dance every time we want to forward a ref into a component + * that accepts an `as` prop, we abstract all of that mess to this function for + * the time time being. + */ +export function forwardRefWithAs< + Props, + DefaultComponentType extends As = 'div' +>(render: ForwardRefWithAsRenderFunction) { + return forwardRef(render) as ForwardRefExoticComponentWithAs< + DefaultComponentType, + Props + >; +} diff --git a/types/index.d.ts b/types/index.d.ts index c638b7b3..1e775222 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -1,9 +1,9 @@ declare var __DEV__: boolean; -declare global { - namespace Cypress { - interface Chainable { - toMatchImageSnapshot: any; - } - } -} +// declare global { +// namespace Cypress { +// interface Chainable { +// toMatchImageSnapshot: any; +// } +// } +// } From 1383c0d21018faddbb324c775daed64102242dbc Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Fri, 4 Dec 2020 12:27:55 -0600 Subject: [PATCH 2/7] Update image snapshots and jest snapshots --- ...ring renders without default theme #0.png | Bin 0 -> 1266 bytes ...renders with default theme provider #0.png | Bin 1346 -> 0 bytes ...ton renders without default theme #0.png | Bin 1179 -> 1266 bytes .../Default Theme Button with Variants #0.png | Bin 0 -> 3796 bytes .../Themed Button (Click) #0.png | Bin 1346 -> 0 bytes cypress/components/button.spec.js | 79 ++++++++++++------ test/__snapshots__/accordion.test.tsx.snap | 8 +- test/__snapshots__/button.test.tsx.snap | 24 +++--- test/__snapshots__/hooks.test.tsx.snap | 24 +++--- test/__snapshots__/menu.test.tsx.snap | 20 ++--- 10 files changed, 93 insertions(+), 62 deletions(-) create mode 100644 cypress/components/__image_snapshots__/Button Basic Rendering renders without default theme #0.png delete mode 100644 cypress/components/__image_snapshots__/Button renders with default theme provider #0.png create mode 100644 cypress/components/__image_snapshots__/Default Theme Button with Variants #0.png delete mode 100644 cypress/components/__image_snapshots__/Themed Button (Click) #0.png diff --git a/cypress/components/__image_snapshots__/Button Basic Rendering renders without default theme #0.png b/cypress/components/__image_snapshots__/Button Basic Rendering renders without default theme #0.png new file mode 100644 index 0000000000000000000000000000000000000000..4b20f28219d86d7e5d05a6925df2b39703ecf3e0 GIT binary patch literal 1266 zcmVO1C+Vph%{Pg_a3|YH&?fOkybGdu(J_yj&Wu>jXgUYHK zoGrdcdF6F7(o&ISnSm%Oxx}i^Hjw;6A|_KPO_pX>uKpam-9hsBM4lHNy^@mR$ldk@ zUQVZrjazcbKU2cFi>1uSOlKgvyC2bHX`#pIM58Efnp@hj+Uz_}I{G2Y66tBFoIG8G z&1OeaSbUM{2emAkKO2L=A5HaxT27oi%k1pwSejcob*2Qj+s!YBk5f}y&#l|{usa-- zUj382L&umqD+^hcsJeEO6ZwVIH#8Au8pe#wbW$cIBM1UktBnH(k1};i3bl0&l$BTE z@pzb=GLe~C83=-aj(+s?I4L-L4nIFV3Grq$mrE-+f3cL=*_jv&{%Gpz8`+x+ufu2z#^HF#>NOkL`(qyIX{mTAZV%t?*g#T3EG@0=EPQtvXNxW{Cwn>~y$t^T zj5Uv8ta&uC<}t*_#-P{B96Wr2^Os6_UT)pFM`Ken3+82GGzOyy2rw{jRu+zj52?Oi zi&sWkDv9x9(S(^oi5VS5m(_+wN3YSNBl+}`<@9yuZZ#k0tYhbQ`afo6EP2|*C>@;CV7ushI*JVkWWD9ka@bamOV+Z{ZK z&E{Y*BuR(H=~C#+YPF*%ZbCzicnujcg#L&;MN4ZNx9?UH7#Ki6fB{L;;c~gK+3aW( zMd3!|o1VI$>3J5TuCQ@a==g^~lcj|{Km3fBF(in% zSThUXn8mcz6f~Kyrg6Enf`Y>H6cnDv7!u5)1#`$d^c!Aru`!Go9?t%}Bk29~ELr>} zG?OO(}mS)BPe(%vLxa0sB~GaNRmWgfB}ui{tXAlw+L`X;w{gGt}lPMH0Q4}zS1k;x&ibReYN#v-JJPQ#YCE}w*e3Xcf c67f-g14ppd;hY&(asU7T07*qoM6N<$f~HtmaR2}S literal 0 HcmV?d00001 diff --git a/cypress/components/__image_snapshots__/Button renders with default theme provider #0.png b/cypress/components/__image_snapshots__/Button renders with default theme provider #0.png deleted file mode 100644 index a7674ba69df56e9fe53d235e57ce7245c0dc6862..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1346 zcmV-I1-<%-P)1f_0D$55`+yfQ6P#Uq6kx53# z(otHPg4bI>dRiL)2MQ^0@!};Oeyo(v%$fZ-Gp0|$jEaq08BiD?81P}J*tnGeg#m&A zAOAIl6nbglGfbLzFS@32J`!cw>#KNoZ8@Vx+)2;dZsFgoE89rvtZ4)TJ`C&1Hc~ok z8o_{%|C&My2`P|5K$kA$x?S8oW&~gFJ4h^^z%cLm#oT{iF-4<>VK{p1S5~fC$I3UB zuw>~9RJD~2o2qDQYv;(%M^V*QHf*Y*t*xEMr%tBvT$mMat>xSAe!%IlGq$9NnNL1S zMn*dOzWI(%cYQ(em=Tm$d_=gZnc>3*v+%j6NlR0>T9OoMYz$LfQ%C4jE&C6A&)WAZ z$j|c-^!qRzICzL~QwvG4c!Hk}|3Z6vJ4GXhVhH$s1pGdVMh?Xg@cRh(eO$V9iRn+x zr@E$&MK8`}%0myZ{)5fDvEm&J&CTceeD8jiEL}nIT_fq;t0!BkcJlGgJ*0v{3YC>t zQdV9`M-NRJ&*jS+QcC{GxO<9tZTV^j6#5x7Fo@x`<*OM`=x5NtAUk(`&e_H=l@)8~ z-Rm|CLI~bmwT@>>pCD=VTgxa6_Gjvp2buiHEKY`MNCkxyDxEcr`^FVxh(w}%d+-o% zuUSvP?_+GqXs*V|Pz^R)7PsGiD@nnC55ws*^&|!TK9YL$=*Ic;5mG@Rg>rJT$?}sNYXBA7^ILSNhwK^LXawwYe>^H z>gyYDIvp5nwk*^{D@oNgb(rPtnoo7jZ$zRol8&7?iJ@yj9@m;e3LQUwlD%IY!0>y0 z10QbQ#@WU&CB-8#^z-#*+m7A%{e5X`Yh&&E8|WxABZE+=mPjN@PEIzN85x8^wL~IO zMvof8n)g1Sth|!hGp2Gb+(hM;PZ&OQFdmPaYfT}Aw(r=(_8ogj3I=@4pF5LbL+-#Z zWBL^4%zK5>xi8~(-NfXH_p+sGCqf7e6ULWNR$hq^uz1k|CX6qkth^E-VDX{_y!z5S zmc71;4V$Vk`1|$Yy7?lrE&Fr(;mn zRurWR>FMbhRJE1by3^#kUF79?5JGUR{dnX!3fGyUD0J`EmA_-NWzmt%mPJQ4TNeHM z_2GJxSWJ;vOp#bjkyuQTSWJ;vOp#bjkx~dWO~=wXP1BJ=AnmqHV(|o)&c)&h?6yp# zC)Y)NLl{ldvHY2)>C`ub@#MOYZdW!=hm8}VIwH|Hnx=E3(=?q(G|q`o9ZrW0w<{Zk zE4q90Xl{vewy}xo+TYQ1og0}H0=q4f{F~jlUD+7^0IB!Gd)10NLI3~&07*qoM6N<$ Eg1)+fh5!Hn diff --git a/cypress/components/__image_snapshots__/Button renders without default theme #0.png b/cypress/components/__image_snapshots__/Button renders without default theme #0.png index 22c8b7703d1133d13e93e42476bb553f27674b54..4b20f28219d86d7e5d05a6925df2b39703ecf3e0 100644 GIT binary patch delta 1246 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 YFY7#c^2-9+vj6}907*qoM6N<$g7Ts)c>n+a diff --git a/cypress/components/__image_snapshots__/Default Theme Button with Variants #0.png b/cypress/components/__image_snapshots__/Default Theme Button with Variants #0.png new file mode 100644 index 0000000000000000000000000000000000000000..06574c9cbdd844fc311064e3cbabffe1d6f0cfe9 GIT binary patch literal 3796 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 PR*BS1f_0D$55`+yfQ6P#Uq6kx53# z(otHPg4bI>dRiL)2MQ^0@!};Oeyo(v%$fZ-Gp0|$jEaq08BiD?81P}J*tnGeg#m&A zAOAIl6nbglGfbLzFS@32J`!cw>#KNoZ8@Vx+)2;dZsFgoE89rvtZ4)TJ`C&1Hc~ok z8o_{%|C&My2`P|5K$kA$x?S8oW&~gFJ4h^^z%cLm#oT{iF-4<>VK{p1S5~fC$I3UB zuw>~9RJD~2o2qDQYv;(%M^V*QHf*Y*t*xEMr%tBvT$mMat>xSAe!%IlGq$9NnNL1S zMn*dOzWI(%cYQ(em=Tm$d_=gZnc>3*v+%j6NlR0>T9OoMYz$LfQ%C4jE&C6A&)WAZ z$j|c-^!qRzICzL~QwvG4c!Hk}|3Z6vJ4GXhVhH$s1pGdVMh?Xg@cRh(eO$V9iRn+x zr@E$&MK8`}%0myZ{)5fDvEm&J&CTceeD8jiEL}nIT_fq;t0!BkcJlGgJ*0v{3YC>t zQdV9`M-NRJ&*jS+QcC{GxO<9tZTV^j6#5x7Fo@x`<*OM`=x5NtAUk(`&e_H=l@)8~ z-Rm|CLI~bmwT@>>pCD=VTgxa6_Gjvp2buiHEKY`MNCkxyDxEcr`^FVxh(w}%d+-o% zuUSvP?_+GqXs*V|Pz^R)7PsGiD@nnC55ws*^&|!TK9YL$=*Ic;5mG@Rg>rJT$?}sNYXBA7^ILSNhwK^LXawwYe>^H z>gyYDIvp5nwk*^{D@oNgb(rPtnoo7jZ$zRol8&7?iJ@yj9@m;e3LQUwlD%IY!0>y0 z10QbQ#@WU&CB-8#^z-#*+m7A%{e5X`Yh&&E8|WxABZE+=mPjN@PEIzN85x8^wL~IO zMvof8n)g1Sth|!hGp2Gb+(hM;PZ&OQFdmPaYfT}Aw(r=(_8ogj3I=@4pF5LbL+-#Z zWBL^4%zK5>xi8~(-NfXH_p+sGCqf7e6ULWNR$hq^uz1k|CX6qkth^E-VDX{_y!z5S zmc71;4V$Vk`1|$Yy7?lrE&Fr(;mn zRurWR>FMbhRJE1by3^#kUF79?5JGUR{dnX!3fGyUD0J`EmA_-NWzmt%mPJQ4TNeHM z_2GJxSWJ;vOp#bjkyuQTSWJ;vOp#bjkx~dWO~=wXP1BJ=AnmqHV(|o)&c)&h?6yp# zC)Y)NLl{ldvHY2)>C`ub@#MOYZdW!=hm8}VIwH|Hnx=E3(=?q(G|q`o9ZrW0w<{Zk zE4q90Xl{vewy}xo+TYQ1og0}H0=q4f{F~jlUD+7^0IB!Gd)10NLI3~&07*qoM6N<$ Eg1)+fh5!Hn diff --git a/cypress/components/button.spec.js b/cypress/components/button.spec.js index ae88997c..0a3d56e4 100644 --- a/cypress/components/button.spec.js +++ b/cypress/components/button.spec.js @@ -40,35 +40,66 @@ const MinervaProvider = ({ children, theme = customTheme }) => ( ); describe(' - - ); + context('Basic Rendering', () => { + it('renders with default theme provider', () => { + mount( + +
+ + + +
+ + ); - cy.contains(text).should('be.visible'); - cy.get('button').toMatchImageSnapshot(); + cy.contains(text).should('be.visible'); - cy.get('button') - .trigger('mouseenter') - .toMatchImageSnapshot({ name: 'Themed Button (Click)' }); + cy.get('#container').toMatchImageSnapshot({ + name: `Default Theme: Button with Variants`, + }); + }); - // cy.get('button') - // .focus() - // .toMatchImageSnapshot({ name: 'Themed Button (Focus)' }); + it('renders without default theme', () => { + mount( + + + + ); + + cy.contains(text).should('be.visible'); + cy.get('button').toMatchImageSnapshot(); + }); }); - it('renders without default theme', () => { - mount( - - - - ); + context('Style Props', () => { + it('should be able to pass basic style props', () => { + const color = 'rgb(227, 227, 227)'; + const backgroundColor = 'rgb(51, 51, 51)'; + mount( + + + + ); + + cy.get('button').should('have.css', 'color', color); + cy.get('button').should('have.css', 'background-color', backgroundColor); + }); + + it('should be able to use pseudo style props', () => { + const backgroundColor = 'rgb(227, 227, 227)'; + mount( + + + + ); - cy.contains(text).should('be.visible'); - cy.get('button').toMatchImageSnapshot(); + cy.get('button').should('have.css', 'background-color', backgroundColor); + }); }); }); diff --git a/test/__snapshots__/accordion.test.tsx.snap b/test/__snapshots__/accordion.test.tsx.snap index b21f8006..1605a753 100644 --- a/test/__snapshots__/accordion.test.tsx.snap +++ b/test/__snapshots__/accordion.test.tsx.snap @@ -30,11 +30,7 @@ exports[` should render 1`] = ` box-sizing: border-box; min-width: 0; color: #374151; - -webkit-transition: all 150ms ease 0s; - transition: all 150ms ease 0s; - outline: none; cursor: pointer; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; background-color: #fff; border-width: 1px; color: #374151; @@ -67,6 +63,10 @@ exports[` should render 1`] = ` border-radius: 5px; border-style: solid; border-color: transparent; + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + outline: none; + -webkit-transition: all 150 ms ease 0s; + transition: all 150 ms ease 0s; width: 100%; -webkit-flex-direction: row; -ms-flex-direction: row; diff --git a/test/__snapshots__/button.test.tsx.snap b/test/__snapshots__/button.test.tsx.snap index 2bfd5317..45cb203a 100644 --- a/test/__snapshots__/button.test.tsx.snap +++ b/test/__snapshots__/button.test.tsx.snap @@ -5,11 +5,7 @@ exports[` From 2fa884f2ea45781a9ab932f186616adfacf0b951 Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Fri, 4 Dec 2020 16:28:00 -0600 Subject: [PATCH 5/7] Add Open Sans as default font --- ...ring renders without default theme #0.png | Bin 1179 -> 1244 bytes .../Default Theme Button with Variants #0.png | Bin 3698 -> 3113 bytes cypress/components/button.spec.js | 21 +++++++++++++----- src/Button/index.tsx | 6 ++--- 4 files changed, 18 insertions(+), 9 deletions(-) diff --git a/cypress/components/__image_snapshots__/Button Basic Rendering renders without default theme #0.png b/cypress/components/__image_snapshots__/Button Basic Rendering renders without default theme #0.png index 22c8b7703d1133d13e93e42476bb553f27674b54..8fb00b406dbfbb3225a107e2959e777b19009822 100644 GIT binary patch literal 1244 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 diff --git a/cypress/components/__image_snapshots__/Default Theme Button with Variants #0.png b/cypress/components/__image_snapshots__/Default Theme Button with Variants #0.png index f3835ee8283d71423f8daa93a8f8fad44ae2f3ca..320aec16c1f82eb1196b2b6975427a9e63c03153 100644 GIT binary patch literal 3113 zcmZ8kXFMBf7w2|SL4(`6#7bSGRWnFiqa|W1X-l<6Z7C&)RZ-X8JEcab6>W_+p<>3> zl+=tgE-JVsrB!PdcFa$@B zbB-L(X^zA<-;Lwq;#)I?-MkaVz1+o*!fxaKUSC}eFPR$jZ20VMNQ^sanCAM|IaeX< zS%tljy-!1ITZxDax5w0l@Zi3|cOS#a4tMWZU+MtY-KiTbS12i$zCZmH7RQ%#L*(~! zGAaqr^Z)$p9@;?L{F$li>1B{$P;9Q_R6;WzkpX?0l3*2$hLjVac;pN;hv|`3vhruB z$$3dqkq8q}`=Bk6G(Fy1;&=revhxLMF&6)RhWk$^4M z9TD1udug|`yJW7^xlB+b0Q~$iQ$-2&KF|!TswFtvZ)Z#s*w-(^SiLBzQK0XCf`9u= z%l6Ktp=%L5WPo-CMai7L6@13WcExia=dZp=PW{8a&>RZ#oF6C{85u#n)@W_5XpFxO zt!X}I$v}Z{{i+{_`aUdLR*(sQWKsuH=A4HoCI&Cwa!6*@v7kBie5c~M{aWf$fZaDs z_LomfVtmE;&MUpZ;}aOsqoboYpDLXB<;S^@YWeqS1%dD^U22KdRBFo#S%hXh-oU!X zbfKpm3GwfI#sXW1TPxH)bvS_zzis2`Z(_<}B*K|xQaCs1ZYAz}iFZo}SCP{z%Q|1*jL zvhqf?TnSK9Wy;^B3-TNcS>vv1xubc?Ij}f%DPN~PzvBgvynZbAL;Ld$^8;S2s3=%U zlC_g_uB&t~!&1%F#kD^2YFQl9zG(!(rkGHmD$4Q+f z#*(Epx1bAaORG}V`T`;7jqk#@2&f~sFde@fPTh61Lb>^(c125G6y3J*_C6gHwR>V? z0~1G4%e!)jy>Pq*tf~llCFX1rrDWfZv;KH1z*Io-4Y?f`^Pa2Q>-1F#g{pHv@|7wP zuz|msA}sFsaxAwj*t-yZzc7)L8|t4%^RWFEqkB#1k3TD6{D9x?+F3i=TjhAzD?Ra0 zr0{KA^>XJ8I(Cz(t6SDlTScm?V;s~yz;DRp;=Iui$7~CfSX=&MV}JE8PY63ZZQAjiCf)%W{ccfft$U@z{giskeu}xMvu1{Hy0rIit!3F7 zvbf9j${usq+r0J8$sqsXXyn2yKI)}(l_%?|-mAy+99-SlpK$G@M}jS7fSsqG;R`Pv zEEt|sg(|%9>f;SH&j@pd>?6&Jh2#fHQ9<&Yx;(Vk@|a`)JPdYQ!?&5-ZwS=Z)jhAA z-?Ja=OrM&fj0dnC4k(1m>NaS0GEbx;2dI67nGEc6q-&UjAD~D|%NiQ2ZU>jzIZX_iM@{$j8Ymj2B%vT+gPf${q9kcBD4ip= z@K~@B?7JmQRrE%`ZLQ~Fq9%vDCMGCYkqhfzi_d(|w4OdE_tamuSrT2pINp@bT%K*w@9c}umCJHxrgXM#fsfeV z^ko)eHf#2JahEzEAyoh~*D) z^8B;0ya3vX2KM06!5<2`y1YMrbk6_$aTe_;Z_0ouLpxKR)%;uiu1+Gq{{~D{`R^O-Rzhs8uZqz{qN$=X zue$6QH9unFxhf&4k~27Bt~wzCgCdv4N8>yuzI4%35oduj{%WE(%Gw<+UG6iv_NFz4 zUUjjBRp0iR>?ZF9Pp?#|5=oBhCAl!Q2w{Nyej|TBk~p);R92|j;dDYh%X~NRB+v>b zN$Pq|JXeO%H@#pX)}<0fC?0dJsS3n!8|Rwb!#tRp;zc_eGU7!X$A%#?k{YG~5deT8 zH2?#CPw)nS9mlNCJ`v)DoirRv?v5}qm9;1ofG~;-TDVV-x|B+QFuPGfHxIutq_ZXnl56c z*~(5Bc5tBp#?UOpR*o}Ux5Xc+TJkZ7AN$S@OQf%NB^Ie!^3mfiD;K@r7xcNeKDL|G zCaf3RCBXW9&l?A;Qe$TxV20wqW8_)I* zI5SX)(I3LhGcRL(2Ew#5C z<5h4t+=;N!OF-s3epveVXG!>GsmD-lL^J9W`)4EDv!wVKAgFguFq1j>jDZh4sMF2{ z|CW>m{tK0aG5`YalNVe$KZ@+H>)%C6vb$+V$lnB}<45%^8{u*mO0J{D$bmi5E1j#~ zBK^pIKr=4*z~U-^zP+Aw+V*x2j&F=$G8yq*p%yTnlj>LV(g0GC9`1YJ`&9wNh7-lg?F-5o z-E*IM1@Md_jyDO5YHi@hwFneIk3W&3<_!S}P+!ndP*5zKGJ^t${l8HIAi-!vZIvPm z_b`4A32?j0Gsee_P3YSYa9sb~EV?Y5p@R-K4%l+Gv%|KxTR8aPA`jj}Gj1t%H)VF zoMqvM1%uM0Ywo3L2DbEF0ax^xS`>R>T5QMD3eeK{6WMS z$0-{jUSVpsj-)mjt#Y-COOli-!nDP#9of}7te<+vEaFLYg9>N>(sLSuUh2KcTJ%?v x&w2(=K^C^J_lVazw&hJs+;44dh5mjh7}T1~`_~Zm9cKmLGBvV-)f+sF`40)d46^_L literal 3698 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 diff --git a/cypress/components/button.spec.js b/cypress/components/button.spec.js index 16729198..092cb5ee 100644 --- a/cypress/components/button.spec.js +++ b/cypress/components/button.spec.js @@ -13,6 +13,8 @@ import { createGlobalStyle } from 'styled-components'; const text = 'Button'; +const defaultFont = 'Open Sans'; + // by default, we are using the native font stack // but this font is different on macOS, Linux and Windows // to make sure our screenshots are consistent, we force them all to use the same font family @@ -26,8 +28,8 @@ const customTheme = { ...defaultTheme, fonts: { ...defaultTheme.fonts, - body: 'Helvetica', - heading: 'Helvetica', + body: defaultFont, + heading: defaultFont, }, }; @@ -35,6 +37,13 @@ const MinervaProvider = ({ children, theme = customTheme }) => ( +
+ + +
{children} ); @@ -44,11 +53,11 @@ describe(' - + ); @@ -64,8 +73,8 @@ describe('