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.

Sign up for GitHub

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: Design System Unification #2120

Closed
wants to merge 61 commits into from
Closed

Feat: Design System Unification #2120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
61 commits
Select commit Hold shift + click to select a range
67a24c8
feat: Add new font weights
renatamottam Sep 27, 2023
f249ae2
feat: Adds new typography scale
renatamottam Sep 28, 2023
ef6d0e5
feat: Add `Inter` as proposed font family
renatamottam Sep 28, 2023
c1a6ca4
chore: Organizes icons files
renatamottam Oct 2, 2023
c71b814
fix: Updates payment methods icons
renatamottam Oct 2, 2023
083e0bd
fix: Updates payment methods icons order
renatamottam Oct 2, 2023
4628bfb
fix: Adds new payment methods icons
renatamottam Oct 2, 2023
2ee7390
fix: removes extra empty line
renatamottam Nov 21, 2023
03a007e
fix: Payment Methods sizing
renatamottam Nov 21, 2023
97036ef
feat: Creates new theme for VTEX Way
renatamottam Mar 15, 2024
bfbfd8a
fix: `InputField` label position
renatamottam Mar 19, 2024
e22425a
fix: `ProductCard` OutOfStock styles
renatamottam Mar 19, 2024
dfbce00
fix: Removes new theme
renatamottam Mar 19, 2024
647d2a9
fix: `RegionModal` input margin
renatamottam Mar 20, 2024
0d54825
feat: Improve `OrderSummary` to use row gap
renatamottam Mar 20, 2024
afc78ca
fix: `InputField` button
renatamottam Apr 26, 2024
f491a14
Triggers deploy
renatamottam Jul 4, 2024
7f36fe6
Refresh cookie on search (#2369)
gvc Jul 5, 2024
934c6a2
[no ci] Release: 3.0.78
Jul 5, 2024
0175d5e
Export commands from index.ts to plug into other CLIs (#2371)
gvc Jul 5, 2024
e110a03
[no ci] Release: 3.0.79
Jul 5, 2024
cb3b1fd
Refactor @faststore/cli directory.ts to enable it to receive a basepa…
gvc Jul 5, 2024
a3f57ed
[no ci] Release: 3.0.80
Jul 5, 2024
730d43c
Fix: QuantitySelector validation when min/max quantity (#2362)
rayssamfreitas Jul 5, 2024
2187237
[no ci] Release: 3.0.81
Jul 5, 2024
96f6f53
Add `path` arg to all commands (#2372)
gvc Jul 11, 2024
1fad72c
[no ci] Release: 3.0.82
Jul 11, 2024
a0f774a
feat(cli): add support for the `init` command (#2373)
vaporwavie Jul 11, 2024
8d76597
[no ci] Release: 3.0.83
Jul 11, 2024
32d0f6f
fix: Pass Through PLP URL Params (#2355)
batzlerg Jul 16, 2024
15b588a
[no ci] Release: 3.0.84
Jul 16, 2024
9a84cda
chore: update OrderSummary and ProductCard props description (#2383)
mariana-caetano Jul 17, 2024
486b94c
[no ci] Release: 3.0.85
Jul 17, 2024
fec20df
Rename vtex search cookie to keep it uniform (#2378)
chrsmutti Jul 17, 2024
440dd15
[no ci] Release: 3.0.86
Jul 17, 2024
e95b7e7
Invert direction of dependency between @faststore/core and @faststore…
gvc Jul 18, 2024
a064f7d
[no ci] Release: 3.0.87
Jul 18, 2024
f6bb701
feat: Change order of sku selector (#2374)
lucvysk Jul 19, 2024
e25f887
feat(cli, core): remove yarn lock-in, adds `ni` (#2376)
vaporwavie Jul 19, 2024
218fb71
fix: Sku variants sort (#2389)
lucasfp13 Jul 19, 2024
31a958b
[no ci] Release: 3.0.88
Jul 19, 2024
a08c0f2
feat: Adds missing bkg color on `PaymentMethod` flag
renatamottam Jul 22, 2024
bb6e435
feat: Add new font weights
renatamottam Sep 27, 2023
fb0adb3
feat: Adds new typography scale
renatamottam Sep 28, 2023
de48a88
feat: Add `Inter` as proposed font family
renatamottam Sep 28, 2023
e84c4d4
chore: Organizes icons files
renatamottam Oct 2, 2023
d463282
fix: Updates payment methods icons
renatamottam Oct 2, 2023
41ea428
fix: Updates payment methods icons order
renatamottam Oct 2, 2023
ea95d21
fix: Adds new payment methods icons
renatamottam Oct 2, 2023
b10668b
fix: removes extra empty line
renatamottam Nov 21, 2023
e611a55
fix: Payment Methods sizing
renatamottam Nov 21, 2023
b8317a8
feat: Creates new theme for VTEX Way
renatamottam Mar 15, 2024
ed78d3b
fix: `InputField` label position
renatamottam Mar 19, 2024
3a6b829
fix: `ProductCard` OutOfStock styles
renatamottam Mar 19, 2024
426d4f0
fix: Removes new theme
renatamottam Mar 19, 2024
01dd2a0
fix: `RegionModal` input margin
renatamottam Mar 20, 2024
6c0c559
feat: Improve `OrderSummary` to use row gap
renatamottam Mar 20, 2024
c04beb7
fix: `InputField` button
renatamottam Apr 26, 2024
c36adea
Triggers deploy
renatamottam Jul 4, 2024
516fd38
feat: Adds missing bkg color on `PaymentMethod` flag
renatamottam Jul 22, 2024
fb3704f
Merge branch 'feat/design-system-unification' of https://github.com/v…
renatamottam Jul 24, 2024
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
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@ storybook-static/
node_modules/
jspm_packages/

!packages/cli/src/__mocks__/**/node_modules

# Optional npm cache directory
.npm

Expand Down
10 changes: 5 additions & 5 deletions apps/site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "site",
"version": "3.0.77",
"version": "3.0.88",
"author": "Emerson Laurentino @emersonlaurentino",
"license": "MIT",
"private": true,
Expand All @@ -10,9 +10,9 @@
"start": "next start"
},
"dependencies": {
"@faststore/api": "^3.0.76",
"@faststore/sdk": "^3.0.68",
"@faststore/ui": "^3.0.77",
"@faststore/api": "^3.0.88",
"@faststore/sdk": "^3.0.88",
"@faststore/ui": "^3.0.88",
"next": "13.0.7",
"nextra": "^2.8.0",
"nextra-theme-docs": "^2.8.0",
Expand All @@ -21,7 +21,7 @@
"sass": "^1.57.1"
},
"devDependencies": {
"@faststore/eslint-config": "^3.0.68",
"@faststore/eslint-config": "^3.0.88",
"@types/node": "^18.11.16",
"eslint": "7.32.0",
"react-docgen-typescript": "^2.2.2",
Expand Down
12 changes: 9 additions & 3 deletions apps/site/pages/components/molecules/input-field.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,19 @@ export const propsInputField = [
#### Label

<TokenTable>
<TokenRow token="--fs-input-label-padding" value="0 var(--fs-spacing-2)" />
<TokenRow token="--fs-input-field-label-padding" value="0 var(--fs-spacing-2)" />
Copy link
Contributor

Choose a reason for hiding this comment

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

todo: We'll have to update in developer portal doc

Copy link
Contributor

Choose a reason for hiding this comment

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

@renatamottam since we migrate all the docs to portal, we'll need to apply all the changes made on this PR there.

cc: @mariana-caetano

<TokenRow
token="--fs-input-label-color"
token="--fs-input-field-label-color"
value="var(--fs-color-text-light)"
isColor
/>
<TokenRow token="--fs-input-label-size" value="var(--fs-text-size-tiny)" />
<TokenRow token="--fs-input-field-label-size" value="var(--fs-text-size-tiny)" />
</TokenTable>

#### Button

<TokenTable>
<TokenRow token="--fs-input-field-button-height" value="var(--fs-control-tap-size)" />
</TokenTable>

### Variants
Expand Down
4 changes: 4 additions & 0 deletions apps/site/pages/components/molecules/order-summary.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,10 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
token="--fs-order-summary-margin-bottom"
value="var(--fs-spacing-2)"
/>
<TokenRow
token="--fs-order-summary-row-gap"
value="0"
/>
<TokenDivider />
<TokenRow
token="--fs-order-summary-discount-text-color"
Expand Down
5 changes: 5 additions & 0 deletions apps/site/pages/components/molecules/product-card.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,11 @@ export const outOfStock =
value="var(--fs-color-disabled-bkg)"
isColor
/>
<TokenRow
token="--fs-product-card-out-of-stock-border-color"
value="var(--fs-color-neutral-1)"
isColor
/>
<TokenRow token="--fs-product-card-out-of-stock-img-opacity" value=".5" />
</TokenTable>

Expand Down
2 changes: 1 addition & 1 deletion apps/site/pages/components/molecules/toast.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ export const propsToast = [
token="--fs-toast-title-weight"
value="var(--fs-text-weight-bold)"
/>
<TokenRow token="--fs-toast-title-line-height" value="var(--fs-scale)" />
<TokenRow token="--fs-toast-title-line-height" value="1.2" />
<TokenRow token="--fs-toast-title-margin-left" value="var(--fs-spacing-3)" />
</TokenTable>

Expand Down
25 changes: 17 additions & 8 deletions apps/site/pages/components/organisms/payment-methods.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,16 @@ Follow the instructions in the [Importing FastStore UI component styles](/docs/c
<Tab>
```tsx
export const flags = [
{ icon: { icon: 'Visa' }, alt: 'Visa' },
{ 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: 'EloCard' }, alt: 'Elo Card' },
{ icon: { icon: 'PayPal' }, alt: 'PayPal' },
{ icon: { icon: 'Pix' }, alt: 'Pix' },
{ icon: { icon: 'Stripe' }, alt: 'Stripe' },
{ icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
{ icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
{ icon: { icon: 'Visa' }, alt: 'Visa' },
]

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

export const flags = [
{ icon: { icon: 'Visa' }, alt: 'Visa' },
{ 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: 'EloCard' }, alt: 'Elo Card' },
{ icon: { icon: 'PayPal' }, alt: 'PayPal' },
{ icon: { icon: 'Pix' }, alt: 'Pix' },
{ icon: { icon: 'Stripe' }, alt: 'Stripe' },
{ icon: { icon: 'GooglePay' }, alt: 'GooglePay' },
{ icon: { icon: 'ApplePay' }, alt: 'ApplePay' },
{ icon: { icon: 'Visa' }, alt: 'Visa' },
]

---
Expand Down Expand Up @@ -177,6 +181,11 @@ export const propsFlag = [
token="--fs-payment-methods-flag-height"
value="var(--fs-spacing-4)"
/>
<TokenRow
token="--fs-payment-methods-flag-bkg-color"
value="var(--fs-color-neutral-0)"
isColor
/>
<TokenRow
token="--fs-payment-methods-flag-border-width"
value="var(--fs-border-width)"
Expand Down
74 changes: 32 additions & 42 deletions apps/site/pages/docs/global-tokens/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ A standard scale and basic definitions for your text: `font family`,`weight` and
<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-weight-light" value="300" />
<TokenRow token="--fs-text-weight-regular" value="400" />
<TokenRow token="--fs-text-weight-medium" value="500" />
<TokenRow token="--fs-text-weight-semibold" value="600" />
<TokenRow token="--fs-text-weight-bold" value="700" />
<TokenRow token="--fs-text-weight-black" value="900" />
</TokenTable>
Expand All @@ -45,41 +47,25 @@ export const desktopList = [
{ size: 14, token: 'var(--fs-text-size-1)' },
{ size: 16, token: 'var(--fs-text-size-2)' },
{ size: 20, token: 'var(--fs-text-size-3)' },
{ size: 25, token: 'var(--fs-text-size-4)' },
{ size: 31, token: 'var(--fs-text-size-5)' },
{ size: 39, token: 'var(--fs-text-size-6)' },
{ size: 48, token: 'var(--fs-text-size-7)' },
{ size: 61, token: 'var(--fs-text-size-8)' },
{ size: 24, token: 'var(--fs-text-size-4)' },
{ size: 28, token: 'var(--fs-text-size-5)' },
{ size: 32, token: 'var(--fs-text-size-6)' },
{ size: 40, token: 'var(--fs-text-size-7)' },
{ size: 48, token: 'var(--fs-text-size-8)' },
{ size: 56, token: 'var(--fs-text-size-9)' },
]

export const mobileList = [
{ size: 12, token: 'var(--fs-text-size-0)' },
{ size: 14, token: 'var(--fs-text-size-1)' },
{ size: 16, token: 'var(--fs-text-size-2)' },
{
size: 18,
token: 'var(--fs-text-size-3)',
},
{
size: 20,
token: 'var(--fs-text-size-4)',
},
{
size: 23,
token: 'var(--fs-text-size-5)',
},
{
size: 26,
token: 'var(--fs-text-size-6)',
},
{
size: 29,
token: 'var(--fs-text-size-7)',
},
{
size: 33,
token: 'var(--fs-text-size-8)',
},
{ size: 18, token: 'var(--fs-text-size-3)' },
{ size: 20, token: 'var(--fs-text-size-4)' },
{ size: 22, token: 'var(--fs-text-size-5)' },
{ size: 24, token: 'var(--fs-text-size-6)' },
{ size: 28, token: 'var(--fs-text-size-7)' },
{ size: 32, token: 'var(--fs-text-size-8)' },
{ size: 36, token: 'var(--fs-text-size-9)' },
]

### Mobile Scale
Expand All @@ -92,35 +78,39 @@ export const mobileList = [

<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-size-base" value="16px" />
<TokenRow token="--fs-text-scale-desktop" value="1.25" />
<TokenRow token="--fs-text-scale-mobile" value="1.13" />
<TokenRow token="--fs-text-scale-desktop" value="4px" />
<TokenRow token="--fs-text-scale-mobile" value="2px" />
<TokenDivider />
<TokenRow token="--fs-text-size-0" value="12px" />
<TokenRow token="--fs-text-size-1" value="14px" />
<TokenRow token="--fs-text-size-2" value="var(--fs-text-size-base)" />
<TokenRow
token="--fs-text-size-3"
value="calc(var(--fs-text-size-2) * var(--fs-scale))"
value="calc(var(--fs-text-size-2) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-4"
value="calc(var(--fs-text-size-3) * var(--fs-scale))"
value="calc(var(--fs-text-size-3) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-5"
value="calc(var(--fs-text-size-4) * var(--fs-scale))"
value="calc(var(--fs-text-size-4) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-6"
value="calc(var(--fs-text-size-5) * var(--fs-scale))"
value="calc(var(--fs-text-size-5) + var(--fs-scale))"
/>
<TokenRow
token="--fs-text-size-7"
value="calc(var(--fs-text-size-6) * var(--fs-scale))"
value="calc(var(--fs-text-size-6) + (var(--fs-scale) * 2))"
/>
<TokenRow
token="--fs-text-size-8"
value="calc(var(--fs-text-size-7) * var(--fs-scale))"
value="calc(var(--fs-text-size-7) + (var(--fs-scale) * 2))"
/>
<TokenRow
token="--fs-text-size-9"
value="calc(var(--fs-text-size-8) + (var(--fs-scale) * 2))"
/>
</TokenTable>

Expand All @@ -131,8 +121,8 @@ export const mobileList = [
### Sizes

<TokenTable title="Global Token" description="Value">
<TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-7)" />
<TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-6)" />
<TokenRow token="--fs-text-size-title-huge" value="var(--fs-text-size-8)" />
<TokenRow token="--fs-text-size-title-page" value="var(--fs-text-size-7)" />
<TokenRow
token="--fs-text-size-title-product"
value="var(--fs-text-size-4)"
Expand Down Expand Up @@ -164,7 +154,7 @@ export const mobileList = [

## Adding a custom font

Using a custom font helps to keep a cohesive brand across your store.
Using a custom font helps to keep a cohesive brand across your store.
To maintain readability in your store, choose an easily readable font and the appropriate color and text size.
Follow the steps below to add a custom font to your store.

Expand All @@ -180,7 +170,7 @@ function WebFonts() {
{/* Add a <link> tag for your font-family of choice */}
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap"
/>
</>
);
Expand All @@ -202,7 +192,7 @@ export default WebFonts;
// --------------------------------------------------------
// Typography (Branding Core)
// --------------------------------------------------------
--fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
--fs-text-face-body: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
}
}
```
Expand Down
10 changes: 6 additions & 4 deletions apps/site/pages/docs/icons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,16 @@ You can find more details about the `Icon` component [here](/components/atoms/ic
### Payment Flags

<IconList>
<IconComponent icon={<Icon name="Visa" />} name="Visa" />
<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="EloCard" />} name="EloCard" />
<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="GooglePay" />} name="GooglePay" />
<IconComponent icon={<Icon name="ApplePay" />} name="ApplePay" />
<IconComponent icon={<Icon name="Visa" />} name="Visa" />
</IconList>

### Social
Expand Down
Loading
Loading