Skip to content

Commit

Permalink
feat: Add dropSection param to prevent excess padding when not present (
Browse files Browse the repository at this point in the history
#134)

* feat: Add dropSection param to prevent excess padding when not present

* feat: Update tests
ChesneyJulian authored Sep 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent a186ca8 commit 3c146fe
Showing 5 changed files with 28 additions and 10 deletions.
13 changes: 12 additions & 1 deletion apps/ember-test-app/app/components/f/mktg/header.gts
Original file line number Diff line number Diff line change
@@ -11,6 +11,9 @@ export default class extends Component {
@tracked
class = 'bg-primary';

@tracked
dropSection = false;

@action
update(key: string, value: unknown) {
this[key] = value;
@@ -21,7 +24,7 @@ export default class extends Component {
<Section.subsection @name="Basics">
<FreestyleUsage>
<:example>
<Header class={{this.class}}>
<Header class={{this.class}} @dropSection={{this.dropSection}}>
<:brand>
<img src="https://imageplaceholder.net/50" alt="Icon" />
</:brand>
@@ -50,6 +53,14 @@ export default class extends Component {
@value={{this.class}}
@onInput={{fn this.update "class"}}
/>
<Args.Bool
@defaultValue="false"
@description="When true, the options block renders below the title on small screens."
@name="dropSection"
@type="Bool"
@value={{this.dropSection}}
@onInput={{fn this.update "dropSection"}}
/>
<Args.Yield
@description="Named yield block to render branding content such as icons"
@name="brand"
Original file line number Diff line number Diff line change
@@ -44,7 +44,7 @@ module('Integration | Component | header', function (hooks) {
'Content is rendered in correct block with correct text',
);
assert
.dom('.d-flex.flex-row.mt-2.mx-2.text-nowrap p')
.dom('.d-flex.flex-row.text-nowrap p')
.hasText(
'mobile drop section content',
'Content is rendered in correct block with correct text',
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ module('Integration | Component | mktg/header', function (hooks) {

test('it renders', async function () {
await render(<template>
<Header>
<Header @dropSection={{true}}>
<:brand>
<img src="https://imageplaceholder.net/50" alt="Icon" />
</:brand>
10 changes: 6 additions & 4 deletions packages/ember-core/src/components/header.gts
Original file line number Diff line number Diff line change
@@ -25,11 +25,13 @@ const HeaderComponent: TOC<HeaderSignature> = <template>
<div class="col d-flex justify-content-end">
{{yield to="right"}}
</div>
<div class="d-flex col-12 d-md-none order-last justify-content-center">
<div class="d-flex flex-row mt-2 mx-2 text-nowrap">
{{yield to="mobile-drop-section"}}
{{#if (has-block "mobile-drop-section")}}
<div class="d-flex col-12 d-md-none order-last justify-content-center">
<div class="d-flex flex-row text-nowrap">
{{yield to="mobile-drop-section"}}
</div>
</div>
</div>
{{/if}}
</div>
</div>
</template>;
11 changes: 8 additions & 3 deletions packages/ember-core/src/components/mktg/header.gts
Original file line number Diff line number Diff line change
@@ -4,6 +4,9 @@ import type { TOC } from '@ember/component/template-only';

interface HeaderSignature {
Element: HTMLDivElement;
Args: {
dropSection: boolean;
};
Blocks: {
brand: [];
title: [];
@@ -37,9 +40,11 @@ const Header: TOC<HeaderSignature> = <template>
</div>
</:right>
<:mobile-drop-section>
<div class="d-flex flex-row mt-2 mx-2 text-nowrap">
{{yield to="options"}}
</div>
{{#if @dropSection}}
<div class="d-flex flex-row mt-2 mx-2 text-nowrap">
{{yield to="options"}}
</div>
{{/if}}
</:mobile-drop-section>
</HeaderComponent>
</template>;

0 comments on commit 3c146fe

Please sign in to comment.