diff --git a/website/screens/components/status-light/code/StatusLightCodePage.tsx b/website/screens/components/status-light/code/StatusLightCodePage.tsx index 4a70bfb26..c0d91772a 100644 --- a/website/screens/components/status-light/code/StatusLightCodePage.tsx +++ b/website/screens/components/status-light/code/StatusLightCodePage.tsx @@ -3,6 +3,8 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; import DocFooter from "@/common/DocFooter"; import TableCode from "@/common/TableCode"; +import Example from "@/common/example/Example"; +import basicUsage from "./examples/basicUsage"; const sections = [ { @@ -38,9 +40,7 @@ const sections = [ string - - An auxiliar text that will add some context to the status. - + An auxiliar text that will add some context to the status. - @@ -52,7 +52,9 @@ const sections = [ Size of the component. Should be defined based on its importance and/or available space. - 'medium' + + 'medium' + @@ -62,8 +64,8 @@ const sections = [ title: "Examples", subSections: [ { - title: "Basic Usage", - content:

Examples are not available yet, they will be added soon.

+ title: "Basic usage", + content: , }, ], }, diff --git a/website/screens/components/status-light/code/examples/basicUsage.ts b/website/screens/components/status-light/code/examples/basicUsage.ts new file mode 100644 index 000000000..df4c36897 --- /dev/null +++ b/website/screens/components/status-light/code/examples/basicUsage.ts @@ -0,0 +1,19 @@ +import { + DxcStatusLight, + DxcInset, +} from "@dxc-technology/halstack-react"; + +const code = `() => { + return ( + + + + ); + }`; + +const scope = { + DxcInset, + DxcStatusLight, +}; + +export default { code, scope };