From c98214c00779d4c3cd7def75c6b3949edbd2d3ee Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 26 May 2020 20:12:26 +0100
Subject: [PATCH 01/12] docs(sprintf): Don't encourage bare strings

The example, as previously written, would raise errors in GitLab because
bare (untranslated) strings are not allowed. This sidesteps the issue by
assuming there's an `authorName` variable in scope which contains the
string we're interested in.
---
 .../sprintf/examples/sprintf.basic.example.vue      | 13 ++++++++++++-
 src/components/utilities/sprintf/sprintf.md         |  7 ++++---
 src/components/utilities/sprintf/sprintf.stories.js |  6 ++++--
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/utilities/sprintf/examples/sprintf.basic.example.vue b/src/components/utilities/sprintf/examples/sprintf.basic.example.vue
index e49168fbe0..b4c962d2fb 100644
--- a/src/components/utilities/sprintf/examples/sprintf.basic.example.vue
+++ b/src/components/utilities/sprintf/examples/sprintf.basic.example.vue
@@ -1,8 +1,19 @@
+<script>
+export default {
+  data() {
+    return {
+      // Pretend this came from an API response!
+      authorName: 'Some author',
+    };
+  },
+};
+</script>
+
 <template>
   <div>
     <gl-sprintf message="Written by %{author}">
       <template #author>
-        <span class="gl-font-weight-bold">Author</span>
+        <span class="gl-font-weight-bold">{{ authorName }}</span>
       </template>
     </gl-sprintf>
   </div>
diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 9b315cc87a..44f482336d 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -18,16 +18,17 @@ rendered output.
 <div>
   <gl-sprintf :message="__('Written by %{author}')">
     <template #author>
-      <span>Author</span>
+      <span>{{ authorName }}</span>
     </template>
   </gl-sprintf>
 </div>
 ```
 
-The example above renders to this HTML:
+The example above renders to this HTML, assuming the `authorName` variable
+contains the string `Some author`:
 
 ```html
-<div>Written by <span>Author</span></div>
+<div>Written by <span>Some author</span></div>
 ```
 
 ## Interpolated content
diff --git a/src/components/utilities/sprintf/sprintf.stories.js b/src/components/utilities/sprintf/sprintf.stories.js
index 999215e9f5..7ebb674541 100644
--- a/src/components/utilities/sprintf/sprintf.stories.js
+++ b/src/components/utilities/sprintf/sprintf.stories.js
@@ -23,11 +23,12 @@ documentedStoriesOf('utilities|sprintf', readme)
   .add('default', () => ({
     props: generateProps(),
     components,
+    data: () => ({ authorName: 'Some author' }),
     template: `
       <div class="gl-font-base">
         <gl-sprintf :message="message">
           <template #author>
-            <span class="gl-font-weight-bold">Author</span>
+            <span class="gl-font-weight-bold">{{ authorName }}</span>
           </template>
         </gl-sprintf>
       </div>
@@ -36,11 +37,12 @@ documentedStoriesOf('utilities|sprintf', readme)
   .add('with a button', () => ({
     props: generateProps(),
     components,
+    data: () => ({ authorName: 'Some author' }),
     template: `
       <div class="gl-font-base">
         <gl-sprintf :message="message">
           <template #author>
-            <gl-button>Author</gl-button>
+            <gl-button>{{ authorName }}</gl-button>
           </template>
         </gl-sprintf>
       </div>
-- 
GitLab


From d3a0954c06df195e143b20f1d6bbb47e8d09559e Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 26 May 2020 20:19:24 +0100
Subject: [PATCH 02/12] docs(sprintf): Change section order

The interpolated content example is actually the more frequently-used
example, so put it _first_ in the documentation.
---
 .../utilities/sprintf/examples/index.js       | 12 +++---
 src/components/utilities/sprintf/sprintf.md   | 43 ++++++++++---------
 .../utilities/sprintf/sprintf.stories.js      | 26 +++++------
 3 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/src/components/utilities/sprintf/examples/index.js b/src/components/utilities/sprintf/examples/index.js
index 97820eb984..9d489c9718 100644
--- a/src/components/utilities/sprintf/examples/index.js
+++ b/src/components/utilities/sprintf/examples/index.js
@@ -5,18 +5,18 @@ export default [
   {
     name: 'Basic',
     items: [
-      {
-        id: 'sprintf-basic',
-        name: 'Basic',
-        description: 'Basic sprintf',
-        component: SprintfBasicExample,
-      },
       {
         id: 'sprintf-interpolated-content',
         name: 'Interpolated content',
         description: 'Interpolated content passed to scoped slots',
         component: SprintfInterpolatedExample,
       },
+      {
+        id: 'sprintf-basic',
+        name: 'Basic placeholders',
+        description: 'Basic sprintf placeholders',
+        component: SprintfBasicExample,
+      },
     ],
   },
 ];
diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 44f482336d..00e22cd847 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -2,7 +2,7 @@
 
 <!-- STORY -->
 
-## Basic
+## Interpolated content
 
 The `GlSprintf` component lets you do `sprintf`-style string interpolation with
 child components. Each placeholder in the translated string, provided via the
@@ -14,25 +14,6 @@ rendered output.
 > a `gettext`-style `__` translation function is available in your Vue
 > templates.
 
-```html
-<div>
-  <gl-sprintf :message="__('Written by %{author}')">
-    <template #author>
-      <span>{{ authorName }}</span>
-    </template>
-  </gl-sprintf>
-</div>
-```
-
-The example above renders to this HTML, assuming the `authorName` variable
-contains the string `Some author`:
-
-```html
-<div>Written by <span>Some author</span></div>
-```
-
-## Interpolated content
-
 Sentences should not be split up into different messages, otherwise they may
 not be translatable in certain languages. To help with this, `GlSprintf` is
 able to interpolate between placeholders suffixed with `Start` and `End`, and
@@ -95,6 +76,28 @@ cannot easily be used. In addition, a JS-only solution is more likely to be
 prone to XSS attacks, as the Vue compiler isn't available to help protect
 against them.
 
+## Basic placeholders
+
+You may want to use a placeholder to indicate where a component should be
+inserted, _without_ providing any inner text. For example:
+
+```html
+<div>
+  <gl-sprintf :message="__('Written by %{author}')">
+    <template #author>
+      <span>{{ authorName }}</span>
+    </template>
+  </gl-sprintf>
+</div>
+```
+
+The example above renders to this HTML, assuming the `authorName` variable
+contains the string `Some author`:
+
+```html
+<div>Written by <span>Some author</span></div>
+```
+
 ## Usage caveats
 
 While there are a lot of caveats here, you don't need to worry about reading
diff --git a/src/components/utilities/sprintf/sprintf.stories.js b/src/components/utilities/sprintf/sprintf.stories.js
index 7ebb674541..680e7f69af 100644
--- a/src/components/utilities/sprintf/sprintf.stories.js
+++ b/src/components/utilities/sprintf/sprintf.stories.js
@@ -20,21 +20,22 @@ function generateProps({ message = 'Written by %{author}' } = {}) {
 
 documentedStoriesOf('utilities|sprintf', readme)
   .addDecorator(withKnobs)
-  .add('default', () => ({
-    props: generateProps(),
+  .add('interpolated content', () => ({
+    props: generateProps({
+      message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
+    }),
     components,
-    data: () => ({ authorName: 'Some author' }),
     template: `
       <div class="gl-font-base">
         <gl-sprintf :message="message">
-          <template #author>
-            <span class="gl-font-weight-bold">{{ authorName }}</span>
+          <template #link="{ content }">
+            <gl-link href="#" target="_blank">{{ content }}</gl-link>
           </template>
         </gl-sprintf>
       </div>
     `,
   }))
-  .add('with a button', () => ({
+  .add('basic placeholder', () => ({
     props: generateProps(),
     components,
     data: () => ({ authorName: 'Some author' }),
@@ -42,22 +43,21 @@ documentedStoriesOf('utilities|sprintf', readme)
       <div class="gl-font-base">
         <gl-sprintf :message="message">
           <template #author>
-            <gl-button>{{ authorName }}</gl-button>
+            <span class="gl-font-weight-bold">{{ authorName }}</span>
           </template>
         </gl-sprintf>
       </div>
     `,
   }))
