All files / packages/sds-recipes/src/modules/c/illustration illustration.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { LightningElement, api } from 'lwc';
import { sldsIsV2Enabled } from 'sds/utils';
import { mapV2ToV1 } from './illustrationMapping';
 
const setIllustrationResolver = (set, symbol) => {
  if (sldsIsV2Enabled()) {
    return `https://res.cloudinary.com/hvgsfnaoa/image/upload/illustrations/slds2/empty-state/${set}-${symbol}.svg`;
  } else {
    const { slds1Set, slds1Symbol } = mapV2ToV1(set, symbol);
    return `https://res.cloudinary.com/hvgsfnaoa/image/upload/illustrations/slds1/empty-state/${slds1Set}-${slds1Symbol}.svg`;
  }
};
 
const illustration = [
  {
    name: 'cart',
    resolver: setIllustrationResolver,
  },
  {
    name: 'error',
    resolver: setIllustrationResolver,
  },
];
 
export default class Illustration extends LightningElement {
  // Render component in native shadow mode
  static shadowSupportMode = 'native';
 
  _symbol;
  _set;
  _data = illustration;
  noSlotContent;
 
  /**
   * @type {string}
   */
  @api
  get set() {
    return this._set;
  }
  set set(value) {
    this._set = value;
  }
 
  /**
   * @type {string}
   */
  @api
  get symbol() {
    return this._symbol;
  }
  set symbol(value) {
    this._symbol = value;
  }
 
  /**
   * @type {Array}
   */
  @api
  get data() {
    return this._data;
  }
 
  @api alternativeText;
 
  get computedAriaLabel() {
    return this.alternativeText || this.ariaLabel || null;
  }
 
  slotContentCheck() {
    if (this._set || this._symbol) {
      this.noSlotContent = true;
    } else {
      this.noSlotContent = false;
    }
  }
 
  connectedCallback() {
    this.slotContentCheck();
 
    // Note: ariaLabel in this component is changed altText in LBC
    if (!this.computedAriaLabel) {
      // aria-hidden is true if aria-label and computedAriaLabel values are empty
      this.ariaHidden = 'true';
    } else {
      this.ariaLabel = this.computedAriaLabel;
    }
 
    // set role="img" on host
    this.role = 'img';
  }
}