@appscode/design-system 2.7.17 → 2.17.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.7.17",
+  "version": "2.17.18",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/icons/ArrowUturnLeft.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 20 20">
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M7.793 2.232a.75.75 0 0 1-.025 1.06L3.622 7.25h10.003a5.375 5.375 0 0 1 0 10.75H10.75a.75.75 0 0 1 0-1.5h2.875a3.875 3.875 0 0 0 0-7.75H3.622l4.146 3.957a.75.75 0 0 1-1.036 1.085l-5.5-5.25a.75.75 0 0 1 0-1.085l5.5-5.25a.75.75 0 0 1 1.06.025"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/vue-components/v3/section/SectionContent.vue

@@ -4,7 +4,7 @@ import ArrowIcon from "../icons/ArrowIcon.vue";
 import AcButton from "../button/Button.vue";
 import HeaderItem from "../header/HeaderItem.vue";
 import HeaderItems from "../header/HeaderItems.vue";
-import HeroiconsArrowUturnLeft20Solid from "~icons/heroicons/arrow-uturn-left-20-solid.svg";
+import ArrowUturnLeft from "../icons/ArrowUturnLeft.vue";
 
 interface Props {
   title?: string;
@@ -41,14 +41,8 @@ function handleBack() {
         :class="{ 'mb-8': resetStyle }"
       >
         <header-items>
-          <button
-            v-if="hasBackButton"
-            title="Back"
-            class="ac-back-button"
-            @click="handleBack"
-            data-testid="back-button"
-          >
-            <HeroiconsArrowUturnLeft20Solid />
+          <button v-if="hasBackButton" title="Back" class="ac-back-button" @click="handleBack">
+            <ArrowUturnLeft />
           </button>
           <header-item>
             <div v-if="custom">
@@ -62,7 +56,11 @@ function handleBack() {
         <!-- Add buttons here -->
         <div class="buttons is-right">
           <slot name="header-buttons" />
-          <AcButton modifier-classes="is-white" v-if="isExpandable" @click="isOpen = !isOpen">
+          <AcButton
+            modifier-classes="width-32 height-32 is-rounded-50 b-1 p-0"
+            v-if="isExpandable"
+            @click="isOpen = !isOpen"
+          >
             <ArrowIcon :direction="isOpen ? 'down' : 'up'" />
           </AcButton>
         </div>