newskit 0.0.0-e00e1f6 → 0.0.0-e02a96ba5

package/src/volume-control/volume-control.tsx

@@ -0,0 +1,176 @@
+import React, {useState, useCallback, useMemo} from 'react';
+import {ButtonSize} from '../button';
+import {IconButton} from '../icon-button';
+import {VolumeControlProps} from './types';
+import {Slider} from '../slider';
+import {
+  IconFilledVolumeUp,
+  IconFilledVolumeDown,
+  IconFilledVolumeOff,
+} from '../icons';
+import {useTheme} from '../theme';
+import {ScreenReaderOnly} from '../screen-reader-only/screen-reader-only';
+import {useReactKeys} from '../utils/hooks';
+import {getTokensForVolumeControl} from './utils';
+import {MQ} from '../utils/style';
+import defaults from './defaults';
+import stylePresets from './style-presets';
+import {withOwnTheme} from '../utils/with-own-theme';
+
+interface MuteButtonProps {
+  volume: number;
+  unMutedVolume: number;
+  onChange: VolumeControlProps['onChange'];
+  volumeControlButtonStylePreset?: MQ<string>;
+  iconSize: string;
+  size: ButtonSize;
+}
+
+const toggleMute = (
+  volume: number,
+  unMutedVolume: number,
+  onChange: VolumeControlProps['onChange'],
+) => (volume === 0 ? onChange(unMutedVolume || 1) : onChange(0));
+
+const MuteButton: React.FC<MuteButtonProps> = ({
+  volume,
+  unMutedVolume,
+  onChange,
+  volumeControlButtonStylePreset,
+  iconSize,
+  size,
+}) => (
+  <IconButton
+    data-testid="mute-button"
+    aria-label={volume === 0 ? 'Unmute' : 'Mute'}
+    tabIndex={-1}
+    onClick={() => toggleMute(volume, unMutedVolume, onChange)}
+    size={size}
+    overrides={{
+      stylePreset: volumeControlButtonStylePreset,
+      iconSize,
+    }}
+  >
+    {volume === 0 ? <IconFilledVolumeOff /> : <IconFilledVolumeDown />}
+  </IconButton>
+);
+
+const ThemelessVolumeControl: React.FC<VolumeControlProps> = ({
+  volume,
+  vertical,
+  onChange,
+  overrides = {},
+}) => {
+  const theme = useTheme();
+  const [unMutedVolume, setUnMutedVolume] = useState(volume);
+  const [srOnlyVolumeControl] = useReactKeys(1);
+  const {
+    sliderTrackStylePreset,
+    trackSize,
+    sliderIndicatorTrackStylePreset,
+    sliderThumbStylePreset,
+    thumbSize,
+    sliderThumbLabelStylePreset,
+    volumeControlButtonStylePreset,
+    iconSize,
+    buttonSize,
+  } = getTokensForVolumeControl(theme, overrides);
+
+  if (unMutedVolume !== volume && volume > 0) {
+    setUnMutedVolume(volume);
+  }
+  const volumeArr = useMemo(() => [volume], [volume]);
+  const onSliderChange = useCallback(
+    ([newVolume]: number[]) => onChange(newVolume),
+    [onChange],
+  );
+  const minLabel = useCallback(
+    () => (
+      <MuteButton
+        volume={volume}
+        unMutedVolume={unMutedVolume}
+        onChange={onChange}
+        volumeControlButtonStylePreset={volumeControlButtonStylePreset}
+        iconSize={iconSize}
+        size={buttonSize}
+      />
+    ),
+    [
+      volume,
+      unMutedVolume,
+      onChange,
+      volumeControlButtonStylePreset,
+      iconSize,
+      buttonSize,
+    ],
+  );
+
+  const toggleMuteWithKeys = (e: React.KeyboardEvent<HTMLElement>) => {
+    if (e.keyCode === 32 || e.keyCode === 13) {
+      toggleMute(volume, unMutedVolume, onChange);
+    }
+  };
+
+  const maxLabel = useCallback(
+    () => (
+      <IconButton
+        data-testid="volumeup-button"
+        aria-label="Volume up"
+        tabIndex={-1}
+        onClick={() => onChange(1)}
+        size={buttonSize}
+        overrides={{
+          stylePreset: volumeControlButtonStylePreset,
+          iconSize,
+        }}
+      >
+        <IconFilledVolumeUp />
+      </IconButton>
+    ),
+    [buttonSize, iconSize, onChange, volumeControlButtonStylePreset],
+  );
+
+  return (
+    <>
+      <Slider
+        vertical={vertical}
+        min={0}
+        max={1}
+        step={0.1}
+        values={volumeArr}
+        onChange={onSliderChange}
+        ariaLabel="Volume Control"
+        ariaValueText={`volume level ${volumeArr[0] * 10} of 10`}
+        dataTestId="volume-control"
+        minLabel={minLabel}
+        maxLabel={maxLabel}
+        onKeyDown={toggleMuteWithKeys}
+        ariaDescribedBy={srOnlyVolumeControl}
+        overrides={{
+          track: {
+            stylePreset: sliderTrackStylePreset,
+            size: trackSize,
+          },
+          indicator: {
+            stylePreset: sliderIndicatorTrackStylePreset,
+          },
+          thumb: {
+            stylePreset: sliderThumbStylePreset,
+            size: thumbSize,
+          },
+          thumbLabel: {
+            stylePreset: sliderThumbLabelStylePreset,
+          },
+        }}
+      />
+      <ScreenReaderOnly id={srOnlyVolumeControl} aria-hidden="true">
+        Use the arrow keys to adjust volume
+      </ScreenReaderOnly>
+    </>
+  );
+};
+
+export const VolumeControl = withOwnTheme(ThemelessVolumeControl)({
+  defaults,
+  stylePresets,
+});

