@explorer-1/vue 0.2.7 → 0.2.9

package/src/components/BlockLinkTile/BlockLinkTile.vue

@@ -40,17 +40,17 @@
           :class="{ 'xl:px-10 xl:py-6 lg:px-8': !compact }"
         >
           <p
-            v-if="theItem.label || theItem.startDate"
+            v-if="theItem.label || (theItem as EventCardObject).startDate"
             class="text-subtitle divide-white flex divide-x mb-2"
           >
             <span
               v-if="theItem.label"
-              :class="{ 'pr-2': theItem.startDate }"
+              :class="{ 'pr-2': (theItem as EventCardObject).startDate }"
             >
               {{ theItem.label }}
             </span>
             <span
-              v-if="theItem.startDate"
+              v-if="(theItem as EventCardObject).startDate"
               :class="{ 'pl-2': theItem.label }"
             >
               {{ formattedEventDates }}
@@ -81,7 +81,7 @@
 
 <script lang="ts">
 import type { PropType } from 'vue'
-import type { Card } from '../../interfaces'
+import type { Card, EventCardObject } from '../../interfaces'
 import { defineComponent } from 'vue'
 import { mixinFormatEventDates } from './../../utils/mixins'
 import IconArrow from './../Icons/IconArrow.vue'
@@ -101,7 +101,7 @@ export default defineComponent({
   props: {
     // if some cards contain external links, be sure to alias the external url as 'externalLink'
     data: {
-      type: Object as PropType<Card>,
+      type: Object as PropType<Card | EventCardObject>,
       required: false
     },
     // override props as needed
@@ -149,7 +149,7 @@ export default defineComponent({
     // to allow for various data shapes and sources
     // use-case: the homepage provides this.data.page with non-page siblings
     // use-case: search and listing pages pass individual props
-    theItem(): Card | undefined {
+    theItem(): Card | EventCardObject | undefined {
       if ((this.data as Card)?.page) {
         return (this.data as Card).page
       } else if (this.data) {
@@ -177,8 +177,11 @@ export default defineComponent({
       return undefined
     },
     formattedEventDates() {
-      return this.theItem?.startDate
-        ? mixinFormatEventDates(this.theItem.startDate, this.theItem.endDate)
+      return (this.theItem as EventCardObject)?.startDate
+        ? mixinFormatEventDates(
+            (this.theItem as EventCardObject).startDate,
+            (this.theItem as EventCardObject).endDate
+          )
         : undefined
     }
   }

package/src/components/CalendarChip/CalendarChip.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useThemeStore } from '../../store/theme'
+import { mixinFormatSplitEventDates } from './../../utils/mixins'
+const themeStore = useThemeStore()
+
+interface CalendarChipProps {
+  startDate?: string
+  endDate?: string
+  ongoing?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<CalendarChipProps>(), {
+  startDate: undefined,
+  endDate: undefined,
+  ongoing: false
+})
+
+const splitDate = computed(() => {
+  if (props.startDate) {
+    return mixinFormatSplitEventDates(props.startDate, props.endDate)
+  }
+  return undefined
+})
+</script>
+<template>
+  <div
+    v-if="splitDate || ongoing"
+    class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary ThemeVariantLight"
+  >
+    <template v-if="ongoing">
+      <div class="text-subtitle">Ongoing</div>
+    </template>
+    <template v-else-if="themeStore.isEdu && splitDate">
+      <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
+        {{ splitDate.month }}
+      </div>
+      <div class="text-subtitle">
+        {{ splitDate.year }}
+      </div>
+    </template>
+    <template v-else-if="splitDate">
+      <div class="font-extrabold text-6xl leading-tight tracking-wider">
+        {{ splitDate.day }}
+      </div>
+      <div class="text-subtitle">
+        {{ splitDate.monthAndYear }}
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -5,18 +5,18 @@
       class="flex flex-wrap items-center mb-3"
     >
       <template v-if="pill && pillLabel">
-        <BaseTag
+        <BasePill
           :variant="pillColor"
           size="lg"
           class="mr-3"
         >
           {{ pillLabel }}
-        </BaseTag>
+        </BasePill>
       </template>
       <template v-else>
         <div
           v-if="topics && topics.length"
-          class="inline"
+          class="inline edu:text-primary"
         >
           <BaseLink
             variant="secondary"
@@ -122,7 +122,7 @@ import { useThemeStore } from '../../store/theme'
 import type { Topic, AuthorObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
-import BaseTag from '../BaseTag/BaseTag.vue'
+import BasePill from '../BasePill/BasePill.vue'
 
 export const pillColorVariants = ['primary', 'secondary', 'action']
 
@@ -131,7 +131,7 @@ export default defineComponent({
   components: {
     BaseLink,
     BaseHeading,
-    BaseTag
+    BasePill
   },
   props: {
     title: {

package/src/components/EventCard/EventCard.vue

@@ -22,27 +22,18 @@
         >
           {{ summary }}
         </p>
-
-        <div class="md:mt-10 text-xl md:flex">
-          <div class="EventCard__Metadata flex text-primary text-body-sm">
-            <IconCalendar class="relative mr-3" />
-            <span> {{ formattedEventDates }}</span>
-          </div>
-          <div
-            v-show="displayTime"
-            class="EventCard__Metadata hidden md:flex text-primary text-body-sm"
-          >
-            <IconTime class="relative mr-3" />
-            <span>{{ displayTime }}</span>
-          </div>
-          <div
-            v-if="location"
-            class="EventCard__Metadata flex text-primary text-body-sm"
-          >
-            <IconLocation class="relative mr-3" />
-            <span>{{ location }}</span>
-          </div>
-        </div>
+        <MetadataEvent
+          class="mt-6 lg:mt-8 block lg:flex"
+          :event="{
+            startTime,
+            endTime,
+            startDate,
+            endDate,
+            location
+          }"
+          compact
+          allow-break
+        />
       </div>
       <div
         v-if="image"
@@ -61,27 +52,11 @@
             object-fit-class="cover"
             loading="lazy"
           />
-          <div
-            v-if="splitDate"
-            class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
-          >
-            <template v-if="themeStore.isEdu">
-              <div class="font-extrabold text-6xl leading-tight tracking-wider">
-                {{ splitDate.month }}
-              </div>
-              <div class="text-subtitle">
-                {{ splitDate.year }}
-              </div>
-            </template>
-            <template v-else>
-              <div class="font-extrabold text-6xl leading-tight tracking-wider">
-                {{ splitDate.day }}
-              </div>
-              <div class="text-subtitle">
-                {{ splitDate.monthAndYear }}
-              </div>
-            </template>
-          </div>
+          <CalendarChip
+            :start-date="startDate"
+            :end-date="endDate"
+            :ongoing="ongoing"
+          />
         </BaseImagePlaceholder>
       </div>
     </div>
@@ -91,18 +66,15 @@
 <script lang="ts">
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import {
-  mixinFormatEventDates,
-  mixinFormatSplitEventDates,
-  mixinFormatEventTimeInHoursAndMinutes,
-  type EventDateObject
-} from './../../utils/mixins'
 import { mapStores } from 'pinia'
 import { useThemeStore } from '../../store/theme'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import CalendarChip from './../CalendarChip/CalendarChip.vue'
+import MetadataEvent from './../../components/MetadataEvent/MetadataEvent.vue'
+
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 
 export default defineComponent({
@@ -111,7 +83,9 @@ export default defineComponent({
     BaseLink,
     BaseHeading,
     BaseImage,
-    BaseImagePlaceholder
+    BaseImagePlaceholder,
+    CalendarChip,
+    MetadataEvent
   },
   props: {
     url: {
@@ -135,6 +109,10 @@ export default defineComponent({
       type: String,
       required: false
     },
+    ongoing: {
+      type: Boolean,
+      default: false
+    },
     endTime: {
       type: String,
       required: false
@@ -158,45 +136,7 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapStores(useThemeStore),
-    splitDate(): EventDateObject | null {
-      if (this.startDate) {
-        return mixinFormatSplitEventDates(this.startDate, this.endDate)
-      }
-      return null
-    },
-    displayTime(): string | undefined {
-      if (this.startDate) {
-        return mixinFormatEventTimeInHoursAndMinutes(this.startDate, this.endDate, this.endTime)
-      }
-      return undefined
-    },
-    formattedEventDates() {
-      return this.startDate ? mixinFormatEventDates(this.startDate, this.endDate) : undefined
-    }
+    ...mapStores(useThemeStore)
   }
 })
 </script>
-<style lang="scss">
-.EventCard {
-  .EventCard__Metadata {
-    @apply items-baseline;
-    @apply mr-0;
-    @apply mb-4;
-    @apply md:mb-0;
-    @apply md:mr-3;
-    @apply lg:mr-6;
-
-    span {
-      max-width: 230px;
-      min-width: 110px;
-      @apply text-gray-dark;
-    }
-
-    svg {
-      min-width: 1.25rem;
-      @apply top-0.5;
-    }
-  }
-}
-</style>

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -19,40 +19,29 @@
           object-fit-class="cover"
           loading="lazy"
         />
-        <div
-          v-if="startDateSplit || ongoing"
-          class="ThemeVariantLight absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary print:hidden"
-        >
-          <template v-if="ongoing">
-            <div class="text-subtitle">Ongoing</div>
-          </template>
-          <template v-else>
-            <div class="font-extrabold text-6xl leading-tight tracking-wider uppercase">
-              {{ themeStore.isEdu ? startDateSplit?.month : startDateSplit?.day }}
-            </div>
-            <div class="text-subtitle">
-              {{ themeStore.isEdu ? startDateSplit?.year : startDateSplit?.monthAndYear }}
-            </div>
-          </template>
-        </div>
+        <CalendarChip
+          v-if="startDate || ongoing"
+          :start-date="startDate"
+          :end-date="endDate"
+          :ongoing="ongoing"
+        />
       </BaseImagePlaceholder>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue'
-import { mapStores } from 'pinia'
-import { useThemeStore } from '../../store/theme'
 import BaseImage from '../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from '../BaseImagePlaceholder/BaseImagePlaceholder.vue'
-import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
-import type { PropType } from 'vue'
+import CalendarChip from '../CalendarChip/CalendarChip.vue'
+import { mixinGetSrcSet } from './../../utils/mixins'
 
 export default defineComponent({
   name: 'EventDetailHero',
   components: {
     BaseImage,
-    BaseImagePlaceholder
+    BaseImagePlaceholder,
+    CalendarChip
   },
   props: {
     data: {
@@ -60,9 +49,14 @@ export default defineComponent({
       required: false,
       default: undefined
     },
-    startDateSplit: {
-      type: Object as PropType<EventDateObject | undefined>,
-      required: true
+    startDate: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    endDate: {
+      type: String,
+      default: undefined
     },
     ongoing: {
       type: Boolean,
@@ -80,7 +74,6 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapStores(useThemeStore),
     getSrcSet() {
       return this.image ? mixinGetSrcSet(this.image) : undefined
     }

package/src/components/HeroListingIndex/HeroListingIndex.stories.js

@@ -13,6 +13,7 @@ export default {
 export const HeroListingIndexData = {
   listingPage: {
     featured: {
+      __typename: 'EDUExplainerArticlePage',
       topicLabel: 'Mars',
       url: '/news/new-maps-open-roads-to-research/',
       title: 'Creating Robots to go Where Humans Can’t',

package/src/components/HeroListingIndex/HeroListingIndex.vue

@@ -7,7 +7,12 @@
     <HeroMedium
       v-if="pageData.featured"
       class="md:mb-12 lg:mb-18 mb-10"
-      :custom-tag="themeStore.theme === 'ThemeEdu' && customLabel ? customLabel : undefined"
+      :custom-pill="themeStore.theme === 'ThemeEdu' && customLabel ? customLabel : undefined"
+      :custom-pill-type="
+        themeStore.theme === 'ThemeEdu' && pageData.featured?.__typename
+          ? pageData.featured.__typename
+          : undefined
+      "
       :custom-label="themeStore.theme === 'ThemeEdu' ? pageData.featured.topicLabel : customLabel"
       :feature="pageData.featured"
       :custom-video="customVideo"
@@ -34,11 +39,11 @@ export default defineComponent({
     // pass these directly to HeroMedium
     pageData: {
       type: Object,
-      required: false
+      default: undefined
     },
     customLabel: {
       type: String,
-      required: false
+      default: undefined
     },
     cta: {
       type: String,

package/src/components/HeroMedium/HeroMedium.vue

@@ -52,16 +52,18 @@
           class="lg:w-1/2 xl:w-5/12 block"
         >
           <div
-            v-if="customTag || customLabel || feature.label"
+            v-if="customPill || customLabel || feature.label"
             class="flex items-center lg:mb-3 mb-2"
           >
-            <BaseTag
-              v-if="customTag"
+            <BasePill
+              v-if="customPill || customPillType"
               variant="primary"
               size="sm"
               class="mr-3"
-              >{{ customTag }}</BaseTag
+              :content-type="customPillType"
             >
+              {{ customPill }}
+            </BasePill>
             <p
               v-if="customLabel || feature.label"
               class="text-subtitle"
@@ -102,7 +104,7 @@ import { mixinTransparentHeader } from '../../utils/mixins'
 import type { ImageObject } from '../../interfaces'
 import IconArrow from './../Icons/IconArrow.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
-import BaseTag from './../BaseTag/BaseTag.vue'
+import BasePill from './../BasePill/BasePill.vue'
 import MixinVideoBg from './../MixinVideoBg/MixinVideoBg.vue'
 
 export default defineComponent({
@@ -111,20 +113,28 @@ export default defineComponent({
     IconArrow,
     BaseLink,
     MixinVideoBg,
-    BaseTag
+    BasePill
   },
   props: {
     feature: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
+    },
+    customPill: {
+      type: String,
+      required: false,
+      default: undefined
     },
-    customTag: {
+    customPillType: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     customLabel: {
       type: String,
-      required: false
+      required: false,
+      default: undefined
     },
     cta: {
       type: String,
@@ -139,11 +149,13 @@ export default defineComponent({
     // use-case: news detail pages use this b/c their feature hero is structured differently
     customVideo: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     },
     customImage: {
       type: Object,
-      required: false
+      required: false,
+      default: undefined
     }
   },
   computed: {

package/src/components/Icons/IconProfile.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="46"
+    height="45"
+    viewBox="0 0 46 45"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    class="IconProfile"
+  >
+    <g>
+      <path
+        d="M13.9894 13.4006C13.9894 18.4942 18.0797 22.5844 23.1733 22.5844C28.1957 22.5844 32.3571 18.4954 32.3571 13.4006C32.3571 8.37686 28.197 4.2168 23.1733 4.2168C18.0784 4.2168 13.9894 8.37814 13.9894 13.4006ZM16.7229 13.4006C16.7229 9.90763 19.6138 6.95025 23.1733 6.95025C26.6645 6.95025 29.6236 9.90933 29.6236 13.4006C29.6236 16.96 26.6662 19.851 23.1733 19.851C19.6122 19.851 16.7229 16.9617 16.7229 13.4006ZM39.0574 37.829C39.0574 30.9906 33.5015 25.4346 26.663 25.4346H19.6137C12.7734 25.4346 7.28906 30.9925 7.28906 37.829C7.28906 39.2932 8.44792 40.4521 9.91211 40.4521H36.3646C37.8193 40.4521 39.0574 39.3026 39.0574 37.829ZM26.663 28.1681C31.9322 28.1681 36.2635 32.4628 36.3234 37.7186H10.0231C10.0821 32.4605 14.3468 28.1681 19.6137 28.1681H26.663Z"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="0.5"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconProfile'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconProfile';
+</style>

package/src/components/Icons/IconSubject.vue

@@ -0,0 +1,38 @@
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="46"
+    height="41"
+    viewBox="0 0 46 41"
+    fill="none"
+    class="IconSubject"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.432 29.3991C20.5448 29.4683 21.6743 29.5115 22.8336 29.5115C23.9891 29.5115 25.1213 29.4766 26.2281 29.4074C25.1136 30.9099 23.9719 32.2618 22.8336 33.4488C21.6948 32.2585 20.5504 30.9038 19.432 29.3991ZM34.3335 28.2116C34.5576 29.0992 34.7452 29.9614 34.8692 30.7715C35.1713 32.7687 35.1664 34.5013 34.872 35.8239C34.2981 38.432 32.125 39.2427 30.047 38.6108C28.7499 38.2162 27.2452 37.3452 25.6686 36.0829C25.0289 35.5705 24.3754 34.9761 23.7207 34.3425C25.1241 32.8788 26.5225 31.1777 27.865 29.2813C30.1881 29.0649 32.3618 28.6986 34.3335 28.2116ZM32.2002 22.0292C32.9467 23.7496 33.546 25.4192 34.0076 27.0046C32.4077 27.3964 30.6585 27.7047 28.7997 27.9205C29.4134 26.9897 30.0182 26.0323 30.5976 25.0268C31.1803 24.0241 31.7044 23.0236 32.2002 22.0292ZM13.4654 22.0269C13.9612 23.0208 14.4891 24.0241 15.068 25.0268C15.6474 26.0323 16.2528 26.9897 16.8665 27.9177C15.0043 27.7014 13.2606 27.3876 11.6586 26.9952C12.1201 25.4126 12.7227 23.7447 13.4654 22.0269ZM10.4461 14.4201C11.0106 16.3664 11.7831 18.4233 12.7543 20.5361C11.7798 22.6573 11.01 24.7214 10.4461 26.6721C9.56678 26.4241 8.7284 26.1563 7.96362 25.8569C6.08212 25.122 4.58576 24.2482 3.5858 23.3318C1.61132 21.5278 1.99482 19.2479 3.5858 17.7604C4.57746 16.8351 6.08212 15.9707 7.96362 15.2353C8.72785 14.9392 9.56678 14.6708 10.4461 14.4201ZM28.8107 13.175C30.6701 13.3914 32.4077 13.7057 34.0042 14.0975C33.5433 15.6802 32.944 17.3464 32.2002 19.0641C31.7044 18.0691 31.1798 17.0697 30.5976 16.0664C30.0215 15.0659 29.4244 14.1003 28.8107 13.175ZM16.867 13.175C16.2533 14.103 15.6474 15.0604 15.0685 16.0659C14.4925 17.0664 13.9562 18.0631 13.4637 19.0553C12.72 17.3403 12.1234 15.6774 11.6619 14.0975C13.2645 13.7057 15.0082 13.3908 16.867 13.175ZM22.8336 12.8347C24.3233 12.8347 25.7787 12.8983 27.1794 13.014C27.984 14.1728 28.7681 15.3974 29.5141 16.6918C30.2584 17.9828 30.9324 19.2744 31.5317 20.5483C30.9319 21.8189 30.2578 23.1099 29.5141 24.4043C28.7681 25.6926 27.9867 26.92 27.1854 28.076C25.7815 28.1944 24.3289 28.2575 22.8336 28.2575C21.34 28.2575 19.888 28.1972 18.484 28.0821C17.6827 26.9227 16.9024 25.6953 16.1554 24.4043C15.4089 23.1132 14.7371 21.8216 14.1355 20.5511C14.7404 19.2766 15.4089 17.9856 16.1554 16.6912C16.9024 15.3968 17.6827 14.1689 18.484 13.0134C19.888 12.8983 21.34 12.8347 22.8336 12.8347ZM22.8364 7.64116C23.978 8.83205 25.1185 10.1895 26.2375 11.6941C25.1246 11.625 23.9952 11.5785 22.8342 11.5785C21.6748 11.5785 20.5454 11.625 19.4325 11.6941C20.5504 10.1895 21.6948 8.83149 22.8364 7.64116ZM34.8725 5.26935C35.1807 6.58918 35.1719 8.32404 34.8697 10.3212C34.7458 11.1314 34.5582 11.9963 34.3341 12.8839C32.3684 12.3997 30.1975 12.0361 27.8827 11.8203C26.5336 9.91502 25.1307 8.21779 23.724 6.75021C24.3781 6.11382 25.0295 5.52225 25.6692 5.01258C27.2463 3.75031 28.7593 2.90529 30.0475 2.4814C32.5206 1.66959 34.3651 3.08791 34.8725 5.26935ZM9.57508 4.98989C9.21538 6.53439 9.23807 8.41092 9.55793 10.5149C9.68686 11.3737 9.88332 12.2791 10.1163 13.2065C9.19712 13.4694 8.31558 13.7516 7.50819 14.0687C5.52541 14.8412 3.88518 15.7577 2.72971 16.8417C0.264935 19.1565 0.587559 22.2455 2.72971 24.2521C3.88795 25.3356 5.52541 26.252 7.50819 27.0279C10.3183 28.123 13.855 28.9072 17.7951 29.273C19.1409 31.1755 20.5415 32.8761 21.9482 34.3431C21.2908 34.9767 20.6361 35.571 19.9964 36.0835C18.4198 37.3457 16.9124 38.2018 15.618 38.6113C13.1306 39.3955 11.3415 38.0203 10.8219 35.9396C10.5114 34.6801 10.4876 33.0199 10.7505 31.1119L9.50535 30.9392C9.22866 32.9563 9.23143 34.7553 9.6033 36.2329C10.4101 39.4558 13.2462 40.6428 15.9899 39.8072C17.5062 39.349 19.1199 38.3916 20.7833 37.063C21.4607 36.5212 22.1469 35.8986 22.8336 35.2329C23.5215 35.8986 24.2077 36.5212 24.8856 37.063C26.5457 38.3916 28.1594 39.349 29.6757 39.8072C32.9124 40.7867 35.4287 38.9633 36.0938 36.1039C36.4546 34.5589 36.4308 32.6851 36.1115 30.5806C35.6567 27.5973 34.5637 24.142 32.9124 20.5483C33.8831 18.4299 34.6561 16.3691 35.2211 14.4201C36.0999 14.6708 36.9416 14.9392 37.7025 15.2358C39.5846 15.9707 41.0831 16.8445 42.0837 17.7609C44.0089 19.5251 43.715 21.7586 42.1667 23.2516C41.2326 24.1536 39.8093 25.0014 38.0251 25.7302L38.5005 26.8912C40.3853 26.1214 41.9359 25.2233 43.0344 24.1619C45.4206 21.8532 45.0315 18.8035 42.9359 16.8412C41.7776 15.7571 40.1435 14.8407 38.1602 14.0682C37.3506 13.7516 36.4712 13.4689 35.5493 13.206C35.7828 12.2785 35.9787 11.3732 36.1115 10.5143C36.4308 8.40981 36.4546 6.53384 36.0938 4.98934C35.3219 1.69781 32.4858 0.432772 29.6757 1.28554C28.1594 1.74651 26.5457 2.70054 24.8856 4.03199C22.5315 5.9146 20.0839 8.58911 17.7956 11.8198C15.478 12.0361 13.3054 12.3964 11.3332 12.8834C11.1113 11.9957 10.9242 11.1308 10.8003 10.3206C10.4948 8.32348 10.5003 6.59194 10.7942 5.2688C11.3592 2.72046 13.446 1.85608 15.5096 2.44931C16.7575 2.80735 18.2073 3.61639 19.7297 4.79898L20.4994 3.80731C18.8908 2.55666 17.3258 1.68895 15.8643 1.24459C12.777 0.30328 10.2264 2.19088 9.57508 4.98989Z"
+        fill="currentColor"
+        stroke="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.8301 17.3904C24.5826 17.3904 25.9888 18.7976 25.9888 20.5496C25.9888 22.2989 24.5826 23.7056 22.8301 23.7056C21.0775 23.7056 19.673 22.2989 19.673 20.5496C19.6736 18.7976 21.0775 17.3904 22.8301 17.3904ZM22.8301 16.1309C20.3996 16.1309 18.4141 18.117 18.4141 20.5502C18.4141 22.9801 20.4002 24.9596 22.8301 24.9596C25.26 24.9596 27.2422 22.9795 27.2422 20.5502C27.2422 18.117 25.26 16.1309 22.8301 16.1309Z"
+        fill="currentColor"
+        stroke="currentColor"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconSubject'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconSubject';
+</style>

package/src/components/Icons/Icons.stories.ts

@@ -34,6 +34,7 @@ import IconPause from './IconPause.vue'
 import IconPlay from './IconPlay.vue'
 import IconPlus from './IconPlus.vue'
 import IconPrev from './IconPrev.vue'
+import IconProfile from './IconProfile.vue'
 import IconRewindTen from './IconRewindTen.vue'
 import IconSearch from './IconSearch.vue'
 import IconShare from './IconShare.vue'
@@ -47,6 +48,7 @@ import IconSocialReddit from './IconSocialReddit.vue'
 import IconSocialTwitter from './IconSocialTwitter.vue'
 import IconSocialYoutube from './IconSocialYoutube.vue'
 import IconStop from './IconStop.vue'
+import IconSubject from './IconSubject.vue'
 import IconTime from './IconTime.vue'
 import IconUniversity from './IconUniversity.vue'
 import IconUser from './IconUser.vue'
@@ -92,6 +94,7 @@ export default {
     IconPlay,
     IconPlus,
     IconPrev,
+    IconProfile,
     IconRewindTen,
     IconSearch,
     IconShare,
@@ -432,6 +435,18 @@ export const User = {
     template: '<IconUser />'
   })
 }
+export const Profile = {
+  render: () => ({
+    components: { IconProfile },
+    template: '<IconProfile />'
+  })
+}
+export const Subject = {
+  render: () => ({
+    components: { IconSubject },
+    template: '<IconSubject />'
+  })
+}
 export const Volume = {
   render: () => ({
     components: { IconVolume },