@pocketprep/ui-kit 2.0.40 → 3.0.0

package/lib/components/Charts/Bar.vue

@@ -0,0 +1,364 @@
+<template>
+    <div :id="chartId" class="uikit-bar" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import Highcharts, { chart } from 'highcharts'
+import Accessibility from 'highcharts/modules/accessibility'
+import BrandColors from '../../pocketprep-export.module.scss'
+
+type TCustomChartOptions = Highcharts.Options & { 
+    plotOptions: { 
+        series: { 
+            groupPadding: number
+            pointPadding: number
+        }
+        column: {
+            borderRadiusTopLeft?: number
+            borderRadiusTopRight?: number
+        }
+    }
+}
+
+type TCustomSeries = Highcharts.Series & {
+    options: {
+        borderRadiusTopLeft: number
+        borderRadiusTopRight: number
+        borderRadiusBottomRight: number
+        borderRadiusBottomLeft: number
+    }
+}
+
+type TShapeArgs = {
+    d?: Highcharts.SVGPathArray
+    width?: number
+    height?: number
+    x?: number
+    y?: number
+}
+
+type TCustomPoint = Highcharts.Point & {
+    shapeArgs: TShapeArgs
+    shapeType: string
+    dlBox: TShapeArgs
+}
+
+type TCustomHighcharts = typeof Highcharts & {
+    seriesTypes: {
+        column: {
+            prototype: Record<string, unknown>
+        }
+    }
+};
+
+Accessibility(Highcharts);
+(function (H) {
+    H.wrap((H.seriesTypes.column.prototype), 'translate', function (this: TCustomSeries, proceed: () => void) {
+        const options = this.options  
+
+        proceed.call(this);
+
+        (this.points as TCustomPoint[]).forEach(function (point) {
+            if (options.borderRadiusTopLeft || options.borderRadiusTopRight) {
+                const w = Number(point.shapeArgs.width)
+                const h = Number(point.shapeArgs.height)
+                const x = Number(point.shapeArgs.x)
+                const y = Number(point.shapeArgs.y)
+                const maxR = Math.min(w, h) / 2
+
+                let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w)
+                let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w)
+
+
+                radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft
+                radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight
+
+                point.dlBox = point.shapeArgs
+
+                point.shapeType = 'path'
+                const d = [
+                    'M', x + radiusTopLeft, y,
+                    'L', x + w - radiusTopRight, y,
+                    'C', x + w - (radiusTopRight / 2), y, x + w, y + (radiusTopRight / 2), x + w, y + radiusTopRight,
+                    'L', x + w, y + h,
+                    'C', x + w, y + h, x + w, y + h, x + w, y + h,
+                    'L', x, y + h,
+                    'C', x, y + h, x, y + h, x, y + h,
+                    'L', x, y + radiusTopLeft,
+                    'C', x, y + (radiusTopLeft / 2), x + (radiusTopLeft / 2), y, x + radiusTopLeft, y,
+                    'Z',
+                ] as unknown as Highcharts.SVGPathArray
+                point.shapeArgs = {
+                    d,
+                }
+            }
+
+        })
+    })
+}(Highcharts as TCustomHighcharts))
+
+/**
+ * @see [Designs for Content - Student](https://marvelapp.com/adf8ab3/screen/68221510)  
+ */
+@Component
+export default class Bar extends Vue {
+    @Prop({ default: '' }) title!: string
+    @Prop() data!: Highcharts.PointOptionsObject[]
+    @Prop() formatterFunc!: 
+    Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject>
+    @Prop() type!: 'percent' | 'distribution'
+    @Prop({ default: null }) yAxisTitle!: string
+    @Prop({ default: null }) max!: number
+    @Prop({ default: false }) hideAverageLine!: boolean
+    @Prop({ default: 'normal' }) size!: 'normal' | 'small'
+    @Prop() barColor?: string
+    @Prop({ default: '' }) description!: string
+    @Prop({ default: false }) isDarkMode!: boolean
+
+    chartId = `chart${Math.round(Math.random() * 10000)}`
+
+    mounted () {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const self = this
+
+        const chartOptions: TCustomChartOptions = {
+            accessibility: {
+                description: this.description,
+            },
+            tooltip: {
+                formatter: function () {
+                    return String(this.y)
+                },
+            },
+            legend: {
+                enabled: false,
+            },
+            credits: {
+                enabled: false,
+            },
+            chart: {
+                type: 'column',
+                spacingLeft: 0,
+                spacingRight: 0,
+                spacingBottom: 6,
+                backgroundColor: 'transparent',
+            },
+            title: {
+                text: this.title,
+                align: 'left',
+                style: {
+                    color: !this.isDarkMode ? BrandColors.brandBlack : BrandColors.fog,
+                },
+            },
+            xAxis: {
+                tickLength: 0,
+                type: 'category',
+            },
+            yAxis: {
+                min: 0,
+                max: this.max,
+                opposite: true,
+                labels: {
+                    formatter: this.formatterFunc || function () {
+                        return String(this.value)
+                    },
+                },
+                title: {
+                    text: this.yAxisTitle,
+                },
+            },
+            colors: [ 
+                this.barColor 
+                    ? this.barColor || ''
+                    : this.isDarkMode 
+                        ? BrandColors.grayBackground || ''
+                        : BrandColors.brandBlack || '',
+            ],
+            plotOptions: {
+                series: {
+                    groupPadding: 0.1,
+                    pointPadding: 0,
+                },
+                column: {
+                    minPointLength: 3,
+                    maxPointWidth: 100,
+                    borderWidth: 0,
+                    borderRadiusTopLeft: 3,
+                    borderRadiusTopRight: 3,
+                },
+            },
+            series: [
+                {
+                    type: 'column',
+                    data: this.data,
+                    borderColor: this.barColor 
+                        ? this.barColor 
+                        : this.isDarkMode 
+                            ? BrandColors.grayBackground
+                            : BrandColors.brandBlack,
+                    states: {
+                        hover: {
+                            borderColor: BrandColors.bananaBread,
+                            color: BrandColors.bananaBread,
+                        },
+                    },
+                },
+            ],
+        }
+
+        if (this.type === 'percent') {
+            chartOptions.tooltip = {
+                useHTML: true,
+                borderWidth: 0,
+                padding: 0,
+                borderRadius: 12,
+                backgroundColor: 'rgba(28, 47, 60, 0.95)',
+                shadow: false,
+                style: {
+                    fontFamily: '\'Avenir Next\', \'Muli\', sans-serif',
+                },
+                formatter: function () {
+                    const customInfo = (this.point as unknown as { info: string }).info
+                    return `
+                        <div class="uikit-bar__tooltip">
+                            <div class="uikit-bar__tooltip-percent">${this.y}%</div>
+                            ${customInfo ? `<div class="uikit-bar__tooltip-date">${customInfo}</div>` : ''}
+                        </div>
+                        `
+                },
+            }
+            chartOptions.xAxis = { 
+                tickLength: 0,
+                lineColor: !this.isDarkMode ? BrandColors.fog : BrandColors.ash,
+                labels: {
+                    enabled: false, 
+                },
+            }
+            chartOptions.yAxis = {
+                min: 0,
+                max: 100,
+                opposite: true,
+                gridLineColor: !this.isDarkMode ? BrandColors.fog : BrandColors.ash,
+                plotLines: (this.data.length > 1 && !this.hideAverageLine) ? [
+                    {
+                        dashStyle: 'Dash',
+                        value: Math.round(
+                            (this.data.reduce((accum, data) => accum + Number(data.y), 0) / this.data.length)
+                        ),
+                        width: 2,
+                        zIndex: 5,
+                        color: BrandColors.electricViolet,
+                    },
+                ] : [],
+                labels: {
+                    useHTML: true,
+                    y: 4,
+                    style: {
+                        textAlign: 'right',
+                        color: this.isDarkMode ? 'rgba(255, 255, 255, 0.85)' : BrandColors.ash,
+                    },
+                    formatter: this.formatterFunc || function () {
+                        if (this.value === 0) {
+                            return `${String(this.value)}%`
+                        }
+                        return `
+                            <div>${String(this.value)}%</div>
+                            <div class="
+                                uikit-bar__label-circle 
+                                ${self.getScoreColor(Number(this.value))}
+                            " />
+                        `
+                    },
+                },
+                tickPositions: [ 0, 50, 75, 100 ],
+                title: {
+                    text: null,
+                },
+            }
+        }
+
+        if (this.size === 'small') {
+            chartOptions.plotOptions.column = {
+                minPointLength: 3,
+                maxPointWidth: 100,
+                borderRadiusTopLeft: 8,
+                borderRadiusTopRight: 8,
+            }
+            chartOptions.yAxis = {
+                ...(chartOptions.yAxis || {}),
+                labels: {
+                    ...((chartOptions.yAxis as Highcharts.YAxisOptions)?.labels),
+                    formatter: function () {
+                        return `${String(this.value)}%`
+                    },
+                },
+            }
+        }
+
+        const renderedChart = chart(this.chartId, chartOptions)
+        this.$nextTick(() => {
+            renderedChart.reflow()
+        })
+    }
+
+    getScoreColor (score: number) {
+        return score <= 50 ? 'red' : score < 75 ? 'yellow' : 'green' 
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-bar {
+    max-height: 100%;
+    max-width: 100%;
+
+    &__tooltip {
+        text-align: center;
+        width: 75px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 48px;
+        flex-direction: column;
+        box-shadow: 0 1px 4px 0 rgba($brand-black, 0.16);
+    }
+
+    &__tooltip-percent {
+        font-size: 14px;
+        line-height: 17px;
+        color: $white;
+        font-weight: 600;
+    }
+
+    &__tooltip-date {
+        font-size: 12px;
+        line-height: 14px;
+        color: $fog;
+    }
+
+    &__label-circle {
+        width: 7px;
+        height: 7px;
+        border-radius: 7px;
+        background: black;
+        margin-top: 5px;
+        text-align: right;
+        display: inline-block;
+
+        &.red {
+            background: $brand-red;
+        }
+
+        &.yellow {
+            background: $butterscotch;
+        }
+
+        &.green {
+            background: $green;
+        }
+    }
+}
+</style>

package/lib/components/Charts/Pie.md

@@ -0,0 +1,23 @@
+```vue
+<template>
+    <Pie
+        :data="[{
+            'y': 10
+        }, {
+            'y': 30
+        }, {
+            'y': 5
+        }, {
+            'y': 55
+        }]"
+    />
+</template>
+
+<style>
+.uikit-pie {
+    height: 182px;
+    width: 182px;
+    display: block;
+}
+</style>
+```

package/lib/components/Charts/Pie.vue

@@ -0,0 +1,105 @@
+<template>
+    <div :id="chartId" class="uikit-pie" />
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-facing-decorator'
+import Highcharts, { chart } from 'highcharts'
+import BrandColors from '../../pocketprep-export.module.scss'
+
+@Component
+export default class Pie extends Vue {
+    @Prop({ default: '' }) title!: string
+    @Prop() data!: Highcharts.PointOptionsObject[]
+    @Prop() formatterFunc!: 
+    Highcharts.FormatterCallbackFunction<Highcharts.AxisLabelsFormatterContextObject>
+    @Prop() type!: 'percent' | 'distribution'
+    @Prop({ default: null }) yAxisTitle!: string
+    @Prop({ default: null }) max!: number
+    @Prop({ default: 'normal' }) size!: 'normal' | 'small'
+
+    chartId = `chart${Math.round(Math.random() * 10000)}`
+
+    mounted () {
+        const chartOptions: Highcharts.Options = {
+            chart: {
+                plotShadow: false,
+                type: 'pie',
+                margin: [ 0,0,0,0 ],
+                spacing: [ 0,0,0,0 ],
+            },
+            title: undefined,
+            tooltip: {
+                enabled: false,
+            },
+            plotOptions: {
+                pie: {
+                    slicedOffset: 0,
+                    allowPointSelect: false,
+                    size: '100%',
+                    dataLabels: {
+                        enabled: false,
+                    },
+                    states: {
+                        inactive: {
+                            opacity: 1,
+                        },
+                        hover: {
+                            enabled: false,
+                        },
+                    },
+                },
+                series: {
+                    color: BrandColors.brandBlue,
+                    borderWidth: 3,
+                },
+            },
+            series: [{
+                colors: [
+                    BrandColors.green || '',
+                    BrandColors.butterscotch || '',
+                    BrandColors.electricViolet || '',
+                    BrandColors.brandBlue || '',
+                ],
+                type: 'pie',
+                data: this.data,
+            }],
+        }
+
+        const pieChart = chart(this.chartId, chartOptions)
+
+        this.$nextTick(() => {
+            pieChart.reflow()
+        })
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+@import '../../styles/breakpoints';
+
+.uikit-pie {
+    max-height: 100%;
+    max-width: 100%;
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 108px;
+        height: 108px;
+        border-radius: 108px;
+        background-color: $white;
+        z-index: 1;
+        left: 50%;
+        margin-left: -54px;
+        top: 50%;
+        margin-top: -54px;
+    }
+
+    .highcharts-credits {
+        display: none;
+    }
+}
+</style>

package/lib/components/Controls/SegmentControl.md

@@ -0,0 +1,47 @@
+```vue
+<template>
+    <div>
+        <div class="control-container">
+            <SegmentControl
+                option1="Hide"
+                option2="Show"
+                @change="changeControl1"
+            />
+            Value: {{ control1 }}
+        </div>
+        <div class="control-container">
+            <SegmentControl
+                option1="Distribution"
+                option2="Bar Graph"
+                @change="changeControl2"
+            />
+            Value: {{ control2 }}
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            control1: 1,
+            control2: 1
+        }
+    },
+    methods: {
+        changeControl1 (option) {
+            this.control1 = option
+        },
+        changeControl2 (option) {
+            this.control2 = option
+        }
+    }
+}
+</script>
+
+<style>
+.control-container {
+    padding: 10px;
+}
+</style>
+```

package/lib/components/Controls/SegmentControl.vue

@@ -0,0 +1,117 @@
+<template>
+    <div
+        class="uikit-segment-control"
+        tabindex="0"
+        @keyup.enter="toggleOption"
+        @keydown.prevent.space="toggleOption"
+        @mousedown.prevent
+    >
+        <div
+            class="uikit-segment-control__option"
+            :class="{ 'uikit-segment-control__option--active': activeOption === 1 }"
+            @click.stop="optionClicked(1)"
+        >
+            {{ option1 }}
+        </div>
+        <div
+            class="uikit-segment-control__option"
+            :class="{ 'uikit-segment-control__option--active': activeOption === 2 }"
+            @click.stop="optionClicked(2)"
+        >
+            {{ option2 }}
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+
+/**
+ * @see [Designs for Controls](https://marvelapp.com/adf8ab3/screen/69484212)  
+ */
+@Component
+export default class SegmentControl extends Vue {
+    @Prop({ default: 'Option 1' }) option1!: string
+    @Prop({ default: 'Option 2' }) option2!: string
+    @Prop({ default: 1 }) defaultOption!: string
+
+    activeOption = this.defaultOption || 1
+
+    @Emit('change')
+    toggleOption () {
+        this.activeOption = this.activeOption === 2 ? 1 : 2
+        return this.activeOption
+    }
+
+    @Emit('change')
+    optionClicked (option: number) {
+        this.activeOption = option
+        return option
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../styles/colors';
+
+.uikit-segment-control {
+    position: relative;
+    display: inline-flex;
+    outline: none;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid change-color($brand-blue, $alpha: 0.45);
+    color: change-color($brand-blue, $alpha: 0.45);
+    background-color: white;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    user-select: none;
+    line-height: 16px;
+    text-align: center;
+
+    &:focus {
+        &::before {
+            content: '';
+            position: absolute;
+            z-index: 0;
+            top: -3px;
+            bottom: -3px;
+            left: -3px;
+            right: -3px;
+            border: 1px solid $brand-blue;
+            border-radius: 5px;
+        }
+    }
+
+    &__option {
+        position: relative;
+        z-index: 1;
+        padding: 2px 12px;
+        border-radius: 4px;
+
+        &--active {
+            position: relative;
+            z-index: 2;
+            color: $white;
+            background-color: $brand-blue;
+            box-shadow: 0 0 0 1px $brand-blue;
+        }
+
+        &:not(&--active) {
+            &:hover {
+                background-color: change-color($sky-blue, $alpha: 0.45);
+                color: change-color($brand-blue, $alpha: 0.75);
+
+                &:first-child {
+                    box-shadow: 4px 0 0 0 change-color($sky-blue, $alpha: 0.45);
+                }
+
+                &:last-child {
+                    box-shadow: -4px 0 0 0 change-color($sky-blue, $alpha: 0.45);
+                }
+            }
+        }
+    }
+}
+</style>