package/src/with-enhancers/styled.tsx

@@ -0,0 +1,76 @@
+import {EnhancerOverrides} from '../form/types';
+import {EnhancerProps, WithEnhancersProps} from './types';
+import {
+  getResponsiveSize,
+  getResponsiveSpace,
+  getStylePreset,
+  getResponsiveSpacingStackHorizontal,
+  styled,
+} from '../utils/style';
+import {TextFieldSize} from '../text-field/types';
+import {logicalMarginProps} from '../utils/logical-properties';
+
+const getMarginDirection = ({
+  marginPosition,
+  position,
+}: Pick<EnhancerProps, 'marginPosition' | 'position'>) => {
+  if (marginPosition === 'inside') {
+    return position === 'startEnhancer' ? 'marginRight' : 'marginLeft';
+  }
+
+  return position === 'startEnhancer' ? 'marginLeft' : 'marginRight';
+};
+
+export const StyledEnhancer = styled.div<EnhancerProps>`
+  align-self: center;
+
+  display: flex;
+  align-items: center;
+  ${({componentDefaultsPath, position, marginPosition}) =>
+    getResponsiveSpace(
+      getMarginDirection({position, marginPosition}),
+      `${componentDefaultsPath}.spaceInline`,
+      '',
+      'spaceInline',
+    )};
+
+  ${({alignSelf}) => alignSelf && {alignSelf}}
+`;
+
+export const StyledInputContainer = styled.div<
+  Omit<WithEnhancersProps, 'size'> & {
+    size?: TextFieldSize; // remove this override when https://nidigitalsolutions.jira.com/browse/PPDSC-1872 is implemented
+    componentDefaultsPath: string;
+    focused?: boolean;
+    overrides?: EnhancerOverrides;
+  }
+>`
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  align-items: center;
+
+  ${({componentDefaultsPath}) =>
+    getResponsiveSize('width', componentDefaultsPath, '', 'width')}
+  ${({componentDefaultsPath}) =>
+    getResponsiveSize('height', componentDefaultsPath, '', 'height')}
+  ${({componentDefaultsPath}) =>
+    getResponsiveSize('maxWidth', componentDefaultsPath, '', 'maxWidth')}
+  ${({componentDefaultsPath}) =>
+    getResponsiveSize('maxHeight', componentDefaultsPath, '', 'maxHeight')}
+  ${({componentDefaultsPath}) =>
+    getResponsiveSize('minHeight', componentDefaultsPath, '', 'minHeight')}
+
+   // LOGICAL_PROPS_TO_DO: remove the below func when logical props are used in defaults
+  ${({componentDefaultsPath}) =>
+    getResponsiveSpacingStackHorizontal(componentDefaultsPath)}
+
+  ${({componentDefaultsPath, focused, state}) =>
+    getStylePreset(componentDefaultsPath, '', {
+      isFocused: focused,
+      isInvalid: state === 'invalid',
+      isDisabled: state === 'disabled',
+      isValid: state === 'valid',
+    })};
+  ${({componentDefaultsPath}) => logicalMarginProps(componentDefaultsPath)};
+`;

package/src/with-enhancers/types.ts

@@ -0,0 +1,33 @@
+import {EnhancerOverrides, FormInputState} from '../form/types';
+import {MQ} from '../utils/style';
+
+export type WithEnhancersType = 'input' | 'icons';
+
+type WithEnhancerSelfAlign = 'start' | 'center' | 'end';
+type WithEnhancerMarginPosition = 'inside' | 'outside';
+
+export interface EnhancerProps {
+  componentDefaultsPath: string;
+  valid?: boolean;
+  invalid?: boolean;
+  position: 'startEnhancer' | 'endEnhancer';
+  children: React.ReactNode;
+  marginPosition?: WithEnhancerMarginPosition;
+  alignSelf?: WithEnhancerSelfAlign;
+  overrides?: {
+    spaceInline?: MQ<string>;
+  };
+}
+
+export interface WithEnhancersProps {
+  componentDefaultsPath: string;
+  isFocused?: boolean;
+  children: React.ReactNode;
+  overrides?: EnhancerOverrides;
+  marginPosition?: WithEnhancerMarginPosition;
+  alignSelf?: WithEnhancerSelfAlign;
+  size?: 'small' | 'medium' | 'large';
+  state?: FormInputState;
+  startEnhancer?: React.ReactNode;
+  endEnhancer?: React.ReactNode;
+}

package/src/with-enhancers/with-enhancers.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {WithEnhancersProps, EnhancerProps} from './types';
+import {StyledInputContainer, StyledEnhancer} from './styled';
+
+const Enhancer = ({
+  valid,
+  invalid,
+  position,
+  overrides,
+  children,
+  ...props
+}: EnhancerProps) => (
+  <StyledEnhancer
+    valid={valid}
+    invalid={invalid}
+    position={position}
+    overrides={overrides}
+    {...props}
+  >
+    {children}
+  </StyledEnhancer>
+);
+
+export const WithEnhancers = React.forwardRef<
+  HTMLDivElement,
+  WithEnhancersProps
+>(
+  (
+    {
+      overrides,
+      componentDefaultsPath,
+      state,
+      startEnhancer,
+      endEnhancer,
+      isFocused,
+      children,
+      marginPosition = 'outside',
+      alignSelf,
+    },
+    ref,
+  ) => (
+    <StyledInputContainer
+      ref={ref}
+      componentDefaultsPath={componentDefaultsPath}
+      overrides={overrides}
+      state={state}
+      focused={isFocused}
+    >
+      {startEnhancer && (
+        <Enhancer
+          position="startEnhancer"
+          componentDefaultsPath={`${componentDefaultsPath}.startEnhancer`}
+          overrides={overrides && overrides.startEnhancer}
+          alignSelf={alignSelf}
+          marginPosition={marginPosition}
+        >
+          {startEnhancer}
+        </Enhancer>
+      )}
+      {children}
+      {endEnhancer && (
+        <Enhancer
+          componentDefaultsPath={`${componentDefaultsPath}.endEnhancer`}
+          position="endEnhancer"
+          overrides={overrides && overrides.endEnhancer}
+          alignSelf={alignSelf}
+          marginPosition={marginPosition}
+        >
+          {endEnhancer}
+        </Enhancer>
+      )}
+    </StyledInputContainer>
+  ),
+);

package/static/welcome-banner.svg

@@ -0,0 +1,34 @@
+<svg width="992" height="216" viewBox="0 0 992 216" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_748_40595)">
+<mask id="mask0_748_40595" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="992" height="216">
+<rect width="992" height="216" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_748_40595)">
+<rect width="1440" height="898" transform="translate(-259 -78)" fill="white"/>
+<path d="M-449 -208H991V690H-449V-208Z" fill="#F5F8FF"/>
+<g opacity="0.6" filter="url(#filter0_f_748_40595)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M-610 439.132V-40.4141C-593.091 -42.9551 -575.676 -44.2816 -557.889 -44.2816C-396.601 -44.2816 -265.852 64.8001 -265.852 199.359C-265.852 333.918 -396.601 443 -557.889 443C-575.676 443 -593.091 441.673 -610 439.132Z" fill="#3358CC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M769.699 -316L1076 -316V46.6189C1058.41 49.3771 1040.27 50.8198 1021.72 50.8198C860.43 50.8198 729.681 -58.2619 729.681 -192.821C729.681 -237.761 744.264 -279.858 769.699 -316Z" fill="#3358CC"/>
+</g>
+<g clip-path="url(#clip1_748_40595)">
+<g opacity="0.1">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1131.16 706.001L1098.21 673.056V707H1094.22V669.061L1091.21 666.049H1087.49C1065.94 685.31 1037.5 697.018 1006.32 697.018H601.825C570.648 697.018 542.206 685.31 520.656 666.049H518.937L514.936 670.051V707H510.941V674.046L478.984 706.002L476.159 703.177L510.941 668.396V666.049H473.982V662.054H510.941V656.333C491.683 634.784 479.975 606.344 479.975 575.169V170.669C479.975 139.494 491.683 111.054 510.941 89.505V88.7643H460V84.7692H509.928L464.983 39.8249L467.808 37L510.941 80.1322L510.941 39.8249L514.936 39.8249V84.1273L515.491 84.6824C537.555 62.5299 568.089 48.8198 601.825 48.8198H1006.32C1040.1 48.8198 1070.67 62.5658 1092.74 84.7692H1094.22V39.8249L1098.21 39.8249V81.1218L1142.34 37.001L1145.16 39.8259L1100.22 84.7692H1145.15V88.7643H1098.21V90.645C1116.87 112.053 1128.17 140.041 1128.17 170.669V575.169C1128.17 605.797 1116.87 633.786 1098.21 655.193V662.054H1131.17V666.049H1098.21V667.407L1133.98 703.176L1131.16 706.001ZM1085.95 662.054C1086.17 661.853 1086.39 661.652 1086.61 661.45L1012.2 587.043C989.094 610.149 962.154 629.421 932.417 643.824V662.054H1085.95ZM1089.49 658.678L1015.01 584.199C1036.88 561.733 1055.18 535.778 1069 507.248H1094.22V653.682C1092.69 655.393 1091.11 657.059 1089.49 658.678ZM1012.18 581.374C1033.29 559.68 1051.03 534.689 1064.55 507.248H938.056L1012.18 581.374ZM937.64 503.253H1066.48C1084.27 465.702 1094.22 423.714 1094.22 379.402C1094.22 378.736 1094.22 378.07 1094.21 377.405H986.342C986.349 378.072 986.353 378.741 986.353 379.41C986.353 427.261 967.864 470.793 937.64 503.253ZM933.108 507.949L1009.38 584.218C987.035 606.558 961.061 625.265 932.417 639.377V508.636C932.648 508.408 932.878 508.179 933.108 507.949ZM928.422 512.47V641.307C909.368 650.333 889.173 657.341 868.111 662.054H805.568V561.182C853.03 560.929 896.186 542.487 928.422 512.47ZM928.123 507.248C896.356 537.954 853.177 556.928 805.568 557.187V507.248H928.123ZM933.076 502.268C963.605 470.346 982.358 427.068 982.358 379.41C982.358 378.741 982.354 378.072 982.347 377.405H932.417V501.609L933.076 502.268ZM986.256 373.41H1094.16C1093.3 331.307 1083.47 291.409 1066.48 255.556H937.629C966.591 286.655 984.781 327.92 986.256 373.41ZM932.417 255.866C962.042 286.515 980.746 327.786 982.259 373.41H932.417V255.866ZM933.794 251.561C933.733 251.499 933.672 251.438 933.611 251.376L1009.89 175.098C1032.01 197.328 1050.54 223.129 1064.55 251.561H933.794ZM928.422 246.349C896.186 216.333 853.03 197.89 805.568 197.637L805.568 89.7619C849.513 89.909 891.152 99.8424 928.422 117.497L928.422 246.349ZM805.568 201.632C853.087 201.892 896.191 220.794 927.94 251.396L927.776 251.561H805.568V201.632ZM801.573 197.659L801.573 89.7755C758.761 90.2106 718.173 99.9342 681.73 117.027L681.73 245.429C713.396 216.378 755.391 198.407 801.573 197.659ZM681.73 250.902C712.978 221.021 755.107 202.425 801.573 201.655V251.561H682.369L681.73 250.921V250.902ZM676.039 250.88C675.812 251.106 675.587 251.333 675.361 251.561H544.603C558.716 222.917 577.422 196.944 599.761 174.603L676.039 250.88ZM671.526 255.556C642.564 286.655 624.375 327.92 622.9 373.41H514.996C515.851 331.307 525.689 291.409 542.673 255.556H671.526ZM626.897 373.41C628.415 327.632 647.241 286.236 677.039 255.556H677.735V363.292C677.315 366.626 677.025 370.001 676.867 373.41H626.897ZM622.813 377.405H514.942C514.938 378.07 514.936 378.736 514.936 379.402C514.936 423.714 524.886 465.702 542.675 503.253H671.516C641.292 470.793 622.803 427.261 622.803 379.41C622.803 378.741 622.806 378.072 622.813 377.405ZM676.564 502.773C645.749 470.803 626.798 427.32 626.798 379.41C626.798 378.741 626.801 378.072 626.809 377.405H676.745C676.734 378.07 676.729 378.736 676.729 379.403C676.729 384.86 677.071 390.237 677.735 395.514V501.602L676.564 502.773ZM681.73 507.918V507.248H801.573V557.165C755.107 556.395 712.978 537.798 681.73 507.918ZM681.73 513.391C713.396 542.441 755.391 560.412 801.573 561.161V662.054H741.044C720.349 657.423 700.49 650.576 681.73 641.777L681.73 513.391ZM677.735 509.614L677.735 639.866C648.908 625.801 622.763 607.092 600.274 584.713L676.544 508.443C676.939 508.835 677.336 509.225 677.735 509.614ZM1094.22 427.951C1089.82 454.416 1081.87 479.684 1070.89 503.253H1094.22V427.951ZM1094.22 255.556V330.854C1089.82 304.39 1081.88 279.123 1070.9 255.556H1094.22ZM1094.22 251.561H1069C1054.7 222.037 1035.6 195.27 1012.71 172.274L1093.56 91.4253C1093.7 91.5812 1093.84 91.7374 1093.99 91.8941C1094.06 91.9812 1094.14 92.0685 1094.22 92.1559V251.561ZM1090.57 88.7643L1009.88 169.461C987.294 147.375 961.162 128.903 932.417 114.98V88.7643H1090.57ZM1007.05 172.286C985.239 150.96 960.073 133.052 932.417 119.427L932.417 246.92L1007.05 172.286ZM928.422 88.7643V113.082C902.955 101.219 875.504 92.9019 846.703 88.7643H928.422ZM681.73 88.7643H762.452C734.026 92.848 706.915 101.003 681.73 112.62V88.7643ZM677.735 88.7643V114.499C648.81 128.375 622.509 146.848 599.78 168.972L519.573 88.7643H677.735ZM677.735 118.938C649.899 132.52 624.563 150.432 602.606 171.797L677.735 246.926L677.735 118.938ZM515.544 90.3858L596.936 171.778C573.832 194.885 554.56 221.824 540.156 251.561H514.936L514.936 91.0445C515.138 90.8242 515.341 90.6046 515.544 90.3858ZM514.936 255.556H538.258C527.28 279.122 519.339 304.388 514.936 330.851L514.936 255.556ZM514.936 503.253L514.936 427.953C519.339 454.417 527.281 479.685 538.26 503.253H514.936ZM514.936 507.248H540.158C554.081 535.99 572.552 562.12 594.636 584.7L519.669 659.668C518.045 658.089 516.467 656.463 514.936 654.794L514.936 507.248ZM544.605 507.248C558.23 534.901 576.138 560.065 597.461 581.875L672.089 507.248H544.605ZM522.933 662.054L597.449 587.538C620.704 610.681 647.815 629.953 677.735 644.305V662.054H522.933ZM681.73 662.054V646.184C695.522 652.546 709.891 657.869 724.737 662.054H681.73ZM681.73 666.049H740.6C760.255 670.417 780.652 672.814 801.573 673.024V693.023H681.73V666.049ZM762.772 666.049C775.458 667.883 788.41 668.895 801.573 669.029V666.049H762.772ZM805.568 693.023V673.037C827.194 672.966 848.269 670.557 868.555 666.049H928.422V693.023H805.568ZM805.568 669.042C819.424 668.996 833.05 667.977 846.383 666.049H805.568V669.042ZM928.422 662.054H884.419C899.623 657.768 914.326 652.288 928.422 645.722V662.054ZM1092.86 662.054L1092.31 661.503C1092.95 660.862 1093.59 660.214 1094.22 659.559V662.054H1092.86ZM1098.21 507.248V648.971C1114.46 628.773 1124.18 603.106 1124.18 575.169V507.248H1098.21ZM1098.21 503.253H1124.18V377.405H1098.21V503.253ZM1098.21 373.41H1124.18V255.556H1098.21V373.41ZM1098.21 251.561H1124.18V170.669C1124.18 142.732 1114.46 117.065 1098.21 96.8668V251.561ZM1006.32 52.8149C1037.54 52.8149 1065.93 64.9538 1087.01 84.7692H932.417V52.8149H1006.32ZM805.568 52.8149H928.422V84.7692H805.568V52.8149ZM681.73 52.8149H801.573V84.7692H681.73V52.8149ZM601.825 52.8149H677.735V84.7692H521.135C542.221 64.9538 570.605 52.8149 601.825 52.8149ZM483.97 170.669C483.97 142.16 494.093 116.015 510.941 95.6327L510.941 251.561H483.97V170.669ZM483.97 373.41V255.556H510.941L510.941 373.41H483.97ZM483.97 503.253V377.405H510.941L510.941 503.253H483.97ZM483.97 575.169V507.248H510.941L510.941 650.206C494.093 629.823 483.97 603.678 483.97 575.169ZM514.936 662.054V660.595C515.418 661.085 515.904 661.572 516.395 662.054H514.936ZM601.825 693.023C573.313 693.023 547.167 682.899 526.783 666.049H677.735V693.023H601.825ZM932.417 666.049V693.023H1006.32C1034.84 693.023 1060.98 682.899 1081.37 666.049H932.417ZM889.795 289.542L805.927 373.41H805.568V255.56C838.195 255.817 867.816 268.69 889.795 289.542ZM892.621 286.716C877.079 271.947 857.826 261.046 836.405 255.556H923.781L892.621 286.716ZM892.649 292.338L811.577 373.41H928.276C926.772 341.85 913.455 313.384 892.649 292.338ZM928.422 347.584C922.715 325.303 911.153 305.367 895.474 289.513L928.422 256.565V347.584ZM928.402 377.405H808.213L894.919 464.111C915.695 441.961 928.418 412.168 928.418 379.403C928.418 378.736 928.413 378.07 928.402 377.405ZM897.745 466.937C912.271 451.482 922.994 432.413 928.422 411.222V497.613L897.745 466.937ZM894.964 469.806L928.411 503.253H836.394C858.909 497.484 879.03 485.738 894.964 469.806ZM892.139 466.981C869.946 489.172 839.369 502.979 805.568 503.246V380.409L892.139 466.981ZM801.573 503.214V383.414L717.506 467.481C739.216 488.943 768.821 502.436 801.573 503.214ZM772.748 503.253C750.469 497.545 730.535 485.984 714.681 470.306L681.734 503.253H772.748ZM714.71 464.627L801.573 377.764V377.405H681.73V395.258C685.144 421.978 697.073 446.036 714.71 464.627ZM681.73 414.928C687.487 434.87 697.968 452.809 711.884 467.453L681.73 497.607V414.928ZM681.73 363.547V373.41H798.569L716.993 291.835C698.104 310.726 685.29 335.69 681.73 363.547ZM714.168 289.01C699.114 304.066 687.798 322.859 681.73 343.878V256.571L714.168 289.01ZM717.037 286.229L686.364 255.556H772.737C751.553 260.985 732.488 271.707 717.037 286.229ZM719.863 289.055C741.336 268.915 769.991 256.342 801.573 255.592V370.765L719.863 289.055Z" fill="#577FFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1131.16 706.001L1098.21 673.056V707H1094.22V669.061L1091.21 666.049H1087.49C1065.94 685.31 1037.5 697.018 1006.32 697.018H601.825C570.648 697.018 542.206 685.31 520.656 666.049H518.937L514.936 670.051V707H510.941V674.046L478.984 706.002L476.159 703.177L510.941 668.396V666.049H473.982V662.054H510.941V656.333C491.683 634.784 479.975 606.344 479.975 575.169V170.669C479.975 139.494 491.683 111.054 510.941 89.505V88.7643H460V84.7692H509.928L464.983 39.8249L467.808 37L510.941 80.1322L510.941 39.8249L514.936 39.8249V84.1273L515.491 84.6824C537.555 62.5299 568.089 48.8198 601.825 48.8198H1006.32C1040.1 48.8198 1070.67 62.5658 1092.74 84.7692H1094.22V39.8249L1098.21 39.8249V81.1218L1142.34 37.001L1145.16 39.8259L1100.22 84.7692H1145.15V88.7643H1098.21V90.645C1116.87 112.053 1128.17 140.041 1128.17 170.669V575.169C1128.17 605.797 1116.87 633.786 1098.21 655.193V662.054H1131.17V666.049H1098.21V667.407L1133.98 703.176L1131.16 706.001ZM1085.95 662.054C1086.17 661.853 1086.39 661.652 1086.61 661.45L1012.2 587.043C989.094 610.149 962.154 629.421 932.417 643.825V662.054H1085.95ZM1089.49 658.678L1015.01 584.199C1036.88 561.733 1055.18 535.778 1069 507.248H1094.22V653.682C1092.69 655.393 1091.11 657.059 1089.49 658.678ZM1012.18 581.374C1033.29 559.68 1051.03 534.689 1064.55 507.248H938.056L1012.18 581.374ZM937.64 503.253H1066.48C1084.27 465.702 1094.22 423.714 1094.22 379.402C1094.22 378.736 1094.22 378.07 1094.21 377.405H986.342C986.349 378.072 986.353 378.741 986.353 379.41C986.353 427.261 967.864 470.793 937.64 503.253ZM933.108 507.949L1009.38 584.218C987.035 606.558 961.061 625.265 932.417 639.377V508.636C932.648 508.408 932.878 508.179 933.108 507.949ZM928.422 512.47V641.307C909.368 650.333 889.173 657.341 868.111 662.054H805.568V561.182C853.03 560.929 896.186 542.487 928.422 512.47ZM928.123 507.248C896.356 537.954 853.177 556.928 805.568 557.187V507.248H928.123ZM933.076 502.268C963.605 470.346 982.358 427.068 982.358 379.41C982.358 378.741 982.354 378.072 982.347 377.405H932.417V501.609L933.076 502.268ZM986.256 373.41H1094.16C1093.3 331.307 1083.47 291.409 1066.48 255.556H937.629C966.591 286.655 984.781 327.92 986.256 373.41ZM932.417 255.866C962.042 286.515 980.746 327.786 982.259 373.41H932.417V255.866ZM933.794 251.561C933.733 251.499 933.672 251.438 933.611 251.376L1009.89 175.098C1032.01 197.328 1050.54 223.129 1064.55 251.561H933.794ZM928.422 246.349C896.186 216.333 853.03 197.89 805.568 197.637L805.568 89.7619C849.513 89.909 891.152 99.8424 928.422 117.497L928.422 246.349ZM805.568 201.632C853.087 201.892 896.191 220.794 927.94 251.396L927.776 251.561H805.568V201.632ZM801.573 197.659L801.573 89.7755C758.761 90.2106 718.173 99.9342 681.73 117.027L681.73 245.429C713.396 216.378 755.391 198.407 801.573 197.659ZM681.73 250.902C712.978 221.021 755.107 202.425 801.573 201.655V251.561H682.369L681.73 250.921V250.902ZM676.039 250.88C675.812 251.106 675.587 251.333 675.361 251.561H544.603C558.716 222.917 577.422 196.944 599.761 174.603L676.039 250.88ZM671.526 255.556C642.564 286.655 624.375 327.92 622.9 373.41H514.996C515.851 331.307 525.689 291.409 542.673 255.556H671.526ZM626.897 373.41C628.415 327.632 647.241 286.236 677.039 255.556H677.735V363.292C677.315 366.626 677.025 370.001 676.867 373.41H626.897ZM622.813 377.405H514.942C514.938 378.07 514.936 378.736 514.936 379.402C514.936 423.714 524.886 465.702 542.675 503.253H671.516C641.292 470.793 622.803 427.261 622.803 379.41C622.803 378.741 622.806 378.072 622.813 377.405ZM676.564 502.773C645.749 470.803 626.798 427.32 626.798 379.41C626.798 378.741 626.801 378.072 626.809 377.405H676.745C676.734 378.07 676.729 378.736 676.729 379.403C676.729 384.86 677.071 390.237 677.735 395.514V501.602L676.564 502.773ZM681.73 507.918V507.248H801.573V557.165C755.107 556.395 712.978 537.798 681.73 507.918ZM681.73 513.391C713.396 542.441 755.391 560.412 801.573 561.161V662.054H741.044C720.349 657.423 700.49 650.576 681.73 641.777L681.73 513.391ZM677.735 509.614L677.735 639.866C648.908 625.801 622.763 607.092 600.274 584.713L676.544 508.443C676.939 508.835 677.336 509.225 677.735 509.614ZM1094.22 427.951C1089.82 454.416 1081.87 479.684 1070.9 503.253H1094.22V427.951ZM1094.22 255.556V330.854C1089.82 304.39 1081.88 279.123 1070.9 255.556H1094.22ZM1094.22 251.561H1069C1054.7 222.037 1035.6 195.27 1012.71 172.274L1093.56 91.4253C1093.7 91.5812 1093.84 91.7374 1093.99 91.8941C1094.06 91.9812 1094.14 92.0685 1094.22 92.1559V251.561ZM1090.57 88.7643L1009.88 169.461C987.294 147.375 961.162 128.903 932.417 114.98V88.7643H1090.57ZM1007.05 172.286C985.239 150.96 960.073 133.052 932.417 119.427L932.417 246.92L1007.05 172.286ZM928.422 88.7643V113.082C902.955 101.219 875.504 92.9019 846.703 88.7643H928.422ZM681.73 88.7643H762.452C734.026 92.848 706.915 101.003 681.73 112.62V88.7643ZM677.735 88.7643V114.499C648.81 128.375 622.509 146.848 599.78 168.972L519.573 88.7643H677.735ZM677.735 118.938C649.899 132.52 624.563 150.432 602.606 171.797L677.735 246.926L677.735 118.938ZM515.544 90.3858L596.936 171.778C573.832 194.885 554.56 221.824 540.156 251.561H514.936L514.936 91.0445C515.138 90.8242 515.341 90.6046 515.544 90.3858ZM514.936 255.556H538.258C527.28 279.122 519.339 304.388 514.936 330.851L514.936 255.556ZM514.936 503.253L514.936 427.953C519.339 454.417 527.281 479.685 538.26 503.253H514.936ZM514.936 507.248H540.158C554.081 535.99 572.552 562.12 594.636 584.7L519.669 659.668C518.045 658.089 516.467 656.463 514.936 654.794L514.936 507.248ZM544.605 507.248C558.23 534.901 576.138 560.065 597.461 581.875L672.089 507.248H544.605ZM522.933 662.054L597.449 587.538C620.704 610.681 647.815 629.953 677.735 644.305V662.054H522.933ZM681.73 662.054V646.184C695.521 652.546 709.89 657.869 724.736 662.054H681.73ZM681.73 666.049H740.6C760.255 670.417 780.652 672.814 801.573 673.024V693.023H681.73V666.049ZM762.772 666.049C775.458 667.883 788.41 668.895 801.573 669.029V666.049H762.772ZM805.568 693.023V673.037C827.194 672.966 848.27 670.557 868.555 666.049H928.422V693.023H805.568ZM805.568 669.042C819.424 668.996 833.051 667.977 846.383 666.049H805.568V669.042ZM928.422 662.054H884.419C899.623 657.768 914.326 652.288 928.422 645.722V662.054ZM1092.86 662.054L1092.31 661.503C1092.95 660.862 1093.59 660.214 1094.22 659.559V662.054H1092.86ZM1098.21 507.248V648.971C1114.46 628.773 1124.18 603.106 1124.18 575.169V507.248H1098.21ZM1098.21 503.253H1124.18V377.405H1098.21V503.253ZM1098.21 373.41H1124.18V255.556H1098.21V373.41ZM1098.21 251.561H1124.18V170.669C1124.18 142.732 1114.46 117.065 1098.21 96.8668V251.561ZM1006.32 52.8149C1037.54 52.8149 1065.93 64.9538 1087.01 84.7692H932.417V52.8149H1006.32ZM805.568 52.8149H928.422V84.7692H805.568V52.8149ZM681.73 52.8149H801.573V84.7692H681.73V52.8149ZM601.825 52.8149H677.735V84.7692H521.135C542.221 64.9538 570.605 52.8149 601.825 52.8149ZM483.97 170.669C483.97 142.16 494.093 116.015 510.941 95.6327L510.941 251.561H483.97V170.669ZM483.97 373.41V255.556H510.941L510.941 373.41H483.97ZM483.97 503.253V377.405H510.941L510.941 503.253H483.97ZM483.97 575.169V507.248H510.941L510.941 650.206C494.093 629.823 483.97 603.678 483.97 575.169ZM514.936 662.054V660.595C515.418 661.085 515.904 661.572 516.395 662.054H514.936ZM601.825 693.023C573.313 693.023 547.167 682.899 526.783 666.049H677.735V693.023H601.825ZM932.417 666.049V693.023H1006.32C1034.84 693.023 1060.98 682.899 1081.37 666.049H932.417ZM889.795 289.542L805.927 373.41H805.568V255.56C838.195 255.817 867.816 268.69 889.795 289.542ZM892.621 286.716C877.079 271.947 857.826 261.046 836.405 255.556H923.781L892.621 286.716ZM892.649 292.338L811.577 373.41H928.276C926.772 341.85 913.455 313.384 892.649 292.338ZM928.422 347.584C922.715 325.303 911.153 305.367 895.474 289.513L928.422 256.565V347.584ZM928.402 377.405H808.213L894.919 464.111C915.695 441.961 928.418 412.168 928.418 379.403C928.418 378.736 928.413 378.07 928.402 377.405ZM897.745 466.937C912.271 451.482 922.994 432.413 928.422 411.222V497.613L897.745 466.937ZM894.964 469.806L928.411 503.253H836.394C858.909 497.484 879.03 485.738 894.964 469.806ZM892.139 466.981C869.946 489.172 839.369 502.979 805.568 503.246V380.409L892.139 466.981ZM801.573 503.214V383.414L717.506 467.481C739.216 488.943 768.821 502.436 801.573 503.214ZM772.748 503.253C750.469 497.545 730.535 485.984 714.681 470.306L681.734 503.253H772.748ZM714.71 464.627L801.573 377.764V377.405H681.73V395.258C685.144 421.978 697.073 446.036 714.71 464.627ZM681.73 414.928C687.487 434.87 697.968 452.809 711.884 467.453L681.73 497.607V414.928ZM681.73 363.547V373.41H798.569L716.993 291.835C698.104 310.726 685.29 335.69 681.73 363.547ZM714.168 289.01C699.114 304.066 687.798 322.859 681.73 343.878V256.571L714.168 289.01ZM717.037 286.229L686.364 255.556H772.737C751.553 260.985 732.488 271.707 717.037 286.229ZM719.863 289.055C741.336 268.915 769.991 256.342 801.573 255.592V370.765L719.863 289.055Z" fill="#577FFB"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_748_40595" x="-1080" y="-786" width="2626" height="1699" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="235" result="effect1_foregroundBlur_748_40595"/>
+</filter>
+<clipPath id="clip0_748_40595">
+<rect width="992" height="216" fill="white"/>
+</clipPath>
+<clipPath id="clip1_748_40595">
+<rect width="684" height="897" fill="white" transform="translate(461 -77)"/>
+</clipPath>
+</defs>
+</svg>

