Skip to content

Commit 1511289

Browse files
author
Kurt Doherty
authored
feat: add code connect for LabelText, PageHeader and Pagination (#788)
1 parent a42620a commit 1511289

20 files changed

Lines changed: 217 additions & 88 deletions

‎figma.config.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"codeConnect": {
33
"include": [
4-
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,link,menu,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
4+
"src/core/{accordion,avatar,badge,bottom-bar,breadcrumbs,button,button-group,chip,chip-group,chip-select,compact-select-native,dialog,divider,drawer,empty-data,features,filter-bar,folder-tabs,label-text,link,menu,page-header,pagination,primary-tabs,secondary-tabs,select-native,split-button,status-indicator,supplementary-info,tag,tag-group,tooltip}/**/*.{tsx,jsx}"
55
],
66
"importPaths": {
77
"src/core/*": "@reapit/elements/core/*",
@@ -10,6 +10,7 @@
1010
},
1111
"interactiveSetupFigmaFileUrl": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=136-3822",
1212
"label": "React",
13+
"parser": "react",
1314
"documentUrlSubstitutions": {
1415
"<ACCORDION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=14320-99220",
1516
"<AVATAR_CIRCLE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=52-880",
@@ -44,10 +45,17 @@
4445
"<FOLDER_TABS_SM_2XL_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-19347",
4546
"<FOLDER_TABS_XS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15272-53111",
4647
"<FOLDER_TABS_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=15254-63400",
48+
"<LABEL_TEXT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9123-8014",
4749
"<LINK_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=11867-66681",
4850
"<MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3115",
4951
"<MENU_GROUP_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3180",
5052
"<MENU_ITEM_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=9952-3123",
53+
"<PAGE_HEADER_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13442-43769",
54+
"<PAGE_HEADER_LEADING_ELEMENT_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13442-42114",
55+
"<PAGE_HEADER_SUBTITLE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13350-39455",
56+
"<PAGE_HEADER_SUPPLEMENTARY_INFO_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13349-12535",
57+
"<PAGE_HEADER_TITLE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=13350-15766",
58+
"<PAGINATION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=6364-9402",
5159
"<SELECT_NATIVE_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=12404-18248",
5260
"<SPLIT_BUTTON_ACTION_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-9778",
5361
"<SPLIT_BUTTON_MENU_URL>": "https://www.figma.com/design/6CaivqdlTX0UkFYJkpBKDu/Reapit-DS?node-id=2355-10149",

‎src/core/label-text/label-text.figma.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import figma from '@figma/code-connect'
2+
import { LabelText } from './label-text'
3+
4+
figma.connect(LabelText, '<LABEL_TEXT_URL>', {
5+
props: {
6+
children: figma.string('Label text'),
7+
isRequired: figma.boolean('Required'),
8+
size: figma.enum('Size', {
9+
Small: 'small',
10+
Medium: 'medium',
11+
}),
12+
variant: figma.enum('Variant', {
13+
Soft: 'soft',
14+
Strong: 'strong',
15+
}),
16+
},
17+
example: (props) => (
18+
<LabelText isRequired={props.isRequired} size={props.size} variant={props.variant}>
19+
{props.children}
20+
</LabelText>
21+
),
22+
})

‎src/core/label-text/label-text.mdx‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/core/label-text/label-text.stories.tsx‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,29 @@
1-
import { ElLabelText, LabelText } from './index'
1+
import { LabelText } from './label-text'
2+
import type { Meta, StoryObj } from '@storybook/react-vite'
23

3-
export default {
4+
const meta = {
45
title: 'Core/LabelText',
5-
component: ElLabelText,
6-
}
7-
8-
export const BasicUsage = {
9-
render: (args) => (
10-
<>
11-
<LabelText {...args}>I&apos;m a label for a form input or something else</LabelText>
12-
</>
13-
),
6+
component: LabelText,
147
argTypes: {
158
size: {
16-
control: 'select',
17-
description: 'Defines label text render size',
9+
control: 'radio',
1810
options: ['small', 'medium'],
19-
table: {
20-
type: { summary: 'enum' },
21-
defaultValue: { summary: 'small' },
22-
},
2311
},
2412
variant: {
25-
control: 'select',
26-
description: 'Rendering label text with the variant',
13+
control: 'radio',
2714
options: ['soft', 'strong'],
28-
table: {
29-
type: { summary: 'enum' },
30-
defaultValue: { summary: 'soft' },
31-
},
32-
},
33-
isRequired: {
34-
control: 'boolean',
35-
description: 'Rendering Required mark in the end children',
3615
},
3716
},
17+
} satisfies Meta<typeof LabelText>
18+
19+
export default meta
20+
type Story = StoryObj<typeof meta>
21+
22+
export const Example: Story = {
23+
args: {
24+
children: "I'm a label for a form input or something else",
25+
isRequired: false,
26+
size: 'small',
27+
variant: 'soft',
28+
},
3829
}

‎src/core/label-text/label-text.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
import React, { FC, LabelHTMLAttributes } from 'react'
2-
import { ElLabelRequiredMark, ElLabelText } from './styles'
1+
import { ElLabelText } from './styles'
2+
3+
import type { LabelHTMLAttributes } from 'react'
34

45
export namespace LabelText {
56
export interface Props extends LabelHTMLAttributes<HTMLSpanElement> {
6-
variant?: 'soft' | 'strong'
7-
size?: 'small' | 'medium'
7+
/** Whether the required indicator should be displayed. Only applicable when labelling form controls. */
88
isRequired?: boolean
9+
/** The size of the label text. */
10+
size?: 'small' | 'medium'
11+
/** The variant of the label text. */
12+
variant?: 'soft' | 'strong'
913
}
1014
}
1115

1216
/** @deprecated Use LabelText.Props instead */
1317
export type LabelTextProps = LabelText.Props
1418

15-
export const LabelText: FC<LabelText.Props> = ({
16-
children,
17-
isRequired,
18-
size = 'medium',
19-
variant = 'soft',
20-
...rest
21-
}) => {
19+
/**
20+
* Labels give a name to a component or group of components. Pair them with form components like checkboxes
21+
* or inputs to prompt someone to enter certain information, or with plain text to categorise information.
22+
*/
23+
export function LabelText({ children, isRequired, size = 'medium', variant = 'soft', ...rest }: LabelText.Props) {
2224
return (
2325
<ElLabelText {...rest} data-size={size} data-variant={variant}>
2426
{children}
25-
{isRequired && <ElLabelRequiredMark>*</ElLabelRequiredMark>}
27+
{isRequired && ' *'}
2628
</ElLabelText>
2729
)
2830
}

‎src/core/label-text/styles.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,3 @@ export const ElLabelText = styled.span`
1818
color: var(--text-primary);
1919
}
2020
`
21-
export const ElLabelRequiredMark = styled.span`
22-
/* https://github.com/Anber/wyw-in-js/issues/144 */
23-
`

‎src/core/page-header/__tests__/page-header.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ test('renders a header element', () => {
99
})
1010

1111
test('displays breadcrumbs when provided', () => {
12-
render(<PageHeader title="Page title" breadcrumbs={<span>Breadcrumbs</span>} />)
12+
render(<PageHeader title="Page title" navigation={<span>Breadcrumbs</span>} />)
1313
expect(screen.getByText('Breadcrumbs')).toBeVisible()
1414
})
1515

‎src/core/page-header/leading-element/leading-element.figma.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import figma from '@figma/code-connect'
2+
import { PageHeader } from '../page-header'
3+
4+
figma.connect(PageHeader.LeadingElement, '<PAGE_HEADER_LEADING_ELEMENT_URL>', {
5+
props: {
6+
type: figma.enum('Type', {
7+
Image: 'image',
8+
Icon: 'icon',
9+
}),
10+
},
11+
example: (props) => (
12+
<PageHeader.LeadingElement type={props.type}>TODO: Add leading element content</PageHeader.LeadingElement>
13+
),
14+
})

‎src/core/page-header/leading-element/leading-element.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,5 @@ export function PageHeaderLeadingElement({ children, type, ...rest }: PageHeader
2828
</ElPageHeaderLeadingElement>
2929
)
3030
}
31+
32+
PageHeaderLeadingElement.displayName = 'PageHeader.LeadingElement'

‎src/core/page-header/page-header.figma.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import figma from '@figma/code-connect'
2+
import { PageHeader } from './page-header'
3+
4+
figma.connect(PageHeader, '<PAGE_HEADER_URL>', {
5+
props: {
6+
navigation: figma.nestedProps('Navigation', {
7+
children: figma.children('*'),
8+
}),
9+
leadingElement: figma.children('Leading element'),
10+
subtitle: figma.children('Subtitle row'),
11+
supplementaryInfo: figma.children('Line 3'),
12+
title: figma.children('Title row'),
13+
},
14+
example: (props) => (
15+
<PageHeader
16+
leadingElement={props.leadingElement}
17+
navigation={props.navigation.children}
18+
subtitle={props.subtitle}
19+
supplementaryInfo={props.supplementaryInfo}
20+
title={props.title}
21+
/>
22+
),
23+
})

0 commit comments

Comments
 (0)