From 5af5bbdb0f498420072a7fe4d9de9859a67cea2b Mon Sep 17 00:00:00 2001 From: Scott Nonnenberg Date: Mon, 16 Apr 2018 16:23:05 -0700 Subject: [PATCH] Add style guide examples for portrait/landscape images --- fixtures/1000x50-green.jpeg | Bin 0 -> 15083 bytes fixtures/200x50-purple.png | Bin 0 -> 340 bytes fixtures/20x200-yellow.png | Bin 0 -> 489 bytes fixtures/300x1-red.jpeg | Bin 0 -> 706 bytes fixtures/50x1000-teal.jpeg | Bin 0 -> 14678 bytes styleguide.config.js | 2 +- ts/components/conversation/Message.md | 119 ++++++++++++++++++++++++++ ts/styleguide/StyleGuideUtil.ts | 27 ++++++ 8 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 fixtures/1000x50-green.jpeg create mode 100644 fixtures/200x50-purple.png create mode 100644 fixtures/20x200-yellow.png create mode 100644 fixtures/300x1-red.jpeg create mode 100644 fixtures/50x1000-teal.jpeg diff --git a/fixtures/1000x50-green.jpeg b/fixtures/1000x50-green.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..37121f4ebd04f2312da368dd4bd7236d9c5a09c9 GIT binary patch literal 15083 zcmb`u1ymeOv@Y5Mg9W$1;Do_L2<{&I2ZCF02o~HWxVr>M&>+DjI0Sb{f@^RF5*%iL zz!2 z8yRnCY9Th0Y<(ZO)-)W-XXze>^XM@JC4`EZg_Vt+gI_>UNLWNv?uER9qLQ+TwvMiz zzJZ~Um9@=lTRVFP4^J;|A74NJ@QBE$=$P2JwDflwnOW~YWET~ed@3y~uc&NjY-(<4 zZEOG1KQK5nJTf}=b!K*MeqnLx$MP0zd*|n`-M#$-#M$}9@5?LX^`F0bfdKUXPz!bZ z55@jBy@*kIp`p43jP+M95SkCFq7#EL7D~#bll?sAP%(uh$I}~Lq-n@;gdI6 zL)|{&Kb@i3BC@v5C7lC6&=8zzD|PL(IQ=*8a=aB4<$bB|r~Kz@a{W)L;PHbkrqu4# zH~+N1VH6jU4FTMrt8VU?=O)}}ME+jm9Q=Zj-&JH%vlh8ysbpiy%PRw>lK~US>=4Q9 z8_oC67u7MBt&7Ny7*l!bXWptK$I5)Q2UC!W@>5>)aE3L>YP$cRJC=6~#_5Lo2EZf}1@7Zshr#9t zeKPfdr!7Yw2_Z@ho0~}l*qdQk_J(t19PVyujk5M-ugNs!r7_4fr7_5VJ^(cLoUd+$ zy5T<~vmy%yg+z}U2Jn;vcAk6kM7|VnSvB|y>?in4(mVjSTn|88!G*L}-7Qt{W%fZ5 zK{c$j#@UcQt>Q!I{#jUOYC`3948|N znf`bWk)+_Q$;_K(E-Q7U1zk>&{mfC?m9C+I=m)Uf0Uv}h_LVtZm(s5<&yn_v-ih5o zHVOplqkmN5dXZi=Ccg2#*@Q9NR#9Sks_J0}Ix$3XC!sMfl^LvatGva$Ghd-jo zDkY>%Ng{#H`DRPzR^ra*ZN_&l;2n3#e{#b>qm!k9w8+?!TP1k;LepOU42&I*qQza% zbX^+6kc$_F&9G^08zO`5(55{5YGR!0c*;Fo<>=V1jsw|+Fg+bGW&8}+55Hi7Nj*Nm z=@v7&u?iI#Q1U$h36BD3%IJ`vwfEeCD)48;7OX>c81|R`v`78K<@;I`#@^z$Uro+K zaE4_VNO%=E3d1Vc%1S#p4~8qos){$t%YzmjFS%Ra7I8OR2f5^RzWI@GGWm~H?!}O= zeA&=OY`(~xO9@hSGf(nduHpT_U2)~;%U93)u60DM7{U|MK;X?>Jx|x!D(@y$??0rJ zLLM7-b?itPgz4en`ja_v(rtV^q{q+~f0wkypuJt0geKekknn^Q888W7vR-+Wf{x8M zfjb`=wx*;0IJW8t)DV9Di1S;Iy;+R^#(){R;o&lQX@Q5AU>R*r&5`pSaZ$z?h*sT$ zau;QWo+DCp?Kc`8Z~kOsKZh3hSk4R1Uq}qceS?>LIa;T! z&l+sG%v|nxfxn|y@;*&{OBuR-ps~=|10x*jdK>7)I&c~#NgY4v|GU92Yxb3L%krG7 z>mYF&2qG2&4&imj)PbK@uu@*EZK(REQ??u>TNiZ-$s>EVr3jECYVeVv2jJ0PwY zXCvC5-!(T%Nzp(5hr!j?Rl9@-O0e8|KQb)=9tO&L<=2Da82@qH5|= zgoXzT55SKiCZ6s%{#BaK)ZSvYCp5dXil*z)>Yv!PvYyTtn7=dfwvhKL8+1wR#(=9g z@pJxg`K@LE`ekUJ3A1M!9mP)rpdJakV3OzZCP)i}V_z^)Y5t^aM_c&IR;{xo)1ja0 zl>|8GP$C>)GuPS{LSEcI|8m#OoBnB9SCiNQNB5@y+tQ^~2dc>Lf-RZTA6T;W9;JSS zK+}7HM~Iw)WtXicedknT->6^X^i~eU_S;9ByA|J}PVZK4v_3^w=-sCJqs3>AULJ7r z4NzSs!%Rq4jHg^+J)hf6rqv+A!om#UDB}pjMmcrzXoL_uCqBUL zkD&-dvz>umtzq80T|4_5Ty=w*vo2t`gl#i zSQGnwdI&nEInHq!uPYWS`60hi~Pc9*+y)Vdny-f;cK zm;A+9rTTs_Wt(!y&*aCL=gPwle+dcN}LP(gSwKJrYFR zh)_tz-x1V*EkkAUq&lRyfhO`bdIr=ypJ(=y=d-Ud6GxSmIM7@GOH1vaEjHz$Dt?x1 zZ_8;@?wb3VVEl_a71+eIK-X(A%NL9OZ{MeZhh>;QEHZ_Ug6Rh1E|NjWk%4@nsYN6B z#K)|bPjSM_x-eG|+kvYL5I*@*1_Gv9@O5a~9%pNcb4$~=+heN@9?9o{?}qUUE_AAu zGiQ{W$DU>Sy$X|kl8~kZMogip11z1}FYZ1`QXf#|b!99&`t$ohv7LY8^3V|G0zRDe z=&54>!OkPbs46Y->3BOb>-iap{J0l3p85)UdO#R~3|1j#=ORpKcmoZ|YD7hT)cU8i z8sPoEu^xF*zRGLM+QFig2E|X)uLuVS<4y69k^Gnbt_z!{DYJ=$g~S&+^%49g_wAb#+dtoi3PDGn`c#V^s4=e zYNHC-IZFca$R}>a5l&f&fkJd$78VstGSFnosC#0vj}?8)a>U^)*`NLkwq<+tdUrJ4 zU^~L-d+1`})XI(ii>`L_mi@}*m=}Y&03{!w@g_ArL`1mGu&9RW zT~oH5lRz&r*WU)B}ke)e;wq4D8aL~9Yqz*>DBDhrz2?0x7tn~w{B zOrxYq==m!Z^`h<6?2W#0SBqsU&L^YT2q+DaK|`2gAZd7tA7#ZSg-<37IoLy8BoeRV zw(lW4|pEZ>Tc~CR^eedSYTU*h11yI$Mge6%oDA3W+%{0&JdT5O@C5C3P+_fr>JD-^99OA^5U!Q)luMZ=_GhLsrk8ej{oL;ZOt<)5;^{VAhg({3`y7w^ST3bpPYT0-P)SJ zJk@+fICvUwii-^37xe$RHuxv9KRT}eE4QGxmMabfK$Ag-+G0WaD$NLj1d$ZO%VSg3 zpL%8m-jHM(<+VjAKj)R*Oi`lQ7U_lJp{rRqw4IlC;47$^F4JYnlj(~v{)byAfSDMr z$iOelYS&8|jO`cP*S^;SCTaZ7`cQF$v@kd{*PWx7f+cM&I<-*VSGV<8Z1Y>WUO+Go z66TvzJXH4LtE;Q)izV?e&gmcuR3!Hg;y%ykZRx(~LUv|D%m)EZugKig+;V~+C_!iz zem~Es82akgATO-U+2l>8FSR{MiS+2BqINW8nIri+_x#1Rs(7soBe8-q6wP-J#0rp_ zx)lY@6yX2HS6}~nEYL+ImIfB`k9?nmH35iaEQOBlgkZU2uvt{jCG%S@V?YEvlWmJq zAtvP085toA;VCkEGM}n(P-8FUZ-k63%}@o%P%C+Z7#4h2ThuIG2Ze8-%ZkD^EASxss9LIC7 zZ|-$yyK;~%^!W*ov!cZNKiPjCf4djodH`x2ZzBV*5mlnx$C~iT!7M4}nmH^D5<1}R z*)yC6pf%!lf3qi%)5X^1Wf_8RkMl;=@dk3_!k~QY%w$&@JFGh$3MO79QmR9{ODN0l z-x#5L|NDY0DYaOciQ`Gd)9lyrkdtSYWdLvFms4(Fa>KcDykh)CYLFZ=mw|BY?eXTkb^T2t^I5C44nC`6qs zOy-R{hRp#zZ6F^-pA9k=q>!(BBW~mu*t6pHowXZu9lOmQhQ&ayJ4$3)Lyc^i(@mWc|O5t`YHphX24A>O~x8;>hz3e^IzAl^{S+A|wPM9^X zm<(+9L}o4c+nkgx=wDH2IN9Q)=_~CtyOS$wN%tOSuQ%TnH91O{ZfGFN!f(~K!0k@; zugsQ-=}oJ#@vxYn=t;L8rfZ=oZll`*yBkffb4nbfFaxy&VqkX17uV0Ye)N7-kNd}( zZm=7RRt6QYtSEGerbbew_NZ>Om%Pr_v^x+tsjmI7nP)brm!`aCR1V=xi>VgZa-VRy!grLrCXBG%S*-R&k6$Ez*YG=S?7v$Fqvz56=%AMNTsp> zmC4zc4pWZb`|dtZ2TD~UDPXkk4eFZKbj|%J!lA*3Xz8o?Nj!VI3*GT`c|A^A0><1J zzM`wAUGoATEfd_8(7#PceD4jyn(2Y|qFpzi^oqbn~DwA=5-4j!Y2``m?cNnL0yW&|xAEhiPj zxBIntZl2ZE++WM|iW#wu?DGYA9rS>uc9M}|_q~|~f7l(r1-}_(`5fK5E}*ph*V*uQ zD5%pEhrMki;5(2$H8BXj+Q@lEKPVaYLPtJHKvx&Q&CYLDyQeC%qdks;)Bh(|WjFam=#$R_&~(}1Sa?f@pvfYs91D2!#$49b z+E0CzP>ZZy@~fjmMW>EPaEFU*-t~O47|OoWZtf{U%#*fz90<|`NB=~R4;eWVh}^dt0Cfys#P=e>o7 zK?e=ih!+*>F(e&V0D)XUYO+DAmcE}_ZM|VRl8CNyxeh84rb9oRP`48 z*^v9G4$jedJmvv^nitUpr*$ar_6pgvHQRl8=gAVFu*-yS88GUJ6DRj8^9?qc^OP{b z%CqsX_kn^(LH#1KI0|E6nr(*76wa@m#E3tO>PW*%)$NdJ-`0V$BYizyqK5VFyyeor zp+q~j7|O%g+2e{T}{MI>8gw%O#qsvAq_wa9FV~y?A5+kL;jP)cclH9 zS#*@s+?#q~)(jgX#MC8T=)Wj&d#0Y#99tQ0vJW@WaBz`+33}UYGozwhR)1l8^s@vx zqxN`rIA3(3Sv677#7d$&PvCnLE*s8j#}ifu(iB%r*$`po(BGAVaG}_yI!a%ofx+yj z>rS7JEP934s0kpH1PLWXisjo(m@S9l#H^wpFxFY$Uu!TN{zwFNYaTH~sW7J4^*$hwef4 z6bnX1B0V}D@Bl!D{Vu8}ACH%;AZ>LEUh&{_aWM-8ISamTq21h_v$pDXEJ|V)R(MzF z+2x-F*(-KTMe+@1E5-*3*}%96wkPX5)u!tyZ5UE?qb;!+l3)7&t|PdMlb(Om>9~y> z+I^+F@Lrj5Czp^9a>YlABvk3R!DU_!r0Z}@fw3;wIy$XA@^eE|Y}wq15m3Ao^O_RS zpbeDhw4lBGP}y_{5$2}<)3E7-Zb|b;_;+ormQJBjuF0`WTN#}$G;w1^`=6+*%}?X! zY`pue3+IDNJI=vun}3K|_ar#yBvWWha&$l# z2eKv0BwS}L&)+^@>Fw;OeC{rNAkBz1KT_j=71q=`Elyu#mquhdpb<77BLYbhkh`tQ zuYIrN;o{>W%M52Sjbp1tLu>erO1cE=^h9gUU8srvIayPYlNfJMLZG?Jrr|)u5pi=x zl_YLH>b-%7H{3uEq?@-gq*9;=papK^7ty-5heY2`iwjg9J}q46|LRy&R!CgvE~Nqw z{t>1EzgIKuEaT#5l78o~a+uA?7PUT{#M!j7DOnBBX zeM|w~rqBI&m_@n4;CH21Wps22W#uQ}t0fL@z<6MLa=CR_^rVLJODnv|@|#AKOuI#@ z!AEmK2*zuRJ!7U64zmcw8`aBpWO~)g?ZV}P?1Ta>IP{~IWIM`7GpXK)2M=~!Mj_iv zRxO;JUDROg2QSB&tOG2qZ-=~fr{}Vf?fU!f>&L(A7w_lS$?FjmeRq~;#-2jUFU*{p z3h2cHu%Cer!*W7tc|ivlo&{*Pa&EAKh;^z(Zm7MpZ3B*Y#7<{wI(7XOGmhl1!n=>B z7N3z^uy|!-BgQ&gO!cd#g8oyq+*747n!{v*8$bdD=^VGA5o>hQPyj6I{m^ znlUS+o}If`Sk(!U7T!!vA)M)q-?|#S^SWnqD8LV5G_?N`R7Zd6nG+B7-Rh19?_j+a zi-Ax|`WDt-P?uvDvEdJa-p&<(|DEJqkV?UFAy=89wd^I2jh^(hf^-7@tYo zsI$;k?ht67N7lijx_l7+BU`NlD-yhyFmhhUtk%@dRKrpk2C&z4i1<#5Y9-tw*$jmn z;-A28kn~zzQHEuR7mJg3or_FY2RBK*9uqUX?tV|r#1jbLRtzif?;gQwoV#xOi?(vWd?C0S+`C@>n;jNUad3FPgI^44ZN8FLE;3!sUy1Lc=@89bqyR*1x0(yLHYcL z_$Lu zG2XFpLSH0=?Dg`dhbJV^(7f)nx_pNZn@lhxl!Q!7c>ef#Kh+&U0HPoc%%CC0NX`|K-m%+%3`&t$Hcd%7XVZJ{A<`uAJ~N2klXTP-zi zXDh2esQIm?+U@5+rytVK$yZbo>=%B;`wuk-%g*W8cr9H?xD0$@soQG56?$8?(w!mD z-YVD!=>B7l0az$)hKUkk4|AfjyjHXdXY_=~f3_(7wpl;xwyTWOZ0T(NHF)dHN`yul0 zqK)4JFjPn2>%X!!ndIf@g!@nY%eJZ0lI&xymugIJ^RBrQ(tiu=k$(-edH~Xtx4CZs zv*3NPMFlD~-8hX(8nezMzDr5eDGU_g{Il=%0DR(|m3l)+w7N%+Awb@kT9l)c&n4xb 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 literal 0 HcmV?d00001 diff --git a/fixtures/200x50-purple.png b/fixtures/200x50-purple.png new file mode 100644 index 0000000000000000000000000000000000000000..083e1e47ef5126ea2f550675ceccb723c6596c3e GIT binary patch literal 340 zcmeAS@N?(olHy`uVBq!ia0vp^CxBRlgAK%5QgjMPF%}28J29*~C-V}>;VkfoEM{O3 zQw3p0&mff#K*67$E{-7?tZ#2^Lo>Of~Eu3;ldDRU9089%R0DZfN*np}x#SNI}8v!vL>4nJ zh^c}wqi2xH2cUvJPZ!6K4A!@|4thEV3bZ~{;Yi~CrjQ|}oLzT~o>@-mYujf;i%rA*h^e*0+I#^c#rk8j@B|LDN~?xc=H=Z5vZ z%xl*qL^w#Pw()M+)Rf4WIYq+k!YQsc)+K>SHypIJCB!DUbtaOhh&`j?$xOd1^Frdj z*8E%kBD1RCUGuyBf1X74n>X)_-(J4Iq5t!Wdr^^^;iuY*R`ryp-Fx`u)cmTV<$E;6 zFQ2uSPvX|-(i8CyBYVyqWyLQ;1xF}e{YVMl$#Ai>I8I)K>@*h5P(l_x% z$tJnBnUiN9y6`f^md9A#ymjH_lT{LFetBHZ%O`&|I5X!C4ui@Y+Twj0Lq0Dv-QEI> OE(T9mKbLh*2~7Z@QPLIw literal 0 HcmV?d00001 diff --git a/fixtures/300x1-red.jpeg b/fixtures/300x1-red.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..2bb34c2e785ee65224b185867337e5ef9f81ffac GIT binary patch literal 706 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%0AK%P~tQ=Zi4sX&@?R}IZ7~GphIo}} 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 o0vi ``` +#### Image with portrait aspect ratio + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + + +#### Image with portrait aspect ratio and caption + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: 'This is an odd yellow bar. Cool, huh?', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.portraitYellow, + fileName: 'portraitYellow.png', + contentType: 'image/png', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +#### Image with landscape aspect ratio + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + +#### Image with landscape aspect ratio and caption + +```jsx +const outgoing = new Whisper.Message({ + type: 'outgoing', + body: "An interesting horizontal bar. It's art.", + sent_at: Date.now() - 18000000, + attachments: [{ + data: util.landscapePurple, + fileName: 'landscapePurple.jpg', + contentType: 'image/jpeg', + }], +}); +const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, { + source: '+12025550003', + type: 'incoming', +})); +const View = Whisper.MessageView; + + + + +``` + #### Video with caption ```jsx diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 7b0dfd99d6..abd6948225 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -41,6 +41,23 @@ const txtObjectUrl = makeObjectUrl(txt, 'text/plain'); import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4'; const mp4ObjectUrl = makeObjectUrl(mp4, 'video/mp4'); +// @ts-ignore +import landscapeGreen from '../../fixtures/1000x50-green.jpeg'; +const landscapeGreenObjectUrl = makeObjectUrl(landscapeGreen, 'image/jpeg'); +// @ts-ignore +import landscapePurple from '../../fixtures/200x50-purple.png'; +const landscapePurpleObjectUrl = makeObjectUrl(landscapePurple, 'image/png'); +// @ts-ignore +import portraitYellow from '../../fixtures/20x200-yellow.png'; +const portraitYellowObjectUrl = makeObjectUrl(portraitYellow, 'image/png'); +// @ts-ignore +import landscapeRed from '../../fixtures/300x1-red.jpeg'; +const landscapeRedObjectUrl = makeObjectUrl(landscapeRed, 'image/png'); +// @ts-ignore +import portraitTeal from '../../fixtures/50x1000-teal.jpeg'; +const portraitTealObjectUrl = makeObjectUrl(portraitTeal, 'image/png'); + + function makeObjectUrl(data: ArrayBuffer, contentType: string): string { const blob = new Blob([data], { type: contentType, @@ -59,6 +76,16 @@ export { mp4ObjectUrl, txt, txtObjectUrl, + landscapeGreen, + landscapeGreenObjectUrl, + landscapePurple, + landscapePurpleObjectUrl, + portraitYellow, + portraitYellowObjectUrl, + landscapeRed, + landscapeRedObjectUrl, + portraitTeal, + portraitTealObjectUrl, ourNumber, };