package/terraform/dns/dev.tfvars

@@ -0,0 +1,13 @@
+environment              = "dev"
+zone_name                = "newskit.dev-news.co.uk"
+cluster_domain           = "ceng-dev.newsuk.tech"
+distribution_domain_name      = {
+  "www"       = "dzgo1oqy4dugt.cloudfront.net",
+  "storybook" = "do1696tkvkjks.cloudfront.net"
+}
+cert = {
+  "_9e75dbcdaa5a07c5a9fd8c95ee6f66ed.newskit.dev-news.co.uk"     = "_f91f0167b578ad2b6c29d6568dbb1bbe.vjldqjsdcd.acm-validations.aws."
+  "_081d5119724a79e695962c8c647a89d7.www.newskit.dev-news.co.uk" = "_80b12dacd37b2474aecb02da9216b1cb.xrchbtpdjs.acm-validations.aws."
+  "_2c60ebdbfb2e7a7e88e53ec40e23c43f.storybook.newskit.dev-news.co.uk" = "_75178cbdbfa7bf6ba1c03e8bd3a9a058.xrchbtpdjs.acm-validations.aws."
+  "_232158f0264e13e9a1726c0f7ac4ad7c.www.storybook.newskit.dev-news.co.uk" = "_23b5d009aea62c438975f2c0e2acdfcf.fsdcfjjflr.acm-validations.aws."
+}

