Skip to content

Commit

Permalink
Remove panel title for warn, announcement and bare panels (#3463)
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar authored Jan 10, 2025
1 parent 466335b commit 3c12943
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 15 deletions.
26 changes: 13 additions & 13 deletions src/components/panel/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
| Name | Type | Required | Description |
| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| body | string | true | The contents of the panel. This can contain HTML. |
| title | string | false | The title for the error summary panel |
| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` |
| type | string | false | A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement” |
| spacious | boolean | false | Set to “true” to double the padding spacing surrounding the body content if required |
| classes | string | false | Custom classes to add to the panel |
| id | string | false | The HTML `id` for the panel |
| attributes | object | false | HTML attributes to apply to the panel (for example, data attributes) |
| assistiveTextPrefix | string | false | Sets the visually hidden prefix text for screen readers. Default values for each panel type: <ul><li>`information` and `branded` – “Important information: ”</li><li>`success` – “Completed: ”</li><li>`warn` and `warn-branded` – “Warning: ”</li><li>`error`– “Error: ”</li> |
| iconType | string | false | Adds an icon to the panel, before the body content, by setting the [icon type](/foundations/icons#icon-type) |
| iconSize | string | false | Icon size can be set to match the size of the body content text as detailed in the [typography type scale](/foundations/typography/#type-scale) |
| Name | Type | Required | Description |
| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| body | string | true | The contents of the panel. This can contain HTML. |
| title | string | false | The title for the error summary panel (not supported for the warn, warn-branded, announcement and bare panels ) |
| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` |
| variant | string | false | A single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “warn-branded”, and “announcement” |
| spacious | boolean | false | Set to “true” to double the padding spacing surrounding the body content if required |
| classes | string | false | Custom classes to add to the panel |
| id | string | false | The HTML `id` for the panel |
| attributes | object | false | HTML attributes to apply to the panel (for example, data attributes) |
| assistiveTextPrefix | string | false | Sets the visually hidden prefix text for screen readers. Default values for each panel type: <ul><li>`info` – “Important information: ”</li><li>`success` – “Completed: ”</li><li>`warn` and `warn-branded` – “Warning: ”</li><li>`error`– “Error: ”</li><li>`announcement`– “Announcement: ”</li></ul> |
| iconType | string | false | Adds an icon to the panel, before the body content, by setting the [icon type](/foundations/icons#icon-type) |
| iconSize | string | false | Icon size can be set to match the size of the body content text as detailed in the [typography type scale](/foundations/typography/#type-scale) |
2 changes: 1 addition & 1 deletion src/components/panel/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
<span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
{% endif %}

{% if params.title %}
{% if params.title and (params.variant not in ['bare', 'warn', 'warn-branded', 'announcement'] ) %}
{% if params.variant == 'error' %}
{% set defaultTitleTag = "h" ~ 2 %}
{% else %}
Expand Down
16 changes: 15 additions & 1 deletion src/components/panel/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ describe('macro: panel', () => {
expect(results).toHaveNoViolations();
});

it('has correct class', () => {
it('has correct panel variant class', () => {
const $ = cheerio.load(
renderComponent('panel', {
...EXAMPLE_PANEL_BASIC,
Expand Down Expand Up @@ -173,6 +173,20 @@ describe('macro: panel', () => {
});
});

describe.each(['bare', 'warn', 'warn-branded', 'announcement'])('mode: %s', (panelVariant) => {
it('does not render a title when `title` is provided', () => {
const $ = cheerio.load(
renderComponent('panel', {
...EXAMPLE_PANEL_BASIC,
title: 'Panel title',
variant: panelVariant,
}),
);

expect($('.ons-panel__title').length).toBe(0);
});
});

describe.each([
['error', 'h2'],
['success', 'div'],
Expand Down

0 comments on commit 3c12943

Please sign in to comment.