Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: when the prop title is undefined do not draw the monday style attention box component title container #287

Merged
merged 4 commits into from
Oct 24, 2021
Merged

Feature: when the prop title is undefined do not draw the monday style attention box component title container #287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
151eb44
Feature: Attention box - when the prop "title" is undefined do not dr…
Oct 15, 2021
a3255fb
Merge branch 'master' into pedaars/when_the_prop_title_is_undefined_d…
pedaars Oct 20, 2021
a95c0dc
Feature: Attention box - when the prop "title" is undefined do not d…
pedaars Oct 20, 2021
ab3f217
Merge branch 'master' into pedaars/when_the_prop_title_is_undefined_d…
MosheZemah Oct 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions src/components/AttentionBox/AttentionBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,25 +22,27 @@ const AttentionBox = ({ componentClassName, type, icon, iconType, title, text, w
const classNameWithType = `${baseClassName}--type-${type}`;
return (
<aside className={cx(baseClassName, classNameWithType, componentClassName)} role="alert">
<h2 className={cx(`${baseClassName}__title-container`, `${classNameWithType}__title-container`)}>
{!withoutIcon && (
<Icon
iconType={iconType}
ariaHidden
clickable={false}
icon={icon}
className={cx(`${baseClassName}__title-container__icon`, `${classNameWithType}__title-container__icon`)}
ignoreFocusStyle
iconSize="24"
iconLabel={iconLabel}
/>
)}
<span
className={cx(`${baseClassName}__title-container__title`, `${classNameWithType}__title-container__title`)}
>
{title}
</span>
</h2>
{title && (
<h2 className={cx(`${baseClassName}__title-container`, `${classNameWithType}__title-container`)}>
{!withoutIcon && (
<Icon
iconType={iconType}
ariaHidden
clickable={false}
icon={icon}
className={cx(`${baseClassName}__title-container__icon`, `${classNameWithType}__title-container__icon`)}
ignoreFocusStyle
iconSize="24"
iconLabel={iconLabel}
/>
)}
<span
className={cx(`${baseClassName}__title-container__title`, `${classNameWithType}__title-container__title`)}
>
{title}
</span>
</h2>
)}
<div className={cx(`${baseClassName}__text`, `${classNameWithType}__text`)}>{text}</div>
</aside>
);
Expand Down
46 changes: 21 additions & 25 deletions src/components/AttentionBox/__tests__/__snapshots__/attentionBox.jest.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,31 +43,7 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly with empty props 1`
className="monday-style-attention-box-component monday-style-attention-box-component--type-primary"
role="alert"
>
<h2
className="monday-style-attention-box-component__title-container monday-style-attention-box-component--type-primary__title-container"
>
<svg
aria-hidden={true}
className="icon_component monday-style-attention-box-component__title-container__icon monday-style-attention-box-component--type-primary__title-container__icon icon_component--no-focus-style"
fill="currentColor"
height="24"
onClick={[Function]}
viewBox="0 0 20 20"
width="24"
>
<path
clipRule="evenodd"
d="M10 2.10596C9.661 2.10596 9.32868 2.20028 9.04023 2.37836C8.75177 2.55645 8.51855 2.81128 8.36665 3.11435L8.36633 3.11498L2.44277 14.9621L2.44269 14.9623C2.30353 15.2407 2.23784 15.5502 2.25185 15.8612C2.26586 16.1721 2.3591 16.4744 2.52272 16.7392C2.68635 17.0041 2.91493 17.2227 3.18678 17.3744C3.45863 17.5261 3.76473 17.6058 4.07604 17.606H4.07644H15.9236H15.924C16.2353 17.6058 16.5414 17.5261 16.8132 17.3744C17.0851 17.2227 17.3137 17.0041 17.4773 16.7392C17.6409 16.4744 17.7341 16.1721 17.7481 15.8612C17.7622 15.5502 17.6965 15.2407 17.5573 14.9623L17.5572 14.9621L11.6337 3.11498L11.6333 3.11435C11.4815 2.81128 11.2482 2.55645 10.9598 2.37836C10.6713 2.20028 10.339 2.10596 10 2.10596ZM9.82821 3.65471C9.87984 3.62284 9.93932 3.60596 10 3.60596C10.0607 3.60596 10.1202 3.62284 10.1718 3.65471C10.2233 3.68654 10.265 3.73207 10.2922 3.78622L10.2923 3.78645L16.2155 15.6328L16.2156 15.6329C16.2404 15.6827 16.2522 15.7381 16.2497 15.7937C16.2472 15.8493 16.2305 15.9034 16.2012 15.9508C16.1719 15.9982 16.131 16.0374 16.0823 16.0645C16.0337 16.0917 15.9789 16.1059 15.9232 16.106H4.07684C4.02112 16.1059 3.96633 16.0917 3.91767 16.0645C3.86901 16.0374 3.8281 15.9982 3.79881 15.9508C3.76953 15.9034 3.75284 15.8493 3.75033 15.7937C3.74783 15.7381 3.75956 15.6827 3.78441 15.6329L3.78449 15.6328L9.70765 3.78645L9.70777 3.7862C9.73496 3.73206 9.77666 3.68654 9.82821 3.65471ZM10 6.95135C10.4142 6.95135 10.75 7.28714 10.75 7.70135V10.9324C10.75 11.3466 10.4142 11.6824 10 11.6824C9.58579 11.6824 9.25 11.3466 9.25 10.9324V7.70135C9.25 7.28714 9.58579 6.95135 10 6.95135ZM9.2303 13.3937C9.43444 13.1896 9.7113 13.0749 9.99999 13.0749C10.2887 13.0749 10.5655 13.1896 10.7697 13.3937C10.9738 13.5979 11.0885 13.8747 11.0885 14.1634C11.0885 14.4521 10.9738 14.729 10.7697 14.9331C10.5655 15.1372 10.2887 15.2519 9.99999 15.2519C9.7113 15.2519 9.43444 15.1372 9.2303 14.9331C9.02617 14.729 8.91149 14.4521 8.91149 14.1634C8.91149 13.8747 9.02617 13.5979 9.2303 13.3937ZM9.99999 14.1749C10.003 14.1749 10.006 14.1737 10.0081 14.1715C10.0103 14.1694 10.0115 14.1665 10.0115 14.1634C10.0115 14.1604 10.0103 14.1574 10.0081 14.1553C10.006 14.1531 10.003 14.1519 9.99999 14.1519C9.99695 14.1519 9.99402 14.1531 9.99187 14.1553C9.98971 14.1574 9.9885 14.1604 9.9885 14.1634C9.9885 14.1665 9.98971 14.1694 9.99187 14.1715C9.99402 14.1737 9.99695 14.1749 9.99999 14.1749Z"
fill="currentColor"
fillRule="evenodd"
/>
</svg>
<span
className="monday-style-attention-box-component__title-container__title monday-style-attention-box-component--type-primary__title-container__title"
>

</span>
</h2>

<div
className="monday-style-attention-box-component__text monday-style-attention-box-component--type-primary__text"
>
Expand All @@ -76,6 +52,26 @@ exports[`AttentionBox Tests Snapshot Tests renders correctly with empty props 1`
</aside>
`;

exports[`AttentionBox Tests Snapshot Tests renders correctly with empty title prop 1`] = `
<aside
className="monday-style-attention-box-component monday-style-attention-box-component--type-primary dummy-class-name"
role="alert"
>

<div
className="monday-style-attention-box-component__text monday-style-attention-box-component--type-primary__text"
>
Text
</div>
</aside>
`;

exports[`AttentionBox Tests Snapshot Tests renders correctly with undefined title prop 1`] = `
<aside
className="monday-style-attention-box-component monday-style-attention-box-component--type-primary dummy-class-name"
role="alert"
>

exports[`AttentionBox Tests Snapshot Tests renders correctly with no icon 1`] = `
<aside
className="monday-style-attention-box-component monday-style-attention-box-component--type-primary dummy-class-name-no-icon"
Expand Down
10 changes: 10 additions & 0 deletions src/components/AttentionBox/__tests__/attentionBox.jest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@ describe("AttentionBox Tests", () => {
expect(tree).toMatchSnapshot();
});

it("renders correctly with empty title prop", () => {
const tree = renderer
.create(<AttentionBox componentClassName="dummy-class-name" title="" text="Text" />)
.toJSON();
expect(tree).toMatchSnapshot();
});

it("renders correctly with undefined title prop", () => {
const tree = renderer
.create(<AttentionBox componentClassName="dummy-class-name" text="Text" />)
it("renders correctly with no icon", () => {
const tree = renderer
.create(<AttentionBox componentClassName="dummy-class-name-no-icon" title="Title" text="Text" withoutIcon />)
Expand Down