@explorer-1/vue 0.0.0

package/src/components/Icons/IconSocialTwitter.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    class="IconSocialTwitter"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M14.2,10.2L23,0h-2.1l-7.6,8.8L7.3,0h-7l9.2,13.3L0.3,24h2.1l8-9.3l6.4,9.3h7L14.2,10.2L14.2,10.2z M11.4,13.5 l-0.9-1.3L3.1,1.6h3.2l6,8.5l0.9,1.3l7.8,11.1h-3.2L11.4,13.5L11.4,13.5z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconSocialTwitter'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconSocialTwitter';
+</style>

package/src/components/Icons/IconSocialYoutube.vue

@@ -0,0 +1,35 @@
+<template>
+  <svg
+    class="IconSocialYoutube"
+    width="24"
+    height="16"
+    viewBox="0 0 24 16"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <path
+        d="M0 0H24V24H0z"
+        transform="translate(0 -4)"
+      />
+      <path
+        d="M12.239 4l.1.001.248.001c.88.006 2.62.025 4.352.089l.546.021c1.632.07 3.175.183 3.892.366 1.032.262 1.845 1.037 2.121 2.02.455 1.616.498 4.822.502 5.409v.186c-.004.587-.047 3.793-.502 5.409-.276.983-1.089 1.758-2.121 2.02-1.713.437-8.14.475-9.222.478h-.31c-1.082-.003-7.51-.04-9.222-.478-1.032-.262-1.845-1.037-2.121-2.02-.44-1.56-.494-4.603-.501-5.339v-.326c.007-.737.062-3.779.5-5.339.277-.983 1.09-1.758 2.122-2.02.797-.204 2.613-.32 4.437-.387l.547-.02c1.543-.048 3.019-.064 3.805-.069l.248-.001h.1zM10 8.5v7l6-3.5-6-3.5z"
+        fill="currentColor"
+        transform="translate(0 -4)"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconSocialYoutube'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconSocialYoutube';
+</style>

package/src/components/Icons/IconStop.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    class="IconStop"
+    width="60"
+    height="60"
+    viewBox="0 0 185 185"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M0,0h185v185H0V0z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconStop'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconStop';
+</style>

package/src/components/Icons/IconTime.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    class="IconTime"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M10 0c5.523 0 10 4.477 10 10s-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0zm0 2a8 8 0 100 16 8 8 0 000-16zm1 2v6.185l2.596 2.597-1.414 1.414L9 11.014 9.013 11H9V4h2z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconTime'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconTime';
+</style>

package/src/components/Icons/IconUniversity.vue

@@ -0,0 +1,21 @@
+<!-- Source: https://fontawesome.com/icons/university?f=classic&s=light -->
+<template>
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="34"
+    height="34"
+    viewBox="0 0 34 34"
+    class="IconUniversity"
+  >
+    <path
+      d="M30.156 10.441c.475.317.844.844.844 1.424 0 .897-.738 1.635-1.688 1.635H5.636C4.685 13.5 4 12.762 4 11.865c0-.58.316-1.107.791-1.424l12.287-6.908a.718.718 0 0 1 .791 0l12.287 6.908Zm-1.002 1.371L17.5 5.221 5.793 11.812h9.017c-.21-.369-.263-.79-.263-1.265 0-1.582 1.318-2.953 2.953-2.953 1.582 0 2.953 1.37 2.953 2.953 0 .474-.105.896-.316 1.265h9.017Zm-11.654 0a1.25 1.25 0 0 0 1.266-1.265c0-.686-.58-1.266-1.266-1.266a1.25 1.25 0 0 0-1.266 1.266c0 .738.528 1.265 1.266 1.265ZM7.375 15.188h1.688v6.75h4.218v-6.75h1.688v6.75h5.062v-6.75h1.688v6.75h4.218v-6.75h1.688v6.75c.422 0 .844.421.844.843 0 .475-.422.844-.844.844H7.375a.833.833 0 0 1-.844-.844c0-.422.37-.843.844-.843v-6.75Zm21.516 10.124c.422 0 .843.422.843.844 0 .475-.422.844-.843.844H6.109a.833.833 0 0 1-.843-.844c0-.422.369-.843.843-.843h22.782Zm1.265 3.375c.422 0 .844.422.844.844 0 .475-.422.844-.844.844H4.844A.833.833 0 0 1 4 29.531c0-.422.37-.843.844-.843h25.312Z"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconUniversity'
+})
+</script>

