feat: redesign base components (#3289)

redesign AccordionItem, Badge & Checkbox
remove unnecessary ring-1 class
move to rounded-xl for input
redesign quantitySelector
fixup hero styling
removed spinbutton role from elements with type="number" docs
update input examples
redesign productCard details
unify badge placements with the designs
add missing mt-0.5 to input example components

Author: FRSgit

.changeset/giant-geckos-perform.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+- **[CHANGED]** default badge background color. Add className `!bg-secondary-700` explicitly in order to migrate.

.changeset/sharp-pets-beam.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+**[BREAKING][CHANGED]** Moved from `rounded-md` to `rounded-xl` as a default styling for `SfInput`.

.changeset/slimy-zoos-carry.md

@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': major
+'@storefront-ui/vue': major
+---
+
+- **[BREAKING][CHANGED]** Changed `SfCheckbox` default text color. To brind the previous behaviour back, apply `!text-gray !disabled:text-gray-300 !hover:text-gray-300` to your `SfCheckbox` element.

apps/docs/components/content/_blocks/Banners.md

@@ -89,7 +89,7 @@ Mobile Background Images:
 Aspect ratio: 2:5
 Example size: 420 x 1050px
 
-<Showcase showcase-name="Banners/Hero" style="min-height:620px">
+<Showcase showcase-name="Banners/Hero" style="min-height:620px" no-paddings>
 
 ::vue-only
 <<<../../../../preview/nuxt/pages/showcases/Banners/Hero.vue
@@ -104,7 +104,7 @@ Example size: 420 x 1050px
 
 Enhance your Hero section with a contextual image on the side.
 
-<Showcase showcase-name="Banners/HeroWithImage" style="min-height:620px">
+<Showcase showcase-name="Banners/HeroWithImage" style="min-height:620px" no-paddings>
 
 ::vue-only
 <<<../../../../preview/nuxt/pages/showcases/Banners/HeroWithImage.vue

apps/preview/next/pages/examples/SfAccordionItem.tsx

@@ -24,12 +24,12 @@ function Example() {
         open={state.get.open}
         onToggle={(open: boolean) => state.set({ open })}
         summary={
-          <div className="flex justify-between p-2 bg-gray-100">
+          <div className="flex justify-between p-4 font-medium hover:bg-neutral-100 active:neutral-100">
             <p>Click me to see the content</p>
-            <SfIconChevronLeft className={`${state.get.open ? 'rotate-90' : '-rotate-90'}`} />
+            <SfIconChevronLeft className={`text-neutral-500 ${state.get.open ? 'rotate-90' : '-rotate-90'}`} />
           </div>
         }
-        className="rounded border"
+        className="border border-neutral-200 rounded-md divide-y text-neutral-900"
       >
         <p className="p-2">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

apps/preview/next/pages/examples/SfInput.tsx

@@ -160,7 +160,7 @@ function Example() {
           slotPrefix={prefixSlotOptions.getValue(state.get.slotPrefix)}
           slotSuffix={suffixSlotOptions.getValue(state.get.slotSuffix)}
           onChange={onChange}
-          wrapperClassName={classNames({
+          wrapperClassName={classNames('mt-0.5', {
             'peer !bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500':
               state.get.disabled || state.get.readonly,
           })}

apps/preview/next/pages/showcases/Badge/BadgeAvatar.tsx

@@ -4,20 +4,16 @@ import { SfBadge } from '@storefront-ui/react';
 
 export default function BadgeAvatar() {
   return (
-    <ul>
-      <li className="flex items-center mb-2">
-        <div className="relative">
-          <img src="http://localhost:3100/@assets/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
-          <SfBadge variant="dot" placement="bottom-right" className="!bg-primary-600 outline outline-white" />
-        </div>
-      </li>
-      <li className="flex items-center">
-        <div className="relative">
-          <img src="http://localhost:3100/@assets/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
-          <SfBadge variant="dot" placement="bottom-right" className="!bg-neutral-600 outline outline-white" />
-        </div>
-      </li>
-    </ul>
+    <div className="flex gap-3">
+      <div className="relative">
+        <img src="http://localhost:3100/@assets/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
+        <SfBadge variant="dot" placement="bottom-left" className="outline outline-white" />
+      </div>
+      <div className="relative">
+        <img src="http://localhost:3100/@assets/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
+        <SfBadge variant="dot" placement="bottom-left" className="!bg-secondary-700 outline outline-white" />
+      </div>
+    </div>
   );
 }
 

apps/preview/next/pages/showcases/Badge/BadgeOutline.tsx

@@ -1,13 +1,13 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
-import { SfBadge, SfButton, SfIconShoppingCart } from '@storefront-ui/react';
+import { SfBadge, SfButton, SfIconFavoriteFilled } from '@storefront-ui/react';
 
 export default function BadgeOutline() {
   return (
     <div className="flex gap-3">
       <div className="p-3 bg-white">
         <SfButton className="group relative" square variant="tertiary">
-          <SfIconShoppingCart />
+          <SfIconFavoriteFilled />
           <SfBadge
             content={100}
             max={99}
@@ -18,7 +18,7 @@ export default function BadgeOutline() {
 
       <div className="p-3 bg-primary-700">
         <SfButton className="group relative hover:bg-primary-800 active:bg-primary-900" square variant="tertiary">
-          <SfIconShoppingCart className="text-white" />
+          <SfIconFavoriteFilled className="text-white" />
           <SfBadge
             content={100}
             max={99}

apps/preview/next/pages/showcases/Badge/BadgePlacement.tsx

@@ -12,7 +12,7 @@ export default function BadgePlacement() {
 
       <SfButton className="relative" square variant="tertiary">
         <SfIconShoppingCart />
-        <SfBadge content={100} max={99} placement="bottom-right" />
+        <SfBadge content={100} max={99} placement="bottom-left" />
       </SfButton>
 
       <SfButton className="relative" square variant="tertiary">
@@ -22,7 +22,7 @@ export default function BadgePlacement() {
 
       <SfButton className="relative" square variant="tertiary">
         <SfIconShoppingCart />
-        <SfBadge content={100} max={99} placement="bottom-left" />
+        <SfBadge content={100} max={99} placement="bottom-right" />
       </SfButton>
     </div>
   );

apps/preview/next/pages/showcases/Banners/Hero.tsx

@@ -1,30 +1,59 @@
 /* eslint-disable jsx-a11y/alt-text */
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
+import classNames from 'classnames';
 import { SfButton } from '@storefront-ui/react';
 
+const heroDetails = {
+  headline: 'New collection',
+  title: 'Made to move. Built to win.',
+  description: 'The new sport collection is now in store.',
+  callToAction: 'Order now',
+  callToActionSecondary: 'Show more',
+  backgroundImage: 'http://localhost:3100/@assets/hero-bg-2.png',
+  backgroundImageMobile: 'http://localhost:3100/@assets/hero-bg-mobile-2.png',
+  image: undefined,
+  imageAlt: undefined,
+  variant: 'dark',
+};
+
 export default function Hero() {
+  const {
+    title,
+    headline,
+    description,
+    callToAction,
+    callToActionSecondary,
+    backgroundImage,
+    backgroundImageMobile,
+    image,
+    imageAlt,
+    variant,
+  } = heroDetails;
   return (
-    <div className="relative h-dvh w-dvh">
-      <picture className="before:absolute before:inset-0 before:bg-primary-900 before:-z-10">
-        <source srcSet="http://localhost:3100/@assets/hero-bg-2.png" media="(min-width: 768px)" />
-        <img
-          src="http://localhost:3100/@assets/hero-bg-mobile-2.png"
-          className="absolute w-full h-full z-[-1] object-cover opacity-50"
-          alt="hero"
-        />
+    <div className="relative h-dvh w-dvh shrink-0">
+      <picture>
+        <source srcSet={backgroundImage} media="(min-width: 768px)" />
+        <img src={backgroundImageMobile} className="absolute w-full h-full z-[-1] object-cover" alt="hero" />
       </picture>
-      <div className="h-full w-full max-w-[1536px] mx-auto p-4 md:px-10 flex flex-col justify-end md:justify-center text-white">
-        <p className="typography-text-xs md:typography-text-sm font-bold tracking-widest uppercase">New collection</p>
-        <h1 className="typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold mt-2 mb-4">
-          Made to move. Built to win.
-        </h1>
-        <p className="typography-text-base md:typography-text-lg">The new sport collection is now in store.</p>
-        <div className="flex flex-col md:flex-row gap-4 mt-6">
-          <SfButton size="lg" className="bg-white" variant="secondary">
-            Order now
-          </SfButton>
-          <SfButton size="lg">Show more</SfButton>
+      <div
+        className={classNames(
+          'h-full w-full max-w-[1536px] mx-auto flex flex-col justify-end md:justify-center',
+          variant === 'dark' ? 'text-white' : 'text-neutral-900',
+        )}
+      >
+        <div className="p-4 md:p-10 flex flex-col">
+          <p className="typography-text-xs md:typography-text-sm font-bold tracking-widest uppercase">{headline}</p>
+          <h1 className="mt-2 mb-4 typography-display-2 md:typography-display-1 md:leading-[67.5px] font-bold">
+            {title}
+          </h1>
+          <p className="typography-text-base md:typography-text-lg">{description}</p>
+          <div className="mt-6 flex flex-col md:flex-row gap-4">
+            <SfButton size="lg" className="bg-white" variant="secondary">
+              {callToAction}
+            </SfButton>
+            <SfButton size="lg">{callToActionSecondary}</SfButton>
+          </div>
         </div>
       </div>
     </div>