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 committed Nov 3, 2023
2 parents a87cd20 + 839559e commit 6e7bee1
Show file tree
Hide file tree
Showing 131 changed files with 2,518 additions and 385 deletions.
8 changes: 8 additions & 0 deletions apps/site/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# site

## 0.0.18

### Patch Changes

- Updated dependencies [61e6f8b]
- Updated dependencies [fe42599]
- @westpac/ui@0.9.0

## 0.0.17

### Patch Changes
Expand Down
45 changes: 45 additions & 0 deletions apps/site/keystatic.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,45 @@ const storage: LocalConfig['storage'] | GitHubConfig['storage'] =
export default config({
storage,
singletons: {
homePage: singleton({
label: 'Home page config',
path: 'src/content/home-page/',
schema: {
articleRows: fields.array(
fields.object({
layout: fields.select({
label: 'Layout',
description: 'Layout to display the article row',
options: [
{ label: '1x1: [_____][_____]', value: '1x1' },
{ label: '2x1: [_______][___]', value: '2x1' },
{ label: '1x2: [___][_______]', value: '1x2' },
{ label: '1x1x1: [___][___][___]', value: '1x1x1' },
],
defaultValue: '1x1',
}),
articles: fields.array(
fields.relationship({
label: 'Related articles',
description: 'A list of articles',
collection: 'articles',
}),
{
label: 'Articles',
itemLabel: props => props.value || '',
},
),
}),
{
label: 'Article Rows',
itemLabel: props =>
`Articles: [${props.fields.articles.elements.map(element => element.value).join(', ')}] (${
props.fields.layout.value
})`,
},
),
},
}),
url: singleton({
label: 'URLs',
path: 'src/content/urls/',
Expand Down Expand Up @@ -161,6 +200,12 @@ export default config({
directory: 'public/images/articles',
publicPath: '/images/articles',
}),
smallDescription: fields.image({
label: 'Small description',
description: 'Small description that goes along with the thumbnail',
directory: 'public/images/articles',
publicPath: '/images/articles',
}),
image: fields.image({
label: 'Main Image',
description: 'Main image',
Expand Down
3 changes: 3 additions & 0 deletions apps/site/next.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: false,
images: {
domains: ['res.cloudinary.com'],
},
};
3 changes: 2 additions & 1 deletion apps/site/package.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{
"name": "site",
"version": "0.0.17",
"version": "0.0.18",
"private": true,
"scripts": {
"build": "next build",
"dev": "next dev",
"start": "next start",
"lint": "next lint",
"lint:fix": "next lint --fix",
"check-types": "tsc --noemit --emitDeclarationOnly false"
},
"dependencies": {
Expand Down
Binary file not shown.
Original file line number Diff line number Diff line change
Expand Up @@ -6,34 +6,56 @@ import Link from 'next/link';
import { BrandKey } from '@/app/types/brand.types';
import { GELLogo } from '@/components/logos';
import { StickyHeader } from '@/components/sticky-header';
import { BANK_OPTIONS } from '@/constants/bank-options';

import { BrandSelect } from '../brand-select/brand-select.component';
import { CircleLogo } from '../circle-logo/circle-logo.component';
import { logoMap, logoStyles } from '../utils';

export function ActionBar() {
return (
<StickyHeader>
<Container className="flex h-[6.375rem] items-end bg-white pb-2 ">
<div className="mr-4 flex h-full flex-col justify-end border-r-[1px] border-gel-border">
<span className="mb-2 inline-block">
<GELLogo className="text-gel-text" />
</span>
<p className="mb-1 flex items-end">
Design System
<ArrowRightIcon className="ml-2 mr-[1rem]" />
</p>
<Container className="px-4">
<div className="hidden h-[6.375rem] items-end bg-white pb-2 sm:flex">
<div className="mr-4 flex h-full flex-col justify-end border-r-[1px] border-gel-border">
<span className="mb-2 inline-block">
<GELLogo className="inline-block h-3 w-[45px] text-gel-text" />
</span>
<p className="mb-1 flex items-end">
Design System
<ArrowRightIcon className="ml-2 mr-[1rem]" />
</p>
</div>
<ul role="list" className="flex gap-2">
{Object.entries(logoMap).map(([key, { logo: Logo }]) => (
<li key={key}>
<Link href={`/design-system?brand=${key}`}>
<CircleLogo>
<Logo className={logoStyles({ brand: key as BrandKey })} />
</CircleLogo>
</Link>
</li>
))}
</ul>
</div>
<div className="block bg-white sm:hidden">
<BrandSelect
selectedKey={undefined}
onSelectionChange={() => {
return;
}}
aria-label="Change brand"
>
{BANK_OPTIONS.map(({ icon, key, label }) => (
<BrandSelect.Option href={`/design-system?brand=${key}`} key={key} textValue={label}>
<div className="flex w-full items-center justify-between">
<span className="typography-body-10">{label}</span>
{icon}
</div>
</BrandSelect.Option>
))}
</BrandSelect>
</div>
<ul role="list" className="flex gap-2">
{Object.entries(logoMap).map(([key, { logo: Logo }]) => (
<li key={key}>
<Link href={`/design-system?brand=${key}`}>
<CircleLogo>
<Logo className={logoStyles({ brand: key as BrandKey })} />
</CircleLogo>
</Link>
</li>
))}
</ul>
</Container>
</StickyHeader>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import Link from 'next/link';
import { styles as articleStyles } from './article-tile.style';
import { ArticleTileProps } from './article-tile.types';

export function ArticleTile({ article, slug, className }: ArticleTileProps) {
const styles = articleStyles({ className });
export function ArticleTile({ article, slug, className, layout, index }: ArticleTileProps) {
const styles = articleStyles({ layout, index: index.toString() as '0' | '1' | '2' });
return (
<Link href={`/articles/${slug}`} className={styles.base({})}>
<Link href={`/articles/${slug}`} className={styles.base({ className })}>
{article.thumbnail && (
<div className={styles.imageWrapper({})}>
<Image fill objectFit="cover" src={article.thumbnail} alt="" />
</div>
)}
<div className={styles.contentWrapper({})}>
<h4 className={styles.title({})}>{article.name}</h4>
<p className={styles.description({})}>{article.description}</p>
<p className={styles.description({})}>{article.smallDescription}</p>
<ArrowRightIcon className={styles.icon({})} />
</div>
</Link>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,69 @@ import { tv } from 'tailwind-variants';

export const styles = tv({
slots: {
base: 'group flex h-full flex-col',
base: 'group flex flex-col',
imageWrapper:
'relative aspect-[1092/563] w-full overflow-hidden transition-[border-radius] duration-200 ease-[cubic-bezier(0.13,0.00,0.11,1.00)] group-hover:rounded-[12.5rem] group-hover:transition-[border-radius] group-hover:duration-300 group-hover:ease-[cubic-bezier(0.13,0.00,0.11,1.00)]',
contentWrapper: 'flex grow flex-col border-gel-border pl-1 pt-4 xsl:border-r xsl:pt-7',
title: 'typography-site-9 mb-2 font-black uppercase leading-[1.12]',
description: 'typography-site-9 mb-2 mr-4',
icon: 'ml-auto mt-auto block text-gel-icon xsl:mr-1',
},
variants: {
layout: {
'1x1': {
// eslint-disable-next-line sonarjs/no-duplicate-string
imageWrapper: 'xsl:aspect-[1092/563]',
},
'1x2': {},
'2x1': {},
'1x1x1': {
// eslint-disable-next-line sonarjs/no-duplicate-string
imageWrapper: 'xsl:aspect-[708/559]',
},
},
index: {
'0': '',
'1': '',
'2': '',
},
},
compoundSlots: [
{
slots: ['base'],
layout: '1x2',
index: '1',
className: 'xsl:col-span-2',
},
{
slots: ['base'],
layout: '2x1',
index: '0',
className: 'xsl:col-span-2',
},
{
slots: ['imageWrapper'],
layout: '2x1',
index: '0',
className: 'xsl:aspect-[484/185]',
},
{
slots: ['imageWrapper'],
layout: '2x1',
index: '1',
className: 'xsl:aspect-[708/559]',
},
{
slots: ['imageWrapper'],
layout: '1x2',
index: '0',
className: 'xsl:aspect-[708/559]',
},
{
slots: ['imageWrapper'],
layout: '1x2',
index: '1',
className: 'xsl:aspect-[484/185]',
},
],
});
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Article } from '@/types/article.types';
import { type Article } from '@/types/article.types';

import { type ArticleRowsProps } from '../home-page/home-page.types';

export type ArticleTileProps = {
article: Omit<Article, 'content'>;
className?: string;
index: number;
layout: ArticleRowsProps['layout'];
slug?: string;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { ExpandLessIcon, ExpandMoreIcon } from '@westpac/ui/icon';
import React, { useRef } from 'react';
import { AriaLinkOptions, mergeProps, useButton, useFocusRing, useSelect } from 'react-aria';
import { Item, ItemProps, useSelectState } from 'react-stately';

import { GELLogo } from '@/components/logos';

import { styles as sidebarSelectStyles } from './brand-select.styles';
import { type BrandSelectProps } from './brand-select.types';
import { ListBox } from './components/list-box';
import { Popover } from './components/popover';

export function BrandSelect(props: BrandSelectProps) {
// Create state based on the incoming props
const state = useSelectState(props);

// Get props for child elements from useSelect
const ref = useRef(null);

const { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, ref);
// Get props for the button based on the trigger props from useSelect

const { buttonProps } = useButton(triggerProps, ref);

const { focusProps, isFocusVisible } = useFocusRing();
const styles = sidebarSelectStyles({ isFocusVisible, isOpen: state.isOpen });

return (
<div className={styles.base()}>
<div {...labelProps} className={styles.label()}>
{props.label}
</div>

<button {...mergeProps(buttonProps, focusProps)} ref={ref} className={styles.button()}>
<div className={styles.textWrapper()}>
<div className="flex w-full items-center gap-2 overflow-hidden text-ellipsis py-2" {...valueProps}>
<GELLogo className="w-[2.8125rem] shrink-0" />
<span className="mb-[-0.3rem] shrink truncate">Design System</span>
</div>
</div>
<div aria-hidden="true" className={styles.iconWrapper()}>
{state.isOpen ? <ExpandLessIcon className="text-gel-link" /> : <ExpandMoreIcon className="text-gel-link" />}
</div>
</button>
{state.isOpen && (
<Popover state={state} triggerRef={ref} placement="bottom start" className={styles.popover()}>
<ListBox {...menuProps} state={state} />
</Popover>
)}
</div>
);
}
BrandSelect.Option = Item as (props: ItemProps<AriaLinkOptions> & AriaLinkOptions & { href?: string }) => JSX.Element;
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { tv } from 'tailwind-variants';

export const styles = tv(
{
slots: {
base: 'relative flex w-full flex-col',
label: 'block cursor-default text-left text-sm font-medium text-text',
button:
'relative flex h-11 max-w-full cursor-pointer flex-row items-stretch overflow-hidden outline-none focus:focus-outline',
// TODO: this is a workaround to align, but need to find a better way.
popover: 'ml-[-0.75rem] w-full',
// icon: 'text-primary transition-transform',
iconWrapper: 'flex flex-shrink-0 items-center text-primary',
textWrapper: 'flex flex-shrink items-center overflow-hidden pr-2',
},
variants: {
isFocusVisible: {
true: {
base: '',
},
false: {},
},
isOpen: {
true: {
icon: 'rotate-90',
},
false: {},
},
},
compoundSlots: [],
},
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
);
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { AriaSelectProps } from 'react-aria';
import { type VariantProps } from 'tailwind-variants';

import { styles } from './brand-select.styles.js';

export type BrandSelectProps<T = any> = VariantProps<typeof styles> & AriaSelectProps<T>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './list-box-option';
export * from './list-box-section';
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { Option } from './list-box-option.component';
export { type OptionProps } from './list-box-option.types';
Loading

1 comment on commit 6e7bee1

@vercel
Copy link

@vercel vercel bot commented on 6e7bee1 Nov 3, 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.