package/terraform/dns/prod.tfvars

@@ -0,0 +1,7 @@
+environment              = "prod"
+zone_name                = "newskit.co.uk"
+cluster_domain           = "ceng.prod.newsuk.tech"
+distribution_domain_name = {
+    "www"       = "d1zkad74gqi3zt.cloudfront.net",
+    "storybook" = "example.com"
+}

package/terraform/dns/provider.tf

@@ -0,0 +1,21 @@
+provider "aws" {
+  region = "eu-west-1"
+}
+
+terraform {
+  backend "s3" {
+    bucket = "nu-sun-terraform-state"
+    key    = "product-platforms/newskit/dns/dev/terraform.tfstate"
+    region = "eu-west-1"
+  }
+}
+
+locals {
+  tags = {
+    Name               = "ncu-newskit-dns-${var.environment}"
+    Environment        = var.environment
+    ServiceOwner       = "product-platforms"
+    ServiceName        = "ncu-newskit"
+    ServiceCatalogueId = 331
+  }
+}

package/terraform/dns/route53.tf

@@ -0,0 +1,31 @@
+resource "aws_route53_zone" "newskit" {
+  name = var.zone_name
+  tags = local.tags
+}
+
+resource "aws_route53_record" "cdn" {
+  for_each = var.distribution_domain_name
+  zone_id  = aws_route53_zone.newskit.zone_id
+  name     = each.key
+  type     = "CNAME"
+  ttl      = "360"
+  records  = [var.distribution_domain_name[each.key]]
+}
+
+resource "aws_route53_record" "origin" {
+  for_each = var.domain_mapping
+  zone_id  = aws_route53_zone.newskit.zone_id
+  name     = "origin-${each.key}"
+  type     = "CNAME"
+  ttl      = "360"
+  records  = ["${each.value}.${var.cluster_domain}"]
+}
+
+resource "aws_route53_record" "cert" {
+  for_each = var.cert
+  zone_id  = aws_route53_zone.newskit.zone_id
+  name     = "${each.key}"
+  type     = "CNAME"
+  ttl      = "900"
+  records  = ["${each.value}"]
+}

package/terraform/dns/staging.tfvars

@@ -0,0 +1,13 @@
+environment              = "staging"
+zone_name                = "newskit.staging-news.co.uk"
+cluster_domain           = "staging.ceng.newsuk.tech"
+distribution_domain_name      = {
+  "www"       = "d361ybor7ruvjs.cloudfront.net",
+  "storybook" = "d1mpo513jliw4t.cloudfront.net"
+}
+cert = {
+  "_34f1dae50d77832c56f007fb0026d2c1.newskit.staging-news.co.uk"     = "_57fc42778e542e5da2f031e150c305a8.vjldqjsdcd.acm-validations.aws."
+  "_0f7bea9fcbfa6accda5f1617c2c2a354.www.newskit.staging-news.co.uk" = "_8fcc15c1c23296f118feccd663a306da.vjldqjsdcd.acm-validations.aws."
+  "_21a4be1089c41a276fd70384b4c8f49d.storybook.newskit.staging-news.co.uk" = "_d54122f03af437c83094fbd30d6364b8.bwlshdtstt.acm-validations.aws."
+  "_7545a937ba2bf2b1dd7834811c16c539.www.storybook.newskit.staging-news.co.uk" = "_3f9f7d955f8191ed8e1d71aee1b0d72c.bwlshdtstt.acm-validations.aws."
+}

