diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index dadc35ae..28051a01 100644 --- 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 }} \ No newline at end of file diff --git a/docs/static/usermessage.png b/docs/static/usermessage.png new file mode 100644 index 00000000..3abb9c2d Binary files /dev/null and b/docs/static/usermessage.png differ diff --git a/docs/styles.md b/docs/styles.md index 4afb2462..c6be4cfe 100644 --- 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 `
` elements. There sh
``` +## User Message Link and Lightbulb + +Add a user message box with a link or lightbulb icon. + +**Examples** + +
+ +
+ +**Availability** + +User message should only be used in `
` elements. The user message should only +have a `

` tag and `` tags. + +**Usage** +```html +

+

Use this link to access the activity: Desmos Activity: RAISE 3.5.1 Using Bivariate Data in Context

+
+
+

Use this link to access the activity: Desmos Activity: RAISE 3.5.1 Using Bivariate Data in Context

+
+``` + --- # Flex diff --git a/src/styles/content.scss b/src/styles/content.scss index dee6c959..47838aa8 100644 --- 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; +} \ No newline at end of file