@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Forms/Textarea.md

@@ -0,0 +1,57 @@
+```vue
+<template>
+    <div>
+        <Button @click="isDarkMode = !isDarkMode">{{ isDarkMode ? 'Disable' : 'Enable' }} Dark Mode</Button>
+        <div class="textareas" :class="{ dark: isDarkMode }">
+            <Textarea
+                label="Standard Textarea Field"
+                placeholder="Transfiguration Year Ones"
+                v-model="textareaVal1"
+                :isDarkMode="isDarkMode"
+            />
+            <Textarea
+                label="Disabled Textarea Field"
+                placeholder="Transfiguration Year Ones"
+                :disabled="true"
+                v-model="textareaVal2"
+                :isDarkMode="isDarkMode"
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import Button from '../Buttons/Button.vue'
+
+export default {
+    components: {
+        Button
+    },
+    data() {
+        return {
+            textareaVal1: null,
+            textareaVal2: null,
+            isDarkMode: false,
+        }
+    }
+}
+</script>
+
+<style>
+.uikit-btn {
+    margin-bottom: 30px;
+}
+
+.textareas {
+    padding: 30px;
+}
+
+.dark {
+    background-color: #1f3545;
+}
+
+.uikit-textarea:first-child {
+    margin-bottom: 10px;
+}
+</style>
+```

package/lib/components/Forms/Textarea.vue

