From d30cff59fc615241c8108bbea62456de7fbba808 Mon Sep 17 00:00:00 2001 From: Prabhu Murthy Date: Thu, 27 Apr 2023 18:06:21 +0530 Subject: [PATCH] fix code examples for accordion and accordion group --- .../syntax-highlighter.scss | 6 - .../accordion-group/code-strings.tsx | 110 ++++++++++++++++++ .../components/accordion-group/widgets.tsx | 47 ++++++-- .../components/accordion/code-strings.tsx | 76 ++++++++++++ .../components/accordion/widgets.tsx | 40 ++++++- .../components/auto-suggest/index.tsx | 17 ++- .../lib/components/button/button.module.scss | 4 +- 7 files changed, 278 insertions(+), 22 deletions(-) create mode 100644 packages/documentation/components/accordion-group/code-strings.tsx create mode 100644 packages/documentation/components/accordion/code-strings.tsx diff --git a/packages/documentation/common/syntax-highlighter/syntax-highlighter.scss b/packages/documentation/common/syntax-highlighter/syntax-highlighter.scss index 95f8c3bcf..6afd09eaa 100644 --- a/packages/documentation/common/syntax-highlighter/syntax-highlighter.scss +++ b/packages/documentation/common/syntax-highlighter/syntax-highlighter.scss @@ -28,12 +28,6 @@ } } -@media (min-width: 1600px) { - .rc-demo-code-block { - // width: 850px; - } -} - .rc-demo-code-copy-btn { align-items: center; background-color: var(--rc-tertiary-color-hex); diff --git a/packages/documentation/components/accordion-group/code-strings.tsx b/packages/documentation/components/accordion-group/code-strings.tsx new file mode 100644 index 000000000..170d0dac2 --- /dev/null +++ b/packages/documentation/components/accordion-group/code-strings.tsx @@ -0,0 +1,110 @@ +const text = ` +

+ Aenean aliquam dignissim pretium. Ut nulla nunc, euismod sit amet justo + vel, convallis volutpat neque. Morbi semper odio sed diam tristique, nec + tempor neque tempus. Praesent quis ultrices odio. Nulla vestibulum nulla + sed massa molestie, quis vulputate risus semper. Phasellus elementum, + metus in iaculis sollicitudin, risus elit pulvinar neque, eget pulvinar + odio libero eu mi. Vivamus id leo facilisis, tincidunt lacus semper, + condimentum est. Nam euismod non eros a lacinia. +

+`; + +export const AutoClosing = `const App = () => { + return ( + + ${text.repeat(3)} + + ); +`; + +export const CustomIconCode = `const App = () => { + return ( + + ${text.repeat(4)} + + ); +`; + +export const RTLCode = `const App = () => { + return ( + + ${text.repeat(4)} + + ) +}`; + +export const MediumSizedCode = `const App = () => { + return ( + + ${text.repeat(4)} + + ) +}`; + +export const LargeSizedCode = `const App = () => { + return ( + + ${text.repeat(4)} + + ) +}`; + +export const DefaultCode = `const App = () => { + return ( + + ${text} +
+ +
+ + ); +}`; + +export const InitialStateCode = `const App = () => { + return ( + + ${text} +
+ +
+ + ); +}`; diff --git a/packages/documentation/components/accordion-group/widgets.tsx b/packages/documentation/components/accordion-group/widgets.tsx index 660819b0b..ec38f3085 100644 --- a/packages/documentation/components/accordion-group/widgets.tsx +++ b/packages/documentation/components/accordion-group/widgets.tsx @@ -2,6 +2,15 @@ import { useLayoutEffect, useState } from 'react'; import { Section, Text } from '../../../lib/components'; import { DemoWidget } from '../../common/demo-widget'; import useMedia from '../../common/useMedia'; +import { + AutoClosing, + CustomIconCode, + DefaultCode, + InitialStateCode, + LargeSizedCode, + MediumSizedCode, + RTLCode, +} from './code-strings'; import { AutoClosingSections, CustomIcon, @@ -37,7 +46,11 @@ function Widgets() { return width > 0 ? (
- + {Default}
@@ -47,7 +60,11 @@ function Widgets() { you want to keep the accordions closed or open on load. The example shows the accordions open on load - + {InitialState} @@ -56,7 +73,11 @@ function Widgets() { The AccordionGroup can be configured to close all other sections when one is open. - + {AutoClosingSections} @@ -65,20 +86,32 @@ function Widgets() { The AccordionGroup can be configured to use custom icons and the alignment of the icon can be changed. - + {CustomIcon}
- + {RTL}
- + {MediumSized} - + {LargeSized}
diff --git a/packages/documentation/components/accordion/code-strings.tsx b/packages/documentation/components/accordion/code-strings.tsx new file mode 100644 index 000000000..46acdaa80 --- /dev/null +++ b/packages/documentation/components/accordion/code-strings.tsx @@ -0,0 +1,76 @@ +const TextContent = ` +
+

+ Sed laoreet neque eget sem varius, et interdum dui venenatis. + Suspendisse in faucibus tortor, nec aliquet arcu. Quisque at Proin + auctor velit massa, euismod pretium dui euismod in. Pellentesque rhoncus + eros id posuere tincidunt. Maecenas quis libero vitae elit consectetur + finibus et ac libero. Donec at fermentum lectus. Cras iaculis augue non + mauris interdum, vitae pretium mi blandit. Aenean ultrices pellentesque + lectus ac faucibus. Morbi tristique vulputate nisi, id porttitor diam + egestas a. Suspendisse a tortor suscipit, accumsan massa at, viverra + urna. Maecenas vel lectus sodales, dapibus dolor eget, pharetra neque. + Nam eleifend id mauris in suscipit. Ut sed risus at mi vulputate + rhoncus. +

+

+ It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using Content here, content here, making it look + like readable English. Many desktop publishing packages and web page + editors now use Lorem Ipsum as their default model text, and a search + for lorem ipsum will uncover many web sites still in their infancy. + Various versions have evolved over the years, sometimes by accident, + sometimes on purpose (injected humour and the like). +

+
+`; + +export const DefaultCodeString = `const App = () => { + return ( + + ${TextContent} + + ); +}`; + +export const RTLCodeString = `const App = () => { + return ( + + ${TextContent} + + ); +}`; + +export const ExpandedCodeString = `const App = () => { + return ( + + ${TextContent} + + ); +}`; + +export const MediumSizedCodeString = `const App = () => { + return ( + + ${TextContent} + + ); +}`; + +export const LargeSizedCodeString = `const App = () => { + return ( + + ${TextContent} + + ); +}`; + +export const CustomIconCodeString = `const App = () => { + return ( + 🔥}> + ${TextContent} + + ); +}`; diff --git a/packages/documentation/components/accordion/widgets.tsx b/packages/documentation/components/accordion/widgets.tsx index 25df3418f..030e6b0cd 100644 --- a/packages/documentation/components/accordion/widgets.tsx +++ b/packages/documentation/components/accordion/widgets.tsx @@ -2,6 +2,14 @@ import { useEffect, useState } from 'react'; import { Section, Text } from '../../../lib/components'; import { DemoWidget } from '../../common/demo-widget'; import useMedia from '../../common/useMedia'; +import { + CustomIconCodeString, + DefaultCodeString, + ExpandedCodeString, + LargeSizedCodeString, + MediumSizedCodeString, + RTLCodeString, +} from './code-strings'; import { CustomIcon, Default, @@ -36,13 +44,17 @@ function Widgets() { return width > 0 ? (
- + {Default}
{/* The icon can be aligned to the right */} - + {RTL}
@@ -51,20 +63,36 @@ function Widgets() { Accordions can be expanded or collapsed by default. The example shows a accordion expanded by default. - + {Expanded}
- + {CustomIcon}
- + {MediumSized} - + {LargeSized}
diff --git a/packages/documentation/components/auto-suggest/index.tsx b/packages/documentation/components/auto-suggest/index.tsx index 63b3cd92c..81abe925b 100644 --- a/packages/documentation/components/auto-suggest/index.tsx +++ b/packages/documentation/components/auto-suggest/index.tsx @@ -4,11 +4,26 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import DemoPageRenderer from '../../common/demo-page-renderer'; import Widgets from './widgets'; +const Description = ( +
+

+ An Autosuggest UI Component is a type of user interface element that + provides users with a list of suggested words or phrases as they type. It + is designed to provide users with a more efficient and convenient way to + search for information by quickly narrowing down the results list. +

+

+ Autosuggest UI components can be used in a variety of applications, such + as web search engines, online dictionaries, and documentation sites. +

+
+); + function index() { return ( } sourceId="auto-suggest/auto-suggest.tsx" diff --git a/packages/lib/components/button/button.module.scss b/packages/lib/components/button/button.module.scss index db452ed61..490dbdcad 100644 --- a/packages/lib/components/button/button.module.scss +++ b/packages/lib/components/button/button.module.scss @@ -26,11 +26,11 @@ $sizes: (sm, md, lg); } &:not(:active) { - transition: transform 80ms ease-in; + transition: transform 100ms ease-in; } &:active:not(.disabled) { - transform: scale(0.95); + transform: scale(0.97); } }