diff --git a/.storybook/preview.js b/.storybook/preview.js
index 0b32e0b4..5e2a3328 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -15,4 +15,9 @@ export const parameters = {
docs: {
theme: SBTheme,
},
+ options: {
+ storySort: {
+ order: ['Releases', 'Atoms', 'Molecules', 'Organisms'],
+ },
+ },
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a991ceda..550d8aee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
+- Fixes `ProductCard` bordered variant (#5)
- Changed name from BaseStore to GatsbyStore (#497)
- Applies new local tokens to `BannerText` (#470)
- Update the Incentives component to handle CMS data (#474)
diff --git a/src/components/product/ProductCard/ProductCard.stories.tsx b/src/components/product/ProductCard/ProductCard.stories.tsx
index cc1be43d..120a966f 100644
--- a/src/components/product/ProductCard/ProductCard.stories.tsx
+++ b/src/components/product/ProductCard/ProductCard.stories.tsx
@@ -3,11 +3,32 @@ import storeConfig from 'store.config'
import { LocationProvider } from '@reach/router'
import type { ProductCardProps } from '.'
+import Icon from '../../ui/Icon'
+import Button from '../../ui/Button'
import ProductCard from '.'
export default {
component: ProductCard,
- title: 'Components/ProductCard',
+ title: 'Molecules/ProductCard',
+ argTypes: {
+ variant: {
+ defaultValue: 'default',
+ table: { defaultValue: 'default' },
+ },
+ product: { table: { disable: true } },
+ index: { table: { disable: true } },
+ aspectRatio: {
+ defaultValue: 1,
+ description: 'ProductCard Image aspect ratio',
+ options: [0.75, 1.5, 1],
+ control: { type: 'radio' },
+ table: { defaultValue: '1' },
+ },
+ ButtonBuy: {
+ control: 'boolean',
+ table: { defaultValue: false },
+ },
+ },
}
const product = {
@@ -41,19 +62,69 @@ const product = {
},
}
-const Template = (args: ProductCardProps) => (
-
-
-
-
-
-)
+const Template = ({ ButtonBuy, ...args }: ProductCardProps) => {
+ const button = ButtonBuy ? (
+ }
+ iconPosition="left"
+ >
+ Add
+
+ ) : null
+
+ return (
+
+
+
+
+
+ )
+}
+
+const TemplateWide = ({ ButtonBuy, ...args }: ProductCardProps) => {
+ const button = ButtonBuy ? (
+ }
+ iconPosition="left"
+ >
+ Add
+
+ ) : null
+
+ return (
+
+
+
+
+
+ )
+}
export const Default = Template.bind({})
+export const Wide = TemplateWide.bind({})
Default.args = {
product,
index: 1,
+ variant: 'default',
+ bordered: false,
+ aspectRatio: 1,
+ ButtonBuy: false,
+}
+
+Wide.args = {
+ product,
+ index: 1,
+ variant: 'wide',
+ bordered: false,
+ aspectRatio: 1.5,
+ ButtonBuy: false,
}
diff --git a/src/components/product/ProductCard/ProductCard.tsx b/src/components/product/ProductCard/ProductCard.tsx
index e717a873..f7243f43 100644
--- a/src/components/product/ProductCard/ProductCard.tsx
+++ b/src/components/product/ProductCard/ProductCard.tsx
@@ -52,6 +52,7 @@ function ProductCard({
data-fs-product-card
data-fs-product-card-variant={variant}
data-fs-product-card-bordered={bordered}
+ data-fs-product-card-actionabled={!!ButtonBuy}
data-fs-product-card-sku={sku}
{...otherProps}
>
@@ -100,8 +101,12 @@ function ProductCard({
) : (
)}
+ {!!ButtonBuy && (
+
+ {ButtonBuy}
+
+ )}
- {!!ButtonBuy && {ButtonBuy}}
)
}
diff --git a/src/components/product/ProductCard/product-card.scss b/src/components/product/ProductCard/product-card.scss
index 17f3415b..eec368ae 100644
--- a/src/components/product/ProductCard/product-card.scss
+++ b/src/components/product/ProductCard/product-card.scss
@@ -22,8 +22,8 @@
--fs-product-card-border-radius : var(--fs-border-radius-default);
--fs-product-card-border-width : var(--fs-border-width-default);
- --fs-product-card-border-color : transparent;
- --fs-product-card-border-color-hover : var(--fs-border-color-light);
+ --fs-product-card-border-color : var(--fs-border-color-light);
+ --fs-product-card-border-color-hover : var(--fs-border-color-light-hover);
--fs-product-card-text-title-color : var(--fs-color-text);
--fs-product-card-text-title-size : var(--fs-text-size-base);
@@ -37,6 +37,8 @@
--fs-product-card-text-subtitle-color : var(--fs-color-text-light);
--fs-product-card-text-subtitle-size : var(--fs-text-size-tiny);
+ --fs-product-card-text-max-lines : var(--fs-text-max-lines);
+
--fs-product-card-transition-function : var(--fs-transition-function);
--fs-product-card-transition-property : var(--fs-transition-property);
--fs-product-card-transition-timing : var(--fs-transition-timing);
@@ -53,7 +55,7 @@
height: 100%;
padding: var(--fs-product-card-padding);
background-color: var(--fs-product-card-bkg-color);
- border: var(--fs-product-card-border-width) solid var(--fs-product-card-border-color);
+ border: var(--fs-product-card-border-width) solid transparent;
border-radius: var(--fs-product-card-border-radius);
box-shadow: var(--fs-product-card-shadow);
transition: var(--fs-product-card-transition-property) var(--fs-product-card-transition-timing) var(--fs-product-card-transition-function);
@@ -104,7 +106,13 @@
}
}
- [data-store-badge] { margin-top: var(--fs-spacing-2); }
+ [data-store-badge],
+ [data-fs-product-card-actions] { margin-top: var(--fs-spacing-2); }
+}
+
+[data-fs-product-card-actions] {
+ display: flex;
+ align-items: end;
}
[data-fs-product-card-title] {
@@ -112,6 +120,8 @@
font-weight: var(--fs-product-card-text-title-weight);
line-height: 1.25;
color: var(--fs-product-card-text-title-color);
+
+ @include truncate-title(var(--fs-product-card-text-max-lines));
}
[data-fs-product-card-prices] {
@@ -143,16 +153,14 @@
}
}
-[data-fs-product-card-bordered="true"] {
- @include media(">=notebook") {
- border: var(--fs-border-width-default) solid var(--fs-border-color-light);
- }
-}
-
// --------------------------------------------------------
// Variants Styles
// --------------------------------------------------------
+[data-fs-product-card-bordered="true"] {
+ border: var(--fs-product-card-border-width) solid var(--fs-product-card-border-color);
+}
+
[data-fs-product-card-variant="wide"] {
--fs-product-card-padding: 0;
--fs-product-card-content-padding: var(--fs-spacing-2);
@@ -162,11 +170,19 @@
grid-template-rows: 1fr auto;
@include media(">=tablet") {
- grid-template-rows: 7fr 3fr;
+ grid-template-rows: 5fr 2fr;
+
+ &[data-fs-product-card-actionabled="true"] {
+ grid-template-rows: 10fr 7fr;
+ }
}
@include media(">=notebook") {
- grid-template-rows: 8fr 2fr;
+ &[data-fs-product-card-actionabled="true"] {
+ grid-template-rows: 6fr 3fr;
+ }
+
+ grid-template-rows: 4fr 1fr;
}
[data-fs-product-card-content] {
@@ -179,7 +195,7 @@
}
[data-card-image] {
- border-radius: var(--fs-border-radius-default) var(--fs-border-radius-default) 0 0;
+ border-radius: var(--fs-product-card-border-radius) var(--fs-product-card-border-radius) 0 0;
}
[data-store-badge] {
diff --git a/src/components/product/ProductGrid/product-grid.scss b/src/components/product/ProductGrid/product-grid.scss
index 7dd1d15a..acd89006 100644
--- a/src/components/product/ProductGrid/product-grid.scss
+++ b/src/components/product/ProductGrid/product-grid.scss
@@ -15,8 +15,4 @@
margin-top: var(--fs-grid-gap-2);
}
}
-
- li {
- background-color: var(--fs-color-neutral-0);
- }
}
diff --git a/src/components/sections/BannerText/BannerText.stories.tsx b/src/components/sections/BannerText/BannerText.stories.tsx
index e1245333..99be4831 100644
--- a/src/components/sections/BannerText/BannerText.stories.tsx
+++ b/src/components/sections/BannerText/BannerText.stories.tsx
@@ -3,27 +3,10 @@ import BannerText from '.'
export default {
component: BannerText,
- title: 'Components/BannerText',
+ title: 'Organisms/BannerText',
argTypes: {
- variant: {
- name: 'variant',
- defaultValue: 'primary',
- },
- title: {
- name: 'title',
- type: { name: 'string', required: true },
- control: {
- type: 'text',
- },
- },
- colorVariant: {
- name: 'colorVariant',
- defaultValue: 'main',
- type: { name: 'string' },
- control: {
- type: 'text',
- },
- },
+ variant: { table: { disable: true } },
+ actionPath: { table: { disable: true } },
},
}
@@ -36,6 +19,7 @@ Primary.args = {
'Receive our news and promotions in advance. Enjoy and get 10% off on your first purchase.',
actionPath: '/',
actionLabel: 'Call to action',
+ colorVariant: 'main',
}
export const Secondary = Template.bind({})
@@ -46,4 +30,5 @@ Secondary.args = {
caption: 'Enjoy and get 10% off on your first purchase.',
actionPath: '/',
actionLabel: 'Call to action',
+ colorVariant: 'accent',
}
diff --git a/src/components/sections/BannerText/banner-text.scss b/src/components/sections/BannerText/banner-text.scss
index 2963eb88..d8c214d1 100644
--- a/src/components/sections/BannerText/banner-text.scss
+++ b/src/components/sections/BannerText/banner-text.scss
@@ -34,7 +34,7 @@
--fs-banner-text-light-text-color : var(--fs-color-secondary-text);
// Accent
- --fs-banner-text-accent-bkg-color : var(--fs-color-highlight-bkg);
+ --fs-banner-text-accent-bkg-color : var(--fs-color-highlighted-bkg);
--fs-banner-text-accent-text-color : var(--fs-banner-text-light-text-color);
// --------------------------------------------------------
diff --git a/src/components/sections/Hero/Hero.stories.tsx b/src/components/sections/Hero/Hero.stories.tsx
index f226cf95..5f131fbf 100644
--- 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: 'Components/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
index 550bdb95..21632e0d 100644
--- a/src/components/ui/Badge/Badge.stories.tsx
+++ b/src/components/ui/Badge/Badge.stories.tsx
@@ -4,7 +4,10 @@ import { Badge } from '.'
export default {
component: Badge,
- title: 'Components/Badge',
+ title: 'Molecules/Badge',
+ argTypes: {
+ onClose: { table: { disable: true } },
+ },
}
const Template = ({ children, ...args }: BadgeProps) => (
@@ -12,8 +15,16 @@ const Template = ({ children, ...args }: BadgeProps) => (
)
export const Default = Template.bind({})
+export const Interactive = Template.bind({})
Default.args = {
+ children: 'New arrival',
+ big: false,
+ interactive: false,
+ variant: 'info',
+}
+
+Interactive.args = {
children: 'New arrival',
big: true,
interactive: true,
diff --git a/src/components/ui/Badge/DiscountBadge.stories.tsx b/src/components/ui/Badge/DiscountBadge.stories.tsx
index 05590171..bc1a6948 100644
--- 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: 'Components/Badge',
+ title: 'Molecules/Badge',
}
const TemplateDiscount = ({ ...args }: DiscountBadgeProps) => (
diff --git a/src/components/ui/Badge/badge.scss b/src/components/ui/Badge/badge.scss
index 664f9581..5f9bfb5c 100644
--- a/src/components/ui/Badge/badge.scss
+++ b/src/components/ui/Badge/badge.scss
@@ -130,12 +130,13 @@
top: 50%;
right: 0;
width: var(--button-hover-size);
- height: var(--button-hover-size);
- margin-top: calc(var(--button-hover-size) / 2 * -1);
+ height: 100%;
content: "";
+ border-radius: 0 var(--fs-badge-border-radius) var(--fs-badge-border-radius) 0;
/* stylelint-disable max-line-length */
transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
/* stylelint-enable max-line-length */
+ transform: translateY(-50%);
}
}
}
diff --git a/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx b/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx
index 830167e7..34e4627a 100644
--- a/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx
+++ b/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx
@@ -3,7 +3,7 @@ import Breadcrumb from '.'
export default {
component: Breadcrumb,
- title: 'Components/Breadcrumb',
+ title: 'Molecules/Breadcrumb',
}
const breadcrumbList = [
diff --git a/src/components/ui/Hero/hero.scss b/src/components/ui/Hero/hero.scss
index 9e38f608..e932431a 100644
--- a/src/components/ui/Hero/hero.scss
+++ b/src/components/ui/Hero/hero.scss
@@ -30,7 +30,7 @@
--fs-hero-light-text-color : var(--fs-color-secondary-text);
// Accent
- --fs-hero-accent-bkg-color : var(--fs-color-highlight-bkg);
+ --fs-hero-accent-bkg-color : var(--fs-color-highlighted-bkg);
--fs-hero-accent-text-color : var(--fs-hero-light-text-color);
// --------------------------------------------------------
diff --git a/src/styles/global/tokens.scss b/src/styles/global/tokens.scss
index d2391cb7..c3f5711b 100644
--- a/src/styles/global/tokens.scss
+++ b/src/styles/global/tokens.scss
@@ -120,6 +120,9 @@ body {
--fs-text-weight-bold : 700;
--fs-text-weight-black : 900;
+ // MAX LINES
+ --fs-text-max-lines : 2;
+
// TYPOGRAPHY SCALE
// Use a type scale to add rhythm to your typography and
// ensure consistency throughout the project.
@@ -199,7 +202,7 @@ body {
--fs-grid-max-width : var(--fs-grid-breakpoint-notebook);
// GAPS
- --fs-grid-gap-0 : calc(var(--fs-spacing-0) / 2);
+ --fs-grid-gap-0 : var(--fs-spacing-1);
--fs-grid-gap-1 : var(--fs-spacing-2);
--fs-grid-gap-2 : var(--fs-spacing-3);
--fs-grid-gap-3 : var(--fs-spacing-4);
@@ -253,7 +256,7 @@ body {
--fs-border-color-default-active : var(--fs-color-main-2);
--fs-border-color-default-disabled : var(--fs-color-neutral-6);
- --fs-border-color-light : var(--fs-color-neutral-3);
+ --fs-border-color-light : var(--fs-color-neutral-2);
--fs-border-color-light-hover : var(--fs-color-neutral-3);
--fs-border-color-light-active : var(--fs-color-neutral-3);
--fs-border-color-light-disabled : var(--fs-color-neutral-5);
diff --git a/src/styles/global/utilities.scss b/src/styles/global/utilities.scss
index fe5cfb08..e40ad892 100644
--- a/src/styles/global/utilities.scss
+++ b/src/styles/global/utilities.scss
@@ -57,13 +57,13 @@ $base: 16px !default;
&:focus-visible { @include focus-ring; }
}
-@mixin truncate-title {
+@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
- -webkit-line-clamp: 2;
- line-clamp: 2;
+ -webkit-line-clamp: $max-lines;
+ line-clamp: $max-lines;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
}