@salesforcedevs/arch-components 1.20.17-alpha6 → 1.20.17-alpha7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha6",
+    "version": "1.20.17-alpha7",
     "description": "Architecture Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/sa/coverage/coverage.css

@@ -1,35 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    font-size: var(--tds-font-size-md);
-}
-
-.coverage-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.coverage-title {
-    display: inline-block;
-    margin-right: var(--tds-spacing-8);
-}
-
-.coverage-header h2 {
-    font-size: var(--tds-font-size-lg);
-}
-
-.chartContainer {
-    display: flex; 
-    justify-content: space-evenly; 
-    align-items: center; 
-    height: 350px;
-    margin-bottom: 80px;
-}
-
-.chartContainer div {
-    flex: 1; 
-    max-width: 50%; 
-    height: 100%;
-    text-align: center;
-}

package/src/sa/coverage/coverage.html

@@ -1,15 +0,0 @@
-<template>
-    <div class="coverage-header">
-        <h2 class="coverage-title">Roadmap Coverage</h2>
-    </div>
-    <div class="chartContainer">
-        <div>
-            <p>Product Areas</p>
-            <canvas id="chartCanvas"></canvas>
-        </div>
-        <div>
-            <p>Feature Areas</p>
-            <canvas id="barCanvas"></canvas>
-        </div>
-    </div>
-</template>

package/src/sa/coverage/coverage.ts

