oobe: Add polymer object for slides

Add a new component for oobe. The slides can be used for scrolling.
Contains title, body text and illustration.

Bug: 1117161
Change-Id: If583db26a82d108a96c33c71616b2e01d38180e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362812
Commit-Queue: Danila Kuzmin <dkuzmin@google.com>
Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#800133}

chrome/browser/resources/chromeos/login/components/oobe_slide.html

+<!-- Copyright 2020 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<!--
+  Simple OOBE polymer element which is used for displaying single slide in a
+  carousel.
+
+  Example:
+    <oobe-slide is-warning>
+      <img ... slot="slide-img">
+      <div slot="title">...</div>
+      <div slot="text">...</div>
+    </oobe-slide>
+
+    Attributes:
+      is-warning - changes title slot color from blue to red.
+-->
+<dom-module id="oobe-slide">
+  <template>
+    <style include="oobe-dialog-host"></style>
+    <style>
+      :host {
+        --oobe-slide-img-size: 200px;
+        --oobe-slide-vertical-margin: 24px;
+        --oobe-slide-horizontal-margin: 32px;
+      }
+
+      #slide-container {
+        max-height: calc(var(--oobe-slide-img-size) + 2 *
+                         var(--oobe-slide-vertical-margin));
+      }
+
+      #illustration-container {
+        height: var(--oobe-slide-img-size);
+        margin: var(--oobe-slide-vertical-margin)
+                var(--oobe-slide-horizontal-margin);
+        width: var(--oobe-slide-img-size);
+      }
+
+      #context-container {
+        padding-inline-end: var(--oobe-slide-horizontal-margin);
+      }
+
+      #slide-title ::slotted(*) {
+        color: var(--google-blue-600);
+        font-family: var(--oobe-header-font-family);
+        font-size: 24px;
+        font-weight: 500; /* medium */
+      }
+
+      #slide-title[is-warning] ::slotted(*) {
+        color: var(--google-red-600);
+      }
+
+      #slide-text {
+        padding-top: 8px;
+      }
+
+      #slide-text ::slotted(*) {
+        color: var(--google-grey-900);
+        font-family: var(--oobe-default-font-family);
+        font-size: 14px;
+        font-weight: 400; /* regular */
+      }
+    </style>
+    <div id="slide-container" class="flex layout horizontal">
+      <div id="illustration-container" class="oobe-illustration">
+        <slot name="slide-img"></slot>
+      </div>
+      <div id="context-container" class="flex layout vertical center-justified">
+        <div id="slide-title" is-warning$="[[isWarning]]">
+          <slot name="title"></slot>
+        </div>
+        <div id="slide-text">
+          <slot name="text"></slot>
+        </div>
+      </div>
+    </div>
+  </template>
+</dom-module>

chrome/browser/resources/chromeos/login/components/oobe_slide.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Polymer({
+  is: 'oobe-slide',
+
+  properties: {
+    /* If true title is colored red, else blue.
+     */
+    isWarning: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});

chrome/browser/resources/chromeos/login/structure/components_oobe.html

@@ -11,6 +11,7 @@
 <include src="../oobe_network.html">
 <include src="../oobe_eula.html">
 <include src="../oobe_update.html">
+<include src="../components/oobe_slide.html">
 <include src="../demo_setup.html">
 <include src="../demo_preferences.html">
 <include src="../enterprise_enrollment.html">

chrome/browser/resources/chromeos/login/structure/components_oobe.js

@@ -9,6 +9,7 @@
 // <include src="../oobe_network.js">
 // <include src="../oobe_eula.js">
 // <include src="../oobe_update.js">
+// <include src="../components/oobe_slide.js">
 // <include src="../demo_setup.js">
 // <include src="../demo_preferences.js">
 // <include src="../enterprise_enrollment.js">