BWL003 Styling a Lit element code changes (#16)

lit · Sep 30, 2022 · 38dc6b9 · 38dc6b9
1 parent 6a44951
commit 38dc6b9
Show file tree

Hide file tree

Showing 11 changed files with 345 additions and 38 deletions.
diff --git a/build-it-with-lit/02-simple-carousel/README.md b/build-it-with-lit/02-simple-carousel/README.md
@@ -1,10 +1,13 @@
 [![Build it with Lit simple carousel Youtube
 thumbnail](http://img.youtube.com/vi/2RftvylEtrE/maxresdefault.jpg)](https://www.youtube.com/watch?v=2RftvylEtrE)
 
+[![Build it with Lit style the carousel Youtube thumbnail](http://img.youtube.com/vi/Xt7blcyuw5s/maxresdefault.jpg)](https://www.youtube.com/watch?v=Xt7blcyuw5s)
+
 # Simple Carousel
 
 This is the completed simple-carousel Lit component that accompanies the [second
-Build It With Lit video](https://www.youtube.com/watch?v=2RftvylEtrE).
+Build It With Lit video](https://www.youtube.com/watch?v=2RftvylEtrE), and has a
+public styling interface added in the [third Build It With Lit video](TODO).
 
 Install directly from Github:
 
@@ -15,11 +18,39 @@ npm install github:lit/video-series-samples
 Register the &lt;simple-carousel> with:
 
 ```js
-import 'video-series-samples/simple-carousel.js';
+import "video-series-samples/simple-carousel.js";
 ```
 
 Code is for learning purposes only.
 
+## Styling
+
+### Custom Properties
+
+| Name                                     | Default                                                              | Description                                         |
+| ---------------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
+| `--carousel-box-shadow`                  | `#293198 0.2em 0.2em 0.4em, #ceffff -0.1em -0.1em 0.2em`             | `box-shadow` of the carousel container and buttons  |
+| `--carousel-active-btn-box-shadow`       | `inset #293198 0.2em 0.2em 0.4em, inset #ceffff -0.1em -0.1em 0.2em` | `box-shadow` of the pressed carousel buttons        |
+| `--carousel-active-btn-background-color` | `transparent`                                                        | `background-color` of the pressed carousel buttons  |
+| `--carousel-active-btn-color`            | `inherit`                                                            | Chevron svg `color` of the pressed carousel buttons |
+
+### Shadow Parts
+
+The following [CSS shadow
+parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) are exported,
+which you can style with additional rules not covered by the above CSS custom
+properties.
+
+| Part name      | Exported by       | Description                                          |
+| -------------- | ----------------- | ---------------------------------------------------- |
+| `container`    | `simple-carousel` | The container for the simple-carousel                |
+| `buttons`      | `simple-carousel` | All the button nodes including left and right button |
+| `left-button`  | `simple-carousel` | Left simple-carousel button                          |
+| `right-button` | `simple-carousel` | Right simple-carousel button                         |
+| `internal-btn` | `slide-button`    | Container for the button                             |
+
+# Development
+
 ## Setup
 
 Install dependencies:

diff --git a/build-it-with-lit/02-simple-carousel/dev/demo-1.html b/build-it-with-lit/02-simple-carousel/dev/demo-1.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>First Demo Carousel</title>
+    <script type="module" src="../lib/simple-carousel.js"></script>
+    <style>
+      :root {
+        background-color: #f4f4f4;
+      }
+
+      simple-carousel {
+        font-family: Arial;
+        color: #353535;
+        --carousel-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
+          0px 10px 14px 1px rgba(0, 0, 0, 0.14),
+          0px 4px 18px 3px rgba(0, 0, 0, 0.12);
+        --carousel-active-btn-box-shadow: var(--carousel-box-shadow);
+        --carousel-active-btn-background-color: rgb(247, 130, 8);
+        --carousel-active-btn-color: white;
+      }
+
+      body {
+        /* Center the carousel on the page */
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /*
+      Hide the simple-carousel element until it is defined, preventing a flash
+      of unstyled content.
+      */
+      simple-carousel:not(:defined) {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <simple-carousel slideindex="0">
+      <h1>Welcome to Lit!</h1>
+      <section>
+        <h1>██ █████ █ ███</h1>
+        <p>█████ ████ ██ ███████ █ █</p>
+      </section>
+      <section>
+        <h1>█ ██████ ██ ████</h1>
+        <p>███████ █ ██ ███████ ███ ████████</p>
+      </section>
+    </simple-carousel>
+  </body>
+</html>
diff --git a/build-it-with-lit/02-simple-carousel/dev/demo-2.html b/build-it-with-lit/02-simple-carousel/dev/demo-2.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Second Demo Carousel</title>
+    <script type="module" src="../lib/simple-carousel.js"></script>
+    <style>
+      :root {
+        background-color: #f4f4f4;
+        font-family: Arial;
+      }
+      simple-carousel::part(container) {
+        border-radius: unset;
+        margin: unset;
+        box-shadow: unset;
+        background-color: rgb(215, 218, 222);
+      }
+      simple-carousel::part(buttons) {
+        border-radius: unset;
+        height: 100%;
+        box-shadow: unset;
+        background-color: rgb(20, 150, 241);
+      }
+      simple-carousel {
+        filter: drop-shadow(-1em -1em 0 rgb(6, 4, 24));
+      }
+      simple-carousel::part(buttons):active {
+        background-color: rgb(247, 130, 8);
+        color: white;
+      }
+
+      body {
+        /* Center the carousel on the page */
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /*
+      Hide the simple-carousel element until it is defined, preventing a flash
+      of unstyled content.
+      */
+      simple-carousel:not(:defined) {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <simple-carousel slideindex="0">
+      <h1>Welcome to Lit!</h1>
+      <section>
+        <h1>██ █████ █ ███</h1>
+        <p>█████ ████ ██ ███████ █ █</p>
+      </section>
+      <section>
+        <h1>█ ██████ ██ ████</h1>
+        <p>███████ █ ██ ███████ ███ ████████</p>
+      </section>
+    </simple-carousel>
+  </body>
+</html>
diff --git a/build-it-with-lit/02-simple-carousel/dev/demo-3.html b/build-it-with-lit/02-simple-carousel/dev/demo-3.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Third Demo Carousel</title>
+    <script type="module" src="../lib/simple-carousel.js"></script>
+    <style>
+      :root {
+        font-family: Arial;
+        background-color: #f4f4f4;
+      }
+
+      simple-carousel {
+        color: white;
+        filter: drop-shadow(0 0.8em 0 rgb(212, 34, 33));
+      }
+      simple-carousel::part(container) {
+        border-radius: unset;
+        margin: unset;
+        box-shadow: unset;
+        background-color: rgb(253, 133, 9);
+      }
+      simple-carousel::part(buttons) {
+        display: none;
+      }
+
+      body {
+        /* Center the carousel on the page */
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /*
+      Hide the simple-carousel element until it is defined, preventing a flash
+      of unstyled content.
+      */
+      simple-carousel:not(:defined) {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <simple-carousel slideindex="0">
+      <h1>Welcome to Lit!</h1>
+      <section>
+        <h1>██ █████ █ ███</h1>
+        <p>█████ ████ ██ ███████ █ █</p>
+      </section>
+      <section>
+        <h1>█ ██████ ██ ████</h1>
+        <p>███████ █ ██ ███████ ███ ████████</p>
+      </section>
+    </simple-carousel>
+
+    <script>
+      setInterval(() => {
+        document.querySelector("simple-carousel").slideIndex++;
+      }, 3000);
+    </script>
+  </body>
+</html>
diff --git a/build-it-with-lit/02-simple-carousel/dev/index.html b/build-it-with-lit/02-simple-carousel/dev/index.html
@@ -74,6 +74,16 @@ <h1>Use directly in HTML:</h1>
         </code>
       </section>
 
+      <section>
+        <h1>Styling</h1>
+        <p>This carousel can be styled with CSS inheritance, custom properties, and shadow parts.</p>
+        <ol>
+          <li><a href="./demo-1.html">Custom Properties Demo</a></li>
+          <li><a href="./demo-2.html">Shadow Parts Demo 1</a></li>
+          <li><a href="./demo-3.html">Shadow Parts Demo 2</a></li>
+        </ol>
+      </section>
+
       <p>Enjoy learning with this code, and please do not use this component in production!</p>
     </simple-carousel>
   </body>

diff --git a/build-it-with-lit/02-simple-carousel/lib/constants.js b/build-it-with-lit/02-simple-carousel/lib/constants.js
diff --git a/build-it-with-lit/02-simple-carousel/lib/simple-carousel.js b/build-it-with-lit/02-simple-carousel/lib/simple-carousel.js
diff --git a/build-it-with-lit/02-simple-carousel/lib/slide-button.js b/build-it-with-lit/02-simple-carousel/lib/slide-button.js