@@ -0,0 +1,157 @@
+<template>
+    <div
+        class="uikit-textarea"
+        @mouseover="hover = true"
+        @mouseout="hover = false"
+    >
+        <label
+            v-if="label"
+            v-dark="isDarkMode"
+            class="uikit-textarea__label"
+            :class="{
+                'uikit-textarea__label--hover': hover,
+                'uikit-textarea__label--focus': focus
+            }"
+        >{{ label }}</label>
+        <textarea
+            v-dark="isDarkMode"
+            :value="modelValue"
+            :disabled="disabled"
+            :placeholder="placeholder"
+            :autofocus="autoFocus"
+            :style="{ height }"
+            class="uikit-textarea__textarea"
+            :class="{
+                'uikit-textarea__textarea--hover': hover,
+                'uikit-textarea__textarea--focus': focus
+            }"
+            @input="valueChange"
+            @focus="focus = true"
+            @blur="focus = false"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+import { dark } from '../../directives'
+
+@Component({
+    directives: {
+        dark,
+    },
+})
+export default class Textarea extends Vue {
+    @Prop() label?: string
+    @Prop() placeholder?: string
+    @Prop() center?: boolean
+    @Prop() modelValue!: string
+    @Prop() disabled?: boolean
+    @Prop() autoFocus?: boolean
+    @Prop({ default: '150px' }) height?: string
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    hover = false
+    focus = false
+
+    @Emit('update:modelValue')
+    valueChange ($event: Event) {
+        return ($event.target as HTMLInputElement).value
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-textarea {
+    &__label {
+        font-size: 13px;
+        line-height: 14px;
+        margin: 0 0 6px 11px;
+        color: $slate-01;
+        display: block;
+
+        &--dark {
+            color: $fog;
+        }
+
+        &--hover {
+            color: $slate-03;
+
+            &--dark {
+                color: $fog;
+            }
+        }
+
+        &--focus {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        &--error {
+            color: $red-pegasus;
+        }
+    }
+
+    &__textarea {
+        background-color: $white;
+        border: 1px solid rgba($pewter, 0.85);
+        color: $brand-black;
+        border-radius: 3px;
+        caret-color: $brand-blue;
+        padding: 7px 8px;
+        font-size: 16px;
+        line-height: 21px;
+        width: 100%;
+        box-sizing: border-box;
+        outline: none;
+
+        &::placeholder {
+            color: $pewter;
+        }
+
+        &:disabled {
+            background: $gray-background;
+            border: 1px solid $gray-background;
+            color: $slate-03;
+
+            &:placeholder {
+                color: $slate-03;
+            }
+        }
+
+        &--dark {
+            background-color: $moonlit-ocean;
+            border-color: $pewter;
+            color: $white;
+            caret-color: $banana-bread;
+
+            &:disabled {
+                border-color: $moonlit-ocean;
+                background-color: $moonlit-ocean;
+            }
+        }
+
+        &--hover {
+            border: 1px solid $baby-blue;
+
+            &--dark {
+                border: 0.5px solid $banana-bread;
+            }
+        }
+
+        &--focus {
+            border: 1px solid $brand-blue;
+
+            &--dark {
+                border-color: $banana-bread;
+            }
+        }
+    }
+}
+</style>

package/lib/components/Icons/Icon.md

@@ -0,0 +1,146 @@
+```vue
+<template>
+    <div>
+        <Button @click="toggleBackground">Toggle Background</Button>
+        <Button @click="toggleBorders">{{ showBorders ? 'Hide' : 'Show' }} Borders</Button>
+        <div class="icons__color">
+            <label>
+            Icon Color
+            </label>
+            <input type="color" v-model="iconColor">
+        </div>
+        <div
+            class="icons"
+            :class="{
+                'icons--dark': isDark,
+                'icons--borders': showBorders,
+            }"
+            :style="{
+                color: iconColor,
+            }"
+        >
+            <Icon type="accordionArrow" title="accordionArrow" />
+            <Icon type="activity" title="activity" />
+            <Icon type="add" title="add" />
+            <Icon type="addCircle" title="addCircle" />
+            <Icon type="arrow" title="arrow" />
+            <Icon type="barChart" title="barChart" />
+            <Icon type="calendar" title="calendar" />
+            <Icon type="check" title="check" />
+            <Icon type="close" title="close" />
+            <Icon type="correct" title="correct" />
+            <Icon type="edit" title="edit" />
+            <Icon type="exam" title="exam" />
+            <Icon type="eyeShow" title="eyeShow" />
+            <Icon type="eyeHide" title="eyeHide" />
+            <Icon type="filter" title="filter" />
+            <Icon type="filterActive" title="filterActive" />
+            <Icon type="flag" title="flag" />
+            <Icon type="flagFeedback" title="flagFeedback" />
+            <Icon type="flag-filled" title="flag-filled" />
+            <Icon type="handle" title="handle" />
+            <Icon type="help" title="help" />
+            <Icon type="hourglass" title="hourglass" />
+            <Icon type="image" title="image" />
+            <Icon type="incorrect" title="incorrect" />
+            <Icon type="info" title="info"/>
+            <Icon type="lightning" title="lightning" />
+            <Icon type="list" title="list" />
+            <Icon type="loading" title="loading" />
+            <Icon type="loading2" title="loading2" :isDarkMode="isDark" />
+            <Icon type="missedQuestions" title="missedQuestions" />
+            <Icon type="paginationArrow" title="paginationArrow" />
+            <Icon type="passage" title="passage" />
+            <Icon type="pencil" title="pencil" />
+            <Icon type="people" title="people" />
+            <Icon type="questions" title="questions" />
+            <Icon type="quick10" title="quick10" />
+            <Icon type="removeCircle" title="removeCircle" />
+            <Icon type="search" title="search" />
+            <Icon type="share" title="share" />
+            <Icon type="stopwatch" title="stopwatch" />
+            <Icon type="strike" title="strike" />
+            <Icon type="subject" title="subject" />
+            <Icon type="warning" title="warning" />
+            <Icon type="lock" title="lock" />
+            <Icon type="moon" title="moon" />
+            <Icon type="heart" title="heart" />
+            <Icon type="externalLink" title="externalLink" />
+            <Icon type="keyboard" title="keyboard" />
+            <Icon type="fullView" title="fullView" />
+            <Icon type="fullViewActive" title="fullViewActive" />
+            <Icon type="sideBar" title="sideBar" />
+            <Icon type="sideBarActive" title="sideBarActive" />
+            <Icon type="text" title="text" />
+            <Icon type="review-flag" title="review-flag" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    data () {
+        return {
+            showBorders: false,
+            isDark: false,
+            iconColor: '#1f3545',
+        }
+    },
+    methods: {
+        toggleBackground () {
+            this.isDark = !this.isDark
+            if (this.isDark) {
+                this.iconColor = '#ffffff'
+            } else {
+                this.iconColor = '#1f3545'
+            }
+        },
+        toggleBorders () {
+            this.showBorders = !this.showBorders
+        }
+    }
+}
+</script>
+
+<style>
+.icons {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 12px;
+    padding: 12px;
+    border-radius: 4px;
+}
+
+.icons--dark {
+    background-color: #1f3545;
+}
+
+.icons svg,
+.icons div {
+    margin: 5px;
+}
+
+.icons--borders svg,
+.icons--borders div {
+    border: 1px solid #1f3545;
+}
+
+.icons--dark.icons--borders svg,
+.icons--dark.icons--borders div {
+    border: 1px solid #fff;
+}
+
+.icons svg:hover {
+    color: #0064ff;
+}
+
+.icons--dark svg:hover {
+    color: #ffce74;
+}
+
+.icons__color {
+    margin: 10px 0;
+}
+</style>
+```

package/lib/components/Icons/Icon.vue

@@ -0,0 +1,192 @@
+<template>
+    <IconAdd v-if="type === 'add'" :title="title" />
+    <IconEdit v-else-if="type === 'edit'" :title="title" />
+    <IconFilter v-else-if="type === 'filter'" :title="title" />
+    <IconFilterActive v-else-if="type === 'filterActive'" :title="title" />
+    <IconSearch v-else-if="type === 'search'" :title="title" />
+    <IconClose v-else-if="type === 'close'" :title="title" />
+    <IconCheck v-else-if="type === 'check'" :title="title" />
+    <IconHandle v-else-if="type === 'handle'" :title="title" />
+    <IconHelp v-else-if="type === 'help'" :title="title" />
+    <IconArrow v-else-if="type === 'arrow'" :title="title" />
+    <IconPaginationArrow v-else-if="type === 'paginationArrow'" :title="title" />
+    <IconAccordionArrow v-else-if="type === 'accordionArrow'" :title="title" />
+    <IconQuestions v-else-if="type === 'questions'" :title="title" />
+    <IconSubject v-else-if="type === 'subject'" :title="title" />
+    <IconFlag v-else-if="type === 'flag'" :title="title" />
+    <IconFlagFilled v-else-if="type === 'flag-filled'" :title="title" />
+    <IconLoading v-else-if="type === 'loading'" :title="title" />
+    <IconLoading2
+        v-else-if="type === 'loading2'"
+        :title="title"
+        :is-dark-mode="isDarkMode"
+    />
+    <IconWarning v-else-if="type === 'warning'" :title="title" />
+    <IconHourglass v-else-if="type === 'hourglass'" :title="title" />
+    <IconImage v-else-if="type === 'image'" :title="title" />
+    <IconActivity v-else-if="type === 'activity'" :title="title" />
+    <IconBarChart v-else-if="type === 'barChart'" :title="title" />
+    <IconExam v-else-if="type === 'exam'" :title="title" />
+    <IconLightning v-else-if="type === 'lightning'" :title="title" />
+    <IconCalendar v-else-if="type === 'calendar'" :title="title" />
+    <IconPassage v-else-if="type === 'passage'" :title="title" />
+    <IconPencil v-else-if="type === 'pencil'" :title="title" />
+    <IconPeople v-else-if="type === 'people'" :title="title" />
+    <IconMissedQuestions v-else-if="type === 'missedQuestions'" :title="title" />
+    <IconQuick10 v-else-if="type === 'quick10'" :title="title" />
+    <IconShare v-else-if="type === 'share'" :title="title" />
+    <IconStopwatch v-else-if="type === 'stopwatch'" :title="title" />
+    <IconStrike v-else-if="type === 'strike'" :title="title" />
+    <IconAddCircle v-else-if="type === 'addCircle'" :title="title" />
+    <IconRemoveCircle v-else-if="type === 'removeCircle'" :title="title" />
+    <IconReviewFlag v-else-if="type === 'review-flag'" :title="title" />
+    <IconEyeShow v-else-if="type === 'eyeShow'" :title="title" />
+    <IconEyeHide v-else-if="type === 'eyeHide'" :title="title" />
+    <IconLock v-else-if="type === 'lock'" :title="title" />
+    <IconMoon v-else-if="type === 'moon'" :title="title" />
+    <IconHeart v-else-if="type === 'heart'" :title="title" />
+    <IconExternalLink v-else-if="type === 'externalLink'" :title="title" />
+    <IconKeyboard v-else-if="type === 'keyboard'" :title="title" />
+    <IconFullView v-else-if="type === 'fullView'" :title="title" />
+    <IconFullViewActive v-else-if="type === 'fullViewActive'" :title="title" />
+    <IconSideBar v-else-if="type === 'sideBar'" :title="title" />
+    <IconSideBarActive v-else-if="type === 'sideBarActive'" :title="title" />
+    <IconCorrect v-else-if="type === 'correct'" :title="title" />
+    <IconIncorrect v-else-if="type === 'incorrect'" :title="title" />
+    <IconFlagFeedback
+        v-else-if="type === 'flagFeedback'"
+        :title="title"
+        :secondary-color="secondaryColor"
+    />
+    <IconText v-else-if="type === 'text'" :title="title" />
+    <IconInfo v-else-if="type === 'info'" :title="title" />
+    <IconList v-else-if="type === 'list'" :title="title" />
+    <IconLaunch v-else-if="type === 'launch'" :title="title" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import IconAdd from './IconAdd.vue'
+import IconEdit from './IconEdit.vue'
+import IconFilter from './IconFilter.vue'
+import IconFilterActive from './IconFilterActive.vue'
+import IconSearch from './IconSearch.vue'
+import IconClose from './IconClose.vue'
+import IconCheck from './IconCheck.vue'
+import IconHandle from './IconHandle.vue'
+import IconHelp from './IconHelp.vue'
+import IconArrow from './IconArrow.vue'
+import IconAccordionArrow from './IconAccordionArrow.vue'
+import IconPaginationArrow from './IconPaginationArrow.vue'
+import IconQuestions from './IconQuestions.vue'
+import IconSubject from './IconSubject.vue'
+import IconFlag from './IconFlag.vue'
+import IconFlagFilled from './IconFlagFilled.vue'
+import IconLoading from './IconLoading.vue'
+import IconLoading2 from './IconLoading2.vue'
+import IconHourglass from './IconHourglass.vue'
+import IconImage from './IconImage.vue'
+import IconActivity from './IconActivity.vue'
+import IconBarChart from './IconBarChart.vue'
+import IconExam from './IconExam.vue'
+import IconLightning from './IconLightning.vue'
+import IconCalendar from './IconCalendar.vue'
+import IconPassage from './IconPassage.vue'
+import IconPencil from './IconPencil.vue'
+import IconPeople from './IconPeople.vue'
+import IconMissedQuestions from './IconMissedQuestions.vue'
+import IconQuick10 from './IconQuick10.vue'
+import IconShare from './IconShare.vue'
+import IconStopwatch from './IconStopwatch.vue'
+import IconStrike from './IconStrike.vue'
+import IconWarning from './IconWarning.vue'
+import IconAddCircle from './IconAddCircle.vue'
+import IconRemoveCircle from './IconRemoveCircle.vue'
+import IconReviewFlag from './IconReviewFlag.vue'
+import IconEyeShow from './IconEyeShow.vue'
+import IconEyeHide from './IconEyeHide.vue'
+import IconLock from './IconLock.vue'
+import IconMoon from './IconMoon.vue'
+import IconHeart from './IconHeart.vue'
+import IconExternalLink from './IconExternalLink.vue'
+import IconKeyboard from './IconKeyboard.vue'
+import IconFullView from './IconFullView.vue'
+import IconFullViewActive from './IconFullViewActive.vue'
+import IconSideBar from './IconSideBar.vue'
+import IconSideBarActive from './IconSideBarActive.vue'
+import IconCorrect from './IconCorrect.vue'
+import IconIncorrect from './IconIncorrect.vue'
+import IconFlagFeedback from './IconFlagFeedback.vue'
+import IconText from './IconText.vue'
+import IconInfo from './IconInfo.vue'
+import IconList from './IconList.vue'
+import IconLaunch from './IconLaunch.vue'
+import type { TIconType } from './icon'
+
+@Component({
+    components: {
+        IconAdd,
+        IconEdit,
+        IconFilter,
+        IconFilterActive,
+        IconSearch,
+        IconClose,
+        IconAccordionArrow,
+        IconHandle,
+        IconHelp,
+        IconArrow,
+        IconCheck,
+        IconPaginationArrow,
+        IconQuestions,
+        IconSubject,
+        IconFlag,
+        IconFlagFilled,
+        IconLoading,
+        IconLoading2,
+        IconHourglass,
+        IconImage,
+        IconActivity,
+        IconBarChart,
+        IconExam,
+        IconLightning,
+        IconCalendar,
+        IconPassage,
+        IconPencil,
+        IconPeople,
+        IconMissedQuestions,
+        IconQuick10,
+        IconShare,
+        IconStopwatch,
+        IconStrike,
+        IconWarning,
+        IconAddCircle,
+        IconRemoveCircle,
+        IconReviewFlag,
+        IconEyeShow,
+        IconEyeHide,
+        IconLock,
+        IconMoon,
+        IconHeart,
+        IconExternalLink,
+        IconKeyboard,
+        IconFullView,
+        IconFullViewActive,
+        IconSideBar,
+        IconSideBarActive,
+        IconCorrect,
+        IconIncorrect,
+        IconFlagFeedback,
+        IconText,
+        IconInfo,
+        IconList,
+        IconLaunch,
+    },
+})
+export default class Icon extends Vue {
+    @Prop({ default: 'add' }) type!: TIconType
+    @Prop({ default: '' }) title!: string
+    @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: undefined }) primaryColor!: string
+    @Prop({ default: 'currentColor' }) secondaryColor!: string
+}
+</script>

package/lib/components/Icons/IconAccordionArrow.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="accordionArrow" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconAccordionArrow.vue

@@ -0,0 +1,23 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g transform="translate(-384.000000, -42.000000)" fill="currentColor">
+                <g transform="translate(384.000000, 42.500000)">
+                    <path d="M9.5,-3.38775253 C9.9807836,-3.38775253 10.377038,-3.02583985 10.4311928,-2.55958484 L10.4375,-2.45025253 L10.4375,4.54974747 C10.4375,5.06751442 10.017767,5.48724747 9.5,5.48724747 C9.0192164,5.48724747 8.62296204,5.12533479 8.56880725,4.65907977 L8.5625,4.54974747 L8.562,-1.512 L2.5,-1.51275253 C2.0192164,-1.51275253 1.62296204,-1.87466521 1.56880725,-2.34092023 L1.5625,-2.45025253 C1.5625,-2.93103613 1.92441268,-3.32729049 2.39066769,-3.38144528 L2.5,-3.38775253 L9.5,-3.38775253 Z" transform="translate(6.000000, 1.049747) rotate(135.000000) translate(-6.000000, -1.049747) "></path>
+                </g>
+            </g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconAccordionArrow extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconActivity.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="activity" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconActivity.vue

@@ -0,0 +1,21 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="18px" height="23px" viewBox="0 0 18 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g fill="currentColor" fill-rule="nonzero">
+                <path d="M5.10867965,11.5081032 C5.55630801,11.7583619 5.7368526,12.3015762 5.54457653,12.7638667 L5.49353888,12.8689424 L3.15073969,17.0594186 C2.79600262,17.6939233 1.91911309,17.7406008 1.4907398,17.1888447 L1.41591284,17.0783749 L0.138022373,14.9055354 C-0.141956348,14.4294783 0.0169965822,13.8165902 0.49305368,13.5366114 C0.9351067,13.2766312 1.49514158,13.3951175 1.79705782,13.7945285 L1.86197763,13.8916427 L2.255,14.561 L3.74784043,11.8929624 C4.01734986,11.4109011 4.62661833,11.2385937 5.10867965,11.5081032 Z M15.6034483,13.4761905 C16.155733,13.4761905 16.6034483,13.9239057 16.6034483,14.4761905 C16.6034483,14.9890263 16.2174081,15.4116976 15.7200694,15.4694627 L15.6034483,15.4761905 L8.60344828,15.4761905 C8.05116353,15.4761905 7.60344828,15.0284752 7.60344828,14.4761905 C7.60344828,13.9633546 7.98948847,13.5406833 8.48682715,13.4829182 L8.60344828,13.4761905 L15.6034483,13.4761905 Z M5.10867965,4.12715078 C5.55630801,4.37740954 5.7368526,4.92062379 5.54457653,5.38291427 L5.49353888,5.48798999 L3.15073969,9.67846618 C2.79600262,10.3129709 1.91911309,10.3596484 1.4907398,9.80789228 L1.41591284,9.69742251 L0.138022373,7.524583 C-0.141956348,7.04852591 0.0169965822,6.43563778 0.49305368,6.15565906 C0.9351067,5.89567882 1.49514158,6.01416515 1.79705782,6.41357616 L1.86197763,6.51069036 L2.255,7.181 L3.74784043,4.51201001 C4.01734986,4.02994869 4.62661833,3.85764135 5.10867965,4.12715078 Z M15.6034483,7.0952381 C16.155733,7.0952381 16.6034483,7.54295335 16.6034483,8.0952381 C16.6034483,8.60807393 16.2174081,9.03074526 15.7200694,9.08851036 L15.6034483,9.0952381 L8.60344828,9.0952381 C8.05116353,9.0952381 7.60344828,8.64752285 7.60344828,8.0952381 C7.60344828,7.58240226 7.98948847,7.15973093 8.48682715,7.10196583 L8.60344828,7.0952381 L15.6034483,7.0952381 Z"></path>
+            </g>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconActivity extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconAdd.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="add" />
+    </div>
+</template>
+```

package/lib/components/Icons/IconAdd.vue

@@ -0,0 +1,19 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>{{ title }}</title>
+        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <path d="M12,4 C12.6903559,4 13.25,4.55964406 13.25,5.25 L13.25,10.749 L18.75,10.75 C19.4403559,10.75 20,11.3096441 20,12 C20,12.6903559 19.4403559,13.25 18.75,13.25 L13.25,13.25 L13.25,18.75 C13.25,19.4403559 12.6903559,20 12,20 C11.3096441,20 10.75,19.4403559 10.75,18.75 L10.75,13.25 L5.25,13.25 C4.55964406,13.25 4,12.6903559 4,12 C4,11.3096441 4.55964406,10.75 5.25,10.75 L10.75,10.75 L10.75,5.25 C10.75,4.55964406 11.3096441,4 12,4 Z" fill="currentColor"></path>
+        </g>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconAdd extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/IconAddCircle.md

@@ -0,0 +1,7 @@
+```vue
+<template>
+    <div>
+        <Icon type="addCircle" />
+    </div>
+</template>
+```