diff --git a/website/src/components/StyleGuide.js b/website/src/components/StyleGuide.js index 46d787a96..b911b9af5 100644 --- a/website/src/components/StyleGuide.js +++ b/website/src/components/StyleGuide.js @@ -20,737 +20,757 @@ import { Table, } from 'antd'; import {CodeOutlined} from '@ant-design/icons'; -import { - Layout, - NUX, - Panel, - theme, - Tracked, - TrackingScope, - Tabs, - Tab, -} from 'flipper-plugin'; import {css} from '@emotion/css'; import reactElementToJSXString from 'react-element-to-jsx-string'; import {IFrame} from './IFrame'; import useBaseUrl from '@docusaurus/useBaseUrl'; +import useIsBrowser from '@docusaurus/useIsBrowser'; const {Title, Text, Link} = Typography; -const demoStyle = { - square: { - background: theme.successColor, - width: 50, - height: 50, - lineHeight: '50px', - textAlign: 'center', - }, - border: {border: `1px dotted ${theme.primaryColor}`}, -}; +export default function StyleGuide() { + // We need a browser environment to access the window object and import flipper-plugin. + const isBrowser = useIsBrowser(); + if (!isBrowser) { + return <>The Style Guide is only available in a browser environment.; + } -const largeChild = ( -
- -
-); -const aButton = ; -const aBox =
A fixed child
; -const aFixedWidthBox = ( -
- Fixed width box -
-); -const aFixedHeightBox = ( -
- Fixed height box -
-); -const aDynamicBox = ( -
- A dynamic child (flex: 1) -
-); -const someText = Some text; + const { + Layout, + NUX, + Panel, + theme, + Tracked, + TrackingScope, + Tabs, + Tab, + } = require('flipper-plugin'); -const demos = [ - { - title: 'Layout.Container', - description: `Layout.Container can be used to organize the UI in regions. It takes care of paddings and borders. Children will be arranged vertically. Use Layout.Horizontal instead for arranging children horizontally. If you need a margin on this component, try to wrap it in other Layout component instead.`, - props: [ - ['rounded', 'boolean (false)', 'Make the corners rounded'], - [ - 'padv / padh / pad', - Object.keys(theme.space).join(' | ') + ' | number | true', - 'Short-hand to set the horizontal, vertical or both paddings. The keys correspond to the theme space settings. Using `true` picks the default horizontal / vertical padding for inline elements.', - ], - [ - 'width / height', - 'number', - 'Set the width / height of this container in pixels. Use sparingly.', - ], - [ - 'bordered', - 'boolean (false)', - 'This container will use a default border on all sides', - ], - [ - 'borderTop / borderRight / borderBottom / borderLeft', - 'boolean (false)', - 'Use a standard padding on the top side', - ], - [ - 'gap', - 'true / number (0)', - 'Set the spacing between children. If just set, theme.space.small will be used.', - ], - [ - 'center', - 'boolean (false)', - 'If set, all children will use their own naturally width, and they will be centered horizontally in the Container. If not set, all children will be stretched to the width of the Container.', - ], - ], - demos: { - 'Basic container with fixed dimensions': ( - - ), - 'Basic container with fixed height': ( - - ), - 'bordered pad rounded': ( - -
child
- - ), - 'Multiple children, gap={24}': ( - - {aButton} - {someText} - {aBox} - {aDynamicBox} - - ), - 'Multiple children icmw. pad center gap': ( - - {aButton} - {someText} - {aBox} - {aDynamicBox} - - ), + const demoStyle = { + square: { + background: theme.successColor, + width: 50, + height: 50, + lineHeight: '50px', + textAlign: 'center', }, - }, - { - title: 'Layout.Horizontal', - description: - 'Use this component to arrange multiple items horizontally. All vanilla Container props can be used as well.', - props: [ - [ - 'center', - 'boolean (false)', - 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.', + border: {border: `1px dotted ${theme.primaryColor}`}, + }; + + const largeChild = ( +
+ +
+ ); + const aButton = ; + const aBox = ( +
A fixed child
+ ); + const aFixedWidthBox = ( +
+ Fixed width box +
+ ); + const aFixedHeightBox = ( +
+ Fixed height box +
+ ); + const aDynamicBox = ( +
+ A dynamic child (flex: 1) +
+ ); + const someText = Some text; + + const demos = [ + { + title: 'Layout.Container', + description: `Layout.Container can be used to organize the UI in regions. It takes care of paddings and borders. Children will be arranged vertically. Use Layout.Horizontal instead for arranging children horizontally. If you need a margin on this component, try to wrap it in other Layout component instead.`, + props: [ + ['rounded', 'boolean (false)', 'Make the corners rounded'], + [ + 'padv / padh / pad', + Object.keys(theme.space).join(' | ') + ' | number | true', + 'Short-hand to set the horizontal, vertical or both paddings. The keys correspond to the theme space settings. Using `true` picks the default horizontal / vertical padding for inline elements.', + ], + [ + 'width / height', + 'number', + 'Set the width / height of this container in pixels. Use sparingly.', + ], + [ + 'bordered', + 'boolean (false)', + 'This container will use a default border on all sides', + ], + [ + 'borderTop / borderRight / borderBottom / borderLeft', + 'boolean (false)', + 'Use a standard padding on the top side', + ], + [ + 'gap', + 'true / number (0)', + 'Set the spacing between children. If just set, theme.space.small will be used.', + ], + [ + 'center', + 'boolean (false)', + 'If set, all children will use their own naturally width, and they will be centered horizontally in the Container. If not set, all children will be stretched to the width of the Container.', + ], ], - ], - demos: { - 'Basic usage, gap="large"': ( - - {aButton} - {someText} - {aBox} - {aDynamicBox} - - ), - 'Using flags: pad center gap={8} (great for toolbars and such)': ( - - {aButton} - {someText} - {aBox} - {aDynamicBox} - - ), - }, - }, - { - title: 'Layout.ScrollContainer', - description: - 'Use this component to create an area that can be scrolled. The scrollable area will automatically consume all available space. ScrollContainer accepts all properties that Container accepts as well. Padding will be applied to the child rather than the parent.', - props: [ - [ - 'horizontal / vertical', - 'boolean', - 'specifies in which directions the container should scroll. If none is specified the container will scroll in both directions', - ], - [ - 'padv / padh / pad', - 'see Container', - 'Padding will be applied to the child', - ], - ], - demos: { - 'Basic usage': ( - - {largeChild} - - ), - 'ScrollContainer + Vertical for vertical scroll only': ( - - - - This text is truncated because it is too long and scroll is - vertical only... - - {largeChild} + demos: { + 'Basic container with fixed dimensions': ( + + ), + 'Basic container with fixed height': ( + + ), + 'bordered pad rounded': ( + +
child
 - - ), + ), + 'Multiple children, gap={24}': ( + + {aButton} + {someText} + {aBox} + {aDynamicBox} + + ), + 'Multiple children icmw. pad center gap': ( + + {aButton} + {someText} + {aBox} + {aDynamicBox} + + ), + }, }, - }, - { - title: 'Layout.Top|Left|Right|Bottom', - description: - "Divides all available space over two children. The (top|left|right|bottom)-most first child will keep it's own dimensions, and positioned (top|left|right|bottom) of the other child. All remaining space will be assigned to the remaining child. If you are using a Layout.Right at the top level of your plugin, consider using DetailSidebar component instead, which will move its children to the right sidebar of Flipper.", - props: [ - [ - 'scrollable', - 'boolean (false)', - 'If set, the area of the second child will automatically be made scrollable.', + { + title: 'Layout.Horizontal', + description: + 'Use this component to arrange multiple items horizontally. All vanilla Container props can be used as well.', + props: [ + [ + 'center', + 'boolean (false)', + 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.', + ], ], - [ - 'center', - 'boolean (false)', - 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.', + demos: { + 'Basic usage, gap="large"': ( + + {aButton} + {someText} + {aBox} + {aDynamicBox} + + ), + 'Using flags: pad center gap={8} (great for toolbars and such)': ( + + {aButton} + {someText} + {aBox} + {aDynamicBox} + + ), + }, + }, + { + title: 'Layout.ScrollContainer', + description: + 'Use this component to create an area that can be scrolled. The scrollable area will automatically consume all available space. ScrollContainer accepts all properties that Container accepts as well. Padding will be applied to the child rather than the parent.', + props: [ + [ + 'horizontal / vertical', + 'boolean', + 'specifies in which directions the container should scroll. If none is specified the container will scroll in both directions', + ], + [ + 'padv / padh / pad', + 'see Container', + 'Padding will be applied to the child', + ], ], - [ - 'gap', - 'true / number (0)', - 'Set the spacing between children. If just set, theme.space.small will be used.', + demos: { + 'Basic usage': ( + + {largeChild} + + ), + 'ScrollContainer + Vertical for vertical scroll only': ( + + + + This text is truncated because it is too long and scroll is + vertical only... + + {largeChild} + + + ), + }, + }, + { + title: 'Layout.Top|Left|Right|Bottom', + description: + "Divides all available space over two children. The (top|left|right|bottom)-most first child will keep it's own dimensions, and positioned (top|left|right|bottom) of the other child. All remaining space will be assigned to the remaining child. If you are using a Layout.Right at the top level of your plugin, consider using DetailSidebar component instead, which will move its children to the right sidebar of Flipper.", + props: [ + [ + 'scrollable', + 'boolean (false)', + 'If set, the area of the second child will automatically be made scrollable.', + ], + [ + 'center', + 'boolean (false)', + 'If set, all children will use their own height, and they will be centered vertically in the layout. If not set, all children will be stretched to the height of the layout.', + ], + [ + 'gap', + 'true / number (0)', + 'Set the spacing between children. If just set, theme.space.small will be used.', + ], + [ + 'resizable', + 'true / undefined', + 'If set, this split container will be resizable by the user. It is recommend to set width, maxWidth, minWidth respectively height, maxHeight, minHeight properties as well.', + ], + [ + 'width / height / minWidth / minHeight / maxWidth / maxHeight', + 'number / undefined', + 'These dimensions in pixels will be used for clamping if the layout is marked as resizable', + ], ], - [ - 'resizable', - 'true / undefined', - 'If set, this split container will be resizable by the user. It is recommend to set width, maxWidth, minWidth respectively height, maxHeight, minHeight properties as well.', - ], - [ - 'width / height / minWidth / minHeight / maxWidth / maxHeight', - 'number / undefined', - 'These dimensions in pixels will be used for clamping if the layout is marked as resizable', - ], - ], - demos: { - 'Layout.Top': ( - - {aFixedHeightBox} - {aDynamicBox} - - ), - 'Layout.Left': ( - - {aFixedWidthBox} - {aDynamicBox} - - ), - 'Layout.Right': ( - - {aDynamicBox} - {aFixedWidthBox} - - ), - 'Layout.Bottom': ( - - {aDynamicBox} - {aFixedHeightBox} - - ), - 'Layout.Top + Layout.ScrollContainer': ( - + demos: { + 'Layout.Top': ( {aFixedHeightBox} - {largeChild} + {aDynamicBox} - - ), - 'Layout.Left + Layout.ScrollContainer': ( - + ), + 'Layout.Left': ( {aFixedWidthBox} - {largeChild} + {aDynamicBox} - - ), - 'Layout.Right resizable + Layout.ScrollContainer': ( - - - {largeChild} + ), + 'Layout.Right': ( + {aDynamicBox} + {aFixedWidthBox} - - ), - 'Layout.Bottom resizable + Layout.ScrollContainer': ( - - - {largeChild} + ), + 'Layout.Bottom': ( + {aDynamicBox} + {aFixedHeightBox} - - ), + ), + 'Layout.Top + Layout.ScrollContainer': ( + + + {aFixedHeightBox} + {largeChild} + + + ), + 'Layout.Left + Layout.ScrollContainer': ( + + + {aFixedWidthBox} + {largeChild} + + + ), + 'Layout.Right resizable + Layout.ScrollContainer': ( + + + {largeChild} + {aDynamicBox} + + + ), + 'Layout.Bottom resizable + Layout.ScrollContainer': ( + + + {largeChild} + {aDynamicBox} + + + ), + }, }, - }, - { - title: 'Panel', - description: - 'A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.', - props: [ - ['title', 'string', 'Title of the pane'], - [ - 'collapsible', - 'boolean (true)', - "If set to false it won't be possible to collapse the panel", + { + title: 'Panel', + description: + 'A collapsible UI region. The collapsed state of the pane will automatically be persisted so that the collapsed state is restored the next time user visits the plugin again. Note that the children of a Panel should have some size, either a fixed or a natural size. Elements that grow to their parent size will become invisible.', + props: [ + ['title', 'string', 'Title of the pane'], + [ + 'collapsible', + 'boolean (true)', + "If set to false it won't be possible to collapse the panel", + ], + [ + 'collapsed', + 'boolean (false)', + 'The initial collapsed state of the panel.', + ], + [ + 'pad / gap', + 'boolean / number (false)', + 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.', + ], ], - [ - 'collapsed', - 'boolean (false)', - 'The initial collapsed state of the panel.', - ], - [ - 'pad / gap', - 'boolean / number (false)', - 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.', - ], - ], - demos: { - 'Two panels in a fixed height container': ( - - Some content - - {aFixedHeightBox} - - - {aFixedHeightBox} - {aFixedHeightBox} - - - ), - }, - }, - { - title: 'Tabs / Tab', - description: - "Tabs represents a tab control and all it's children should be Tab components. By default the Tab control uses all available space, but set grow=false to only use the minimally required space", - props: [ - [ - 'grow (Tabs)', - 'boolean (true)', - 'If true, the tab control will grow all tabs to the maximum available vertical space. If false, only the minimal required (natural) vertical space will be used', - ], - [ - 'pad / gap (Tab)', - 'boolean / number (false)', - 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.', - ], - [ - 'other props', - '', - 'This component wraps Tabs from ant design, see https://ant.design/components/tabs/ for more details', - ], - ], - demos: { - 'Two tabs': ( - - - {aDynamicBox} - + demos: { + 'Two panels in a fixed height container': ( + + Some content + + {aFixedHeightBox} + + {aFixedHeightBox} {aFixedHeightBox} - - - - ), - 'Two tabs (no grow)': ( - - - {aDynamicBox} - - {aFixedHeightBox} - {aFixedHeightBox} - - - - ), + + + ), + }, }, - }, - { - title: 'NUX', - description: - 'A component to provide a New-User-eXperience: Highlight new features to first time users. For tooltips that should stay available, use ToolTip from ANT design', - props: [ - ['title', 'string / React element', 'The tooltip contents'], - [ - 'placement', - <> - See{' '} - - docs - - , - '(optional) on which side to place the tooltip', + { + title: 'Tabs / Tab', + description: + "Tabs represents a tab control and all it's children should be Tab components. By default the Tab control uses all available space, but set grow=false to only use the minimally required space", + props: [ + [ + 'grow (Tabs)', + 'boolean (true)', + 'If true, the tab control will grow all tabs to the maximum available vertical space. If false, only the minimal required (natural) vertical space will be used', + ], + [ + 'pad / gap (Tab)', + 'boolean / number (false)', + 'See the pad property of Layout.Container, determines whether the pane contents will have some padding and space between the items. By default no padding / gap is applied.', + ], + [ + 'other props', + '', + 'This component wraps Tabs from ant design, see https://ant.design/components/tabs/ for more details', + ], ], - ], - demos: { - 'NUX example': ( - - - - ), + demos: { + 'Two tabs': ( + + + {aDynamicBox} + + {aFixedHeightBox} + {aFixedHeightBox} + + + + ), + 'Two tabs (no grow)': ( + + + {aDynamicBox} + + {aFixedHeightBox} + {aFixedHeightBox} + + + + ), + }, }, - }, - { - title: 'Tracked', - description: - 'A component that tracks component interactions. For Facebook internal builds, global stats for these interactions will be tracked. Wrap this component around another element to track its events', - props: [ - [ - 'events', - 'string | string[] (default: "onClick")', - 'The event(s) of the child component that should be tracked', + { + title: 'NUX', + description: + 'A component to provide a New-User-eXperience: Highlight new features to first time users. For tooltips that should stay available, use ToolTip from ANT design', + props: [ + ['title', 'string / React element', 'The tooltip contents'], + [ + 'placement', + <> + See{' '} + + docs + + , + '(optional) on which side to place the tooltip', + ], ], - [ - 'action', - 'string (optional)', - 'Describes the element the user interacted with. Will by default be derived from the title, key or contents of the element', - ], - ], - demos: { - 'Basic example': ( - - - - ), + demos: { + 'NUX example': ( + + + + ), + }, }, - }, - { - title: 'TrackingScope', - description: - 'Describes more precisely the place in the UI for all underlying Tracked elements. Multiple Tracking scopes are automatically nested. Use the `withTrackingScope` HoC to automatically wrap a component definition in a tracking scope', - props: [ - ['scope', 'string', 'The name of the scope. For example "Login Dialog"'], - ], - demos: { - 'Basic example': ( - + { + title: 'Tracked', + description: + 'A component that tracks component interactions. For Facebook internal builds, global stats for these interactions will be tracked. Wrap this component around another element to track its events', + props: [ + [ + 'events', + 'string | string[] (default: "onClick")', + 'The event(s) of the child component that should be tracked', + ], + [ + 'action', + 'string (optional)', + 'Describes the element the user interacted with. Will by default be derived from the title, key or contents of the element', + ], + ], + demos: { + 'Basic example': ( - - ), + ), + }, }, - }, -]; + { + title: 'TrackingScope', + description: + 'Describes more precisely the place in the UI for all underlying Tracked elements. Multiple Tracking scopes are automatically nested. Use the `withTrackingScope` HoC to automatically wrap a component definition in a tracking scope', + props: [ + [ + 'scope', + 'string', + 'The name of the scope. For example "Login Dialog"', + ], + ], + demos: { + 'Basic example': ( + + + + + + ), + }, + }, + ]; -function ComponentPreview({title, demos, description, props}) { - return ( - - - - {description} - - - - {Object.entries(demos).map(([name, children]) => ( - - -
- {children} -
- - } key="2"> -
- 
{reactElementToJSXString(children)}
-
- - - ))} - - - - - Object.assign(prop, {key: prop[0]}), - )} - columns={[ - { - title: 'Property', - dataIndex: 0, - width: 100, - }, - { - title: 'Type and default', - dataIndex: 1, - width: 200, - }, - { - title: 'Description', - dataIndex: 2, - }, - ]} - /> - - - - - + function ComponentPreview({title, demos, description, props}) { + return ( + + + + {description} + + + + {Object.entries(demos).map(([name, children]) => ( + + +
+ {children} +
+ + } key="2"> +
+ 
{reactElementToJSXString(children)}
+
+ + + ))} + + + +
+ Object.assign(prop, {key: prop[0]}), + )} + columns={[ + { + title: 'Property', + dataIndex: 0, + width: 100, + }, + { + title: 'Type and default', + dataIndex: 1, + width: 200, + }, + { + title: 'Description', + dataIndex: 2, + }, + ]} + /> + + + + + + ); + } + + const DesignComponentDemos = () => ( + + {demos.map(demo => ( + + ))} + ); -} -const DesignComponentDemos = () => ( - - {demos.map(demo => ( - - ))} - -); + function SandyDesignSystem() { + const root = useRef(null); -function SandyDesignSystem() { - const root = useRef(null); + // Whenever layout happens, or if the size of root changes, measure it and send a message to the parent frame. + useLayoutEffect(() => { + if (root.current) { + const sendUpdate = () => + window.postMessage( + { + name: 'setStyleGuideHeight', + value: `${root.current.scrollHeight}px`, + }, + '*', + ); + const observer = new ResizeObserver(() => { + sendUpdate(); + }); + observer.observe(root.current); - // Whenever layout happens, or if the size of root changes, measure it and send a message to the parent frame. - useLayoutEffect(() => { - if (root.current) { - const sendUpdate = () => window.postMessage({name: 'setStyleGuideHeight', value: `${root.current.scrollHeight}px`}, '*'); - const observer = new ResizeObserver(() => { sendUpdate(); - }); - observer.observe(root.current); - sendUpdate(); + return () => observer.disconnect(); + } + }, [root.current]); - return () => observer.disconnect(); - } - }, [root.current]); - - return ( - - -

- Welcome to the Flipper Design System. The Flipper design system is - based on{' '} - Ant Design - . Any component found in the ANT documentation can be used. This page - demonstrates the usage of: -

-
    -
  • Colors
    • -
  • Typography
    • -
  • Theme Variables
    • -
  • Layout components
    • -
-

- The following components from Ant should not be used: -

-
    -
  • - Layout: use Flipper's Layout.* instead. -
    • -
-

Sandy guidelines

-
    -
  • - Avoid using `margin` properties, use padding on the container - indeed, or gap in combination with{' '} - Layout.Horizontal|Vertical -
    • -
  • - Avoid using width / height: 100%, use{' '} - Layout.Container instead. -
    • -
  • - In general, components that have a grow property will - grow to use the full height of their parents if{' '} - true. In contrast, if grow is set to false{' '} - components will use their natural size, based on their{' '} - children. -
    • -
  • - The other important property here is scrollable. If an - element supports this property, setting it will imply{' '} - grow, and the element will show a scrollbar if needed. - Setting scrollabe to false causes the - element to always use its natural size, growing or shrinking based - on the contents rather than the parent. -
    • -
- - - - - - - - - - - - - - - - - - - - + return ( + + +

+ Welcome to the Flipper Design System. The Flipper design system is + based on{' '} + + Ant Design + + . Any component found in the ANT documentation can be used. This + page demonstrates the usage of: +

+
    +
  • Colors
    • +
  • Typography
    • +
  • Theme Variables
    • +
  • Layout components
    • +
+

+ The following components from Ant should not be used: +

+
    +
  • + Layout: use Flipper's Layout.* instead. +
    • +
+

Sandy guidelines

+
    +
  • + Avoid using `margin` properties, use padding on the container + indeed, or gap in combination with{' '} + Layout.Horizontal|Vertical +
    • +
  • + Avoid using width / height: 100%, use{' '} + Layout.Container instead. +
    • +
  • + In general, components that have a grow property will + grow to use the full height of their parents if{' '} + true. In contrast, if grow is set to{' '} + false components will use their natural size, based + on their children. +
    • +
  • + The other important property here is scrollable. If an + element supports this property, setting it will imply{' '} + grow, and the element will show a scrollbar if + needed. Setting scrollabe to false{' '} + causes the element to always use its natural size, growing or + shrinking based on the contents rather than the parent. +
    • +
+ + + + + + + + + + + + + + + + + + + + + + Common Ant components, with modifiers applied. The{' '} + Title, Text and Link{' '} + components can be found by importing the{' '} + Typography namespace from Ant. + + } + type="info" + /> + Title + Title level=2 + Title level=3 + Title level=4 + Text + Text - type=secondary + Text - type=success + Text - type=warning + Text - danger + Text - disbled + Text - strong + Text - code + Link + + Link - type=secondary + + + + + + + - Common Ant components, with modifiers applied. The{' '} - Title, Text and Link{' '} - components can be found by importing the Typography{' '} - namespace from Ant. + The following theme veriables are exposed from the Flipper{' '} + theme object. See the colors section above for a + preview of the colors. } - type="info" /> - Title - Title level=2 - Title level=3 - Title level=4 - Text - Text - type=secondary - Text - type=success - Text - type=warning - Text - danger - Text - disbled - Text - strong - Text - code - Link - - Link - type=secondary - - - - - - - - - The following theme veriables are exposed from the Flipper{' '} - theme object. See the colors section above for a - preview of the colors. - - } - /> - 
{JSON.stringify(theme, null, 2)}
- - - - - - ); -} + 
{JSON.stringify(theme, null, 2)}
+ + + + + + ); + } + + function ColorPreview({name}) { + return ( + + + } + title={`theme.${name}`} + /> + + ); + } + + const reset = css` + ol, + ul { + list-style: revert; + margin-left: ${theme.space.huge}px; + } + .ant-alert { + margin-bottom: ${theme.space.huge}px; + } + .ant-card { + background: transparent; + } + `; + + const iframe = css` + width: 100%; + `; + + const innerCss = ` + body { + overflow: hidden; + } +`; -export default function DesignSystemFramed() { // We're displaying the style guide in an iframe to isolate it's styles. // But we don't know how big it is, so don't know how high to make the iframe to avoid a double scroll bar. // So lets get the js inside the frame measure itself and post a message to this frame, where we'll then // adjust the size of the iframe to match. useEffect(() => { - window.addEventListener("message", (event) => { + window.addEventListener('message', event => { if (event.data.name === 'setStyleGuideHeight') { document.getElementById('styleguide').style.height = event.data.value; } - }) - }, []) + }); + }, []); return ( ); } - -function ColorPreview({name}) { - return ( - - - } - title={`theme.${name}`} - /> - - ); -} - -const reset = css` - ol, - ul { - list-style: revert; - margin-left: ${theme.space.huge}px; - } - .ant-alert { - margin-bottom: ${theme.space.huge}px; - } - .ant-card { - background: transparent; - } -`; - -const iframe = css` - width: 100%; -`; - -const innerCss = ` - body { - overflow: hidden; - } -`;