@financial-times/dotcom-ui-layout 7.3.0 → 7.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-layout",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -8,13 +8,12 @@
   "styles": "styles.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "tsc": "../../node_modules/.bin/tsc --incremental",
     "clean": "npm run clean:dist && npm run clean:node_modules",
     "clean:dist": "rm -rf dist",
     "clean:node_modules": "rm -rf node_modules",
     "clean:install": "npm run clean && npm i",
-    "build:node": "npm run tsc -- --module commonjs --outDir ./dist/node",
-    "build:browser": "npm run tsc -- --module es2015 --outDir ./dist/browser",
+    "build:browser": "tsc --module es2015 --outDir ./dist/browser",
+    "build:node": "tsc",
     "build": "npm run build:node && npm run build:browser",
     "dev": "echo -n node browser | parallel -u -d ' ' npm run build:{} -- --watch",
     "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
@@ -23,10 +22,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-types-navigation": "^7.3.0",
-    "@financial-times/dotcom-ui-base-styles": "^7.3.0",
-    "@financial-times/dotcom-ui-footer": "^7.3.0",
-    "@financial-times/dotcom-ui-header": "^7.3.0",
+    "@financial-times/dotcom-types-navigation": "file:../dotcom-types-navigation",
+    "@financial-times/dotcom-ui-base-styles": "file:../dotcom-ui-base-styles",
+    "@financial-times/dotcom-ui-footer": "file:../dotcom-ui-footer",
+    "@financial-times/dotcom-ui-header": "file:../dotcom-ui-header",
     "focus-visible": "^5.0.0",
     "n-ui-foundations": "^9.0.0"
   },
@@ -37,6 +36,9 @@
     "node": ">= 14.0.0",
     "npm": "7.x || 8.x"
   },
+  "files": [
+    "dist/"
+  ],
   "repository": {
     "type": "git",
     "repository": "https://github.com/Financial-Times/dotcom-page-kit.git",
@@ -50,4 +52,4 @@
     "check-engine": "^1.10.1",
     "react": "^16.8.6"
   }
-}
+}

package/src/components/Layout.tsx

