@stackshift-ui/features 6.0.3 → 6.0.4

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/features",
   "description": "",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -34,15 +35,15 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/heading": "6.0.2",
-    "@stackshift-ui/text": "6.0.2",
-    "@stackshift-ui/image": "6.0.2",
-    "@stackshift-ui/button": "6.0.2",
-    "@stackshift-ui/card": "6.0.2",
-    "@stackshift-ui/flex": "6.0.2",
-    "@stackshift-ui/container": "6.0.2",
-    "@stackshift-ui/section": "6.0.2"
+    "@stackshift-ui/system": "6.0.3",
+    "@stackshift-ui/heading": "6.0.3",
+    "@stackshift-ui/text": "6.0.3",
+    "@stackshift-ui/image": "6.0.3",
+    "@stackshift-ui/button": "6.0.3",
+    "@stackshift-ui/section": "6.0.3",
+    "@stackshift-ui/card": "6.0.3",
+    "@stackshift-ui/container": "6.0.3",
+    "@stackshift-ui/flex": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/features.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Features } from "./features";
+
+describe.concurrent("features", () => {
+  afterEach(cleanup);
+
+  test.skip("Dummy test - test if renders without errors", ({ expect }) => {
+    const clx = "my-class";
+    render(<Features />);
+    expect(screen.getByTestId("{ kebabCase name }}").classList).toContain(clx);
+  });
+});

package/src/features.tsx

@@ -0,0 +1,64 @@
+import React, { lazy } from "react";
+
+import {
+  SectionsProps,
+  ArrayOfImageTitleAndText,
+  FeaturedItem,
+  Images,
+  LabeledRoute,
+} from "./types";
+
+const Variants = {
+  variant_a: lazy(() => import("./features_a")),
+  variant_b: lazy(() => import("./features_b")),
+  variant_c: lazy(() => import("./features_c")),
+  variant_d: lazy(() => import("./features_d")),
+  variant_e: lazy(() => import("./features_e")),
+  variant_f: lazy(() => import("./features_f")),
+  variant_g: lazy(() => import("./features_g")),
+  variant_h: lazy(() => import("./features_h")),
+};
+
+export interface FeaturesProps {
+  caption?: string;
+  title?: string;
+  description?: string;
+  features?: ArrayOfImageTitleAndText[];
+  tags?: string[];
+  featuredItems?: FeaturedItem[];
+  images?: Images[];
+  primaryButton?: LabeledRoute;
+}
+
+export interface FeaturesProps {
+  caption?: string;
+  title?: string;
+  description?: string;
+  features?: ArrayOfImageTitleAndText[];
+  tags?: string[];
+  featuredItems?: FeaturedItem[];
+  images?: Images[];
+  primaryButton?: LabeledRoute;
+}
+
+const displayName = "Features";
+
+export const Features: React.FC<SectionsProps> = ({ data }) => {
+  const variant = data?.variant;
+  const Variant = variant && Variants[variant as keyof typeof Variants];
+
+  const props = {
+    caption: data?.variants?.caption ?? undefined,
+    title: data?.variants?.title ?? undefined,
+    description: data?.variants?.description ?? undefined,
+    features: data?.variants?.arrayOfImageTitleAndText ?? undefined,
+    tags: data?.variants?.tags ?? undefined,
+    featuredItems: data?.variants?.featuredItems ?? undefined,
+    images: data?.variants?.images ?? undefined,
+    primaryButton: data?.variants?.primaryButton ?? undefined,
+  };
+
+  return Variant ? <Variant {...props} /> : null;
+};
+
+Features.displayName = displayName;

package/src/features_a.tsx

