Skip to content

Commit

Permalink
Merge pull request #353 from WestpacGEL/fixes/flexicell-examples
Browse files Browse the repository at this point in the history 
Fixes/flexicell examples
  • Loading branch information
@samithaf
samithaf authored Nov 24, 2023
2 parents 9e734d9 + 99332bd commit 401af51
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 84 deletions.
54 changes: 22 additions & 32 deletions apps/site/src/content/design-system/components/flexi-cell/code.mdoc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@
<FlexiCell.Hint>avail $9,999.99</FlexiCell.Hint>
</FlexiCell.Adornment>
}
size={{ initial: "default", sm: "large" }}
>
<FlexiCell.Label tag="h3">Credit card</FlexiCell.Label>
<FlexiCell.Hint>Card ending in 1234</FlexiCell.Hint>
Expand All @@ -56,7 +55,6 @@
</FlexiCell.Label>
</FlexiCell.Adornment>
}
size={{ initial: "default", sm: "large" }}
>
<FlexiCell.Label tag="h3">Account</FlexiCell.Label>
<FlexiCell.Hint>032-123 12345678</FlexiCell.Hint>
Expand All @@ -75,13 +73,12 @@
</FlexiCell.Adornment>
}
before={
<FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6" aria-label="Walter White">
<FlexiCell.Circle className="bg-muted text-white" aria-label="Walter White">
WW
</FlexiCell.Circle>
}
tag="a"
href="#"
size={{ initial: "default", sm: "large" }}
>
<FlexiCell.Label tag="h3">With Circle and Info Button</FlexiCell.Label>
<FlexiCell.Hint>Payee Details</FlexiCell.Hint>
Expand All @@ -98,13 +95,12 @@
</FlexiCell.Adornment>
}
before={
<FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6" aria-label="Walter White">
<FlexiCell.Circle className="bg-muted text-white" aria-label="Walter White">
WW
</FlexiCell.Circle>
}
dualAction
href="#"
size={{ initial: "default", sm: "large" }}
>
<FlexiCell.Label tag="h3">With Circle and Info Button</FlexiCell.Label>
<FlexiCell.Hint>Payee Details</FlexiCell.Hint>
Expand All @@ -123,7 +119,7 @@
before={
<FlexiCell.Adornment>
<svg
className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
className="h-4 w-4"
viewBox="0 0 640 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -137,7 +133,6 @@
}
dualAction
href="#"
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label tag="h3">With Flag and Info Button</FlexiCell.Label>
<FlexiCell.Hint>Payee Details</FlexiCell.Hint>
Expand All @@ -151,7 +146,7 @@
before={
<FlexiCell.Adornment>
<svg
className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
className="h-4 w-4"
viewBox="0 0 640 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -166,9 +161,8 @@
withBorder
tag="a"
href="#"
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label className="max-sm:mt-0.5 sm:mt-1" tag="h3">
<FlexiCell.Label tag="h3">
List Item
</FlexiCell.Label>
</FlexiCell>
Expand All @@ -195,7 +189,6 @@
<GiftIcon look="outlined" color="hero" />
</FlexiCell.Adornment>
}
size={{ initial: 'default', sm: 'large' }}
>
<GiftIcon className="sm:hidden" />
<FlexiCell.Label className="text-hero" tag="h4">
Expand All @@ -219,8 +212,7 @@
</FlexiCell.Circle>
</FlexiCell.Adornment>
}
topBadge={props => <Badge {...props}>Corner flag</Badge>}
size={{ initial: 'default', sm: 'large' }}
topBadge={({ className }) => <Badge className={className + " leading-normal"}>Corner flag</Badge>}
>
<FlexiCell.Label className="text-[12px] font-normal text-muted" tag="p">
MYER
Expand Down Expand Up @@ -305,7 +297,6 @@
<FlexiCell.Hint>available $9,999</FlexiCell.Hint>
</FlexiCell.Adornment>
}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label className="font-normal" tag="h4">
{name}
Expand Down Expand Up @@ -387,7 +378,7 @@
href="#"
key={name}
before={
<FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6">
<FlexiCell.Circle className="bg-muted text-white">
{initials}
</FlexiCell.Circle>
}
Expand All @@ -398,7 +389,6 @@
</FlexiCell.Label>
</FlexiCell.Adornment>
}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
<FlexiCell.Hint>{number}</FlexiCell.Hint>
Expand All @@ -409,12 +399,11 @@
dualAction
key={name}
before={
<FlexiCell.Circle className="bg-muted text-white max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6">
<FlexiCell.Circle className="bg-muted text-white">
{initials}
</FlexiCell.Circle>
}
after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
<FlexiCell.Hint>{number}</FlexiCell.Hint>
Expand Down Expand Up @@ -491,7 +480,7 @@
before={
<FlexiCell.Adornment>
<svg
className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
className="h-4 w-4"
viewBox="0 0 640 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -503,9 +492,8 @@
</svg>
</FlexiCell.Adornment>
}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label className="max-sm:mt-0.5 sm:mt-1" tag="span">{name}</FlexiCell.Label>
<FlexiCell.Label tag="span">{name}</FlexiCell.Label>
</FlexiCell>
);
})}
Expand Down Expand Up @@ -592,7 +580,7 @@
before={
<FlexiCell.Adornment>
<svg
className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
className="h-4 w-4"
viewBox="0 0 640 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -611,7 +599,6 @@
</FlexiCell.Label>
</FlexiCell.Adornment>
}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
<FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
Expand All @@ -626,7 +613,7 @@
before={
<FlexiCell.Adornment>
<svg
className="max-sm:h-5 max-sm:w-5 sm:h-6 sm:w-6"
className="h-4 w-4"
viewBox="0 0 640 480"
fill="none"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -639,7 +626,6 @@
</FlexiCell.Adornment>
}
after={<FlexiCell.Button icon={() => <InfoIcon look="outlined" />} />}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label tag="h4">{name}</FlexiCell.Label>
<FlexiCell.Hint className="-mb-1">{number}</FlexiCell.Hint>
Expand Down Expand Up @@ -694,7 +680,6 @@
Corner flag
</Badge>
)}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Label className="text-[12px] font-normal text-muted" tag="p">
MYER
Expand Down Expand Up @@ -747,7 +732,6 @@
Corner flag
</Badge>
)}
size={{ initial: 'default', sm: 'large' }}
>
<FlexiCell.Adornment className="mb-1">
<img
Expand Down Expand Up @@ -794,8 +778,11 @@
<GiftIcon look="outlined" color="hero" />
</FlexiCell.Adornment>
}
after={<WarningIcon look="outlined" color="danger" />}
size={{ initial: 'default', sm: 'large' }}
after={
<Badge className="h-fit w-fit" color="success">
Completed
</Badge>
}
>
<GiftIcon className="sm:hidden" look="outlined" color="hero" />
<FlexiCell.Label className="text-hero" tag="h4">
Expand All @@ -814,8 +801,11 @@
<PadlockIcon look="outlined" color="hero" />
</FlexiCell.Adornment>
}
after={<SuccessIcon look="outlined" color="success" />}
size={{ initial: 'default', sm: 'large' }}
after={
<Badge className="h-fit w-fit" color="success">
Completed
</Badge>
}
>
<PadlockIcon className="sm:hidden" look="outlined" color="hero" />
<FlexiCell.Label className="text-hero" tag="h4">
Expand Down
2 changes: 1 addition & 1 deletion ...ges/ui/src/components/flexi-cell/components/flexi-cell-circle/flexi-cell-circle.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';

export const styles = tv(
{
slots: { base: 'pointer-events-none text-[12px] font-bold text-muted' },
slots: { base: 'pointer-events-none h-4 w-4 text-[12px] font-bold text-muted' },
variants: {},
},
{ responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
Expand Down
Loading

1 comment on commit 401af51

@vercel
Copy link

@vercel vercel bot commented on 401af51 Nov 24, 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-westpacgel.vercel.app
gel-next-site-git-main-westpacgel.vercel.app

Please sign in to comment.