Showcase: convert Time page to gts

showcase/app/components/page-components/time/index.gts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pageTitle } from 'ember-page-title';
+
+import ShwTextH1 from 'showcase/components/shw/text/h1';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import SubSectionDisplay from 'showcase/components/page-components/time/sub-sections/display';
+import SubSectionTooltip from 'showcase/components/page-components/time/sub-sections/tooltip';
+import SubSectionDateRange from 'showcase/components/page-components/time/sub-sections/date-range';
+import SubSectionInContext from 'showcase/components/page-components/time/sub-sections/in-context';
+
+const TimeIndex: TemplateOnlyComponent = <template>
+  {{pageTitle "Time Component"}}
+
+  <ShwTextH1>Time</ShwTextH1>
+
+  {{! Note: The dynamic nature of the Time component triggers an infinite rendering invalidation error when attempting to test in Percy}}
+
+  <section>
+    <SubSectionTooltip />
+    <SubSectionDisplay />
+  </section>
+
+  <ShwDivider />
+
+  <section>
+    <SubSectionDateRange />
+  </section>
+
+  <ShwDivider />
+
+  <section>
+    <SubSectionInContext />
+  </section>
+</template>;
+
+export default TimeIndex;

showcase/app/components/page-components/time/sub-sections/date-range.gts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+
+import { HdsTime } from '@hashicorp/design-system-components/components';
+
+const SubSectionDateRange: TemplateOnlyComponent = <template>
+  <ShwTextH2>Date range</ShwTextH2>
+
+  <ShwFlex @gap="4rem 9rem" {{style marginBottom="80px"}} as |SF|>
+    <SF.Item @label="With tooltip & same year range">
+      <HdsTime
+        @startDate="20 September 2024"
+        @endDate="25 September 2024"
+        @isOpen={{true}}
+      />
+    </SF.Item>
+
+    <SF.Item @label="With different year range & no tooltip">
+      <HdsTime
+        @startDate="8 November 2024"
+        @endDate="20 January 2025"
+        @hasTooltip={{false}}
+      />
+    </SF.Item>
+  </ShwFlex>
+</template>;
+
+export default SubSectionDateRange;

showcase/app/components/page-components/time/sub-sections/display.gts

