Refactor VIconButton and add VSearchBarButton

src/components/VAudioTrack/VPlayPause.vue

@@ -2,18 +2,18 @@
   <VIconButton
     v-bind="$attrs"
     :tabindex="isTabbable ? 0 : -1"
-    class="play-pause flex-shrink-0 border-dark-charcoal bg-dark-charcoal text-white focus-visible:border-pink focus-visible:shadow-ring focus-visible:outline-none disabled:opacity-70"
+    class="play-pause flex-shrink-0 border-dark-charcoal bg-dark-charcoal text-white focus-visible:border-pink focus-visible:shadow-ring focus-visible:outline-none active:shadow-ring disabled:opacity-70"
     :icon-props="icon === undefined ? undefined : { iconPath: icon }"
     :aria-label="$t(label)"
     :button-props="buttonProps"
     @click.stop.prevent="handleClick"
     @mousedown="handleMouseDown"
   >
-    <template #default="{ iconSizeClasses }">
+    <template #default="{ iconSize }">
       <svg
         v-if="isLoading"
         class="loading p-2"
-        :class="iconSizeClasses"
+        :class="iconSize"
         xmlns="http://www.w3.org/2000/svg"
         overflow="visible"
         viewBox="0 0 12 12"

src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -62,8 +62,7 @@
         <VIcon
           :icon-path="externalIcon"
           :rtl-flip="true"
-          :size="4"
-          class="ms-2 md:h-6 md:w-6"
+          class="h-4 w-4 ms-2 md:h-6 md:w-6"
         />
       </VButton>
     </div>

src/components/VButton.vue

@@ -10,7 +10,7 @@
       isActive && $style[`${variant}-pressed`],
       $style[`size-${size}`],
       isPlainDangerous
-        ? ''
+        ? 'border border-tx'
         : 'border border-tx focus-visible:ring focus-visible:ring-pink',
     ]"
     :aria-pressed="pressed"

src/components/VCheckbox/VCheckbox.vue

@@ -9,10 +9,9 @@
     />
     <VIcon
       v-show="localCheckedState"
-      class="absolute text-white start-0"
+      class="absolute h-5 w-5 text-white start-0"
       :icon-path="checkmark"
       view-box="0 0 20 20"
-      :size="5"
     />
     <!--  @slot The checkbox label  --><slot />
   </label>

src/components/VContentReport/VContentReportForm.vue

@@ -88,7 +88,7 @@
             :href="DMCA_FORM_URL"
           >
             {{ $t('media-details.content-report.form.dmca.open') }}
-            <VIcon :size="4" class="ms-1" :icon-path="icons.externalLink" />
+            <VIcon class="h-4 w-4 ms-1" :icon-path="icons.externalLink" />
           </VButton>
           <VButton
             v-else

src/components/VExternalSearch/VExternalSourceList.vue

@@ -53,9 +53,8 @@
           {{ source.name }}
           <VIcon
             :icon-path="icons.externalLink"
-            :size="4"
             :rtl-flip="true"
-            class="ms-2"
+            class="h-4 w-4 ms-2"
           />
         </VButton>
       </div>

src/components/VHeader/VHeaderDesktop.vue

@@ -16,9 +16,12 @@
       size="medium"
       @submit="handleSearch"
     >
-      <VClearButton
+      <VSearchBarButton
         v-show="searchTerm !== ''"
-        class="hidden me-2 group-focus-within:flex"
+        :icon-path="closeIcon"
+        :aria-label="$t('browse-page.search-form.clear')"
+        inner-area-classes="bg-white hover:bg-dark-charcoal-10"
+        class="hidden group-focus-within:flex"
         @click="clearSearchTerm"
       />
       <span
@@ -78,22 +81,24 @@ import { Focus } from '~/utils/focus-management'
 
 import { ensureFocus } from '~/utils/reakit-utils/focus'
 
-import VClearButton from '~/components/VHeader/VSearchBar/VClearButton.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchBar from '~/components/VHeader/VSearchBar/VSearchBar.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 import VSearchTypePopover from '~/components/VContentSwitcher/VSearchTypePopover.vue'
 