package/src/components/Icons/IconUser.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'IconArrows'
+})
+</script>
+<template>
+  <svg
+    class="IconUser"
+    width="21"
+    height="21"
+    viewBox="0 0 21 21"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M10.5 0C4.7 0 0 4.7 0 10.5S4.7 21 10.5 21 21 16.3 21 10.5 16.3 0 10.5 0zm5.42 17.867c-1.525 1.143-3.43 1.778-5.42 1.778-2.032 0-3.938-.635-5.42-1.778v-.593a2.701 2.701 0 0 1 2.71-2.71c.466 0 1.143.509 2.71.509 1.524 0 2.202-.508 2.71-.508a2.729 2.729 0 0 1 2.71 2.71v.592zm1.27-1.143c-.297-1.99-1.948-3.514-3.98-3.514-.89 0-1.313.508-2.71.508-1.44 0-1.863-.508-2.71-.508-2.074 0-3.725 1.524-4.022 3.514-1.524-1.651-2.413-3.81-2.413-6.224A9.134 9.134 0 0 1 10.5 1.355c5.038 0 9.145 4.107 9.145 9.145 0 2.413-.931 4.573-2.456 6.224zM10.5 4.742a3.731 3.731 0 0 0-3.726 3.726 3.704 3.704 0 0 0 3.726 3.726 3.731 3.731 0 0 0 3.726-3.726c0-2.033-1.694-3.726-3.726-3.726zm0 6.097a2.367 2.367 0 0 1-2.371-2.371c0-1.27 1.059-2.371 2.371-2.371 1.27 0 2.371 1.1 2.371 2.37 0 1.313-1.1 2.372-2.371 2.372z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconUser';
+</style>

package/src/components/Icons/IconVolume.vue

@@ -0,0 +1,27 @@
+<template>
+  <svg
+    class="IconVolume"
+    width="60"
+    height="60"
+    viewBox="0 0 480 512"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M342.91 193.57c-7.81-3.8-17.5-.48-21.34 7.5-3.81 7.97-.44 17.53 7.53 21.34C343.22 229.2 352 242.06 352 256c0 13.94-8.78 26.8-22.9 33.58-7.97 3.81-11.34 13.38-7.53 21.34 3.86 8.05 13.54 11.29 21.34 7.5C368.25 306.28 384 282.36 384 256s-15.75-50.29-41.09-62.43zM231.81 64c-5.91 0-11.92 2.18-16.78 7.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c4.87 4.87 10.88 7.05 16.78 7.05 12.33 0 24.19-9.52 24.19-24.02V88.02C256 73.51 244.13 64 231.81 64zM224 404.67L139.31 320H32V192h107.31L224 107.33v297.34zm256-148.68c0-66.12-34.02-126.62-88.81-157.87-7.69-4.38-17.59-1.78-22.04 5.89-4.45 7.66-1.77 17.44 5.96 21.86 44.77 25.55 72.61 75.4 72.61 130.12s-27.84 104.58-72.61 130.12c-7.72 4.42-10.4 14.2-5.96 21.86 4.3 7.38 14.06 10.44 22.04 5.89C445.98 382.62 480 322.12 480 255.99z"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'IconVolume'
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/IconVolume';
+</style>

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

