Skip to content

Commit

Permalink
fixing app.tsx a11y and image scaling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jake-figma
jake-figma committed Jun 21, 2024
1 parent bdc855e commit 9052073
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 73 deletions.
144 changes: 72 additions & 72 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,66 +46,7 @@ function App() {
return (
<AuthenticationProvider>
<Header />
<Section padding={sectionPadding}>
<Flex container type="half" wrap gap={flexGap}>
<Image
src={placeholder}
alt="Always use image alt"
size="large"
aspectRatio="4-3"
/>
<FlexItem size="half">
<Flex direction="column" gap="600" alignSecondary="stretch">
<TextHeading>Text Heading</TextHeading>
<FlexItem>
<Flex direction="column" gap="200">
<Tag variant="secondary" scheme="positive">
Tag
</Tag>
<TextPrice label="/ month" currency="$" price="50" />
</Flex>
</FlexItem>
<Text>Text</Text>
<FlexItem>
<Flex wrap type="half" gap="200">
<SelectField
label="Label"
defaultSelectedKey="Hello World"
placeholder="Select theme..."
>
<SelectItem>item1</SelectItem>
<SelectItem>item2</SelectItem>
<SelectItem>item3</SelectItem>
<SelectItem>item4</SelectItem>
<SelectItem>item5</SelectItem>
</SelectField>
<SelectField
label="Label"
defaultSelectedKey="Hello World"
placeholder="Select theme..."
>
<SelectItem>item1</SelectItem>
<SelectItem>item2</SelectItem>
<SelectItem>item3</SelectItem>
<SelectItem>item4</SelectItem>
<SelectItem>item5</SelectItem>
</SelectField>
</Flex>
</FlexItem>
<Button onPress={() => {}} variant="primary">
Button
</Button>
<Accordion>
<AccordionItem title="Title">
Answer the frequently asked question in a simple sentence, a
longish paragraph, or even in a list.
</AccordionItem>
</Accordion>
</Flex>
</FlexItem>
</Flex>
</Section>
<Section padding={sectionPadding}>
<Section padding={sectionPadding} variant="brand">
<Flex
container
wrap
Expand All @@ -121,8 +62,8 @@ function App() {
subheading="With our daily newsletter"
/>
<Form singleLine>
<Input placeholder="[email protected]" />
<Button onPress={() => {}} variant="primary">
<Input aria-label="Email address" placeholder="[email protected]" />
<Button onPress={() => {}} variant="neutral">
Submit
</Button>
</Form>
Expand Down Expand Up @@ -203,7 +144,7 @@ function App() {
</FlexItem>
</Flex>
</Section>
<Section padding={sectionPadding}>
<Section padding={sectionPadding} variant="neutral">
<Panel alignSecondary="center" gap={flexGap} type="half">
<Image
src={placeholder}
Expand Down Expand Up @@ -233,6 +174,65 @@ function App() {
</FlexItem>
</Panel>
</Section>
<Section padding={sectionPadding}>
<Flex container type="half" wrap gap={flexGap}>
<Image
src={placeholder}
alt="Always use image alt"
size="large"
aspectRatio="4-3"
/>
<FlexItem size="half">
<Flex direction="column" gap="600" alignSecondary="stretch">
<TextHeading>Text Heading</TextHeading>
<FlexItem>
<Flex direction="column" gap="200">
<Tag variant="secondary" scheme="positive">
Tag
</Tag>
<TextPrice label="/ month" currency="$" price="50" />
</Flex>
</FlexItem>
<Text>Text</Text>
<FlexItem>
<Flex wrap type="half" gap="200">
<SelectField
label="Label"
defaultSelectedKey="Hello World"
placeholder="Select theme..."
>
<SelectItem>item1</SelectItem>
<SelectItem>item2</SelectItem>
<SelectItem>item3</SelectItem>
<SelectItem>item4</SelectItem>
<SelectItem>item5</SelectItem>
</SelectField>
<SelectField
label="Label"
defaultSelectedKey="Hello World"
placeholder="Select theme..."
>
<SelectItem>item1</SelectItem>
<SelectItem>item2</SelectItem>
<SelectItem>item3</SelectItem>
<SelectItem>item4</SelectItem>
<SelectItem>item5</SelectItem>
</SelectField>
</Flex>
</FlexItem>
<Button onPress={() => {}} variant="primary">
Button
</Button>
<Accordion>
<AccordionItem title="Title">
Answer the frequently asked question in a simple sentence, a
longish paragraph, or even in a list.
</AccordionItem>
</Accordion>
</Flex>
</FlexItem>
</Flex>
</Section>
<Section padding={sectionPadding} variant="brand">
<Panel type="half" gap={flexGap}>
<Image
Expand Down Expand Up @@ -298,20 +298,20 @@ function App() {
<Search placeholder="Search" />
</Flex>
</FlexItem>
<TagToggleGroup>
<TagToggleGroup
selectionMode="multiple"
aria-label="Search filters"
defaultSelectedKeys={["new"]}
>
<TagToggleList>
<TagToggle
id="New"
textValue="New"
iconStart={<IconCheck />}
>
<TagToggle id="new" iconStart={<IconCheck />}>
New
</TagToggle>
<TagToggle id="Price ascending">Price ascending</TagToggle>
<TagToggle id="Price descending">
<TagToggle id="price-ascending">Price ascending</TagToggle>
<TagToggle id="price-descending">
Price descending
</TagToggle>
<TagToggle id="Rating">Rating</TagToggle>
<TagToggle id="rating">Rating</TagToggle>
</TagToggleList>
</TagToggleGroup>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/images/placeholder.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9052073

Please sign in to comment.