@faststore/core 22.42.6

package/src/components/common/Footer/FooterLinks.tsx

@@ -0,0 +1,155 @@
+import { useState } from 'react'
+import { List as UIList } from '@faststore/ui'
+
+import Link from 'src/components/ui/Link'
+import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
+
+import styles from './footer.module.scss'
+
+const links = [
+  {
+    title: 'Our company',
+    items: [
+      {
+        href: '/',
+        name: 'About Us',
+      },
+      {
+        href: '/',
+        name: 'Our Blog',
+      },
+      {
+        href: '/',
+        name: 'Stores',
+      },
+      {
+        href: '/',
+        name: 'Work With Us',
+      },
+    ],
+  },
+  {
+    title: 'Orders & Purchases',
+    items: [
+      {
+        href: '/',
+        name: 'Check Order Status',
+      },
+      {
+        href: '/',
+        name: 'Returns and Exchanges',
+      },
+      {
+        href: '/',
+        name: 'Product Recall',
+      },
+      {
+        href: '/',
+        name: 'Gift Cards',
+      },
+    ],
+  },
+  {
+    title: 'Support & Services',
+    items: [
+      {
+        href: '/',
+        name: 'Support Center',
+      },
+      {
+        href: '/',
+        name: 'Schedule a Service',
+      },
+      {
+        href: '/',
+        name: 'Contact Us',
+      },
+    ],
+  },
+  {
+    title: 'Partnerships',
+    items: [
+      {
+        href: '/',
+        name: 'Affiliate Program',
+      },
+      {
+        href: '/',
+        name: 'Advertise with US',
+      },
+      {
+        href: '/',
+        name: 'Market Place',
+      },
+    ],
+  },
+]
+
+type LinkItem = {
+  href: string
+  name: string
+}
+
+interface LinksListProps {
+  items: LinkItem[]
+}
+
+function LinksList({ items }: LinksListProps) {
+  return (
+    <UIList>
+      {items.map((item) => (
+        <li key={item.name}>
+          <Link variant="footer" href={item.href}>
+            {item.name}
+          </Link>
+        </li>
+      ))}
+    </UIList>
+  )
+}
+
+function FooterLinks() {
+  const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
+    new Set([])
+  )
+
+  const onChange = (index: number) => {
+    if (indicesExpanded.has(index)) {
+      indicesExpanded.delete(index)
+      setIndicesExpanded(new Set(indicesExpanded))
+    } else {
+      setIndicesExpanded(new Set(indicesExpanded.add(index)))
+    }
+  }
+
+  return (
+    <section className={styles.fsFooter} data-fs-footer-links>
+      <div className="display-mobile">
+        <Accordion expandedIndices={indicesExpanded} onChange={onChange}>
+          {links.map((section, index) => (
+            <AccordionItem
+              key={section.title}
+              isExpanded={indicesExpanded.has(index)}
+              buttonLabel={section.title}
+            >
+              <LinksList items={section.items} />
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+
+      <div className="hidden-mobile">
+        <nav data-fs-footer-links-columns>
+          {links.map((section) => (
+            <div key={section.title}>
+              <p data-fs-footer-title>{section.title}</p>
+              <LinksList items={section.items} />
+            </div>
+          ))}
+        </nav>
+      </div>
+    </section>
+  )
+}
+
+export default FooterLinks

package/src/components/common/Footer/footer.module.scss

@@ -0,0 +1,246 @@
+@import "src/styles/scaffold";
+
+.fs-footer {
+  // --------------------------------------------------------
+  // Design Tokens for Footer
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-footer-spacing-vertical-mobile             : var(--fs-spacing-4);
+  --fs-footer-spacing-vertical-notebook           : var(--fs-spacing-5);
+  --fs-footer-spacing-horizontal-notebook         : var(--fs-grid-gap-3);
+
+  --fs-footer-bkg-color                           : var(--fs-color-neutral-bkg);
+
+  // Divisor
+  --fs-footer-divisor-border-width                : var(--fs-border-width);
+  --fs-footer-divisor-border-color                : var(--fs-border-color-light);
+
+  // Title
+  --fs-footer-title-size                          : var(--fs-text-size-body);
+  --fs-footer-title-line-height                   : 1.25;
+  --fs-footer-title-weight                        : var(--fs-text-weight-bold);
+  --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);
+
+  // Payment Methods
+  --fs-footer-payment-methods-flags-border-width  : var(--fs-border-width);
+  --fs-footer-payment-methods-flags-border-color  : var(--fs-color-neutral-3);
+  --fs-footer-payment-methods-flags-border-radius : var(--fs-border-radius-small);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  &[data-fs-footer] {
+    background-color: var(--fs-footer-bkg-color);
+  }
+
+  @include media("<notebook") {
+    padding-top: 0;
+  }
+
+  [data-fs-logo] {
+    background-position-y: var(--fs-spacing-0);
+  }
+
+  [data-fs-footer-title] {
+    margin-bottom: var(--fs-footer-title-margin-bottom);
+    font-size: var(--fs-footer-title-size);
+    font-weight: var(--fs-footer-title-weight);
+    line-height: var(--fs-footer-title-line-height);
+
+    @include media("<notebook") {
+      text-align: center;
+    }
+  }
+
+  [data-fs-footer-note],
+  [data-fs-footer-nav] {
+    position: relative;
+    display: flex;
+
+    @include media("<notebook") {
+      flex-direction: column;
+    }
+
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      column-gap: var(--fs-footer-spacing-horizontal-notebook);
+    }
+
+    &:not(:first-of-type)::before {
+      width: 100%;
+      content: "";
+      border-top: var(--fs-footer-divisor-border-width) solid var(--fs-footer-divisor-border-color);
+
+      @include media(">=notebook") {
+        grid-column: span 12;
+      }
+    }
+  }
+
+  [data-fs-footer-nav] {
+    @include media(">=notebook") {
+      row-gap: var(--fs-footer-spacing-vertical-notebook);
+      padding-bottom: var(--fs-footer-spacing-vertical-notebook);
+    }
+  }
+
+  [data-fs-footer-note] {
+    position: relative;
+
+    @include media("<notebook") {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      &::before {
+        padding-bottom: var(--fs-footer-spacing-vertical-mobile);
+      }
+    }
+
+    @include media(">=notebook") {
+      row-gap: var(--fs-footer-spacing-vertical-notebook);
+      padding-top: 0;
+    }
+  }
+
+  [data-fs-footer-social],
+  [data-fs-footer-payment-methods] {
+    @include media(">=notebook") {
+      grid-column: 11 / span 2;
+      margin-left: calc(-1 * var(--fs-spacing-3));
+    }
+  }
+
+  [data-fs-footer-social] {
+    display: flex;
+    flex-direction: column;
+
+    @include media("<notebook") {
+      padding: var(--fs-footer-spacing-vertical-mobile) 0 var(--fs-spacing-3);
+    }
+
+    [data-fs-list] {
+      display: flex;
+      justify-content: center;
+
+      @include media(">=notebook") {
+        justify-content: space-between;
+      }
+
+      [data-fs-link] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--fs-control-tap-size);
+        min-height: var(--fs-control-tap-size);
+        padding: var(--fs-spacing-1);
+      }
+    }
+  }
+
+  [data-fs-footer-payment-methods] {
+    @include media("<notebook") {
+      margin: var(--fs-footer-spacing-vertical-mobile) auto;
+    }
+
+    @include media(">=notebook") {
+      order: 3;
+    }
+  }
+
+  [data-fs-icon] {
+    @include media(">=notebook") {
+      grid-column: span 2;
+    }
+  }
+
+  [data-payment-methods-flags] {
+    svg {
+      border: var(--fs-footer-payment-methods-flags-border-width) solid var(--fs-footer-payment-methods-flags-border-color);
+      border-radius: var(--fs-footer-payment-methods-flags-border-radius);
+    }
+
+    [data-fs-list] {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, max-content));
+      row-gap: var(--fs-spacing-1);
+      justify-content: space-between;
+      margin-top: var(--fs-spacing-3);
+
+      li { display: flex; }
+
+      @include media("<notebook") {
+        column-gap: var(--fs-grid-gap-2);
+      }
+    }
+  }
+
+  [data-fs-footer-copyright] {
+    p + p {
+      margin: var(--fs-spacing-2) auto;
+    }
+
+    address {
+      font-style: normal;
+    }
+
+    @include media(">=notebook") {
+      grid-column: span 6;
+    }
+  }
+
+  [data-fs-footer-links-columns] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, auto));
+    grid-gap: var(--fs-footer-spacing-horizontal-notebook);
+  }
+
+  &[data-fs-footer-links] {
+    [data-fs-link] {
+      display: inline-block;
+      padding-left: 0;
+    }
+
+    @include media(">=notebook") {
+      grid-column: span 9;
+    }
+
+    @include media(">=desktop") {
+      grid-column: span 8;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-footer-incentives="true"] {
+    @include media(">=notebook") {
+      padding-top: 0;
+    }
+  }
+
+  &:not([data-fs-footer-social="true"]) {
+    [data-fs-footer-note]::before {
+      @include media("<notebook") {
+        border-color: transparent;
+      }
+    }
+
+    [data-fs-footer-links] {
+      @include media(">=notebook") {
+        grid-column: span 12;
+      }
+    }
+  }
+
+  &:not([data-fs-footer-payment-methods="true"]) [data-fs-footer-copyright] {
+    @include media(">=notebook") {
+      grid-column: span 10;
+    }
+  }
+}

