Merge branch 'main' into feat/theming-slide-over-fsss-385

vtex-sites · Jul 11, 2022 · 06edf68 · 06edf68
2 parents c3dfdc5 + 14863c0
commit 06edf68
Show file tree

Hide file tree

Showing 24 changed files with 523 additions and 629 deletions.
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
@@ -309,7 +309,8 @@ h3.sbdocs.sbdocs-h3 {
   display: inline-flex;
   align-items: center;
   padding: var(--fs-spacing-2);
-  margin-top: var(--fs-spacing-4);
+  margin-top: var(--fs-spacing-3);
+  margin-bottom: var(--fs-spacing-1);
   line-height: 1.7;
   background-color: var(--fs-color-neutral-1);
   border-radius: var(--fs-border-radius);

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,14 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Applies new local tokens to `SlideOver` ([#142](https://github.com/vtex-sites/nextjs.store/pull/142))
-- Applies new local tokens to `CartSidebar` ([#142](https://github.com/vtex-sites/nextjs.store/pull/142))
-- Uses new cross selling API on PDP ([#159](https://github.com/vtex-sites/nextjs.store/pull/159))
+- Global tokens doc page on storybook ([#140](https://github.com/vtex-sites/gatsby.store/pull/140))
+- Uses new cross selling API on PDP ([#137](https://github.com/vtex-sites/gatsby.store/pull/137))
 - Applies new local tokens to `SuggestionProductCard` ([#135](https://github.com/vtex-sites/gatsby.store/pull/135))
 - Applies new local tokens to `Navbar` ([#132](https://github.com/vtex-sites/gatsby.store/pull/132))
 
 ### Changed
 
+- Updated Getting Started doc page and overall improvements ([#140](https://github.com/vtex-sites/gatsby.store/pull/140))
+
 ### Deprecated
 
 ### Removed

diff --git a/src/components/cart/CartItem/CartItem.stories.mdx b/src/components/cart/CartItem/CartItem.stories.mdx
@@ -22,9 +22,9 @@ import {
 
 <header>
 
-# CartItem
+# Cart Item
 
-CartItems are used to present the summarized information of a product inside the Cart.
+Cart Items are used to present the summarized information of a product inside the Cart.
 
 </header>
 

diff --git a/src/components/product/ProductCard/ProductCard.stories.tsx b/src/components/product/ProductCard/ProductCard.stories.tsx
@@ -9,7 +9,7 @@ import ProductCard from '.'
 
 export default {
   component: ProductCard,
-  title: 'Molecules/ProductCard',
+  title: 'Molecules/ProductCard ⚠️',
   argTypes: {
     variant: {
       defaultValue: 'default',

diff --git a/...omponents/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx b/...omponents/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx
@@ -50,7 +50,7 @@ export const RegionalizationModalContentTemplate = (args) => {
 
 <header>
 
-# RegionalizationModal
+# Regionalization Modal
 
 This component calls a modal with some regionalization configurations.
 

diff --git a/src/components/sections/Hero/Hero.stories.tsx b/src/components/sections/Hero/Hero.stories.tsx
@@ -6,7 +6,7 @@ import Hero from '.'
 
 export default {
   component: Hero,
-  title: 'Organisms/Hero',
+  title: 'Organisms/Hero ⚠️',
   argTypes: {
     link: { table: { disable: true } },
     imageAlt: { table: { disable: true } },

diff --git a/src/components/ui/Badge/Badge.stories.tsx b/src/components/ui/Badge/Badge.stories.tsx
@@ -4,7 +4,7 @@ import { Badge } from '.'
 
 export default {
   component: Badge,
-  title: 'Molecules/Badge',
+  title: 'Molecules/Badge/Default ⚠️',
   argTypes: {
     onClose: { table: { disable: true } },
     children: {

diff --git a/src/components/ui/Badge/DiscountBadge.stories.tsx b/src/components/ui/Badge/DiscountBadge.stories.tsx
@@ -3,7 +3,7 @@ import type { DiscountBadgeProps } from './DiscountBadge'
 
 export default {
   component: DiscountBadge,
-  title: 'Molecules/Badge',
+  title: 'Molecules/Badge/DiscountBadge ⚠️',
 }
 
 const TemplateDiscount = ({ ...args }: DiscountBadgeProps) => (

diff --git a/src/components/ui/Button/Button.stories.mdx b/src/components/ui/Button/Button.stories.mdx
@@ -28,7 +28,7 @@ This component allows users to take actions, make choices or trigger an event wi
 - [Variants](#variants)
 - [Related Components](#related-components)
 
-## Overview
+## Overview <a id="overview" />
 
 The `Button` component uses [FastStore UI Button](https://www.faststore.dev/reference/ui/atoms/Button) as base.
 
@@ -46,7 +46,7 @@ The `Button` component uses [FastStore UI Button](https://www.faststore.dev/refe
 
 ---
 
-## Usage
+## Usage <a id="usage" />
 
 `import Button from 'src/components/ui/Button'`
 
@@ -99,7 +99,7 @@ export const Usage = ({ inverse, ...args }) => {
 
 ---
 
-## Nested Elements
+## Nested Elements <a id="nested-elements" />
 
 ### Icon
 
@@ -122,7 +122,7 @@ export const Usage = ({ inverse, ...args }) => {
 
 ---
 
-## Hierarchy
+## Hierarchy <a id="hierarchy" />
 
 ### Primary
 
@@ -815,7 +815,7 @@ export const Usage = ({ inverse, ...args }) => {
 
 ---
 
-## Variants
+## Variants <a id="variants" />
 
 ### Disabled
 
@@ -870,7 +870,7 @@ export const Usage = ({ inverse, ...args }) => {
 
 ---
 
-## Related Components
+## Related Components <a id="related-components" />
 
 <section className="sbdocs-section">
   <article>

diff --git a/src/components/ui/Dropdown/Dropdown.stories.mdx b/src/components/ui/Dropdown/Dropdown.stories.mdx
@@ -11,7 +11,7 @@ import {
   TokenDivider,
 } from 'src/../.storybook/components'
 
-<Meta title="Molecules/Dropdown/Default" />
+<Meta title="Molecules/Dropdown/Overview" />
 
 export const Template = (args) => (
   <Dropdown>
@@ -132,7 +132,7 @@ The `Dropdown` component uses [FastStore UI Dropdown](https://www.faststore.dev/
 
 ---
 
-## Related Components
+## Compound Components
 
 <section className="sbdocs-section">
   <article>

diff --git a/src/components/ui/EmptyState/EmptyState.stories.mdx b/src/components/ui/EmptyState/EmptyState.stories.mdx
@@ -16,7 +16,7 @@ export const Template = (args) => (
 
 <header>
 
-# EmptyState
+# Empty State
 
 This component represents an empty state, usually used on `EmptyCart` and `EmptyGallery` components.
 

diff --git a/src/components/ui/InputText/InputText.stories.tsx b/src/components/ui/InputText/InputText.stories.tsx
@@ -3,7 +3,7 @@ import InputText from '.'
 
 export default {
   component: InputText,
-  title: 'Atoms/InputText',
+  title: 'Atoms/InputText ⚠️',
   argTypes: {
     inputRef: {
       table: {

diff --git a/src/components/ui/Link/Link.stories.tsx b/src/components/ui/Link/Link.stories.tsx
@@ -3,7 +3,7 @@ import Link from '.'
 
 export default {
   component: Link,
-  title: 'Atoms/Link',
+  title: 'Atoms/Link ⚠️',
   argTypes: {
     href: {
       type: { name: 'string', required: true },

diff --git a/src/components/ui/PriceRange/PriceRange.stories.mdx b/src/components/ui/PriceRange/PriceRange.stories.mdx
@@ -40,7 +40,7 @@ export const Template = (args) => {
 
 <header>
 
-# PriceRange
+# Price Range
 
 PriceRange allows you to implement filters on PLP so users have a high control over product prices.
 
@@ -53,6 +53,7 @@ The `PriceRange` component uses [FastStore UI PriceRange](https://www.faststore.
 ---
 
 ## Usage
+
 `import PriceRange from '../components/ui/PriceRange'`
 
 <Canvas isColumn>

diff --git a/src/components/ui/ProductTitle/ProductTitle.stories.mdx b/src/components/ui/ProductTitle/ProductTitle.stories.mdx
@@ -52,7 +52,7 @@ export const Template = (args) => <ProductTitle {...args} />
 
 <header>
 
-# ProductTitle
+# Product Title
 
 The product title that is commonly used on Product Details Page (PDP).
 

diff --git a/src/components/ui/QuantitySelector/QuantitySelector.stories.mdx b/src/components/ui/QuantitySelector/QuantitySelector.stories.mdx
@@ -42,7 +42,7 @@ export const Template = (args) => <QuantitySelector {...args} />
 
 <header>
 
-# QuantitySelector
+# Quantity Selector
 
 It's a component that shows a quantity selector, commonly used to add a product to the shopping cart.
 

diff --git a/src/components/ui/Select/Select.stories.tsx b/src/components/ui/Select/Select.stories.tsx
@@ -3,7 +3,7 @@ import Select from '.'
 
 export default {
   component: Select,
-  title: 'Atoms/Select',
+  title: 'Atoms/Select ⚠️',
 }
 
 const Template = ({ ...args }: SelectProps) => <Select {...args} />

diff --git a/src/components/ui/Toast/Toast.stories.tsx b/src/components/ui/Toast/Toast.stories.tsx
@@ -4,7 +4,7 @@ import Toast from '.'
 
 export default {
   component: Toast,
-  title: 'Atoms/Toast',
+  title: 'Atoms/Toast ⚠️',
 }
 
 const Template = () => {