@asantemedia-org/edwardsvacuum-design-system 1.0.0

package/README.md

@@ -0,0 +1,142 @@
+# EdwardsVacuum Design System
+
+## Overview
+
+The **EdwardsVacuum Design System** is a comprehensive design system built to streamline the development of consistent and reusable UI components for the EdwardsVacuum project. This project is built using Next.js, Storybook, and various supporting libraries and tools.
+
+## Project Structure
+
+The project is organized with the following key scripts and dependencies:
+
+- **Next.js** for server-side rendering and building the design system.
+- **Storybook** for developing and showcasing UI components in isolation.
+- **FontAwesome** for incorporating scalable vector icons and social logos.
+- **TailwindCSS** for utility-first CSS framework.
+
+## Prerequisites
+
+Before running this project, ensure you have the following:
+
+1. **Node.js** installed.
+2. **Yarn** or **npm** as your package manager.
+
+## Installation
+
+To get started, clone the repository and install the required dependencies:
+
+```bash
+git clone <repository_url>
+cd edwardsvacuum-design-system
+yarn install
+```
+
+## Environment Setup
+
+This project requires an environment variable for FontAwesome to function correctly. The `FONTAWESOME_PACKAGE_TOKEN` is required for accessing FontAwesome Pro icons.
+
+### Setting Up the Token
+
+You can obtain the `FONTAWESOME_PACKAGE_TOKEN` by contacting [bernard@asantemedia.co.uk](mailto:bernard@asantemedia.co.uk).
+
+Once you have the token, set it in your environment:
+
+1. **Locally**:  
+   Add it to your terminal session:
+   ```bash
+   export FONTAWESOME_PACKAGE_TOKEN=your_token_here
+   ```
+
+Replace `your_token_here` with the actual token.
+
+## Scripts
+
+The following scripts are available in the project:
+
+- **Development**:
+  ```bash
+  yarn dev
+  ```
+  Starts the Next.js development server.
+
+- **Build**:
+  ```bash
+  yarn build
+  ```
+  Builds the project for production.
+
+- **Start**:
+  ```bash
+  yarn start
+  ```
+  Starts the Next.js production server.
+
+- **Lint**:
+  ```bash
+  yarn lint
+  ```
+  Runs ESLint to analyze the code for potential errors.
+
+- **Storybook**:
+  ```bash
+  yarn storybook
+  ```
+  Starts the Storybook development server.
+
+- **Build Storybook**:
+  ```bash
+  yarn build-storybook
+  ```
+  Builds the Storybook static files.
+
+- **AEM Integration**:
+  - **Build AEM Dialogs**:
+    ```bash
+    yarn build-aem-dialogs
+    ```
+    Generates AEM component dialogs.
+
+  - **Copy Static AEM Files**:
+    ```bash
+    yarn copy-static-aem-files
+    ```
+    Copies the necessary static files for AEM integration.
+
+  - **Clean AEM**:
+    ```bash
+    yarn aem-clean
+    ```
+    Cleans the target location for AEM deployment.
+
+  - **Install AEM**:
+    ```bash
+    yarn aem-install
+    ```
+    Builds and copies AEM dialogs and static files.
+
+  - **Clean & Install AEM**:
+    ```bash
+    yarn aem-clean-install
+    ```
+    Cleans and installs AEM files in one command.
+
+- **Chromatic**:
+  ```bash
+  yarn chromatic
+  ```
+  Publishes Storybook to Chromatic for visual regression testing.
+
+## CI/CD Implementation
+
+The project is set up with a CI/CD pipeline that triggers deployments only on merges to the `development` branch. This ensures that changes are properly reviewed and tested before being deployed to production.
+
+## License
+
+This project is currently **UNLICENSED** and is intended for internal use only. Redistribution or use outside the intended context is prohibited.
+
+## Contribution
+
+Please follow the project's contribution guidelines when contributing to this repository. Ensure all changes are made in feature branches and are merged into the `development` branch via pull requests.
+
+## Contact
+
+For any issues or inquiries related to this project, please contact [bernard@asantemedia.co.uk](mailto:bernard@asantemedia.co.uk).

