Skip to content

Commit

Permalink
refactor: destructure input when possible (#2039)
Browse files Browse the repository at this point in the history
  • Loading branch information
@LuLaValva
LuLaValva authored Dec 23, 2023
1 parent f6ccce5 commit 9eb0de5
Show file tree
Hide file tree
Showing 88 changed files with 2,279 additions and 2,682 deletions.
1,924 changes: 640 additions & 1,284 deletions package-lock.json
View file

Large diffs are not rendered by default.

20 changes: 3 additions & 17 deletions src/common/html-attributes/test/test.server.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,17 @@ it("creates attributes object based on html-attributes", () => {
other: "other",
};
const htmlAttributes = { b: 2, "aria-role": "link", other: "other" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});

it("merges htmlAttributes", () => {
const input = { ariaRole: "link", htmlAttributes: { b: 2 } };
const htmlAttributes = { b: 2, "aria-role": "link" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});

it("uses htmlAttributes in case of conflict", () => {
const input = { ariaRole: "link", htmlAttributes: { ariaRole: "button" } };
const htmlAttributes = { "aria-role": "button" };
expect(processHtmlAttributes(input, [])).to.deep.equal(htmlAttributes);
});

it("should use the ignore list", () => {
const input = {
htmlAttributes: { b: 2 },
dataAttribute: "something",
style: "some style",
renderBody: () => {},
};
const ignoreList = ["style"];
const htmlAttributes = { b: 2, "data-attribute": "something" };
expect(processHtmlAttributes(input, ignoreList)).to.deep.equal(
htmlAttributes
);
expect(processHtmlAttributes(input)).to.deep.equal(htmlAttributes);
});
152 changes: 74 additions & 78 deletions src/components/components/ebay-dialog-base/index.marko
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,64 @@
import { processHtmlAttributes } from "../../../common/html-attributes";
static const isBrowser = typeof window !== "undefined";
static var ignoredAttributes = [
"open",
"type",
"classPrefix",
"focus",
"closeFocus",
"a11yCloseText",
"windowClass",
"baseEl",
"header",
"footer",
"transitionEl",
"isModal",
"closeButton",
"closeButtonClass",
"closeButtonText",
"ignoreEscape",
"slideFrom",
"windowType",
"mainId",
"ariaLabelledby",
"buttonPosition",
"useHiddenProperty",
"position",
"variant",
"confirmText",
"rejectText",
"noHandle",
"top",
"action",
];
static var ignoredHeaderAttributes = ["id", "as", "class"];
static var ignoredPrevButtonAttributes = ["id", "class", "a11yText"];
$ var buttonPosition = input.buttonPosition || "right";
$ var baseEl = input.baseEl || "div";
$ var header = input.header;

$ const {
open,
classPrefix,
class: inputClass,
focus,
closeFocus,
a11yCloseText,
windowClass,
baseEl = "div",
header,
footer,
transitionEl,
isModal,
closeButton,
closeButtonClass,
closeButtonText,
ignoreEscape,
windowType,
mainId,
ariaLabelledby,
buttonPosition = "right",
useHiddenProperty,
top,
action,
prevButton,
role,
renderBody,
...htmlInput
} = input;

$ const { id: headerId, as: headerAs, class: headerClass, renderBody: headerRenderBody, ...headerHtmlInput } = header || {} as NonNullable<typeof header>;
$ const { id: prevButtonId, class: prevButtonClass, a11yText: prevButtonA11yText, renderBody: prevButtonRenderBody, ...prevButtonHtmlInput } = prevButton || {} as NonNullable<typeof prevButton>;
<macro name="header-content">
<${header!.as || "h2"}
class=[header!.class, `${input.classPrefix}__title`]
...processHtmlAttributes(header!, ignoredHeaderAttributes)
id=(header!.id || component.getElId("dialog-title"))>
<${header!.renderBody}/>
<${headerAs || "h2"}
class=[headerClass, `${classPrefix}__title`]
...processHtmlAttributes(headerHtmlInput)
id=(headerId || component.getElId("dialog-title"))>
<${headerRenderBody}/>
</>
</macro>
<macro name="button-content">
<if(buttonPosition !== "hidden")>
<button
key="close"
class=[
input.closeButtonText ? "fake-link" : "icon-btn",
input.closeButtonClass,
`${input.classPrefix}__close`,
closeButtonText ? "fake-link" : "icon-btn",
closeButtonClass,
`${classPrefix}__close`,
]
type="button"
aria-label=input.a11yCloseText
aria-label=a11yCloseText
onClick("handleCloseButtonClick")
>
<if(input.closeButtonText)>
${input.closeButtonText}
<if(closeButtonText)>
${closeButtonText}
</if>
<else-if(input.closeButton)>
<${input.closeButton}/>
<else-if(closeButton)>
<${closeButton}/>
</else-if>
<else>
<ebay-close-16-icon/>
Expand All @@ -70,20 +67,20 @@ $ var header = input.header;
</if>
</macro>
<${baseEl}
...processHtmlAttributes(input, ignoredAttributes)
...processHtmlAttributes(htmlInput)
aria-labelledby=(
input.ariaLabelledby ||
(input.header && component.getElId("dialog-title"))
ariaLabelledby ||
(header && component.getElId("dialog-title"))
)
aria-modal="true"
role=input.role || "dialog"
class=[input.classPrefix, input.class]
role=role || "dialog"
class=[classPrefix, inputClass]
hidden:no-update=!state.open
aria-live=!input.isModal && "polite"
aria-live=!isModal && "polite"
onClick("handleDialogClick")
onMousedown("handleStartClick")
>
<if(state.open && isBrowser && !input.ignoreEscape)>
<if(state.open && isBrowser && !ignoreEscape)>
<subscribe to=(document as any) on-keydown("handleKeydown")/>
</if>
<if(!state.open && isBrowser)>
Expand All @@ -94,32 +91,31 @@ $ var header = input.header;
onMouseenter("emit", "mouseEnter")
onMouseleave("emit", "mouseLeave")
class=[
input.windowType
? `${input.classPrefix}__${input.windowType}-window`
: `${input.classPrefix}__window`,
input.windowClass,
windowType
? `${classPrefix}__${windowType}-window`
: `${classPrefix}__window`,
windowClass,
]
>
<if(input.top)>
<${input.top.renderBody}/>
<if(top)>
<${top.renderBody}/>
</if>
<div class=`${input.classPrefix}__header`>
<if(input.prevButton)>
<div class=`${classPrefix}__header`>
<if(prevButton)>
<button
...processHtmlAttributes(
input.prevButton,
ignoredPrevButtonAttributes
prevButtonHtmlInput
)
class=[
"icon-btn",
"lightbox-dialog__prev",
input.prevButton.class,
prevButtonClass,
]
type="button"
aria-label=input.prevButton.a11yText
aria-label=prevButtonA11yText
on-click("emit", "prevButtonClick")
>
<${input.prevButton}/>
<${prevButton}/>
</button>
</if>
<if(header && buttonPosition === "right")>
Expand All @@ -136,21 +132,21 @@ $ var header = input.header;
</if>
</div>
<div
id=input.mainId
class=`${input.classPrefix}__main`
id=mainId
class=`${classPrefix}__main`
key="body"
onScroll("handleScroll")
>
<${input.renderBody}/>
<${renderBody}/>
</div>
<if(input.action)>
<span class=`${input.classPrefix}__actions`>
<${input.action && input.action.renderBody}/>
<if(action)>
<span class=`${classPrefix}__actions`>
<${action && action.renderBody}/>
</span>
</if>
<if(input.footer || buttonPosition === "bottom")>
<div class=`${input.classPrefix}__footer`>
<${input.footer && input.footer.renderBody}/>
<if(footer || buttonPosition === "bottom")>
<div class=`${classPrefix}__footer`>
<${footer && footer.renderBody}/>
<if(buttonPosition === "bottom")>
<button-content/>
</if>
Expand Down
105 changes: 51 additions & 54 deletions src/components/components/ebay-notice-base/index.marko
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,88 @@
import { processHtmlAttributes } from '../../../common/html-attributes';
import LightBulbIcon from '<ebay-lightbulb-24-icon>';

static {
var ignoredAttributes = [
'status',
'a11yText',
'a11yIconText',
'icon',
'iconClass',
'class',
'root',
'headerRoot',
'a11yRoleDescription',
'prefixClass',
'title',
'footer',
'type',
'mainRoot',
'noA11yLabel',
'a11yDismissText',
'educationIcon',
'prominent',
];
}
$ const {
status,
a11yText,
a11yIconText,
icon,
iconClass,
class: inputClass,
root,
headerRoot,
a11yRoleDescription,
prefixClass,
title,
footer,
type,
mainRoot,
noA11yLabel,
a11yDismissText,
educationIcon,
prominent,
cta,
...htmlInput
} = input;

$ var status = input.status;
$ var prefixClass = input.prefixClass;

<${input.root || 'section'}
aria-labelledby=!input.noA11yLabel && component.elId('status')
aria-roledescription=input.a11yRoleDescription
class=[prefixClass, input.class, input.status === 'education' && input.prominent && `${prefixClass}--education`]
...processHtmlAttributes(input, ignoredAttributes)
<${root || 'section'}
aria-labelledby=!noA11yLabel && component.elId('status')
aria-roledescription=a11yRoleDescription
class=[prefixClass, inputClass, status === 'education' && prominent && `${prefixClass}--education`]
...processHtmlAttributes(htmlInput)
>
<if(input.icon !== 'none')>
<${input.headerRoot || 'div'} class=`${prefixClass}__header` id:scoped='status'>
<if(icon !== 'none')>
<${headerRoot || 'div'} class=`${prefixClass}__header` id:scoped='status'>
<if(status === 'confirmation' || status === 'celebration')>
<ebay-confirmation-filled-16-icon
a11y-text=input.a11yIconText || input.a11yText
a11y-text=a11yIconText || a11yText
a11y-variant='label'
class=input.iconClass
class=iconClass
/>
</if>
<else-if(status === 'attention')>
<ebay-attention-filled-16-icon
a11y-variant='label'
a11y-text=input.a11yIconText || input.a11yText
class=input.iconClass
a11y-text=a11yIconText || a11yText
class=iconClass
/>
</else-if>
<else-if(status === 'information')>
<ebay-information-filled-16-icon
a11y-variant='label'
a11y-text=input.a11yIconText || input.a11yText
class=input.iconClass
a11y-text=a11yIconText || a11yText
class=iconClass
/>
</else-if>
<else-if(status === 'education' && input.type === 'section')>
<${input.educationIcon || LightBulbIcon}
<else-if(status === 'education' && type === 'section')>
<${educationIcon || LightBulbIcon}
a11y-variant='label'
a11y-text=input.a11yIconText || input.a11yText
class=input.iconClass/>
a11y-text=a11yIconText || a11yText
class=iconClass/>
</else-if>
</>
</if>
<${input.mainRoot || 'div'} class=`${prefixClass}__main`>
<if(input.title)>
<${input.title.as || 'h2'}
...input.title
class=[`${prefixClass}__title`, input.title.class]
<${mainRoot || 'div'} class=`${prefixClass}__main`>
<if(title)>
<${title.as || 'h2'}
...title
class=[`${prefixClass}__title`, title.class]
>
<${input.title}/>
<${title}/>
</>
</if>
<${input.renderBody}/>
</>
<if(input.cta)>
<p class=`${prefixClass}__cta`><a ...input.cta><${input.cta}/></a></p>
<if(cta)>
<p class=`${prefixClass}__cta`><a ...cta><${cta}/></a></p>
</if>

<if(input.footer && !input.a11yDismissText)>
<div class=`${prefixClass}__footer`><${input.footer}/></div>
<if(footer && !a11yDismissText)>
<div class=`${prefixClass}__footer`><${footer}/></div>
</if>
<if(!input.footer && input.a11yDismissText)>
<if(!footer && a11yDismissText)>
<div class=`${prefixClass}__footer`>
<button
aria-label=`${input.a11yDismissText}`
aria-label=`${a11yDismissText}`
class=['fake-link', `${prefixClass}__dismiss`]
onClick('emit', 'dismiss')
onKeydown('emit', 'dismiss')
Expand Down
Loading

0 comments on commit 9eb0de5

Please sign in to comment.