@pega/dx-component-builder-sdk 0.24.3 → 0.25.5

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -3,26 +3,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { caseOpConfig, operatorDetails } from './mock';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: (): any => {
-    return {
-      getOperatorDetails: () => {
-        return new Promise(resolve => {
-          resolve(operatorDetails);
-        });
-      }
-    };
-  },
-  getLocaleUtils: (): any => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    };
-  }
-};
-
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
@@ -33,6 +13,26 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore = {
+    ...window.PCore,
+    getUserApi: (): any => {
+      return {
+        getOperatorDetails: () => {
+          return new Promise(resolve => {
+            resolve(operatorDetails);
+          });
+        }
+      };
+    },
+    getLocaleUtils: (): any => {
+      return {
+        getLocaleValue: val => {
+          return val;
+        }
+      };
+    }
+  };
+  
   const props = {
     getPConnect: () => {
       return {

package/src/tasks/override/index.js

@@ -105,6 +105,11 @@ const getListAvailableComponents = async (type) => {
       listEl = arKey[arKey.length - 1];
     }
 
+    if (framework === "SDK-Angular") {
+      // need to convert to match in "includes"
+      listEl = convertIntoKebabCase(listEl);
+    }
+
     if (components.includes(listEl)) {
       // currently don't show, because too many separators inquirer flaky
       //availList.push(new inquirer.Separator("** " + fullList[el].name));
@@ -126,6 +131,10 @@ const adjustAngularComponentName = (componentName) => {
   return componentName;
 }
 
+const adjustAngularKebabCase = (componentName) => {
+  componentName = componentName.replaceAll("/-", "/");
+  return componentName;
+}
 
 const validateCompile = async (
   {
@@ -151,8 +160,9 @@ const validateCompile = async (
   switch (framework) {
     case "SDK-Angular":
       templateParentDir = OVERRIDE_ANGULAR_LIB_PATH;
-      componentName = adjustAngularComponentName(componentName);
+      // componentName = adjustAngularComponentName(componentName);
       componentName = convertIntoKebabCase(componentName);
+      componentName = adjustAngularKebabCase(componentName);
       break;
     case "SDK-React":
       templateParentDir = OVERRIDE_REACT_LIB_PATH;

package/src/tasks/override-all/index.js

@@ -122,11 +122,13 @@ const adjustAngularComponentName = (componentName) => {
     componentName = componentName.split("/")[1];
   }
 
- 
-
   return componentName;
 }
 
+const adjustAngularKebabCase = (componentName) => {
+  componentName = componentName.replaceAll("/-", "/");
+  return componentName;
+}
 
 const validateCompile = async (
   {
@@ -148,8 +150,9 @@ const validateCompile = async (
   switch (framework) {
     case "SDK-Angular":
       templateParentDir = OVERRIDE_ANGULAR_LIB_PATH;
-      componentName = adjustAngularComponentName(componentName);
+      // componentName = adjustAngularComponentName(componentName);
       componentName = convertIntoKebabCase(componentName);
+      componentName = adjustAngularKebabCase(componentName);
       break;
     case "SDK-React":
       templateParentDir = OVERRIDE_REACT_LIB_PATH;
@@ -206,7 +209,7 @@ const validateCompile = async (
 
 };
 
-const buildOverridComponents = async (type, compList, options) => {
+const buildOverrideComponents = async (type, compList, options) => {
   if (compList.length > 0) {
     for (var index in compList) {
       let componentName = compList[index].value;
@@ -255,11 +258,11 @@ export default async options => {
   const infraList = await getListAvailableComponents("infra");
 
  
-  await buildOverridComponents("field", fieldList, options);
-  await buildOverridComponents("template", templateList, options);
-  await buildOverridComponents("widget", widgetList, options);
-  await buildOverridComponents("designSystemExtension", desList, options);
-  await buildOverridComponents("infra", infraList, options);
+  await buildOverrideComponents("field", fieldList, options);
+  await buildOverrideComponents("template", templateList, options);
+  await buildOverrideComponents("widget", widgetList, options);
+  await buildOverrideComponents("designSystemExtension", desList, options);
+  await buildOverrideComponents("infra", infraList, options);
 
  
 

package/tests/assets/sdk-a/components/create/_components.md

@@ -0,0 +1,6 @@
+# The **components** directory
+
+The **src/components** directory contains the code for the components you want to use with the **Angular SDK**.
+
+When you run the **npm run  create** or **npm run override** commands to create new components, the generated code that
+you can use as a starting point for your component development will be placed in component-specific folders inside **src/components**.

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/create-nonce.ts

@@ -0,0 +1,5 @@
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -2,27 +2,27 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 // @ts-nocheck
 import { useState } from 'react';
-import { withKnobs } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps } from './mock';
 
 import PegaDxilMyTestText from './index';
 
-export default {
+const meta: Meta<typeof PegaDxilMyTestText> = {
   title: 'PegaDxilMyTestText',
-  decorators: [withKnobs],
-  component: PegaDxilMyTestText
+  component: PegaDxilMyTestText,
+  excludeStories: /.*Data$/
 };
 
-export const BasePegaDxilMyTestText = () => {
+export default meta;
+type Story = StoryObj<typeof PegaDxilMyTestText>;
+
+export const BasePegaDxilMyTestText: Story = args => {
 
   const [value, setValue] = useState(configProps.value);
 
   const props = {
     value,
-    placeholder: configProps.placeholder,
-    label: configProps.label,
-    testId: configProps.testId,
     hasSuggestions: configProps.hasSuggestions,
 
     getPConnect: () => {
@@ -48,7 +48,21 @@ export const BasePegaDxilMyTestText = () => {
 
   return (
     <>
-      <PegaDxilMyTestText {...props} />
+      <PegaDxilMyTestText {...props} {...args} />
     </>
   );
 };
+
+BasePegaDxilMyTestText.args = {
+  label: configProps.label,
+  helperText: configProps.helperText,
+  placeholder: configProps.placeholder,
+  testId: configProps.testId,
+  readOnly: configProps.readOnly,
+  disabled: configProps.disabled,
+  required: configProps.required,
+  status: configProps.status,
+  hideLabel: configProps.hideLabel,
+  displayMode: configProps.displayMode,
+  validatemessage: configProps.validatemessage
+};

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/index.tsx

@@ -1,14 +1,24 @@
-import PropTypes from 'prop-types';
-import { Input } from '@pega/cosmos-react-core';
+import {
+  Input,
+  FieldValueList,
+  Text,
+  EmailDisplay,
+  PhoneDisplay,
+  URLDisplay,
+  withConfiguration
+} from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 import StyledPegaDxilMyTestTextWrapper from './styles';
 
 // interface for props
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-
+  isTableFormatter?: boolean;
+  formatter: string;
+  variant?: any;
 }
 
 // interface for StateProps object
@@ -17,23 +27,103 @@ interface StateProps {
   hasSuggestions: boolean;
 }
 
-// Duplicated runtime code from Constellation Design System Component
+export const formatExists = (formatterVal: string) => {
+  const formatterValues = [
+    'TextInput',
+    'WorkStatus',
+    'RichText',
+    'Email',
+    'Phone',
+    'URL',
+    'Operator'
+  ];
+  let isformatter = false;
+  if (formatterValues.includes(formatterVal)) {
+    isformatter = true;
+  }
+  return isformatter;
+};
+
+export const textFormatter = (formatter: string, value: string) => {
+  let displayComponent: any = null;
+  switch (formatter) {
+    case 'TextInput': {
+      displayComponent = value;
+      break;
+    }
+    case 'Email': {
+      displayComponent = <EmailDisplay value={value} displayText={value} variant='link' />;
+      break;
+    }
+    case 'Phone': {
+      displayComponent = <PhoneDisplay value={value} variant='link' />;
+      break;
+    }
+    case 'URL': {
+      displayComponent = (
+        <URLDisplay target='_blank' value={value} displayText={value} variant='link' />
+      );
+      break;
+    }
+    // no default
+  }
+  return displayComponent;
+};
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
-export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
+function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
+  const { getPConnect, value, placeholder, disabled = false, displayMode, readOnly = false, required = false, label, hideLabel = false, testId, isTableFormatter = false, variant = 'inline' } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
   const stateProps = pConn.getStateProps() as StateProps;
   const propName: string = stateProps.value;
+  const { formatter } = props;
 
   const handleOnChange = (event: any) => {
     const { value: updatedValue } = event.target;
     actions.updateFieldValue(propName, updatedValue);
   };
 
+  if (displayMode === 'LABELS_LEFT' || displayMode === 'DISPLAY_ONLY') {
+    let displayComp = value || <span aria-hidden='true'>&ndash;&ndash;</span>;
+    if (isTableFormatter && formatExists(formatter)) {
+      displayComp = textFormatter(formatter, value);
+    }
+    return displayMode === 'DISPLAY_ONLY' ? (
+      <StyledPegaDxilMyTestTextWrapper> {displayComp} </StyledPegaDxilMyTestTextWrapper>
+    ) : (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant={hideLabel ? 'stacked' : variant}
+          data-testid={testId}
+          fields={[{ id: '1', name: hideLabel ? '' : label, value: displayComp }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    const isValDefined = typeof value !== 'undefined' && value !== '';
+    const val = isValDefined ? (
+      <Text variant='h1' as='span'>
+        {value}
+      </Text>
+    ) : (
+      ''
+    );
+    return (
+      <StyledPegaDxilMyTestTextWrapper>
+        <FieldValueList
+          variant='stacked'
+          data-testid={testId}
+          fields={[{ id: '2', name: hideLabel ? '' : label, value: val }]}
+        />
+      </StyledPegaDxilMyTestTextWrapper>
+    );
+  }
+
   return (
     <StyledPegaDxilMyTestTextWrapper>
       <Input
@@ -52,22 +142,5 @@ export default function PegaDxilMyTestText(props: PegaDxilMyTestTextProps) {
   );
 };
 
-PegaDxilMyTestText.defaultProps = {
-  value: '',
-  placeholder: '',
-  disabled: false,
-  readOnly: false,
-  required: false,
-  testId: ''
-};
 
-PegaDxilMyTestText.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string,
-  getPConnect: PropTypes.func.isRequired,
-  disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  testId: PropTypes.string
-};
+export default withConfiguration(PegaDxilMyTestText);

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/mock.ts

@@ -6,7 +6,14 @@ export const configProps = {
   placeholder: 'Text Placeholder',
   helperText: 'Text Helper Text',
   testId: 'Text-12345678',
-  hasSuggestions: false
+  hasSuggestions: false,
+  displayMode: '',
+  hideLabel: false,
+  readOnly: false,
+  required: false,
+  disabled: false,
+  status: '',
+  validatemessage: ''
 };
 
 export const stateProps = {

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/styles.ts

@@ -1,15 +1,8 @@
-
-// utilizing theming, comment out, if want individual style
-import styled from 'styled-components';
-import { Configuration } from '@pega/cosmos-react-core';
-
-export default styled(Configuration)``;
-
 // individual style, comment out above, and uncomment here and add styles
-// import styled, { css } from 'styled-components';
-//
-// export default styled.div(() => {
-//  return css`
-//    margin: 0px 0;
-//  `;
-// });
+import styled, { css } from 'styled-components';
+
+export default styled.div(() => {
+  return css`
+    margin: 0px 0;
+  `;
+});

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.html

@@ -0,0 +1,28 @@
+<div style="margin-bottom: '2rem'">
+  <div class="background-image-style" [ngStyle]="{ 'background-image': getUrl() }">
+    <div class="background-style content">
+      <div>
+        <h1 class="title">{{ title }}</h1>
+        <p class="message">{{ message }}</p>
+      </div>
+    </div>
+  </div>
+  <div
+    [ngClass]="{
+      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
+      'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
+    }"
+  >
+    <component-mapper
+      [name]="arChildren$[0].getPConnect().getComponentName()"
+      [props]="{ pConn$: arChildren$[0].getPConnect(), formGroup$ }"
+      errorMsg="Region wants component not yet available: {{ arChildren$[0].getPConnect().getComponentName() }}"
+    ></component-mapper>
+    <component-mapper
+      [name]="arChildren$[1].getPConnect().getComponentName()"
+      [props]="{ pConn$: arChildren$[1].getPConnect(), formGroup$ }"
+      errorMsg="Region wants component not yet available: {{ arChildren$[1].getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.scss

@@ -0,0 +1,64 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-wide-narrow {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+  padding: 1rem;
+}
+
+.psdk-grid-filter-narrow-wide {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.background-image-style {
+  margin-left: -16px;
+  margin-right: -16px;
+  height: calc(19rem);
+  background-size: cover;
+  background-position: center center;
+}
+
+.background-style {
+  background-color: transparent;
+  color: var(--app-inverse-form-color);
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: calc(0.5rem);
+}
+
+.title {
+  margin: 0rem;
+  font-size: 1.728rem;
+  font-weight: 600;
+}
+
+.message {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.banner-layout {
+  padding: 1rem;
+}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BannerComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.ts

@@ -0,0 +1,26 @@
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { Component, Input, forwardRef } from '@angular/core';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrls: ['./banner.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class BannerComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  @Input() arChildren$: any[];
+  @Input() title: string;
+  @Input() message: any;
+  @Input() backgroundImage: string;
+  @Input() layout$: string;
+
+  getUrl() {
+    return `url(${this.backgroundImage})`;
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.html

@@ -2,7 +2,7 @@
   <dl class="psdk-case-summary-fields-primary">
     <div *ngFor="let field of primaryFieldsWithStatus$" class="psdk-csf-primary-field">
       <dt class="psdk-csf-primary-field-header">
-        {{ field.config.label }}
+        {{ field.config?.label }}
       </dt>
       <dd *ngIf="field.config.value === ''; else hasValue" class="psdk-csf-primary-field-data">
         <ng-container [ngSwitch]="field.type.toLowerCase()">
@@ -28,16 +28,19 @@
   <dl *ngFor="let field of secondaryFields$" class="psdk-case-summary-fields-secondary">
     <div
       *ngIf="
-        field.config?.label?.toLowerCase() == 'create operator' || field.config?.label?.toLowerCase() == 'update operator';
+        field?.config?.label?.toLowerCase() == 'create operator' ||
+          field?.displayLabel?.toLowerCase() == 'create operator' ||
+          field?.config?.label?.toLowerCase() == 'update operator' ||
+          field?.displayLabel?.toLowerCase() == 'update operator';
         else hasSecondaryValue
       "
     >
-      <component-mapper name="Operator" [props]="{ pConn$: field?.kid }"></component-mapper>
+      <component-mapper name="Operator" [props]="{ pConn$: field?.kid, displayLabel: field?.displayLabel }"></component-mapper>
     </div>
     <ng-template #hasSecondaryValue>
       <div class="psdk-csf-secondary-field">
         <dt class="psdk-csf-secondary-field-header">
-          {{ field.config.displayLabel || field.config.label }}
+          {{ field.config?.displayLabel || field.config?.label }}
         </dt>
         <dd class="psdk-csf-secondary-field-data">
           <div [ngSwitch]="field.type">

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -19,7 +19,8 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   primaryFieldsWithStatus$: any[];
 
   constructor(private utils: Utils) {}
-
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'ModalContainer';
   ngOnInit(): void {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);
@@ -63,6 +64,7 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
   updatePrimaryWithStatus() {
     this.primaryFieldsWithStatus$ = [];
     for (const prim of this.primaryFields$) {
+      prim.config.value = this.localizedVal(prim.config.value, this.localeCategory);
       this.primaryFieldsWithStatus$.push(prim);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.html

@@ -1,5 +1,5 @@
 <div>
-  <mat-button-toggle-group vertical (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
+  <mat-button-toggle-group vertical hideSingleSelectionIndicator (change)="onChange($event.value)" [value]="selectedTabId$" aria-label="Tabs">
     <mat-button-toggle *ngFor="let tab of tabConfig$" [value]="tab.id" style="text-align: left">
       <div style="display: flex">
         <div style="flex-grow: 10">{{ tab.name }}</div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -12,7 +12,7 @@ import { Utils } from '@pega/angular-sdk-components';
 })
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
-
+  @Input() displayLabel;
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
@@ -51,15 +51,17 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   updateSelf(): void {
     const configProps$ = this.pConn$.getConfigProps() as any;
-    if (configProps$?.label?.toLowerCase() == 'create operator') {
+    this.displayLabel = this.displayLabel?.toLowerCase();
+    const label = configProps$?.label?.toLowerCase();
+    if (label === 'create operator' || this.displayLabel === 'create operator') {
       this.name$ = configProps$.createOperator.userName;
       this.id$ = configProps$.createOperator.userId;
       this.label$ = configProps$.createLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'update operator') {
+    } else if (label === 'update operator' || this.displayLabel === 'update operator') {
       this.name$ = configProps$.updateOperator.userName;
       this.id$ = configProps$.updateOperator.userId;
       this.label$ = configProps$.updateLabel;
-    } else if (configProps$?.label?.toLowerCase() == 'resolve operator') {
+    } else if (label === 'resolve operator' || this.displayLabel === 'resolve operator') {
       this.name$ = configProps$.resolveOperator.userName;
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/wss-quick-create/wss-quick-create.component.html

@@ -0,0 +1,13 @@
+<div class="wss-quick-create-header">
+  <h1 class="quick-link-heading">{{ heading$ }}</h1>
+  <ul class="quick-link-ul-list">
+    <li *ngFor="let element of actions$" class="quick-link-list">
+      <button mat-raised-button color="primary" class="quick-link-button" mat-icon-button (click)="element.onClick()">
+        <span class="quick-link-button-span">
+          <img *ngIf="element.icon" class="quick-link-icon" [src]="element.icon" />
+          <span>{{ element.label }}</span>
+        </span>
+      </button>
+    </li>
+  </ul>
+</div>