@financial-times/dotcom-ui-layout 11.3.0 → 12.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/browser/components/Layout.d.ts +1 -1
  2. package/dist/browser/components/Layout.js +3 -3
  3. package/dist/browser/components/Template.d.ts +1 -1
  4. package/dist/browser/components/Template.js +2 -2
  5. package/dist/node/components/Layout.d.ts +1 -1
  6. package/dist/node/components/Layout.js +4 -5
  7. package/dist/node/components/Template.d.ts +1 -1
  8. package/dist/node/components/Template.js +3 -3
  9. package/dist/node/index.js +5 -1
  10. package/dist/tsconfig.tsbuildinfo +1 -2844
  11. package/package.json +11 -5
  12. package/src/__stories__/demos.scss +0 -38
  13. package/src/__stories__/story.tsx +0 -110
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@financial-times/dotcom-ui-layout",
3
- "version": "11.3.0",
3
+ "version": "12.0.1",
4
4
  "description": "",
5
5
  "main": "component.js",
6
6
  "browser": "browser.js",
@@ -21,13 +21,13 @@
21
21
  "author": "",
22
22
  "license": "MIT",
23
23
  "dependencies": {
24
- "@financial-times/dotcom-types-navigation": "^11.3.0",
25
- "@financial-times/dotcom-ui-base-styles": "^11.3.0",
26
- "@financial-times/dotcom-ui-footer": "^11.3.0",
27
- "@financial-times/dotcom-ui-header": "^11.3.0",
24
+ "@financial-times/dotcom-types-navigation": "^12.0.1",
28
25
  "focus-visible": "^5.0.0"
29
26
  },
30
27
  "peerDependencies": {
28
+ "@financial-times/dotcom-ui-base-styles": "^12.0.1",
29
+ "@financial-times/dotcom-ui-footer": "^12.0.1",
30
+ "@financial-times/dotcom-ui-header": "^12.0.1",
31
31
  "n-ui-foundations": "^9.0.0 || ^10.0.0",
32
32
  "react": "17.x || 18.x",
33
33
  "react-dom": "17.x || 18.x"
@@ -50,5 +50,11 @@
50
50
  "homepage": "https://github.com/Financial-Times/dotcom-page-kit/tree/HEAD/packages/dotcom-ui-layout",
51
51
  "volta": {
52
52
  "extends": "../../package.json"
53
+ },
54
+ "devDependencies": {
55
+ "@financial-times/dotcom-ui-base-styles": "file:../dotcom-ui-base-styles",
56
+ "@financial-times/dotcom-ui-footer": "file:../dotcom-ui-footer",
57
+ "@financial-times/dotcom-ui-header": "file:../dotcom-ui-header",
58
+ "check-engine": "^1.10.1"
53
59
  }
54
60
  }
package/src/__stories__/demos.scss DELETED
@@ -1,38 +0,0 @@
1
- .demo {
2
- text-align: center;
3
- }
4
-
5
- .demo__message {
6
- display: inline-block;
7
- margin: 50px 0;
8
- padding: 1em;
9
- border: 1px solid currentColor;
10
- border-radius: 0.5em;
11
-
12
- text-align: center;
13
- font-size: 24px;
14
-
15
- &:before,
16
- &:after {
17
- padding: 0 1em;
18
- font-size: 75%;
19
- }
20
- }
21
-
22
- .demo__message--scroll {
23
- margin-bottom: 2000px;
24
- border: none;
25
-
26
- &:before,
27
- &:after {
28
- content: '▼';
29
- }
30
- }
31
-
32
- .extra {
33
- margin: 0;
34
- padding: 0.5em;
35
- text-align: center;
36
- background: cornflowerblue;
37
- color: white;
38
- }
package/src/__stories__/story.tsx DELETED
@@ -1,110 +0,0 @@
1
- import React from 'react'
2
- import { OnReady } from '../../../../.storybook/components/OnReady'
3
-
4
- import './demos.scss'
5
- import '../../styles.scss'
6
-
7
- import * as layout from '../../browser'
8
-
9
- import { navigationProps } from '../../../../__fixtures__/navigation'
10
-
11
- import { Layout } from '..'
12
-
13
- const Extra = ({ children }) => <p className="extra">{children}</p>
14
-
15
- const initUiComponents = () => {
16
- layout.init()
17
- }
18
-
19
- export default {
20
- title: 'FT / Layout'
21
- }
22
-
23
- export const DefaultComponents = (args) => {
24
- return (
25
- <OnReady callback={initUiComponents}>
26
- <Layout navigationData={navigationProps} {...args}>
27
- <main className="demo">
28
- <p className="demo__message">Defaults: only passing data</p>
29
- </main>
30
- </Layout>
31
- </OnReady>
32
- )
33
- }
34
-
35
- DefaultComponents.story = {
36
- name: 'Default components'
37
- }
38
- DefaultComponents.args = {
39
- headerVariant: 'simple',
40
- footerVariant: 'simple'
41
- }
42
- DefaultComponents.argTypes = {
43
- headerVariant: {
44
- control: {
45
- type: 'select',
46
- options: {
47
- Simple: 'simple',
48
- 'Large Logo': 'large-logo',
49
- 'Logo Only': 'logo-only',
50
- None: ''
51
- }
52
- }
53
- },
54
- footerVariant: {
55
- control: {
56
- type: 'select',
57
- options: {
58
- Simple: 'simple',
59
- Legal: 'legal',
60
- None: ''
61
- }
62
- }
63
- }
64
- }
65
-
66
- export const CustomSlots = () => {
67
- return (
68
- <OnReady callback={initUiComponents}>
69
- <Layout
70
- navigationData={navigationProps}
71
- headerBefore={<Extra>Header before</Extra>}
72
- headerAfter={<Extra>Header after</Extra>}
73
- footerBefore={<Extra>Footer before</Extra>}
74
- footerAfter={<Extra>Footer after</Extra>}>
75
- <main className="demo">
76
- <p className="demo__message">Custom content slots</p>
77
- </main>
78
- </Layout>
79
- </OnReady>
80
- )
81
- }
82
-
83
- CustomSlots.story = {
84
- name: 'Custom slots'
85
- }
86
- CustomSlots.parameters = {
87
- controls: { hideNoControlsWarning: true }
88
- }
89
-
90
- export const CustomComponents = () => {
91
- return (
92
- <OnReady callback={initUiComponents}>
93
- <Layout
94
- navigationData={navigationProps}
95
- headerComponent={<Extra>Custom header</Extra>}
96
- footerComponent={<Extra>Custom footer</Extra>}>
97
- <main className="demo">
98
- <p className="demo__message">Custom components</p>
99
- </main>
100
- </Layout>
101
- </OnReady>
102
- )
103
- }
104
-
105
- CustomComponents.story = {
106
- name: 'Custom components'
107
- }
108
- CustomComponents.parameters = {
109
- controls: { hideNoControlsWarning: true }
110
- }