@@ -1,125 +0,0 @@
-import React from 'react'
-import {
-  Header as HeaderSimple,
-  Header as HeaderLarge,
-  LogoOnly,
-  NoOutboundLinksHeader,
-  Drawer,
-  THeaderOptions
-} from '@financial-times/dotcom-ui-header/component'
-import { TNavigationData } from '@financial-times/dotcom-types-navigation'
-import { Footer, LegalFooter, TFooterOptions } from '@financial-times/dotcom-ui-footer/component'
-import Template from './Template'
-
-enum Headers {
-  simple = HeaderSimple,
-  'large-logo' = HeaderLarge,
-  'logo-only' = LogoOnly,
-  'no-outbound-links' = NoOutboundLinksHeader
-}
-
-enum Footers {
-  simple = Footer,
-  legal = LegalFooter
-}
-
-export type TLayoutProps = {
-  navigationData?: TNavigationData
-  headerOptions?: THeaderOptions
-  headerBefore?: string | React.ReactNode
-  headerVariant?: Headers | false
-  headerComponent?: React.ReactNode
-  headerAfter?: string | React.ReactNode
-  footerOptions?: TFooterOptions
-  footerBefore?: string | React.ReactNode
-  footerVariant?: Footers | false
-  footerComponent?: React.ReactNode
-  footerAfter?: string | React.ReactNode
-  children?: React.ReactNode
-  contents?: string
-}
-
-export function Layout({
-  navigationData,
-  headerOptions,
-  headerBefore,
-  headerVariant,
-  headerComponent,
-  headerAfter,
-  footerOptions,
-  footerBefore,
-  footerVariant,
-  footerComponent,
-  footerAfter,
-  children,
-  contents
-}: TLayoutProps) {
-  let header = null
-  let drawer = null
-
-  if (headerVariant && Headers[headerVariant] && !headerComponent) {
-    const Header = Headers[headerVariant]
-    header = <Header {...headerOptions} data={navigationData} variant={headerVariant} />
-
-    if (Header === HeaderSimple || Header === HeaderLarge) {
-      drawer = <Drawer {...headerOptions} data={navigationData} />
-    }
-  }
-
-  let footer = null
-
-  if (footerVariant && Footers[footerVariant] && !footerComponent) {
-    const Footer = Footers[footerVariant]
-    footer = <Footer {...footerOptions} data={navigationData} variant={footerVariant} />
-  }
-
-  return (
-    <div className="n-layout">
-      <a
-        data-trackable="a11y-skip-to-help"
-        className="n-layout__skip-link"
-        href="https://www.ft.com/accessibility">
-        Accessibility help
-      </a>
-
-      {drawer ? (
-        <a data-trackable="a11y-skip-to-navigation" className="n-layout__skip-link" href="#site-navigation">
-          Skip to navigation
-        </a>
-      ) : null}
-
-      <a data-trackable="a11y-skip-to-content" className="n-layout__skip-link" href="#site-content">
-        Skip to content
-      </a>
-
-      {footer ? (
-        <a data-trackable="a11y-skip-to-footer" className="n-layout__skip-link" href="#site-footer">
-          Skip to footer
-        </a>
-      ) : null}
-
-      <div className="n-layout__row n-layout__row--header">
-        <Template className="n-layout__header-before">{headerBefore}</Template>
-        {headerComponent || header || null}
-        <Template className="n-layout__header-after">{headerAfter}</Template>
-      </div>
-      <div className="n-layout__row n-layout__row--content">
-        <Template>{contents || children}</Template>
-      </div>
-      <div className="n-layout__row n-layout__row--footer">
-        <Template className="n-layout__footer-before">{footerBefore}</Template>
-        {footerComponent || footer || null}
-        <Template className="n-layout__footer-after">{footerAfter}</Template>
-      </div>
-
-      {drawer}
-    </div>
-  )
-}
-
-Layout.defaultProps = {
-  headerVariant: 'simple',
-  footerVariant: 'simple',
-  headerOptions: {},
-  footerOptions: {}
-}

package/src/components/Template.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-
-type TTemplateProps = {
-  children?: string | React.ReactNode
-  [rest: string]: any
-}
-
-export default function Template(props: TTemplateProps) {
-  const { children, ...rest } = props
-
-  if (!children) return null
-
-  if (typeof children === 'string') {
-    return <div {...rest} dangerouslySetInnerHTML={{ __html: children }} />
-  } else {
-    return <div {...rest}>{children}</div>
-  }
-}

package/src/index.ts

@@ -1 +0,0 @@
-export * from './components/Layout'

package/styles.scss

@@ -1,50 +0,0 @@
-// This is needed by Origami components that speak to the image service. Setting
-// it here means it'll be the same no matter which app generates it and it will
-// be reused from the CDN
-$system-code: 'page-kit-layout' !default;
-
-@import '@financial-times/dotcom-ui-base-styles/styles';
-
-.n-layout {
-  display: table;
-  width: 100%;
-  height: 100vh;
-  table-layout: fixed;
-}
-
-.n-layout__row {
-  display: table-row;
-}
-
-.n-layout__row--content {
-  height: 100%;
-}
-
-.n-layout__header-before {
-  background-color: oColorsByName('black-20')
-}
-
-.n-layout__skip-link {
-  @include nUiZIndexFor('notification');
-  position: absolute;
-  top: 1em;
-  left: -9999px;
-  padding: 0.5em 1em;
-  background: oColorsByName('velvet');
-  color: oColorsByName('white');
-
-  &:focus {
-    left: 0;
-    color: oColorsByName('white');
-  }
-}
-
-@media print {
-  .n-layout,
-  .n-layout__row {
-    display: block;
-  }
-}
-
-@import '@financial-times/dotcom-ui-header/styles';
-@import '@financial-times/dotcom-ui-footer/styles';