@@ -0,0 +1,95 @@
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { ArrayOfImageTitleAndText, Images } from "./types";
+
+interface FeatureItemProps {
+  feature: {
+    caption?: string | null;
+    title?: string | null;
+    plainText?: string | null;
+    mainImage?: Images;
+  };
+}
+
+export default function Features_A({ caption, title, features }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Container maxWidth={448} className="mb-16 text-center ">
+          <CaptionAndTitleText caption={caption} title={title} />
+        </Container>
+        <Flex wrap>
+          <FeatureItems features={features} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleText({ caption, title }: { caption?: string; title?: string }) {
+  return (
+    <React.Fragment>
+      {caption ? (
+        <Text weight="bold" className="text-secondary">
+          {caption}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </React.Fragment>
+  );
+}
+
+function FeatureItems({ features }: { features?: ArrayOfImageTitleAndText[] }) {
+  if (!features) return null;
+
+  return (
+    <React.Fragment>
+      {features?.map(feature => {
+        return <FeatureItem feature={feature} key={feature._key} />;
+      })}
+    </React.Fragment>
+  );
+}
+
+function FeatureItem({ feature }: FeatureItemProps) {
+  return (
+    <div className="w-full px-4 mt-16 mb-12 md:w-1/2 lg:mb-0 lg:w-1/4">
+      {feature?.mainImage?.image ? <FeatureImage feature={feature} /> : null}
+
+      {feature?.title ? (
+        <Text weight="bold" className="mb-4 text-gray-500" fontSize="xl">
+          {feature?.title}
+        </Text>
+      ) : null}
+      {feature?.plainText ? (
+        <Text muted className="leading-loose">
+          {feature?.plainText}
+        </Text>
+      ) : null}
+    </div>
+  );
+}
+
+function FeatureImage({ feature }: FeatureItemProps) {
+  if (!feature?.mainImage?.image) return null;
+
+  return (
+    <span className="inline-block p-3 mb-4 rounded bg-secondary-foreground text-primary-foreground md:mb-6">
+      <Image
+        className="object-scale-down"
+        src={`${feature?.mainImage?.image}`}
+        width={40}
+        height={40}
+        alt={feature?.mainImage?.alt ?? `features-image-`}
+      />
+    </span>
+  );
+}
+
+export { Features_A };

package/src/features_b.tsx

@@ -0,0 +1,119 @@
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { ArrayOfImageTitleAndText } from "./types";
+
+export default function Features_B({ caption, title, description, features, tags }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex wrap align="center">
+          <div className="w-full mb-12 lg:mb-0 lg:w-1/2">
+            <Container maxWidth={448}>
+              <FeatureInfo caption={caption} title={title} description={description} />
+              <TagList tags={tags} />
+            </Container>
+          </div>
+          <FeaturesLists features={features} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function FeatureInfo({
+  caption,
+  title,
+  description,
+}: {
+  caption?: string;
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <React.Fragment>
+      {caption && (
+        <Text weight="bold" className="text-primary">
+          {caption}
+        </Text>
+      )}
+      {title && <Heading fontSize="3xl">{title}</Heading>}
+      {description && (
+        <Text muted className="mb-6 leading-loose">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function TagList({ tags }: { tags?: string[] }) {
+  if (!tags) return null;
+
+  return (
+    <ul>
+      {tags &&
+        tags.map(item => (
+          <li className="flex mb-4" key={item}>
+            <svg
+              className="w-6 h-6 mr-2 text-secondary"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor">
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <Text muted weight="bold">
+              {item}
+            </Text>
+          </li>
+        ))}
+    </ul>
+  );
+}
+
+function FeaturesLists({ features }: { features?: ArrayOfImageTitleAndText[] }) {
+  if (!features) return null;
+
+  return (
+    <Flex wrap className="w-full lg:w-1/2">
+      {features &&
+        features?.map((feature, index) => (
+          <div
+            className={`w-full px-4 mb-8 md:w-1/2 ${index % 2 === 0 ? `lg:mb-0` : "lg:mt-12"}`}
+            key={index}>
+            <Card className="py-6 pl-6 pr-4 mb-8">
+              <span className="inline-block p-3 mb-4 rounded-lg bg-secondary-foreground">
+                {feature?.mainImage?.image && (
+                  <Image
+                    className="object-scale-down"
+                    src={`${feature?.mainImage?.image}`}
+                    width={40}
+                    height={40}
+                    alt={feature?.mainImage?.alt ?? `features-image-${index}`}
+                  />
+                )}
+              </span>
+              <Text weight="bold" fontSize="2xl" className="mb-2 text-gray-500">
+                {feature?.title}
+              </Text>
+              <Text muted className="leading-loose">
+                {feature?.plainText}
+              </Text>
+            </Card>
+          </div>
+        ))}
+    </Flex>
+  );
+}
+
+export { Features_B };

package/src/features_c.tsx

@@ -0,0 +1,76 @@
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { ArrayOfImageTitleAndText } from "./types";
+
+export default function Features_C({ caption, title, features }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Container maxWidth={448} className="mb-16 text-center ">
+          <CaptionAndTitleSection caption={caption} title={title} />
+        </Container>
+        <FeatureItems features={features} />
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleSection({ caption, title }: { caption?: string; title?: string }) {
+  return (
+    <React.Fragment>
+      {caption ? (
+        <Text weight="bold" className="text-secondary">
+          {caption}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </React.Fragment>
+  );
+}
+
+function FeatureItems({ features }: { features?: ArrayOfImageTitleAndText[] }) {
+  if (!features) return null;
+
+  return (
+    <Flex wrap justify="start" className="-mx-3">
+      {features.map(feature => {
+        return <FeatureItem feature={feature} key={feature._key} />;
+      })}
+    </Flex>
+  );
+}
+
+function FeatureItem({ feature }: { feature: ArrayOfImageTitleAndText }) {
+  return (
+    <div className="w-full px-3 mb-6 lg:w-1/2">
+      <Card className="flex flex-wrap h-full p-6">
+        <div className="self-start inline-block p-3 mb-4 mr-6 rounded-lg bg-secondary-foreground md:p-5 lg:mb-0">
+          {feature?.mainImage?.image && (
+            <Image
+              className="object-scale-down"
+              src={`${feature?.mainImage?.image}`}
+              width={40}
+              height={40}
+              alt={feature?.mainImage?.alt ?? "features-main-image"}
+            />
+          )}
+        </div>
+        <div className="w-full lg:w-2/3">
+          <Text fontSize="2xl" weight="bold" className="mb-2 text-gray-500">
+            {feature?.title}
+          </Text>
+          <Text muted>{feature?.plainText}</Text>
+        </div>
+      </Card>
+    </div>
+  );
+}
+
+export { Features_C };

package/src/features_d.tsx

@@ -0,0 +1,74 @@
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { ArrayOfImageTitleAndText } from "./types";
+
+export default function Features_D({ caption, title, features }: FeaturesProps) {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Container maxWidth={448} className="mb-8 text-center">
+          <CaptionAndTitleSection caption={caption} title={title} />
+        </Container>
+        <FeatureItems features={features} />
+      </Container>
+    </Section>
+  );
+}
+
+function CaptionAndTitleSection({ caption, title }: { caption?: string; title?: string }) {
+  return (
+    <React.Fragment>
+      {caption ? (
+        <Text weight="bold" className="text-primary">
+          {caption}
+        </Text>
+      ) : null}
+      {title ? <Heading fontSize="3xl">{title}</Heading> : null}
+    </React.Fragment>
+  );
+}
+
+function FeatureItems({ features }: { features?: ArrayOfImageTitleAndText[] }) {
+  if (!features) return null;
+
+  return (
+    <Flex wrap justify="center">
+      {features.map(feature => (
+        <FeatureItem feature={feature} key={feature._key} />
+      ))}
+    </Flex>
+  );
+}
+
+function FeatureItem({ feature }: { feature: ArrayOfImageTitleAndText }) {
+  return (
+    <div className="w-full px-4 mt-8 lg:mb-0 lg:w-1/3">
+      <Card className="h-full px-6 py-12 text-center">
+        <div className="self-start inline-block p-3 mb-6 rounded-lg bg-secondary-foreground md:p-5">
+          {feature?.mainImage?.image && (
+            <Image
+              className="object-scale-down"
+              src={`${feature?.mainImage?.image}`}
+              width={40}
+              height={40}
+              alt={feature?.mainImage?.alt ?? `features-image-`}
+            />
+          )}
+        </div>
+        <Text fontSize="xl" weight="bold" className="px-8 mb-4 text-gray-500">
+          {feature?.title}
+        </Text>
+        <Text muted>{feature?.plainText}</Text>
+      </Card>
+    </div>
+  );
+}
+
+export { Features_D };

package/src/features_e.tsx

@@ -0,0 +1,143 @@
+import { Button } from "@stackshift-ui/button";
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { FeaturesProps } from ".";
+import { FeaturedItem } from "./types";
+
+export default function Features_E({ featuredItems }: FeaturesProps) {
+  //for image carousel
+  let [item, setItem] = React.useState<number>(0);
+
+  const slider = (action: string) => {
+    if (featuredItems) {
+      action === "next"
+        ? item !== featuredItems.length - 1
+          ? setItem(prevState => prevState + 1)
+          : setItem(0)
+        : item >= 1
+          ? setItem(prevState => prevState - 1)
+          : setItem(featuredItems.length - 1);
+    }
+  };
+
+  return (
+    <Section className="py-20 overflow-x-auto bg-background">
+      <Container maxWidth={1280}>
+        <Flex className="relative">
+          <SliderControls featuredItems={featuredItems} slider={slider}>
+            <div className="order-1 w-full ml-auto xl:w-4/5">
+              <ImageSection featuredItems={featuredItems} item={item} />
+              <FeaturesInfo featuredItems={featuredItems} item={item} />
+            </div>
+          </SliderControls>
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function ImageSection({ featuredItems, item }: { featuredItems?: FeaturedItem[]; item: number }) {
+  if (!featuredItems?.[item]?.mainImage?.image) return null;
+  return (
+    <div className="mx-auto overflow-hidden rounded-md md:max-w-xl xl:max-w-4xl">
+      <Image
+        className="relative object-cover rounded-global"
+        src={`${featuredItems?.[item]?.mainImage?.image}`}
+        sizes="100vw"
+        width={896}
+        height={575}
+        alt={featuredItems?.[item]?.mainImage?.alt ?? `features-image-${item}`}
+      />
+    </div>
+  );
+}
+
+function FeaturesInfo({ featuredItems, item }: { featuredItems?: FeaturedItem[]; item: number }) {
+  if (!featuredItems) return null;
+
+  return (
+    <Card className="top-0 left-0 max-w-xl p-6 mx-auto text-center bg-white md:mt-12 md:p-10 lg:mt-12 lg:p-10 xl:absolute xl:mx-0 xl:mt-20 xl:py-24">
+      <Text weight="bold" className="text-xs lg:text-md md:text-sm xl:text-lg text-secondary">
+        {featuredItems?.[item]?.subtitle && featuredItems?.[item]?.subtitle}
+      </Text>
+      <Heading fontSize="3xl">
+        {featuredItems?.[item]?.title && featuredItems?.[item]?.title}
+      </Heading>
+      <Text
+        muted
+        className="text-xs leading-loose text-center md:mt-5 md:text-sm lg:mt-5 lg:text-sm">
+        {featuredItems?.[item]?.description && featuredItems?.[item]?.description}
+      </Text>
+    </Card>
+  );
+}
+
+function SliderControls({
+  featuredItems,
+  children,
+  slider,
+}: {
+  featuredItems?: FeaturedItem[];
+  children: React.ReactNode;
+  slider: (action: string) => void;
+}) {
+  if (!featuredItems) return null;
+
+  return (
+    <React.Fragment>
+      <div className="absolute left-0 z-40 items-center mt-20 -mx-3 order-0 md:mt-40 lg:mt-60 xl:-mx-6 xl:flex">
+        {featuredItems?.length >= 2 && (
+          <Button
+            as="button"
+            ariaLabel="Show Previous Feature"
+            className="z-10 p-4 text-white "
+            onClick={() => slider("prev")}>
+            <svg
+              className="w-4 h-4"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
+            </svg>
+          </Button>
+        )}
+      </div>
+      {children}
+      <div className="absolute right-0 z-40 items-center order-2 mt-20 -mx-3 md:mt-40 lg:mt-60 xl:-mx-6 xl:flex">
+        {featuredItems?.length >= 2 && (
+          <Button
+            as="button"
+            ariaLabel="Show Next Feature"
+            className="p-4 text-white "
+            onClick={() => slider("next")}>
+            <svg
+              className="w-4 h-4"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
+            </svg>
+          </Button>
+        )}
+      </div>
+    </React.Fragment>
+  );
+}
+
+export { Features_E };