package/dist/app/api/hello/route.d.ts

@@ -0,0 +1 @@
+export declare function GET(request: Request): Promise<Response>;

package/dist/app/layout.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import './globals.css';
+export declare const metadata: {
+    title: string;
+    description: string;
+};
+export default function RootLayout({ children, }: {
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/app/page.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Home(): JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default as AlgoliaDynamicSearch } from "@stories/experiences/Algolia-dynamic-search";

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+export { default as AlgoliaDynamicSearch } from '@stories/experiences/Algolia-dynamic-search';
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var AlgoliaDynamicSearch = require('@stories/experiences/Algolia-dynamic-search');
+
+
+
+exports.AlgoliaDynamicSearch = AlgoliaDynamicSearch;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/stories/atoms/forms/checkbox/checkbox.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import './checkbox.scss';
+interface CheckboxProps {
+    label?: string;
+    name?: string;
+    onChange?: any;
+    containerClassName?: string;
+    custom?: boolean;
+}
+export declare const Checkbox: ({ label, name, onChange, containerClassName, custom }: CheckboxProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Meta } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+export declare const Default: () => JSX.Element;
+export declare const Custom: () => JSX.Element;

package/dist/stories/atoms/forms/input/input.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import './input.scss';
+interface InputProps {
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    name?: string;
+    id?: string;
+    value?: string;
+    onClick?: any;
+    onChange?: any;
+    onFocus?: any;
+    className?: string;
+    icon?: any;
+    containerClassName?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
+    pattern?: string;
+    autoComplete?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    size?: number;
+    step?: number;
+    tabIndex?: number;
+    iconOnClick?: any;
+    showButton?: boolean;
+}
+export declare const Input: ({ label, placeholder, type, name, id, className, containerClassName, onClick, onFocus, onChange, icon, iconOnClick, showButton, value }: InputProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/input/input.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Meta } from "@storybook/react";
+import { Input } from "./input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+export declare const Search: (props: any) => JSX.Element;
+export declare const SearchWithButton: () => JSX.Element;

package/dist/stories/atoms/forms/select/select.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import './select.scss';
+interface SelectProps {
+    label?: string;
+    name?: string;
+    id?: string;
+    options?: any;
+    className?: string;
+    containerClassName?: string;
+    custom?: boolean;
+    icon?: any;
+    iconPosition?: string;
+    style?: any;
+}
+export declare const Select: ({ label, name, id, className, containerClassName, options, custom, icon, iconPosition, style }: SelectProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/select/select.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const Styled: Story;

package/dist/stories/atoms/forms/text/counrty-selector.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ *  A component to select a country from a list of countries
+ */
+import './counrty-selector.scss';
+interface CountrySelectorProps {
+    countries?: Array<any>;
+}
+export declare const CountrySelector: ({ countries }: CountrySelectorProps) => JSX.Element;
+export {};

package/dist/stories/atoms/forms/text/text.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import './text.scss';
+interface TextProps {
+    label?: string;
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    className?: string;
+    containerClassName?: string;
+    onChange?: any;
+    value?: string;
+    error?: boolean;
+    allowDropdown?: boolean;
+    style?: any;
+}
+export declare const Text: ({ label, name, id, placeholder, className, containerClassName, onChange, value, error, allowDropdown, style }: TextProps) => JSX.Element;
+export {};
+/**
+ * To do:
+ * 1. Refactor code to make more generic and reusable for other input types
+ */ 

package/dist/stories/atoms/forms/text/text.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./text";
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const Default: Story;
+export declare const DropDown: Story;

package/dist/stories/components/Banner/Banner.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import './banner.scss';
+interface BannerProps {
+    style?: string;
+    content?: any;
+    buttonStyle?: string;
+    buttonText?: string;
+    image?: any;
+    video?: any;
+    colour?: string;
+    contentColour?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Banner: ({ image, content, style, video, colour, contentColour, buttonStyle, buttonText }: BannerProps) => JSX.Element;
+export {};

package/dist/stories/components/Banner/Banner.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Banner } from "./Banner";
+declare const meta: Meta<typeof Banner>;
+export default meta;
+type Story = StoryObj<typeof Banner>;
+export declare const Default: Story;
+export declare const Video: Story;
+export declare const AlignLeft: Story;
+export declare const AlignRight: Story;
+export declare const OverlayLeft: Story;
+export declare const OverlayCentre: Story;
+export declare const OverlayRight: Story;

package/dist/stories/components/Banner/banner.dialog.d.ts

@@ -0,0 +1,2 @@
+import { AEMTouchUIDialog } from '@teclead/aem-generator/models';
+export declare const dialog: AEMTouchUIDialog;

package/dist/stories/components/Banner/banner.html.d.ts

@@ -0,0 +1 @@
+export declare const templateBanner: string;

package/dist/stories/components/Button/Button.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import './button.scss';
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    style?: string;
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ style, label, ...props }: ButtonProps) => JSX.Element;
+export {};

