Skip to content

Commit 7c8221e

Browse files
shleewhiteshleewhite
authored
Showcase: convert RichTooltip page to gts format (#3317)
1 parent 18a2d08 commit 7c8221e

File tree

11 files changed

+1765
-1332
lines changed

11 files changed

+1765
-1332
lines changed

‎showcase/app/components/page-components/rich-tooltip/index.gts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import { pageTitle } from 'ember-page-title';
7+
8+
import ShwTextH1 from 'showcase/components/shw/text/h1';
9+
10+
import SubSectionBaseElements from 'showcase/components/page-components/rich-tooltip/sub-sections/base-elements';
11+
import SubSectionDemo from 'showcase/components/page-components/rich-tooltip/sub-sections/demo';
12+
import SubSectionInheritance from 'showcase/components/page-components/rich-tooltip/sub-sections/inheritance';
13+
import SubSectionOptions from 'showcase/components/page-components/rich-tooltip/sub-sections/options';
14+
import SubSectionStates from 'showcase/components/page-components/rich-tooltip/sub-sections/states';
15+
import SubSectionToggle from 'showcase/components/page-components/rich-tooltip/sub-sections/toggle';
16+
17+
const RichTooltipIndex: TemplateOnlyComponent = <template>
18+
{{pageTitle "RichTooltip Component"}}
19+
20+
<ShwTextH1>RichTooltip</ShwTextH1>
21+
22+
<section data-test-percy>
23+
<SubSectionToggle />
24+
<SubSectionOptions />
25+
<SubSectionInheritance />
26+
<SubSectionStates />
27+
<SubSectionDemo />
28+
<SubSectionBaseElements />
29+
</section>
30+
</template>;
31+
32+
export default RichTooltipIndex;

‎showcase/app/components/page-components/rich-tooltip/sub-sections/base-elements.gts‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
import type { TemplateOnlyComponent } from '@ember/component/template-only';
6+
import { capitalize } from '@ember/string';
7+
import style from 'ember-style-modifier';
8+
9+
import ShwDivider from 'showcase/components/shw/divider';
10+
import ShwFlex from 'showcase/components/shw/flex';
11+
import ShwOutliner from 'showcase/components/shw/outliner';
12+
import ShwPlaceholder from 'showcase/components/shw/placeholder';
13+
import ShwTextH2 from 'showcase/components/shw/text/h2';
14+
import ShwTextH3 from 'showcase/components/shw/text/h3';
15+
import ShwTextH4 from 'showcase/components/shw/text/h4';
16+
17+
import {
18+
HdsPopoverPrimitive,
19+
HdsRichTooltipBubble,
20+
HdsRichTooltipToggle,
21+
} from '@hashicorp/design-system-components/components';
22+
import { SIZES as TOGGLE_SIZES } from '@hashicorp/design-system-components/components/hds/rich-tooltip/toggle';
23+
24+
const FONT_SIZES = ['14px', '16px', '18px'];
25+
26+
const SubSectionBaseElements: TemplateOnlyComponent = <template>
27+
<ShwTextH2>Base elements</ShwTextH2>
28+
29+
<ShwTextH3>Toggle</ShwTextH3>
30+
31+
<ShwTextH4>Content</ShwTextH4>
32+
33+
<ShwFlex @gap="2rem" as |SF|>
34+
<SF.Item @label="Only text">
35+
<HdsPopoverPrimitive as |PP|>
36+
<HdsRichTooltipToggle
37+
@text="Lorem ipsum dolor"
38+
@popoverId="unique-popover-id"
39+
@isOpen={{false}}
40+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
41+
/>
42+
</HdsPopoverPrimitive>
43+
</SF.Item>
44+
<SF.Item @label="Text + Icon (trailing/default)">
45+
<HdsPopoverPrimitive as |PP|>
46+
<HdsRichTooltipToggle
47+
@icon="info"
48+
@text="Lorem ipsum dolor"
49+
@iconPosition="trailing"
50+
@popoverId="unique-popover-id"
51+
@isOpen={{false}}
52+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
53+
/>
54+
</HdsPopoverPrimitive>
55+
</SF.Item>
56+
<SF.Item @label="Icon (leading) + Text">
57+
<HdsPopoverPrimitive as |PP|>
58+
<HdsRichTooltipToggle
59+
@icon="info"
60+
@iconPosition="leading"
61+
@text="Lorem ipsum dolor"
62+
@popoverId="unique-popover-id"
63+
@isOpen={{false}}
64+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
65+
/>
66+
</HdsPopoverPrimitive>
67+
</SF.Item>
68+
<SF.Item @label="Generic (yielded)">
69+
<HdsPopoverPrimitive as |PP|>
70+
<HdsRichTooltipToggle
71+
@popoverId="unique-popover-id"
72+
@isOpen={{false}}
73+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
74+
>Lorem ipsum dolor</HdsRichTooltipToggle>
75+
</HdsPopoverPrimitive>
76+
</SF.Item>
77+
</ShwFlex>
78+
79+
<ShwTextH4>Sizes</ShwTextH4>
80+
81+
<ShwFlex as |SF|>
82+
<SF.Item @label="Inherited (default)">
83+
{{#each FONT_SIZES as |size|}}
84+
<div {{style font-size=size line-height="1.4"}}>
85+
Lorem
86+
<HdsPopoverPrimitive as |PP|>
87+
<HdsRichTooltipToggle
88+
@icon="info"
89+
@isInline={{true}}
90+
@text="ipsum dolor"
91+
@popoverId="unique-popover-id"
92+
@isOpen={{false}}
93+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
94+
/>
95+
</HdsPopoverPrimitive>
96+
sit amet
97+
<HdsPopoverPrimitive as |PP|>
98+
<HdsRichTooltipToggle
99+
@icon="info"
100+
@iconPosition="leading"
101+
@isInline={{true}}
102+
@text="consectetur adipiscing"
103+
@popoverId="unique-popover-id"
104+
@isOpen={{false}}
105+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
106+
/>
107+
</HdsPopoverPrimitive>
108+
elit.
109+
</div>
110+
{{/each}}
111+
</SF.Item>
112+
</ShwFlex>
113+
114+
{{#each TOGGLE_SIZES as |size|}}
115+
<ShwFlex @label="{{capitalize size}}" as |SF|>
116+
<SF.Item>
117+
<HdsPopoverPrimitive as |PP|>
118+
<HdsRichTooltipToggle
119+
@size={{size}}
120+
@text="Lorem ipsum dolor"
121+
@popoverId="unique-popover-id"
122+
@isOpen={{false}}
123+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
124+
/>
125+
</HdsPopoverPrimitive>
126+
</SF.Item>
127+
<SF.Item>
128+
<HdsPopoverPrimitive as |PP|>
129+
<HdsRichTooltipToggle
130+
@icon="info"
131+
@size={{size}}
132+
@text="Lorem ipsum dolor"
133+
@popoverId="unique-popover-id"
134+
@isOpen={{false}}
135+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
136+
/>
137+
</HdsPopoverPrimitive>
138+
</SF.Item>
139+
<SF.Item>
140+
<HdsPopoverPrimitive as |PP|>
141+
<HdsRichTooltipToggle
142+
@icon="info"
143+
@iconPosition="leading"
144+
@size={{size}}
145+
@text="Lorem ipsum dolor"
146+
@popoverId="unique-popover-id"
147+
@isOpen={{false}}
148+
@setupPrimitiveToggle={{PP.setupPrimitiveToggle}}
149+
/>
150+
</HdsPopoverPrimitive>
151+
</SF.Item>
152+
</ShwFlex>
153+
{{/each}}
154+
155+
<ShwDivider @level={{2}} />
156+
157+
<ShwTextH3>Bubble</ShwTextH3>
158+
159+
<ShwFlex @gap="2rem" as |SF|>
160+
<SF.Item @label="Arrow" class="shw-component-rich-tooltip-arrow-standalone">
161+
<ShwOutliner {{style width="fit-content"}}>
162+
<div class="hds-rich-tooltip">
163+
<div class="hds-rich-tooltip__bubble-arrow" />
164+
</div>
165+
</ShwOutliner>
166+
</SF.Item>
167+
<SF.Item
168+
@label="Bubble (popover)"
169+
class="shw-component-rich-tooltip-bubble-standalone"
170+
>
171+
{{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
172+
<HdsRichTooltipBubble
173+
@isOpen={{true}}
174+
@popoverId="unique-popover-id"
175+
@arrowId="unique-arrow-id"
176+
>
177+
<ShwPlaceholder @text="generic content" width="250px" @height="40" />
178+
</HdsRichTooltipBubble>
179+
</SF.Item>
180+
<SF.Item
181+
@label="With fixed width/height"
182+
class="shw-component-rich-tooltip-bubble-standalone"
183+
>
184+
{{! @glint-expect-error - @setupPrimitivePopper is a required arg, but we are not passing to test the bubble in isolation }}
185+
<HdsRichTooltipBubble
186+
@width="250px"
187+
@height="125px"
188+
@isOpen={{true}}
189+
@popoverId="unique-popover-id"
190+
@arrowId="unique-arrow-id"
191+
>
192+
<ShwPlaceholder @text="generic content" width="100%" @height="100%" />
193+
</HdsRichTooltipBubble>
194+
</SF.Item>
195+
</ShwFlex>
196+
</template>;
197+
198+
export default SubSectionBaseElements;

0 commit comments

Comments
 (0)