@royaloperahouse/chord 0.1.0 → 0.3.0

package/dist/components/atoms/Account/Account.d.ts

@@ -1,3 +1,3 @@
 import { IAccountProps } from '../../../types/navigation';
-declare const Account: ({ title, options, onClick, iconName, titleLink }: IAccountProps) => JSX.Element;
+declare const Account: ({ title, options, onClick, iconName, titleLink, colorPrimary }: IAccountProps) => JSX.Element;
 export default Account;

package/dist/components/atoms/Basket/Basket.d.ts

@@ -1,3 +1,3 @@
 import { IBasketProps } from '../../../types/navigation';
-declare const Basket: ({ text, selected, numItems, onClick }: IBasketProps) => JSX.Element;
+declare const Basket: ({ text, selected, numItems, onClick, colorPrimary }: IBasketProps) => JSX.Element;
 export default Basket;

package/dist/components/atoms/Dropdown/Dropdown.d.ts

@@ -1,3 +1,3 @@
 import { IDropdownProps } from '../../../types/types';
-declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, }: IDropdownProps) => JSX.Element;
+declare const Dropdown: ({ title, titleLink, selected, options, onChange, iconName, isMobileBehaviour, withOptionsInMobile, withIcon, colorPrimary, }: IDropdownProps) => JSX.Element;
 export default Dropdown;

package/dist/components/atoms/Dropdown/Dropdown.style.d.ts

@@ -1,4 +1,4 @@
 import { IDropdownProps } from '../../../types/types';
 export declare const TabContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const OptionItem: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const OptionItem: import("styled-components").StyledComponent<"a", any, IDropdownProps, never>;
 export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, IDropdownProps, never>;

package/dist/components/atoms/Icons/SvgIcons/index.d.ts

@@ -55,7 +55,6 @@ export declare const IconLibrary: {
     Settings: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Shift: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Space: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-    Sponsor: ({}: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Subscribe: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Subtitles: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     Tick: ({ color }: import("../../../../types/iconTypes").IconSVGProps) => import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;

package/dist/components/atoms/Logo/Logo.d.ts

@@ -1,3 +1,3 @@
 import { ILogoProps } from '../../../types/types';
-declare const Logo: ({ id, dataRoh, anchor }: ILogoProps) => JSX.Element;
+declare const Logo: ({ id, dataRoh, urlLink }: ILogoProps) => JSX.Element;
 export default Logo;

package/dist/components/atoms/Search/Search.d.ts

@@ -1,3 +1,3 @@
 import { ISearchProps } from '../../../types/navigation';
-declare const Search: ({ selected, onClick }: ISearchProps) => JSX.Element;
+declare const Search: ({ selected, onClick, colorPrimary }: ISearchProps) => JSX.Element;
 export default Search;

package/dist/components/atoms/SponsorLogo/SponsorLogo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISponsorLogoProps } from '../../../types/types';
+declare const SponsorLogo: ({ colorLogo, colorBackground }: ISponsorLogoProps) => React.ReactElement;
+export default SponsorLogo;

package/dist/components/atoms/SponsorLogo/SponsorLogo.style.d.ts

@@ -0,0 +1 @@
+export declare const SponsorLogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/atoms/SponsorLogo/index.d.ts

@@ -0,0 +1,2 @@
+import SponsorLogo from './SponsorLogo';
+export default SponsorLogo;

package/dist/components/atoms/Tab/Tab.d.ts

@@ -1,3 +1,3 @@
 import { ITabProps } from '../../../types/types';
-declare const Tab: ({ title, titleLink, onClick, selected, iconName, withIcon, withTextInMobile, }: ITabProps) => JSX.Element;
+declare const Tab: ({ title, titleLink, onClick, selected, iconName, withIcon, withTextInMobile, colorPrimary, }: ITabProps) => JSX.Element;
 export default Tab;

package/dist/components/atoms/index.d.ts

@@ -2,8 +2,9 @@ import { PrimaryButton, SecondaryButton, TertiaryButton } from './Buttons';
 import { Grid, GridItem } from './Grid';
 import { Icon } from './Icons';
 import Heading from './Heading';
+import SponsorLogo from './SponsorLogo';
 import Sponsorship from './Sponsorship';
 import SectionSplitter from './SectionSplitter';
 import ImageAspectRatioWrapper from './ImageAspectRatioWrapper';
 import TypeTags from './TypeTags';
-export { Grid, GridItem, Heading, Icon, ImageAspectRatioWrapper, PrimaryButton, SecondaryButton, SectionSplitter, Sponsorship, TertiaryButton, TypeTags, };
+export { Grid, GridItem, Heading, Icon, ImageAspectRatioWrapper, PrimaryButton, SecondaryButton, SectionSplitter, SponsorLogo, Sponsorship, TertiaryButton, TypeTags, };

package/dist/components/molecules/NavTop/NavTop.d.ts

@@ -1,3 +1,3 @@
 import { INavTopProps } from '../../../types/navigation';
-declare const NavTop: ({ accountText, accountIcon, accountOptions, onLink, basketText, basketNumItems, onClickSearch, isShowSearch, }: INavTopProps) => JSX.Element;
+declare const NavTop: ({ accountText, accountLink, accountIcon, accountOptions, onLink, basketText, basketNumItems, onClickSearch, isShowSearch, colorPrimary, }: INavTopProps) => JSX.Element;
 export default NavTop;

package/dist/components/molecules/Tabs/Tabs.d.ts

@@ -1,3 +1,3 @@
 import { ITabsProps } from '../../../types/types';
-declare const Tabs: ({ items, onChange, onShowMenu, showMenu }: ITabsProps) => JSX.Element;
+declare const Tabs: ({ items, onChange, onShowMenu, showMenu, colorPrimary }: ITabsProps) => JSX.Element;
 export default Tabs;

package/dist/components/molecules/Tabs/Tabs.style.d.ts

@@ -1,5 +1,5 @@
 import { ITabsProps } from '../../../types/types';
 export declare const TabsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemsContainer: import("styled-components").StyledComponent<"div", any, ITabsProps, never>;
-export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuContainer: import("styled-components").StyledComponent<"div", any, ITabsProps, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/organisms/Navigation/Navigation.d.ts

@@ -1,3 +1,3 @@
 import { INavigationProps } from '../../../types/navigation';
-declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink }: INavigationProps) => JSX.Element;
+declare const Navigation: ({ dataNavTop, menuData, onSearch, onLink, logoLink }: INavigationProps) => JSX.Element;
 export default Navigation;

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-import { Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, TypeTags } from './components';
+import { Editorial, Footer, GlobalStyles, Grid, GridItem, Heading, Icon, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, TypeTags } from './components';
 import { ThemeType } from './types/types';