@@ -0,0 +1,440 @@
+import IconArrow from './IconArrow.vue'
+import Icon360 from './Icon360.vue'
+import IconArrows from './IconArrows.vue'
+import IconAudio from './IconAudio.vue'
+import IconBook from './IconBook.vue'
+import IconBookUser from './IconBookUser.vue'
+import IconBriefcase from './IconBriefcase.vue'
+import IconCalendar from './IconCalendar.vue'
+import IconCaret from './IconCaret.vue'
+import IconCheckbox from './IconCheckbox.vue'
+import IconCheckboxSelected from './IconCheckboxSelected.vue'
+import IconClose from './IconClose.vue'
+import IconCloseLightbox from './IconCloseLightbox.vue'
+import IconDownload from './IconDownload.vue'
+import IconDropdown from './IconDropdown.vue'
+import IconEnvelope from './IconEnvelope.vue'
+import IconExpand from './IconExpand.vue'
+import IconExternal from './IconExternal.vue'
+import IconFilter from './IconFilter.vue'
+import IconForwardTen from './IconForwardTen.vue'
+import IconGrid from './IconGrid.vue'
+import IconHand from './IconHand.vue'
+import IconInfo from './IconInfo.vue'
+import IconLink from './IconLink.vue'
+import IconList from './IconList.vue'
+import IconLocation from './IconLocation.vue'
+import IconMagnifyingGlass from './IconMagnifyingGlass.vue'
+import IconMedal from './IconMedal.vue'
+import IconMenu from './IconMenu.vue'
+import IconMinus from './IconMinus.vue'
+import IconMute from './IconMute.vue'
+import IconNext from './IconNext.vue'
+import IconPause from './IconPause.vue'
+import IconPlay from './IconPlay.vue'
+import IconPlus from './IconPlus.vue'
+import IconPrev from './IconPrev.vue'
+import IconRewindTen from './IconRewindTen.vue'
+import IconSearch from './IconSearch.vue'
+import IconShare from './IconShare.vue'
+import IconSlideshow from './IconSlideshow.vue'
+import IconSocialEmail from './IconSocialEmail.vue'
+import IconSocialFacebook from './IconSocialFacebook.vue'
+import IconSocialGoogleClassroom from './IconSocialGoogleClassroom.vue'
+import IconSocialInstagram from './IconSocialInstagram.vue'
+import IconSocialPinterest from './IconSocialPinterest.vue'
+import IconSocialReddit from './IconSocialReddit.vue'
+import IconSocialTwitter from './IconSocialTwitter.vue'
+import IconSocialYoutube from './IconSocialYoutube.vue'
+import IconStop from './IconStop.vue'
+import IconTime from './IconTime.vue'
+import IconUniversity from './IconUniversity.vue'
+import IconUser from './IconUser.vue'
+import IconVolume from './IconVolume.vue'
+
+export default {
+  title: 'Foundation/Icons',
+  component: IconArrows,
+  subcomponents: {
+    IconArrow,
+    Icon360,
+    IconArrows,
+    IconAudio,
+    IconBook,
+    IconBookUser,
+    IconBriefcase,
+    IconCalendar,
+    IconCaret,
+    IconCheckbox,
+    IconCheckboxSelected,
+    IconClose,
+    IconCloseLightbox,
+    IconDownload,
+    IconDropdown,
+    IconEnvelope,
+    IconExpand,
+    IconExternal,
+    IconFilter,
+    IconForwardTen,
+    IconGrid,
+    IconHand,
+    IconInfo,
+    IconLink,
+    IconList,
+    IconLocation,
+    IconMagnifyingGlass,
+    IconMedal,
+    IconMenu,
+    IconMinus,
+    IconMute,
+    IconNext,
+    IconPause,
+    IconPlay,
+    IconPlus,
+    IconPrev,
+    IconRewindTen,
+    IconSearch,
+    IconShare,
+    IconSlideshow,
+    IconSocialEmail,
+    IconSocialFacebook,
+    IconSocialGoogleClassroom,
+    IconSocialInstagram,
+    IconSocialPinterest,
+    IconSocialReddit,
+    IconSocialTwitter,
+    IconSocialYoutube,
+    IconStop,
+    IconTime,
+    IconUniversity,
+    IconUser,
+    IconVolume
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use with tailwind text classes to specify size and color'
+      }
+    }
+  }
+}
+
+export const Arrow = {
+  render: () => ({
+    components: { IconArrow },
+    template: '<IconArrow />'
+  })
+}
+export const ThreeSixty = {
+  name: '360',
+  render: () => ({
+    components: { Icon360 },
+    template: '<Icon360 />'
+  })
+}
+export const Arrows = {
+  render: () => ({
+    components: { IconArrows },
+    template: '<IconArrows />'
+  })
+}
+export const Audio = {
+  render: () => ({
+    components: { IconAudio },
+    template: '<IconAudio />'
+  })
+}
+export const Book = {
+  render: () => ({
+    components: { IconBook },
+    template: '<IconBook />'
+  })
+}
+export const BookUser = {
+  render: () => ({
+    components: { IconBookUser },
+    template: '<IconBookUser />'
+  })
+}
+export const Briefcase = {
+  render: () => ({
+    components: { IconBriefcase },
+    template: '<IconBriefcase />'
+  })
+}
+export const Calendar = {
+  render: () => ({
+    components: { IconCalendar },
+    template: '<IconCalendar />'
+  })
+}
+export const Caret = {
+  render: () => ({
+    components: { IconCaret },
+    template: '<IconCaret />'
+  })
+}
+export const Checkbox = {
+  render: () => ({
+    components: { IconCheckbox },
+    template: '<IconCheckbox />'
+  })
+}
+export const CheckboxSelected = {
+  render: () => ({
+    components: { IconCheckboxSelected },
+    template: '<IconCheckboxSelected />'
+  })
+}
+export const Close = {
+  render: () => ({
+    components: { IconClose },
+    template: '<IconClose />'
+  })
+}
+export const CloseLightbox = {
+  render: () => ({
+    components: { IconCloseLightbox },
+    template: '<IconCloseLightbox />'
+  })
+}
+export const Download = {
+  render: () => ({
+    components: { IconDownload },
+    template: '<IconDownload />'
+  })
+}
+export const Dropdown = {
+  render: () => ({
+    components: { IconDropdown },
+    template: '<IconDropdown />'
+  })
+}
+export const Envelope = {
+  render: () => ({
+    components: { IconEnvelope },
+    template: '<IconEnvelope />'
+  })
+}
+export const Expand = {
+  render: () => ({
+    components: { IconExpand },
+    template: '<IconExpand />'
+  })
+}
+export const External = {
+  render: () => ({
+    components: { IconExternal },
+    template: '<IconExternal />'
+  })
+}
+export const Filter = {
+  render: () => ({
+    components: { IconFilter },
+    template: '<IconFilter />'
+  })
+}
+export const ForwardTen = {
+  render: () => ({
+    components: { IconForwardTen },
+    template: '<IconForwardTen />'
+  })
+}
+export const Grid = {
+  render: () => ({
+    components: { IconGrid },
+    template: '<IconGrid />'
+  })
+}
+export const Hand = {
+  render: () => ({
+    components: { IconHand },
+    template: '<IconHand />'
+  })
+}
+export const Info = {
+  render: () => ({
+    components: { IconInfo },
+    template: '<IconInfo />'
+  })
+}
+export const Link = {
+  render: () => ({
+    components: { IconLink },
+    template: '<IconLink />'
+  })
+}
+export const List = {
+  render: () => ({
+    components: { IconList },
+    template: '<IconList />'
+  })
+}
+export const Location = {
+  render: () => ({
+    components: { IconLocation },
+    template: '<IconLocation />'
+  })
+}
+export const MagnifyingGlass = {
+  render: () => ({
+    components: { IconMagnifyingGlass },
+    template: '<IconMagnifyingGlass />'
+  })
+}
+export const Medal = {
+  render: () => ({
+    components: { IconMedal },
+    template: '<IconMedal />'
+  })
+}
+export const Menu = {
+  render: () => ({
+    components: { IconMenu },
+    template: '<IconMenu />'
+  })
+}
+export const Minus = {
+  render: () => ({
+    components: { IconMinus },
+    template: '<IconMinus />'
+  })
+}
+export const Mute = {
+  render: () => ({
+    components: { IconMute },
+    template: '<IconMute />'
+  })
+}
+export const Next = {
+  render: () => ({
+    components: { IconNext },
+    template: '<IconNext />'
+  })
+}
+export const Pause = {
+  render: () => ({
+    components: { IconPause },
+    template: '<IconPause />'
+  })
+}
+export const Play = {
+  render: () => ({
+    components: { IconPlay },
+    template: '<IconPlay />'
+  })
+}
+export const Plus = {
+  render: () => ({
+    components: { IconPlus },
+    template: '<IconPlus />'
+  })
+}
+export const Prev = {
+  render: () => ({
+    components: { IconPrev },
+    template: '<IconPrev />'
+  })
+}
+export const RewindTen = {
+  render: () => ({
+    components: { IconRewindTen },
+    template: '<IconRewindTen />'
+  })
+}
+export const Search = {
+  render: () => ({
+    components: { IconSearch },
+    template: '<IconSearch />'
+  })
+}
+export const Share = {
+  render: () => ({
+    components: { IconShare },
+    template: '<IconShare />'
+  })
+}
+export const Slideshow = {
+  render: () => ({
+    components: { IconSlideshow },
+    template: '<IconSlideshow />'
+  })
+}
+export const SocialEmail = {
+  render: () => ({
+    components: { IconSocialEmail },
+    template: '<IconSocialEmail />'
+  })
+}
+export const SocialFacebook = {
+  render: () => ({
+    components: { IconSocialFacebook },
+    template: '<IconSocialFacebook />'
+  })
+}
+export const SocialGoogleClassroom = {
+  render: () => ({
+    components: { IconSocialGoogleClassroom },
+    template: '<IconSocialGoogleClassroom />'
+  })
+}
+export const SocialInstagram = {
+  render: () => ({
+    components: { IconSocialInstagram },
+    template: '<IconSocialInstagram />'
+  })
+}
+export const SocialPinterest = {
+  render: () => ({
+    components: { IconSocialPinterest },
+    template: '<IconSocialPinterest />'
+  })
+}
+export const SocialReddit = {
+  render: () => ({
+    components: { IconSocialReddit },
+    template: '<IconSocialReddit />'
+  })
+}
+export const SocialTwitter = {
+  render: () => ({
+    components: { IconSocialTwitter },
+    template: '<IconSocialTwitter />'
+  })
+}
+export const SocialYoutube = {
+  render: () => ({
+    components: { IconSocialYoutube },
+    template: '<IconSocialYoutube />'
+  })
+}
+export const Stop = {
+  render: () => ({
+    components: { IconStop },
+    template: '<IconStop />'
+  })
+}
+export const Time = {
+  render: () => ({
+    components: { IconTime },
+    template: '<IconTime />'
+  })
+}
+export const University = {
+  render: () => ({
+    components: { IconUniversity },
+    template: '<IconUniversity />'
+  })
+}
+export const User = {
+  render: () => ({
+    components: { IconUser },
+    template: '<IconUser />'
+  })
+}
+export const Volume = {
+  render: () => ({
+    components: { IconVolume },
+    template: '<IconVolume />'
+  })
+}