@reuters-graphics/graphics-components 1.0.30 → 1.1.1

package/dist/components/HeroHeadline/stories/graphics/crash.svelte

@@ -0,0 +1,637 @@
+<script>
+  // export let assetsPath = './';
+  let width = null;
+
+  // @ts-ignore img
+  import chartXs from './CRASH_1-xs.jpeg';
+  // @ts-ignore img
+  import chartSm from './CRASH_1-sm.jpeg';
+  // @ts-ignore img
+  import chartMd from './CRASH_1-md.jpeg';
+  // @ts-ignore img
+  import chartLg from './CRASH_1-lg.jpeg';
+  // @ts-ignore img
+  import chartXl from './CRASH_1-xl.jpeg';
+  // @ts-ignore img
+  import chartXxl from './CRASH_1-xl_copy.jpeg';
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
+
+<div id="g-CRASH_1-box" bind:clientWidth="{width}">
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-CRASH_1-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 93.0303% 0;"></div>
+      <div
+        id="g-CRASH_1-xs-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXs});`}"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-CRASH_1-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 77.8431% 0;"></div>
+      <div
+        id="g-CRASH_1-sm-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartSm});`}"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-CRASH_1-md" class="g-artboard" style="">
+      <div style="padding: 0 0 68.7879% 0;"></div>
+      <div
+        id="g-CRASH_1-md-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartMd});`}"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-CRASH_1-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 61.3978% 0;"></div>
+      <div
+        id="g-CRASH_1-lg-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartLg});`}"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1200 && width < 1350}
+    <div id="g-CRASH_1-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 47% 0;"></div>
+      <div
+        id="g-CRASH_1-xl-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXl});`}"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai4-5"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai4-6"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl_copy -->
+  {#if width && width >= 1350}
+    <div id="g-CRASH_1-xl_copy" class="g-artboard" style="">
+      <div style="padding: 0 0 46.8889% 0;"></div>
+      <div
+        id="g-CRASH_1-xl_copy-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXxl});`}"
+      ></div>
+      <div
+        id="g-ai5-1"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai5-2"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai5-3"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai5-4"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai5-5"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai5-6"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2022-03-29 17:01 -->
+
+<!-- ai file: CRASH_1.ai -->
+<style>#g-CRASH_1-box,
+#g-CRASH_1-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-CRASH_1-box p {
+  margin: 0;
+}
+
+#g-CRASH_1-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-CRASH_1-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-CRASH_1-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-CRASH_1-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 14px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 12px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-xs .g-pstyle0 {
+  height: 14px;
+}
+
+#g-CRASH_1-xs .g-pstyle1 {
+  font-weight: 700;
+  height: 14px;
+}
+
+#g-CRASH_1-xs .g-pstyle2 {
+  height: 14px;
+  text-align: right;
+}
+
+#g-CRASH_1-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-sm p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 16px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 14px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-sm .g-pstyle0 {
+  height: 16px;
+}
+
+#g-CRASH_1-sm .g-pstyle1 {
+  font-weight: 700;
+  height: 16px;
+}
+
+#g-CRASH_1-sm .g-pstyle2 {
+  height: 16px;
+  text-align: right;
+}
+
+#g-CRASH_1-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 13px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 12px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-md .g-pstyle0 {
+  height: 13px;
+}
+
+#g-CRASH_1-md .g-pstyle1 {
+  font-weight: 700;
+  height: 13px;
+}
+
+#g-CRASH_1-md .g-pstyle2 {
+  height: 13px;
+  text-align: right;
+}
+
+#g-CRASH_1-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-lg p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 17px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 15px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-lg .g-pstyle0 {
+  height: 17px;
+  color: rgb(88, 89, 91);
+}
+
+#g-CRASH_1-lg .g-pstyle1 {
+  font-weight: 700;
+  height: 17px;
+}
+
+#g-CRASH_1-lg .g-pstyle2 {
+  height: 17px;
+}
+
+#g-CRASH_1-lg .g-pstyle3 {
+  height: 17px;
+  text-align: right;
+}
+
+#g-CRASH_1-xl {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-xl p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 17px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 15px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-xl .g-pstyle0 {
+  line-height: 18px;
+  height: 18px;
+  font-size: 16px;
+}
+
+#g-CRASH_1-xl .g-pstyle1 {
+  font-weight: 700;
+  height: 17px;
+}
+
+#g-CRASH_1-xl .g-pstyle2 {
+  height: 17px;
+}
+
+#g-CRASH_1-xl .g-pstyle3 {
+  height: 17px;
+  text-align: right;
+}
+
+#g-CRASH_1-xl_copy {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-CRASH_1-xl_copy p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 18px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(255, 255, 255);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-CRASH_1-xl_copy .g-pstyle0 {
+  height: 18px;
+}
+
+#g-CRASH_1-xl_copy .g-pstyle1 {
+  font-weight: 700;
+  height: 18px;
+}
+
+#g-CRASH_1-xl_copy .g-pstyle2 {
+  height: 18px;
+  text-align: right;
+}
+
+/* Custom CSS */</style>

package/dist/components/HeroHeadline/stories/graphics/crash.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  CrashProps */
+/** @typedef {typeof __propDef.events}  CrashEvents */
+/** @typedef {typeof __propDef.slots}  CrashSlots */
+export default class Crash extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CrashProps = typeof __propDef.props;
+export type CrashEvents = typeof __propDef.events;
+export type CrashSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};