@@ -1,404 +0,0 @@
-import { LightningElement, api, track } from 'lwc';
-import { ProductArea, FeatureArea } from './types';
-import { RoadmapFeature } from '../roadmap/types'
-
-export default class coverage extends LightningElement {
-
-    // get the inputs from the config
-    _portfolio;
-    _covered;
-    _selected;
-
-    // hold the coverage data
-    portfolioData: ProductArea[] = [];
-    roadmapData: RoadmapFeature[] = [];
-    totalProductAreas;
-    totalFeatureAreas;
-    paCoverageCount: number = 0;
-    faCoverageCount: number = 0;
-    paCoveragePct: number = 0;
-    faCoveragePct: number = 0;
-
-    // used to check if the chartjs script loaded
-    scriptLoaded = false;
-
-    // holds the chartjs components 
-    donutChart;
-    barChart;
-    @track productAreaTitle;
-    @track featureAreaTitle;
-
-    // chart settings
-    xlightCloudBlue: string = '#eaf5fe';
-    lightCloudBlue: string = '#90d0fe';
-    medCloudBlue: string = '#0d9dda';
-    inactiveBg: string = '#dbdbdb';
-    inactiveHover: string = '#d3d3d3';
-    selectedPA: ProductArea;
-
-    constructor() {
-        super();
-    }
-
-    /// this function fires when a component is inserted into the DOM
-    /// we use this function to collect initial data and set up the page:
-    /// gets product and feature json data
-    /// gets roadmap feature data
-    /// adds the chartjs library 
-    async connectedCallback() {
-        
-    }
-
-    setupCharts() {
-        if (this._covered && this._portfolio) {
-            try {
-                
-                this.portfolioData = [...this._portfolio] as ProductArea[];
-                this.portfolioData.sort((a, b) => a.name.localeCompare(b.name));
-                this.roadmapData = [...this._covered] as RoadmapFeature[];
-    
-                this.totalProductAreas = this.portfolioData.length;
-                this.totalFeatureAreas = this.portfolioData.reduce((total, productArea) => {
-                    return total + productArea.feature_areas.length;
-                }, 0);
-
-                // now update the coverage values in the portfolio data
-                this.paCoverageCount = this.portfolioData.filter(pa => pa.covered == true).length;
-                this.paCoveragePct = this.paCoverageCount / this.totalProductAreas * 100;
-    
-                // add the chartsjs library to the dom
-                var script = document.createElement('script');
-                script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
-                document.head.appendChild(script);
-                script.onload = () => {
-                    this.scriptLoaded = true;
-                    this.registerCenterLabelPlugin();
-                    this.initializeProductAreaChart();
-                    this.initializeFeatureAreaChart();
-                    this.updateSelectedProductArea(this.donutChart);
-                };
-                
-            } catch (error) {
-                console.error("An error occurred getting the portfolio data:", error.message);
-            }
-        }
-    }
-
-    /// set up the donut chart for product areas
-    initializeProductAreaChart() {
-
-        // Data for the donut chart
-        const dataDonut = {
-            labels: this.portfolioData.map(area => area.name),
-            datasets: [{
-                data: Array.from({ length: this.totalProductAreas }, () => 100/this.totalProductAreas),
-                backgroundColor: this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg),
-                hoverBackgroundColor: this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveHover),
-                hoverOffset: 10,
-                cutout: "25%"
-            }]
-        };
-
-        // options for donut chart
-        const optionsDonut = {
-            responsive: true,
-            maintainAspectRatio: false,
-            autoPadding: false,
-            hover: false,
-            layout: {
-                padding: {
-                    bottom: 15
-                }
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: "left",
-                    onClick: () => {}
-                },
-                title: {
-                    display: false,
-                    anchor: 'center',
-                    clamp: true,
-                    align: 'center',
-                    fullSize: true,
-                    font: {
-                        family: "Salesforce Sans",
-                        size: 15,
-                        weight: 'normal'
-                    } 
-                },
-                tooltip: {
-                    enabled: true,
-                    label: {
-                        display: false
-                    },
-                    callbacks: {
-                        title: function(context) {
-                            return context.label;
-                        },
-                        label: function(context) {
-                            return '';
-                        }
-                    }
-                }
-            }
-        };
-        
-        // config for donut
-        const configDonut = {
-            type: 'doughnut',
-            data: dataDonut,
-            options: optionsDonut
-        };
-
-        // Create the Donut chart
-        const chartCanvas = this.template.querySelector("#chartCanvas") as HTMLCanvasElement;
-        if (chartCanvas) {
-            this.donutChart = new Chart(chartCanvas, configDonut);
-        } 
-    }
-
-    // set up the plugin to place the % at the center of the donut
-    registerCenterLabelPlugin() {
-        Chart.register({
-            id: 'center-label',
-            afterDatasetsDraw: function(chart) {
-                if (chart.config.type == 'doughnut') {
-                    var text = chart.config.options.plugins.title.text;
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    const x = chart.getDatasetMeta(0).data[0].x;
-                    const y = chart.getDatasetMeta(0).data[0].y;
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.font = '18px Salesforce Sans';
-                    ctx.fillText(text, x, y); 
-                }
-            }
-        });
-    }
-
-    // build the datasets for the bar chart when All Product Areas is selected
-    getFeatureAreaChartForEntirePortfolio() {
-        return {
-            labels: this.portfolioData.map(pa => pa.name),     
-            datasets: [{
-                data: this.portfolioData.map(pa => pa.feature_area_coverage),
-                backgroundColor: this.portfolioData.map(pa => (pa.covered) ? pa.colors.light : this.inactiveBg)
-            }]            
-        }; 
-    }
-
-    // build the datasets for the bar chart when one Prod Area is selected
-    getFeatureAreaChartForSelectedProductArea() {
-
-        let dataVal = 100/this.selectedPA.feature_areas.length;
-        return {
-            labels: [`${this.selectedPA.feature_areas_covered} of ${this.selectedPA.feature_areas.length}`],     
-            datasets: this.selectedPA.feature_areas.map(fa => ({
-                data: [dataVal],
-                label: fa.name,
-                backgroundColor: (fa.covered) ? this.selectedPA.colors.light : this.inactiveBg,
-                borderWidth: 2,
-                borderColor: 'white'
-            }))
-       };
-    }
-
-    // set up the bar chart for feature area coverage
-    initializeFeatureAreaChart() {
-
-        // options for feature bar
-        const optionsBar = {
-            indexAxis: 'y',
-            hover: false,
-            scales: {
-                x: {
-                    display: true,
-                    begingAtZero: true,
-                    min: 0,
-                    max: 100,
-                    stacked: true,
-                    ticks: {
-                        // forces step size to be 50 units
-                        stepSize: 25,
-                        callback: function (value) {
-                            return value + '%'; // Appending '%' to the tick value
-                        }
-                    }
-                },
-                y: {
-                    stacked: true,
-                    display: true,
-                    begingAtZero: true,
-                    grouped: false
-                }
-            },
-            plugins: {
-                legend: {
-                    display: false
-                },
-                title: {
-                    display: false,
-                    text: `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`,
-                    fullSize: true,
-                    align: 'end',
-                    font: {
-                        family: "Salesforce Sans",
-                        size: 16,
-                        weight: 'normal'
-                    } 
-                }
-                ,tooltip: {
-                    enabled: true,
-                    label: {
-                        display: false
-                    },
-                    callbacks: {
-                        title: function(context) {
-                            if (context[0].label.includes(' of ')){
-                                return context[0].dataset.label;
-                            } else {
-                                return context.label;
-                            }
-                        },
-                        label: function(context) {
-                            if (context.dataset.label) {
-                                return ''; 
-                            } else {
-                                return `${context.formattedValue}%`;
-                            }
-                        }
-                    }
-                }
-            }
-        };
-
-        // config for features bar
-        const configBar = {
-            type: 'bar',
-            data: this.getFeatureAreaChartForEntirePortfolio(),
-            options: optionsBar
-        };
-
-        const barCanvas = this.template.querySelector("#barCanvas") as HTMLCanvasElement;
-        if (barCanvas) {
-            this.featureAreaTitle = `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`;
-            this.barChart = new Chart(barCanvas, configBar);
-        }
-
-    }
-
-    // handle product area selection change event
-    updateSelectedProductArea(chart) {
-
-        // reset the Donut chart
-        if (chart.getActiveElements().length > 0) {
-            chart.setActiveElements([]);
-            chart.tooltip.setActiveElements([]);
-        }
-
-        // now lets mimic a hover based on the selected product area
-        // first get the selected product area
-        let selectedIndex = -1;
-        selectedIndex = chart.config.data.labels.indexOf(this._selected) as number;
-
-        // check if there is a selection
-        if (selectedIndex != -1) {      
-            // hide the center value
-            chart.config.options.plugins.title.text = '';
-
-            // now lets set the active settings on the selected prod area
-            this.selectedPA = this.portfolioData.find(area => area.name === this._selected) as ProductArea;
-            if (this.selectedPA) {
-
-                // update the non active items 
-                chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveBg);
-                chart.config.data.datasets[0].backgroundColor[selectedIndex] = this.selectedPA.colors.light;   
-                chart.legend.legendItems[selectedIndex].fillStyle = this.selectedPA.colors.light;
-
-                // update the selected offset and tooltip
-                chart.setActiveElements([
-                    { 
-                        datasetIndex: 0, 
-                        index: selectedIndex 
-                    }
-                ]);
-                chart.tooltip.setActiveElements([
-                    { 
-                        datasetIndex: 0, 
-                        index: selectedIndex 
-                    }
-                ]);
-            }
-
-        } else {
-            // show the center value
-            chart.config.options.plugins.title.text = `${this.paCoveragePct.toFixed(0)}%`;
-            // update the all the items to active 
-            chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg);
-        }
-
-        // now update the donut chart and the bar chart
-        chart.update(); 
-        this.updateSelectedFeatureArea(this.barChart);
-    }
-
-    // update the bar chart when product area selection changes
-    updateSelectedFeatureArea(chart) {
-
-        // reset the chart
-        if (chart.getActiveElements().length > 0) {
-            chart.setActiveElements([]);
-            chart.tooltip.setActiveElements([]);
-        }  
-        
-        // check if there is a product area selected
-        if (this.selectedPA && this._selected != '') { 
-            chart.config.data = this.getFeatureAreaChartForSelectedProductArea();
-        } else {
-            chart.config.data = this.getFeatureAreaChartForEntirePortfolio();
-        }
-
-        // always update the bar
-        chart.update();
-        
-    }
-
-    /// Below is the getters and setters for inputs
-    @api
-    set portfolio(value) {
-        if(this._portfolio !== value && value.length > 0) {
-            this._portfolio = [...value];
-            this.setupCharts();
-        }
-    }
-    get portfolio() {
-        return this._portfolio;
-    }
-
-    @api
-    set covered(value) {
-        if(this._covered !== value && value.length > 0) {
-            this._covered = [...value];
-            this.setupCharts();
-        }
-    }
-    get covered() {
-        return this._covered;
-    }
-
-    @api
-    set selected(value) {
-        if(this._selected !== value) {
-            this._selected = value;
-            if (this.scriptLoaded) {
-                this.updateSelectedProductArea(this.donutChart);
-            }     
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-}

package/src/sa/coverage/types.d.ts

@@ -1,22 +0,0 @@
-export type ProductArea = {
-    name: string;
-    colors: Colors;
-    covered: boolean;
-    feature_areas_covered: number;
-    feature_area_coverage: number;
-    feature_areas: FeatureArea[];
-};
-
-export type FeatureArea = {
-    name: string;
-    covered: boolean;
-    productArea: string;
-    activeColor: string;
-    inactiveColor: string;
-    features: string[];
-}
-
-export type Colors = {
-    xlight: string;
-    light: string;
-}

package/src/sa/expandableSection/expandableSection.css

@@ -1,24 +0,0 @@
-@import 'tds/reset';
-
-.section-title {
-    display: flex;
-    align-items: center;
-}
-
-.section-content {
-    display: none;
-}
-
-.is-open .section-content {
-    padding-top: 0.5rem;
-    display: block;
-}
-
-.icon {
-    transform: rotate(-90deg);
-    transition: transform 300ms;
-}
-
-.is-open .icon {
-    transform: rotate(0deg);
-}

package/src/sa/expandableSection/expandableSection.html

@@ -1,20 +0,0 @@
-<template>
-    <div class={sectionClass}>
-        <h3 class="section-title">
-            <tds-button-icon
-                size="small"
-                aria-label="Expand/Collapse"
-                variant="bare"
-                aria-controls="expand"
-                aria-expanded={_isOpen}
-                onclick={handleExpandClick}
-            >
-                <tds-icon class="icon" size="small" symbol="switch"></tds-icon>
-            </tds-button-icon>
-            <slot name="title"></slot>
-        </h3>
-        <div aria-hidden={isClosed} class="section-content" id="expand">
-            <slot></slot>
-        </div>
-    </div>
-</template>

package/src/sa/expandableSection/expandableSection.stories.ts

@@ -1,37 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'sa/sa-expandable-section',
-    parameters: {
-        modules: ['/modules/sa-expandable-section.js']
-    }
-};
-
-export const Base = () =>
-    html`
-        <sa-expandable-section>
-            <span slot="title">Section Title</span>
-            <p>
-                Aenean eu leo quam. Pellentesque ornare sem lacinia quam
-                venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo,
-                tortor mauris condimentum nibh, ut fermentum massa justo sit
-                amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing
-                elit. Nullam quis risus eget urna mollis ornare vel eu leo.
-                Nulla vitae elit libero, a pharetra augue.
-            </p>
-        </sa-expandable-section>
-    `;
-
-export const Open = () => html`
-    <sa-expandable-section is-open="false">
-        <span slot="title">Section Title</span>
-        <p>
-            Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
-            vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
-            condimentum nibh, ut fermentum massa justo sit amet risus. Lorem
-            ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus
-            eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a
-            pharetra augue.
-        </p>
-    </sa-expandable-section>
-`;

package/src/sa/expandableSection/expandableSection.ts

@@ -1,24 +0,0 @@
-import { LightningElement, api } from 'lwc';
-
-export default class ExpandableSection extends LightningElement {
-    @api
-    get isOpen() {
-        return this._isOpen;
-    }
-    set isOpen(value) {
-        this._isOpen = value;
-    }
-    _isOpen = false;
-
-    handleExpandClick() {
-        this._isOpen = !this._isOpen;
-    }
-
-    get sectionClass() {
-        return `section ${this._isOpen ? 'is-open' : ''}`;
-    }
-
-    get isClosed() {
-        return !this._isOpen;
-    }
-}