package/src/components/common/Footer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Footer'
+export { default as FooterLinks } from './FooterLinks'

package/src/components/common/Navbar/NavLinks.stories.mdx

@@ -0,0 +1,122 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import UIProvider from 'src/sdk/ui/Provider'
+
+import { NavLinks } from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={NavLinks} title="Organisms/Navbar/NavLinks" />
+
+export const TemplateProvider = () => {
+  return (
+    <UIProvider>
+      <NavLinks />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# NavLinks
+
+Displays a set navigation links and self adapts on mobile [NavbarSlider](?path=/docs/organisms-navbar-navbarslider--overview-default) or desktop screens.
+
+</header>
+
+## Usage
+
+`import { NavLinks } from 'src/components/common/Navbar'`
+
+<Canvas>
+  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navlinks-padding-top-notebook"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-navlinks-padding-bottom-notebook"
+    value="var(--fs-navlinks-padding-top-notebook)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-bkg-color"
+    value="--fs-color-body-bkg"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-navlinks-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-navlinks-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-border-top-width-mobile"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-border-top-color-mobile"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-navlinks-border-bottom-width-mobile"
+    value="var(--fs-navlinks-border-top-width-mobile)"
+  />
+  <TokenRow
+    token="--fs-navlinks-border-bottom-color-mobile"
+    value="var(--fs-navlinks-border-top-color-mobile)"
+    globalValue="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-navlinks-link-width-notebook" value="auto" />
+  <TokenRow
+    token="--fs-navlinks-link-padding-notebook"
+    value="0 var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navlinks-list-padding-left-notebook"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-margin-left-notebook"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-border-left-width-notebook"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-border-left-color-notebook"
+    value="var(--fs-border-color-light)"
+  />
+</TokenTable>

package/src/components/common/Navbar/NavLinks.tsx

@@ -0,0 +1,58 @@
+import { List as UIList } from '@faststore/ui'
+import type { AnchorHTMLAttributes } from 'react'
+
+import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
+import Link from 'src/components/ui/Link'
+import { mark } from 'src/sdk/tests/mark'
+
+import styles from './navlinks.module.scss'
+
+interface NavLinksProps {
+  onClickLink?: AnchorHTMLAttributes<HTMLAnchorElement>['onClick']
+  classes?: string
+}
+
+const collections = [
+  {
+    name: 'Office',
+    href: '/office',
+  },
+  {
+    name: 'Home Appliances',
+    href: '/kitchen---home-appliances',
+  },
+  {
+    name: 'Computer and Software',
+    href: '/computer---software',
+  },
+  {
+    name: 'Technology',
+    href: '/technology',
+  },
+]
+
+function NavLinks({ onClickLink, classes = '' }: NavLinksProps) {
+  return (
+    <nav className={`${styles.fsNavlinks} ${classes}`}>
+      <div className="layout__content">
+        <RegionalizationButton />
+        <UIList data-fs-navlinks-list>
+          {collections.map(({ href, name }) => (
+            <li key={name} data-fs-navlinks-list-item>
+              <Link
+                data-fs-navlinks-link
+                variant="display"
+                href={href}
+                onClick={onClickLink}
+              >
+                {name}
+              </Link>
+            </li>
+          ))}
+        </UIList>
+      </div>
+    </nav>
+  )
+}
+
+export default mark(NavLinks)