Merge branch 'main' into fix/Output_instructions_in_README

RaspberryPiFoundation · Dec 1, 2023 · 38f8e4b · 38f8e4b
2 parents c6ef9ea + 2c60a4b
commit 38f8e4b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,18 +6,19 @@ 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
 
+- Styling for the task section of the instructions (#781)
 - Styling for the instructions callouts (#788)
 
 ### 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

diff --git a/README.md b/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:

diff --git a/package.json b/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",

diff --git a/src/assets/stylesheets/Instructions.scss b/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;

diff --git a/yarn.lock b/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"