+import closeIcon from '~/assets/icons/close-small.svg'
+
 /**
  * The desktop search header.
  */
 export default defineComponent({
   name: 'VHeaderDesktop',
   components: {
-    VClearButton,
     VFilterButton,
     VLogoButton,
+    VSearchBarButton,
     VSearchGridFilter,
     VSearchTypePopover,
     VSearchBar,
@@ -239,6 +244,7 @@ export default defineComponent({
     }
 
     return {
+      closeIcon,
       filterButtonRef,
       searchBarRef,
       isFetching,

src/components/VHeader/VHeaderMobile/VSearchBarButton.vue

@@ -14,8 +14,9 @@
           :icon-path="iconPath"
           :rtl-flip="rtlFlip"
           class="pointer-events-none"
-          :size="iconSize"
+          :class="iconSize"
         />
+        <!--  @slot The element that can show a notification label for the button, can be absolutely positioned  -->
         <slot name="notification" />
       </span>
     </template>
@@ -27,22 +28,41 @@ import { defineComponent, PropType } from '@nuxtjs/composition-api'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VIconButton from '~/components/VIconButton/VIconButton.vue'
 
+/**
+ * The buttons placed inside the mobile search bar in the header.
+ * They are based on the VIconButton, look like they have a smallish focus area
+ * (32x32px), but actually have a larger tappable area of 48x48px to comply with
+ * accessibility requirements.
+ */
 export default defineComponent({
   name: 'VSearchBarButton',
   components: { VIcon, VIconButton },
   props: {
+    /**
+     * The path for the icon.
+     */
     iconPath: {
       type: String,
       required: true,
     },
+    /**
+     * The size of the inner area that has a different color,
+     * sometimes only when interactive.
+     */
     innerSize: {
       type: Number as PropType<6 | 8>,
       default: 8,
     },
+    /**
+     * The classes to apply to the inner area for styling resting/hover states.
+     */
     innerAreaClasses: {
       type: String,
       default: '',
     },
+    /**
+     * Whether the icon should be flipped when the page is in RTL mode.
+     */
     rtlFlip: {
       type: Boolean,
       default: false,

src/components/VHeader/meta/VSearchBarButtons.stories.mdx

@@ -0,0 +1,117 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import VContentSettingsButton from '~/components/VHeader/VHeaderMobile/VContentSettingsButton'
+import VSearchBarButton from '~/components/VHeader/VHeaderMobile/VSearchBarButton.vue'
+
+import closeIcon from '~/assets/icons/close-small.svg'
+import chevronLeftIcon from '~/assets/icons/chevron-left.svg'
+import sourceIcon from '~/assets/icons/source.svg'
+
+<Meta
+  title="Components/VHeader/VHeaderMobile/VSearchBarButton"
+  component={VSearchBarButton}
+  argTypes={{
+    iconPath: {
+      control: {
+        type: 'select',
+        options: [closeIcon, chevronLeftIcon, sourceIcon],
+        default: closeIcon,
+      },
+    },
+    innerSize: {
+      control: {
+        type: 'select',
+        options: [6, 8],
+      },
+    },
+    rtlFlip: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    innerAreaClasses: {
+      control: {
+        type: 'text',
+      },
+    },
+    click: {
+      action: 'click',
+    },
+  }}
+/>
+
+export const Template = (args) => ({
+  template: `<div class="bg-white"><VSearchBarButton v-bind="args" v-on="args" /></div>`,
+  components: { VSearchBarButton },
+  setup() {
+    if (!args.iconPath) {
+      args.iconPath = closeIcon
+    }
+    return { args, closeIcon, chevronLeftIcon, sourceIcon }
+  },
+})
+
+# Content Settings button
+
+<Description of={VSearchBarButton} />
+
+<ArgsTable of={VSearchBarButton} />
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+export const contentSettingsTemplate = (args) => ({
+  template: `
+    <div class="bg-dark-charcoal-10 rounded-sm flex justify-end">
+    <VContentSettingsButton :are-filters-selected="true" v-bind="args" />
+    </div>
+  `,
+  components: { VContentSettingsButton },
+  setup() {
+    return { args }
+  },
+})
+
+## Content Settings button with filters selected
+
+The button that opens the content settings modal on screens up to `lg` breakpoint.
+If any filters are selected, it shows a pink dot in the top right corner.
+
+<Canvas>
+  <Story name="Content Settings Button with filters selected">
+    {contentSettingsTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Clear button and Back button
+
+export const activeButtonsTemplate = (args) => ({
+  template: `<div class="rounded-sm bg-white flex justify-between ring ring-pink">
+  <VSearchBarButton
+    :icon-path="chevronLeftIcon"
+    :inner-size="8"
+    :aria-label="$t('header.back-button')"
+    inner-area-classes="hover:bg-dark-charcoal hover:text-white"
+    :rtl-flip="true"
+  />
+  <VSearchBarButton
+    :icon-path="closeIcon"
+    :aria-label="$t('browse-page.search-form.clear')"
+    inner-area-classes="bg-white hover:bg-dark-charcoal-10"
+  />
+</div>`,
+  components: { VContentSettingsButton },
+  setup() {
+    return { args, closeIcon, chevronLeftIcon }
+  },
+})
+
+<Canvas>
+  <Story name="Clear and Back Buttons">{activeButtonsTemplate.bind({})}</Story>
+</Canvas>