-
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 #852 from WestpacGEL/feature/site-feature-availabi…
…lity-component Availability content component for site
- Loading branch information
Showing
53 changed files
with
650 additions
and
2,512 deletions.
There are no files selected for viewing
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
52 changes: 4 additions & 48 deletions
52
...rc/content/design-system/components/accordion/design/where-is-this-available/content.mdoc
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 |
|---|---|---|
| @@ -1,50 +1,6 @@ | ||
| {% shortCode name="where-is-this-available" /%} | ||
|
|
||
| ```tsx | ||
| <Table> | ||
|
|
||
| <React.Fragment key=".0"> | ||
| <TableHeader> | ||
| <TableHeaderRow> | ||
| <TableHeaderCell> | ||
| Platform | ||
| </TableHeaderCell> | ||
| <TableHeaderCell> | ||
| Status | ||
| </TableHeaderCell> | ||
|
|
||
| </TableHeaderRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>GEL Design System</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>Mesh UI</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>Legacy WDP</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| </TableBody> | ||
|
|
||
| </React.Fragment> | ||
| </Table> | ||
| ``` | ||
| {% availabilityContent | ||
| availableGel="available" | ||
| availableMesh="available" | ||
| availableLegacyWdp="available" /%} |
52 changes: 4 additions & 48 deletions
52
...te/src/content/design-system/components/alert/design/where-is-this-available/content.mdoc
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 |
|---|---|---|
| @@ -1,50 +1,6 @@ | ||
| {% shortCode name="where-is-this-available" /%} | ||
|
|
||
| ```tsx | ||
| <Table colspan={2}> | ||
|
|
||
| <React.Fragment key=".0"> | ||
| <TableHeader> | ||
| <TableHeaderRow> | ||
| <TableHeaderCell> | ||
| Platform | ||
| </TableHeaderCell> | ||
| <TableHeaderCell> | ||
| Status | ||
| </TableHeaderCell> | ||
|
|
||
| </TableHeaderRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>GEL Design System</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>Mesh UI</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell> | ||
| <strong>Legacy WDP</strong> | ||
| </TableCell> | ||
| <TableCell> | ||
| <div className="typography-body-10 text-success"><TickCircleIcon size="small" look="outlined" className="mr-2" />Available</div> | ||
| </TableCell> | ||
|
|
||
| </TableRow> | ||
| </TableBody> | ||
|
|
||
| </React.Fragment> | ||
| </Table> | ||
| ``` | ||
| {% availabilityContent | ||
| availableGel="available" | ||
| availableMesh="available" | ||
| availableLegacyWdp="available" /%} |
Oops, something went wrong.