Skip to content

Commit 83fc30a

Browse files
didoodidoo
authored
Showcase: Convert Breadcrumb to gts (#3196)
1 parent 5d2033f commit 83fc30a

File tree

8 files changed

+311
-191
lines changed

8 files changed

+311
-191
lines changed

‎showcase/app/components/page-components/breadcrumb/code-fragments/with-generic-content.gts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import {
4+
HdsBreadcrumb,
5+
HdsBreadcrumbItem,
6+
HdsBreadcrumbTruncation,
7+
} from '@hashicorp/design-system-components/components';
8+
9+
export interface CodeFragmentWithGenericContentSignature {
10+
Args: {
11+
hasIcons?: boolean;
12+
hasTruncation?: boolean;
13+
};
14+
}
15+
16+
const CodeFragmentWithGenericContent: TemplateOnlyComponent<CodeFragmentWithGenericContentSignature> =
17+
<template>
18+
<HdsBreadcrumb
19+
aria-label="breadcrumb {{if @hasIcons 'with icons'}} {{if
20+
@hasTruncation
21+
'with truncation'
22+
}} example"
23+
>
24+
<HdsBreadcrumbItem @text="Level one" @icon={{if @hasIcons "org"}} />
25+
<HdsBreadcrumbItem @text="Level two" @icon={{if @hasIcons "folder"}} />
26+
{{#if @hasTruncation}}
27+
<HdsBreadcrumbTruncation>
28+
<HdsBreadcrumbItem @text="Sub-level one" />
29+
<HdsBreadcrumbItem
30+
@text="Sub-level two with a very long string that we may want to trim somehow"
31+
/>
32+
<HdsBreadcrumbItem @text="Sub-level with icon" @icon="org" />
33+
<HdsBreadcrumbItem
34+
@text="Another sub-level with icon"
35+
@icon="folder"
36+
/>
37+
</HdsBreadcrumbTruncation>
38+
{{else}}
39+
<HdsBreadcrumbItem @text="Level three" />
40+
{{/if}}
41+
<HdsBreadcrumbItem @text="Level four" />
42+
<HdsBreadcrumbItem @text="Level five" />
43+
<HdsBreadcrumbItem @text="Current" @current={{true}} />
44+
</HdsBreadcrumb>
45+
</template>;
46+
47+
export default CodeFragmentWithGenericContent;

‎showcase/app/components/page-components/breadcrumb/code-fragments/with-long-strings.gts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import { eq } from 'ember-truth-helpers';
3+
4+
import {
5+
HdsBreadcrumb,
6+
HdsBreadcrumbItem,
7+
} from '@hashicorp/design-system-components/components';
8+
import type { HdsBreadcrumbSignature } from '@hashicorp/design-system-components/components/hds/breadcrumb/index';
9+
10+
export interface CodeFragmentWithLongStringSignature {
11+
Args: {
12+
itemsCanWrap?: HdsBreadcrumbSignature['Args']['itemsCanWrap'];
13+
};
14+
}
15+
16+
const CodeFragmentWithLongString: TemplateOnlyComponent<CodeFragmentWithLongStringSignature> =
17+
<template>
18+
<HdsBreadcrumb
19+
@itemsCanWrap={{@itemsCanWrap}}
20+
aria-label="breadcrumb with long strings {{if
21+
(eq @itemsCanWrap false)
22+
'and no text wrapping'
23+
}} example"
24+
>
25+
<HdsBreadcrumbItem
26+
@text="Level one with a very long string"
27+
@icon="org"
28+
/>
29+
<HdsBreadcrumbItem
30+
@text="Level two with a very long string"
31+
@icon="folder"
32+
/>
33+
<HdsBreadcrumbItem @text="Level three with a very long string" />
34+
<HdsBreadcrumbItem @text="Level four with a very long string" />
35+
<HdsBreadcrumbItem @text="Level five with a very long string" />
36+
<HdsBreadcrumbItem
37+
@text="Current with a very long string"
38+
@current={{true}}
39+
/>
40+
</HdsBreadcrumb>
41+
</template>;
42+
43+
export default CodeFragmentWithLongString;

