Merge pull request #601 from MisRob/merge-release

Merge `release-v4` into `develop`
learningequality · Mar 29, 2024 · 8b7af9e · 8b7af9e
2 parents d977a72 + 740fbcb
commit 8b7af9e
Show file tree

Hide file tree

Showing 31 changed files with 791 additions and 423 deletions.
diff --git a/.github/workflows/notify_team_new_comment.yml b/.github/workflows/notify_team_new_comment.yml
@@ -19,9 +19,9 @@ jobs:
     steps:
       - name: Escape title double quotes
         id: escape_title
-        run: |
-          title='${{ github.event.issue.title }}'
-          echo "ISSUE_TITLE=${title//\"/\\\"}" >> "$GITHUB_OUTPUT"
+        env:
+          ISSUE_TITLE: ${{ github.event.issue.title }}
+        run: echo "ISSUE_TITLE=${ISSUE_TITLE//\"/\\\"}" >> "$GITHUB_OUTPUT"
 
       - name: Send message to Slack channel
         env:

diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: '10.x'
           registry-url: 'https://registry.npmjs.org'

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,97 @@ Changelog is rather internal in nature. See release notes for the public overvie
 ## Upcoming version 5.x.x (`develop` branch)
 
 
+## Version 4.x.x (`release-v4` branch)
+
+- [#587]
+  - **Description:** Rebrands icons in buttons and links
+  - **Products impact:** UI
+  - **Addresses:** -
+  - **Components:** `KButton`, `KRouterLink`, `KExternalLink`
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#587]: https://github.com/learningequality/kolibri-design-system/pull/587
+
+- [#561]
+  - **Description:** Update KLogo for new branding guidelines
+  - **Products impact:** Enables general use of KLogo for all frontend logo usage. Changes props API for square logo presentation.
+  - **Addresses:** Updates logo to new logo, adds all permissible alternates, adds animated form.
+  - **Components:** KLogo
+  - **Breaking:** Yes
+  - **Impacts a11y:** No
+  - **Guidance:** Rendering the Kolibri logo can now be done using the KLogo component, as well as the loading animation.
+
+[#561]: https://github.com/learningequality/kolibri-design-system/pull/561
+
+- [#580]
+  - **Description:** Remove use of KResponsiveWindowMixin internally
+  - **Products impact:** - none
+  - **Addresses:** -
+  - **Components:** KDateRange, KModal, KPageContainer, KGrid, KFixedGrid, KGridItem, KFixedGridItem
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** Updates all components to use the useKResponsiveWindow composable
+
+[#580]: https://github.com/learningequality/kolibri-design-system/pull/580
+
+- [#415]
+  - **Description:** Upgrade purecss from 0.6.2 to 2.2.0
+  - **Products impact:** Updates for base styling for all elements
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#415]: https://github.com/learningequality/kolibri-design-system/pull/415
+
+- [#569]
+  - **Description:** Upgrade actions/setup-node from 3 to 4
+  - **Products impact:** Dependencies
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#569]: https://github.com/learningequality/kolibri-design-system/pull/569
+
+- [#576]
+  - **Description:** Upgrade follow-redirects from 1.15.4 to 1.15.6
+  - **Products impact:** Dependencies
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#576]: https://github.com/learningequality/kolibri-design-system/pull/576
+
+- [#553]
+  - **Description:** Upgrade ip from 1.1.5 to 1.1.9
+  - **Products impact:** Dependencies
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#553]: https://github.com/learningequality/kolibri-design-system/pull/553
+
+- [#559]
+  - **Description:** Upgrade lodash from 4.17.15 to 4.17.21
+  - **Products impact:** Dependencies
+  - **Addresses:** -
+  - **Components:** -
+  - **Breaking:** -
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#559]: https://github.com/learningequality/kolibri-design-system/pull/559
+
+
 ## Version 4.x.x (`release-v4` branch)
 
 - [#555]

diff --git a/docs/common/DocsPageTemplate/SideNav/index.vue b/docs/common/DocsPageTemplate/SideNav/index.vue
@@ -8,7 +8,7 @@
     >
       <template if="loaded">
         <h1 class="header">
-          <file-svg src="./kolibri-logo.svg" class="logo" />
+          <KLogo altText="Design System" size="60" :showBackground="true" />
           <span class="header-text">Design System</span>
         </h1>
 

diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue
@@ -2,27 +2,150 @@
 
   <DocsPageTemplate apiDocs>
     <DocsPageSection title="Overview" anchor="#overview">
+      <p><code>KLogo</code> displays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.</p>
+    </DocsPageSection>
+
+    <DocsPageSection title="Usage" anchor="#usage">
+      <h3>Default display</h3>
       <p>Shows Kolibri logo.</p>
 
       <DocsShow>
         <KLogo
+          ref="defaultLogoNoBackground"
           altText="Kolibri Logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
         />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoNoBackground')">
+            Save SVG
+          </KButton>
+        </div>
       </DocsShow>
       <DocsShowCode language="html">
         <KLogo
           altText="Kolibri logo"
-          :height="150"
-          width="100%"
-          :maxWidth="150"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with backgrounds</h3>
+      <p>Shows Kolibri logo with background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithBackground"
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with background"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <p>Shows Kolibri logo with rectangular background.</p>
+
+      <DocsShow>
+        <KLogo
+          ref="defaultLogoWithRectBackground"
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+        <div style="width: 100%; text-align: center; display: none;">
+          <KButton @click="saveSVG('defaultLogoWithRectBackground')">
+            Save SVG
+          </KButton>
+        </div>
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with rectangular background"
+          backgroundStyle="rect"
+          :showBackground="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with animation</h3>
+      <p>Shows Kolibri logo with loading animation.</p>
+
+      <DocsShow>
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShow>
+      <DocsShowCode language="html">
+        <KLogo
+          altText="Kolibri Logo with loading animation"
+          :animate="true"
+          :size="150"
+        />
+      </DocsShowCode>
+
+      <h3>Display with different color schemes</h3>
+      <p>Different color schemes can be used - but only with the showBackground prop. Note the transparent lines for the monochrome logos.</p>
+
+      <DocsShow>
+        <template
+          v-for="colorScheme in ['monoBlack', 'monoWhite', 'monoPrimary', 'monoSecondary', 'whiteGrey', 'blackGrey']"
+        >
+          <p :key="`text${colorScheme}`">
+            Color scheme: {{ colorScheme }}
+          </p>
+          <KLogo
+            :ref="`${colorScheme}LogoWithBackground`"
+            :key="colorScheme"
+            class="halfsquare-background"
+            :colorScheme="colorScheme"
+            altText="Kolibri Logo"
+            :showBackground="true"
+            :size="150"
+          />
+          <div 
+            :key="`button${colorScheme}`"
+            style="width: 100%; text-align: center; display: none;"
+          >
+            <KButton @click="saveSVG(`${colorScheme}LogoWithBackground`)">
+              Save SVG
+            </KButton>
+          </div>
+        </template>
+      </DocsShow>
+
+      <h3>Dimensions</h3>
+
+      <p>
+        You can apply the most common dimensions to the image container via the props <DocsInternalLink href="/kimg#prop:size">
+          <code>size</code>
+        </DocsInternalLink>, <DocsInternalLink href="/kimg#prop:maxSize">
+          <code>maxSize</code>
+        </DocsInternalLink>, and <DocsInternalLink href="/kimg#prop:minSize">
+          <code>minSize</code>
+        </DocsInternalLink>. Values may be either numbers or strings consisting of a numeral and a valid unit. The following units are supported: <code>%, cm, em, ex, ch, in, lh, mm, px, rem, rlh, vh, vw</code>. If you don't provide a unit, <code>px</code> will be used by default.
+      </p>
+
+      <DocsShowCode language="html">
+        <KLogo
+          altText="A hummingbird logo"
+          size="250px"
+          maxSize="10vw"
+          :minSize="25"
         />
       </DocsShowCode>
-    </DocsPageSection>
 
-    <DocsPageSection title="Usage" anchor="#usage">
       <h3>Alternative text</h3>
 
       <p>Alternative text (<code>altText</code>) is required for the logo image. When creating it, consider the following:</p>
@@ -32,20 +155,61 @@
       </ul>
     </DocsPageSection>
 
-    <DocsPageSection title="Related" anchor="#related">
-      <ul>
-        <li>
-          <code>KLogo</code> is derived from <DocsLibraryLink component="KImg" /> and provides a subset of <code>KImg</code>'s API.
-        </li>
-      </ul>
-    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>
 
 
 <script>
 
-  export default {};
+  // Note for developers, to utilize the saveSVG method, select all of:
+  // style="width: 100%; text-align: center; display: none;"
+  // and replace with:
+  // style="width: 100%; text-align: center;"
+  // we keep this hidden for future usage, but it doesn't need to be here all the time.
+
+  export default {
+    methods: {
+      saveSVG(refName) {
+        const svgElement = this.$refs[refName].$el || this.$refs[refName][0].$el;
+        // Get the SVG data as a string
+        const svgData = svgElement.outerHTML;
+        // Create a Blob from the SVG data
+        const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+        // Create a URL for the Blob
+        const url = URL.createObjectURL(blob);
+
+        // Create a temporary anchor (`<a>`) element
+        const downloadLink = document.createElement('a');
+        // Set the download attribute to the desired file name
+        downloadLink.download = `${refName}.svg`;
+        // Set the href to the Blob URL
+        downloadLink.href = url;
+        // Append the anchor to the document
+        document.body.appendChild(downloadLink);
+        // Programmatically click the anchor to trigger the download
+        downloadLink.click();
+        // Clean up by revoking the Blob URL and removing the anchor from the document
+        URL.revokeObjectURL(url);
+        downloadLink.remove();
+      },
+    },
+  };
 
 </script>
+
+
+<style scoped>
+
+  .halfsquare-background {
+    background-size: 10px 10px; /* size of the squares */
+    background-image: 
+      linear-gradient(45deg, #ffffff 50%, #F5F5F5 50%),
+      linear-gradient(45deg, #F5F5F5 50%, #ffffff 50%);
+    background-position:
+      0 0, /* this is the position of the first pattern */
+      5px 5px; /* this position offsets the second pattern to create the checker effect */
+    background-repeat: repeat;
+  }
+
+</style>
diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
@@ -175,7 +175,7 @@
         </KGrid>
       </DocsShow>
       <p>
-        Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using <code>KResponsiveWindowMixin</code> properties. See the source code of this page for details.
+        Note that an additional complexity not shown in the example above is that conditional styling sometimes needs to be applied using <code>useKResponsiveWindow</code> properties. See the source code of this page for details.
       </p>
       <p>
         Also note that grid containers have a <code>debug</code> property that will show helpful visual information about columns and grid items when set to <code>true</code>.
@@ -210,10 +210,13 @@
 
 <script>
 
-  import responsiveWindowMixin from '~~/lib/KResponsiveWindowMixin.js';
+  import useKResponsiveWindow from '~~/lib/composables/useKResponsiveWindow';
 
   export default {
-    mixins: [responsiveWindowMixin],
+    setup() {
+      const { windowIsLarge } = useKResponsiveWindow();
+      return { windowIsLarge };
+    },
   };
 
 </script>