How to use the vtex.css-handles.useCssHandles function in vtex

To help you get started, we’ve selected a few vtex examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github vtex-apps / store-components / react / components / SKUSelector / components / ErrorMessage.tsx View on Github external
function ErrorMessage() {
  const handles = useCssHandles(CSS_HANDLES)
  const className = `${handles.errorMessage} c-danger`

  return (
    <FormattedMessage id="store/sku-selector.variation.select-an-option">
      {message => (
        <>{' '}{/* this space is necessary */}
          <span className={className}>
            {message}
          </span>
        </>
      )}
    </FormattedMessage>
  )
}
github vtex-apps / store-components / react / components / SearchBar / components / AutocompleteInput.js View on Github external
const AutocompleteInput = ({
  onClearInput,
  compactMode,
  value,
  hasIconLeft,
  iconBlockClass,
  iconClasses,
  autoFocus,
  ...restProps
}) => {
  const inputRef = useRef(null)
  const handles = useCssHandles(CSS_HANDLES)

  useEffect(() => {
    const changeClassInput = () => {
      if (compactMode) {
        inputRef.current.placeholder = ''
        inputRef.current.classList.add(handles.paddingInput)
      }
    }

    changeClassInput()
    autoFocus && inputRef.current.focus()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const suffix = (
    <span
github vtex-apps / store-components / react / components / InfoCard / index.js View on Github external
subhead,
  callToActionMode,
  callToActionText,
  callToActionUrl,
  textPosition,
  textAlignment,
  imageUrl,
  mobileImageUrl,
  imageActionUrl,
  intl,
  htmlId,
}) => {
  const {
    hints: { mobile },
  } = useRuntime()
  const handles = useCssHandles(CSS_HANDLES)
  const paddingClass =
    textPosition === textPostionValues.LEFT ? 'pr4-ns' : 'pl4-ns'

  // We ignore textAlignment tokens when full image mode
  const alignToken = isFullModeStyle
    ? safelyGetToken(alignTokens, textPosition, 'textPosition')
    : safelyGetToken(alignTokens, textAlignment, 'textAlignment')
  const itemsToken = isFullModeStyle
    ? safelyGetToken(itemsTokens, textPosition, 'textPosition')
    : safelyGetToken(itemsTokens, textAlignment, 'textAlignment')
  const justifyToken = safelyGetToken(
    justifyTokens,
    textPosition,
    'textPosition'
  )
  const flexOrderToken = safelyGetToken(
github vtex-apps / store-components / react / components / ProductSpecifications / index.js View on Github external
const ProductSpecifications = ({
  tabsMode,
  specifications,
  collapsible = 'always',
  hiddenSpecifications,
  visibleSpecifications,
  shouldCollapseInTabChange,
}) => {
  const [currentTab, setCurrentTab] = useState(0)
  const [collapsed, setCollapsed] = useState(true)
  const handles = useCssHandles(CSS_HANDLES)
  const { isMobile } = useDevice()

  const shouldBeCollapsible = Boolean(
    collapsible === 'always' ||
      (collapsible === 'mobileOnly' && isMobile) ||
      (collapsible === 'desktopOnly' && !isMobile)
  )

  const handleTabChange = tabIndex => {
    setCurrentTab(tabIndex)
    if (shouldCollapseInTabChange) {
      setCollapsed(true)
    }
  }

  const getSpecificationItems = () => {
github vtex-apps / store-components / react / components / ProductDescription / index.js View on Github external
const ProductDescription = ({ description, collapseContent, title, intl }) => {
  if (!description) {
    return null
  }

  const descriptionParsed = useMemo(() => HtmlParser(description), [
    description,
  ])

  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={handles.productDescriptionContainer}>
      <FormattedMessage id="store/product-description.title">
        {txt => (
          <h2
            className={`${handles.productDescriptionTitle} t-heading-5 mb5 mt0`}
          >
            {title ? formatIOMessage({ id: title, intl }) : txt}
          </h2>
        )}
      </FormattedMessage>

      <div className={`${handles.productDescriptionText} c-muted-1`}>
        {collapseContent ? (
          <GradientCollapse collapseHeight={220}>
github vtex-apps / store-components / react / components / ProductImages / components / Carousel / ThumbnailSwiper.js View on Github external
const ThumbnailSwiper = ({
  isThumbsVertical,
  slides,
  swiperParams,
  thumbUrls,
  position,
  onThumbClick,
  activeIndex,
  thumbnailAspectRatio,
  thumbnailMaxHeight,
}) => {
  const hasThumbs = slides.length > 1
  const handles = useCssHandles(CSS_HANDLES)

  const thumbClasses = classNames(`${handles.carouselGaleryThumbs} dn h-auto`, {
    'db-ns': hasThumbs,
    mt3: !isThumbsVertical,
    'w-20 bottom-0 top-0 absolute': isThumbsVertical,
    'left-0':
      isThumbsVertical && position === THUMBS_POSITION_HORIZONTAL.LEFT,
    'right-0':
      isThumbsVertical && position === THUMBS_POSITION_HORIZONTAL.RIGHT,
  })

  return (
    <div className={thumbClasses} data-testid="thumbnail-swiper">
      <Swiper {...swiperParams} shouldSwiperUpdate>
        {slides.map((slide, i) => {
          const itemContainerClasses = classNames('swiper-slide mb5 pointer',
github vtex-apps / store-components / react / components / ProductBrand / index.js View on Github external
const ProductBrand = ({
  displayMode = DISPLAY_MODE.LOGO,
  fallbackToText = true,
  loadingPlaceholder = DISPLAY_MODE.LOGO,
  /** TODO: decide whether the prop width should be supported
   * It makes sense at surface, but setting both width and height
   * messes with the alignment of the logo, due to how our image
   * server handles resizing. */
  height = 100,
  excludeBrands,
  logoWithLink,
  brandName: brandNameProp,
  brandId: brandIdProp,
}) => {
  const { brandName, brandId } = useBrandInfoProps(brandNameProp, brandIdProp)
  const handles = useCssHandles(CSS_HANDLES)

  if (!brandName || !brandId) {
    return null
  }

  /** Certain brands (e.g. placeholder brands) can be filtered out via theme config */
  if (shouldExcludeBrand(brandName, brandId, excludeBrands)) {
    return null
  }

  const brandNameElement = (
    <span className={`${handles.productBrandName}`}>{brandName}</span>
  )

  const BrandContainer = ({ children }) => (
    <div className={`${handles.productBrandContainer}`}>{children}</div>
github vtex-apps / store-components / react / components / BuyButton / index.js View on Github external
skuItems,
  onAddStart,
  onAddFinish,
  setMinicartOpen,
  available = true,
  orderFormContext,
  isOneClickBuy = false,
  children,
  disabled: disabledProp,
  shouldAddToCart = true,
  shouldOpenMinicart = false,
  showTooltipOnSkuNotSelected = true,
  checkoutUrl,
  customToastURL = checkoutUrl,
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  const [isAddingToCart, setAddingToCart] = useState(false)
  const { showToast } = useContext(ToastContext)
  const {
    skuSelector = {
      areAllVariationsSelected: true,
    },
  } = useProduct()
  const dispatch = useProductDispatch()
  const { settings = {}, showInstallPrompt } = usePWA() || {}
  const { promptOnCustomEvent } = settings
  const translateMessage = useCallback(id => intl.formatMessage({ id: id }), [
    intl,
  ])
  const orderFormItems = path(['orderForm', 'items'], orderFormContext)
  const { utmParams, utmiParams } = useMarketingSessionParams()
github vtex-apps / store-components / react / components / Logo / index.js View on Github external
const Logo = ({
  url,
  href,
  width,
  height,
  title,
  mobileWidth,
  mobileHeight,
}) => {
  const {
    amp,
    account,
    hints: { mobile },
  } = useRuntime()
  const handles = useCssHandles(CSS_HANDLES)
  const logoClassNames = classNames('store-logo', handles.logoContainer, {
    [styles.sizeDesktop]: !mobile,
    [styles.sizeMobile]: mobile,
  })

  const imgWidth = mobile && mobileWidth ? mobileWidth : width
  const imgHeight = mobile && mobileHeight ? mobileHeight : height

  const imageUrl = url && url.replace(/{{account}}/g, account)

  let image = null

  if (amp && url) {
    image = (
      <Amp.AmpImg
        specName="default"
github vtex-apps / store-components / react / components / ProductName / index.js View on Github external
productReferenceClass,
  brandNameClass,
  skuNameClass,
  loaderClass,
  className,
  name,
  styles,
  skuName,
  showSku = false,
  brandName,
  showBrandName = false,
  productReference,
  showProductReference = false,
  tag: Wrapper = 'div',
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  const Loader = (loaderProps = {}) => (
    <div
      className={classNames(
        handles.productNameContainer,
        handles.productNameLoader,
        loaderProps.className
      )}
    >
      <ContentLoader
        style={{
          width: '100%',
          height: '100%',
        }}
        width={456}
        height={100}