‎showcase/app/components/page-components/breadcrumb/index.gts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
7+
8+
import { pageTitle } from 'ember-page-title';
9+
10+
import ShwTextH1 from 'showcase/components/shw/text/h1';
11+
12+
import SubSectionVariants from 'showcase/components/page-components/breadcrumb/sub-sections/variants';
13+
import SubSectionStates from 'showcase/components/page-components/breadcrumb/sub-sections/states';
14+
import SubSectionTruncationOptions from 'showcase/components/page-components/breadcrumb/sub-sections/truncation-options';
15+
16+
const BreadcrumbIndex: TemplateOnlyComponent = <template>
17+
{{pageTitle "Breadcrumb Component"}}
18+
19+
<ShwTextH1>Breadcrumb</ShwTextH1>
20+
21+
<section data-test-percy>
22+
<SubSectionVariants />
23+
<SubSectionStates />
24+
<SubSectionTruncationOptions />
25+
</section>
26+
</template>;
27+
28+
export default BreadcrumbIndex;

‎showcase/app/components/page-components/breadcrumb/sub-sections/states.gts‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
import { capitalize } from '@ember/string';
3+
import { eq } from 'ember-truth-helpers';
4+
5+
import ShwTextH2 from 'showcase/components/shw/text/h2';
6+
import ShwFlex from 'showcase/components/shw/flex';
7+
import ShwDivider from 'showcase/components/shw/divider';
8+
9+
import {
10+
HdsBreadcrumb,
11+
HdsBreadcrumbItem,
12+
HdsBreadcrumbTruncation,
13+
} from '@hashicorp/design-system-components/components';
14+
15+
const STATES = ['default', 'hover', 'active', 'focus'];
16+
17+
const SubSectionStates: TemplateOnlyComponent = <template>
18+
<ShwTextH2>States</ShwTextH2>
19+
20+
{{#each STATES as |state|}}
21+
<ShwFlex @label={{capitalize state}} as |SF|>
22+
<SF.Item>
23+
<HdsBreadcrumb aria-label="breadcrumb in {{state}} state example">
24+
<HdsBreadcrumbItem
25+
@text="Level one"
26+
@icon="org"
27+
mock-state-value={{unless (eq state "default") state}}
28+
mock-state-selector="a"
29+
/>
30+
<HdsBreadcrumbItem
31+
@text="Level two"
32+
@icon="folder"
33+
mock-state-value={{unless (eq state "default") state}}
34+
mock-state-selector="a"
35+
/>
36+
<HdsBreadcrumbTruncation
37+
mock-state-value={{unless (eq state "default") state}}
38+
mock-state-selector="button"
39+
>
40+
<HdsBreadcrumbItem @text="Sub-level one" />
41+
<HdsBreadcrumbItem
42+
@text="Sub-level two with a very long string that we may want to trim somehow"
43+
/>
44+
<HdsBreadcrumbItem @text="Sub-level with icon" @icon="org" />
45+
<HdsBreadcrumbItem
46+
@text="Another sub-level with icon"
47+
@icon="folder"
48+
/>
49+
</HdsBreadcrumbTruncation>
50+
<HdsBreadcrumbItem
51+
@text="Level four"
52+
mock-state-value={{unless (eq state "default") state}}
53+
mock-state-selector="a"
54+
/>
55+
<HdsBreadcrumbItem
56+
@text="Level five"
57+
mock-state-value={{unless (eq state "default") state}}
58+
mock-state-selector="a"
59+
/>
60+
<HdsBreadcrumbItem
61+
@text="Current"
62+
@current={{true}}
63+
mock-state-value={{unless (eq state "default") state}}
64+
mock-state-selector="a"
65+
/>
66+
</HdsBreadcrumb>
67+
</SF.Item>
68+
</ShwFlex>
69+
{{/each}}
70+
71+
<ShwDivider @level={{2}} />
72+
</template>;
73+
74+
export default SubSectionStates;

‎showcase/app/components/page-components/breadcrumb/sub-sections/truncation-options.gts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH2 from 'showcase/components/shw/text/h2';
4+
import ShwFlex from 'showcase/components/shw/flex';
5+
6+
import CodeFragmentWithLongStrings from '../code-fragments/with-long-strings';
7+
8+
import {
9+
HdsBreadcrumb,
10+
HdsBreadcrumbItem,
11+
HdsBreadcrumbTruncation,
12+
} from '@hashicorp/design-system-components/components';
13+
14+
const SubSectionTruncationOptions: TemplateOnlyComponent = <template>
15+
<ShwTextH2>Truncation options</ShwTextH2>
16+
17+
<ShwFlex @label="With long strings / items can wrap (default)" as |SF|>
18+
<SF.Item class="shw-component-breadcrumb-sample-with-max-width">
19+
<CodeFragmentWithLongStrings />
20+
</SF.Item>
21+
</ShwFlex>
22+
23+
<ShwFlex
24+
@label="With long strings / items can't wrap (text is elliptized)"
25+
as |SF|
26+
>
27+
<SF.Item class="shw-component-breadcrumb-sample-with-max-width">
28+
<CodeFragmentWithLongStrings @itemsCanWrap={{false}} />
29+
</SF.Item>
30+
</ShwFlex>
31+
32+
<ShwFlex @label="With max-width on single item" as |SF|>
33+
<SF.Item class="shw-component-breadcrumb-sample-with-max-width">
34+
<HdsBreadcrumb
35+
@itemsCanWrap={{false}}
36+
aria-label="breadcrumb with max-widh set example"
37+
>
38+
<HdsBreadcrumbItem @text="Level one" @icon="org" />
39+
<HdsBreadcrumbItem @text="Level two" @icon="folder" />
40+
<HdsBreadcrumbItem @text="Level three" />
41+
<HdsBreadcrumbItem
42+
@text="Level four with a very long string"
43+
@maxWidth="180px"
44+
/>
45+
<HdsBreadcrumbItem @text="Level five" />
46+
<HdsBreadcrumbItem @text="Current" @current={{true}} />
47+
</HdsBreadcrumb>
48+
</SF.Item>
49+
</ShwFlex>
50+
51+
<ShwFlex @label="With 'truncation' element" as |SF|>
52+
<SF.Item class="shw-component-breadcrumb-sample-truncation-dropdown">
53+
<HdsBreadcrumb aria-label="breadcrumb with truncation element example">
54+
<HdsBreadcrumbItem @text="Level one" />
55+
<HdsBreadcrumbItem @text="Level two" />
56+
<HdsBreadcrumbTruncation>
57+
<HdsBreadcrumbItem @text="Level three" />
58+
<HdsBreadcrumbItem
59+
@text="Level four with a long string that can span multiple lines"
60+
/>
61+
<HdsBreadcrumbItem @text="Level five with icon" @icon="dashboard" />
62+
<HdsBreadcrumbItem @text="Level six with icon" @icon="database" />
63+
</HdsBreadcrumbTruncation>
64+
<HdsBreadcrumbItem @text="Level seven" />
65+
<HdsBreadcrumbItem @text="Level eight" />
66+
<HdsBreadcrumbItem @text="Current" @current={{true}} />
67+
</HdsBreadcrumb>
68+
</SF.Item>
69+
</ShwFlex>
70+
</template>;
71+
72+
export default SubSectionTruncationOptions;

‎showcase/app/components/page-components/breadcrumb/sub-sections/variants.gts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
2+
3+
import ShwTextH2 from 'showcase/components/shw/text/h2';
4+
import ShwFlex from 'showcase/components/shw/flex';
5+
import ShwDivider from 'showcase/components/shw/divider';
6+
7+
import CodeFragmentWithGenericContent from '../code-fragments/with-generic-content';
8+
9+
const SubSectionVariants: TemplateOnlyComponent = <template>
10+
<ShwTextH2>Variants</ShwTextH2>
11+
12+
<ShwFlex @label="Text only" as |SF|>
13+
<SF.Item>
14+
<CodeFragmentWithGenericContent />
15+
</SF.Item>
16+
</ShwFlex>
17+
18+
<ShwFlex @label="With icons" as |SF|>
19+
<SF.Item>
20+
<CodeFragmentWithGenericContent @hasIcons={{true}} />
21+
</SF.Item>
22+
</ShwFlex>
23+
24+
<ShwFlex @label="With truncation" as |SF|>
25+
<SF.Item>
26+
<CodeFragmentWithGenericContent @hasTruncation={{true}} />
27+
</SF.Item>
28+
</ShwFlex>
29+
30+
<ShwDivider @level={{2}} />
31+
</template>;
32+
33+
export default SubSectionVariants;

‎showcase/app/templates/page-components/breadcrumb.gts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
7+
8+
import BreadcrumbIndex from 'showcase/components/page-components/breadcrumb/index';
9+
10+
const PageComponentsBreadcrumb: TemplateOnlyComponent = <template>
11+
<BreadcrumbIndex />
12+
</template>;
13+
14+
export default PageComponentsBreadcrumb;

0 commit comments

Comments
 (0)