-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: add basic styles and BootstrapVue components to styleguide (#2163
) * Add typography styles * Add more typography styles * Add colors to styleguide * Add shadows to styleguide. Remove unused scss variables * Refactor typography into bv table * Add border-radius styles to styleguide * Add b-alert to styleguide * Add b-breadcrumb to styleguide * Add b-card to styleguide and start a styleguide image library * Add Dropdown to styleguide * Add b-form and form inputs to styleguide * Add b-link to styleguide * Add b-list-group to styleguide * Add b-modal to styleguide * Add b-nav to styleguide * Add b-navbar to styleguide * Add b-sidebar to styleguide * Add b-table to styleguide * Add b-tabs to styleguide * Add b-toast to styleguide * Add b-tooltip to styleguide * Add used by in descriptions * Clean up bootstrap vue components * Clean up style tables * Add renamed component folders and start using styleguide images module * Fix imports * Use global dummy-data mixin for styleguide * Add grey background wrapper for white buttons * Move dummy data to portal docs * chore: rename "dummy" data to "sample" data * clean up * Link and clean up used by components lists * Extend the typography table with responsive styles and example use cases * chore: kebab-case props --------- Co-authored-by: Richard Doe <[email protected]>
- Loading branch information
1 parent
f9b1d12
commit a71bc67
Showing
31 changed files
with
1,223 additions
and
240 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains 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,20 @@ | ||
| Customised BootstrapVue alert component. | ||
|
|
||
| Docs including more features and variants: https://bootstrap-vue.org/docs/components/alert | ||
|
|
||
| Used by: | ||
| - AlertMessage | ||
| - [InfoMessage](/#/Components/Generic?id=infomessage) | ||
| - SearchFilters (Newspaper/WWI api filter alert) | ||
|
|
||
| ```jsx | ||
| <b-alert show dismissible class="mb-4"> | ||
| This is a default info variant alert and it is configured to be dismissible | ||
| </b-alert> | ||
| <b-alert | ||
| show | ||
| variant="dark" | ||
| > | ||
| This is a dark variant alert and it is configured to not be dismissible | ||
| </b-alert> | ||
| ``` |
This file contains 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 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,20 @@ | ||
| Customised BootstrapVue breadcrumb component. | ||
|
|
||
| Docs: https://bootstrap-vue.org/docs/components/breadcrumb | ||
|
|
||
| Used by: | ||
| - default layout (only populated by blog and exhibitions) | ||
|
|
||
| ```jsx | ||
| <div style="margin-left: -16px; margin-right: -16px;"> | ||
| <b-breadcrumb | ||
| :items="[{ text: 'Main page', | ||
| to: '#' }, | ||
| { text: 'Sub page', | ||
| to: '#' }, | ||
| { text: 'Sub page', | ||
| active: true | ||
| }]" | ||
| /> | ||
| </div> | ||
| ``` |
This file contains 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 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,99 @@ | ||
| Customised BootstrapVue card component. Currently it is not directly used as in the examples, but could be and forms the base of other card components. | ||
|
|
||
| Docs: https://bootstrap-vue.org/docs/components/card | ||
|
|
||
| Used by: | ||
| - [ContentCard](/#/Components/Content?id=contentcard) | ||
| - [EntityHeader](/#/Components/Entity?id=entityheader) | ||
| - [InfoCard](/#/Components/Generic?id=infocard) | ||
| - [ItemPreviewCard](/#/Components/Item?id=itempreviewcard) | ||
| - MetadataBox | ||
| - RelatedCollectionsCard | ||
| - [RelatedEditorial](/#/Components/Related?id=relatededitorial) | ||
| - RelatedGalleries | ||
| - [UserCreateSetButton](/#/Components/User?id=usercreatesetbutton) | ||
|
|
||
| With top image, header, footer, title, subtitle, text and links | ||
| ```jsx | ||
| <b-card-group | ||
| class="card-deck-3-cols align-items-start" | ||
| deck | ||
| > | ||
| <b-card | ||
| :img-src="thumbnails[6]" | ||
| title="Card title default to h4" | ||
| style="flex: 0 0 18rem;" | ||
| class="mb-4" | ||
| no-body | ||
| > | ||
| <template #header> | ||
| <h4 class="mb-0">This is a header</h4> | ||
| </template> | ||
| <b-card-body> | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element: buttons, links, lists etc. | ||
| </b-card-text> | ||
| <a href="#" class="card-link">Card link</a> | ||
| <a href="#" class="card-link">Another link</a> | ||
| </b-card-body> | ||
| <b-card-footer>This is a footer</b-card-footer> | ||
| </b-card> | ||
| <b-card | ||
| :img-src="thumbnails[6]" | ||
| title="Card title default to h4" | ||
| sub-title="Card subtitle default to h6" | ||
| style="flex: 0 0 18rem;" | ||
| class="mb-4" | ||
| > | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element to the body: buttons, links, lists etc. | ||
| </b-card-text> | ||
| </b-card> | ||
| <b-card | ||
| title="Card without image" | ||
| sub-title="Card subtitle default to h6" | ||
| style="flex: 0 0 18rem;" | ||
| class="mb-4" | ||
| > | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element to the body: buttons, links, lists etc. | ||
| </b-card-text> | ||
| </b-card> | ||
| <b-card | ||
| :img-src="thumbnails[6]" | ||
| img-bottom | ||
| title="Card with bottom image" | ||
| sub-title="Card subtitle default to h6" | ||
| style="flex: 0 0 18rem;" | ||
| class="mb-4" | ||
| > | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element to the body: buttons, links, lists etc. | ||
| </b-card-text> | ||
| </b-card> | ||
| <b-card | ||
| :img-src="thumbnails[6]" | ||
| img-left | ||
| title="Card with left image" | ||
| sub-title="Card subtitle default to h6" | ||
| style="flex: 0 0 90%;" | ||
| class="mb-4" | ||
| > | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element to the body: buttons, links, lists etc. | ||
| </b-card-text> | ||
| </b-card> | ||
| <b-card | ||
| :img-src="thumbnails[6]" | ||
| img-right | ||
| title="Card with right image" | ||
| sub-title="Card subtitle default to h6" | ||
| style="flex: 0 0 90%;" | ||
| class="mb-4" | ||
| > | ||
| <b-card-text> | ||
| Card text. Besides text it is possible to insert any kind of element to the body: buttons, links, lists etc. | ||
| </b-card-text> | ||
| </b-card> | ||
| </b-card-group> | ||
| ``` |
This file contains 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,45 @@ | ||
| Customised BootstrapVue dropdown component. | ||
|
|
||
| Docs: https://bootstrap-vue.org/docs/components/dropdown | ||
|
|
||
| Used by: | ||
| - ItemLanguageSelector | ||
| - LanguageSelector | ||
| - [SearchFacetDropdown](/#/Components/Search?id=searchfacetdropdown) | ||
| - [SearchQueryRuleDropdown](/#/Components/Search?id=searchquerybuilderruledropdown) | ||
|
|
||
| ```jsx | ||
| <b-dropdown text="Default variant dropdown"> | ||
| <b-dropdown-item href="#">An item</b-dropdown-item> | ||
| <b-dropdown-item href="#">Another item</b-dropdown-item> | ||
| </b-dropdown> | ||
|
|
||
| <b-dropdown variant="light" text="Light variant dropdown"> | ||
| <b-dropdown-item href="#">An item</b-dropdown-item> | ||
| <b-dropdown-item href="#">Another item</b-dropdown-item> | ||
| </b-dropdown> | ||
|
|
||
| <b-dropdown variant="link" text="Link variant dropdown"> | ||
| <b-dropdown-item href="#">An item</b-dropdown-item> | ||
| <b-dropdown-item href="#">Another item</b-dropdown-item> | ||
| </b-dropdown> | ||
|
|
||
| <b-dropdown text="Dropdown with group" class="mt-3"> | ||
| <b-dropdown-item-button> | ||
| Non-grouped Item | ||
| </b-dropdown-item-button> | ||
| <b-dropdown-divider></b-dropdown-divider> | ||
| <b-dropdown-group id="dropdown-group-1" header="Group 1"> | ||
| <b-dropdown-item-button>First Grouped item</b-dropdown-item-button> | ||
| <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button> | ||
| </b-dropdown-group> | ||
| <b-dropdown-group id="dropdown-group-2" header="Group 2"> | ||
| <b-dropdown-item-button>First Grouped item</b-dropdown-item-button> | ||
| <b-dropdown-item-button>Second Grouped Item</b-dropdown-item-button> | ||
| </b-dropdown-group> | ||
| <b-dropdown-divider></b-dropdown-divider> | ||
| <b-dropdown-item-button> | ||
| Another Non-grouped Item | ||
| </b-dropdown-item-button> | ||
| </b-dropdown> | ||
| ``` |
Oops, something went wrong.