Adds conditional formatting component #1843
Conversation
✅ Deploy Preview succeeded!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for calico-docs-preview-next ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
ctauchen
force-pushed
the
docs-2434-conditional
branch
from
578b7b8 to
0418319
Compare
|
@ronanc-tigera Here's the component in action. Anything I should be doing differently here before I proceed? |
|
FYI @doucol A first docs-related thing we can do with the D3 upgrade. |
| - The range from which host IPs are allocated | ||
| </If> | ||
|
|
||
| <If condition = {props.platform === 'openstack'}> |
There was a problem hiding this comment.
props need to be formatted
There was a problem hiding this comment.
I'm not sure what formatting. What needs to be changed here?
| @@ -0,0 +1,152 @@ | |||
| import If from "/src/___new___/components/If"; | |||
There was a problem hiding this comment.
should fix the import @site/src/___new___/components/If
| import ReqsSys from '@site/calico_versioned_docs/version-3.29/_includes/components/ReqsSys'; | ||
| import ReqsKernel from '@site/calico_versioned_docs/version-3.29/_includes/components/ReqsKernel'; | ||
| import SystemRequirements from '../_system-requirements.mdx'; | ||
| export const platform='host'; |
There was a problem hiding this comment.
if 'host' is only used once, just put it directly in the props, no need for the variable
There was a problem hiding this comment.
I appreciate the concision. But for now I like the idea that I can define this (and other) attributes at the top of the doc, and leave everything that follows the same. I may go back on this later, but I've got a few ideas for things I plan to do where this will be a helpful paradigm.
| --- | ||
|
|
||
| # System requirements | ||
| import SystemRequirements from '../_system-requirements.mdx'; | ||
| export const platform='kubernetes'; |
| import ReqsSys from '@site/calico_versioned_docs/version-3.29/_includes/components/ReqsSys'; | ||
| import ReqsKernel from '@site/calico_versioned_docs/version-3.29/_includes/components/ReqsKernel'; | ||
| import SystemRequirements from '../_system-requirements.mdx'; | ||
| export const platform='openstack'; |
src/___new___/components/If/index.js
Outdated
| @@ -0,0 +1,7 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
can you typescriptify this?
import React from 'react';
type IfProps = {
condition: boolean;
};
const If: React.FC<React.PropsWithChildren<IfProps>> = ({
condition,
children,
}) => {
return condition ? <>{children}</> : null;
};
export default If;
There was a problem hiding this comment.
I think this should live in _includes/partials/_system-requirements.mdx
There was a problem hiding this comment.
I'll go with that for now, thanks. Moved.
ctauchen
changed the title
_system-requirements.mdxfile for different system requirements pages.This functionality was previously done with full JSX code. The idea here is to allow us to do conditional formatting without having to hand-code everything in JSX.
Product Version(s):
Issue:
Link to docs preview:
https://deploy-preview-1843--tigera.netlify.app/calico/latest/getting-started/kubernetes/requirements
https://deploy-preview-1843--tigera.netlify.app/calico/latest/getting-started/openstack/requirements
SME review:
DOCS review:
Additional information:
Merge checklist: