@royaloperahouse/chord 0.1.0

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { Icon } from '.';
+import { IIconProps } from '../../../types/iconTypes';
+import { IconLibrary } from './SvgIcons';
+import { Directions } from './Icons.style';
+import { Iconography, IIconographyGridProps } from './StorybookSupport/Iconography';
+
+export default {
+  title: 'Foundations/Iconography',
+  component: Icon,
+  argTypes: {
+    iconsArray: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'This page shows all icons used across the ROH site, split down by categories and use cases. The _Iconography_ is a set of SVG icons that can be reused by other components.',
+        withSource: 'none',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/PtlqtJAjr87djTyD0x40m9/Royal-Opera-House---UI-Guide-%26-Spec?node-id=3%3A2533',
+    },
+  },
+} as Meta;
+
+const IconListTemplate: Story<IIconographyGridProps> = (args) => <Iconography {...args} />;
+
+export const ArrowsAndDropdownsIcons = IconListTemplate.bind({});
+
+ArrowsAndDropdownsIcons.args = {
+  iconsArray: [
+    { iconName: 'Arrow', label: 'Left', direction: 'left' },
+    { iconName: 'Arrow', label: 'Right' },
+    { iconName: 'Arrow', label: 'Up', direction: 'up' },
+    { iconName: 'Arrow', label: 'Down', direction: 'down' },
+    { iconName: 'DropdownArrow', label: 'Dropdown' },
+    { iconName: 'DropdownArrow', label: "'Drop Up'", direction: 'reverse' },
+    { iconName: 'CarouselArrow', label: 'Carousel Right' },
+    { iconName: 'CarouselArrow', label: 'Carousel Left', direction: 'left' },
+  ],
+};
+
+export const NavigationAndUtilityIcons = IconListTemplate.bind({});
+
+NavigationAndUtilityIcons.args = {
+  iconsArray: [
+    { iconName: 'Menu', label: 'Menu' },
+    { iconName: 'User', label: 'User' },
+    { iconName: 'UserSignedIn', label: 'User Signed In' },
+    { iconName: 'Basket', label: 'Basket' },
+    { iconName: 'BasketFull', label: 'Basket Full' },
+    { iconName: 'Search', label: 'Search' },
+    { iconName: 'Settings', label: 'Settings' },
+    { iconName: 'BalletAndDance', label: 'Ballet & Dance' },
+    { iconName: 'OperaAndMusic', label: 'Opera & Music' },
+    { iconName: 'Home', label: 'Home' },
+    { iconName: 'LiveStream', label: 'Live Stream' },
+    { iconName: 'ListView', label: 'List View' },
+    { iconName: 'GridView', label: 'Grid View' },
+    { iconName: 'Close', label: 'Close' },
+    { iconName: 'Confirm', label: 'Confirm' },
+    { iconName: 'Expand', label: 'Expand' },
+    { iconName: 'Detract', label: 'Detract' },
+    { iconName: 'Refresh', label: 'Refresh' },
+    { iconName: 'ExternalLink', label: 'External Link' },
+  ],
+};
+
+export const ActionsIcons = IconListTemplate.bind({});
+
+ActionsIcons.args = {
+  iconsArray: [
+    { iconName: 'BookTickets', label: 'Book Tickets' },
+    { iconName: 'ChooseDates', label: 'Choose Dates' },
+    { iconName: 'Filter', label: 'Filter' },
+    { iconName: 'Watch', label: 'Watch' },
+    { iconName: 'Reminder', label: 'Reminder' },
+    { iconName: 'AddToMyList', label: 'Add To My List' },
+    { iconName: 'OnMyList', label: 'On My List' },
+    { iconName: 'EditMyList', label: 'Edit My List' },
+    { iconName: 'FindAScreening', label: 'Find A Screening' },
+    { iconName: 'Subscribe', label: 'Subscribe' },
+  ],
+};
+
+export const VideoIcons = IconListTemplate.bind({});
+
+VideoIcons.args = {
+  iconsArray: [
+    { iconName: 'Play', label: 'Play' },
+    { iconName: 'Pause', label: 'Pause' },
+    { iconName: 'Restart', label: 'Restart' },
+    { iconName: 'Back10', label: 'Back 10s' },
+    { iconName: 'Forward10', label: 'Forward 10s' },
+    { iconName: 'Muted', label: 'Muted' },
+    { iconName: 'Volume', label: 'Volume' },
+    { iconName: 'FullScreen', label: 'Full Screen' },
+    { iconName: 'Minimise', label: 'Minimise' },
+    { iconName: 'Subtitles', label: 'Subtitles' },
+    { iconName: 'Clips', label: 'Clips' },
+    { iconName: 'AudioDescription', label: 'Audio Description' },
+    { iconName: 'Trailer', label: 'Trailer' },
+  ],
+};
+
+export const DescriptorIcons = IconListTemplate.bind({});
+
+DescriptorIcons.args = {
+  iconsArray: [
+    { iconName: 'PDF', label: 'PDF' },
+    { iconName: 'Email', label: 'Email' },
+    { iconName: 'Print', label: 'Print' },
+    { iconName: 'Secure', label: 'Secure' },
+    { iconName: 'Cinema', label: 'Cinema' },
+    { iconName: 'Info', label: 'Information' },
+    { iconName: 'Phone', label: 'Phone' },
+    { iconName: 'Clock', label: 'Clock' },
+    { iconName: 'Location', label: 'Location' },
+    { iconName: 'List', label: 'List' },
+    { iconName: 'Tickets', label: 'Tickets' },
+    { iconName: 'CreditCard', label: 'Credit Card' },
+  ],
+};
+
+export const TextIcons = IconListTemplate.bind({});
+
+TextIcons.args = {
+  iconsArray: [
+    { iconName: 'Shift', label: 'Shift' },
+    { iconName: 'Delete', label: 'Delete' },
+    { iconName: 'Space', label: 'Space' },
+  ],
+};
+
+export const SocialIcons = IconListTemplate.bind({});
+
+SocialIcons.args = {
+  iconsArray: [
+    { iconName: 'Facebook', label: 'Facebook' },
+    { iconName: 'Twitter', label: 'Twitter' },
+    { iconName: 'Instagram', label: 'Instagram' },
+    { iconName: 'Tiktok', label: 'Tiktok' },
+    { iconName: 'Youtube', label: 'Youtube' },
+  ],
+};
+
+export const Checkbox12pxIcons = IconListTemplate.bind({});
+Checkbox12pxIcons.storyName = '12px Icons';
+
+Checkbox12pxIcons.args = {
+  iconsArray: [
+    { iconName: 'Tick', label: 'Tick' },
+    { iconName: 'Remove', label: 'Remove' },
+  ],
+};
+
+const IconTemplate: Story<IIconProps> = (args) => <Icon {...args} />;
+
+export const IconStory = IconTemplate.bind({});
+
+IconStory.storyName = 'Icon Explorer';
+
+IconStory.decorators = [
+  (Story) => <div style={{ margin: '3em auto', height: '100px', width: '100px' }}>{Story()}</div>,
+];
+
+IconStory.args = {
+  iconName: 'Basket',
+  direction: 'right',
+};
+
+IconStory.argTypes = {
+  iconName: {
+    description: 'The icon to be used',
+    options: Object.keys(IconLibrary),
+    control: { type: 'select' },
+  },
+  direction: {
+    description: 'The icon orientation - by default right',
+    options: Object.keys(Directions),
+    control: { type: 'select' },
+    defaultValue: 'right',
+  },
+};

package/src/components/atoms/Icons/Icons.style.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { core } from '../../../styles/themes';
+import { IIconStyledProps } from '../../../types/iconTypes';
+
+export const Directions = {
+  left: 'transform: rotate(180deg)',
+  right: 'transform: rotate(0deg)',
+  up: 'transform: rotate(270deg)',
+  down: 'transform: rotate(90deg)',
+  reverse: 'transform: scale(1, -1)',
+};
+
+export const Wrapper = styled.span<IIconStyledProps>`
+  display: block;
+
+  & svg {
+    display: block;
+    ${({ direction = 'right' }: IIconStyledProps) => Directions[direction]};
+  }
+
+  & svg path {
+    fill: var(--base-color-${({ color }: any) => color || 'black'}, ${core.colors.black});
+  }
+`;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Icon } from '.';
+import { IconNameType } from '../../../types/iconTypes';
+import { IconLibrary } from './SvgIcons';
+import each from 'jest-each';
+
+describe('Iconography', () => {
+  each(Object.keys(IconLibrary).map((k) => [k])).it(
+    'should render %s icon without crashing',
+    (iconName: IconNameType) => {
+      const tree = renderer.create(<Icon iconName={iconName} direction="right" />).toJSON();
+      expect(tree).toMatchSnapshot();
+    }
+  );
+
+  it.each`
+    iconName           | direction
+    ${'Arrow'}         | ${'right'}
+    ${'Arrow'}         | ${'left'}
+    ${'Arrow'}         | ${'up'}
+    ${'Arrow'}         | ${'down'}
+    ${'CarouselArrow'} | ${'right'}
+    ${'CarouselArrow'} | ${'left'}
+    ${'DropdownArrow'} | ${'right'}
+    ${'DropdownArrow'} | ${'reverse'}
+  `('should return $iconName with direction $direction without crashing', ({ iconName, direction }) => {
+    const tree = renderer.create(<Icon iconName={iconName} direction={direction} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Icons/Icons.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Wrapper } from './Icons.style';
+import { IconLibrary } from './SvgIcons';
+import { IIconProps } from '../../../types/iconTypes';
+
+const Icon = React.memo(
+  ({ className, color, iconName, title, direction }: IIconProps): React.ReactElement => {
+    const IconComponent = IconLibrary[iconName];
+
+    return (
+      <Wrapper className={className} color={color} title={title} direction={direction}>
+        <IconComponent color={color} />
+      </Wrapper>
+    );
+  }
+);
+
+Icon.displayName = 'Icon';
+
+export default Icon;

package/src/components/atoms/Icons/StorybookSupport/Iconography.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Icon } from '..';
+import { DirectionType, IconNameType } from '../../../../types/iconTypes';
+import IconsDiv from './IconsDiv.style';
+
+export interface IStorybookIcon {
+  iconName: IconNameType;
+  label: string;
+  direction?: DirectionType;
+}
+
+export interface IIconographyGridProps {
+  iconsArray: IStorybookIcon[];
+}
+
+export function Iconography({ iconsArray }: IIconographyGridProps) {
+  return (
+    <IconsDiv>
+      {iconsArray.map((icon: IStorybookIcon) => (
+        <div className="iconBox" key={`${icon.iconName}-${icon.direction}`}>
+          <Icon iconName={icon.iconName} className="iconDisplay" direction={icon.direction} />
+          <span className="iconLabel">{icon.label}</span>
+        </div>
+      ))}
+    </IconsDiv>
+  );
+}

package/src/components/atoms/Icons/StorybookSupport/IconsDiv.style.tsx

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+const IconsDiv = styled.div`
+  @font-face {
+    font-family: GothamSSm-Light;
+    src: url('../../fonts/GothamSSm-Light.ttf');
+  }
+
+  & {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+  }
+
+  & .iconBox {
+    border: 2px solid #f0f0f0;
+    width: 95px;
+    height: 95px;
+    text-align: center;
+    display: grid;
+    grid-template-rows: 55px 40px;
+    justify-content: center;
+    row-gap: 0;
+  }
+
+  & .iconDisplay {
+    align-self: center;
+    display: inline-block;
+    grid-row: 1;
+    height: 24px;
+    margin-top: 27px;
+    place-self: center;
+    width: 24px;
+  }
+
+  & .iconLabel {
+    color: #b2b2b2;
+    font-family: 'GothamSSm-Light' !important;
+    font-size: 8px;
+    font-style: normal;
+    font-weight: 400;
+    grid-row: 2;
+    line-height: 12px;
+    place-self: center;
+    text-transform: uppercase;
+  }
+`;
+
+export default IconsDiv;

package/src/components/atoms/Icons/SvgIcons/12px/Remove.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.06066 5.93957L11.0001 2.00011L9.93945 0.939453L6 4.87891L2.06055 0.939453L0.999887 2.00011L4.93934 5.93957L0.939453 9.93945L2.00011 11.0001L6 7.00023L9.99989 11.0001L11.0605 9.93945L7.06066 5.93957Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/12px/Tick.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M4.09961 11.1999L1.09961 7.2999L1.89961 6.6999L4.09961 9.4999L10.0996 1.3999L10.8996 1.9999L4.09961 11.1999Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/AddToMyList.svg.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 3H3V4H21V3Z" fill={color} />
+    <path d="M21 6.5H3V7.5H21V6.5Z" fill={color} />
+    <path d="M21 10H3V11H21V10Z" fill={color} />
+    <path d="M14.5 13.5H3V14.5H14.5V13.5Z" fill={color} />
+    <path d="M12 17H3V18H12V17Z" fill={color} />
+    <path d="M18.1 14H17.1V16.9H14V17.9H17.1V21H18.1V17.9H21V16.9H18.1V14Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/BookTickets.svg.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7 2H6V5H7V2Z" fill={color} />
+    <path d="M4 8V9L20 9V8L4 8Z" fill={color} />
+    <path d="M18 2H17V5H18V2Z" fill={color} />
+    <path d="M14.3008 2H13.3008V5H14.3008V2Z" fill={color} />
+    <path d="M15.3008 8H14.3008V20H15.3008V8Z" fill={color} />
+    <path d="M9.69922 8H8.69922V20H9.69922V8Z" fill={color} />
+    <path d="M10.6992 2H9.69922V5H10.6992V2Z" fill={color} />
+    <path d="M21 17V16L3 16V17L21 17Z" fill={color} />
+    <path d="M21 13V12L3 12V13L21 13Z" fill={color} />
+    <path
+      d="M20 4V19C20 19.6 19.6 20 19 20H5C4.4 20 4 19.6 4 19V4H20ZM21 3H3V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V3Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/ChooseDates.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M20.9 9L19 10.9V5H15.5V4H14.5V5H12V4H11V5H8.5V4H7.5V5H4V18C4 19.1 4.9 20 6 20H17C18.1 20 19 19.1 19 18V15.1L23 11.1L20.9 9ZM17.5 12.3H14.3V10H18V11.9L17.5 12.3ZM14.6 15.7H14.3V13.4H16.5L14.7 15.2L14.6 15.7ZM8.7 19H6C5.4 19 5 18.6 5 18V16.7H8.7V19ZM8.7 15.7H5V13.4H8.7V15.7ZM8.7 12.3H5V10H8.7V12.3ZM5 9V6H7.5V7H8.5V6H11V7H12V6H14.5V7H15.5V6H18V9H5ZM13.3 19H9.7V16.7H13.4V19H13.3ZM13.3 15.7H9.7V13.4H13.4V15.7H13.3ZM13.3 12.3H9.7V10H13.4V12.3H13.3ZM18 16.7V18C18 18.6 17.6 19 17 19H14.3V18L16.9 17.2L17.5 16.6H18V16.7ZM19 13.7L18 14.7L17 15.7L16.3 16.4L15.3 16.7L15.6 15.7L17.9 13.4L18.9 12.4L19 12.3L19.7 13L19 13.7ZM19.8 11.5L20.9 10.4L21.6 11.1L20.5 12.2L19.8 11.5Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/EditMyList.svg.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M21 3H3V4H21V3Z" fill={color} />
+    <path d="M21 6.5H3V7.5H21V6.5Z" fill={color} />
+    <path d="M21 10H3V11H21V10Z" fill={color} />
+    <path d="M13.5 13.5H3V14.5H13.5V13.5Z" fill={color} />
+    <path d="M11 17H3V18H11V17Z" fill={color} />
+    <path
+      d="M17.0004 13.6999L16.0004 14.6999L15.5004 15.1999L14.5004 16.1999L12.7004 17.9999L11.9004 20.9999L15.0004 20.0999L15.6004 19.4999L17.0004 17.9999L21.0004 13.9999L18.9004 11.8999L17.0004 13.6999ZM17.0004 16.4999L16.0004 17.4999L15.0004 18.4999L14.3004 19.1999L13.3004 19.4999L13.6004 18.4999L15.9004 16.1999L16.9004 15.1999L17.0004 15.0999L17.7004 15.7999L17.0004 16.4999ZM18.5004 14.9999L17.8004 14.2999L18.9004 13.1999L19.6004 13.8999L18.5004 14.9999Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/Filter.svg.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8.4 5C8.2 4.1 7.4 3.5 6.5 3.5C5.6 3.5 4.8 4.1 4.6 5H2V6H4.6C4.8 6.9 5.6 7.5 6.5 7.5C7.4 7.5 8.2 6.9 8.4 6H22V5H8.4ZM6.5 6.5C5.9 6.5 5.5 6.1 5.5 5.5C5.5 4.9 5.9 4.5 6.5 4.5C7.1 4.5 7.5 4.9 7.5 5.5C7.5 6.1 7.1 6.5 6.5 6.5Z"
+      fill={color}
+    />
+    <path
+      d="M17.5 10C16.6 10 15.8 10.6 15.6 11.5H2V12.5H15.6C15.8 13.4 16.6 14 17.5 14C18.4 14 19.2 13.4 19.4 12.5H22V11.5H19.4C19.2 10.6 18.4 10 17.5 10ZM17.5 13C16.9 13 16.5 12.6 16.5 12C16.5 11.4 16.9 11 17.5 11C18.1 11 18.5 11.4 18.5 12C18.5 12.6 18.1 13 17.5 13Z"
+      fill={color}
+    />
+    <path
+      d="M6.5 16.5C5.6 16.5 4.8 17.1 4.6 18H2V19H4.6C4.8 19.9 5.6 20.5 6.5 20.5C7.4 20.5 8.2 19.9 8.4 19H22V18H8.4C8.2 17.1 7.4 16.5 6.5 16.5ZM6.5 19.5C5.9 19.5 5.5 19.1 5.5 18.5C5.5 17.9 5.9 17.5 6.5 17.5C7.1 17.5 7.5 17.9 7.5 18.5C7.5 19.1 7.1 19.5 6.5 19.5Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/FindAScreening.svg.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12 2C9.7381 2.00427 7.54447 2.77523 5.77725 4.18702C4.01004 5.59881 2.77365 7.56802 2.26996 9.77313C1.76627 11.9782 2.02503 14.289 3.00399 16.328C3.98295 18.3671 5.62429 20.0141 7.66 21H2V22H12C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 21C10.22 21 8.47991 20.4722 6.99987 19.4832C5.51983 18.4943 4.36627 17.0887 3.68508 15.4442C3.0039 13.7996 2.82567 11.99 3.17293 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89471 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4442 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21Z"
+      fill={color}
+    />
+    <path
+      d="M8.10954 13.3902C7.78094 13.389 7.45536 13.4529 7.15157 13.5782C6.84779 13.7035 6.57181 13.8877 6.33954 14.1202C5.87419 14.5917 5.61328 15.2276 5.61328 15.8902C5.61328 16.5527 5.87419 17.1886 6.33954 17.6602C6.80986 18.1279 7.44622 18.3905 8.10954 18.3905C8.77287 18.3905 9.40922 18.1279 9.87954 17.6602C10.3449 17.1886 10.6058 16.5527 10.6058 15.8902C10.6058 15.2276 10.3449 14.5917 9.87954 14.1202C9.64728 13.8877 9.37129 13.7035 9.06751 13.5782C8.76373 13.4529 8.43815 13.389 8.10954 13.3902ZM9.16954 17.0002C8.92399 17.2454 8.60099 17.3979 8.25559 17.4317C7.91019 17.4655 7.56376 17.3785 7.27533 17.1855C6.9869 16.9925 6.77432 16.7054 6.67382 16.3732C6.57332 16.041 6.5911 15.6843 6.72416 15.3638C6.85721 15.0432 7.09729 14.7788 7.40348 14.6154C7.70968 14.452 8.06305 14.3999 8.40338 14.4679C8.7437 14.5359 9.04993 14.7198 9.26987 14.9882C9.4898 15.2567 9.60985 15.5931 9.60954 15.9402C9.60919 16.3378 9.45093 16.7191 9.16954 17.0002Z"
+      fill={color}
+    />
+    <path
+      d="M15.8908 10.6102C16.2194 10.6113 16.545 10.5474 16.8488 10.4221C17.1525 10.2968 17.4285 10.1127 17.6608 9.8802C18.1261 9.40861 18.3871 8.77273 18.3871 8.1102C18.3871 7.44767 18.1261 6.81179 17.6608 6.3402C17.1905 5.87244 16.5541 5.60986 15.8908 5.60986C15.2275 5.60986 14.5911 5.87244 14.1208 6.3402C13.6554 6.81179 13.3945 7.44767 13.3945 8.1102C13.3945 8.77273 13.6554 9.40861 14.1208 9.8802C14.3531 10.1127 14.629 10.2968 14.9328 10.4221C15.2366 10.5474 15.5622 10.6113 15.8908 10.6102ZM14.8308 7.0502C15.0763 6.80495 15.3993 6.65244 15.7447 6.61865C16.0901 6.58486 16.4366 6.67188 16.725 6.86489C17.0134 7.0579 17.226 7.34495 17.3265 7.67713C17.427 8.0093 17.4092 8.36606 17.2762 8.68659C17.1431 9.00712 16.903 9.2716 16.5969 9.43496C16.2907 9.59831 15.9373 9.65044 15.597 9.58246C15.2566 9.51448 14.9504 9.33059 14.7305 9.06213C14.5105 8.79367 14.3905 8.45725 14.3908 8.1102C14.3911 7.71251 14.5494 7.33124 14.8308 7.0502Z"
+      fill={color}
+    />
+    <path
+      d="M8.10954 5.60988C7.78094 5.60874 7.45536 5.67266 7.15157 5.79795C6.84779 5.92324 6.57181 6.10742 6.33954 6.33988C5.87419 6.81147 5.61328 7.44735 5.61328 8.10988C5.61328 8.77241 5.87419 9.40829 6.33954 9.87988C6.80986 10.3476 7.44622 10.6102 8.10954 10.6102C8.77287 10.6102 9.40922 10.3476 9.87954 9.87988C10.3449 9.40829 10.6058 8.77241 10.6058 8.10988C10.6058 7.44735 10.3449 6.81147 9.87954 6.33988C9.64728 6.10742 9.37129 5.92324 9.06751 5.79795C8.76373 5.67266 8.43815 5.60874 8.10954 5.60988ZM9.16954 9.16988C8.92399 9.41513 8.60099 9.56764 8.25559 9.60143C7.91019 9.63522 7.56376 9.5482 7.27533 9.35519C6.9869 9.16218 6.77432 8.87513 6.67382 8.54295C6.57332 8.21077 6.5911 7.85402 6.72416 7.53349C6.85721 7.21296 7.09729 6.94848 7.40348 6.78512C7.70968 6.62176 8.06305 6.56963 8.40338 6.63762C8.7437 6.7056 9.04993 6.88949 9.26987 7.15795C9.4898 7.42641 9.60985 7.76283 9.60954 8.10988C9.60919 8.50757 9.45093 8.88884 9.16954 9.16988Z"
+      fill={color}
+    />
+    <path
+      d="M15.8908 13.3902C15.5622 13.389 15.2366 13.4529 14.9328 13.5782C14.629 13.7035 14.3531 13.8877 14.1208 14.1202C13.6554 14.5917 13.3945 15.2276 13.3945 15.8902C13.3945 16.5527 13.6554 17.1886 14.1208 17.6602C14.5911 18.1279 15.2275 18.3905 15.8908 18.3905C16.5541 18.3905 17.1905 18.1279 17.6608 17.6602C18.1261 17.1886 18.3871 16.5527 18.3871 15.8902C18.3871 15.2276 18.1261 14.5917 17.6608 14.1202C17.4285 13.8877 17.1525 13.7035 16.8488 13.5782C16.545 13.4529 16.2194 13.389 15.8908 13.3902ZM17.0008 17.0002C16.7911 17.2101 16.5238 17.3532 16.2328 17.4112C15.9418 17.4692 15.6401 17.4396 15.3659 17.3261C15.0917 17.2127 14.8573 17.0204 14.6924 16.7737C14.5275 16.527 14.4395 16.2369 14.4395 15.9402C14.4395 15.6434 14.5275 15.3533 14.6924 15.1066C14.8573 14.8599 15.0917 14.6676 15.3659 14.5542C15.6401 14.4407 15.9418 14.4111 16.2328 14.4691C16.5238 14.5271 16.7911 14.6702 17.0008 14.8802C17.2817 15.1614 17.4395 15.5426 17.4395 15.9402C17.4395 16.3377 17.2817 16.7189 17.0008 17.0002Z"
+      fill={color}
+    />
+    <path
+      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/OnMyList.svg.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M15.4996 20.2002L13.3996 17.7002L12.5996 18.3002L15.5996 21.8002L20.8996 13.8002L20.0996 13.2002L15.4996 20.2002Z"
+      fill={color}
+    />
+    <path d="M21 3H3V4H21V3Z" fill={color} />
+    <path d="M21 6.5H3V7.5H21V6.5Z" fill={color} />
+    <path d="M21 10H3V11H21V10Z" fill={color} />
+    <path d="M14.5 13.5H3V14.5H14.5V13.5Z" fill={color} />
+    <path d="M11 17H3V18H11V17Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/Reminder.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M18 18V10C18 6.9 15.6 4.3 12.5 4V2H11.5V4C8.4 4.3 6 6.9 6 10V18H4V19H6H9C9 20.7 10.3 22 12 22C13.7 22 15 20.7 15 19H18H20V18H18ZM12 21C10.9 21 10 20.1 10 19H14C14 20.1 13.1 21 12 21ZM15 18H9H7V10C7 7.2 9.2 5 12 5C14.8 5 17 7.2 17 10V18H15Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/Subscribe.svg.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 4V20H4V4H20ZM21 3H3V21H21V3Z" fill={color} />
+    <path d="M12.5 11.5V7H11.5V11.5H7V12.5H11.5V17H12.5V12.5H17V11.5H12.5Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Actions/Watch.svg.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 8L16 12L9 16V8Z" fill={color} />
+    <path d="M20 4V20H4V4H20ZM21 3H3V21H21V3Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Arrows/Arrow.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3 12.6001H19L12.9 18.7001L13.6 19.4001L21 12.0001L13.6 4.6001L12.9 5.3001L19.2 11.6001H3V12.6001Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Arrows/CarouselArrow.svg.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M13.6 4.24658L21.3536 12.0001L13.6 19.7537L12.5464 18.7001L18.3964 12.8501H2.75V11.3501H18.5964L12.5464 5.30014L13.6 4.24658Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Arrows/DropdownArrow.svg.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.3 8L12 14.7L4.7 8L4 8.7L12 16L20 8.7L19.3 8Z" fill={color} />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Descriptors/Cinema.svg.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12 2C9.7381 2.00427 7.54447 2.77523 5.77725 4.18702C4.01004 5.59881 2.77365 7.56802 2.26996 9.77313C1.76627 11.9782 2.02503 14.289 3.00399 16.328C3.98295 18.3671 5.62429 20.0141 7.66 21H2V22H12C14.6522 22 17.1957 20.9464 19.0711 19.0711C20.9464 17.1957 22 14.6522 22 12C22 9.34784 20.9464 6.8043 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2V2ZM12 21C10.22 21 8.47991 20.4722 6.99987 19.4832C5.51983 18.4943 4.36627 17.0887 3.68508 15.4442C3.0039 13.7996 2.82567 11.99 3.17293 10.2442C3.5202 8.49836 4.37737 6.89471 5.63604 5.63604C6.89471 4.37737 8.49836 3.5202 10.2442 3.17293C11.99 2.82567 13.7996 3.0039 15.4442 3.68508C17.0887 4.36627 18.4943 5.51983 19.4832 6.99987C20.4722 8.47991 21 10.22 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21V21Z"
+      fill={color}
+    />
+    <path
+      d="M8.10954 13.3902C7.78094 13.389 7.45536 13.4529 7.15157 13.5782C6.84779 13.7035 6.57181 13.8877 6.33954 14.1202C5.87419 14.5917 5.61328 15.2276 5.61328 15.8902C5.61328 16.5527 5.87419 17.1886 6.33954 17.6602C6.80986 18.1279 7.44622 18.3905 8.10954 18.3905C8.77287 18.3905 9.40922 18.1279 9.87954 17.6602C10.3449 17.1886 10.6058 16.5527 10.6058 15.8902C10.6058 15.2276 10.3449 14.5917 9.87954 14.1202C9.64728 13.8877 9.3713 13.7035 9.06751 13.5782C8.76373 13.4529 8.43815 13.389 8.10954 13.3902V13.3902ZM9.16954 17.0002C8.92399 17.2454 8.60099 17.3979 8.25559 17.4317C7.91019 17.4655 7.56376 17.3785 7.27533 17.1855C6.9869 16.9925 6.77432 16.7054 6.67382 16.3732C6.57332 16.041 6.5911 15.6843 6.72416 15.3638C6.85721 15.0432 7.09729 14.7788 7.40348 14.6154C7.70968 14.452 8.06305 14.3999 8.40338 14.4679C8.7437 14.5359 9.04993 14.7198 9.26987 14.9882C9.4898 15.2567 9.60985 15.5931 9.60954 15.9402C9.60919 16.3378 9.45093 16.7191 9.16954 17.0002Z"
+      fill={color}
+    />
+    <path
+      d="M15.8908 10.6102C16.2194 10.6113 16.545 10.5474 16.8488 10.4221C17.1525 10.2968 17.4285 10.1127 17.6608 9.8802C18.1261 9.40861 18.3871 8.77273 18.3871 8.1102C18.3871 7.44767 18.1261 6.81179 17.6608 6.3402C17.1905 5.87244 16.5541 5.60986 15.8908 5.60986C15.2275 5.60986 14.5911 5.87244 14.1208 6.3402C13.6554 6.81179 13.3945 7.44767 13.3945 8.1102C13.3945 8.77273 13.6554 9.40861 14.1208 9.8802C14.3531 10.1127 14.629 10.2968 14.9328 10.4221C15.2366 10.5474 15.5622 10.6113 15.8908 10.6102V10.6102ZM14.8308 7.0502C15.0763 6.80495 15.3993 6.65244 15.7447 6.61865C16.0901 6.58486 16.4366 6.67188 16.725 6.86489C17.0134 7.0579 17.226 7.34495 17.3265 7.67713C17.427 8.0093 17.4092 8.36606 17.2762 8.68659C17.1431 9.00712 16.903 9.2716 16.5969 9.43496C16.2907 9.59831 15.9373 9.65044 15.597 9.58246C15.2566 9.51448 14.9504 9.33059 14.7305 9.06213C14.5105 8.79367 14.3905 8.45725 14.3908 8.1102C14.3911 7.71251 14.5494 7.33124 14.8308 7.0502Z"
+      fill={color}
+    />
+    <path
+      d="M8.10954 5.60988C7.78094 5.60874 7.45536 5.67266 7.15157 5.79795C6.84779 5.92324 6.57181 6.10742 6.33954 6.33988C5.87419 6.81147 5.61328 7.44735 5.61328 8.10988C5.61328 8.77241 5.87419 9.40829 6.33954 9.87988C6.80986 10.3476 7.44622 10.6102 8.10954 10.6102C8.77287 10.6102 9.40922 10.3476 9.87954 9.87988C10.3449 9.40829 10.6058 8.77241 10.6058 8.10988C10.6058 7.44735 10.3449 6.81147 9.87954 6.33988C9.64728 6.10742 9.3713 5.92324 9.06751 5.79795C8.76373 5.67266 8.43815 5.60874 8.10954 5.60988V5.60988ZM9.16954 9.16988C8.92399 9.41513 8.60099 9.56764 8.25559 9.60143C7.91019 9.63522 7.56376 9.5482 7.27533 9.35519C6.9869 9.16218 6.77432 8.87513 6.67382 8.54295C6.57332 8.21077 6.5911 7.85402 6.72416 7.53349C6.85721 7.21296 7.09729 6.94848 7.40348 6.78512C7.70968 6.62176 8.06305 6.56963 8.40338 6.63762C8.7437 6.7056 9.04993 6.88949 9.26987 7.15795C9.4898 7.42641 9.60985 7.76283 9.60954 8.10988C9.60919 8.50757 9.45093 8.88884 9.16954 9.16988V9.16988Z"
+      fill={color}
+    />
+    <path
+      d="M15.8908 13.3902C15.5622 13.389 15.2366 13.4529 14.9328 13.5782C14.629 13.7035 14.3531 13.8877 14.1208 14.1202C13.6554 14.5917 13.3945 15.2276 13.3945 15.8902C13.3945 16.5527 13.6554 17.1886 14.1208 17.6602C14.5911 18.1279 15.2275 18.3905 15.8908 18.3905C16.5541 18.3905 17.1905 18.1279 17.6608 17.6602C18.1261 17.1886 18.3871 16.5527 18.3871 15.8902C18.3871 15.2276 18.1261 14.5917 17.6608 14.1202C17.4285 13.8877 17.1525 13.7035 16.8488 13.5782C16.545 13.4529 16.2194 13.389 15.8908 13.3902V13.3902ZM17.0008 17.0002C16.7911 17.2101 16.5238 17.3532 16.2328 17.4112C15.9418 17.4692 15.6401 17.4396 15.3659 17.3261C15.0917 17.2127 14.8573 17.0204 14.6924 16.7737C14.5275 16.527 14.4395 16.2369 14.4395 15.9402C14.4395 15.6434 14.5275 15.3533 14.6924 15.1066C14.8573 14.8599 15.0917 14.6676 15.3659 14.5542C15.6401 14.4407 15.9418 14.4111 16.2328 14.4691C16.5238 14.5271 16.7911 14.6702 17.0008 14.8802C17.2817 15.1614 17.4395 15.5426 17.4395 15.9402C17.4395 16.3377 17.2817 16.7189 17.0008 17.0002V17.0002Z"
+      fill={color}
+    />
+    <path
+      d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
+      fill={color}
+    />
+  </svg>
+);

package/src/components/atoms/Icons/SvgIcons/Descriptors/Clock.svg.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IconSVGProps } from '../../../../../types/iconTypes';
+
+export default ({ color = '#1A1A1A' }: IconSVGProps): React.ReactElement => (
+  <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2ZM12 21C7 21 3 17 3 12C3 7 7 3 12 3C17 3 21 7 21 12C21 17 17 21 12 21Z"
+      fill={color}
+    />
+    <path
+      d="M16.5 11.5H12.5V5.5C12.5 5.2 12.3 5 12 5C11.7 5 11.5 5.2 11.5 5.5V12C11.5 12.3 11.7 12.5 12 12.5H16.5C16.8 12.5 17 12.3 17 12C17 11.7 16.8 11.5 16.5 11.5Z"
+      fill={color}
+    />
+  </svg>
+);