Merge branch 'main' into ja_algorithm-design

LOCALIZATION_CONTRIBUTORS

@@ -34,6 +34,7 @@ German (DE)
 
 Thorsten Mühge | TMuehge
 Zina Efchary | zinaefchary
+Sasko Schirmer | c0nr3f
 
 Spanish (ES_UN)
 

cypress/integration/sidebar.spec.js

@@ -7,19 +7,15 @@ describe('Sidebar', () => {
   it('can be toggled on a laptop', () => {
     cy.viewport('macbook-15')
     cy.visit('/course/ch-prerequisites')
-    cy.get(sidebarSelector).should('be.visible')
     cy.get(toggleSidebarSelector).click()
     cy.get(sidebarSelector).should('be.not.visible')
-    cy.get(toggleSidebarSelector).click()
-    cy.get(sidebarSelector).should('be.visible')
   })
 
   it('can be toggled on a tablet', () => {
     cy.viewport('ipad-2')
     cy.visit('/course/ch-prerequisites')
     cy.get(sidebarSelector).should('be.not.visible')
     cy.get(toggleSidebarSelector).click()
-    cy.get(sidebarSelector).should('be.visible')
     cy.get(toggleSidebarSelector).click()
     cy.get(sidebarSelector).should('be.not.visible')
   })

frontend/scss/components/textbook__page.scss

@@ -20,11 +20,14 @@ main.body {
 
 .c-textbook {
   display: flex;
-  max-height: 100%;
-  min-height: calc(100vh - $qiskit-navbar-height);
+  height: calc(100vh - $qiskit-navbar-height - $one-xp-banner-height-desktop);
   overflow: hidden;
   position: relative;
 
+  @include mq($until: large) {
+    height: calc(100vh - $qiskit-navbar-height - $one-xp-banner-height-mobile);
+  }
+
   @include mq($until: medium) {
     display: grid;
     grid-template-columns: 1fr 1fr;

frontend/scss/variables/settings.scss

@@ -7,6 +7,9 @@ $textbook-page-width: 100%;
 $qiskit-navbar-height: 3.5rem;
 $textbook-page-banner-height: 40px;
 
+$one-xp-banner-height-desktop: 3.25rem;
+$one-xp-banner-height-mobile: 5rem;
+
 $left-sidebar-width: 16rem;
 $left-sidebar-width-hidden: 3rem;
 $left-sidebar-width-sm: 3.5rem;

frontend/vue/components/OneXP/OneXPBanner.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="one-xp-banner">
+    <div class="one-xp-banner__container">
+      <span
+        class="one-xp-banner__copy"
+        v-text="
+          `🎉  Qiskit is getting a new learning experience on IBM Quantum!`
+        "
+      />
+      <a
+        class="one-xp-banner__cta"
+        href="https://learning.quantum-computing.ibm.com"
+        rel="noopener"
+        target="_blank"
+        @click="onClick"
+      >
+        <span class="one-xp-banner__cta__label" v-text="`Check it out`" />
+        <LaunchIcon class="one-xp-banner__cta__icon" />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+import LaunchIcon from '@carbon/icons-vue/lib/launch/16'
+
+@Options({
+  components: { LaunchIcon }
+})
+export default class OneXPBanner extends Vue {
+  onClick () {
+    this.$trackClickEvent('go-to-1xp-learning', '1xp-banner')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "carbon-components/scss/globals/scss/typography";
+@import "carbon-components/scss/globals/scss/layout";
+@import "../../../scss/variables/colors.scss";
+@import "~/../scss/variables/mq.scss";
+
+.one-xp-banner {
+  @include type-style("body-long-01");
+
+  background-image: linear-gradient(to right, $purple-10, #fff);
+  border-bottom: 1px solid $border-color;
+  padding: $spacing-05 $spacing-06;
+
+  &__container {
+    display: inline-flex;
+    flex-direction: column;
+    gap: $spacing-03;
+
+    @include mq($from: large) {
+      flex-direction: row;
+    }
+  }
+
+  &__copy {
+    font-weight: bold;
+  }
+
+  &__cta {
+    align-items: center;
+    display: inline-flex;
+    gap: $spacing-03;
+
+    &__label {
+      color: $purple-70;
+    }
+
+    &__icon {
+      fill: $purple-70;
+    }
+  }
+}
+</style>

frontend/vue/components/SignIn/SignIn.vue

@@ -63,20 +63,26 @@ export default class SignIn extends Vue {
 <style lang="scss" scoped>
 @import 'carbon-components/scss/globals/scss/typography';
 @import '~/../scss/variables/mq.scss';
+@import '~/../scss/variables/settings.scss';
 @import '~/../scss/mixins/mixins.scss';
 @import '~/../scss/variables/colors.scss';
 
 .sign-in {
   position: fixed;
-  top: 3.5rem;
+  top: calc($qiskit-navbar-height + $one-xp-banner-height-desktop + 1px);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 3;
-  max-height: calc(100vh - 3.5rem);
+  max-height: calc(100vh - ($qiskit-navbar-height + $one-xp-banner-height-desktop + 1px));
   overflow: hidden;
   display: flex;
 
+  @include mq($from: medium, $until: large) {
+    top: calc($qiskit-navbar-height + $one-xp-banner-height-mobile + 1px);
+    max-height: calc(100vh - ($qiskit-navbar-height + $one-xp-banner-height-mobile + 1px));
+  }
+
   @include mq($until: medium) {
     flex-direction: column;
     position: initial;

frontend/vue/components/constants/megaMenuLinks.ts

@@ -1129,13 +1129,6 @@ const ALGORITHMS: MegaDropdownMenuGroup = {
         cta: '07_grover_examples', location: sectionTutorials
       }
     },
-    {
-      label: 'Shor’s algorithms',
-      url: `${tutorialsBaseUrl}/algorithms/08_factorizers.html`,
-      segment: {
-        cta: '08_factorizers', location: sectionTutorials
-      }
-    },
     {
       label: 'Iterative Quantum Phase Estimation Algorithm',
       url: `${tutorialsBaseUrl}/algorithms/09_IQPE.html`,

frontend/vue/main.ts

@@ -2,6 +2,7 @@ import { QiskitBanner } from '@qiskit-community/qiskit-vue'
 import wrapper from './wc-wrapper/platypusWrapper'
 
 import CodeMirrorClipboardCopy from './components/CodeMirrorClipboardCopy/CodeMirrorClipboardCopy.vue'
+import OneXpBanner from './components/OneXP/OneXPBanner.vue'
 import TheMenu from './components/TheMenu/index.vue'
 import WhatIsQuantumVolume from './components/WhatIsQuantumVolume/WhatIsQuantumVolume.vue'
 import LayersCircuit from './components/WhatIsQuantumVolume/LayersCircuit.vue'
@@ -53,6 +54,7 @@ const kebabize = (str:string) => {
 }
 
 const components: any = {
+  OneXpBanner,
   QiskitBanner,
   AppCta,
   CodeMirrorClipboardCopy,

notebooks/v2/algorithms/01.query-algorithms/quantum-query-algorithms.ipynb

@@ -1291,8 +1291,7 @@
     "\n",
     "> **Simon's problem** \\\n",
     "> Input: a function $f:\\Sigma^n \\rightarrow \\Sigma^m$ \\\n",
-    "> Promise: there exists a string $s\\in\\Sigma^n$ such that $[f(x) = f(y)] \\Leftrightarrow \n",
-    "[(x = y) \\vee (x \\oplus s = y)]$ for all $x,y\\in\\Sigma^n$ \\\n",
+    "> Promise: there exists a string $s\\in\\Sigma^n$ such that $[f(x) = f(y)] \\Leftrightarrow [(x = y) \\vee (x \\oplus s = y)]$ for all $x,y\\in\\Sigma^n$ \\\n",
     "> Output: the string $s$\n",
     "\n",
     "We'll unpack the promise to better understand what says momentarily, but before doing this let's be clear that most functions don't satisfy this promise; it requires that $f$ has a very special structure.\n",