doc: Add Brands section to documentation #3552
+383
−24
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,222 @@ | ||
| --- | ||
| import { getConfig } from '@libs/config.ts' | ||
| interface Props { | ||
| /** | ||
| * The theme to use for display. One of `orange`, `orange-compact`, or `sosh`. | ||
| * @default 'orange' | ||
| */ | ||
| theme?: 'orange' | 'orange-compact' | 'sosh' | ||
| } | ||
| const { theme = 'orange' } = Astro.props | ||
| --- | ||
|
|
||
| <link | ||
| rel="preload" | ||
| href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg`} | ||
| as="image" | ||
| type="image/svg+xml" | ||
| /> | ||
|
|
||
| <div data-bs-brand={theme} id={`theme-demo-${theme}`} class="p-medium border border-default"> | ||
| <div class="row mb-scaled-medium"> | ||
| <div class="col-12"> | ||
| <div class="alert alert-message alert-positive mb-medium"> | ||
|
Collaborator
There was a problem hiding this comment. Couldn't we reuse |
||
| <div class="alert-icon"></div> | ||
| <div class="alert-container"> | ||
| <div class="alert-text-container"> | ||
| <p class="alert-label">Success</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="alert alert-message alert-warning"> | ||
| <div class="alert-icon"></div> | ||
| <div class="alert-container"> | ||
| <div class="alert-text-container"> | ||
| <p class="alert-label">Warning</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="row mb-scaled-medium"> | ||
| <div class="col-12 d-flex justify-content-between flex-wrap gap-xsmall"> | ||
| <button type="button" class="btn btn-default">Default</button> | ||
| <button type="button" class="btn btn-brand"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| Brand | ||
| </button> | ||
| <button type="button" class="btn btn-icon btn-strong"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| <span class="visually-hidden">Brand</span> | ||
| </button> | ||
| <button type="button" class="btn btn-icon btn-negative"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| <span class="visually-hidden">Brand</span> | ||
| </button> | ||
| <button type="button" class="btn btn-icon btn-minimal"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| <span class="visually-hidden">Brand</span> | ||
| </button> | ||
|
louismaximepiton marked this conversation as resolved.
|
||
| <a class="btn btn-default btn-previous" href="#">Previous</a> | ||
| <a class="btn btn-default btn-next" href="#">Next</a> | ||
| </div> | ||
| </div> | ||
| <div class="row mb-scaled-medium"> | ||
| <div class="col-12 d-flex gap-scaled-medium align-items-center flex-wrap justify-content-between"> | ||
| <div class="d-inline-flex gap-medium"> | ||
| <p class="badge badge-positive badge-large"><span class="visually-hidden">Success</span></p> | ||
| <p class="badge badge-info badge-large"><span class="visually-hidden">Info</span></p> | ||
| <p class="badge badge-warning badge-large"><span class="visually-hidden">Warning</span></p> | ||
| <p class="badge badge-large"><span class="visually-hidden">Beware</span></p> | ||
| </div> | ||
| <div class="d-inline-flex gap-medium"> | ||
| <p class="badge badge-neutral badge-count badge-large">0<span class="visually-hidden">notification</span></p> | ||
| <p class="badge badge-accent badge-count badge-large">1<span class="visually-hidden">notification</span></p> | ||
| <p class="badge badge-positive badge-large"> | ||
| <span class="badge-status-icon"></span> | ||
| <span class="visually-hidden">Success</span> | ||
| </p> | ||
| <p class="badge badge-info badge-large"> | ||
| <span class="badge-status-icon"></span> | ||
| <span class="visually-hidden">Info</span> | ||
| </p> | ||
| </div> | ||
| <nav aria-label="basic breadcrumb"> | ||
| <ol class="breadcrumb mb-none"> | ||
| <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li> | ||
| <li class="breadcrumb-item"><a href="#" title="Category">Category</a></li> | ||
| <li class="breadcrumb-item active" aria-current="page"><span title="Library">Library</span></li> | ||
| </ol> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-12 md:col-6 mb-lg-medium"> | ||
| <div class="checkbox-item mb-scaled-small"> | ||
| <div class="control-item-assets-container"> | ||
| <input checked class="control-item-indicator" type="checkbox" value="" id={`cb-${theme}`} /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for={`cb-${theme}`}>Checkbox</label> | ||
| </div> | ||
| </div> | ||
| <fieldset class="control-items-list mb-scaled-small"> | ||
| <div class="d-flex flex-row gap-small w-50"> | ||
| <div class="radio-button-item flex-fill"> | ||
| <div class="control-item-assets-container"> | ||
| <input | ||
| class="control-item-indicator" | ||
| type="radio" | ||
| value="" | ||
| id={`rb1-${theme}`} | ||
| name={`radio-${theme}`} | ||
| checked | ||
| /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for={`rb1-${theme}`}>Yes</label> | ||
| </div> | ||
| </div> | ||
| <div class="radio-button-item flex-fill"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="radio" value="" id={`rb2-${theme}`} name={`radio-${theme}`} /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for={`rb2-${theme}`}>No</label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </fieldset> | ||
| <div class="switch-item mb-scaled-small"> | ||
| <div class="control-item-assets-container"> | ||
| <input class="control-item-indicator" type="checkbox" role="switch" value="" id={`switch-${theme}`} /> | ||
| </div> | ||
| <div class="control-item-text-container"> | ||
| <label class="control-item-label" for={`switch-${theme}`}>Switch with icon</label> | ||
| </div> | ||
| <div class="control-item-assets-container"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| </div> | ||
|
louismaximepiton marked this conversation as resolved.
|
||
| </div> | ||
| <div class="d-flex gap-scaled-medium"> | ||
| <a class="link link-chevron" href="#">Link with chevron</a> | ||
| <a class="link icon-link" href="#"> | ||
| <svg aria-hidden="true"> | ||
| <use xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`} | ||
| ></use> | ||
| </svg> | ||
| Link with icon | ||
|
louismaximepiton marked this conversation as resolved.
|
||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="col-12 md:col-6"> | ||
| <ul | ||
| class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium mb-scaled-medium" | ||
| aria-label="Statuses" | ||
| > | ||
| <li class="tag tag-positive"><span class="tag-status-icon"></span>Success</li> | ||
| <li class="tag tag-info"><span class="tag-status-icon"></span>Info</li> | ||
| <li class="tag tag-warning tag-muted"><span class="tag-status-icon"></span>Warning</li> | ||
| <li class="tag tag-negative tag-muted"><span class="tag-status-icon"></span>Error</li> | ||
| </ul> | ||
| <div role="group" aria-label="Filter by" class="mb-scaled-medium"> | ||
| <ul class="chips-container"> | ||
| <li class="chip chip-filter"> | ||
| <input type="checkbox" id={`ap-${theme}`} checked /> | ||
| <label class="chip-interactive" for={`ap-${theme}`}> Apple </label> | ||
| </li> | ||
| <li class="chip chip-filter"> | ||
| <input type="checkbox" id={`sa-${theme}`} /> | ||
| <label class="chip-interactive" for={`sa-${theme}`}> Samsung </label> | ||
| </li> | ||
| <li class="chip chip-filter"> | ||
| <input type="checkbox" id={`xi-${theme}`} /> | ||
| <label class="chip-interactive" for={`xi-${theme}`}> Xiaomi </label> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| <div class="text-input mb-scaled-medium"> | ||
| <div class="text-input-container"> | ||
| <label for={`pwd-${theme}`}>Password</label> | ||
| <input type="password" id={`pwd-${theme}`} class="text-input-field" placeholder=" " /> | ||
| <button class="btn btn-minimal btn-icon" aria-pressed="false" type="button"> | ||
| <svg aria-hidden="true"> | ||
| <use | ||
| xlink:href={`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#accessibility-vision`} | ||
| ></use> | ||
| </svg> | ||
| <span class="visually-hidden">Show password</span> | ||
|
louismaximepiton marked this conversation as resolved.
|
||
| </button> | ||
| </div> | ||
| </div> | ||
| <div class="select-input"> | ||
| <div class="select-input-container"> | ||
| <label for={`sel-${theme}`}>Default select</label> | ||
| <select class="select-input-field" id={`sel-${theme}`}> | ||
| <option value="" disabled selected></option> | ||
| <option value="1">One</option> | ||
| <option value="2">Two</option> | ||
| <option value="3">Three</option> | ||
| </select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree with this vocabulary change but I think we should do it everywhere (code included). To discuss in a v2? added in the Loop file