@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import style from 'ember-style-modifier';
+import { inject as service } from '@ember/service';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwTextH3 from 'showcase/components/shw/text/h3';
+import ShwFlex from 'showcase/components/shw/flex';
+import ShwDivider from 'showcase/components/shw/divider';
+
+import { HdsTime } from '@hashicorp/design-system-components/components';
+import { DISPLAYS } from '@hashicorp/design-system-components/services/hds-time';
+import type TimeService from '@hashicorp/design-system-components/services/hds-time';
+
+export default class SubSectionDisplay extends Component {
+  @service declare readonly hdsTime: TimeService;
+
+  get nearTimeDates() {
+    const now = this.hdsTime.now;
+
+    const fiveMinutesFromNow = new Date(now + 1000 * 60 * 5);
+    const twoDaysFromNow = new Date(now + 1000 * 60 * 60 * 24 * 2);
+    const oneWeekFromNow = new Date(now + 1000 * 60 * 60 * 24 * 7);
+    const fiveMinutesAgo = new Date(now - 1000 * 60 * 5);
+    const twoDaysAgo = new Date(now - 1000 * 60 * 60 * 24 * 2);
+    const oneWeekAgo = new Date(now - 1000 * 60 * 60 * 24 * 7);
+
+    return [
+      fiveMinutesFromNow,
+      twoDaysFromNow,
+      oneWeekFromNow,
+      fiveMinutesAgo,
+      twoDaysAgo,
+      oneWeekAgo,
+    ];
+  }
+
+  <template>
+    <ShwTextH2>Display</ShwTextH2>
+
+    <ShwFlex @gap="4rem 9rem" as |SF|>
+      <SF.Item @label="Default with display unset">
+        <HdsTime @date="05 September 2018 14:07:32" @isOpen={{true}} />
+      </SF.Item>
+
+      {{#each DISPLAYS as |display|}}
+        <SF.Item @label={{display}}>
+          <HdsTime
+            @date="05 September 2018 14:07:32"
+            @display={{display}}
+            @isOpen={{true}}
+          />
+        </SF.Item>
+      {{/each}}
+    </ShwFlex>
+
+    <ShwDivider {{style marginTop="6rem"}} @level={{2}} />
+
+    <ShwTextH3>Near time examples using “relative” display type</ShwTextH3>
+
+    <ShwFlex @gap="2rem" as |SF|>
+      {{#each this.nearTimeDates as |date|}}
+        <SF.Item @label="{{date}}">
+          <HdsTime @date={{date}} @display="relative" />
+        </SF.Item>
+      {{/each}}
+    </ShwFlex>
+  </template>
+}

showcase/app/components/page-components/time/sub-sections/in-context.gts

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+
+import {
+  HdsTime,
+  HdsTextBody,
+} from '@hashicorp/design-system-components/components';
+
+const SubSectionInContext: TemplateOnlyComponent = <template>
+  <ShwTextH2>Used in context</ShwTextH2>
+
+  <ShwFlex @gap="2rem" @direction="column" as |SF|>
+    <SF.Item @label="Single date with tooltip">
+      <HdsTextBody @tag="p">
+        HashiConf 2024 ended
+        <HdsTime @date="16 October 2024" @display="relative" />.
+      </HdsTextBody>
+    </SF.Item>
+
+    <SF.Item @label="Single date without tooltip">
+      <HdsTextBody @tag="p">
+        HashiConf 2024 ended
+        <HdsTime
+          @date="16 October 2024"
+          @display="relative"
+          @hasTooltip={{false}}
+        />.
+      </HdsTextBody>
+    </SF.Item>
+
+    <SF.Item @label="Date range with tooltip">
+      <HdsTextBody @tag="p">
+        HashiConf is from
+        <HdsTime @startDate="14 October 2024" @endDate="16 October 2024" />.
+      </HdsTextBody>
+    </SF.Item>
+
+    <SF.Item @label="Date range without tooltip">
+      <HdsTextBody @tag="p">
+        HashiConf is from
+        <HdsTime
+          @startDate="14 October 2024"
+          @endDate="16 October 2024"
+          @hasTooltip={{false}}
+        />.
+      </HdsTextBody>
+    </SF.Item>
+
+    <SF.Item @label="Examples within long paragraph">
+      <HdsTextBody @tag="p">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. HashiConf 2024
+        ended
+        <HdsTime @date="16 October 2024" @display="relative" />. Sequi officia
+        sunt ad veniam eveniet voluptate quis debitis laudantium qui porro, iste
+        numquam iure repellendus eum fugit obcaecati unde. Odit, laboriosam.
+        Illum architecto, harum velit nobis ut id fugit voluptatibus dolores et
+        at ab ullam veritatis aperiam natus quas distinctio, obcaecati,
+        reiciendis eius odio corrupti quam dolorum molestias quisquam. Maiores,
+        facere? Culpa, corporis HashiConf 2024 ended
+        <HdsTime @date="16 October 2024" @display="relative" />. quibusdam
+        consectetur quidem, et molestiae iusto dignissimos fugit blanditiis, hic
+        iure totam sit earum esse ex quam aliquam eaque praesentium error ipsa
+        illum quisquam rem! Numquam, modi dolores! Animi, doloribus, sit optio
+        quo perferendis facere aliquid nesciunt repellendus rerum officia
+        delectus reprehenderit quasi eius, ad pariatur facilis dolorem
+        voluptatibus labore? Ab fugiat ducimus quos ullam sequi veniam iste.
+        Impedit nostrum fugit, soluta facilis ex eveniet officiis deleniti unde
+        voluptas blanditiis aliquam rem recusandae magnam ipsum minus assumenda,
+        ipsam obcaecati! Excepturi eligendi nemo veniam iusto ducimus dicta est
+        reprehenderit? Quia expedita harum aspernatur neque voluptatum? Commodi
+        incidunt, quas ad labore minima a corporis, maxime sit soluta ex
+        consequatur illo doloribus? Ipsum facere ullam ipsam inventore quisquam
+        suscipit dolores quos? HashiConf is from
+        <HdsTime @startDate="14 October 2024" @endDate="16 October 2024" />.
+        Natus neque obcaecati laudantium voluptates sapiente dolore, corrupti
+        exercitationem omnis nulla distinctio modi quam, laborum porro mollitia
+        consequuntur illum officia in. Ea, excepturi repudiandae distinctio
+        animi itaque aperiam deleniti laborum! Quo sequi cumque illo debitis,
+        nam excepturi tenetur deleniti enim non maxime incidunt eum cupiditate
+        optio repudiandae, illum ipsum. Voluptas aperiam magni, minus recusandae
+        quos molestiae soluta qui eum tenetur? Voluptatum mollitia, illo, quam
+        voluptate dolore facilis similique eum ad ducimus laudantium voluptates
+        at consequuntur in quod deserunt! Quas, omnis animi at ullam deserunt
+        deleniti odio iusto distinctio saepe culpa? HashiConf is from
+        <HdsTime
+          @startDate="14 October 2024"
+          @endDate="16 October 2024"
+          @hasTooltip={{false}}
+        />. Quod animi quam, tempora aliquid voluptas porro deleniti quo
+        pariatur libero voluptates voluptatum rerum laboriosam veritatis qui
+        natus nam ratione in deserunt blanditiis aliquam. Mollitia ipsam quaerat
+        quam eveniet cumque! Porro cupiditate voluptate dignissimos, nemo
+        eveniet ex, nam delectus exercitationem dolore tempore possimus
+        doloremque error! Ipsa nostrum nesciunt id! Consequuntur dolorum
+        pariatur laudantium libero harum iure, ipsa voluptatibus natus nesciunt.
+        Deserunt dignissimos reprehenderit id error iste ea aut eius, labore,
+        molestias, non dolorum maxime beatae. Et nulla dignissimos obcaecati qui
+        explicabo aut, vitae delectus quam similique velit nam eius inventore.
+        Voluptatibus fuga veniam nobis, minima dicta impedit fugit delectus
+        dolores corrupti sequi earum velit officia voluptatum nostrum aut quam
+        commodi, optio iusto cupiditate animi ea rerum! In ipsa facilis
+        deleniti.
+      </HdsTextBody>
+    </SF.Item>
+  </ShwFlex>
+</template>;
+
+export default SubSectionInContext;

showcase/app/components/page-components/time/sub-sections/tooltip.gts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import style from 'ember-style-modifier';
+
+import ShwTextH2 from 'showcase/components/shw/text/h2';
+import ShwFlex from 'showcase/components/shw/flex';
+
+import {
+  HdsTime,
+  HdsTextBody,
+} from '@hashicorp/design-system-components/components';
+
+const SubSectionTooltip: TemplateOnlyComponent = <template>
+  <ShwTextH2>Has tooltip</ShwTextH2>
+
+  <ShwFlex @gap="2rem" {{style flexWrap="wrap"}} as |SF|>
+    <SF.Item @label="With tooltip (default)">
+      <HdsTime @date="05 September 2018 14:48" />
+    </SF.Item>
+
+    <SF.Item @label="Without tooltip">
+      <HdsTime @date="05 September 2018 14:48" @hasTooltip={{false}} />
+    </SF.Item>
+
+    <SF.Item @label="Standard body font with tooltip" {{style width="100%"}}>
+      <HdsTextBody @tag="p">
+        <HdsTime @date="05 September 2018 14:48" />
+      </HdsTextBody>
+    </SF.Item>
+  </ShwFlex>
+</template>;
+
+export default SubSectionTooltip;

showcase/app/routes/page-components/time.ts

@@ -5,16 +5,8 @@
 
 import Route from '@ember/routing/route';
 
-import { DISPLAYS } from '@hashicorp/design-system-components/services/hds-time';
-
 import type { ModelFrom } from 'showcase/utils/ModelFromRoute';
 
 export type PageComponentsTimeModel = ModelFrom<PageComponentsTimeRoute>;
 
-export default class PageComponentsTimeRoute extends Route {
-  model() {
-    // these are used only for presentation purpose in the showcase
-    // const STATES = ['default', 'hover', 'focus']; TODO: Do we need to design states?
-    return { DISPLAYS };
-  }
-}
+export default class PageComponentsTimeRoute extends Route {}

showcase/app/templates/page-components/time.gts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import TimeIndex from 'showcase/components/page-components/time/index';
+
+const PageComponentsTime: TemplateOnlyComponent = <template>
+  <TimeIndex />
+</template>;
+
+export default PageComponentsTime;