Add info guide title and paragraph styles

gravitational · Mar 4, 2025 · 4a35027 · 4a35027
1 parent f5585f6
commit 4a35027
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 31 deletions.
diff --git a/...ckages/teleport/src/components/SlidingSidePanel/InfoGuideSidePanel/InfoGuideSidePanel.tsx b/...ckages/teleport/src/components/SlidingSidePanel/InfoGuideSidePanel/InfoGuideSidePanel.tsx
@@ -16,10 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { PropsWithChildren } from 'react';
+import React, { Children, PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
-import { Box, ButtonIcon, Flex, Text } from 'design';
+import { Box, ButtonIcon, Flex, H3, Text } from 'design';
 import { Cross, Info } from 'design/Icon';
+import { P } from 'design/Text/Text';
 
 import { useInfoGuide } from 'teleport/Main/InfoGuideContext';
 import { zIndexMap } from 'teleport/Navigation/zIndexMap';
@@ -99,3 +101,35 @@ export const InfoGuideWrapper: React.FC<
     </Flex>
   );
 };
+
+export const InfoTitle = styled(H3)`
+  margin-bottom: ${p => p.theme.space[2]}px;
+  margin-top: ${p => p.theme.space[3]}px;
+`;
+
+export const InfoParagraph = styled(P)`
+  margin-bottom: ${p => p.theme.space[3]}px;
+`;
+
+export const InfoUl = styled.ul`
+  margin: 0;
+  padding-left: ${p => p.theme.space[4]}px;
+`;
+
+const InfoLinkLi = styled.li`
+  color: ${({ theme }) => theme.colors.interactive.solid.accent.default};
+`;
+
+/**
+ * Childrens are expected to be wrapped with design/Link.tsx component
+ */
+export const ReferenceLinks: React.FC<PropsWithChildren> = ({ children }) => (
+  <>
+    <InfoTitle>Reference Links</InfoTitle>
+    <InfoUl>
+      {Children.map(children, child => (
+        <InfoLinkLi>{child}</InfoLinkLi>
+      ))}
+    </InfoUl>
+  </>
+);
diff --git a/web/packages/teleport/src/components/SlidingSidePanel/InfoGuideSidePanel/index.ts b/web/packages/teleport/src/components/SlidingSidePanel/InfoGuideSidePanel/index.ts
@@ -16,4 +16,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-export { InfoGuideSidePanel } from './InfoGuideSidePanel';
+export * from './InfoGuideSidePanel';
diff --git a/web/packages/teleport/src/components/SlidingSidePanel/SlidingSidePanel.story.tsx b/web/packages/teleport/src/components/SlidingSidePanel/SlidingSidePanel.story.tsx
@@ -73,7 +73,9 @@ export function Controls(props: StoryProps) {
         slideFrom={props.slideFrom}
         panelOffset={props.panelOffset}
       >
-        <LongContent />
+        <Box css={{ height: '100%', overflow: 'auto' }}>
+          <LongContent withPadding />
+        </Box>
       </SlidingSidePanel>
     </TopBar>
   );

diff --git a/web/packages/teleport/src/components/SlidingSidePanel/storyHelpers.tsx b/web/packages/teleport/src/components/SlidingSidePanel/storyHelpers.tsx
@@ -19,7 +19,7 @@
 import { PropsWithChildren } from 'react';
 import { MemoryRouter } from 'react-router';
 
-import { Box } from 'design';
+import { Box, Link } from 'design';
 import { Info } from 'design/Alert';
 
 import { getOSSFeatures } from 'teleport/features';
@@ -32,6 +32,8 @@ import { makeDefaultUserPreferences } from 'teleport/services/userPreferences/us
 import { TopBar as Component } from 'teleport/TopBar';
 import { UserContext } from 'teleport/User/UserContext';
 
+import { InfoParagraph, InfoTitle, ReferenceLinks } from './InfoGuideSidePanel';
+
 export const TopBar: React.FC<PropsWithChildren> = ({ children }) => {
   const ctx = createTeleportContext();
   const updatePreferences = () => Promise.resolve();
@@ -75,44 +77,47 @@ export const TopBar: React.FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-export const LongContent = () => (
-  <Box p={3}>
-    <Box>
-      1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
-      corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
-      architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
-    <Box mt={3}>
+export const LongContent = ({ withPadding = false }) => (
+  <Box px={withPadding ? 3 : 0}>
+    <InfoTitle>Each title is wrapped with InfoTitle component</InfoTitle>
+    <InfoParagraph>
+      Each paragraphs are wrapped with InfoParagraph component.
+    </InfoParagraph>
+    <InfoTitle>InfoTitle Two</InfoTitle>
+    <InfoParagraph>
       2 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
       corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
       architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
-    <Box mt={3}>
+      eius qui tenetur.
+    </InfoParagraph>
+    <InfoTitle>InfoTitle Three</InfoTitle>
+    <InfoParagraph>
       3 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
       corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
       architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
-    <Box mt={3}>
+      eius qui tenetur.
+    </InfoParagraph>
+    <InfoTitle>InfoTitle Four</InfoTitle>
+    <InfoParagraph>
       4 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
       corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
       architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
-    <Box mt={3}>
+      eius qui tenetur.
+    </InfoParagraph>
+    <InfoTitle>InfoTitle Five</InfoTitle>
+    <InfoParagraph>
       5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
       corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
       architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
-    <Box mt={3}>
-      6 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi
-      corrupti voluptates aliquam eligendi placeat harum rerum ipsam. Corrupti
-      architecto laudantium, libero perspiciatis officia doloremque est aliquam,
-      eius qui tenetur a.
-    </Box>
+      eius qui tenetur.
+    </InfoParagraph>
+    <ReferenceLinks>
+      <Link>Some Link 1</Link>
+      <Link>Some Link 2</Link>
+      <Link>Some Link 3</Link>
+      <Link>Some Link 4</Link>
+      <Link>Some Link 5</Link>
+    </ReferenceLinks>
   </Box>
 );