Skip to content

Commit 95904ef

Browse files
micahjones13FMorrison87
micahjones13
and
FMorrison87
authored
Mj.179 timeline legend (#1363)
* feat(timeline): add ruler-position prop * feat: display start date at start of ruler track * chore: clean console logs * chore: build * fix(timeline): better logic for top or bottom ruler * fix: getting ruler-position prop to work * fix(timeline): update typo in prop * test(timeline): unit tests for ruler-position * docs: added chagnest * chore: update ubuntu version in ci/cd * test(vrt): update snapshots * test: snapshots * config(playwright): update maxDiffPixelRation * style(timeline): adjust padding and borders on ruler dates * feat(timeline): update timeline with Kileys changes, update styles * WIP: perf in minutes * wip: ruler on top and bottom * feat: dual rulers when ruler position is both * wip * refactor(timeilne): refactor the way grid-row gets decided * refactor(timeline, ruler): move show-secondary-ruler prop to timeline * feat(ruler): dipslay j-day * feat(timeline): j-day in secondary ruler, hide-j-day prop, SB * test(timeline): new tests for show-secondry-ruler, hide-j-day, ruler-position * chore: update changset description * chore(GA): update artifact actions to v4 * chore(workflow): update artifcat names * chore: VRT update, build --------- Co-authored-by: Frances Morrison <frances.morrison87@gmail.com>
1 parent 6662a15 commit 95904ef

File tree

185 files changed

+1475
-176
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

185 files changed

+1475
-176
lines changed

‎.changeset/great-mails-sell.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@astrouxds/angular": minor
3+
"@astrouxds/astro-web-components": minor
4+
"angular-workspace": minor
5+
"astro-angular": minor
6+
"astro-react": minor
7+
"astro-vue": minor
8+
"@astrouxds/react": minor
9+
---
10+
11+
Added several new props to rux-timeline. `show-secondary-ruler`, `ruler-position`, `show-grid`, and `hide-j-day`.

‎.github/workflows/pull-request.yml‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,13 @@ on:
66
types: [ready_for_review, opened, synchronize]
77
branches: [main, next]
88
workflow_dispatch:
9-
permissions:
109

1110
env:
1211
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
1312
jobs:
1413
setup:
1514
if: github.event.pull_request.draft == false
16-
runs-on: ubuntu-latest
15+
runs-on: ubuntu-20.04
1716
# timeout-minutes: 8
1817
steps:
1918
- uses: actions/checkout@v2
@@ -54,10 +53,10 @@ jobs:
5453
- name: e2e Tests
5554
run: npm run test.e2e.ci
5655
working-directory: ./packages/web-components
57-
- uses: actions/upload-artifact@v3
56+
- uses: actions/upload-artifact@v4
5857
if: always()
5958
with:
60-
name: playwright-report
59+
name: playwright-report-e2e
6160
path: packages/web-components/playwright-report/
6261
retention-days: 30
6362
VRTs:
@@ -80,9 +79,9 @@ jobs:
8079
- name: Run VRTs
8180
run: npm run test.vrt
8281
working-directory: ./packages/web-components
83-
- uses: actions/upload-artifact@v3
82+
- uses: actions/upload-artifact@v4
8483
if: always()
8584
with:
86-
name: playwright-report
85+
name: playwright-report-vrt
8786
path: packages/web-components/playwright-report/
8887
retention-days: 30

‎packages/angular-workspace/projects/angular/src/directives/proxies.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24595,14 +24595,14 @@ export declare interface RuxTimeRegion extends Components.RuxTimeRegion {}
2459524595

2459624596

2459724597
@ProxyCmp({
24598-
inputs: ['end', 'hasPlayedIndicator', 'interval', 'playhead', 'start', 'timezone', 'zoom']
24598+
inputs: ['end', 'hasPlayedIndicator', 'hideJDay', 'interval', 'playhead', 'rulerPosition', 'showGrid', 'showSecondaryRuler', 'start', 'timezone', 'zoom']
2459924599
})
2460024600
@Component({
2460124601
selector: 'rux-timeline',
2460224602
changeDetection: ChangeDetectionStrategy.OnPush,
2460324603
template: '<ng-content></ng-content>',
2460424604
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
24605-
inputs: ['end', 'hasPlayedIndicator', 'interval', 'playhead', 'start', 'timezone', 'zoom'],
24605+
inputs: ['end', 'hasPlayedIndicator', 'hideJDay', 'interval', 'playhead', 'rulerPosition', 'showGrid', 'showSecondaryRuler', 'start', 'timezone', 'zoom'],
2460624606
})
2460724607
export class RuxTimeline {
2460824608
protected el: HTMLElement;

‎packages/web-components/playwright.config.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { expect, PlaywrightTestConfig } from '@playwright/test'
1+
import { PlaywrightTestConfig, expect } from '@playwright/test'
2+
3+
import { TestOptions } from './tests/utils/_astro-fixtures'
24
import { devices } from '@playwright/test'
35
import { matchers } from '@astrouxds/stencil-playwright'
4-
import { TestOptions } from './tests/utils/_astro-fixtures'
56

67
expect.extend(matchers)
78

@@ -31,10 +32,10 @@ const config: PlaywrightTestConfig<TestOptions> = {
3132
* Increases the maximum allowed pixel difference to account
3233
* for slight browser rendering inconsistencies.
3334
*/
34-
// maxDiffPixelRatio: 0.01,
35+
maxDiffPixelRatio: 0.02,
3536
},
3637
toHaveScreenshot: {
37-
// maxDiffPixelRatio: 0.01,
38+
maxDiffPixelRatio: 0.02,
3839
},
3940
},
4041
/* Run tests in files in parallel */

‎packages/web-components/src/components.d.ts‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19774,9 +19774,14 @@ export namespace Components {
1977419774
}
1977519775
interface RuxRuler {
1977619776
"end": string;
19777+
"hideJDay": boolean;
1977719778
"interval": any;
19779+
"isSecondary": boolean;
19780+
"rulerPosition": 'top' | 'bottom' | 'both';
19781+
"showSecondaryRuler"?: boolean | undefined;
1977819782
/**
19779-
* Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour'.
19783+
* Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'.
19784+
* @deprecated This property is deprecated and will be removed in the next major release. Please use the `show-secondary-ruler` property on the rux-timeline component instead.
1978019785
*/
1978119786
"showStartOfDay"?: boolean | undefined;
1978219787
"start": string;
@@ -20086,6 +20091,10 @@ export namespace Components {
2008620091
* Visually marks past time as played in each track
2008720092
*/
2008820093
"hasPlayedIndicator": boolean;
20094+
/**
20095+
* Hides the J-Day display when show-secondary-ruler is true.
20096+
*/
20097+
"hideJDay": boolean;
2008920098
/**
2009020099
* The timeline's date time interval
2009120100
*/
@@ -20094,6 +20103,20 @@ export namespace Components {
2009420103
* The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"
2009520104
*/
2009620105
"playhead"?: string;
20106+
/**
20107+
* Controls the position of the ruler. Either top, bottom or both.
20108+
*/
20109+
"rulerPosition": | 'top'
20110+
| 'bottom'
20111+
| 'both';
20112+
/**
20113+
* Controls the display of grid lines
20114+
*/
20115+
"showGrid": boolean;
20116+
/**
20117+
* Controls whether or not the attached rux-ruler displays the secondary date portion.
20118+
*/
20119+
"showSecondaryRuler": boolean;
2009720120
/**
2009820121
* The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"
2009920122
*/
@@ -55356,9 +55379,14 @@ declare namespace LocalJSX {
5535655379
}
5535755380
interface RuxRuler {
5535855381
"end"?: string;
55382+
"hideJDay"?: boolean;
5535955383
"interval"?: any;
55384+
"isSecondary"?: boolean;
55385+
"rulerPosition"?: 'top' | 'bottom' | 'both';
55386+
"showSecondaryRuler"?: boolean | undefined;
5536055387
/**
55361-
* Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour'.
55388+
* Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'.
55389+
* @deprecated This property is deprecated and will be removed in the next major release. Please use the `show-secondary-ruler` property on the rux-timeline component instead.
5536255390
*/
5536355391
"showStartOfDay"?: boolean | undefined;
5536455392
"start"?: string;
@@ -55721,6 +55749,10 @@ declare namespace LocalJSX {
5572155749
* Visually marks past time as played in each track
5572255750
*/
5572355751
"hasPlayedIndicator"?: boolean;
55752+
/**
55753+
* Hides the J-Day display when show-secondary-ruler is true.
55754+
*/
55755+
"hideJDay"?: boolean;
5572455756
/**
5572555757
* The timeline's date time interval
5572655758
*/
@@ -55729,6 +55761,20 @@ declare namespace LocalJSX {
5572955761
* The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z"
5573055762
*/
5573155763
"playhead"?: string;
55764+
/**
55765+
* Controls the position of the ruler. Either top, bottom or both.
55766+
*/
55767+
"rulerPosition"?: | 'top'
55768+
| 'bottom'
55769+
| 'both';
55770+
/**
55771+
* Controls the display of grid lines
55772+
*/
55773+
"showGrid"?: boolean;
55774+
/**
55775+
* Controls whether or not the attached rux-ruler displays the secondary date portion.
55776+
*/
55777+
"showSecondaryRuler"?: boolean;
5573255778
/**
5573355779
* The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z"
5573455780
*/

‎packages/web-components/src/components/rux-timeline/helpers.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {
2+
addDays,
23
addHours,
4+
addMinutes,
5+
differenceInDays,
36
differenceInHours,
47
differenceInMinutes,
5-
addDays,
6-
addMinutes,
7-
subMinutes,
88
differenceInMonths,
9-
differenceInDays,
9+
subMinutes,
1010
} from 'date-fns'
11+
1112
import { formatInTimeZone } from 'date-fns-tz'
1213

1314
export async function validateTimezone(timezone: string) {
@@ -119,7 +120,7 @@ export function dateRange(
119120
i === 0 || time.getMonth() === 0
120121
? formatInTimeZone(time, timezone, 'MM/dd/yy')
121122
: formatInTimeZone(time, timezone, 'MM/dd')
122-
return [formattedTime]
123+
return [formattedTime, time]
123124
})
124125

125126
return output
@@ -142,7 +143,7 @@ export function dateRange(
142143
i === 0 || showYear
143144
? formatInTimeZone(time, timezone, 'MM/dd/yy')
144145
: formatInTimeZone(time, timezone, 'MM/dd')
145-
return [formattedTime]
146+
return [formattedTime, time]
146147
})
147148

148149
return output
@@ -157,7 +158,7 @@ export function dateRange(
157158
const time = agnosticAddDays(startDate, i)
158159

159160
const formattedTime = formatInTimeZone(time, timezone, 'MM/dd')
160-
return [formattedTime]
161+
return [formattedTime, time]
161162
})
162163

163164
return output

‎packages/web-components/src/components/rux-timeline/readme.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,12 @@
99
| -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ----------- |
1010
| `end` | `end` | The timeline's end date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` |
1111
| `hasPlayedIndicator` | `has-played-indicator` | Visually marks past time as played in each track | `boolean` | `false` |
12+
| `hideJDay` | `hide-j-day` | Hides the J-Day display when show-secondary-ruler is true. | `boolean` | `false` |
1213
| `interval` | `interval` | The timeline's date time interval | `"day" \| "hour" \| "minute" \| "month" \| "week"` | `'hour'` |
1314
| `playhead` | `playhead` | The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z" | `string \| undefined` | `undefined` |
15+
| `rulerPosition` | `ruler-position` | Controls the position of the ruler. Either top, bottom or both. | `"both" \| "bottom" \| "top"` | `'both'` |
16+
| `showGrid` | `show-grid` | Controls the display of grid lines | `boolean` | `false` |
17+
| `showSecondaryRuler` | `show-secondary-ruler` | Controls whether or not the attached rux-ruler displays the secondary date portion. | `boolean` | `false` |
1418
| `start` | `start` | The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` |
1519
| `timezone` | `timezone` | Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string. | `string` | `'UTC'` |
1620
| `zoom` | `zoom` | The timeline's zoom level. | `number` | `1` |
@@ -24,6 +28,21 @@
2428
| `"time-region-container"` | The container for time regions. Use this part to set a maximum height and enable vertical scrolling. |
2529

2630

31+
## Dependencies
32+
33+
### Depends on
34+
35+
- [rux-track](rux-track)
36+
- [rux-ruler](rux-ruler)
37+
38+
### Graph
39+
```mermaid
40+
graph TD;
41+
rux-timeline --> rux-track
42+
rux-timeline --> rux-ruler
43+
style rux-timeline fill:#f9f,stroke:#333,stroke-width:4px
44+
```
45+
2746
----------------------------------------------
2847

2948
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/web-components/src/components/rux-timeline/rux-ruler/readme.md‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,24 @@
55

66
## Properties
77

8-
| Property | Attribute | Description | Type | Default |
9-
| ---------------- | ------------------- | ------------------------------------------------------------------------------------- | ---------------------- | ------- |
10-
| `showStartOfDay` | `show-start-of-day` | Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour'. | `boolean \| undefined` | `false` |
8+
| Property | Attribute | Description | Type | Default |
9+
| ---------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------- |
10+
| `showStartOfDay` | `show-start-of-day` | <span style="color:red">**[DEPRECATED]**</span> This property is deprecated and will be removed in the next major release. Please use the `show-secondary-ruler` property on the rux-timeline component instead.<br/><br/>Display the day (MM/DD) at 00:00. Only works when Timeline interval is set to 'hour' or 'minutes'. | `boolean \| undefined` | `false` |
1111

1212

13+
## Dependencies
14+
15+
### Used by
16+
17+
- [rux-timeline](..)
18+
19+
### Graph
20+
```mermaid
21+
graph TD;
22+
rux-timeline --> rux-ruler
23+
style rux-ruler fill:#f9f,stroke:#333,stroke-width:4px
24+
```
25+
1326
----------------------------------------------
1427

1528
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.scss‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,25 @@
88

99
.ruler-time {
1010
display: flex;
11-
align-items: center;
12-
padding: 12px 20px;
11+
padding: var(--spacing-2);
12+
background: #2c3d4d;
13+
border-right: 1px solid var(--color-background-surface-default);
1314
}
1415

1516
.ruler-new-day-cell {
1617
background-color: var(--color-background-base-default);
17-
font-size: var(--font-size-sm);
18-
display: block;
19-
text-align: center;
20-
padding: 5px;
2118
}
2219

2320
.ruler-new-day-display {
24-
display: block;
25-
font-size: var(--font-size-sm);
21+
display: flex;
22+
align-items: flex-end;
23+
text-align: left;
24+
padding-inline-start: var(--spacing-2);
25+
26+
padding-block: var(--spacing-1);
27+
28+
& span {
29+
position: sticky;
30+
left: 210px;
31+
}
2632
}

0 commit comments

Comments
 (0)