Skip to content

Latest commit

 

History

History
522 lines (378 loc) · 13.5 KB

docs-editor.mdx

File metadata and controls

522 lines (378 loc) · 13.5 KB
meta content
title description noindex
Editor Components listing - Docs
Display all components used by main Editors in Docs
true
h1 paragraph
Editor Components listing - Docs
Display all components used by main Editors in Docs

Buttons

Navigation

🧩  This component uses a Tag style.

Code example:

<Navigation>
  <PreviousButton to="/">Previous</PreviousButton>
  <NextButton to="/">Next</NextButton>
</Navigation>

Render:

Previous Next

Navigation with title

Previous Next

Navigation with one button

Previous Lorem ipsum dolor sit amet

Steps & StepButton

🧩  This component uses a Tag style.

Code example:

<Steps>
  <StepButton to="/">How-to create an Instance</StepButton>
  <StepButton to="/">How-to create an account</StepButton>
</Steps>

Render:

How-to create an account

Two steps

How-to create an Instance How-to create an account

ClickableBanner

🧩  This component uses a Tag style.

Code example:

With a product logo

<ClickableBanner
  productLogo="cli"
  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/#"
  label="Link"
/>

Render:

Without a product logo

Code example:

<ClickableBanner

  title="CLI"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  url="/#"
  label="Link"
/>

Render:

DefaultCard

🧩  This component uses a Tag style.

Props:

  • title (mandatory!)
  • tags (use OBJECT array)
  • description
  • url (for link)
  • label (for link)

Code example:

<DefaultCard 
  title="Lorem Ipsum"
  tags={['one', 'two', 'three']}
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#"
  label="Link label" />

Render:

<DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']} description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />

Minimal

Linked

Linked, no description & default label

Linked & tags, without description

<DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']} url="/#" label="Link label" />

GeneralLinks

⚙️  This component is a "system codebase" component.

Grid

🧩  This component uses a Tag style.

Code example:

<Grid>
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
  <DefaultCard title="Lorem Ipsum" tags={['one', 'two', 'three']}  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad." url="/#" label="Link label" />
</Grid>

Render:

Example using DefaultCard in Grid wrapper.

HelpBanner

🧩  This component uses a Tag style.

Code example:

<HelpBanner 
  url="/#"
  title = 'Still need help?'
/>

Render

Log (Changelog)

🧩  This functionnality uses MDX files.

⚙️  This is a "system codebase" feature.

See Changelog page.

Each "Log" is MDX file:

  • Go to changelog/ folder
  • Add or choose a directory relative to the log you want to add
  • Create a .mdx file in it

NOTES:

  • Organize changelog/ folder structure as you want
  • The .mdx filename does not matter
  • Assets should be in a asset directory, sibling of your .mdx file

Log file frontmatter

At top of .mdx file, you MUST add data in frontmatter:

---
title: Migration to the new Object Storage backend (HIVE) for all regions
status: changed
author:
    fullname: 'Join the #container-registry channel on Slack.'
    url: 'https://slack.scaleway.com/'
date: 2022-01-02
category: compute
product: container-registry
---
  • title (mandatory)
  • status (mandatory)
    • added
    • security
    • changed
    • deprecated
    • removed
    • fixed
  • author
    • fullname (optional / mandatory IF url is set) It could be a name or a sentence if you please.
    • url (optionnal)
  • date (mandatory) YYYY-MM-DD
  • category (mandatory) kebab-case
  • product (mandatory) kebab-case

Log file contents

The content section works as any documentation .mdx file. It accept markdown and Components as well. Be concise !

ChangelogList

🧩  This component uses a Tag style.

The ChangelogList component is used to display the latest entries of the changelog, in a particular page.

Display all products

If there is no product name passed to the component, the list will display the X latest changes from the changelog:

Code example:

<ChangelogList numberOfChanges={4} />

Render:

Display only the changes for a specific product

By adding a product name to the component, the list will display the X latest changes from the changelog for this product:

Code example:

<ChangelogList productName="instances" numberOfChanges={2} />

Render:

About Download link in content

🧩  This feature uses a native-extended Markdown style.

  • Use [Download](document-pdf-name.pdf) the document as PDF file.
  • Place the PDF file at a sibling assets directory
    • This is usefull to automatically get the filesize data
  • Then it should appear like this (with PDF icon):

    • 📄 <strong style={{textDecoration: "underline", color: "#bc4fff"}}>Download (PDF, 2.26MB) the document as PDF file.

ProductCard

🧩  This component uses a Tag style.

Props:

  • productIcon (mandatory!) - Icon name from Ultraviolet lib
  • title (mandatory!)
  • description
  • url (for link, mandatory!)

Code example:

<ProductCard 
  productIcon="AccountExperienceProductIcon"
  title="Lorem Ipsum"
  description="Reprehenderit et magna elit non et. Ut laboris adipisicing commodo veniam commodo non amet Lorem pariatur reprehenderit ut ullamco et ad."
  url="/#" />

Render:

Full example

ProductHeader

Props:

  • productName (mandatory!)
  • description
  • productLogo
  • url (for link)
  • label (for link)

Code example:

<ProductHeader
  productName="Instances"
  productLogo="instances"
  description="Lorem ipsum..."
  url="/#"
  label="Instances quickstart"
/>

Render:

Without logo

SummaryCard

There is 4 SummaryCard using props mentionned below.

The icon names are not random ones they come from Ultraviolet lib.

Code example:

<SummaryCard
  title="Quickstart"
  icon="rocket"
  description="lorem ipsum dolor sit amet, consectetur adipiscing elit in in part of the description"
  label="Read More"
  url="/#"
/>

Render:

Ultraviolet illustrations

Here is a list of current Ultraviolet illustrations available

Ultraviolet product icons

Here is a list of current Ultraviolet product icons available

---