package/terraform/dns/variables.tf

@@ -0,0 +1,29 @@
+variable "environment" {
+  description = "Environment name"
+}
+
+variable "zone_name" {
+  description = "Hosted zone name"
+}
+
+variable "distribution_domain_name" {
+  description = "CloudFront Distribution domain name"
+}
+
+variable "domain_mapping" {
+  type        = map(string)
+  description = "Subdomains to set records for"
+  default = {
+    "www"       = "newskit"
+    "storybook" = "newskit-storybook"
+  }
+}
+
+variable "cluster_domain" {
+  description = "Top domain for EKS cluster."
+}
+
+variable "cert" {
+  type    = map(string)
+  default = {}
+}

package/terraform/ecr/ecr.tf

@@ -0,0 +1,34 @@
+resource "aws_ecr_repository" "ecr_product_platform" {
+  name = "ncu-newskit"
+
+  tags = local.tags
+}
+
+resource "aws_ecr_repository_policy" "ecr_product_platform_policy" {
+  repository = aws_ecr_repository.ecr_product_platform.name
+  policy     = data.aws_iam_policy_document.ecr_cross_account.json
+}
+
+data "aws_iam_policy_document" "ecr_cross_account" {
+  statement {
+    sid    = "Cross-AWS-Account-ECR-Read"
+    effect = "Allow"
+
+    principals {
+      type        = "AWS"
+      identifiers = formatlist("arn:aws:iam::%s:root", var.ecr_read_only_principals)
+    }
+
+    actions = [
+      "ecr:BatchCheckLayerAvailability",
+      "ecr:BatchGetImage",
+      "ecr:DescribeImages",
+      "ecr:DescribeRepositories",
+      "ecr:GetDownloadUrlForLayer",
+      "ecr:GetLifecyclePolicy",
+      "ecr:GetLifecyclePolicyPreview",
+      "ecr:GetRepositoryPolicy",
+      "ecr:ListImages",
+    ]
+  }
+}