package/dist/stories/components/Button/Button.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Tertiary: Story;
+export declare const outlineWhite: Story;
+export declare const outlineGrey: Story;

package/dist/stories/components/Card/card.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import './card.scss';
+import { CardProps } from './card.types';
+export declare const Card: ({ contentCategoryLabel, className, colour, date, size, title, cta, imageUrl, imageAlt, cardStyle, cardLink, city, country, onClick }: CardProps) => JSX.Element;
+export declare const ProductCard: ({ className, size, title, imageUrl, imageAlt, productPrice, showProductPrice, cardLink, cardStyle, cta, onClick }: CardProps) => JSX.Element;
+export declare const VideoCard: ({ className, title, imageUrl, imageAlt, cardStyle, duration, videoSrc, videoTitle, videoThumbnail }: CardProps) => JSX.Element;

package/dist/stories/components/Card/card.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./card";
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const WithNoImage: Story;
+export declare const WithNoLabel: Story;
+export declare const WithLabel: Story;
+export declare const WithOverlay: Story;
+export declare const WithPanel: Story;
+export declare const WithProduct: Story;
+export declare const WithVideoWhite: Story;
+export declare const WithVideoGray: Story;
+export declare const WithVideoHover: Story;
+export declare const WithVideoActive: Story;

package/dist/stories/components/Card/card.types.d.ts

@@ -0,0 +1,22 @@
+export interface CardProps {
+    className?: string;
+    contentCategoryLabel?: string;
+    title?: string;
+    colour?: any;
+    date?: string;
+    size?: string;
+    cta?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    cardStyle?: string;
+    productPrice?: string;
+    showProductPrice?: boolean;
+    cardLink?: string;
+    duration?: string;
+    videoThumbnail?: string;
+    videoSrc?: string;
+    videoTitle?: string;
+    city?: string;
+    country?: string;
+    onClick?: () => void;
+}

package/dist/stories/components/Expert-banner/expert.banner.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import './expert.banner.scss';
+interface ExpertBannerProps {
+    name?: string;
+    role?: string;
+    region?: string;
+    phone?: string;
+    email?: string;
+    image?: string;
+}
+export declare const ExpertBanner: ({ name, role, region, phone, email, image }: ExpertBannerProps) => JSX.Element;
+export {};

package/dist/stories/components/Expert-banner/expert.banner.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ExpertBanner } from './expert.banner';
+declare const meta: Meta<typeof ExpertBanner>;
+export default meta;
+type Story = StoryObj<typeof ExpertBanner>;
+export declare const Default: Story;

package/dist/stories/components/Pagination/pagination.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import './pagination.scss';
+export interface PaginationProps {
+    className?: string;
+    onClick?: any;
+    onPageChange?: any;
+    currentPage?: number;
+    totalPages?: any;
+    totalItems?: number;
+    limitPerPage?: number;
+    totalItemsCount?: number;
+    pageList?: any;
+    style?: string;
+}
+export declare const Pagination: ({ className, onClick, currentPage, totalPages, onPageChange, totalItemsCount, style }: PaginationProps) => JSX.Element;
+/**
+ *
+ * TODO:
+ * 1. hide prev and next button when there is no more pages
+ */ 

