@faststore/ui 2.0.33-alpha.0 → 2.0.35-alpha.0

package/src/components/molecules/Accordion/stories/Accordion.stories.tsx

@@ -1,160 +0,0 @@
-import type { Story } from '@storybook/react'
-import React, { useState } from 'react'
-
-import Accordion from '../Accordion'
-import AccordionItem from '../AccordionItem'
-import AccordionButton from '../AccordionButton'
-import AccordionPanel from '../AccordionPanel'
-import type { AccordionProps } from '..'
-import mdx from './Accordion.mdx'
-import { Icon } from '../../../../'
-
-const Caret = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="feather feather-chevron-down"
-  >
-    <polyline points="6 9 12 15 18 9" />
-  </svg>
-)
-
-const AccordionTemplate: Story<AccordionProps> = ({ testId }) => {
-  const [indices, setIndices] = useState<Set<number>>(new Set([]))
-  const onChange = (index: number) => {
-    if (indices.has(index)) {
-      indices.delete(index)
-      setIndices(new Set(indices))
-    } else {
-      setIndices(new Set(indices.add(index)))
-    }
-  }
-
-  return (
-    <Accordion testId={testId} indices={indices} onChange={onChange}>
-      <AccordionItem>
-        <AccordionButton>Clothing</AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Shorts</a>
-            </li>
-            <li>
-              <a href="/">Sweatshirt</a>
-            </li>
-            <li>
-              <a href="/">Tank tops</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionButton>Bags</AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Backpacks</a>
-            </li>
-            <li>
-              <a href="/">Necessaire</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionButton>Sale</AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Smartphones</a>
-            </li>
-            <li>
-              <a href="/">TVs</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-export const MultipleAndCollapsible = AccordionTemplate.bind({})
-
-const ToggleWithIconTemplate: Story<AccordionProps> = ({ testId }) => {
-  const [indices, setIndices] = useState<number[]>([0])
-  const onChange = (index: number) => {
-    setIndices([index])
-  }
-
-  return (
-    <Accordion testId={testId} indices={indices} onChange={onChange}>
-      <AccordionItem>
-        <AccordionButton>
-          Clothing <Icon component={<Caret />} />
-        </AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Shorts</a>
-            </li>
-            <li>
-              <a href="/">Sweatshirt</a>
-            </li>
-            <li>
-              <a href="/">Tank tops</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionButton>
-          Bags <Icon component={<Caret />} />
-        </AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Backpacks</a>
-            </li>
-            <li>
-              <a href="/">Necessaire</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionButton>
-          Sale <Icon component={<Caret />} />
-        </AccordionButton>
-        <AccordionPanel>
-          <ul>
-            <li>
-              <a href="/">Smartphones</a>
-            </li>
-            <li>
-              <a href="/">TVs</a>
-            </li>
-          </ul>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-
-export const ToggleWithIcon = ToggleWithIconTemplate.bind({})
-
-export default {
-  title: 'Molecules/Accordion',
-  component: MultipleAndCollapsible,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/molecules/AggregateRating/stories/AggregateRating.mdx

@@ -1,33 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import AggregateRating from '../AggregateRating'
-
-# Default Aggregate Rating
-
-<Canvas>
-  <Story id="molecules-aggregaterating--aggregate-rating" />
-</Canvas>
-
-# Aggregate Rating Without Icon
-
-<Canvas>
-  <Story id="molecules-aggregaterating--aggregate-rating-without-icon" />
-</Canvas>
-
-# Aggregate Rating With CSS
-
-<Canvas>
-  <Story id="molecules-aggregaterating--aggregate-rating-with-css" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={AggregateRating} />
-
-## CSS Selectors
-
-```css
-[data-fs-aggregate-rating] {}
-
-[data-aggregate-rating-item=(full|partial|empty)] {}
-```

package/src/components/molecules/AggregateRating/stories/AggregateRating.stories.tsx

@@ -1,111 +0,0 @@
-import type { Story } from '@storybook/react'
-import type { FC } from 'react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { AggregateRatingProps, RatingItemProps } from '../AggregateRating'
-import Component from '../AggregateRating'
-import mdx from './AggregateRating.mdx'
-
-const RatingIcon: FC<RatingItemProps> = (props) => {
-  const fillColor = {
-    empty: 'transparent',
-    partial: 'url(#partial)',
-    full: '#ffb100',
-  }
-
-  return (
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
-      {...props}
-    >
-      <defs>
-        <linearGradient id="partial">
-          <stop offset="50%" stopColor="#ffb100" />
-          <stop offset="50%" stopColor="transparent" stopOpacity="1" />
-        </linearGradient>
-      </defs>
-      <path
-        d="M20.388,10.918L32,12.118l-8.735,7.749L25.914,
-             31.4l-9.893-6.088L6.127,31.4l2.695-11.533L0,
-             12.118l11.547-1.2L16.026,0.6L20.388,10.918z"
-        fill={fillColor[props['data-fs-aggregate-rating-item']!]}
-        strokeWidth="2"
-        stroke="#ffb100"
-      />
-    </svg>
-  )
-}
-
-const AggregateRatingTemplate: Story<AggregateRatingProps> = ({
-  value,
-  testId,
-}) => {
-  return (
-    <Component value={value} testId={testId}>
-      <RatingIcon />
-      <RatingIcon />
-      <RatingIcon />
-      <RatingIcon />
-      <RatingIcon />
-    </Component>
-  )
-}
-
-export const AggregateRating = AggregateRatingTemplate.bind({})
-AggregateRating.args = { value: 3 }
-
-const AggregateRatingWithoutIconTemplate: Story<AggregateRatingProps> = ({
-  value,
-  testId,
-}) => {
-  return (
-    <Component value={value} testId={testId}>
-      {Array.from({ length: 5 }).map((_, index) => {
-        const isFullRating = value - index >= 1
-
-        return isFullRating ? '★' : '☆'
-      })}
-    </Component>
-  )
-}
-
-export const AggregateRatingWithoutIcon =
-  AggregateRatingWithoutIconTemplate.bind({})
-AggregateRatingWithoutIcon.args = { value: 3 }
-
-const AggregateRatingWithCSSTemplate: Story<AggregateRatingProps> = ({
-  value,
-  testId,
-}) => {
-  return (
-    <Component data-with-css value={value} testId={testId}>
-      <span />
-      <span />
-      <span />
-      <span />
-      <span />
-    </Component>
-  )
-}
-
-export const AggregateRatingWithCSS = AggregateRatingWithCSSTemplate.bind({})
-AggregateRatingWithCSS.args = { value: 2 }
-
-const argTypes: ComponentArgTypes<AggregateRatingProps> = {
-  value: {
-    control: { type: 'number' },
-  },
-}
-
-export default {
-  title: 'Molecules/AggregateRating',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/molecules/Alert/stories/Alert.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Alert from '../Alert'
-
-# Alert
-
-<Canvas>
-  <Story id="molecules-alert--alert" />
-</Canvas>
-
-# Alert With Icon
-
-<Canvas>
-  <Story id="molecules-alert--alert-with-icon" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Alert} />
-
-## CSS Selectors
-
-```css
-[data-fs-alert] {
-}
-```

package/src/components/molecules/Alert/stories/Alert.stories.tsx

@@ -1,36 +0,0 @@
-import type { Meta, Story } from '@storybook/react'
-import React from 'react'
-
-import type { AlertProps } from '../Alert'
-import Component from '../Alert'
-import { ShoppingCart } from '@faststore/components'
-import mdx from './Alert.mdx'
-import { Icon } from '../../../../'
-
-const AlertTemplate: Story<AlertProps> = ({ children }) => (
-  <Component>{children}</Component>
-)
-
-export const Alert = AlertTemplate.bind({})
-Alert.args = {
-  children: 'Alert',
-}
-
-export const AlertWithIcon = AlertTemplate.bind({})
-AlertWithIcon.args = {
-  children: (
-    <>
-      <Icon component={<ShoppingCart />} />
-      <span>Alert</span>
-    </>
-  ),
-}
-
-export default {
-  title: 'Molecules/Alert',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/Banner/stories/Banner.mdx

@@ -1,63 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Banner from '../Banner'
-import BannerImage from '../BannerImage'
-import BannerContent from '../BannerContent'
-import BannerLink from '../BannerLink'
-
-# Banner
-
-<Canvas>
-  <Story id="molecules-banner--banner" />
-</Canvas>
-
-## Components
-
-The `Banner` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
-
-- `Banner`: the wrapper component, it can receive a `variant` prop to set its direction, supports `"vertical"` and `"horizontal"` values.
-- `BannerImage`: the component that wraps the image displayed in the component.
-- `BannerContent`: the component that can receive a title, description, and a `BannerLink`.
-- `BannerLink`: the banner's call-to-action link.
-
-## Props
-
-All banner-related components support all attributes also supported by the `<div>` tag.
-
-Besides those attributes, the following props are also supported:
-
-### `Banner`
-
-<ArgsTable of={Banner} />
-
-### `BannerImage`
-
-<ArgsTable of={BannerImage} />
-
-### `BannerContent`
-
-<ArgsTable of={BannerContent} />
-
-### `BannerLink`
-
-<ArgsTable of={BannerLink} />
-
-## Guidelines
-
-- Don’t hide important information in an image. If there is some important information, add it as text instead. For more information, see [Images Concepts • Images • WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/images/)
-- Use understandable links (avoid generic meaning, i.e., click here). For more information, see [Link Purpose](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html)
-
-## CSS Selectors
-
-```css
-[data-fs-banner] {
-}
-[data-fs-banner='(vertical|horizontal)'] {
-}
-[data-banner-image] {
-}
-[data-banner-content] {
-}
-[data-banner-link] {
-}
-```

package/src/components/molecules/Banner/stories/Banner.stories.tsx

@@ -1,66 +0,0 @@
-import type { Story, Meta } from '@storybook/react'
-import React from 'react'
-
-import BannerComponent from '../Banner'
-import BannerImage from '../BannerImage'
-import BannerContent from '../BannerContent'
-import BannerLink from '../BannerLink'
-import type { BannerProps } from '../Banner'
-import { Icon } from '../../../../'
-import mdx from './Banner.mdx'
-
-const RightArrow = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="18"
-    height="18"
-    viewBox="0 0 18 18"
-  >
-    <path
-      d="M10.6553 3.40717C10.3624 3.11428 9.88756 3.11428 9.59467 3.40717C9.30178 3.70006 9.30178 4.17494 9.59467 4.46783L13.3768 8.25H2.8125C2.39829 8.25 2.0625 8.58579 2.0625 9C2.0625 9.41421 2.39829 9.75 2.8125 9.75H13.3768L9.59467 13.5322C9.30178 13.8251 9.30178 14.2999 9.59467 14.5928C9.88756 14.8857 10.3624 14.8857 10.6553 14.5928L15.7178 9.53033C15.8643 9.38388 15.9375 9.19194 15.9375 9C15.9375 8.89831 15.9173 8.80134 15.8806 8.71291C15.844 8.62445 15.7897 8.54158 15.7178 8.46967L10.6553 3.40717Z"
-      fill="currentColor"
-    />
-  </svg>
-)
-
-const BannerTemplate: Story<BannerProps> = ({ testId, variant }) => (
-  <BannerComponent testId={testId} variant={variant}>
-    <BannerImage>
-      <img
-        alt="A person with hands on the pocket, carrying a round straw bag"
-        src="https://storecomponents.vtex.app/assets/fit-in/1280x613/center/middle/https%3A%2F%2Fstorecomponents.vtexassets.com%2Fassets%2Fvtex.file-manager-graphql%2Fimages%2Fedce348c-068c-4fb9-91f2-7d235d596e0f___b2822f893b14f87337d08f07f0e520ab.jpg"
-      />
-    </BannerImage>
-    <BannerContent>
-      <div>
-        <h3>Get to know our new release</h3>
-        <p>Your one-stop shop for making this summer season the best of all.</p>
-      </div>
-      <BannerLink>
-        <a href="/">
-          Shop now <Icon component={<RightArrow />} />
-        </a>
-      </BannerLink>
-    </BannerContent>
-  </BannerComponent>
-)
-
-export const Banner = BannerTemplate.bind({})
-Banner.storyName = 'Banner'
-
-const argTypes = {
-  variant: {
-    options: ['vertical', 'horizontal'],
-    control: { type: 'select' },
-  },
-}
-
-export default {
-  title: 'Molecules/Banner',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-} as Meta

package/src/components/molecules/Breadcrumb/stories/Breadcrumb.mdx

@@ -1,27 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Breadcrumb from '../Breadcrumb'
-
-# Bullets
-
-<Canvas>
-  <Story id="molecules-breadcrumb--breadcrumb" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Breadcrumb} />
-
-## CSS Selectors
-
-```css
-[data-fs-breadcrumb] {}
-
-[data-breadcrumb-list] {}
-
-[data-breadcrumb-list-item] {}
-
-[data-breadcrumb-item='(current|true)'] {}
-
-[data-breadcrumb-divider] {}
-```

package/src/components/molecules/Breadcrumb/stories/Breadcrumb.stories.tsx

@@ -1,55 +0,0 @@
-import type { Story } from '@storybook/react'
-import React from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { BreadcrumbProps } from '../Breadcrumb'
-import Component from '../Breadcrumb'
-import mdx from './Breadcrumb.mdx'
-
-const DefaultDividerIcon = (props: any) => (
-  <svg width="24" height="24" viewBox="0 0 180 180" {...props}>
-    <path d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175 l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934 c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z" />
-  </svg>
-)
-
-const BreadcrumbTemplate: Story<BreadcrumbProps> = ({ divider, testId }) => {
-  return (
-    <Component divider={divider} testId={testId}>
-      <a href="/?path=/story/molecules-breadcrumb--breadcrumb-with-icon">
-        Home
-      </a>
-      <a href="/?path=/story/molecules-breadcrumb--breadcrumb-with-icon">
-        Level 1
-      </a>
-      <a href="/?path=/story/molecules-breadcrumb--breadcrumb-with-icon">
-        Level 2
-      </a>
-      <a href="/?path=/story/molecules-breadcrumb--breadcrumb-with-icon">
-        Level 3
-      </a>
-    </Component>
-  )
-}
-
-export const Breadcrumb = BreadcrumbTemplate.bind({})
-Breadcrumb.args = { divider: '/' }
-export const BreadcrumbWithIcon = BreadcrumbTemplate.bind({})
-BreadcrumbWithIcon.args = {
-  divider: <DefaultDividerIcon />,
-}
-
-const argTypes: ComponentArgTypes<BreadcrumbProps> = {
-  divider: {
-    control: { type: 'text' },
-  },
-}
-
-export default {
-  title: 'Molecules/Breadcrumb',
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}

package/src/components/molecules/Bullets/stories/Bullets.mdx

@@ -1,25 +0,0 @@
-import { Canvas, Props, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Bullets from '../Bullets'
-
-# Bullets
-
-<Canvas>
-  <Story id="molecules-bullets--bullets" />
-</Canvas>
-
-## Props
-
-<ArgsTable of={Bullets} />
-
-## CSS Selectors
-
-```css
-[data-fs-bullets] {}
-
-[data-fs-bullet] {}
-
-[data-fs-bullet][aria-selected="true"] {}
-```
-
-This component inherits [Button](?path=/docs/atoms-button--button#css-selectors) css selectors.

package/src/components/molecules/Bullets/stories/Bullets.stories.tsx

@@ -1,64 +0,0 @@
-import type { Story } from '@storybook/react'
-import React, { useEffect, useState } from 'react'
-
-import type { ComponentArgTypes } from '../../../../typings/utils'
-import type { BulletsProps } from '../Bullets'
-import Component from '../Bullets'
-import mdx from './Bullets.mdx'
-
-const BulletsTemplate: Story<BulletsProps> = ({
-  onClick,
-  activeBullet,
-  totalQuantity,
-  ariaLabelGenerator,
-  testId,
-}) => {
-  const [localActiveBullet, setLocalActiveBullet] = useState(activeBullet)
-
-  useEffect(() => {
-    setLocalActiveBullet(activeBullet)
-  }, [activeBullet, setLocalActiveBullet])
-
-  return (
-    <Component
-      onClick={(e, idx) => {
-        onClick?.(e, idx)
-        setLocalActiveBullet(idx)
-      }}
-      activeBullet={localActiveBullet}
-      totalQuantity={totalQuantity}
-      ariaLabelGenerator={ariaLabelGenerator}
-      testId={testId}
-    />
-  )
-}
-
-export const Bullets = BulletsTemplate.bind({})
-
-const argTypes: ComponentArgTypes<BulletsProps> = {
-  totalQuantity: {
-    control: { type: 'number', min: 1 },
-    defaultValue: 5,
-    min: 1,
-  },
-  activeBullet: {
-    control: { type: 'number', min: 0 },
-    defaultValue: 3,
-    min: 0,
-  },
-  onClick: {
-    action: 'Bullet clicked',
-    table: { disable: true },
-  },
-}
-
-export default {
-  title: 'Molecules/Bullets',
-  component: Bullets,
-  argTypes,
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-}