-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #868 from WestpacGEL/develop
Develop
- Loading branch information
Showing
144 changed files
with
1,129 additions
and
2,570 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@westpac/ui': minor | ||
| --- | ||
|
|
||
| added iconSize prop option for alert component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
...nents/component-blocks/components/availability-content/availability-content.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| 'use client'; | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { styles as AvailabilityContentStyles } from './availability-content.styles'; | ||
| import { TableOfAvailability } from './components/table-of-availability'; | ||
|
|
||
| import { AvailabilityContentProps } from '.'; | ||
|
|
||
| export function AvailabilityContent({ | ||
| availableGel, | ||
| availableMesh, | ||
| availableLegacyWdp, | ||
| alternativeGel, | ||
| alternativeMesh, | ||
| alternativeLegacyWdp, | ||
| }: AvailabilityContentProps) { | ||
| const styles = AvailabilityContentStyles({}); | ||
| return ( | ||
| <div className={styles.contentContainer({})}> | ||
| <div className={styles.tableContainer({})}> | ||
| <TableOfAvailability | ||
| availableGel={availableGel} | ||
| availableMesh={availableMesh} | ||
| availableLegacyWdp={availableLegacyWdp} | ||
| alternativeGel={alternativeGel} | ||
| alternativeMesh={alternativeMesh} | ||
| alternativeLegacyWdp={alternativeLegacyWdp} | ||
| ></TableOfAvailability> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
43 changes: 43 additions & 0 deletions
43
...ponents/component-blocks/components/availability-content/availability-content.preview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { NotEditable, component, fields } from '@keystatic/core'; | ||
|
|
||
| const availabilityOptions = [ | ||
| { label: 'Available', value: 'available' }, | ||
| { label: 'Not Available', value: 'unavailable' }, | ||
| { label: 'In Progress', value: 'in-progress' }, | ||
| ]; | ||
|
|
||
| export const availabilityContent = component({ | ||
| preview: () => ( | ||
| <NotEditable> | ||
| <div>Platform Availability</div> | ||
| </NotEditable> | ||
| ), | ||
| label: 'Content Availability', | ||
| schema: { | ||
| availableGel: fields.select({ | ||
| label: 'GEL Availability', | ||
| options: availabilityOptions, | ||
| defaultValue: 'available', | ||
| }), | ||
| availableMesh: fields.select({ | ||
| label: 'Mesh Availability', | ||
| options: availabilityOptions, | ||
| defaultValue: 'available', | ||
| }), | ||
| availableLegacyWdp: fields.select({ | ||
| label: 'Legacy WDP Availability', | ||
| options: availabilityOptions, | ||
| defaultValue: 'available', | ||
| }), | ||
| alternativeMesh: fields.text({ | ||
| label: 'Mesh Alternative Name', | ||
| multiline: false, | ||
| defaultValue: undefined, | ||
| }), | ||
| alternativeLegacyWdp: fields.text({ | ||
| label: 'Legacy WDP Alternative Name', | ||
| multiline: false, | ||
| defaultValue: undefined, | ||
| }), | ||
| }, | ||
| }); |
8 changes: 8 additions & 0 deletions
8
...omponents/component-blocks/components/availability-content/availability-content.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { tv } from 'tailwind-variants'; | ||
|
|
||
| export const styles = tv({ | ||
| slots: { | ||
| contentContainer: 'mb-5 mt-4 max-w-5xl bg-white p-6 pb-0', | ||
| tableContainer: 'relative -mx-6 -mt-6 border-muted-50 px-6 pb-6 pt-9', | ||
| }, | ||
| }); |
12 changes: 12 additions & 0 deletions
12
...components/component-blocks/components/availability-content/availability-content.types.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { DocumentElement } from '@keystatic/core'; | ||
|
|
||
| export type AvailabilitySectionProps = { content: DocumentElement[]; title: string }; | ||
|
|
||
| export type AvailabilityContentProps = { | ||
| alternativeGel?: string; | ||
| alternativeLegacyWdp?: string; | ||
| alternativeMesh?: string; | ||
| availableGel: string; | ||
| availableLegacyWdp: string; | ||
| availableMesh: string; | ||
| }; |
2 changes: 2 additions & 0 deletions
2
.../site/src/components/component-blocks/components/availability-content/components/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './table-of-availability/table-of-availability.component'; | ||
| export * from './table-of-availability/table-of-availability.types'; |
2 changes: 2 additions & 0 deletions
2
...omponent-blocks/components/availability-content/components/table-of-availability/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './table-of-availability.component'; | ||
| export * from './table-of-availability.types'; |
76 changes: 76 additions & 0 deletions
76
...availability-content/components/table-of-availability/table-of-availability.component.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| 'use client'; | ||
|
|
||
| import { Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderRow, TableRow } from '@westpac/ui'; | ||
| import { CalendarIcon, TickCircleIcon, WarningIcon } from '@westpac/ui/icon'; | ||
| import React from 'react'; | ||
|
|
||
| import { styles as TableOfAvailabilityStyles } from './table-of-availability.styles'; | ||
|
|
||
| interface TableOfAvailabilityProps { | ||
| alternativeGel?: string; | ||
| alternativeLegacyWdp?: string; | ||
| alternativeMesh?: string; | ||
| availableGel: string; | ||
| availableLegacyWdp: string; | ||
| availableMesh: string; | ||
| } | ||
|
|
||
| const availabilityMap: Record< | ||
| string, | ||
| { color: 'success' | 'warning' | 'info'; icon: React.ElementType; text: string } | ||
| > = { | ||
| available: { text: 'Available', icon: TickCircleIcon, color: 'success' }, | ||
| unavailable: { text: 'Older version available', icon: WarningIcon, color: 'warning' }, | ||
| 'in-progress': { text: 'Older version available - Upgrade in backlog', icon: CalendarIcon, color: 'info' }, | ||
| }; | ||
|
|
||
| export function TableOfAvailability({ | ||
| availableGel, | ||
| availableMesh, | ||
| availableLegacyWdp, | ||
| alternativeGel, | ||
| alternativeMesh, | ||
| alternativeLegacyWdp, | ||
| }: TableOfAvailabilityProps) { | ||
| const platforms = [ | ||
| { name: 'GEL Design System', status: availableGel, alternative: alternativeGel }, | ||
| { name: 'Mesh UI', status: availableMesh, alternative: alternativeMesh }, | ||
| { name: 'Legacy WDP', status: availableLegacyWdp, alternative: alternativeLegacyWdp }, | ||
| ]; | ||
|
|
||
| const styles = TableOfAvailabilityStyles({}); | ||
|
|
||
| const hasAlternativeNames = platforms.some(platform => platform.alternative); | ||
| const cellWidth = hasAlternativeNames ? '33%' : '50%'; | ||
|
|
||
| return ( | ||
| <Table> | ||
| <TableHeader> | ||
| <TableHeaderRow> | ||
| <TableHeaderCell>Platform</TableHeaderCell> | ||
| <TableHeaderCell>Status</TableHeaderCell> | ||
| {hasAlternativeNames && <TableHeaderCell>Other name</TableHeaderCell>} | ||
| </TableHeaderRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {platforms.map(platform => { | ||
| const { text, icon: Icon, color } = availabilityMap[platform.status]; | ||
| return ( | ||
| <TableRow key={platform.name}> | ||
| <TableCell width={cellWidth}> | ||
| <strong>{platform.name}</strong> | ||
| </TableCell> | ||
| <TableCell width={cellWidth}> | ||
| <div className={styles.text({ color })}> | ||
| <Icon size="small" look="outlined" className="mr-2" color={color} /> | ||
| {text} | ||
| </div> | ||
| </TableCell> | ||
| {hasAlternativeNames && <TableCell width={cellWidth}>{platform.alternative || ''}</TableCell>} | ||
| </TableRow> | ||
| ); | ||
| })} | ||
| </TableBody> | ||
| </Table> | ||
| ); | ||
| } |
20 changes: 20 additions & 0 deletions
20
...nts/availability-content/components/table-of-availability/table-of-availability.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { tv } from 'tailwind-variants'; | ||
|
|
||
| export const styles = tv({ | ||
| slots: { | ||
| text: 'typography-body-10', | ||
| }, | ||
| variants: { | ||
| color: { | ||
| success: { | ||
| text: 'text-success', | ||
| }, | ||
| warning: { | ||
| text: 'text-warning', | ||
| }, | ||
| info: { | ||
| text: 'text-info', | ||
| }, | ||
| }, | ||
| }, | ||
| }); |
7 changes: 7 additions & 0 deletions
7
...nts/availability-content/components/table-of-availability/table-of-availability.types.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| 'use client'; | ||
|
|
||
| export type TableOfAvailabilityProps = { | ||
| availableGel: string; | ||
| availableLegacyWdp: string; | ||
| availableMesh: string; | ||
| }; |
2 changes: 2 additions & 0 deletions
2
apps/site/src/components/component-blocks/components/availability-content/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from './availability-content.component'; | ||
| export * from './availability-content.types'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.