-  .add('interpolated content', () => ({
-    props: generateProps({
-      message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
-    }),
+  .add('basic button placeholder', () => ({
+    props: generateProps(),
     components,
+    data: () => ({ authorName: 'Some author' }),
     template: `
       <div class="gl-font-base">
         <gl-sprintf :message="message">
-          <template #link="{ content }">
-            <gl-link href="#" target="_blank">{{ content }}</gl-link>
+          <template #author>
+            <gl-button>{{ authorName }}</gl-button>
           </template>
         </gl-sprintf>
       </div>
-- 
GitLab


From 53ffc55dfca2e5e2934dc349b97b79fabfbff9de Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 26 May 2020 21:54:56 +0100
Subject: [PATCH 03/12] chore(sprintf): Remove old storyshots

---
 ...oryshots-utilities-sprintf-default-1-snap.png | Bin 5436 -> 0 bytes
 ...ities-sprintf-interpolated-content-1-snap.png | Bin 5871 -> 0 bytes
 ...ts-utilities-sprintf-with-a-button-1-snap.png | Bin 5624 -> 0 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-default-1-snap.png
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-with-a-button-1-snap.png

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-default-1-snap.png
deleted file mode 100644
index c2c57b668ff3de7fb4aa38d23cf3b490650c590e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5436
zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu<o49O9lp!
zZ=NoWAr*7p-l<<Puk_*nkJE3TY~E&^-FZqZXyXZ|-Mve5t=WsVay*ld^xGcxf@kpx
zjTh_}^*``$)|e9U&0TP!qNJnotgVJuHk5fC3%PbienX6|xO4i`WwSRQ{`S+k?0M!h
z_rG;jEAPwkTNJGOUOM;t&UL@n|E}D>{<Yn+4-XHwGczy*7(D)I$H>6&V1GLUBLhPg
z3kL&3fU?7>Wy_WsN$_k+IXUV1?+^xt1$oC#P1XLqb$xB_tq14kS{qC7Y$|(uEAz3m
zdES{OR_;$P7Wd1UUffsv8>FlD_qYEqIPItYzw&?I$79mQ5<Er{Jf9xR|Nmimc4OV&
zUp#EhKEA$x=g*U7VAvyZcE*euC)U^heVy4n+bq{>l8>LCoaw)1=6f~uYhQZz&&tTj
z(TU!kclOWE&y!W+|2z^eKCQc*=llQH-?|U}`ue)~jN$Q=k`j~G*Votk74NyRPLhG)
z-{dqOAD@)x=jPtrS^T`<gGa`ls@H2T+wGh`XU>@;M~)cJ`Vk+lJg<N1#Q);`HlIA|
zzOIgc%9~%|ET$VZ<#zsl+uh~w<=)-jnjOy8>=?E##!|+5)2+gzqTwo@_dd`2&T}~R
zU=!=*us}CAx1!U!+f#0CN}V}l#);JFvD51RJeEKFmz_`MMEL$+SLYO;vy9x3;CRmZ
z{hpZmzh5t(%Quinxw<NJ=d)San+hHt%DKJmt^Kzu28ILwTP4%y6uKQdcC2l+0z1Fl
znQ6MwMIVofKi_y<?)3Y*@4Hn_+J3(?*|z#yN>Y+izum74wr0m`Yon*DdQW?@>-D<X
zWztuE-~a#bPVM)*KYtvzpXXouD%d?&-Jj*8yWOXWJ^lUZH8nQzzb;KLdT^jo<>bG=
zzd;dWX*n}=b=cE2o6nv4`F#F->-T#;XX-y&xBDHKyZOAG_3E&-r}looH(MogZ&m5K
zU9VPU9<Td6`~I0%S6Bak8)JUABv`Kg&qtleO)B}-w{K5Ukv7Yz;M4yYY+dmo!S46X
z^J&-D#opYWAHQz@zh8geq}xls`~O7Ue&*|SyY=dS-@b2TYC2Wcy6nlO(|V`Rn%|$J
zA}K5DJIUt50p^{*Uac;EaG)`hk(q%(-^DoX+?<)N-D14?yKiku^`4aS@zGI99=5|D
zeP^3JT{7A4)SsW9jg5?qWPYFYubafJzo+2VlIwBRxoKx-O*PHF_T-fIdYi23|Ns8}
ze86r$V`uU6w7<W;M(!@lEqi}&?rHt~Hl9Ys&(5fv<gfp6xaRNc`12swRDOPzdUlqn
zf3@N3Yim!>GR-c!>}&pX>iU{gyZ=AWt9yp6i<vq9-<Rc<6(15NJ^AqP@Xw#;>*sOn
z?Raqi+}G~-KT4jPN?u+91&(q0xteR+6W7M>HdCKl5;W<_w%d8LzggM-`EVE%ux7cp
zrWBvIHTNt!E?chRxh?nhwEKUanM+DbpWb>sZub3u-?s1ka>;wL%JrCH-$_qqB=>nv
zvib3#`R9jr`#EQ4n?LW(uX()L%ASECWA;Q9VPWB$n^L{ys^4t%@$-9jHovae&E0)-
z#m7gP=bQh$ej9#zn(pa2mc?xcKltR{+hbY%{oUE+_J3cVnP+RQKEI~O?%T%x)WdDO
zm+g+mZ%lH1c6RpkjT<+Dyz%{h{r}77e((FfH^1VK>hzdNZ*Ol;KR?ela#u-apY69B
zId^s#o)n(Awf_IVJ&$GISDdPpt9r38=iVO6^_6F{KfMayZ?!r7{JF^Vxl^m(?Nqle
zds7j1{nz`Ro}MR{y!FrCxN*b4L9X)2M3w)0V&BdwK6g?wea^(k{q}V`qCU6V|9QBg
zQg7dnM?HOge1`=X7~)o>shs@rqXLuy@08unojGUDnIAtYCaH%xzT5l#-kV!nwWGJ^
z$@a;A><ZuW$nx*ycKJGs;NalO)6w^g{!Clht+z`9#C_1nKCkHC^gT~hElXZpxO}eq
z(@Ayy`udxv<EE+n{C)rbyonPh>csD>`N4B+SLy4bdzH_h-bn7RJymIzb7O*YJKxiN
zzu!sEyT5k(y;)D@Yb(3UM231!+W+tC`twgdO;*{QeqN64aN%*;=}$VR&Q!PFbZTNs
z#arVvpa0LEsGkQV?h@lkPmT!tpUGT4cUrHs`Lq7|KaUMe;{N}-{`{$aedWH-bKk3Y
zis{8zyzQU=hwbN0i>Fh9i|!O2f7)mL?!>jV(aZmynQi{wGXBgw+v>Lc_FpbIdrq<}
zex~9%O+S9#?svPi_y7O<zW8ykdD_oUPyd(ATfY11s}uVoH>at3mc6-QSmW^b<-S$r
zzrVdb|6_GU{O?=W)jaEdo{oR^Zuk3h|Nj2|eD{4_`7JvJh6+Qex;b`+h7+apb|@A<
zKX-O@+}Bkq{w&81wQ?69<~4tE#`wI<zL#}sZf<U$9yIgw-7m4P{C&pw{FynH#h-ff
zYm`AL?cUz%;;W(Iyz&9{>*~HNmQVfu?k=c=*!TbM`{!FO`$@B%=v1FKW2yJ_XT|e>
z$N1U*{W7QO)k=TM<A1;3pPzes+tVM9`_Dgl^2DGgZ~xzKbBa!B{`@@u{~YW0dyLiR
z6gc_We!U`NS7R|frpWW&&vWH=Pn{pQhna`1iJ17l_I>sF7giu6K_%k-eYKH0i&8<w
zzWkpD?4FbOYhO5@f4Y>Bp+USQu>qtcE9=#Y+iS%1<Ni!}{C_qmi^l&v75=Hyzvj`3
zw-+y7ta%-M|J1j)w>Rh9+@uq|P3QaF^7|idq`&rfvgh~R_vhU0e_h=3_ig_9cXxMx
z2F2yALXaCigL2!7_Gk0ooZvdX``*`enFmdapPg9~u~F%yeg5HHe?FZyuK)L^r?2nX
z+WgvVyU#PvtDM{-u=B;DZlmmLYkGQnQ{Ua$dH%<&b$dRYim7<mYWc85*vQCe()GRX
zN`HRazJKoK^LD=_&oeSG=$jmu`FEY2|DXM~%FoYg9&*Q@`1SR*tvMqD!};d_UF8qk
z`D9PU|NAsOrtqlf&jajs3U&+(4=Rlw*V{ii`u^4G_2*c{V<sH!7U$1j%*4R(>)-0U
zgG>wz^Wy)DYAY}>9N=z7ZaFY8G)OTrF)&==5MW?f;MTyvz+lS6!oaXXP=SHLp?6g2
zXb6mkz-S1JhQMeDjE2By2#kinXb6mkz(@*#Kl}%zxpvyNu0O)Sz`)??>gTe~DWM4f
DzZtJI

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png
deleted file mode 100644
index 0651450d8fa006704c9c5515205344966a38b6e8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5871
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

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-with-a-button-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-with-a-button-1-snap.png
deleted file mode 100644
index 59b3da1d0aa2452a94b2eb65bc84fc27c0ef047e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5624
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

-- 
GitLab


From 1ef9536f7f34e9e142cf1bcf4b3ece1b88b4f4fe Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Tue, 26 May 2020 21:07:01 +0000
Subject: [PATCH 04/12] chore: update snapshots

---
 ...s-sprintf-basic-button-placeholder-1-snap.png | Bin 0 -> 6198 bytes
 ...tilities-sprintf-basic-placeholder-1-snap.png | Bin 0 -> 6191 bytes
 ...ities-sprintf-interpolated-content-1-snap.png | Bin 0 -> 5871 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..806a90d2fe8a718e18a5045f0ccc48db40b31551
GIT binary patch
literal 6198
zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu<o49O9lq<
z51uZLAr*7p-mPB~&ieQG$L$plm5NjYjxcI(^!D3)^6bs0Okyk7^32f@F{xj&HZw9q
zE$>_MrmbGavwmiq_S&xy%dnp#?6q6#%#V#e$BsSoa#8jQtP62!Fwgt&_i*87Cartx
z_vXEN{E>ft@w<m}zVH0=xw7co&l<j4d#k^{TQu7=``VRHPfuq*KGu8n;>C-%9|wf?
z_V${Vytt5+oxS?mvuF3@*clq+tUMY@wpV?9wd?=C->(nL|0|F!K4Vz=VqyEYZyq66
zx8>e`^>X?Ab*|lFSC89$+gNqJ`rhT+%8U#bn0fcw9{4}&>FMd$-R(Y2w0gJWaaFZQ
z+_MYL{A<7OeP4U^!i9j-)Ahv_7#Q+{YOAUn{+rG=&tF%*|M%U!wruMkyja}7?(A&y
z@82XC7`{wkxasZg?*8@l_4V72KM<8EI-xl4G$TWWu&@FHgF_DkBLhPc3kL&(fU*Mv
zLxTh(69dDMFF&8C+ehC2d9Hld+L-Nmv0JxnxnleM&gI<N>gwvbHJ?sy&Aq*?wror3
z>uXt=nJZ1Rul)&Uzc>G$jTr+&!Gm8t^7i|t=|o=2eR^rB_wK(tk55wd&N?&0@b}-c
z56hM<i`rR~YHDsC9(uL(dTe;V%_ooR=fB6*X}^5&VnuY`&ZXz9Ua!f@&0V`O`S>+g
z@z@Z4`#%Nw{omp*Uc4BntE>C<$K(F*-!vE)_MH4O(;(4lZS?ka*VaZ~-&*wY(o)m3
zGc$hOeP0(ockbNS*VA>Q!-Um*EEdSx|9moe{jNV@pVsEruAZhJA9p>zzSj2B3FWT`
znE9_fIXOA|*_oMJv#zeXC-<KBV;G+Y14GfTIR%F}uU@%wrBrmu;>C;Qs^4t<b!E9-
zsQ$hmN!O)csL!idWR`m?<ni(T^|`mVg?f8?>qcx?;Ai{w$}Ic(y6v|Y=<WG%=+|TU
z{}JJFm8oavSQgKJx@y((c~z_I{{K9GU32-IpyhLlyw1)tU0wF(Mqp^@?d|#Nr%js{
zwJj$yw%{P^)myis(&yKH%l_B@TmIjNcB|)einHF_*jRdyRs71UtE*S9dNs*gZ{_T~
zT`O;I+kUq!I=1MfYW@lRkKgzIul1d2w6xFu-;b=EoHdTkY*)8rUd}q$#9I32<MI89
z$6w_B=04HPXSG6HjgjHO*)``6vdhOLAMbn1H9=H6EF?5EIy!o8#iP#H?TNaPo0jz1
zd^(Ypm$$C1t!-WD{vSv6U(G2#_j221`TswTn-)Acu<Pfu+1cOT-2APRe}CUzy}e&9
zN!is@=*H~WQ1|ci{OiT%ZNu;Xd1k(P)vE{1{OeY&s{H)y>h}GA-&Va?*q-&|#Kh9q
zYq#%vby6o{!-9R^_r4FUuCDHtFkH0n*VXl5p;vc4pBMf8UUmL;^NjcR_U^9xx;p-?
zak)P@Go82nekIu7_G<3m4-XITt_xoszJA?lz1?f<ejMb#wsQHrDC6{VYo5=q-?!?Y
za7?$D?y8l+%fqs>vtvuIhHgzf-1h6vbGz{5<9%y0FE6`#YisuIZ-28Gx7+vIev62$
zc-VUN+O;tGUl-b6&B|W4a&7eXu+Xc^d}ps(x^(I7&<#I7KfnIv<>l3@zDZ9A4Xyuq
zI{ww4&*#@q_P5))%xC5$U4i(wHQ&WIFfi<~{jze^EKpL7*tjUJ=HpRN49_jO<azbR
zjfmXb+`IGGCGG2Kw(qYwCYgTa!NKO;O%EMxf4x||HTCqgUB6zfe!bx^-|ED}ZC9U8
zkB{TG`QY&O&d$x*yFqU55LC{3aG=q&@X?W9ujBv!TJ_uZ{hrTRM>+(rUbzw?9$!<q
zHgfYaP&!>cw=4=&3f#JVd-bcOCvNSlt)5%=>*f0Fcj2G5uCHCoXZ>b_)$cc(vp+pK
zX_|d)O;&#Xd#mZ<@iiOweQ4DWDK0JsMd-U-uh-q$nCxEr^K|^WRsUJ8udo06de`T3
z*00~~e!tFLzIMyLFH7~Witqn%G%G)UJtH&QmHxUfi&w3>&a-3h+gn>#r=6V@3d%A^
zyTz~Xsr;Pv_0?6=^mB8Vt@iI_F6w9H7Q51GelG$PRe_7$N?9Le&wZcGs>8sLA6vU>
z)v;db@c+NA@6S5gC3@Fs@!GX(=T$uFta>&xJ?rYK(BCX41l?sWE^f}dxoN4Dwe{+?
zYu83aMS-GAZ{Lqcuim^_!z*o8l53uFV#2!XwZFfujon?g_f=gxuk^LAzhvK6xQB-R
zeJuZfMO$0jEUVJ2zi-m*SFc+2``zyKpfc&z_4V=n&+gw2be9b+zf<UbxBPzX*O}*Q
zmX*D`6B+;i*Y)gIS5|JV`}+%2!2SLEzJ9&-`aPRw&6<_<;=;nxmrJLYt-b$Pc>WI;
zUP+@R_r9(x4=pY(1|@^iHye+K1qTP$K46w#@%8of@T-mNcjRh+eOcMcEq*QC{`XB#
zE`E5p{rZl=$Gc)bzUX{;dHH*D0sb#F)l#7JRcRWsS48NzTy@UY?c1;4+M1nxXGdXZ
zXz888<5wRXY<_*t`u&<!tFB$UX8vTs;WpmY|Nj2Ierc)qYXAAQ`@2%kuMJv%{n^>s
zyW{@9&97g*>c7jGD=ULvx7+_owEg$v@z)E^{8#<!e_fW7eSEb?#&VNepG;)%GM|;=
zaTN>ocD-0M%ep*o@Atj$*E%+{m2%Hh?zh>LeU6ctEhH3V`R=-V+w<>BnPdcPe`?G4
z?Nh_;+ikqkpalAR&3ya%y1$>M?_ZNXzjm9ImDQ@vn>VZZ&H3@)>i+cew=Z0{V0wR<
z?`*yoaBse;G)z3y0<w@--fmBy-LDs`s$MESzIN?e)Q*D0UP<F+Y<w~m53KVtR`g1n
zhoz^do0^!EM9Uec`G5jFZ|Bo#zrHNDj|~kies*SM`n<|zw{`8-Uym)n8+!KaSx`|1
zGF!I#&Bj>9q9cOtS2CB+4U7MID*RQ8u-}UEeV^yr+MR2ZFv$q$m9yQoE%$bqb35N!
zP(Xmv04PPRdbR7)=I6aXUw@2Z+`e7ad)k#ZH#fiDegALX-v58!gYyHg`JI5-X1S|Y
z{lCNX?UTRF?Hz@WU(d_#H~&?`$WZb6Mb&q!x<5Z&y?OIy*RPGocN9MUw)@{!pIIg=
z^L9LJ+x2SI>Ti*GIXP=?=j~oQujbRqSvHkLzVmE$&a3<Na@V6S?Wz)?>U$RcGmVy}
zotY81e12Wk+W7r-^V5~iS-;;CwLLF(Ztb_5wpQo<*?hlK{Pkmh{hoLGe!si5B{R6R
ztnAt}-RM{Ms^71@|L@y&P@y7aoaQ52_v2yd=d<S5x8>f>I^4$l_3!)o{kLx2TD5ZJ
z%ToEzPZ_tTo}PAVQ>ypflFPn#<pk<?%37C&{Qvhi`^$@qSC{+GuljJ1{q;%p`QVb+
z%Gx^n!UD&u`|JOM#8)p~yf|!aRA{%j{=04c)7hUip84)JPoIGyUp6+}Au1{=>*=Yf
zzjF$n%}l>GGkxC8+}Pyg$9A{h{Zu++n|5x_&9}TC@10)k*1PI<{{Gti&TsSoPge6?
z<vCgHZTatm&Ftm5^|vyYzb&7=YI@#VDXWqf|9@XwJl*=$ip8&Xy<WF^{+}o6Uz_Fs
zEZCNJHwqMg7Z<x<H{bWMcU@)P-mlkoeLN=pda?Z93{x{RaJ5nU^{TDavw01(ZL7;b
zfxc>$pUuZ3yPnO;{<iz?kxt>)=KFv8`p&i5%4hjxg4O>&pI_g~UcVMpBkAq`^J&-P
zKI>N?f!q1}_dYu_GkERVwWaqepI_Zm`FYp3jp_>G`f-0|g|Gbe{r&$oNEoocy|=fz
zJfHvL{cYLT*HwMHnf|&<d)*39(ZBQgyx(27<Ldu@jh%n($bYr}ZVU|haqIsw9E?8j
zcKiLf%gg=OZ`-zQmRW98em^q<Lw+>x`n@M--|vw$&N|j3x!0DBfnm?vy}Iif7#JA-
zOQSaeIVS8iF*Cc?Cu?0*%@cR9Pu6<X#*G`dA7@}#(9Uuqj?ezjhhLxP|G#rP`2*Lr
zb+OUy@^uyY{frC_{Cjon+P;6y$j)B<`~Cj?|Ng$OzrG@Han^wb#=W*ep<mC}|J(fU
z%X0gxhxzSe(&rSqfm{dDwU6`f*Qm{DzPj=I_L$|}iIA0*-D}JD_0rlxP%hiHZCh4e
z-n+Mj3=A(6!OhePHWmhk4nf@QSPlUO1_d{e_Y9dvm5zqMXb6mkz-S1JhQMeDjE2By
m2#kinXb2365P0^Vfvqh1)ilc=FBljY7(8A5T-G@yGywqPPC3T_

literal 0
HcmV?d00001

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec2e2491d08744caed735a2fad34fae36e2b5ab4
GIT binary patch
literal 6191
zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu<o49O9lq<
zm!2+;Ar*7p-l<)4t@Q8lkJFDUFPO{hq{ew>r)#pPWIFHH0~;?K&SK&d??{rkw<adb
z^pe@;u;!vuNvBWb#cb}~xy;Y^*2Tr1KEVo?1B~+xTwnPd?QHXqnb7y?cXQ!d<%}0^
za_uW^%%1<e_hF~q{MUbqZP&m5Uj6O%#^mFD3=9k+8CBcW85kJeShH|2Fa)?YFfcHr
zvT*$U^7ZS|wQF_f&Yk=ITL=R~1%H;++bx$rHOv25aR1!AdGoex-THLd?7Uao>u+vK
zm9(#`*_Ly2(`|>@=J|fn(b4m2KArsks^$BWxpi;F<7*73#}s)k^O-s6<KyG$kB)Ty
z{4{<49Q*%2&%ZzM<G**_?zh{vY~8wa{rdNJ=W#JG{BBs*DXgA$v`h4F*}9mWo9_QF
zkKCB#daPG^`uDx>Yj^Wrxpiw6yIh6BV)uT(Nj1-{@1Kk<zkAi<-><j-L#@l+ocQ^C
z{(R}Y9g457ulJ9SkFTn(E<SJj{mGr;^Jjm3eSQC}=Dx-M?Em;NFjTzHc=h6ihrhpn
zRaKRgb@;lNnT3y!J?*dmle|CwSoqqgseOHYd!>GKs?V#q{PusSv{}xHS*F=WB`+?N
zl$Sr>_xqi9d3kxC)vFae(q=l@*VcGW%DKHwms?!#%*W&M^FKa5{=9hp@0e+Nv9~0i
z&;S1?{no8pM(O9~+$p=AJJY7JNX>WFl-KL`+ht#0cXmzW=1UhZPGsd4dvY~A-gnZP
z`2BXDpPfAoGN`Yw@63FA``g=cs}Jv77qio-_}Q70Eu6wdcM6X`eblXgZkg}wNh;^<
ze&^h}b*t!B=5o_>_e-}vzT~a%JL${}L*?!Fs<J1g{Q2>5=f7XCrJujs|Nr04*Xwp0
z<=)y-^D21$sXsqIe_mhzcXi>PwQK56PEyUx&p&^d-~P|GdVL0lJ?198vess6*RJhd
zt+0O2C$E2BmfNSkyR-A=w%lmBsuv4YPCo9ppC=wyp(w2GcV?Py^rdUprp?aZXL(${
zzGmItZ@22UJI<~9^)hmEn(w}ETh~85#I1iP*V^;iy4cyD&spmqm#fa{v;B6X=KJpZ
zXRob|o~*KW@7~Pp?9;14SA#-JruNIlnU=+Aa+Oaen#Z0=?zf#b+279cxJ<FnvokX%
z@BjC8z2_w3^ESrze;)Gxo?CrXH2ldK<MVfNdk!|UKW|{>JK?RrcgpSj{kGEPd1n&a
zWv6Mc-(wUT8*BM)$Ky#V@&A8aFMhlAdfMY-y)R$CKE12-wNd@QKX(d`%X&^~WM)^p
zDJlB-`T6tR`uk@1&NfTExX5+qi$&d^jtKjwoSvq;^X0PHpMKx}Z?}HmudH*{@AurP
zd_MQ)j>6<^IX5RQ^`8Fhxc$G6a@ThiK0a3SdG`G?i~H?nt&QIPZ0Yp4Q){>1n{~8X
z{QvX&zv6D}tF6}C^<t6D=QGAP_f!^7(~F(8Zr!?LANR)o|9swl{``MmmV-ike*+^!
z!u=~-{{Q>^d`5C#Cd-LeS65F~dHeS5&m-z~7kBVxAMFyg{BptBxa!Lb6LWL(Z+9ym
z_gemZGWj=e)z_=x%a<-ywf}Xoe^bWAMR&JVS66>ts$Z+A?ACKacl(`5ployA_Ir%p
z&L@*ptoPUYPs(1mQw@}$KRrEdoONY|`5%LQr_Y+-pL1G&zs>1sx~ES}RQ|j+zgF9`
z=+(;Q&&>D#^o^^0I#tCwfAgz%@9yQ^^EAr1upp-3AZun;)~Tn{<L8~Pd1gG*sx)ig
z_r32;*VWnl`EdB>VflX(u3ftpQ~UL5<j$hhb9TSqsGOXn>OD#2_uK99lb*=`|Ka}Z
z?Ck09-o4|Iv$43nJ^%cNhlh)w&n-8T`%?GiqI>cE+V81%ca{Ep;ch?c>FMdqcki}N
zKHldW9v;3e|Ng$)Htl?}vv$ARrTzVWeZ5@8gT|QBtD&Bg_WyaRpZ`nl?{4Y*J%;i>
z4zN#B`F^)Ne*gF6%gcOcT9@a&+xPpO&rBm#&rc7U`S(5jntx-1;`2Ghe(!cZpI7te
zvHbnlI~f^1+`BSGMOIcea&J}Xw%ps(LRW`9ojm_f3LBryjBnq*)tztlnPai>zP;VU
z7GY4?;b!n=ZT0)T=KA~p6zT1F&;;_*;dcJ>JD<;+egEIL?SJ>F&Ns~tbL*3tIc?fB
zpIIiF{`P;r%<i+U{`RIv#?ol*+O?LCdyGFlne6|pRXolkJw2U`M`A+i>1nDrB_sFl
z-8<8!@{`<g%coO<FI~Mlm0N$0!Q8oXU%q{Nc76Td*JoxLtFI1Qn`QIHF7wio9$9NM
zcG;4Ea~6+#R89u_+g{CI!^q5*a;!(v^38_BMNcNWt9hoKn=@0<xh>_=5>L;vd+WY@
z-~ZqC<T;6#Z{D1lq8a?@!(smP&(F^GCa?egdH#Q!`G4P}U%qzj8b^ce(NniC-nlbp
z^LaaKU0q#JtS8U&ym#r>?AfzFx9Zm@GPCpLv}iLh{9d<AWu`%*)3*Hk^RBKA|IXd}
z?b|n-e?J~qKAV~T>4G!=TQP-pnW7W7t1eEDud}SJt<B8O_m7T_29<ZmB-59yU$1}O
z{(sHmJ&A|gOzZ3(G%$a<mA!uN%N>W?`SbtOd^pIi?ipA0a;b^AdHS&)$=-CCUAuM}
z)&BazBVq7>_qf%Y4TnGdJYR3uEv9?weckunXXaX)gEI8GozG?+v)sM!ssE*lzQrq7
z{*O1y%goGVxwY>0q&6POOZnBu`(%6Pe}8gRJpN8@e0h2Kx;>vx)xEzy@6E1Pli%!-
z+Ps~OU+xY^8#BMn2E+69+s$9+=jMvaF))~zs9HNGota@6xh*I1-?#1iQxCOpdQR%E
zd7><7RgzKnu{&PHv(N6=i}EL~?fmld9GlrvzrMO!`Jj>g*I)CZCnvVszT00PaQ|y!
zb@&lbA>VKJD+5$S>csD}F-|*k<FUl{`*qdJ{O8a6eBR#P-~MmOuV245mA<~V=l|dL
z`Ex!$<gd5zEIKY*o^p1U>C3lobMG*1eSIUk^vA<?bx%-b`}Fkm@74Z&md|F~Jy-u`
z<MBx<>hmg+Kslo3|L^<$n?C=XDQjJ3@-OJ-uF}^<|Nnk}zVrFK*WV}ne7!byciH;?
zBJZOk|L=F_Vqh@YH|yPt7bhmEdK)Dj>5wTrBIsFGS7Gz(#p2@Ay4zFk>?q94%)I%#
zarW%ZiHF-jO^=;Bci#WDqwuj&&W#N^aeFM%=az;|da`Qux>LsIZ6>>Ri|u`TG^YG+
zsibXHNmNwSrj(PDdL)gP34&6Ihn2N;@yDa$>2Gdq?B)NnzWm8V_q5B)d|$qNd9qV|
z-j3TJ&z(D0^CnsTbPK2OrmU;0&djsjegC6=-N)|y?031jxst|dK5{i54j$XA=<Dli
z`KUwr)9U!YTFq>{ugd?e2wXhr&7N78uU?%B$|o-_EWEiP(b>=T>lKiDEdP8seEIU_
z%R6kdk8}v`-uupxU3N;!^J1gt^Qzy;$)Bm;`~TQ4Mur>aChw-tv?xsa_3M{ZxP947
zgTzB}-~X!zFZVl}Iz4t;<>zN_x7ijvI1p2KRJ8I@r#h&r_L*&_>u>utWZ$o=>-Vj7
zee>(tza^9XPKEFLG}ULGjpgg>>+@}{>^uGD=H|<nFHfFnoWAd2g#4ce?4M7^|1(mb
zQ{dFbFF)_uvu83D4;m${%W}kYA|_1sv(oegRRw2enQA+?@pu*&7a!}9oD9mtmakSU
zzIRRP+wJ`QpeUF-cdq4+2hEo+T>>@Zo?r6TzpHCEDdpFfm!NWBfn&2#)|C}HF*^)E
z<zpMK^fYIFTNBSs2?v{MUO3C2I?%}c`K5oo)%_pG%zy2T_bmGLayh6jTDx{_HP00D
zPk!s=85(L2*ICEaC;zX$vG@DE+4=RqZ@+x^?pq8K1H&HfZ=L=R*YEunHLv#D&6u*A
zsg|$TY(B!yz_7=A*1yl1|NsAeqHcdubNQS}-@bi2Gt2b#-FbWr3~x4nTN%B9fuW)N
zx?LeF3j@QC`w9*W3=Kw1EDQ`9%A?HDa2QPlqnTl}Bp59bN2`O;YH_qpFxoa6Z5WQW
eimBf!{#^g8+tp;+hIODpcLq;aKbLh*2~7aQT<j45

literal 0
HcmV?d00001

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..0651450d8fa006704c9c5515205344966a38b6e8
GIT binary patch
literal 5871
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

literal 0
HcmV?d00001

-- 
GitLab


From 917e86e72f30bf24dabfcae9c23348643a453b1f Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 27 May 2020 09:46:41 +0100
Subject: [PATCH 05/12] docs(sprintf): Add arbitrary HTML tags to example

---
 src/components/utilities/sprintf/sprintf.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 00e22cd847..586bf25f06 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -52,9 +52,9 @@ The example above is formatted for readability, and so its whitespace
 is not technically correct, however, `GlSprintf` _will_ preserve whitespace
 correctly.
 
-Note that _any_ arbitrary Vue component(s) can be used within a scoped slot,
-and that the content passed to it can be used in any way at all; for instance,
-as regular text, or in component attributes or slots.
+Note that _any_ arbitrary HTML tags or Vue component(s) can be used within
+a scoped slot, and that the content passed to it can be used in any way at all;
+for instance, as regular text, or in component attributes or slots.
 
 Here's a more complex example, which `<gl-sprintf>` lets you do in a breeze:
 
@@ -65,7 +65,10 @@ Here's a more complex example, which `<gl-sprintf>` lets you do in a breeze:
       <my-vue-component v-gl-tooltip="content" @event="handleEvent(content)">
         {{ content }}
       </my-vue-component>
-      <some-other-component />
+      <p>
+          {{ content }}
+          <div>{{ content }}</div>
+      </p>
     </template>
   </gl-sprintf>
 </div>
-- 
GitLab


From 6860a3f9e8d42fe722ab6280bfd13e1d9d0ac168 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 27 May 2020 11:25:00 +0100
Subject: [PATCH 06/12] docs(sprintf): Explain white space handling caveat

---
 src/components/utilities/sprintf/sprintf.md | 68 +++++++++++++++++++--
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 586bf25f06..5799b68375 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -48,10 +48,6 @@ will render as:
 </div>
 ```
 
-The example above is formatted for readability, and so its whitespace
-is not technically correct, however, `GlSprintf` _will_ preserve whitespace
-correctly.
-
 Note that _any_ arbitrary HTML tags or Vue component(s) can be used within
 a scoped slot, and that the content passed to it can be used in any way at all;
 for instance, as regular text, or in component attributes or slots.
@@ -103,6 +99,68 @@ contains the string `Some author`:
 
 ## Usage caveats
 
+### White space
+
+`GlSprintf` does not handle white space in scoped slots specially; it is passed
+through and rendered just like regular text. This means that white space in the
+scoped slot templates *themselves*, including newlines and indentation, are
+passed through untouched (assuming the template compiler you're using doesn't
+trim text nodes at compile time; `vue-template-compiler` preserves white space
+by default, for instance).
+
+Most of the time you don't need to worry about this, since
+[browsers normalize white space][1] automatically, but here's an example, using
+punctuation, where you might want to be conscious of the white space in the
+template:
+
+```html
+<div>
+  <gl-sprintf :message="__('Foo %{boldStart}bar%{boldEnd}!')">
+    <template #link="{ content }">
+      <b>
+        {{ content }}
+      </b>
+    </template>
+  </gl-sprintf>
+</div>
+```
+
+As written, the literal markup rendered would be:
+
+```html
+<div>  Foo <b>
+        bar
+      </b>!
+</div>
+```
+
+where the white space (including newlines) before and after `bar` are literally
+the newlines and indentation in the source template. The browser will render
+this as:
+
+<div>  Foo <b>
+        bar
+      </b>!
+</div>
+
+
+Note the single space between `bar` and `!`. To avoid that, remove the
+white space in the template, or use `v-text`:
+
+```html
+<div>
+  <gl-sprintf :message="__('Foo %{boldStart}bar%{boldEnd}!')">
+    <template #link="{ content }">
+      <b>{{ content }}</b>
+      <!-- OR -->
+      <b v-text="content" />
+    </template>
+  </gl-sprintf>
+</div>
+```
+
+### Miscellaneous
+
 While there are a lot of caveats here, you don't need to worry about reading
 them _unless_ you find `GlSprintf` isn't rendering what you'd expect.
 
@@ -142,3 +200,5 @@ them _unless_ you find `GlSprintf` isn't rendering what you'd expect.
 This component uses [`String.prototype.startsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith) and [`String.prototype.endsWith()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith) under the hood. Make sure those methods are polyfilled if you plan on using the component on IE11.
 
 > NOTE: These methods are already polyfilled in GitLab: [`app/assets/javascripts/commons/polyfills.js#L15-16`](https://gitlab.com/gitlab-org/gitlab/blob/dc60dee6ed6234dda9f032195577cd8fad9646d8/app/assets/javascripts/commons/polyfills.js#L15-16)
+
+[1]: https://www.w3.org/TR/css-text-3/#white-space-phase-1
-- 
GitLab


From 822664ef022cbc6d667745c4ecc99d7c021269a4 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Wed, 27 May 2020 11:29:54 +0100
Subject: [PATCH 07/12] docs(sprintf): Fix scoped slot names

---
 src/components/utilities/sprintf/sprintf.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 5799b68375..b96eabf972 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -116,7 +116,7 @@ template:
 ```html
 <div>
   <gl-sprintf :message="__('Foo %{boldStart}bar%{boldEnd}!')">
-    <template #link="{ content }">
+    <template #bold="{ content }">
       <b>
         {{ content }}
       </b>
@@ -143,14 +143,13 @@ this as:
       </b>!
 </div>
 
-
 Note the single space between `bar` and `!`. To avoid that, remove the
 white space in the template, or use `v-text`:
 
 ```html
 <div>
   <gl-sprintf :message="__('Foo %{boldStart}bar%{boldEnd}!')">
-    <template #link="{ content }">
+    <template #bold="{ content }">
       <b>{{ content }}</b>
       <!-- OR -->
       <b v-text="content" />
-- 
GitLab


From 237da9a1e5b3a433f728f08a5c8aed88d3ed1761 Mon Sep 17 00:00:00 2001
From: Mark Florian <553096-markrian@users.noreply.gitlab.com>
Date: Wed, 27 May 2020 13:33:39 +0000
Subject: [PATCH 08/12] doc(sprintf): Don't use 'literally' too much

---
 src/components/utilities/sprintf/sprintf.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index b96eabf972..ca05581984 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -134,7 +134,7 @@ As written, the literal markup rendered would be:
 </div>
 ```
 
-where the white space (including newlines) before and after `bar` are literally
+where the white space (including newlines) before and after `bar` is exactly
 the newlines and indentation in the source template. The browser will render
 this as:
 
-- 
GitLab


From 0ffaad857a20c31e18ce52b2d04201b57d92bef3 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Thu, 28 May 2020 13:05:51 +0100
Subject: [PATCH 09/12] doc(sprintf): Name use cases, not concepts

- Describe use cases rather than attempt to distinguish/name types of
  placeholders.
- Do not use the word "interpolation" confusingly or incorrectly; in
  most cases, `placeholder` is a better word.
- Add Overview heading.
- Reword language about Start/End placeholders.
---
 src/components/utilities/sprintf/sprintf.md   |  43 ++++++++++--------
 .../utilities/sprintf/sprintf.stories.js      |   2 +-
 ...printf-basic-button-placeholder-1-snap.png | Bin 6198 -> 0 bytes
 ...ities-sprintf-basic-placeholder-1-snap.png | Bin 6191 -> 0 bytes
 ...es-sprintf-interpolated-content-1-snap.png | Bin 5871 -> 0 bytes
 5 files changed, 26 insertions(+), 19 deletions(-)
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
 delete mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index ca05581984..f40e4a4715 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -1,26 +1,30 @@
-# sprintf
+# GlSprintf
 
 <!-- STORY -->
 
-## Interpolated content
+## Overview
 
 The `GlSprintf` component lets you do `sprintf`-style string interpolation with
 child components. Each placeholder in the translated string, provided via the
-`message` prop, becomes a slot that you can use to insert any component in the
-rendered output.
+`message` prop, becomes a slot that you can use to insert any components or
+markup in the rendered output.
 
 > NOTE: `gl-sprintf` does not translate the message for you; you must provide
 > it already translated. In the following examples, it is assumed that
 > a `gettext`-style `__` translation function is available in your Vue
 > templates.
 
+## Displaying messages with text between placeholders (e.g., links, buttons)
+
 Sentences should not be split up into different messages, otherwise they may
-not be translatable in certain languages. To help with this, `GlSprintf` is
-able to interpolate between placeholders suffixed with `Start` and `End`, and
-pass whatever is between them to the scoped slot of the base name, via the
-`content` property.
+not be translatable into certain languages. To help with this, `GlSprintf`
+interprets placeholders suffixed with `Start` and `End` to indicate the
+bounaries of a component to display within the message, and any text between
+them is passed, via the `content` scoped slot property, to the slot name common
+to the placeholders.
 
-For example:
+For example, using `linkStart` and `linkEnd` placeholders in a message defines
+a `link` scoped slot:
 
 ```html
 <div>
@@ -75,10 +79,11 @@ cannot easily be used. In addition, a JS-only solution is more likely to be
 prone to XSS attacks, as the Vue compiler isn't available to help protect
 against them.
 
-## Basic placeholders
+## Displaying components within a message
 
-You may want to use a placeholder to indicate where a component should be
-inserted, _without_ providing any inner text. For example:
+Use slots to replace placeholders in the message with the slots' contents.
+There is a slot for every placeholder in the message. For example, the `author`
+slot name can be used when there is an `%{author}` placeholder in the message:
 
 ```html
 <div>
@@ -167,25 +172,27 @@ them _unless_ you find `GlSprintf` isn't rendering what you'd expect.
   a component's root, it must be wrapped with at least one other root element,
   otherwise Vue will throw a `Multiple root nodes returned from render
   function` error.
-- If a slot for a given named interpolation _isn't_ provided, the interpolation
+- If a slot for a given placeholder _isn't_ provided, the placeholder
   will be rendered as-is, e.g., literally `Written by %{author}` if the
   `author` slot _isn't_ provided, or literally `%{linkStart}foo%{linkEnd}` if
   the `link` slot isn't provided.
 - Content between `Start` and `End` placeholders is effectively thrown away if
   the scoped slot of the correct name doesn't consume the `content` property in
   some way, though the slot's components should still be rendered.
-- If there's no named interpolation in the message for a provided named slot,
-  the content of that slot is silently thrown away.
+- If there's no placeholder in the message for a provided named slot, the
+  content of that slot is silently thrown away.
 - If only one of the `Start` or `End` placeholders is in the message, or they
-  are in the wrong order, they are treated as plain slots. This allows you to
+  are in the wrong order, they are treated as plain slots, i.e., it is assumed
+  there is no text to extract and pass to the scoped slot. This allows you to
   use plain slots whose names end in `Start` or `End`, e.g., `backEnd`, or
-  `fromStart`, without interpolating content into them.
-- Interpolation between `Start` and `End` placeholders is only done one level
+  `fromStart` in isolation, without their `Start`/`End` counterparts.
+- Text extraction between `Start` and `End` placeholders is only done one level
   deep. This is intentional, so as to avoid building complex sprintf messages
   that would better be implemented in components. As an example,
   `${linkStart}test%{icon}%{linkEnd}`, if provided both the `link` and `icon`
   slots, would pass `test%{icon}` as a literal string as content to the `link`
   scoped slot.
+- For more examples and edge cases, please see the test suite for `GlSprintf`.
 - To be successfully used in `GlSprintf`, slot names should:
   * start with a letter (`[A-Za-z]`)
   * only contain alpha-numeric characters (`[A-Za-z0-9]`), underscore (`_`) and
diff --git a/src/components/utilities/sprintf/sprintf.stories.js b/src/components/utilities/sprintf/sprintf.stories.js
index 680e7f69af..8af651c4c2 100644
--- a/src/components/utilities/sprintf/sprintf.stories.js
+++ b/src/components/utilities/sprintf/sprintf.stories.js
@@ -20,7 +20,7 @@ function generateProps({ message = 'Written by %{author}' } = {}) {
 
 documentedStoriesOf('utilities|sprintf', readme)
   .addDecorator(withKnobs)
-  .add('interpolated content', () => ({
+  .add('sentence with link', () => ({
     props: generateProps({
       message: 'Click %{linkStart}here%{linkEnd} to reticulate splines.',
     }),
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
deleted file mode 100644
index 806a90d2fe8a718e18a5045f0ccc48db40b31551..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6198
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

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
deleted file mode 100644
index ec2e2491d08744caed735a2fad34fae36e2b5ab4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 6191
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

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-interpolated-content-1-snap.png
deleted file mode 100644
index 0651450d8fa006704c9c5515205344966a38b6e8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5871
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

-- 
GitLab


From bbf35c1095c53dae147f476a042b7ee3a6031d74 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Thu, 28 May 2020 17:10:01 +0000
Subject: [PATCH 10/12] chore: update snapshots

---
 ...s-sprintf-basic-button-placeholder-1-snap.png | Bin 0 -> 6198 bytes
 ...tilities-sprintf-basic-placeholder-1-snap.png | Bin 0 -> 6191 bytes
 ...ilities-sprintf-sentence-with-link-1-snap.png | Bin 0 -> 5871 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
 create mode 100644 tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-sentence-with-link-1-snap.png

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-button-placeholder-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..806a90d2fe8a718e18a5045f0ccc48db40b31551
GIT binary patch
literal 6198
zcmeAS@N?(olHy`uVBq!ia0y~yU{+vYV2a>iV_;yIRn}C%z`(#*9OUlAu<o49O9lq<
z51uZLAr*7p-mPB~&ieQG$L$plm5NjYjxcI(^!D3)^6bs0Okyk7^32f@F{xj&HZw9q
zE$>_MrmbGavwmiq_S&xy%dnp#?6q6#%#V#e$BsSoa#8jQtP62!Fwgt&_i*87Cartx
z_vXEN{E>ft@w<m}zVH0=xw7co&l<j4d#k^{TQu7=``VRHPfuq*KGu8n;>C-%9|wf?
z_V${Vytt5+oxS?mvuF3@*clq+tUMY@wpV?9wd?=C->(nL|0|F!K4Vz=VqyEYZyq66
zx8>e`^>X?Ab*|lFSC89$+gNqJ`rhT+%8U#bn0fcw9{4}&>FMd$-R(Y2w0gJWaaFZQ
z+_MYL{A<7OeP4U^!i9j-)Ahv_7#Q+{YOAUn{+rG=&tF%*|M%U!wruMkyja}7?(A&y
z@82XC7`{wkxasZg?*8@l_4V72KM<8EI-xl4G$TWWu&@FHgF_DkBLhPc3kL&(fU*Mv
zLxTh(69dDMFF&8C+ehC2d9Hld+L-Nmv0JxnxnleM&gI<N>gwvbHJ?sy&Aq*?wror3
z>uXt=nJZ1Rul)&Uzc>G$jTr+&!Gm8t^7i|t=|o=2eR^rB_wK(tk55wd&N?&0@b}-c
z56hM<i`rR~YHDsC9(uL(dTe;V%_ooR=fB6*X}^5&VnuY`&ZXz9Ua!f@&0V`O`S>+g
z@z@Z4`#%Nw{omp*Uc4BntE>C<$K(F*-!vE)_MH4O(;(4lZS?ka*VaZ~-&*wY(o)m3
zGc$hOeP0(ockbNS*VA>Q!-Um*EEdSx|9moe{jNV@pVsEruAZhJA9p>zzSj2B3FWT`
znE9_fIXOA|*_oMJv#zeXC-<KBV;G+Y14GfTIR%F}uU@%wrBrmu;>C;Qs^4t<b!E9-
zsQ$hmN!O)csL!idWR`m?<ni(T^|`mVg?f8?>qcx?;Ai{w$}Ic(y6v|Y=<WG%=+|TU
z{}JJFm8oavSQgKJx@y((c~z_I{{K9GU32-IpyhLlyw1)tU0wF(Mqp^@?d|#Nr%js{
zwJj$yw%{P^)myis(&yKH%l_B@TmIjNcB|)einHF_*jRdyRs71UtE*S9dNs*gZ{_T~
zT`O;I+kUq!I=1MfYW@lRkKgzIul1d2w6xFu-;b=EoHdTkY*)8rUd}q$#9I32<MI89
z$6w_B=04HPXSG6HjgjHO*)``6vdhOLAMbn1H9=H6EF?5EIy!o8#iP#H?TNaPo0jz1
zd^(Ypm$$C1t!-WD{vSv6U(G2#_j221`TswTn-)Acu<Pfu+1cOT-2APRe}CUzy}e&9
zN!is@=*H~WQ1|ci{OiT%ZNu;Xd1k(P)vE{1{OeY&s{H)y>h}GA-&Va?*q-&|#Kh9q
zYq#%vby6o{!-9R^_r4FUuCDHtFkH0n*VXl5p;vc4pBMf8UUmL;^NjcR_U^9xx;p-?
zak)P@Go82nekIu7_G<3m4-XITt_xoszJA?lz1?f<ejMb#wsQHrDC6{VYo5=q-?!?Y
za7?$D?y8l+%fqs>vtvuIhHgzf-1h6vbGz{5<9%y0FE6`#YisuIZ-28Gx7+vIev62$
zc-VUN+O;tGUl-b6&B|W4a&7eXu+Xc^d}ps(x^(I7&<#I7KfnIv<>l3@zDZ9A4Xyuq
zI{ww4&*#@q_P5))%xC5$U4i(wHQ&WIFfi<~{jze^EKpL7*tjUJ=HpRN49_jO<azbR
zjfmXb+`IGGCGG2Kw(qYwCYgTa!NKO;O%EMxf4x||HTCqgUB6zfe!bx^-|ED}ZC9U8
zkB{TG`QY&O&d$x*yFqU55LC{3aG=q&@X?W9ujBv!TJ_uZ{hrTRM>+(rUbzw?9$!<q
zHgfYaP&!>cw=4=&3f#JVd-bcOCvNSlt)5%=>*f0Fcj2G5uCHCoXZ>b_)$cc(vp+pK
zX_|d)O;&#Xd#mZ<@iiOweQ4DWDK0JsMd-U-uh-q$nCxEr^K|^WRsUJ8udo06de`T3
z*00~~e!tFLzIMyLFH7~Witqn%G%G)UJtH&QmHxUfi&w3>&a-3h+gn>#r=6V@3d%A^
zyTz~Xsr;Pv_0?6=^mB8Vt@iI_F6w9H7Q51GelG$PRe_7$N?9Le&wZcGs>8sLA6vU>
z)v;db@c+NA@6S5gC3@Fs@!GX(=T$uFta>&xJ?rYK(BCX41l?sWE^f}dxoN4Dwe{+?
zYu83aMS-GAZ{Lqcuim^_!z*o8l53uFV#2!XwZFfujon?g_f=gxuk^LAzhvK6xQB-R
zeJuZfMO$0jEUVJ2zi-m*SFc+2``zyKpfc&z_4V=n&+gw2be9b+zf<UbxBPzX*O}*Q
zmX*D`6B+;i*Y)gIS5|JV`}+%2!2SLEzJ9&-`aPRw&6<_<;=;nxmrJLYt-b$Pc>WI;
zUP+@R_r9(x4=pY(1|@^iHye+K1qTP$K46w#@%8of@T-mNcjRh+eOcMcEq*QC{`XB#
zE`E5p{rZl=$Gc)bzUX{;dHH*D0sb#F)l#7JRcRWsS48NzTy@UY?c1;4+M1nxXGdXZ
zXz888<5wRXY<_*t`u&<!tFB$UX8vTs;WpmY|Nj2Ierc)qYXAAQ`@2%kuMJv%{n^>s
zyW{@9&97g*>c7jGD=ULvx7+_owEg$v@z)E^{8#<!e_fW7eSEb?#&VNepG;)%GM|;=
zaTN>ocD-0M%ep*o@Atj$*E%+{m2%Hh?zh>LeU6ctEhH3V`R=-V+w<>BnPdcPe`?G4
z?Nh_;+ikqkpalAR&3ya%y1$>M?_ZNXzjm9ImDQ@vn>VZZ&H3@)>i+cew=Z0{V0wR<
z?`*yoaBse;G)z3y0<w@--fmBy-LDs`s$MESzIN?e)Q*D0UP<F+Y<w~m53KVtR`g1n
zhoz^do0^!EM9Uec`G5jFZ|Bo#zrHNDj|~kies*SM`n<|zw{`8-Uym)n8+!KaSx`|1
zGF!I#&Bj>9q9cOtS2CB+4U7MID*RQ8u-}UEeV^yr+MR2ZFv$q$m9yQoE%$bqb35N!
zP(Xmv04PPRdbR7)=I6aXUw@2Z+`e7ad)k#ZH#fiDegALX-v58!gYyHg`JI5-X1S|Y
z{lCNX?UTRF?Hz@WU(d_#H~&?`$WZb6Mb&q!x<5Z&y?OIy*RPGocN9MUw)@{!pIIg=
z^L9LJ+x2SI>Ti*GIXP=?=j~oQujbRqSvHkLzVmE$&a3<Na@V6S?Wz)?>U$RcGmVy}
zotY81e12Wk+W7r-^V5~iS-;;CwLLF(Ztb_5wpQo<*?hlK{Pkmh{hoLGe!si5B{R6R
ztnAt}-RM{Ms^71@|L@y&P@y7aoaQ52_v2yd=d<S5x8>f>I^4$l_3!)o{kLx2TD5ZJ
z%ToEzPZ_tTo}PAVQ>ypflFPn#<pk<?%37C&{Qvhi`^$@qSC{+GuljJ1{q;%p`QVb+
z%Gx^n!UD&u`|JOM#8)p~yf|!aRA{%j{=04c)7hUip84)JPoIGyUp6+}Au1{=>*=Yf
zzjF$n%}l>GGkxC8+}Pyg$9A{h{Zu++n|5x_&9}TC@10)k*1PI<{{Gti&TsSoPge6?
z<vCgHZTatm&Ftm5^|vyYzb&7=YI@#VDXWqf|9@XwJl*=$ip8&Xy<WF^{+}o6Uz_Fs
zEZCNJHwqMg7Z<x<H{bWMcU@)P-mlkoeLN=pda?Z93{x{RaJ5nU^{TDavw01(ZL7;b
zfxc>$pUuZ3yPnO;{<iz?kxt>)=KFv8`p&i5%4hjxg4O>&pI_g~UcVMpBkAq`^J&-P
zKI>N?f!q1}_dYu_GkERVwWaqepI_Zm`FYp3jp_>G`f-0|g|Gbe{r&$oNEoocy|=fz
zJfHvL{cYLT*HwMHnf|&<d)*39(ZBQgyx(27<Ldu@jh%n($bYr}ZVU|haqIsw9E?8j
zcKiLf%gg=OZ`-zQmRW98em^q<Lw+>x`n@M--|vw$&N|j3x!0DBfnm?vy}Iif7#JA-
zOQSaeIVS8iF*Cc?Cu?0*%@cR9Pu6<X#*G`dA7@}#(9Uuqj?ezjhhLxP|G#rP`2*Lr
zb+OUy@^uyY{frC_{Cjon+P;6y$j)B<`~Cj?|Ng$OzrG@Han^wb#=W*ep<mC}|J(fU
z%X0gxhxzSe(&rSqfm{dDwU6`f*Qm{DzPj=I_L$|}iIA0*-D}JD_0rlxP%hiHZCh4e
z-n+Mj3=A(6!OhePHWmhk4nf@QSPlUO1_d{e_Y9dvm5zqMXb6mkz-S1JhQMeDjE2By
m2#kinXb2365P0^Vfvqh1)ilc=FBljY7(8A5T-G@yGywqPPC3T_

literal 0
HcmV?d00001

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-basic-placeholder-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec2e2491d08744caed735a2fad34fae36e2b5ab4
GIT binary patch
literal 6191
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

literal 0
HcmV?d00001

diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-sentence-with-link-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-utilities-sprintf-sentence-with-link-1-snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..0651450d8fa006704c9c5515205344966a38b6e8
GIT binary patch
literal 5871
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

literal 0
HcmV?d00001

-- 
GitLab


From a8885ccee32ba94dd55971773932cc49509a503f Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Fri, 29 May 2020 10:34:12 +0100
Subject: [PATCH 11/12] docs(sprintf): Break up long sentence

---
 src/components/utilities/sprintf/sprintf.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index f40e4a4715..92df35acfe 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -19,7 +19,7 @@ markup in the rendered output.
 Sentences should not be split up into different messages, otherwise they may
 not be translatable into certain languages. To help with this, `GlSprintf`
 interprets placeholders suffixed with `Start` and `End` to indicate the
-bounaries of a component to display within the message, and any text between
+boundaries of a component to display within the message. Any text between
 them is passed, via the `content` scoped slot property, to the slot name common
 to the placeholders.
 
-- 
GitLab


From 1e8fe6b5ea3943f0a4c799d700d4a2a204e58885 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Fri, 29 May 2020 10:34:46 +0100
Subject: [PATCH 12/12] docs(sprintf): Explicitly define example variable

---
 src/components/utilities/sprintf/sprintf.md | 29 ++++++++++++++-------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/utilities/sprintf/sprintf.md b/src/components/utilities/sprintf/sprintf.md
index 92df35acfe..d5b2b4beda 100644
--- a/src/components/utilities/sprintf/sprintf.md
+++ b/src/components/utilities/sprintf/sprintf.md
@@ -86,17 +86,28 @@ There is a slot for every placeholder in the message. For example, the `author`
 slot name can be used when there is an `%{author}` placeholder in the message:
 
 ```html
-<div>
-  <gl-sprintf :message="__('Written by %{author}')">
-    <template #author>
-      <span>{{ authorName }}</span>
-    </template>
-  </gl-sprintf>
-</div>
+<script>
+export default {
+  data() {
+    return {
+      authorName: 'Some author',
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-sprintf :message="__('Written by %{author}')">
+      <template #author>
+        <span>{{ authorName }}</span>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>
 ```
 
-The example above renders to this HTML, assuming the `authorName` variable
-contains the string `Some author`:
+The example above renders to this HTML:
 
 ```html
 <div>Written by <span>Some author</span></div>
-- 
GitLab