Skip to content

Commit

Permalink
temp: lksjdf
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyranjamie @pete-watters
kyranjamie authored and pete-watters committed Apr 11, 2024
1 parent a4b0b3f commit 9db9a9c
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 76 deletions.
154 changes: 90 additions & 64 deletions src/app/features/approver/approver.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const meta: Meta<typeof Approver> = {
component: Approver,
tags: ['autodocs'],
title: 'Feature/Approver',

render: ({ children, ...args }) => (
<Flex maxW="390px" h="680px" border="1px solid lightgrey" overflowY="auto">
<Approver {...args}>{children}</Approver>
Expand All @@ -25,78 +24,105 @@ export default meta;

type Story = StoryObj<typeof Approver>;

export const ExampleOne: Story = {
args: {
children: (
<>
<Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
<Approver.Status status="pending"></Approver.Status>
function DemoApproverContent() {
return (
<>
{' '}
<Approver.Section>
<Approver.Subheader>
Subheader with icon <ZapIcon variant="small" />
</Approver.Subheader>
<Pressable>
<ItemLayout
img={<Circle size="40px" backgroundColor="ink.border-default" />}
titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
/>
</Pressable>
<Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
<Flag
img={<Circle size="40px" backgroundColor="ink.border-default" />}
align="top"
mb="space.03"
>
<Box width="90%" height="16px" backgroundColor="ink.border-default" />
<Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
</Flag>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Example rich content with avatar</Approver.Subheader>
<ItemLayout
titleLeft="Michelly token"
titleRight="100 MICA"
captionLeft="SIP-10"
captionRight="$894,891"
img={<Circle size="40px" backgroundColor="ink.border-default" />}
/>
</Approver.Section>
<Approver.Advanced>
<Approver.Section>
<Approver.Subheader>
Subheader with icon <ZapIcon variant="small" />
</Approver.Subheader>
<Pressable>
<Approver.Subheader>In the advanced section</Approver.Subheader>
<Pressable onClick={() => {}} mt="space.03" mb="space.03">
<ItemLayout
titleLeft="Pressable"
titleRight="Mr. Clicky"
captionLeft="Interactive item"
captionRight="Click me"
img={<Circle size="40px" backgroundColor="ink.border-default" />}
titleLeft={<Box width="180px" height="14px" backgroundColor="ink.border-default" />}
titleRight={<Box width="50px" height="14px" backgroundColor="ink.border-default" />}
captionLeft={<Box width="70px" height="12px" backgroundColor="ink.border-default" />}
captionRight={<Box width="40px" height="12px" backgroundColor="ink.border-default" />}
/>
</Pressable>
<Approver.Subheader mt="space.05">Subheader 2</Approver.Subheader>
<Flag
img={<Circle size="40px" backgroundColor="ink.border-default" />}
align="top"
mb="space.03"
>
<Box width="90%" height="16px" backgroundColor="ink.border-default" />
<Box width="75%" height="12px" backgroundColor="ink.border-default" mt="space.02" />
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Inputs & Outputs</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Example rich content with avatar</Approver.Subheader>
<ItemLayout
titleLeft="Michelly token"
titleRight="100 MICA"
captionLeft="SIP-10"
captionRight="$894,891"
img={<Circle size="40px" backgroundColor="ink.border-default" />}
/>
<Approver.Subheader>Transaction raw data</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Additional info</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
<Approver.Advanced>
<Approver.Section>
<Approver.Subheader>In the advanced section</Approver.Subheader>
<Pressable onClick={() => {}} mt="space.03" mb="space.03">
<ItemLayout
titleLeft="Pressable"
titleRight="Mr. Clicky"
captionLeft="Interactive item"
captionRight="Click me"
img={<Circle size="40px" backgroundColor="ink.border-default" />}
/>
</Pressable>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Inputs & Outputs</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Transaction raw data</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
<Approver.Section>
<Approver.Subheader>Additional info</Approver.Subheader>
<Flag align="top" img={<Circle size="40px" backgroundColor="ink.border-default" />}>
<Box width="100%" height="20px" backgroundColor="ink.border-default" />
</Flag>
</Approver.Section>
</Approver.Advanced>
</Approver.Advanced>
</>
);
}

export const Pending: Story = {
args: {
children: (
<>
<Approver.Header title="Some prompt that breaks two lines" requester="gamma.io" />
<Approver.Status status="pending"></Approver.Status>
<DemoApproverContent />
<Approver.Actions
actions={
<>
<Button variant="outline">Cancel</Button>
<Button>Approve</Button>
</>
}
/>
</>
),
},
};
export const Completed: Story = {
args: {
children: (
<>
<Approver.Header title="Completed" requester="alexlab.co" />
<Approver.Status status="completed"></Approver.Status>
<DemoApproverContent />
<Approver.Actions
actions={
<>
Expand All @@ -116,7 +142,7 @@ export const ActionsAlignToBottom: Story = {
<>
<Approver.Header
title="Action align to bottom of page"
requester="even when there's no content to push it there"
requester="…… even when there's no content to push it there"
/>

<Approver.Actions
Expand Down
3 changes: 1 addition & 2 deletions src/app/features/approver/components/approver-status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,12 @@ export function ApproverStatus({ status }: ApproverStatusProps) {
<styled.div pos="relative">
<StatusIndicatorLine status={status} />
<styled.div
mt="4px"
textStyle="label.03"
background="ink.background-primary"
px="space.05"
py="space.03"
>
<BulletSeparator spacing="space.01">
<BulletSeparator spacing="space.02">
<styled.span>{capitalize(status)}</styled.span>
<styled.span>{toLocalizedDateFormat(dayjs())}</styled.span>
</BulletSeparator>
Expand Down
20 changes: 10 additions & 10 deletions src/app/ui/animations/loading-striped-gradient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { css } from 'leather-styles/css';
export const loadingStripedGradient = css({
pos: 'relative',
overflow: 'hidden',
content: '""',
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage:
'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)',
animation: 'barberpole 30s linear infinite',
backgroundSize: '193% 100%',
_before: {
content: '""',
position: 'absolute',
width: '500px',
height: '500px',
backgroundImage:
'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)',
animation: 'barberpole 40s linear infinite',
backgroundSize: '193% 100%',
},
});

0 comments on commit 9db9a9c

Please sign in to comment.