-export { Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, Heading, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags, };
+export { Editorial, Footer, GlobalStyles, Grid, GridItem, Icon, Heading, Navigation, PeopleListing, PrimaryButton, PromoWithTitle, SecondaryButton, SectionSplitter, SectionTitle, Sponsorship, TertiaryButton, TextOnly, ThemeProvider, ThemeType, TypeTags, };

package/dist/styles/themes.d.ts

@@ -12,6 +12,7 @@ export declare const core: {
         error: string;
         medium: string;
         good: string;
+        navigation: string;
     };
     fonts: {
         desktop: {
@@ -365,6 +366,7 @@ export declare const stream: {
         error: string;
         medium: string;
         good: string;
+        navigation: string;
     };
     fonts: {
         desktop: {
@@ -718,6 +720,7 @@ export declare const cinema: {
         error: string;
         medium: string;
         good: string;
+        navigation: string;
     };
     fonts: {
         desktop: {
@@ -1072,6 +1075,7 @@ export declare const themes: {
             error: string;
             medium: string;
             good: string;
+            navigation: string;
         };
         fonts: {
             desktop: {
@@ -1425,6 +1429,7 @@ export declare const themes: {
             error: string;
             medium: string;
             good: string;
+            navigation: string;
         };
         fonts: {
             desktop: {
@@ -1778,6 +1783,7 @@ export declare const themes: {
             error: string;
             medium: string;
             good: string;
+            navigation: string;
         };
         fonts: {
             desktop: {

package/dist/types/navigation.d.ts

@@ -23,6 +23,10 @@ export interface IAccountProps {
      * The linknk of the title
      */
     titleLink?: string;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface IBasketProps {
     /**
@@ -41,6 +45,10 @@ export interface IBasketProps {
      * Function to be called when is clicked
      */
     onClick?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface ISearchProps {
     /**
@@ -51,6 +59,10 @@ export interface ISearchProps {
      * Function to be called when is clicked
      */
     onClick?: (e: MouseEvent) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface INavTopProps {
     children?: ReactNode;
@@ -58,6 +70,10 @@ export interface INavTopProps {
      * The text of Account component
      */
     accountText?: string;
+    /**
+     * The link of Account component
+     */
+    accountLink?: string;
     /**
      * The icon of Account component
      */
@@ -86,6 +102,10 @@ export interface INavTopProps {
      * Function to be called when is clicked
      */
     onLink?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface iMenuOptionProps {
     /**
@@ -108,6 +128,10 @@ export interface IMenuProps {
     items: iMenuOptionProps[];
 }
 export interface INavigationProps {
+    /**
+     * Link url to Logo component
+     */
+    logoLink?: string;
     /**
      * An Object to set NavTop data component
      */

package/dist/types/types.d.ts

@@ -50,9 +50,9 @@ export interface ILogoProps {
      */
     dataRoh?: string;
     /**
-     * The anchor of the logo
+     * The link of the logo
      */
-    anchor?: string;
+    urlLink?: string;
 }
 export interface IOptionItem {
     /**
@@ -98,6 +98,10 @@ export interface ITabProps {
      * Function to be called when click
      */
     onClick?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface ITabsProps {
     /**
@@ -116,6 +120,10 @@ export interface ITabsProps {
      * Function to be called when click
      */
     onChange?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface IDropdownProps {
     /**
@@ -154,6 +162,10 @@ export interface IDropdownProps {
      * Function to be called when click
      */
     onChange?: (e: string) => void;
+    /**
+     * The primary color
+     */
+    colorPrimary?: string;
 }
 export interface IIndividualListing {
     role: string;
@@ -188,6 +200,16 @@ export interface IGridItemProps extends StyledProps<any> {
      */
     columnSpanDevice?: number;
 }
+export interface ISponsorLogoProps {
+    /**
+     * Color for the logo
+     */
+    colorLogo?: string;
+    /**
+     * Color for the background of the logo
+     */
+    colorBackground?: string;
+}
 export interface ISponsorshipProps {
     /**
      * Source URL for Sponsorship IFRAME.

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@royaloperahouse/chord",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "author": "Royal Opera House",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "engines": {
     "node": ">=10"
@@ -23,7 +22,9 @@
     "analyze": "size-limit --why",
     "storybook": "start-storybook -s ./external -p 6006",
     "build-storybook": "rm -rf ./storybook-static; build-storybook -s ./src -o ./storybook-static; cp -r ./external/ ./storybook-static/",
-    "test-storybook": "tsdx test --json --passWithNoTests --outputFile=./test/jest-test-results.json"
+    "test-storybook": "tsdx test --json --passWithNoTests --outputFile=./test/jest-test-results.json",
+    "publish-release": "make prepare-release-candidate; make publish-release",
+    "publish-snapshot": "make prepare-release-candidate; make publish-npm-snapshot"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -54,9 +55,12 @@
     "setupFilesAfterEnv": [
       "<rootDir>/src/jest.setup.ts"
     ],
-     "moduleNameMapper": {
+    "moduleNameMapper": {
       "^react$": "<rootDir>/node_modules/react"
-    }
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/storybook-static"
+    ]
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

package/dist/components/atoms/Icons/SvgIcons/Logos/Sponsors/Sponsor.svg.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { IconSVGProps } from '../../../../../../types/iconTypes';
-declare const _default: ({}: IconSVGProps) => React.ReactElement;
-export default _default;

package/dist/components/atoms/Image/Image.d.ts

@@ -1,38 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare const AspectRatioDefinitions: {
-    '4:3': {
-        height: string;
-        width: string;
-    };
-    '3:4': {
-        height: string;
-        width: string;
-    };
-    '16:9': {
-        height: string;
-        width: string;
-    };
-    '1:1': {
-        height: string;
-        width: string;
-    };
-};
-interface AspectRatioCSSSpecs {
-    height: string;
-    width: string;
-}
-export declare type AspectRatioType = keyof typeof AspectRatioDefinitions;
-export interface IImageProps {
-    desktopSrc: string;
-    mobileSrc?: string;
-    aspectRatio: AspectRatioType;
-    altText?: string;
-    errorImageSrc?: string;
-}
-export interface IStyledImageProps {
-    srcSet: string;
-    sizes: string;
-    aspectRatio: AspectRatioCSSSpecs;
-}
-declare const Image: FunctionComponent<IImageProps>;
-export default Image;

package/src/components/atoms/Account/Account.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
-import GlobalStyles from '../../../styles/GlobalStyles';
-import ThemeProvider from '../../../styles/ThemeProvider';
-import Account from './index';
-import { ThemeType } from '../../../types/types';
-import { IAccountProps } from '../../../types/navigation';
-
-export default {
-  title: 'Components/Navigation/Account',
-  component: Account,
-  argTypes: {
-    ref: {
-      table: { disable: true },
-    },
-    theme: {
-      table: { disable: true },
-    },
-    as: {
-      table: { disable: true },
-    },
-    forwardedAs: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Account button',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
-    },
-    jest: ['Account'],
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={ThemeType.Core}>
-        <GlobalStyles />
-        {Story()}
-      </ThemeProvider>
-    ),
-  ],
-} as Meta;
-
-const Template: Story<IAccountProps> = (args) => <Account {...args} />;
-
-export const SignedOut = Template.bind({});
-
-SignedOut.args = {
-  title: 'SIGN IN',
-  onClick: () => {},
-  iconName: 'User',
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};
-
-export const SignedIn = Template.bind({});
-
-SignedIn.args = {
-  title: 'USER NAME',
-  onClick: () => {},
-  iconName: 'UserSignedIn',
-  options: [
-    {
-      option: 'OPTION 1',
-      optionLink: 'link 1',
-    },
-    {
-      option: 'OPTION 2',
-      optionLink: 'link 2',
-    },
-    {
-      option: 'OPTION 3',
-      optionLink: 'link 3',
-    },
-  ],
-};

package/src/components/atoms/Account/Account.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import Account from './Account';
-import { IOptionItem } from '../../../types/types';
-
-describe('Account component', () => {
-  const onClickHandler = jest.fn();
-
-  it('renders text with specific text', () => {
-    const title = 'SIGN IN';
-    const options: IOptionItem[] = [];
-    const onClick = onClickHandler;
-    const iconName = 'User';
-
-    const { getByText } = render(
-      <Account title={title} options={options} onClick={onClick} iconName={iconName}></Account>
-    );
-
-    expect(getByText(title)).toBeInTheDocument();
-  });
-
-  it('calls onClick callback when text is clicked', () => {
-    const title = 'SIGN IN';
-    const options: IOptionItem[] = [];
-    const onClick = onClickHandler;
-    const iconName = 'User';
-
-    const { getByText } = render(
-      <Account title={title} options={options} onClick={onClick} iconName={iconName}></Account>
-    );
-    fireEvent.click(getByText('SIGN IN'));
-
-    expect(onClickHandler).toBeCalled();
-  });
-
-  it('renders options when click text', () => {
-    const title = 'SIGN IN';
-    const options: IOptionItem[] = [
-      {
-        option: 'foo',
-        optionLink: 'bar',
-      },
-    ];
-    const onClick = onClickHandler;
-    const iconName = 'User';
-
-    const { getByText } = render(
-      <Account title={title} options={options} onClick={onClick} iconName={iconName}></Account>
-    );
-    fireEvent.click(getByText('SIGN IN'));
-
-    expect(getByText('foo')).toBeInTheDocument();
-  });
-});

package/src/components/atoms/Account/Account.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { IAccountProps } from '../../../types/navigation';
-import Dropdown from '../Dropdown';
-
-const Account = ({ title, options = [], onClick, iconName, titleLink }: IAccountProps) => {
-  const onChangeHandler = (link: string) => {
-    if (onClick) {
-      onClick(link);
-    }
-  };
-
-  return (
-    <Dropdown
-      titleLink={titleLink}
-      title={title}
-      options={options}
-      onChange={onChangeHandler}
-      iconName={iconName}
-      withOptionsInMobile={false}
-      withIcon={'left'}
-    />
-  );
-};
-
-export default Account;

package/src/components/atoms/Account/index.tsx

@@ -1,3 +0,0 @@
-import Account from './Account';
-
-export default Account;

package/src/components/atoms/Basket/Basket.stories.tsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react';
-import GlobalStyles from '../../../styles/GlobalStyles';
-import ThemeProvider from '../../../styles/ThemeProvider';
-import Basket from './index';
-import { ThemeType } from '../../../types/types';
-import { IBasketProps } from '../../../types/navigation';
-
-export default {
-  title: 'Components/Navigation/Basket',
-  component: Basket,
-  argTypes: {
-    ref: {
-      table: { disable: true },
-    },
-    theme: {
-      table: { disable: true },
-    },
-    as: {
-      table: { disable: true },
-    },
-    forwardedAs: {
-      table: { disable: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'Basket button',
-        withSource: 'none',
-      },
-    },
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House-UI-Guide-and-Spec?node-id=166%3A0',
-    },
-    jest: ['Basket'],
-  },
-  decorators: [
-    (Story) => (
-      <ThemeProvider theme={ThemeType.Core}>
-        <GlobalStyles />
-        {Story()}
-      </ThemeProvider>
-    ),
-  ],
-} as Meta;
-
-const Template: Story<IBasketProps> = (args) => <Basket {...args} />;
-
-export const BasketEmpty = Template.bind({});
-
-BasketEmpty.args = {
-  text: '',
-  selected: false,
-};
-
-export const BasketEmptySelected = Template.bind({});
-
-BasketEmptySelected.args = {
-  text: '',
-  selected: true,
-};
-
-export const BasketFull = Template.bind({});
-
-BasketFull.args = {
-  text: '29 MINS',
-  selected: false,
-  numItems: 5,
-};
-
-export const BasketFullSelected = Template.bind({});
-
-BasketFullSelected.args = {
-  text: '29 MINS',
-  selected: true,
-  numItems: 25,
-};