Skip to content

Commit

Permalink
Merge pull request #2181 from hashicorp/showcase-layout-components-ad…
Browse files Browse the repository at this point in the history 
…d-gap-arg

Showcase - Add `@gap` argument to `Shw::Flex` and `Shw::Grid` components
  • Loading branch information
@didoo
didoo authored Jun 25, 2024
2 parents 19066c2 + 7a2f505 commit d652819
Show file tree
Hide file tree
Showing 26 changed files with 151 additions and 131 deletions.
2 changes: 1 addition & 1 deletion showcase/app/components/shw/flex/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Shw::Label>{{@label}}</Shw::Label>
{{/if}}
{{yield (hash Label=(component "shw/label"))}}
<div class="shw-flex__items" ...attributes>
<div class="shw-flex__items" style={{this.itemsStyle}} ...attributes>
{{yield (hash Item=(component "shw/flex/item"))}}
</div>
</div>
10 changes: 10 additions & 0 deletions showcase/app/components/shw/flex/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,20 @@
*/

import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';

export default class FlexIndexComponent extends Component {
direction = this.args.direction ?? 'row';

get itemsStyle() {
let styles = [];
if (this.args.gap) {
styles.push(`gap: ${this.args.gap}`);
}

return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
}

get classNames() {
let classes = ['shw-flex'];

Expand Down
2 changes: 1 addition & 1 deletion showcase/app/components/shw/grid/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<Shw::Label>{{@label}}</Shw::Label>
{{/if}}
{{yield (hash Label=(component "shw/label"))}}
<div class="shw-grid__items" ...attributes>
<div class="shw-grid__items" style={{this.itemsStyle}} ...attributes>
{{yield (hash Item=(component "shw/grid/item"))}}
</div>
</div>
10 changes: 10 additions & 0 deletions showcase/app/components/shw/grid/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import Component from '@glimmer/component';
import { htmlSafe } from '@ember/template';
import { assert } from '@ember/debug';

export default class GridIndexComponent extends Component {
Expand All @@ -15,6 +16,15 @@ export default class GridIndexComponent extends Component {
return columns;
}

get itemsStyle() {
let styles = [];
if (this.args.gap) {
styles.push(`gap: ${this.args.gap}`);
}

return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined;
}

get classNames() {
let classes = ['shw-grid'];

Expand Down
25 changes: 13 additions & 12 deletions showcase/app/templates/components/accordion.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<Shw::Text::H3>Basic</Shw::Text::H3>

<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="One item">
<Hds::Accordion as |A|>
<A.Item>
Expand Down Expand Up @@ -56,7 +56,7 @@

<Shw::Text::H4>With nested Accordions</Shw::Text::H4>

<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item {{style flex="1"}}>
<Hds::Accordion as |A|>
<A.Item @isOpen={{true}}>
Expand Down Expand Up @@ -102,7 +102,7 @@

<Shw::Text::H4>With different Accordion variants nested</Shw::Text::H4>

<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="Nested Accordion with containsInteractive=true nested in containsInteractive=false">
<Hds::Accordion as |A|>
<A.Item @isOpen={{true}}>
Expand Down Expand Up @@ -142,7 +142,7 @@

<Shw::Text::H4>With generic content</Shw::Text::H4>

<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="With generic content in toggle">
<Hds::Accordion as |A|>
<A.Item>
Expand All @@ -160,7 +160,7 @@

<Shw::Text::H4>With rich content</Shw::Text::H4>

<Shw::Flex {{style gap="2rem" marginBottom="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" {{style marginBottom="2rem"}} as |SF|>
<SF.Item @label="With rich content in toggle (HTML header tag)">
<Hds::Accordion as |A|>
<A.Item>
Expand All @@ -175,7 +175,7 @@
</SF.Item>
</Shw::Flex>

<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="With interactive content in toggle and in toggled content">
<Hds::Accordion as |A|>
<A.Item @containsInteractive={{true}} @isOpen={{true}}>
Expand Down Expand Up @@ -246,7 +246,7 @@

<Shw::Text::H3>Edge cases</Shw::Text::H3>

<Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" as |SF|>
<SF.Item @label="With long content in toggle which wraps">
<Hds::Accordion as |A|>
<A.Item>
Expand All @@ -270,11 +270,11 @@
<Shw::Text::H3>Accordion::Item</Shw::Text::H3>

{{#let (array false true) as |booleans|}}
<Shw::Grid {{style gap="2rem"}} @columns={{2}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
{{#each booleans as |bool|}}
<SG.Item>
<Shw::Text::H4>containsInteractive={{bool}}</Shw::Text::H4>
<Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" as |SF|>
{{#each @model.STATES as |state|}}
<SF.Item @label={{state}} {{style flex="1"}}>
<Hds::Accordion::Item
Expand Down Expand Up @@ -321,7 +321,7 @@

<Shw::Text::Body><strong>isOpen</strong></Shw::Text::Body>

<Shw::Flex {{style gap="2rem" marginBottom="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" {{style marginBottom="2rem"}} as |SF|>
<SF.Item @label="Default, isOpen=false">
<Hds::Accordion::Item>
<:toggle>Item one</:toggle>
Expand All @@ -345,7 +345,7 @@

<Shw::Text::Body><strong>containsInteractive</strong></Shw::Text::Body>

<Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" as |SF|>
<SF.Item @label="containsInteractive=false (See “States”)">
<Hds::Accordion as |A|>
<A.Item>
Expand Down Expand Up @@ -376,8 +376,9 @@
{{#let (array false true) as |booleans|}}
{{#each booleans as |bool|}}
<Shw::Flex
{{style gap="2rem" justifyContent="space-between"}}
@label="parentContainsInteractive={{bool}}"
@gap="2rem"
{{style justifyContent="space-between"}}
as |SF|
>
{{#each @model.STATES as |state|}}
Expand Down
18 changes: 9 additions & 9 deletions showcase/app/templates/components/app-footer.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@
{{#let (array "desktop" "tablet" "mobile-large" "mobile-small") as |layouts|}}
{{#each layouts as |layout|}}
<SF.Item @label={{layout}}>
<div class={{(concat (concat "shw-component-app-footer-" layout) "-view")}}>
<div class={{concat "shw-component-app-footer-" layout "-view"}}>
<Hds::AppFooter as |AF|>
<AF.ExtraBefore>
<Shw::Placeholder
Expand Down Expand Up @@ -207,10 +207,10 @@
{{#each themes as |theme|}}
<Shw::Text::Body><strong>{{theme}} theme</strong></Shw::Text::Body>

<Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
<Shw::Flex @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
{{#each @model.LINK_STATES as |state|}}
<SF.Item @label={{state}}>
<ul class={{(concat "hds-app-footer__list hds-app-footer--theme-" theme)}}>
<ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
<Hds::AppFooter::Link @href="#" mock-state-value={{state}}>Link</Hds::AppFooter::Link>
</ul>
</SF.Item>
Expand All @@ -229,10 +229,10 @@
{{#each themes as |theme|}}
<Shw::Text::Body><strong>{{theme}} theme</strong></Shw::Text::Body>

<Shw::Flex {{style gap="2rem" justifyContent="space-between"}} as |SF|>
<Shw::Flex @gap="2rem" {{style justifyContent="space-between"}} as |SF|>
{{#each-in @model.STATUS_LINK_STATUSES as |status|}}
<SF.Item @label={{status}}>
<ul class={{(concat "hds-app-footer__list hds-app-footer--theme-" theme)}}>
<ul class={{concat "hds-app-footer__list hds-app-footer--theme-" theme}}>
<Hds::AppFooter::StatusLink @status={{status}} />
</ul>
</SF.Item>
Expand All @@ -245,7 +245,7 @@

<Shw::Text::Body><strong>Custom values combined with a standard status</strong></Shw::Text::Body>

<Shw::Flex {{style gap="2rem"}} as |SF|>
<Shw::Flex @gap="2rem" as |SF|>
<SF.Item @label="with custom text">
<ul class="hds-app-footer__list hds-app-footer--theme-light">
<Hds::AppFooter::StatusLink @status="operational" @text="Operativo" />
Expand All @@ -266,7 +266,7 @@
</Shw::Flex>

<Shw::Text::Body><strong>Custom values with no status</strong></Shw::Text::Body>
<Shw::Flex {{style gap="2rem"}} as |SF|>
<Shw::Flex @gap="2rem" as |SF|>
<SF.Item @label="with custom icon and text">
<ul class="hds-app-footer__list hds-app-footer--theme-light">
<Hds::AppFooter::StatusLink @statusIcon="hexagon-fill" @text="Lorem ipsum" />
Expand All @@ -289,7 +289,7 @@

<Shw::Text::H3>AppFooter::LegalLinks</Shw::Text::H3>

<Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" as |SF|>
<SF.Item @label="with default url for “Terms” link">
<ul class="hds-app-footer__list hds-app-footer--theme-light">
<Hds::AppFooter::LegalLinks />
Expand All @@ -301,7 +301,7 @@

<Shw::Text::H3>AppFooter::Copyright</Shw::Text::H3>

<Shw::Flex {{style gap="2rem"}} as |SF|>
<Shw::Flex @gap="2rem" as |SF|>
<SF.Item @label="with default (current) year">
<Hds::AppFooter::Copyright />
</SF.Item>
Expand Down
2 changes: 1 addition & 1 deletion showcase/app/templates/components/card.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@

<Shw::Text::H2>Overflow</Shw::Text::H2>
<div class="shw-component-card-wrapper">
<Shw::Grid @columns={{2}} {{style width="fit-content" gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" {{style width="fit-content"}} as |SG|>
<SG.Item>
<Hds::Card::Container @level="mid" @hasBorder={{true}}>
<div class="shw-component-card-overflow__wrapper-relative">
Expand Down
26 changes: 13 additions & 13 deletions showcase/app/templates/components/code-block.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<section data-test-percy>
<Shw::Text::H2>Content</Shw::Text::H2>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="one line">
<Hds::CodeBlock @language="javascript" @value="console.log('I am JavaScript code');" />
</SG.Item>
Expand All @@ -25,7 +25,7 @@ console.log(`I am ${codeLang} code`);"

<Shw::Text::Body>New lines handling</Shw::Text::Body>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @forceMinWidth={{true}} as |SGI|>
<SGI.Label>new lines in Handlebars</SGI.Label>
<Hds::CodeBlock
Expand Down Expand Up @@ -56,7 +56,7 @@ console.log(`I am ${codeLang} code`);"

<Shw::Text::H3>Title and description</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="title">
<Hds::CodeBlock @value="console.log('I am JavaScript code');" @language="javascript" as |CB|>
<CB.Title>Title</CB.Title>
Expand Down Expand Up @@ -118,7 +118,7 @@ console.log(`I am ${codeLang} code`);"

<Shw::Text::H3>Standalone</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="isStandalone=false">
<Hds::CodeBlock
@isStandalone={{false}}
Expand All @@ -144,7 +144,7 @@ console.log(`I am ${codeLang} code`);"

<Shw::Text::H3>Line wrapping</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="hasLineWrapping=false (default)" @forceMinWidth={{true}}>
<Hds::CodeBlock
@language="javascript"
Expand All @@ -171,7 +171,7 @@ console.log(codeLand);"

<Shw::Text::H3>Line numbers</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="hasLineNumbers=false">
<Hds::CodeBlock
@language="javascript"
Expand All @@ -198,7 +198,7 @@ console.log(`I am ${codeLang} code`);"

<Shw::Text::H3>Height limit</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="maxHeight='105px'" @forceMinWidth={{true}}>
{{! template-lint-disable no-whitespace-for-layout }}
<Hds::CodeBlock
Expand Down Expand Up @@ -264,7 +264,7 @@ function assertObjectsEqual (actual, expected, testName) {

<Shw::Text::H3>Copy button</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="hasCopyButton=true" @forceMinWidth={{true}}>
<Hds::CodeBlock @language="shell-session" @hasCopyButton={{true}} @value="$ brew tap hashicorp/tap" />
</SG.Item>
Expand Down Expand Up @@ -307,7 +307,7 @@ function assertObjectsEqual (actual, expected, testName) {

<Shw::Text::H3>Highlight lines</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="Highlight lines 2 & 4" @forceMinWidth={{true}}>
<Hds::CodeBlock
@language="javascript"
Expand Down Expand Up @@ -351,7 +351,7 @@ loadInitializers(App, config.modulePrefix);"

<Shw::Text::H3>Language</Shw::Text::H3>

<Shw::Grid @columns={{2}} {{style gap="2rem"}} as |SG|>
<Shw::Grid @columns={{2}} @gap="2rem" as |SG|>
<SG.Item @label="no language (default)" @forceMinWidth={{true}}>
<Hds::CodeBlock
@value="ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAklOUpkDHrfHY17SbrmTIpNLTGK9Tjom/BWDSU
Expand Down Expand Up @@ -509,7 +509,7 @@ end'

<Shw::Grid @columns={{6}} as |SG|>
{{#each @model.STATES as |state|}}
<SG.Item @label={{(capitalize state)}} class="shw-component-code-block-copy-button">
<SG.Item @label={{capitalize state}} class="shw-component-code-block-copy-button">
<Hds::CodeBlock::CopyButton
mock-state-value={{state}}
@textToCopy="copy me"
Expand All @@ -519,7 +519,7 @@ end'
{{/each}}
{{#let (array "success" "error") as |statuses|}}
{{#each statuses as |status|}}
<SG.Item @label={{(capitalize status)}} class="shw-component-code-block-copy-button">
<SG.Item @label={{capitalize status}} class="shw-component-code-block-copy-button">
<Hds::CodeBlock::CopyButton
@status={{status}}
mock-copy-status={{status}}
Expand All @@ -535,7 +535,7 @@ end'

<Shw::Text::H2>Demo</Shw::Text::H2>

<Shw::Flex {{style gap="2rem"}} @direction="column" as |SF|>
<Shw::Flex @direction="column" @gap="2rem" as |SF|>
<SF.Item>
<Shw::Label>Within Tabs</Shw::Label>
<Hds::Tabs {{style width="400px"}} as |T|>
Expand Down
Loading

0 comments on commit d652819

Please sign in to comment.