Merge pull request #155 from openstax/K12-53/add-usermessage-style

Add user message styles
openstax · Apr 19, 2024 · de91a88 · de91a88
2 parents b6cbb44 + 9519208
commit de91a88
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -27,4 +27,6 @@ jobs:
       - name: Test
         run: npm test
       - name: Upload Code Coverage
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
diff --git a/docs/static/usermessage.png b/docs/static/usermessage.png
diff --git a/docs/styles.md b/docs/styles.md
@@ -42,6 +42,8 @@
   - [Accordion](#accordion-os-raise-accordion)
   - [Student Reflection Box](#student-reflection-box)
   - [Family Support Materials Links](#family-support-materials-links)
+  - [User Message Link and Lightbulb](#user-message-link-and-lightbulb)
+
 * Text Styling
   - [Bold Text](#bold-text)
   - [Italicize Text](#italicize-text)
@@ -914,6 +916,31 @@ Family support materials links should only be used in `<div>` elements. There sh
 </div>
 ```
 
+## User Message Link and Lightbulb
+
+Add a user message box with a link or lightbulb icon.
+
+**Examples**
+
+<div style="text-align: center;">
+    <img src="./static/usermessage.png" width="750">
+</div>
+
+**Availability**
+
+User message should only be used in `<div>` elements. The user message should only 
+have a `<p>` tag and `<a>` tags.
+
+**Usage**
+```html
+<div class="os-raise-usermessage-link">
+    <p>Use this link to access the activity: <a href="">Desmos Activity: RAISE 3.5.1 Using Bivariate Data in Context</a></p>
+</div>
+<div class="os-raise-usermessage-lightbulb">
+    <p>Use this link to access the activity: <a href="">Desmos Activity: RAISE 3.5.1 Using Bivariate Data in Context</a></p>
+</div>
+```
+
 ---
 
 # Flex

diff --git a/src/styles/content.scss b/src/styles/content.scss
@@ -440,13 +440,13 @@ $arrow-svg: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16
   margin-bottom: 1rem;
 }
 
-// Family Support Materials
-.os-raise-familysupport {
+// Support Materials
+
+%os-raise-message {
   display: flex;
   align-items: center;
   border: .125rem solid $os-dark-green;
   border-radius: .5rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='52' viewBox='0 0 56 56'%3E%3Cpath fill='%230a5b50' d='M15.555 53.125h24.89c4.852 0 7.266-2.461 7.266-7.336V24.508c0-3.024-.328-4.336-2.203-6.258L32.57 5.102c-1.78-1.829-3.234-2.227-5.882-2.227H15.555c-4.828 0-7.266 2.484-7.266 7.36v35.554c0 4.898 2.438 7.336 7.266 7.336m.187-3.773c-2.414 0-3.68-1.29-3.68-3.633V10.305c0-2.32 1.266-3.657 3.704-3.657h10.406v13.618c0 2.953 1.5 4.406 4.406 4.406h13.36v21.047c0 2.343-1.243 3.633-3.68 3.633ZM31 21.132c-.914 0-1.29-.374-1.29-1.312V7.375l13.5 13.758Zm5.625 9.985h-17.79c-.843 0-1.452.633-1.452 1.43c0 .82.61 1.453 1.453 1.453h17.789a1.43 1.43 0 0 0 1.453-1.453c0-.797-.633-1.43-1.453-1.43m0 8.18h-17.79c-.843 0-1.452.656-1.452 1.476c0 .797.61 1.407 1.453 1.407h17.789c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: 1rem 50%;
   background-size: 1.5rem;
@@ -455,9 +455,36 @@ $arrow-svg: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16
   margin-bottom: 1rem;
 }
 
+.os-raise-familysupport {
+  @extend %os-raise-message;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='52' viewBox='0 0 56 56'%3E%3Cpath fill='%230a5b50' d='M15.555 53.125h24.89c4.852 0 7.266-2.461 7.266-7.336V24.508c0-3.024-.328-4.336-2.203-6.258L32.57 5.102c-1.78-1.829-3.234-2.227-5.882-2.227H15.555c-4.828 0-7.266 2.484-7.266 7.36v35.554c0 4.898 2.438 7.336 7.266 7.336m.187-3.773c-2.414 0-3.68-1.29-3.68-3.633V10.305c0-2.32 1.266-3.657 3.704-3.657h10.406v13.618c0 2.953 1.5 4.406 4.406 4.406h13.36v21.047c0 2.343-1.243 3.633-3.68 3.633ZM31 21.132c-.914 0-1.29-.374-1.29-1.312V7.375l13.5 13.758Zm5.625 9.985h-17.79c-.843 0-1.452.633-1.452 1.43c0 .82.61 1.453 1.453 1.453h17.789a1.43 1.43 0 0 0 1.453-1.453c0-.797-.633-1.43-1.453-1.43m0 8.18h-17.79c-.843 0-1.452.656-1.452 1.476c0 .797.61 1.407 1.453 1.407h17.789c.82 0 1.453-.61 1.453-1.407c0-.82-.633-1.476-1.453-1.476'/%3E%3C/svg%3E");
+
+}
+
+.os-raise-usermessage-link {
+  @extend %os-raise-message;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%230a5b50' d='M10.59 13.41c.41.39.41 1.03 0 1.42c-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0a5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.98 2.98 0 0 0 0-4.24a2.98 2.98 0 0 0-4.24 0l-3.53 3.53a2.98 2.98 0 0 0 0 4.24m2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0a5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.98 2.98 0 0 0 0 4.24a2.98 2.98 0 0 0 4.24 0l3.53-3.53a2.98 2.98 0 0 0 0-4.24a.973.973 0 0 1 0-1.42'/%3E%3C/svg%3E");
+}
+
+.os-raise-usermessage-lightbulb {
+  @extend %os-raise-message;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%230a5b50' d='M20 11h3v2h-3zM1 11h3v2H1zM13 1v3h-2V1zM4.92 3.5l2.13 2.14l-1.42 1.41L3.5 4.93zm12.03 2.13l2.12-2.13l1.43 1.43l-2.13 2.12zM12 6a6 6 0 0 1 6 6c0 2.22-1.21 4.16-3 5.2V19a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-1.8c-1.79-1.04-3-2.98-3-5.2a6 6 0 0 1 6-6m2 15v1a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-1zm-3-3h2v-2.13c1.73-.44 3-2.01 3-3.87a4 4 0 0 0-4-4a4 4 0 0 0-4 4c0 1.86 1.27 3.43 3 3.87z'/%3E%3C/svg%3E");
+}
+
+.os-raise-usermessage-link p,
+.os-raise-usermessage-lightbulb p,
 .os-raise-familysupport p {
   color: $raise-light-black;
   font-weight: 700;
   font-size: .875rem;
   margin-bottom: 0;
 }
+
+.os-raise-usermessage-link a,
+.os-raise-usermessage-lightbulb a,
+.os-raise-familysupport a {
+  text-decoration: underline;
+}