Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add New Icons #2288

Draft
wants to merge 25 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
4be231f
feat: Organizes icons files
renatamottam Mar 20, 2024
8ce60cb
fix: `Info` and `ArrowUpRight` icons
renatamottam Apr 22, 2024
ae104da
feat: add all new icons
renatamottam Apr 22, 2024
9f7d641
feat: Updates `Icon` component to accept new format
renatamottam Apr 22, 2024
0c1e4b1
fix: Add missing icons on the doc list
renatamottam Apr 22, 2024
ffba1c9
doc: Update Icons page on old doc
renatamottam Apr 23, 2024
635aef2
fix: Updates icon naming to use kebab case
renatamottam Apr 24, 2024
6ed52bf
chore: Replace icons props (#2292)
hellofanny Jan 13, 2025
0050f44
feat: change `circle-wavy` to `seal`
renatamottam Jan 15, 2025
be64eb6
test: temporarily disable documentation redirects
renatamottam Jan 15, 2025
5d7f29f
test: temporarily disable documentation redirects
renatamottam Jan 15, 2025
38c6d17
fix: Icons ordering
renatamottam Jan 15, 2025
7c2ed4d
fix: IconItem documentation
renatamottam Jan 15, 2025
4dbf641
feat: add `Social` and `PaymentMethod` icons' sizes
renatamottam Jan 15, 2025
e8a34c4
fix: `PaymentMethod` icon size
renatamottam Jan 15, 2025
d8529a0
fix: Change `pay-method` to `flag` and add new icon flag size
renatamottam Jan 15, 2025
01c8569
fix: Couple Icons sizes after svg update
renatamottam Jan 15, 2025
0ca3825
fix: remove `Tag` icon styles
renatamottam Jan 15, 2025
0b52adb
feat: Adds new icon size
renatamottam Jan 15, 2025
105e27d
fix: EmptyState example
renatamottam Jan 15, 2025
25caf5a
fix: `Gift` icon
renatamottam Jan 15, 2025
f094194
fix: `fs/core` Icon references
renatamottam Jan 15, 2025
839a50c
docs: Reverse `EmptyState` page
renatamottam Jan 15, 2025
8ecd18e
fix: `Select` padding after icon change
renatamottam Jan 15, 2025
1047ad2
fix: `EmptyState` icon size
renatamottam Jan 16, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions apps/site/components/Icon/icon.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@
border-radius: var(--fs-border-radius-medium);
background-color: var(--fs-color-neutral-0);
}
.icon svg {
width: 20px;
height: 20px;
}

