@reuters-graphics/graphics-components 1.0.29 → 1.1.0

package/dist/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte

@@ -0,0 +1,282 @@
+<script>
+  // Hard-coding for demo purposes only...
+  // @ts-ignore img
+  import stepXl from './images/step-2-xl.png';
+  // @ts-ignore img
+  import stepLg from './images/step-2-lg.png';
+  // @ts-ignore img
+  import stepMd from './images/step-2-md.png';
+  // @ts-ignore img
+  import stepSm from './images/step-2-sm.png';
+  // @ts-ignore img
+  import stepXs from './images/step-2-xs.png';
+  let width = null;
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
+
+<div id="g-step-2-box" bind:clientWidth="{width}">
+  <!-- Artboard: XL -->
+  {#if width && width >= 1200}
+    <div id="g-step-2-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 50% 0;"></div>
+      <div
+        id="g-step-2-xl-img"
+        class="g-aiImg"
+        style="background-image: url({stepXl});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:26.183%;margin-top:-21.1px;left:55.6774%;width:180px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: LG -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-step-2-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.3763% 0;"></div>
+      <div
+        id="g-step-2-lg-img"
+        class="g-aiImg"
+        style="background-image: url({stepLg});"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:25.8206%;margin-top:-21px;left:56.2692%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: MD -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-step-2-md" class="g-artboard" style="">
+      <div style="padding: 0 0 55.7576% 0;"></div>
+      <div
+        id="g-step-2-md-img"
+        class="g-aiImg"
+        style="background-image: url({stepMd});"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:47.5478%;margin-top:-21px;left:32.4915%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: SM -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-step-2-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 49.6078% 0;"></div>
+      <div
+        id="g-step-2-sm-img"
+        class="g-aiImg"
+        style="background-image: url({stepSm});"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:55.3265%;margin-top:-21px;left:30.7585%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: XS -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-step-2-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 55.4545% 0;"></div>
+      <div
+        id="g-step-2-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:22.3913%;margin-top:-21px;left:52.5519%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 14:20 -->
+
+<!-- ai file: step-2.ai -->
+
+<style>#g-step-2-box,
+#g-step-2-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-step-2-box p {
+  margin: 0;
+}
+
+#g-step-2-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-step-2-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-step-2-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-step-2-xl {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-2-xl p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 18px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-2-xl .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-2-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-2-lg p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-2-lg .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-2-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-2-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-2-md .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-2-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-2-sm p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-2-sm .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-2-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-2-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-2-xs .g-pstyle0 {
+  height: 20px;
+}
+
+/* Custom CSS */</style>

package/dist/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  AiScroller_2Props */
+/** @typedef {typeof __propDef.events}  AiScroller_2Events */
+/** @typedef {typeof __propDef.slots}  AiScroller_2Slots */
+export default class AiScroller_2 extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AiScroller_2Props = typeof __propDef.props;
+export type AiScroller_2Events = typeof __propDef.events;
+export type AiScroller_2Slots = 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 {};

package/dist/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte

@@ -0,0 +1,282 @@
+<script>
+  // Hard-coding for demo purposes only...
+  // @ts-ignore img
+  import stepXl from './images/step-3-xl.png';
+  // @ts-ignore img
+  import stepLg from './images/step-3-lg.png';
+  // @ts-ignore img
+  import stepMd from './images/step-3-md.png';
+  // @ts-ignore img
+  import stepSm from './images/step-3-sm.png';
+  // @ts-ignore img
+  import stepXs from './images/step-3-xs.png';
+  let width = null;
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
+
+<div id="g-step-3-box" bind:clientWidth="{width}">
+  <!-- Artboard: XL -->
+  {#if width && width >= 1200}
+    <div id="g-step-3-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 50% 0;"></div>
+      <div
+        id="g-step-3-xl-img"
+        class="g-aiImg"
+        style="background-image: url({stepXl});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:19.683%;margin-top:-21.1px;left:54.3441%;width:130px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: LG -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-step-3-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.3763% 0;"></div>
+      <div
+        id="g-step-3-lg-img"
+        class="g-aiImg"
+        style="background-image: url({stepLg});"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:27.5682%;margin-top:-21px;left:54.9127%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: MD -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-step-3-md" class="g-artboard" style="">
+      <div style="padding: 0 0 55.7576% 0;"></div>
+      <div
+        id="g-step-3-md-img"
+        class="g-aiImg"
+        style="background-image: url({stepMd});"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:23.3631%;margin-top:-21px;left:50.4963%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: SM -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-step-3-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 49.6078% 0;"></div>
+      <div
+        id="g-step-3-sm-img"
+        class="g-aiImg"
+        style="background-image: url({stepSm});"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:20.1486%;margin-top:-21px;left:55.7925%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: XS -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-step-3-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 55.4545% 0;"></div>
+      <div
+        id="g-step-3-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:42.0634%;margin-top:-21px;left:27.3523%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 14:28 -->
+
+<!-- ai file: step-3.ai -->
+
+<style>#g-step-3-box,
+#g-step-3-box .g-artboard {
+  margin: 0 auto;
+}
+
+#g-step-3-box p {
+  margin: 0;
+}
+
+#g-step-3-box .g-aiAbs {
+  position: absolute;
+}
+
+#g-step-3-box .g-aiImg {
+  position: absolute;
+  top: 0;
+  display: block;
+  width: 100% !important;
+  height: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+#g-step-3-box .g-aiPointText p {
+  white-space: nowrap;
+}
+
+#g-step-3-xl {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-3-xl p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 18px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-3-xl .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-3-lg {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-3-lg p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-3-lg .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-3-md {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-3-md p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-3-md .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-3-sm {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-3-sm p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-3-sm .g-pstyle0 {
+  height: 20px;
+}
+
+#g-step-3-xs {
+  position: relative;
+  overflow: hidden;
+}
+
+#g-step-3-xs p {
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  line-height: 20px;
+  height: auto;
+  opacity: 1;
+  letter-spacing: 0em;
+  font-size: 16px;
+  text-align: left;
+  color: rgb(0, 0, 0);
+  text-transform: none;
+  padding-bottom: 0;
+  padding-top: 0;
+  mix-blend-mode: normal;
+  font-style: normal;
+  position: static;
+}
+
+#g-step-3-xs .g-pstyle0 {
+  height: 20px;
+}
+
+/* Custom CSS */</style>

package/dist/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  AiScroller_3Props */
+/** @typedef {typeof __propDef.events}  AiScroller_3Events */
+/** @typedef {typeof __propDef.slots}  AiScroller_3Slots */
+export default class AiScroller_3 extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AiScroller_3Props = typeof __propDef.props;
+export type AiScroller_3Events = typeof __propDef.events;
+export type AiScroller_3Slots = 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 {};

package/dist/components/Scroller/stories/components/basic/InteractiveForeground.svelte

@@ -0,0 +1,13 @@
+<script>
+  export let count = 0;
+</script>
+
+<h4>Interactive step</h4>
+
+<p>The count is {count}</p>
+
+<button
+  on:click="{() => {
+    count += 1;
+  }}">Click Me</button
+>

package/dist/components/Scroller/stories/components/basic/InteractiveForeground.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  InteractiveForegroundProps */
+/** @typedef {typeof __propDef.events}  InteractiveForegroundEvents */
+/** @typedef {typeof __propDef.slots}  InteractiveForegroundSlots */
+export default class InteractiveForeground extends SvelteComponent<{
+    count?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InteractiveForegroundProps = typeof __propDef.props;
+export type InteractiveForegroundEvents = typeof __propDef.events;
+export type InteractiveForegroundSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        count?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};