package/dist/stories/components/Pagination/pagination.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./pagination";
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const Outline: Story;
+export declare const Filled: Story;

package/dist/stories/components/Popup/Popup.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import './popup.scss';
+interface PopupProps {
+    style?: string;
+    content?: any;
+    buttonStyle?: string;
+    buttonText?: string;
+    image?: any;
+    contentColour?: string;
+    mobileVersion?: string;
+    desktopPosition?: string;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Popup: ({ content, contentColour, buttonStyle, buttonText, image, mobileVersion, desktopPosition }: PopupProps) => JSX.Element;
+export {};

package/dist/stories/components/Popup/Popup.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Popup } from "./Popup";
+declare const meta: Meta<typeof Popup>;
+export default meta;
+type Story = StoryObj<typeof Popup>;
+export declare const Default: Story;
+export declare const Dark: Story;
+export declare const DefaultWithImage: Story;
+export declare const DarkWithImage: Story;

package/dist/stories/components/Popup/icons/ChevronDown.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgComponent;

package/dist/stories/components/Popup/icons/Close.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgComponent: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgComponent;

package/dist/stories/components/Popup/popup.dialog.d.ts

@@ -0,0 +1,2 @@
+import { AEMTouchUIDialog } from '@teclead/aem-generator/models';
+export declare const dialog: AEMTouchUIDialog;

package/dist/stories/components/Popup/popup.html.d.ts

@@ -0,0 +1 @@
+export declare const templatePopup: string;

package/dist/stories/components/Video/Video.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import './video.scss';
+interface VideoProps {
+    /**
+     * Custom className
+     */
+    className?: string;
+    /**
+     * Is this the principal call to action on the page?
+     */
+    style?: string;
+    /**
+     * Video contents
+     */
+    label?: string;
+    /**
+     * Video Source
+     */
+    videoSrc?: string;
+    /**
+     * Video Poster
+     */
+    videoPoster?: string;
+    /**
+     * Video Name
+     */
+    videoName?: string;
+    /**
+     * ID
+     */
+    Id?: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Video: ({ style, label, ...props }: VideoProps) => JSX.Element;
+export declare const InternalVideo: ({ className, style, label, videoSrc, videoPoster, videoName, Id, ...props }: VideoProps) => JSX.Element;
+export {};

package/dist/stories/components/Video/Video.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Video } from "./Video";
+declare const meta: Meta<typeof Video>;
+export default meta;
+type Story = StoryObj<typeof Video>;
+export declare const Primary: Story;
+export declare const Internal: Story;
+export declare const InternalPlaying: Story;

package/dist/stories/experiences/Accordion/accordion.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AccordionProps } from './accordion.types';
+export declare const Accordion: ({ items, expanded, state, className }: AccordionProps) => JSX.Element;

package/dist/stories/experiences/Accordion/accordion.item.d.ts

@@ -0,0 +1,9 @@
+import './accordion.scss';
+interface AccordionItem {
+    item?: any;
+    expanded?: boolean;
+    state?: any;
+    className?: string;
+}
+export declare const AccordionItem: ({ item, expanded, state, className }: AccordionItem) => any;
+export {};

package/dist/stories/experiences/Accordion/accordion.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./accordion";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Default: Story;
+export declare const DefaultExpanded: Story;
+export declare const ExpandedSingle: Story;
+export declare const ExpandedMultiple: Story;
+/**
+ *
+ *
+ *
+ */

package/dist/stories/experiences/Accordion/accordion.types.d.ts

@@ -0,0 +1,22 @@
+export interface AccordionProps {
+    items?: {
+        id: number;
+        label: string;
+        title?: string;
+        text?: string;
+        image?: {
+            alt: string;
+            path: {
+                src: string;
+            };
+        };
+        link?: {
+            text: string;
+            path: string;
+        };
+        expanded?: boolean;
+    }[];
+    expanded?: boolean;
+    state?: string;
+    className?: string;
+}