Merge branch 'main' into issues/775-Enable_the_project_bar_in_the_web…

…_component

CHANGELOG.md

@@ -6,24 +6,25 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
-## Fix
-
-- HTML projects loading in web component (#789)
-
 ### Added
 
 - ProjectBar functionality in the web component (#799)
+- Styling for the task section of the instructions (#781)
 - Styling for the instructions callouts (#788)
+- Output styles for Instructions (#790)
 
 ### Changed
 
 - Application of styles in the web component to remove `sass-to-string` (#788)
 
+## Fixed
+
+- HTML projects loading in web component (#789)
+
 ## [0.20.0] - 2023-11-24
 
 ### Added
 
-- Output styles for Instructions (#790)
 - Javascript support for HTML projects (#748)
 - DownloadPanel for sidebar (#744)
 - Custom events for Log In and Sign Up from DownloadPanel (#744)

README.md

@@ -121,6 +121,15 @@ Styles from the parent application can be passed to the web component in a few d
 
 Classes from the stringified HTML passed to the web component in the `instructions` attribute are being used to style the project steps in the instructions panel.
 
+##### Task Block
+
+Styles for the task block can be applied as follows:
+
+```html
+<h2 class="c-project-heading--task">Task heading</h2>
+<div class="c-project-task">{task content here}</div>
+```
+
 ##### Callouts
 
 There are three types of callout: tip, debugging and generic. The green tip callout is generated as follows:
@@ -144,9 +153,15 @@ The red debugging callout is generated as follows:
 The blue generic callout is the default if no modifier is specifed:
 
 ```html
-<div class="c-project-callout">
-  {callout content here}
-</div>
+<div class="c-project-callout">{callout content here}</div>
+```
+
+##### Output
+
+This class renders a bordered `div` with monospaced text that resembles Python output. Other font styles and images are not yet supported.
+
+```html
+<div class="c-project-output">{output content}</div>
 ```
 
 ## Deployment

package.json

@@ -15,6 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
+    "@raspberrypifoundation/design-system-core": "^0.1.9",
     "@raspberrypifoundation/design-system-react": "^0.1.5",
     "@react-three/drei": "^9.65.5",
     "@react-three/fiber": "^8.0.13",

src/assets/stylesheets/Instructions.scss

@@ -1,9 +1,49 @@
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/squiggle.scss" as *;
 @use "./rpf_design_system/colours" as *;
-@use "./rpf_design_system/font-size.scss" as *;
 @use "./rpf_design_system/spacing" as *;
+@use './rpf_design_system/font-size' as *;
 @use "./rpf_design_system/font-weight" as *;
 
 .project-instructions {
+  h2 {
+    @include font-size-1-25(bold);
+    margin: 0;
+  }
+
+  .c-project-heading--task {
+    @extend .rpf-squiggle-heading;
+    --rpf-squiggle-color: var(--rpf-blue-800);
+    background-color: $rpf-blue-100;
+    padding: $space-1;
+    width: 100%;
+    box-sizing: border-box;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+
+    &::after {
+      margin-inline: $space-1;
+      margin-block-start: $space-0-25;
+    }
+  }
+
+  .c-project-task {
+    background-color: $rpf-blue-100;
+    padding: $space-1;
+    display: flex;
+    flex-direction: column;
+    gap: $space-1;
+    border-end-start-radius: 8px;
+    border-end-end-radius: 8px;
+
+    p {
+      margin: 0;
+    }
+
+    &__checkbox {
+      display: none;
+    }
+  }
+
   .c-project-callout {
     background-color: $rpf-blue-100;
     border-inline-start: 4px solid $rpf-blue-800;

yarn.lock

@@ -1785,6 +1785,13 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@raspberrypifoundation/design-system-core@^0.1.9":
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/@raspberrypifoundation/design-system-core/-/design-system-core-0.1.9.tgz#f82bab987e1fd67ff6f317ebf5b79a569f4eab9c"
+  integrity sha512-Lb8QjDwOHTKjbROCGDtqW0lvyKX2suuf73IEpLQQRopppX+svqWZ9v0Wy4RVryLekMBfWpP3tSnH6I8MG+BfLQ==
+  dependencies:
+    classnames "^2.3.2"
+
 "@raspberrypifoundation/design-system-react@^0.1.5":
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/@raspberrypifoundation/design-system-react/-/design-system-react-0.1.5.tgz#1b76111e9f34bf62cb494812fa42da7f2263d58e"