.iconList {
display: grid;
Expand Down
32 changes: 16 additions & 16 deletions apps/site/middleware.ts
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import { NextResponse, NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
const { pathname } = new URL(request.url)
if (pathname.startsWith('/docs')) {
return NextResponse.redirect(
`https://developers.vtex.com/docs/guides/faststore${pathname.replace(
'/docs',
''
)}`
)
}
if (pathname.startsWith('/components')) {
return NextResponse.redirect(
`https://developers.vtex.com/docs/guides/faststore${pathname
.replace('/components', '')
.replace(/\/([^\/]*)\//, '/$1-')}`
)
}
// const { pathname } = new URL(request.url)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎗️ TODO: uncomment this part when merging.

// if (pathname.startsWith('/docs')) {
// return NextResponse.redirect(
// `https://developers.vtex.com/docs/guides/faststore${pathname.replace(
// '/docs',
// ''
// )}`
// )
// }
// if (pathname.startsWith('/components')) {
// return NextResponse.redirect(
// `https://developers.vtex.com/docs/guides/faststore${pathname
// .replace('/components', '')
// .replace(/\/([^\/]*)\//, '/$1-')}`
// )
// }
return NextResponse.next()
}
8 changes: 1 addition & 7 deletions apps/site/pages/components/atoms/button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
value="calc(var(--fs-spacing-1) - (var(--fs-button-border-width) * 2)) var(--fs-spacing-3)"
/>
<TokenRow token="--fs-button-height" value="var(--fs-control-tap-size)" />
<TokenRow token="--fs-button-gap" value="var(--fs-spacing-2)" />
<TokenRow token="--fs-button-gap" value="var(--fs-spacing-1)" />
<TokenDivider />
<TokenRow token="--fs-button-shadow" value="var(--fs-shadow)" />
<TokenRow token="--fs-button-shadow-hover" value="var(--fs-button-shadow)" />
Expand Down Expand Up @@ -735,12 +735,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
/>
<TokenRow token="--fs-button-small-min-height" value="var(--fs-spacing-5)" />
<TokenRow token="--fs-button-small-gap" value="var(--fs-spacing-1)" />
<TokenDivider />
<TokenRow token="--fs-button-small-icon-width" value="var(--fs-spacing-3)" />
<TokenRow
token="--fs-button-small-icon-height"
value="var(--fs-button-small-icon-width)"
/>
</TokenTable>

---
Expand Down
7 changes: 1 addition & 6 deletions apps/site/pages/components/atoms/select.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
<TokenRow token="--fs-select-min-height" value="var(--fs-control-tap-size)" />
<TokenRow
token="--fs-select-padding"
value="var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1) var(--fs-spacing-2)"
value="var(--fs-spacing-1) var(--fs-spacing-6) var(--fs-spacing-1) var(--fs-spacing-2)"
/>
<TokenDivider />
<TokenRow
Expand Down Expand Up @@ -206,11 +206,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
token="--fs-select-icon-position-right"
value="var(--fs-spacing-2)"
/>
<TokenRow token="--fs-select-icon-width" value="var(--fs-spacing-3)" />
<TokenRow
token="--fs-select-icon-height"
value="var(--fs-select-icon-width)"
/>
</TokenTable>

### Variants
Expand Down
18 changes: 10 additions & 8 deletions apps/site/pages/components/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -165,14 +165,16 @@ export const imagesUsage = [
]

export const flags = [
{ icon: { icon: 'Visa' }, alt: 'Visa' },
{ icon: { icon: 'Diners' }, alt: 'Diners Club' },
{ icon: { icon: 'Mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'EloCard' }, alt: 'Elo Card' },
{ icon: { icon: 'PayPal' }, alt: 'PayPal' },
{ icon: { icon: 'Stripe' }, alt: 'Stripe' },
{ icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
{ icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
{ icon: { icon: 'fs-flag-amex' }, alt: 'Amex' },
{ icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' },
{ icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' },
{ icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' },
{ icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' },
{ icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' },
{ icon: { icon: 'fs-flag-pix' }, alt: 'Pix' },
{ icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' },
{ icon: { icon: 'fs-flag-visa' }, alt: 'Visa' },
]

export const options = [
Expand Down
2 changes: 0 additions & 2 deletions apps/site/pages/components/molecules/alert.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,6 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
#### Icon

<TokenTable>
<TokenRow token="--fs-alert-icon-width" value="var(--fs-spacing-4)" />
<TokenRow token="--fs-alert-icon-height" value="var(--fs-alert-icon-width)" />
<TokenRow token="--fs-alert-icon-margin-right" value="var(--fs-spacing-1)" />
<TokenRow
token="--fs-alert-icon-color"
Expand Down
3 changes: 1 addition & 2 deletions apps/site/pages/components/molecules/gift.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -334,8 +334,7 @@ Besides those attributes, the following props are also supported:
#### Icon

<TokenTable>
<TokenRow token="--fs-gift-icon-size" value="1.75rem" />
<TokenRow token="--fs-gift-icon-padding" value="var(--fs-spacing-0)" />
<TokenRow token="--fs-gift-icon-size" value="1.875rem" />
<TokenRow
token="--fs-gift-icon-color"
value="var(--fs-gift-title-color)"
Expand Down
40 changes: 20 additions & 20 deletions apps/site/pages/components/organisms/payment-methods.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
<Tab>
```tsx
export const flags = [
{ icon: { icon: 'Amex' }, alt: 'Amex' },
{ icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
{ icon: { icon: 'EloCard' }, alt: 'Elo Card' },
{ icon: { icon: 'Diners' }, alt: 'Diners Club' },
{ icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
{ icon: { icon: 'Mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'PayPal' }, alt: 'PayPal' },
{ icon: { icon: 'Pix' }, alt: 'Pix' },
{ icon: { icon: 'Stripe' }, alt: 'Stripe' },
{ icon: { icon: 'Visa' }, alt: 'Visa' },
{ icon: { icon: 'fs-flag-amex' }, alt: 'Amex' },
{ icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' },
{ icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' },
{ icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' },
{ icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' },
{ icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' },
{ icon: { icon: 'fs-flag-pix' }, alt: 'Pix' },
{ icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' },
{ icon: { icon: 'fs-flag-visa' }, alt: 'Visa' },
]

<PaymentMethods title={<h3>Payment Methods</h3>} flagList={flags} />
Expand All @@ -103,16 +103,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
</Tabs>

export const flags = [
{ icon: { icon: 'Amex' }, alt: 'Amex' },
{ icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
{ icon: { icon: 'EloCard' }, alt: 'Elo Card' },
{ icon: { icon: 'Diners' }, alt: 'Diners Club' },
{ icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
{ icon: { icon: 'Mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'PayPal' }, alt: 'PayPal' },
{ icon: { icon: 'Pix' }, alt: 'Pix' },
{ icon: { icon: 'Stripe' }, alt: 'Stripe' },
{ icon: { icon: 'Visa' }, alt: 'Visa' },
{ icon: { icon: 'fs-flag-amex' }, alt: 'Amex' },
{ icon: { icon: 'fs-flag-applepay' }, alt: 'ApplePay' },
{ icon: { icon: 'fs-flag-elocard' }, alt: 'Elo Card' },
{ icon: { icon: 'fs-flag-diners' }, alt: 'Diners Club' },
{ icon: { icon: 'fs-flag-googlepay' }, alt: 'GooglePay' },
{ icon: { icon: 'fs-flag-mastercard' }, alt: 'Mastercard' },
{ icon: { icon: 'fs-flag-paypal' }, alt: 'PayPal' },
{ icon: { icon: 'fs-flag-pix' }, alt: 'Pix' },
{ icon: { icon: 'fs-flag-stripe' }, alt: 'Stripe' },
{ icon: { icon: 'fs-flag-visa' }, alt: 'Visa' },
]

---
Expand Down
139 changes: 70 additions & 69 deletions apps/site/pages/docs/icons.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,98 +27,99 @@ You can find more details about the `Icon` component [here](/components/atoms/ic
## Usage

<OverviewSection>
<Icon name="X" weight="bold" />
<Icon name="MagnifyingGlass" weight="regular" />
<Icon name="House" weight="thin" />
<Icon name="fs-house" size="20" />
<Icon name="fs-house" size="24" />
<Icon name="fs-house" size="32" />
<Icon name="fs-house" size="56" />
</OverviewSection>

```tsx copy
<Icon name="X" weight="bold" />
<Icon name="MagnifyingGlass" weight="regular" />
<Icon name="House" weight="thin" />
```

<OverviewSection>
<Icon name="X" weight="bold" width={16} height={16} />
<Icon name="MagnifyingGlass" weight="regular" width={20} height={20} />
<Icon name="House" weight="thin" width={32} height={32} />
</OverviewSection>

```tsx copy
<Icon name="X" weight="bold" width={16} height={16} />
<Icon name="MagnifyingGlass" weight="regular" width={20} height={20} />
<Icon name="House" weight="thin" width={32} height={32} />
<Icon name="fs-house" size="20" />
<Icon name="fs-house" size="24" />
<Icon name="fs-house" size="32" />
<Icon name="fs-house" size="56" />
```

---

### UI Actions

<IconList>
<IconComponent icon={<Icon name="X" />} name="X" />
<IconComponent icon={<Icon name="Plus" />} name="Plus" />
<IconComponent icon={<Icon name="PlusCircle" />} name="PlusCircle" />
<IconComponent icon={<Icon name="Minus" />} name="Minus" />
<IconComponent icon={<Icon name="MinusCircle" />} name="MinusCircle" />
<IconComponent icon={<Icon name="XCircle" />} name="XCircle" />
<IconComponent icon={<Icon name="ArrowLeft" />} name="ArrowLeft" />
<IconComponent icon={<Icon name="ArrowRight" />} name="ArrowRight" />
<IconComponent
icon={<Icon name="ArrowElbowDownRight" />}
name="ArrowElbowDownRight"
/>
<IconComponent icon={<Icon name="CaretDown" />} name="CaretDown" />
<IconComponent icon={<Icon name="CaretRight" />} name="CaretRight" />
<IconComponent icon={<Icon name="CaretLeft" />} name="CaretLeft" />
<IconComponent icon={<Icon name="CaretUp" />} name="CaretUp" />
<IconComponent icon={<Icon name="Checked" />} name="Checked" />
<IconComponent
icon={<Icon name="MagnifyingGlass" />}
name="MagnifyingGlass"
/>
<IconComponent
icon={<Icon name="FadersHorizontal" />}
name="FadersHorizontal"
/>
<IconComponent icon={<Icon name="fs-x" />} name="fs-x" />
<IconComponent icon={<Icon name="fs-plus" />} name="fs-plus" />
<IconComponent icon={<Icon name="fs-plus-circle" />} name="fs-plus-circle" />
<IconComponent icon={<Icon name="fs-minus" />} name="fs-minus" />
<IconComponent icon={<Icon name="fs-minus-circle" />} name="fs-minus-circle" />
<IconComponent icon={<Icon name="fs-x-circle" />} name="fs-x-circle" />
<IconComponent icon={<Icon name="fs-arrow-left" />} name="fs-arrow-left" />
<IconComponent icon={<Icon name="fs-arrow-right" />} name="fs-arrow-right" />
<IconComponent icon={<Icon name="fs-arrow-elbow-down-right" />} name="fs-arrow-elbow-down-right" />
<IconComponent icon={<Icon name="fs-caret-down" />} name="fs-caret-down" />
<IconComponent icon={<Icon name="fs-caret-right" />} name="fs-caret-right" />
<IconComponent icon={<Icon name="fs-caret-left" />} name="fs-caret-left" />
<IconComponent icon={<Icon name="fs-caret-up" />} name="fs-caret-up" />
<IconComponent icon={<Icon name="fs-checked" />} name="fs-checked" />
<IconComponent icon={<Icon name="fs-magnifying-glass" />} name="fs-magnifying-glass" />
<IconComponent icon={<Icon name="fs-faders-horizontal" />} name="fs-faders-horizontal" />
</IconList>

### Payment Flags

<IconList>
<IconComponent icon={<Icon name="Amex" />} name="Amex" />
<IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
<IconComponent icon={<Icon name="EloCard" />} name="EloCard" />
<IconComponent icon={<Icon name="Diners" />} name="Diners" />
<IconComponent icon={<Icon name="GooglePay" />} name="GooglePay" />
<IconComponent icon={<Icon name="Mastercard" />} name="Mastercard" />
<IconComponent icon={<Icon name="PayPal" />} name="PayPal" />
<IconComponent icon={<Icon name="Pix" />} name="Pix" />
<IconComponent icon={<Icon name="Stripe" />} name="Stripe" />
<IconComponent icon={<Icon name="Visa" />} name="Visa" />
<IconComponent icon={<Icon name="fs-flag-amex" />} name="fs-flag-amex" />
<IconComponent icon={<Icon name="fs-flag-applepay" />} name="fs-flag-applepay" />
<IconComponent icon={<Icon name="fs-flag-elocard" />} name="fs-flag-elocard" />
<IconComponent icon={<Icon name="fs-flag-diners" />} name="fs-flag-diners" />
<IconComponent icon={<Icon name="fs-flag-googlepay" />} name="fs-flag-googlepay" />
<IconComponent icon={<Icon name="fs-flag-mastercard" />} name="fs-flag-mastercard" />
<IconComponent icon={<Icon name="fs-flag-paypal" />} name="fs-flag-paypal" />
<IconComponent icon={<Icon name="fs-flag-pix" />} name="fs-flag-pix" />
<IconComponent icon={<Icon name="fs-flag-stripe" />} name="fs-flag-stripe" />
<IconComponent icon={<Icon name="fs-flag-visa" />} name="fs-flag-visa" />
</IconList>

### Social

<IconList>
<IconComponent icon={<Icon name="Facebook" />} name="Facebook" />
<IconComponent icon={<Icon name="Instagram" />} name="Instagram" />
<IconComponent icon={<Icon name="Twitter" />} name="Twitter" />
<IconComponent icon={<Icon name="Pinterest" />} name="Pinterest" />
<IconComponent icon={<Icon name="fs-social-facebook" />} name="fs-social-facebook" />
<IconComponent icon={<Icon name="fs-social-instagram" />} name="fs-social-instagram" />
<IconComponent icon={<Icon name="fs-social-pinterest" />} name="fs-social-pinterest" />
<IconComponent icon={<Icon name="fs-social-twitter" />} name="fs-social-twitter" />
</IconList>

### Others

<IconList>
<IconComponent icon={<Icon name="House" />} name="House" />
<IconComponent icon={<Icon name="Star" />} name="Star" />
<IconComponent icon={<Icon name="Heart" />} name="Heart" />
<IconComponent icon={<Icon name="DotsThree" />} name="DotsThree" />
<IconComponent icon={<Icon name="Ruler" />} name="Ruler" />
<IconComponent icon={<Icon name="ShoppingCart" />} name="ShoppingCart" />
<IconComponent icon={<Icon name="Tag" />} name="Tag" />
<IconComponent icon={<Icon name="BellRinging" />} name="BellRinging" />
<IconComponent icon={<Icon name="Bell" />} name="Bell" />
<IconComponent icon={<Icon name="MapPin" />} name="MapPin" />
<IconComponent icon={<Icon name="ArrowSquareOut" />} name="ArrowSquareOut" />
<IconComponent icon={<Icon name="Envelope" />} name="Envelope" />
<IconComponent icon={<Icon name="fs-house" />} name="fs-house" />
<IconComponent icon={<Icon name="fs-star" />} name="fs-star" />
<IconComponent icon={<Icon name="fs-heart" />} name="fs-heart" />
<IconComponent icon={<Icon name="fs-dots-three" />} name="fs-dots-three" />
<IconComponent icon={<Icon name="fs-ruler" />} name="fs-ruler" />
<IconComponent icon={<Icon name="fs-shopping-cart" />} name="fs-shopping-cart" />
<IconComponent icon={<Icon name="fs-tag" />} name="fs-tag" />
<IconComponent icon={<Icon name="fs-bell-ringing" />} name="fs-bell-ringing" />
<IconComponent icon={<Icon name="fs-bell" />} name="fs-bell" />
<IconComponent icon={<Icon name="fs-map-pin" />} name="fs-map-pin" />
<IconComponent icon={<Icon name="fs-arrow-square-out" />} name="fs-arrow-square-out" />
<IconComponent icon={<Icon name="fs-envelop" />} name="fs-envelop" />
<IconComponent icon={<Icon name="fs-arrows-clockwise" />} name="fs-arrows-clockwise" />
<IconComponent icon={<Icon name="fs-arrow-up-right" />} name="fs-arrow-up-right" />
<IconComponent icon={<Icon name="fs-bag" />} name="fs-bag" />
<IconComponent icon={<Icon name="fs-calendar" />} name="fs-calendar" />
<IconComponent icon={<Icon name="fs-seal-check" />} name="fs-seal-check" />
<IconComponent icon={<Icon name="fs-seal-warning" />} name="fs-seal-warning" />
<IconComponent icon={<Icon name="fs-clock-clockwise" />} name="fs-clock-clockwise" />
<IconComponent icon={<Icon name="fs-ellipsis" />} name="fs-ellipsis" />
<IconComponent icon={<Icon name="fs-gift" />} name="fs-gift" />
<IconComponent icon={<Icon name="fs-headphones" />} name="fs-headphones" />
<IconComponent icon={<Icon name="fs-info" />} name="fs-info" />
<IconComponent icon={<Icon name="fs-list" />} name="fs-list" />
<IconComponent icon={<Icon name="fs-medal" />} name="fs-medal" />
<IconComponent icon={<Icon name="fs-rocket-launch" />} name="fs-rocket-launch" />
<IconComponent icon={<Icon name="fs-seal-check" />} name="fs-seal-check" />
<IconComponent icon={<Icon name="fs-seal-warning" />} name="fs-seal-warning" />
<IconComponent icon={<Icon name="fs-shield-check" />} name="fs-shield-check" />
<IconComponent icon={<Icon name="fs-storefront" />} name="fs-storefront" />
<IconComponent icon={<Icon name="fs-truck" />} name="fs-truck" />
<IconComponent icon={<Icon name="fs-user" />} name="fs-user" />
</IconList>
Loading
Loading