Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
@samithaf
samithaf committed Dec 1, 2023
2 parents c033a31 + 058bd7a commit 43405bd
Show file tree
Hide file tree
Showing 19 changed files with 331 additions and 303 deletions.
2 changes: 1 addition & 1 deletion apps/site/src/app/design-system/components/section/section.component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Container } from '@/app/design-system/components';

export function Section({ background, children }: { background?: boolean; children: React.ReactNode }) {
return background ? (
<section className="bg-background">
<section className="border-y border-y-border bg-background first:border-t-0 last:border-b-0">
<Container tag="section" className="py-7 text-center sm:py-15">
<>{children}</>
</Container>
Expand Down
25 changes: 15 additions & 10 deletions apps/site/src/app/design-system/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function DesignSystemHomePage() {
<Section>
<SectionHeading>Accessible by design</SectionHeading>
<Grid>
<SectionItem className="flex flex-col gap-2">
<SectionItem className="flex flex-col gap-2 leading-[2]">
<p>Accessibility and inclusive design is a strong part of the GEL Design System.</p>
<p>
The system supports teams to deliver to the Group accessibility commitment, to provide meaningful banking
Expand All @@ -41,19 +41,24 @@ export default function DesignSystemHomePage() {
</Grid>
</Section>
<Section background>
<ReactLogo />
<ReactLogo className="mb-3" />
<SectionHeading>Built on React</SectionHeading>
<Grid>
<SectionItem>
<p className="mb-5 sm:mb-7">
<p className="mb-5 leading-[2] sm:mb-7">
The GEL Design System is now using React. You can still access HTML/CSS but with React at its core we can
showcase so much more and deliver even higher-quality, more accessible code.
</p>
<h3 className="typography-body-8 mb-5 border-b pb-2 font-bold">Who else is using React?</h3>
<Grid tag="ul" className="items-center gap-y-4 text-neutral-70 sm:gap-7">
<Grid tag="ul" className="items-center gap-y-4 text-neutral-70 sm:gap-x-4 sm:gap-y-8">
{[GovLogo, MicrosoftLogo, MyobLogo, IBMLogo, AtlassianLogo, FacebookLogo, TwitterLogo, ShopifyLogo].map(
(Logo, i) => (
<Item tag="li" key={i} span={{ initial: 12, xsl: 6, sm: 3 }}>
<Item
tag="li"
key={i}
span={{ initial: 12, xsl: 6, sm: 3 }}
className="flex items-center justify-center"
>
<Logo />
</Item>
),
Expand All @@ -66,7 +71,7 @@ export default function DesignSystemHomePage() {
<SectionHeading>Subscribe to GEL updates</SectionHeading>
<Grid>
<SectionItem>
<p className="mb-5 sm:mb-7">
<p className="mb-5 leading-[2] sm:mb-7">
Get the latest brand and component updates as well as access to new resources and helpful tips.
</p>
<form
Expand Down Expand Up @@ -109,11 +114,11 @@ export default function DesignSystemHomePage() {
</Grid>
</Section>
<Section background>
<SectionHeading>Downloads and links</SectionHeading>
<Grid className="mb-5 sm:mb-7">
<SectionHeading>Downloads &amp; links</SectionHeading>
<Grid className="mb-5 sm:mb-[3.375rem]">
<SectionItem className="flex flex-col gap-2">
<p>Design on-brand with greater efficiency and accuracy using the Sketch UI Kit.</p>
<p>Visit GitHub to follow Westpac GEL Design System code updates and log issues.</p>
<p className="leading-[2]">Design on-brand with greater efficiency and accuracy using the Sketch UI Kit.</p>
<p className="leading-[2]">Visit GitHub to follow Westpac GEL Design System code updates and log issues.</p>
</SectionItem>
</Grid>
<Grid className="gap-y-4 text-left xsl:gap-x-5 sm:gap-x-8 md:gap-x-10">
Expand Down
12 changes: 10 additions & 2 deletions apps/site/src/components/logos/react-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,16 @@
import { clsx } from 'clsx';

import { Svg } from '@/components/svg';

export function ReactLogo() {
export function ReactLogo({ className }: { className?: string }) {
return (
<Svg viewBox="0 0 2486 2235" width={2486} height={2235} aria-label="React" className="inline-block h-auto w-10">
<Svg
viewBox="0 0 2486 2235"
width={2486}
height={2235}
aria-label="React"
className={clsx('inline-block h-auto w-10', className)}
>
<title>React logo</title>
<g fillRule="nonzero" fill="none">
<path
Expand Down
62 changes: 29 additions & 33 deletions apps/site/src/content/design-system/components/table/accessibilityDemo.mdoc
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,46 @@
```jsx
<div className="p-3">
<div>
<Table>
<Table.Caption>
{' '}
Caption this table width is: <em>(100%)</em>{' '}
Table caption this table width is: <em>(100%)</em>
</Table.Caption>
<Table.Header>
<Table.HeaderRow>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Type</Table.HeaderCell>
<Table.HeaderCell>Date Modified</Table.HeaderCell>
<Table.HeaderCell>Extra Column 1</Table.HeaderCell>
<Table.HeaderCell>Extra Column 2</Table.HeaderCell>
<Table.HeaderCell>Column 1</Table.HeaderCell>
<Table.HeaderCell>Column 2</Table.HeaderCell>
<Table.HeaderCell>Column 3</Table.HeaderCell>
</Table.HeaderRow>
</Table.Header>
<Table.Body>
<Table.Row highlighted={[1]}>
<Table.Cell>Cell 1</Table.Cell>
<Table.Cell>Cell 7</Table.Cell>
<Table.Cell>Cell 13</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Cell 2</Table.Cell>
<Table.Cell>Cell 8</Table.Cell>
<Table.Cell>Cell 14</Table.Cell>
</Table.Row>
<Table.Row highlighted>
<Table.Cell>Games</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>6/7/2020</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>6/7/2020</Table.Cell>
<Table.Cell>Cell 3</Table.Cell>
<Table.Cell>Cell 9</Table.Cell>
<Table.Cell>Cell 15</Table.Cell>
</Table.Row>
<Table.Row highlighted={[0, 2]}>
<Table.Cell>Program Files</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>4/7/2021</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>6/7/2020</Table.Cell>
<Table.Row>
<Table.Cell>Cell 4</Table.Cell>
<Table.Cell>Cell 10</Table.Cell>
<Table.Cell>Cell 16</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell highlightStart highlighted>
{' '}
bootmgr{' '}
</Table.Cell>
<Table.Cell highlighted> System file </Table.Cell>
<Table.Cell>11/20/2010</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>6/7/2020</Table.Cell>
<Table.Cell>Cell 5</Table.Cell>
<Table.Cell>Cell 11</Table.Cell>
<Table.Cell>Cell 17</Table.Cell>
</Table.Row>
<Table.Row highlighted={[0, [2, 4]]}>
<Table.Cell>Program Files</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>4/7/2021</Table.Cell>
<Table.Cell>File folder</Table.Cell>
<Table.Cell>6/7/2020</Table.Cell>
<Table.Row>
<Table.Cell>Cell 6</Table.Cell>
<Table.Cell>Cell 12</Table.Cell>
<Table.Cell>Cell 18</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer colspan={5}>Footer goes here and should colSpan all columns</Table.Footer>
Expand Down
Loading

1 comment on commit 43405bd

@vercel
Copy link

@vercel vercel bot commented on 43405bd Dec 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gel-next-site – ./apps/site

gel-next-site.vercel.app
gel-next-site-git-main-westpacgel.vercel.app
gel-next-site-westpacgel.vercel.app

Please sign in to comment.