Enable the project bar in the web component

CHANGELOG.md

@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
+- ProjectBar functionality in the web component (#799)
 - WebComponent can receive style strings from host app (#811)
 - Quiz rendering in InstructionsPanel (#777)
 - Styling for the task section of the instructions (#781)

cypress/e2e/spec-html.cy.js

@@ -16,7 +16,7 @@ const getIframeBody = () => {
 
 const makeNewFile = (filename = "new.html") => {
   cy.get("button[title='Project files']").click();
-  cy.get(".proj-new-component-button").click();
+  cy.get("span").contains("Add file").click();
   cy.get("div[class=modal-content__input]").find("input").type(filename);
   cy.get("div[class=modal-content__buttons]").contains("Add file").click();
 };

src/assets/stylesheets/Button.scss

@@ -2,67 +2,9 @@
 @use "./rpf_design_system/font-weight" as *;
 @use "./rpf_design_system/colours" as *;
 
-@mixin button-styling(
-  $bg,
-  $active-bg,
-  $dis-bg,
-  $dis-c,
-  $focus-bg,
-  $hover-bg,
-  $c: default
-) {
-  background-color: $bg;
-
-  @if $c == "default" {
-    color: var(--rpf-button-primary-text-color);
-
-    svg {
-      fill: var(--rpf-button-primary-text-color);
-    }
-  } @else {
-    color: $c;
-
-    svg {
-      fill: $c;
-    }
-  }
-
-  &:active,
-  .btn-outer:active & {
-    background-color: $active-bg;
-    @content;
-  }
-
-  &:focus-visible,
-  .btn-outer:focus-visible & {
-    background-color: $focus-bg;
-    @content;
-  }
-
-  &:hover,
-  .btn-outer:hover & {
-    background-color: $hover-bg;
-    @content;
-  }
-
-  &:disabled {
-    background-color: $dis-bg;
-    color: $dis-c;
-
-    svg {
-      fill: $dis-c;
-    }
-
-    &:hover,
-    .btn-outer:hover & {
-      background-color: $dis-bg;
-    }
-  }
-}
-
 .btn {
   align-items: center;
-  border-radius: 8px;
+  border-radius: $space-0-5;
   border: 3px solid transparent;
   box-sizing: border-box;
   color: inherit;
@@ -73,14 +15,12 @@
   font-weight: $font-weight-bold;
   gap: $space-0-5;
   justify-content: center;
-  margin: 6px;
   min-height: 44px;
   min-width: 44px;
   padding: 10px;
   position: relative;
   text-align: center;
   text-decoration: none;
-  width: fit-content;
 
   &:disabled {
     background-color: $rpf-grey-600;
@@ -97,22 +37,84 @@
     padding: $space-0-25;
   }
 
-  // Variants
   &--primary {
-    $colours: var(--rpf-button-primary-background-color),
-      var(--rpf-button-primary-background-color-active),
-      var(--rpf-button-primary-background-color-disabled),
-      var(--rpf-button-primary-color-disabled),
-      var(--rpf-button-primary-background-color-focus),
-      var(--rpf-button-primary-background-color-hover);
-    @include button-styling($colours...);
+    background-color: var(--rpf-button-primary-background-color);
+    border-radius: $space-0-5;
+
+    color: var(--rpf-button-primary-text-color);
+
+    svg {
+      fill: var(--rpf-button-primary-text-color);
+    }
+
+    &:active,
+    .btn-outer:active & {
+      background-color: var(--rpf-button-primary-background-color-active);
+    }
+
+    &:focus-visible,
+    .btn-outer:focus-visible & {
+      background-color: var(--rpf-button-primary-background-color-focus);
+    }
+
+    &:hover,
+    .btn-outer:hover & {
+      background-color: var(--rpf-button-primary-background-color-hover);
+      border-radius: $space-0-5;
+    }
+
+    &:disabled {
+      background-color: var(--rpf-button-primary-background-color-disabled);
+      color: var(--rpf-button-primary-color-disabled);
+
+      svg {
+        fill: var(--rpf-button-primary-color-disabled);
+      }
+
+      &:hover,
+      .btn-outer:hover & {
+        background-color: var(--rpf-button-primary-background-color-disabled);
+      }
+    }
   }
 
   &--secondary {
-    $colours: inherit, inherit,
-      var(--rpf-button-secondary-background-color-disabled),
-      var(--rpf-button-secondary-background-color-active), inherit, inherit;
-    @include button-styling($colours...);
+    background-color: inherit;
+
+    color: var(--rpf-button-primary-text-color);
+
+    svg {
+      fill: var(--rpf-button-primary-text-color);
+    }
+
+    &:active,
+    .btn-outer:active & {
+      background-color: inherit;
+    }
+
+    &:focus-visible,
+    .btn-outer:focus-visible & {
+      background-color: inherit;
+    }
+
+    &:hover,
+    .btn-outer:hover & {
+      background-color: inherit;
+    }
+
+    &:disabled {
+      background-color: var(--rpf-button-secondary-background-color-disabled);
+      color: var(--rpf-button-secondary-background-color-active);
+
+      svg {
+        fill: var(--rpf-button-secondary-background-color-active);
+      }
+
+      &:hover,
+      .btn-outer:hover & {
+        background-color: var(--rpf-button-secondary-background-color-disabled);
+      }
+    }
 
     border: 2px solid var(--rpf-button-primary-background-color);
 
@@ -137,11 +139,39 @@
   }
 
   &--tertiary {
-    $colours: inherit, inherit, inherit, $rpf-grey-600, inherit, inherit,
-      inherit;
-    @include button-styling($colours...);
-    margin: 0;
+    background-color: inherit;
+
+    color: inherit;
+
+    &:active,
+    .btn-outer:active & {
+      background-color: inherit;
+    }
+
+    &:focus-visible,
+    .btn-outer:focus-visible & {
+      background-color: inherit;
+    }
+
+    &:hover,
+    .btn-outer:hover & {
+      background-color: inherit;
+    }
+
+    &:disabled {
+      background-color: inherit;
+      color: $rpf-grey-600;
 
+      svg {
+        fill: $rpf-grey-600;
+      }
+
+      &:hover,
+      .btn-outer:hover & {
+        background-color: inherit;
+      }
+    }
+
     &:active {
       color: $rpf-teal-900;
 
@@ -160,9 +190,42 @@
   }
 
   &--danger {
-    $colours: $rpf-alert-error, $rpf-alert-error, $rpf-alert-error, $rpf-white,
-      $rpf-alert-error, $rpf-alerts-error-tint, $rpf-white;
-    @include button-styling($colours...);
+    background-color: $rpf-alert-error;
+
+    color: $rpf-white;
+
+    svg {
+      fill: $rpf-white;
+    }
+
+    &:active,
+    .btn-outer:active & {
+      background-color: $rpf-alert-error;
+    }
+
+    &:focus-visible,
+    .btn-outer:focus-visible & {
+      background-color: $rpf-alert-error;
+    }
+
+    &:hover,
+    .btn-outer:hover & {
+      background-color: $rpf-alerts-error-tint;
+    }
+
+    &:disabled {
+      background-color: $rpf-alert-error;
+      color: $rpf-white;
+
+      svg {
+        fill: $rpf-white;
+      }
+
+      &:hover,
+      .btn-outer:hover & {
+        background-color: $rpf-alert-error;
+      }
+    }
 
     &:focus-visible {
       background-clip: padding-box;
@@ -185,6 +248,7 @@
 
 .btn-outer {
   background: transparent;
+  border-radius: $space-0-5;
   cursor: pointer;
   padding: $space-0-5 0;
   display: flex;

src/assets/stylesheets/ContextMenu.scss

@@ -9,6 +9,10 @@
   svg {
     margin: 0;
   }
+
+  :focus-visible {
+    border: none;
+  }
 }
 
 .context-menu {
@@ -23,7 +27,7 @@
   .context-menu__item {
     margin: 0;
     background-color: inherit;
-    color: inherit;
+    color: var(--rpf-button-secondary-color);
     padding: $space-0-5;
     text-align: start;
     white-space: nowrap;
@@ -33,6 +37,10 @@
     justify-content: start;
   }
 
+  :focus-visible {
+    border: none;
+  }
+
   svg {
     width: $space-1-5;
     height: auto;

src/assets/stylesheets/DesignSystemButton.scss

@@ -1,28 +1,31 @@
 @use "./rpf_design_system/colours" as *;
 
-:root * {
-  --rpf-button-primary-background-color: #{$rpf-teal-primary-default};
-  --rpf-button-primary-background-color-hover: #{$rpf-teal-primary-hover};
-  --rpf-button-primary-background-color-active: #{$rpf-teal-primary-active};
-  --rpf-button-primary-text-color: #{$rpf-text-primary};
-
-  .--dark * {
-    --rpf-button-primary-background-color: #{$rpf-teal-primary-default-darkmode};
-    --rpf-button-primary-background-color-hover: #{$rpf-teal-primary-hover-darkmode};
-    --rpf-button-primary-background-color-active: #{$rpf-teal-primary-active-darkmode};
+.rpf-button--primary * {
+  svg {
+    fill: var(--rpf-button-primary-text-color);
   }
 }
 
-.rpf-button--primary * {
+.rpf-button--tertiary * {
   svg {
-    fill: $rpf-text-primary;
+    fill: var(--rpf-button-secondary-text-color) !important;
   }
 }
 
 .rpf-button {
   flex-direction: row-reverse;
 }
 
+.rpf-button--fit {
+  width: fit-content;
+}
+
+.rpf-button--fill {
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
 .rpf-button--secondary {
   justify-content: center;
   align-items: center;