-
Success notification text goes here.
+Success notification text goes here. Action
Description text goes here.
- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
-
diff --git a/site/layouts/shortcodes/alert.html b/site/layouts/shortcodes/alert.html
deleted file mode 100644
index 3c4b454bf1..0000000000
--- a/site/layouts/shortcodes/alert.html
+++ /dev/null
@@ -1,62 +0,0 @@
-{{- /*
-Usage: `alert "type"`,
-where type is one of info (default), danger, warning, success
-*/ -}}
-
-{{- $css_class := .Get 0 | default "info" -}}
-{{- $id := slicestr $css_class 0 3 | safeHTML -}}
-{{- if in $css_class "danger" -}}
-{{- $id = "err" | safeHTML -}}
-{{- end -}}
-
-{{- $anchor := printf "web-alr-%s-001" $id -}}
-
-
Card title
-Some quick example text to build on the card title and make up the bulk of the card's content.
- Go somewhere +{{< example class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gy-md-5" >}} +
+
+
+ {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+
+
+
+
+ Title
+Caption
+
+
+
+ {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+
+
+
+
+ Title
+Caption
+
+
+{{< /example >}}
+
+{{< example class="row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-3 gy-md-5 bg-dark" >}}
+
+ {{< placeholder width="100%" height="162" class="card-img-top" text="Image cap" >}}
+
+
+
+
+ Title
+Caption
+
+
+
+ {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+
+
+
+ Title
+
+
+
+ {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+
+
+
+
+ Title
+
+
{{< /example >}}
diff --git a/site/content/docs/5.1/components/close-button.md b/site/content/docs/5.1/components/close-button.md
index fc773e2866..8a943405f0 100644
--- a/site/content/docs/5.1/components/close-button.md
+++ b/site/content/docs/5.1/components/close-button.md
@@ -6,7 +6,11 @@ group: components
toc: true
---
-## Example
+{{< callout warning >}}
+This section might change in the future with [#521]({{}}/issues/521). The class **`.btn-close` might be removed**.
+{{< /callout >}}
+
+## Examples
Provide an option to dismiss or close a component with `.btn-close`. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default `mask-image`. **Be sure to include text for screen readers**, as we've done with ``.
@@ -14,6 +18,32 @@ Provide an option to dismiss or close a component with `.btn-close`. Default sty
{{< /example >}}
+{{< callout info >}}
+The **following examples** are branded and won't change for now. The white variant of these buttons will come with [#917]({{}}/issues/917).
+{{< /callout >}}
+
+{{< example >}}
+
+
+
+
+
+
+
+{{< /example >}}
+
## Disabled state
Disabled close buttons change their `color`. We've also applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.
diff --git a/site/content/docs/5.1/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
index 6ebc2fc99e..4cc81630bc 100644
--- a/site/content/docs/5.1/components/navs-tabs.md
+++ b/site/content/docs/5.1/components/navs-tabs.md
@@ -14,12 +14,19 @@ Navigation available in Boosted share general markup and styles, from the base `
The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
{{< callout info >}}
+Note that the `.nav-link` can be used out of any context.
+
The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.
{{< /callout >}}
{{< example >}}
+Link
+Link
+
+
+
+ {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}}
+
+
Title
+Caption
+-
Active
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index 2a32f669f9..a4e57ba5b9 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -88,14 +88,71 @@ And with custom HTML added:
With an SVG:
- + + + + + + + + + ++```html + + + + + + + + + +``` + ## Sass ### Variables diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md index 43a1e0e13a..025df1bdeb 100644 --- a/site/content/docs/5.1/content/tables.md +++ b/site/content/docs/5.1/content/tables.md @@ -592,6 +592,452 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} +## Rich content tables + +### Row selection + +++ +{{< callout info >}} +#### Selection feature + +The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. +{{< /callout >}} + +### With icons or thumbnails + +
+
+Standard table with column headers and row selection + ++ + + ++ ++ + ++Column header +Column header +Column header +Column header ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ ++ ++ + ++Cell text +Cell text +Cell text +Cell text ++ + ++ ++ + ++Cell text +Cell text +Cell text +Cell text +++ +### With column headers and icons + ++
+Standard table with column headers, row selection and icons or thumbnails + ++ + + ++ ++ + ++Column header +Column header +Column header +Column header ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text ++ + ++ ++ + +++ + Cell text + +Cell text +Cell text +Cell text +++ ## Sass ### Variables diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md index 884b3261b9..2caea6bfa5 100644 --- a/site/content/docs/5.1/content/typography.md +++ b/site/content/docs/5.1/content/typography.md @@ -371,7 +371,8 @@ Links in content are black and underlined. They adapt to their context otherwise Add `.link-chevron` to bold your link and enhance them with a chevron. {{< example >}} -This is a sample link with chevron +This is a sample link with chevron+
+Standard table with column headers and icons + ++ + + +Column header +Column header +Column header +Column header ++ +Cell text ++ + ++ + ++ + ++ +Cell text ++ + ++ + ++ + ++ +Cell text ++ + + ++ + ++ +Cell text ++ + + ++ + ++ +Cell text ++ + + + ++ + +Cell text ++ + + + +
+This is a sample link with chevron {{< /example >}} diff --git a/site/content/docs/5.1/forms/range.md b/site/content/docs/5.1/forms/range.md index c68ba2a57f..7da2408924 100644 --- a/site/content/docs/5.1/forms/range.md +++ b/site/content/docs/5.1/forms/range.md @@ -16,6 +16,13 @@ Create custom `` controls with `.form-range`. The track (the Only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress — so Edge, Chrome and Safari won’t show it, and [it's perfectly fine](https://alistapart.com/article/understandingprogressiveenhancement/). {{< /callout >}} +{{< callout info >}} +These features will be delivered with [#116]({{< param repo >}}/issues/116): +- Slider with value +- Slider with units +- Range slider +{{< /callout >}} + {{< example >}} diff --git a/site/content/docs/5.1/forms/select.md b/site/content/docs/5.1/forms/select.md index d409e8d41e..522624ee4e 100644 --- a/site/content/docs/5.1/forms/select.md +++ b/site/content/docs/5.1/forms/select.md @@ -17,6 +17,16 @@ Custom ` + + + + + {{< /example >}} ## Sizing diff --git a/site/content/docs/5.1/guidelines/_index.md b/site/content/docs/5.1/guidelines/_index.md index 98face85d7..d224f21599 100644 --- a/site/content/docs/5.1/guidelines/_index.md +++ b/site/content/docs/5.1/guidelines/_index.md @@ -5,8 +5,58 @@ description: Streamline your workflow and improve experience consistency with th aliases: "/guidelines/" --- -+ + +diff --git a/site/content/docs/5.1/guidelines/alerts.md b/site/content/docs/5.1/guidelines/alerts.md deleted file mode 100644 index b91119eb41..0000000000 --- a/site/content/docs/5.1/guidelines/alerts.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -layout: guidelines -title: Alerts -description: Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. -group: guidelines -subgroup: Components -toc: true ---- - -Alerts are available in [four styles]({{< docsref "/components/alerts" >}}#examples), [multiple sizes]({{< docsref "/components/alerts" >}}#sizes) and for [any length of text]({{< docsref "/components/alerts" >}}#additional-content), as well as [an optional close button]({{< docsref "/components/alerts" >}}#dismissing). - -## Success - -{{< alert success >}} - -## Information - -{{< alert info >}} - -## Warning - -{{< alert warning >}} - -## Error - -{{< alert danger >}} diff --git a/site/content/docs/5.1/guidelines/buttons.md b/site/content/docs/5.1/guidelines/buttons.md deleted file mode 100644 index a964ad142c..0000000000 --- a/site/content/docs/5.1/guidelines/buttons.md +++ /dev/null @@ -1,608 +0,0 @@ ---- -layout: guidelines -title: Buttons -description: Boosted includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. -group: guidelines -subgroup: Components -toc: true ---- - - -## Sizes - -[Documentation]({{< docsref "/components/buttons" >}}#sizes) - -\ No newline at end of file +-Other platforms in the Orange Design System
++++++
+ + Android ++++++
+ + iOS ++++++
+ + Extended reality ++++++
+ + Conversational ++-- - -## Styles - -[Documentation]({{< docsref "/components/buttons" >}}#examples) - ---Small
- ---Medium
- ---Large
- --- -### With icon - -[Documentation]({{< docsref "/components/buttons" >}}#with-icon) - -- -
-- - - -- {{< anchor web-btn-sol-001 >}} -{{< anchor web-btn-sfl-001 >}} -{{< anchor web-btn-imp-001 >}} -{{< anchor web-btn-pos-001 >}} -{{< anchor web-btn-neg-001 >}} -- -Default -- - -- - -- - -- - -- - -- -Pressed -- - -- - -- - -- - -- - -- - -Disabled -- - -- - -- - -- - -- - --- -### Icon buttons - -[Documentation]({{< docsref "/components/buttons" >}}#icon-only) - -- -
-- - - -- {{< anchor web-btn-sol-002 >}} -{{< anchor web-btn-sfl-002 >}} -{{< anchor web-btn-imp-002 >}} -{{< anchor web-btn-pos-002 >}} -{{< anchor web-btn-neg-002 >}} -- -Default -- - -- - -- - -- - -- - -- -Pressed -- - -- - -- - -- - -- - -- - -Disabled -- - -- - -- - -- - -- - --- -## Toggle Buttons - -[Documentation]({{< docsref "/forms/checks-radios" >}}#radio-toggle-buttons) - ---Icon button — {{< anchor web-btn-ico-001 >}}
-----Default
- ---Pressed
- ---Disabled
- ---Icon button outlined — {{< anchor web-btn-ico-002 >}}
-----Default
- ---Pressed
- ---Disabled
- --- -## Split buttons - -[Documentation]({{< docsref "/components/dropdowns" >}}#split-button) — {{< anchor web-btn-spt-001 >}} - -- -
-- - -- With labels -
{{< anchor web-btn-tog-001 >}}With icons -
{{< anchor web-btn-tog-002 >}}With icons, no outline -
{{< anchor web-btn-tog-003 >}}- -Selected -- -- - - - - - --- -- - - - - - --- -- - - - - - --- - - -Disabled -- -- - - - - - --- -- - - - - - --- -- - - - - - ---- -## Pagination - ---Default
---- - - ----Active
---- - - ----Disabled
---- - - ---- -## Back to top - -[Documentation]({{< docsref "/components/back-to-top" >}}) — {{< anchor web-btn-btt-001 >}} - - - - -## Social buttons - -[Documentation]({{< docsref "/components/buttons" >}}#social-buttons) — {{< anchor web-btn-soc-001 >}} - -- - ### With labels - - [Documentation]({{< docsref "/components/pagination" >}}#overview) — {{< anchor web-btn-pag-001 >}} - - --- - ### With icons - - [Documentation]({{< docsref "/components/pagination" >}}#working-with-icons) — {{< anchor web-btn-pag-002 >}} - - ---diff --git a/site/content/docs/5.1/guidelines/cards.md b/site/content/docs/5.1/guidelines/cards.md deleted file mode 100644 index e8affe1026..0000000000 --- a/site/content/docs/5.1/guidelines/cards.md +++ /dev/null @@ -1,249 +0,0 @@ ---- -layout: guidelines -title: Cards -description: Cards provide a flexible and extensible content container with multiple variants and options. -group: guidelines -subgroup: Modules -toc: true ---- - -## Sizes - -[Documentation]({{< docsref "/components/card" >}}#sizing) - --- -Default
--- -Pressed
--- -{{< callout info >}} -Card sizes only rely on `width` for now, as explained in [cards documentation]({{< docsref "/components/card" >}}#sizing). Future release might introduce sizes variants… -{{< /callout >}} - -## Filed black - -[Documentation]({{< docsref "/components/card" >}}#card-styles) - ---- {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}} ---- -Title
---- {{< placeholder width="100%" height="140" class="card-img-top" text="Image cap" >}} ---- -Title
---- {{< placeholder width="100%" height="90" class="card-img-top" text="Image cap" >}} ---- -Title
--- -## Outlined on white - -[Documentation]({{< docsref "/components/card" >}}) - ---{{< anchor web-crd-edt-001 >}}
-- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
---{{< anchor web-crd-edt-002 >}}
-- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
---{{< anchor web-crd-edt-003 >}}
-- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
-Caption
---{{< anchor web-crd-edt-004 >}}
-- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--{{< callout info >}} -The feature will be delivered with [#521]({{< param repo >}}/issues/521). -{{< /callout >}} ----{{< anchor web-crd-edt-006 >}}
-- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--- -## Open on white - -[Documentation]({{< docsref "/components/card" >}}#border) - ---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
-Caption
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--{{< callout info >}} -The feature will be delivered with [#521]({{< param repo >}}/issues/521). -{{< /callout >}} ----- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--diff --git a/site/content/docs/5.1/guidelines/data-tables.md b/site/content/docs/5.1/guidelines/data-tables.md deleted file mode 100644 index e88b33db2b..0000000000 --- a/site/content/docs/5.1/guidelines/data-tables.md +++ /dev/null @@ -1,527 +0,0 @@ ---- -layout: guidelines -title: Data tables -description: Documentation and examples for opt-in styling of tables with Boosted. -group: guidelines -subgroup: Components -toc: true ---- - -## Standard table - -[Documentation]({{< docsref "/content/tables" >}}) — {{< anchor web-tbl-std-001 >}} - ---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ----Title
-Caption
---- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--{{< callout info >}} -The feature will be delivered with [#521]({{< param repo >}}/issues/521). -{{< /callout >}} ----- {{< placeholder width="100%" height="150" class="card-img-top" text="Image cap" >}} ---- -Title
-Caption
--- -## Row selection - -[Documentation]({{< docsref "/content/tables" >}}#active-tables) — {{< anchor web-tbl-std-002 >}} - --
-Standard table with column headers - -- - - -Column header -Column header -Column header -Column header -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- -Cell text -Cell text -Cell text -Cell text -- - -Cell text -Cell text -Cell text -Cell text --- - -{{< callout info >}} -### Selection feature - -The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. -{{< /callout >}} - -## With icons or thumbnails - -[Documentation]({{< docsref "/content/tables" >}}) — {{< anchor web-tbl-std-003 >}} - --
-Standard table with column headers and row selection - -- - - -- -- - --Column header -Column header -Column header -Column header -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- -- -- - --Cell text -Cell text -Cell text -Cell text -- - -- -- - --Cell text -Cell text -Cell text -Cell text --- -## With column headers and icons - -[Documentation]({{< docsref "/content/tables" >}}) — {{< anchor web-tbl-std-005 >}} - --
-Standard table with column headers, row selection and icons or thumbnails - -- - - -- -- - --Column header -Column header -Column header -Column header -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- -- -- - --- - Cell text - -Cell text -Cell text -Cell text -- - -- -- - --- - Cell text - -Cell text -Cell text -Cell text --diff --git a/site/content/docs/5.1/guidelines/footers.md b/site/content/docs/5.1/guidelines/footers.md deleted file mode 100644 index 5453dfb54f..0000000000 --- a/site/content/docs/5.1/guidelines/footers.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: guidelines -title: Footers -description: This design kit contains the essential UI elements for designing, prototyping and building Orange products and services on the web. -group: guidelines -subgroup: Modules -toc: true ---- - -{{< callout info >}} -The feature will be delivered with [#410]({{< param repo >}}/issues/410) as examples. -{{< /callout >}} diff --git a/site/content/docs/5.1/guidelines/forms.md b/site/content/docs/5.1/guidelines/forms.md deleted file mode 100644 index 48d8fea6ce..0000000000 --- a/site/content/docs/5.1/guidelines/forms.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -layout: guidelines -title: Forms -description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. -group: guidelines -subgroup: Components -toc: true ---- - -## Text field sizes - -[Documentation]({{< docsref "/forms/form-control" >}}#sizing) - --
-Standard table with column headers and icons - -- - - -Column header -Column header -Column header -Column header -- -Cell text -- - -- - -- - -- -Cell text -- - -- - -- - -- -Cell text -- - - -- - -- -Cell text -- - - -- - -- -Cell text -- - - - -- - -Cell text -- - - - --- -## Text field standard - -[Documentation]({{< docsref "/forms/overview" >}}) — {{< anchor web-for-tf1-001 >}} - ---Standard height
---- - ----Large
---- - ---- -## Text field multiline - -[Documentation]({{< docsref "/forms/form-control" >}}) — {{< anchor web-for-tf1-002 >}} - ---Default
---- - ----Placeholder
---- - ----Required
---- - ----Disabled
---- - ----Error
---- - --Error notification text goes here.--- -## Select - -[Documentation]({{< docsref "/forms/select" >}}) — {{< anchor web-for-ddl-001 >}} - ---Default
---- - ---- -## Date - -{{< callout info >}} -This feature will be delivered with [#223]({{< param repo >}}/issues/223). -{{< /callout >}} - -## Time - -{{< callout info >}} -This feature will be delivered with [#223]({{< param repo >}}/issues/223). -{{< /callout >}} - -## Quantity selector - -{{< callout info >}} -This feature will be delivered with [#113]({{< param repo >}}/issues/113). -{{< /callout >}} - -## Checkbox - -[Documentation]({{< docsref "/forms/checks-radios" >}}#checks) — {{< anchor web-for-cbx-001 >}} - ---With label
--- -- - ----Without label
---- --- - --- - --- - --- - -- -## Radio button - -[Documentation]({{< docsref "/forms/checks-radios" >}}#radios) — {{< anchor web-for-rbt-001 >}} - -- - --- - --- - --- - -- - -## Toggle switch - -[Documentation]({{< docsref "/forms/checks-radios" >}}#switches) — {{< anchor web-for-tsw-001 >}} - -- - --- - --- - --- - -- -## Tooltip - -[Documentation]({{< docsref "/components/tooltips" >}}) — {{< anchor web-for-ttp-001 >}} - --- -## Slider - -[Documentation]({{< docsref "/forms/range" >}}) — {{< anchor web-for-sld-001 >}} - ---Tooltip on top
- ---Tooltip on right
- ---Tooltip on bottom
- ---Tooltip on left
- -- - --- - -- -Slider with value
- -{{< callout info >}} -This feature will be delivered with [#116]({{< param repo >}}/issues/116). -{{< /callout >}} - -Slider with units
- -{{< callout info >}} -This feature will be delivered with [#116]({{< param repo >}}/issues/116). -{{< /callout >}} - -Range slider with values
- -{{< callout info >}} -This feature will be delivered with [#116]({{< param repo >}}/issues/116). -{{< /callout >}} - -Range slider with units
- -{{< callout info >}} -This feature will be delivered with [#116]({{< param repo >}}/issues/116). -{{< /callout >}} - diff --git a/site/content/docs/5.1/guidelines/global-headers.md b/site/content/docs/5.1/guidelines/global-headers.md deleted file mode 100644 index 0018f1ffad..0000000000 --- a/site/content/docs/5.1/guidelines/global-headers.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -layout: guidelines -title: Global headers -description: This design kit contains the essential UI elements for designing, prototyping and building Orange products and services on the web. -group: guidelines -subgroup: Modules -toc: true ---- - -## Supra bars -{{< callout info >}} -Supra bars are hidden on tablet and mobile devices.
-Based on viewport size, supra bar is hidden under 768px. -{{< /callout >}} - -### Supra bar standard - -{{< anchor web-glh-sub-001 >}} - -{{< example show_markup="true" class="p-0">}} -{{< orange-supra >}} -{{< /orange-supra >}} -{{< /example >}} - -### Supra bar with language options - -{{< anchor web-glh-sub-002 >}} - -{{< example show_markup="true" class="p-0">}} -{{< orange-supra >}} - -{{< /orange-supra >}} -{{< /example >}} - -### Supra bar with actions - -{{< anchor web-glh-sub-003 >}} - -{{< example show_markup="true" class="p-0">}} -{{< orange-supra >}} --
-
-
-
- - - - My account - - -
-- -## Modal with image, title and description - -[Documentation]({{< docsref "/components/modal" >}}#with-image) — {{< anchor web-mod-std-002 >}} - ---- ----- ---- -## Modal with scrolling - -[Documentation]({{< docsref "/components/modal" >}}#scrolling-long-content) — {{< anchor web-mod-scr-001 >}} - ---- ---diff --git a/site/content/docs/5.1/guidelines/navigation.md b/site/content/docs/5.1/guidelines/navigation.md deleted file mode 100644 index c83346bf26..0000000000 --- a/site/content/docs/5.1/guidelines/navigation.md +++ /dev/null @@ -1,301 +0,0 @@ ---- -layout: guidelines -title: Navigation -description: Navigation available in Boosted share general markup and styles, from standard links to full featured navbars. -group: guidelines -subgroup: Components -toc: true ---- - -## Links - -[Documentation]({{< docsref "/content/typography" >}}#links) - ---- ---- -## Tabs - -[Documentation]({{< docsref "/components/navs-tabs" >}}#tabs) — {{< anchor web-nav-tab-001 >}} - ---Main navigation links — {{< anchor web-nav-lnk-001 >}}
- Text link ---Small navigation links — {{< anchor web-nav-lnk-002 >}}
- Text link ---Links with underline — {{< anchor web-nav-lnk-003 >}}
- Text link ---Small links width underline — {{< anchor web-nav-lnk-004 >}}
- Text link ---With chevron — {{< anchor web-nav-lnk-005 >}}
- Text link -- -- -## Tabs light - -[Documentation]({{< docsref "/components/navs-tabs" >}}#tabs-light) — {{< anchor web-nav-tab-002 >}} - -- -- -## Pagination - -[Documentation]({{< docsref "/components/pagination" >}}) — {{< anchor web-nav-pag-001 >}} - - - -## Pagination dots - -[Documentation]({{< docsref "/components/carousel#with-indicators" >}}) — {{< anchor web-nav-pdt-001 >}} - - - -## Carousel navigation - -[Documentation]({{< docsref "/components/carousel" >}}) — {{< anchor web-nav-cna-001 >}} - - - -## Accordion - -[Documentation]({{< docsref "/components/accordion" >}}) --- -## Stepped process - -[Documentation]({{< docsref "/components/stepped-process" >}}) — -{{< anchor web-nav-stp-001 >}} -{{< anchor web-nav-stp-002 >}} - ---Small — {{< anchor web-nav-acc-001 >}}
------ -
---- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---Medium — {{< anchor web-nav-acc-002 >}}
------ -
---- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---Large — {{< anchor web-nav-acc-003 >}}
------ -
---- This is the first item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. ---- -
---- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the-.accordion-body, though the transition does limit overflow. --\ No newline at end of file diff --git a/site/content/docs/5.1/guidelines/progress-indicators.md b/site/content/docs/5.1/guidelines/progress-indicators.md deleted file mode 100644 index 515cf5c67d..0000000000 --- a/site/content/docs/5.1/guidelines/progress-indicators.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -layout: guidelines -title: Progress indicators -description: Indicate the loading state of a component or page with Boosted spinners or progress bars. -group: guidelines -subgroup: Components -toc: true ---- - -## Spinners - -[Documentation]({{< docsref "/components/spinners" >}}) — {{< anchor web-prg-spn-001 >}} - -- ---- -## Progress bars - -[Documentation]({{< docsref "/components/progress" >}}) — {{< anchor web-prg-pbr-001 >}} - ---- Loading... ----- Loading... ---- -- Loading... ----- Loading... ----- Loading... ----- Loading... --- --- --- -diff --git a/site/content/docs/5.1/guidelines/responsive-grid.md b/site/content/docs/5.1/guidelines/responsive-grid.md deleted file mode 100644 index 066c83eafd..0000000000 --- a/site/content/docs/5.1/guidelines/responsive-grid.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -layout: guidelines -title: Responsive grid -description: Responsive grid breakpoints define grid width specifications for different screens, devices and orientations. -group: guidelines -subgroup: Responsive grids ---- - -Boosted grid is heavily documented: [breakpoints]({{< docsref "/layout/breakpoints" >}}), [containers]({{< docsref "/layout/containers" >}}), [columns]({{< docsref "/layout/columns" >}}) and [gutters]({{< docsref "/layout/gutters" >}}). - --diff --git a/site/content/docs/5.1/guidelines/stickers.md b/site/content/docs/5.1/guidelines/stickers.md deleted file mode 100644 index 4209f82d9f..0000000000 --- a/site/content/docs/5.1/guidelines/stickers.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -layout: guidelines -title: Stickers -description: This design kit contains the essential UI elements for designing, prototyping and building Orange products and services on the web. -group: guidelines -subgroup: Stickers -toc: true ---- - -{{< callout info >}} -The feature will be delivered with [#440]({{< param repo >}}/issues/440). -{{< /callout >}} - -## Service offer on one line - -{{< anchor web-prm-stk-001 >}} - --
-Responsive grid details - -- - - -Breakpoints -Devices -Grid width -Columns -Column width -Gutter width -Margin -- -320pxMobile portrait -302px12 -16px10px9px- -480pxMobile landscape -458px12 -29px10px11px- -768pxTablet portrait -724px12 -42px20px22px- -1024pxSmall desktop / -
Tablet landscape940px12 -60px20px10px- -1280px1280px1180px12 -80px20px10px- - -1440px1440px1300px12 -90px20px20px-- -{{< callout warning >}} -### Proof-of-concept - -This is a proof-of-concept using only SVG to implement stickers. It probably won't stay as-is! -{{< /callout >}} diff --git a/site/content/docs/5.1/helpers/colored-links.md b/site/content/docs/5.1/helpers/colored-links.md index e3d11d0622..71067bc693 100644 --- a/site/content/docs/5.1/helpers/colored-links.md +++ b/site/content/docs/5.1/helpers/colored-links.md @@ -9,7 +9,10 @@ toc: false You can use the `.link-*` classes to colorize links. Unlike the [`.text-*` classes]({{< docsref "/utilities/colors" >}}), these classes have a `:hover` and `:focus` state. {{< example >}} -Primary link -Light link +Link +Bold link +Small bold link +Primary link +Light link {{< /example >}} diff --git a/site/content/docs/5.1/layout/grid.md b/site/content/docs/5.1/layout/grid.md index 2a3de301b4..c3b52f3b70 100644 --- a/site/content/docs/5.1/layout/grid.md +++ b/site/content/docs/5.1/layout/grid.md @@ -411,6 +411,10 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm When using Boosted's source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts. +{{< callout warning >}} +Boosted branded grids are described in the **[design guidelines](https://system.design.orange.com/0c1af118d/p/43fadd-responsive-grids/t/74add6)**. +{{< /callout >}} + ### Variables Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below. diff --git a/site/data/guidelines.yml b/site/data/guidelines.yml index 0aeb66bbaa..89b4585152 100644 --- a/site/data/guidelines.yml +++ b/site/data/guidelines.yml @@ -4,30 +4,3 @@ - title: Colors - title: Line styles - title: Typography - -- title: Responsive grids - pages: - - title: Responsive grid - -- title: Components - pages: - - title: Buttons - - title: Alerts - - title: Navigation - - title: Forms - - title: Data tables - - title: Progress indicators - - title: Modals - -- title: Modules - pages: - - title: Global headers - - title: Global menu - - title: Global search - - title: Local headers - - title: Footers - - title: Cards - -- title: Stickers - pages: - - title: Stickers diff --git a/site/layouts/_default/guidelines.html b/site/layouts/_default/guidelines.html index c909182f35..eff3dd52e9 100644 --- a/site/layouts/_default/guidelines.html +++ b/site/layouts/_default/guidelines.html @@ -7,7 +7,7 @@- --- --- --{{ .Title | markdownify }}
{{ .Page.Params.Description | markdownify }}
- - {{ $anchor }} -
- -
-
-
-{{ humanize $css_class }} notification text goes here.
- -
-
-
-
-{{- $anchor := printf "web-alr-%s-002" $id -}}
-{{ humanize $css_class }} notification text goes here. Action
- -- {{ $anchor }} -
- -
-
-
-
-
-
-{{ humanize $css_class }} notification text goes here.
-Description text goes here.
-
-
-
-
-{{- $anchor := printf "web-alr-%s-003" $id -}}
-
-
-
-{{ humanize $css_class }} notification text goes here. Action
-Description text goes here.
-- {{ $anchor }} -
- -
-
-
-{{ humanize $css_class }} notification text goes here.
-
-
-
diff --git a/site/static/docs/5.1/assets/img/boosted-sprite.svg b/site/static/docs/5.1/assets/img/boosted-sprite.svg
index 691ca60162..74c8d0fb6b 100644
--- a/site/static/docs/5.1/assets/img/boosted-sprite.svg
+++ b/site/static/docs/5.1/assets/img/boosted-sprite.svg
@@ -35,4 +35,10 @@
{{ humanize $css_class }} notification text goes here. Action
-