├── .max-age ├── .husky ├── .gitignore ├── _ │ └── husky.sh ├── common.sh └── pre-push ├── .vscode ├── spellright.dict └── extensions.json ├── components ├── vf-boilerplate-page │ ├── CHANGELOG.md │ ├── index.scss │ ├── vf-boilerplate-page.js │ ├── .npmignore │ └── vf-boilerplate-page.config.yml ├── vf-inlay │ ├── vf-inlay.js │ ├── .npmignore │ ├── vf-inlay.config.yml │ ├── index.scss │ └── vf-inlay.variables.scss ├── vf-no-js │ ├── vf-no-js.js │ ├── .npmignore │ ├── CHANGELOG.md │ ├── vf-no-js.config.yml │ ├── vf-no-js.njk │ ├── index.scss │ └── vf-no-js.scss ├── vf-footer │ ├── vf-footer.js │ ├── .npmignore │ ├── vf-footer.config.yml │ └── index.scss ├── _previews │ └── _preview--fullhtml.njk ├── vf-sass-config │ ├── mixins │ │ ├── _helpers.scss │ │ ├── _vf-utility-mixins.scss │ │ ├── _button.scss │ │ └── _vf-mixins.scss │ ├── vf-sass-config.njk │ ├── .npmignore │ ├── functions │ │ ├── set-layer.scss │ │ ├── _theme.scss │ │ ├── _set-spacing.scss │ │ ├── vf-functions.scss │ │ ├── map-deep-get.scss │ │ └── string-replace.scss │ ├── index.scss │ └── variables │ │ └── vf-global-custom-properties.scss ├── vf-sass-starter │ ├── vf-sass-starter.njk │ ├── .npmignore │ └── vf-sass-starter.config.yml ├── vf-badge │ ├── .npmignore │ ├── vf-badge.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ └── index.scss ├── vf-body │ ├── .npmignore │ ├── vf-body.config.yml │ ├── index.scss │ ├── vf-body.njk │ └── CHANGELOG.md ├── vf-box │ ├── .npmignore │ ├── vf-box.variables.scss │ └── index.scss ├── vf-card │ ├── .npmignore │ ├── assets │ │ └── vf-card-example.png │ ├── index.scss │ └── vf-card.variables.scss ├── vf-embed │ ├── .npmignore │ ├── index.scss │ └── vf-embed.variables.scss ├── vf-flag │ ├── .npmignore │ ├── index.scss │ └── vf-flag.variables.scss ├── vf-form │ ├── .npmignore │ └── vf-form.config.yml ├── vf-grid │ ├── .npmignore │ ├── index.scss │ ├── vf-grid--auto.njk │ ├── vf-grid--col-2.njk │ ├── vf-grid--col-3.njk │ └── vf-grid.njk ├── vf-hero │ ├── .npmignore │ ├── vf-hero.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ ├── vf-hero.variables.scss │ └── index.scss ├── vf-intro │ ├── .npmignore │ └── index.scss ├── vf-lede │ ├── .npmignore │ ├── vf-lede.njk │ ├── CHANGELOG.md │ ├── vf-lede.variables.scss │ └── index.scss ├── vf-link │ ├── .npmignore │ ├── index.scss │ ├── vf-link.njk │ └── vf-link.config.yml ├── vf-list │ ├── .npmignore │ └── index.scss ├── vf-logo │ ├── .npmignore │ └── index.scss ├── vf-stack │ ├── .npmignore │ ├── index.scss │ └── vf-stack.variables.scss ├── vf-table │ ├── .npmignore │ ├── vf-table.variables.scss │ └── index.scss ├── vf-tabs │ ├── .npmignore │ ├── vf-tabs.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ └── index.scss ├── vf-tags │ ├── .npmignore │ ├── vf-tags.js │ ├── CHANGELOG.md │ ├── index.scss │ └── vf-tags.variables.scss ├── vf-text │ ├── .npmignore │ ├── index.scss │ └── vf-text.njk ├── vf-tree │ ├── .npmignore │ └── index.scss ├── vf-video │ ├── .npmignore │ ├── vf-video.config.yml │ ├── vf-video.njk │ └── index.scss ├── embl-grid │ ├── .npmignore │ └── index.scss ├── embl-logo │ ├── .npmignore │ ├── embl-logo.njk │ └── index.scss ├── vf-banner │ ├── .npmignore │ └── vf-banner.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts ├── vf-blockquote │ ├── .npmignore │ ├── vf-blockquote.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ └── index.scss ├── vf-bookmark │ ├── .npmignore │ └── index.scss ├── vf-button │ ├── .npmignore │ ├── vf-button.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ └── index.scss ├── vf-cluster │ ├── .npmignore │ ├── index.scss │ └── vf-cluster.variables.scss ├── vf-collapse │ ├── .npmignore │ ├── vf-collapse.njk │ ├── vf-collapse.variables.scss │ ├── CHANGELOG.md │ └── index.scss ├── vf-content │ ├── .npmignore │ ├── vf-content.config.yml │ └── yarn.lock ├── vf-deprecated │ ├── .npmignore │ ├── CHANGELOG.md │ ├── vf-deprecated.njk │ ├── vf-deprecated.variables.scss │ └── index.scss ├── vf-details │ ├── .npmignore │ ├── index.scss │ └── vf-details.variables.scss ├── vf-discussion │ ├── .npmignore │ ├── vf-discussion.variables.scss │ └── index.scss ├── vf-divider │ ├── .npmignore │ ├── index.scss │ ├── vf-divider.scss │ ├── vf-divider.njk │ ├── CHANGELOG.md │ └── vf-divider.config.yml ├── vf-explainer │ ├── .npmignore │ ├── vf-explainer.njk │ ├── CHANGELOG.md │ ├── vf-explainer.variables.scss │ └── index.scss ├── vf-favicon │ ├── .npmignore │ ├── assets │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── apple-touch-icon.png │ │ ├── mstile-150x150.png │ │ ├── android-chrome-192x192.png │ │ └── browserconfig.xml │ └── CHANGELOG.md ├── vf-figure │ ├── .npmignore │ ├── assets │ │ ├── figure-example.png │ │ └── training-cover.png │ └── index.scss ├── vf-form__item │ ├── .npmignore │ ├── vf-form__item.njk │ ├── vf-form__item.config.yml │ └── index.scss ├── vf-grid-page │ ├── .npmignore │ ├── vf-grid-page.config.yml │ ├── index.scss │ ├── vf-grid-page.njk │ └── CHANGELOG.md ├── vf-header │ ├── .npmignore │ ├── vf-header.njk │ └── vf-header.config.yml ├── vf-heading │ ├── .npmignore │ └── index.scss ├── vf-link-list │ ├── .npmignore │ ├── yarn.lock │ └── index.scss ├── vf-mega-menu │ ├── .npmignore │ └── index.scss ├── vf-navigation │ ├── .npmignore │ ├── vf-navigation--additional.scss │ ├── vf-navigation.variables.scss │ └── yarn.lock ├── vf-pagination │ ├── .npmignore │ ├── vf-pagination--full.scss │ ├── vf-pagination.variables.scss │ └── index.scss ├── vf-profile │ ├── .npmignore │ ├── assets │ │ └── vf-icon--avatar.svg │ ├── index.scss │ └── vf-profile.variables.scss ├── vf-progress-indicator │ ├── vf-progress-indicator.js │ ├── .npmignore │ └── index.scss ├── vf-search │ ├── .npmignore │ ├── vf-search.variables.scss │ └── index.scss ├── vf-show-more │ ├── .npmignore │ ├── index.scss │ ├── vf-show-more.variables.scss │ └── vf-show-more.config.yml ├── vf-sidebar │ ├── .npmignore │ ├── CHANGELOG.md │ └── index.scss ├── vf-summary │ ├── .npmignore │ └── assets │ │ ├── vf-summary--profile-img.png │ │ ├── vf-summary--news-has-image.jpg │ │ └── vf-icon--avatar.svg ├── ebi-header-footer │ ├── .npmignore │ ├── ebi-header-footer.njk │ ├── ebi-header-footer.variables.scss │ └── index.scss ├── embl-notifications │ ├── .npmignore │ ├── embl-notifications.njk │ ├── embl-notifications.variables.scss │ └── index.scss ├── vf-activity-group │ ├── .npmignore │ ├── vf-activity-group.njk │ └── index.scss ├── vf-activity-list │ ├── .npmignore │ ├── vf-activity-list.njk │ └── index.scss ├── vf-back-to-top │ ├── .npmignore │ ├── vf-back-to-top.angular │ │ ├── public-api.d.ts │ │ └── index.d.ts │ └── index.scss ├── vf-banner-elixir │ ├── .npmignore │ ├── CHANGELOG.md │ └── index.scss ├── vf-breadcrumbs │ ├── .npmignore │ └── vf-breadcrumbs.variables.scss ├── vf-card-container │ ├── .npmignore │ ├── vf-card-container.variables.scss │ └── index.scss ├── vf-code-example │ ├── .npmignore │ ├── vf-code-example.config.yml │ └── index.scss ├── vf-design-tokens │ ├── .npmignore │ ├── src │ │ ├── typographic-scales │ │ │ └── vf-font--monospace.yml │ │ ├── variables │ │ │ ├── vf-font-families.yml │ │ │ ├── vf-layout.yml │ │ │ └── vf-border-radius.yml │ │ └── spacing.palette.alias.yml │ └── dist │ │ ├── sass │ │ ├── vf-layout.variables.scss │ │ ├── maps │ │ │ ├── vf-color__brand.map.scss │ │ │ ├── vf-color__interactive.map.scss │ │ │ ├── vf-color__background.map.scss │ │ │ └── vf-breakpoints.map.scss │ │ ├── vf-border-radius.variables.scss │ │ ├── custom-properties │ │ │ ├── vf-color__brand.custom-properties.scss │ │ │ ├── vf-color__interactive.custom-properties.scss │ │ │ └── vf-color__background.custom-properties.scss │ │ ├── vf-links.variables.scss │ │ ├── vf-font--monospace.scss │ │ ├── vf-breakpoints.variables.scss │ │ └── vf-font-families.variables.scss │ │ └── json │ │ └── vf-font--monospace.ios.json ├── vf-dropdown │ ├── .npmignore │ ├── vf-dropdown.jsx │ └── index.scss ├── vf-font-plex-mono │ ├── .npmignore │ ├── vf-font-plex-mono.njk │ ├── assets │ │ ├── IBM-Plex-Mono │ │ │ └── fonts │ │ │ │ └── complete │ │ │ │ ├── woff │ │ │ │ └── IBMPlexMono-Regular.woff │ │ │ │ └── woff2 │ │ │ │ └── IBMPlexMono-Regular.woff2 │ │ └── scss │ │ │ ├── ibm-plex.scss │ │ │ └── mono │ │ │ └── regular │ │ │ └── _latin3.scss │ ├── vf-font-plex-mono.config.yml │ └── index.scss ├── vf-font-plex-sans │ ├── .npmignore │ ├── vf-font-plex-sans.njk │ ├── assets │ │ ├── IBM-Plex-Sans │ │ │ └── fonts │ │ │ │ └── complete │ │ │ │ ├── woff │ │ │ │ ├── IBMPlexSans-Bold.woff │ │ │ │ ├── IBMPlexSans-Text.woff │ │ │ │ ├── IBMPlexSans-Thin.woff │ │ │ │ ├── IBMPlexSans-Italic.woff │ │ │ │ ├── IBMPlexSans-Light.woff │ │ │ │ ├── IBMPlexSans-Medium.woff │ │ │ │ ├── IBMPlexSans-Regular.woff │ │ │ │ ├── IBMPlexSans-SemiBold.woff │ │ │ │ ├── IBMPlexSans-BoldItalic.woff │ │ │ │ ├── IBMPlexSans-ExtraLight.woff │ │ │ │ ├── IBMPlexSans-LightItalic.woff │ │ │ │ ├── IBMPlexSans-MediumItalic.woff │ │ │ │ ├── IBMPlexSans-TextItalic.woff │ │ │ │ ├── IBMPlexSans-ThinItalic.woff │ │ │ │ ├── IBMPlexSans-SemiBoldItalic.woff │ │ │ │ └── IBMPlexSans-ExtraLightItalic.woff │ │ │ │ └── woff2 │ │ │ │ ├── IBMPlexSans-Bold.woff2 │ │ │ │ ├── IBMPlexSans-Light.woff2 │ │ │ │ ├── IBMPlexSans-Text.woff2 │ │ │ │ ├── IBMPlexSans-Thin.woff2 │ │ │ │ ├── IBMPlexSans-Italic.woff2 │ │ │ │ ├── IBMPlexSans-Medium.woff2 │ │ │ │ ├── IBMPlexSans-Regular.woff2 │ │ │ │ ├── IBMPlexSans-BoldItalic.woff2 │ │ │ │ ├── IBMPlexSans-ExtraLight.woff2 │ │ │ │ ├── IBMPlexSans-SemiBold.woff2 │ │ │ │ ├── IBMPlexSans-TextItalic.woff2 │ │ │ │ ├── IBMPlexSans-ThinItalic.woff2 │ │ │ │ ├── IBMPlexSans-LightItalic.woff2 │ │ │ │ ├── IBMPlexSans-MediumItalic.woff2 │ │ │ │ ├── IBMPlexSans-SemiBoldItalic.woff2 │ │ │ │ └── IBMPlexSans-ExtraLightItalic.woff2 │ │ └── scss │ │ │ ├── ibm-plex.scss │ │ │ └── sans │ │ │ ├── regular │ │ │ ├── _latin3.scss │ │ │ └── _greek.scss │ │ │ ├── bold │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ ├── _latin3.scss │ │ │ │ └── _greek.scss │ │ │ ├── text │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ ├── _latin3.scss │ │ │ │ └── _greek.scss │ │ │ ├── thin │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ ├── _latin3.scss │ │ │ │ └── _greek.scss │ │ │ ├── light │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ ├── _latin3.scss │ │ │ │ └── _greek.scss │ │ │ ├── italic │ │ │ ├── _latin3.scss │ │ │ └── _greek.scss │ │ │ ├── medium │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ ├── _latin3.scss │ │ │ │ └── _greek.scss │ │ │ ├── semibold │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ │ └── _latin3.scss │ │ │ └── extralight │ │ │ ├── _latin3.scss │ │ │ ├── _greek.scss │ │ │ └── italic │ │ │ └── _latin3.scss │ ├── vf-font-plex-sans.config.yml │ └── index.scss ├── vf-form__fieldset │ ├── .npmignore │ └── index.scss ├── vf-form__helper │ ├── .npmignore │ ├── vf-form__helper.njk │ ├── index.scss │ └── vf-form__helper.config.yml ├── vf-form__input │ ├── .npmignore │ ├── vf-form__input--disabled.njk │ ├── vf-form__input.njk │ ├── vf-form__input--search.njk │ ├── vf-form__input--filter.njk │ ├── index.scss │ ├── vf-form__input.config.yml │ └── vf-form__input--password.njk ├── vf-form__label │ ├── .npmignore │ ├── index.scss │ └── vf-form__label.config.yml ├── vf-form__legend │ ├── .npmignore │ ├── vf-form__legend.config.yml │ ├── index.scss │ └── vf-form__legend.variables.scss ├── vf-form__radio │ ├── .npmignore │ └── index.scss ├── vf-form__select │ ├── .npmignore │ ├── vf-form__select.config.yml │ └── index.scss ├── vf-form__textarea │ ├── .npmignore │ ├── index.scss │ └── vf-form__textarea.config.yml ├── vf-global-header │ ├── .npmignore │ ├── vf-global-header.njk │ ├── vf-global-header.config.yml │ └── index.scss ├── vf-news-container │ ├── .npmignore │ └── vf-news-container.config.yml ├── vf-page-header │ ├── .npmignore │ ├── vf-page-header.njk │ ├── vf-page-header.config.yml │ ├── yarn.lock │ ├── index.scss │ └── CHANGELOG.md ├── vf-polyfill-js │ ├── .npmignore │ ├── vf-polyfill-js.njk │ ├── CHANGELOG.md │ ├── vf-polyfill-js.variables.scss │ └── index.scss ├── vf-sass-utilities │ ├── .npmignore │ ├── _vf-no-wrap.scss │ ├── CHANGELOG.md │ ├── _vf-et-al.scss │ ├── vf-sass-utilities.variables.scss │ ├── _vf-screen-reader.scss │ └── index.scss ├── vf-section-header │ ├── .npmignore │ ├── yarn.lock │ └── index.scss ├── vf-smooth-scroll │ ├── .npmignore │ ├── CHANGELOG.md │ └── index.scss ├── vf-social-links │ ├── .npmignore │ └── index.scss ├── vf-summary-container │ ├── CHANGELOG.md │ ├── .npmignore │ └── vf-summary-container.scss ├── vf-u-fullbleed │ ├── .npmignore │ ├── vf-u-fullbleed.config.yml │ ├── vf-u-fullbleed.variables.scss │ └── index.scss ├── vf-utility-classes │ ├── .npmignore │ ├── vf-u-screen-reader.scss │ ├── index.scss │ └── vf-u-text.scss ├── vf-video-container │ ├── .npmignore │ ├── vf-video-container.config.yml │ ├── vf-video-container.njk │ └── vf-video-container.scss ├── vf-video-teaser │ ├── .npmignore │ ├── assets │ │ └── video-teaser.png │ └── index.scss ├── ebi-vf1-integration │ ├── .npmignore │ └── ebi-vf1-integration.variables.scss ├── embl-breadcrumbs-lookup │ ├── .npmignore │ ├── assets │ │ └── embl-breadcrumbs-lookup-ghost.svg │ ├── embl-breadcrumbs-lookup.njk │ └── index.scss ├── embl-conditional-edit │ ├── .npmignore │ └── index.scss ├── embl-content-hub-loader │ ├── .npmignore │ ├── embl-content-hub-loader.config.yml │ ├── embl-content-hub-loader.variables.scss │ ├── embl-content-hub-loader.njk │ └── index.scss ├── vf-analytics-google │ ├── .npmignore │ ├── vf-analytics-google.variables.scss │ └── index.scss ├── vf-componenet-rollup │ ├── .npmignore │ ├── vf-componenet-rollup.njk │ └── vf-componenet-rollup.config.yml ├── vf-form__checkbox │ ├── .npmignore │ └── index.scss ├── vf-location-nearest │ ├── .npmignore │ ├── CHANGELOG.md │ └── index.scss ├── vf-search-client-side │ ├── .npmignore │ ├── vf-search-client-side.variables.scss │ └── index.scss ├── embl-content-meta-properties │ ├── .npmignore │ ├── CHANGELOG.md │ ├── index.scss │ └── embl-content-meta-properties.scss ├── vf-article-meta-information │ ├── .npmignore │ ├── vf-article-meta-information.js │ └── index.scss ├── embl-favicon │ ├── assets │ │ ├── favicon.ico │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon-48x48.png │ │ ├── mstile-150x150.png │ │ ├── apple-touch-icon.png │ │ ├── android-chrome-144x144.png │ │ ├── browserconfig.xml │ │ └── site.webmanifest │ └── embl-favicon.config.yml ├── vf-chatbot-dialog │ ├── vf-chatbot-dialog.config.yml │ └── CHANGELOG.md ├── vf-chatbot-prompt │ ├── vf-chatbot-prompt.config.yml │ └── CHANGELOG.md ├── vf-chatbot-action-prompt │ ├── index.scss │ ├── vf-chatbot-action-prompt.variables.scss │ ├── vf-chatbot-action-prompt.config.yml │ └── CHANGELOG.md ├── vf-chatbot-fab │ ├── vf-chatbot-fab.config.yml │ └── CHANGELOG.md ├── vf-chatbot-sources │ ├── vf-chatbot-sources.config.yml │ └── vf-chatbot-sources.njk ├── vf-masthead │ ├── yarn.lock │ └── vf-masthead.js ├── vf-chatbot │ ├── vf-chatbot.njk │ └── assets │ │ └── vf-chatbot--icon-minimize.svg ├── vf-chatbot-modal │ └── CHANGELOG.md └── vf-chatbot-selector │ └── CHANGELOG.md ├── tools ├── vf-core │ ├── index.js │ ├── .npmignore │ └── docs │ │ └── getting-started │ │ └── index.njk ├── vf-component-library │ ├── index.js │ ├── src │ │ └── site │ │ │ ├── _includes │ │ │ ├── vf-core-components │ │ │ ├── images │ │ │ │ └── README.md │ │ │ ├── layouts │ │ │ │ ├── boilerplate.njk │ │ │ │ └── page.njk │ │ │ └── vf-core-components.readme.md │ │ │ ├── _data │ │ │ ├── elements.json │ │ │ ├── serverInfo.js │ │ │ ├── helpers.js │ │ │ ├── tokens │ │ │ │ ├── colors.js │ │ │ │ ├── spacing.js │ │ │ │ ├── theming.js │ │ │ │ ├── themeText.js │ │ │ │ ├── uiColors.js │ │ │ │ ├── breakpoints.js │ │ │ │ ├── themeBrand.js │ │ │ │ ├── typographySans.js │ │ │ │ ├── interactive.js │ │ │ │ ├── neutral_colours.js │ │ │ │ ├── themeButtons.js │ │ │ │ └── typographyMono.js │ │ │ ├── blocks.json │ │ │ ├── components │ │ │ │ └── button.js │ │ │ └── containers.json │ │ │ ├── images │ │ │ └── .stub │ │ │ ├── design-tokens │ │ │ ├── colours.njk │ │ │ ├── breakpoints.njk │ │ │ └── neutral-colors.njk │ │ │ ├── developing │ │ │ └── guidelines │ │ │ │ ├── user-base.njk │ │ │ │ ├── css.njk │ │ │ │ ├── javascript.njk │ │ │ │ ├── governance.njk │ │ │ │ └── versioning.njk │ │ │ ├── sitemap.njk │ │ │ └── demos │ │ │ └── index.njk │ └── .npmignore ├── vf-sass-compilation │ ├── index.js │ ├── .gitignore │ └── .npmignore ├── vf-component-initialization │ ├── index.js │ └── .npmignore ├── vf-extensions-react │ ├── vf-extensions-react.njk │ └── vf-extensions-react.config.yml ├── vf-extensions │ ├── renovate.json │ ├── index.js │ ├── .npmignore │ ├── filters │ │ ├── markdown.js │ │ └── path.js │ ├── utils │ │ └── minify-html.js │ └── fractal │ │ └── docs │ │ └── index.njk ├── vf-component-generator │ ├── templates │ │ └── _.npmignore │ └── .npmignore ├── vf-frctl-extensions │ ├── REAMDE.md │ ├── .npmignore │ └── CHANGELOG.md └── vf-config │ └── .npmignore ├── CHANGELOG.md ├── README └── intro_image.jpg ├── CONTRIBUTING.md ├── .npmignore ├── .percy.yml ├── lerna.json ├── .gitignore ├── .editorconfig └── renovate.json /.max-age: -------------------------------------------------------------------------------- 1 | 3600 2 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | npm 2 | -------------------------------------------------------------------------------- /components/vf-boilerplate-page/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tools/vf-core/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /components/vf-inlay/vf-inlay.js: -------------------------------------------------------------------------------- 1 | // vf-inlay 2 | -------------------------------------------------------------------------------- /components/vf-no-js/vf-no-js.js: -------------------------------------------------------------------------------- 1 | // vf-no-js 2 | -------------------------------------------------------------------------------- /components/vf-footer/vf-footer.js: -------------------------------------------------------------------------------- 1 | // vf-footer 2 | -------------------------------------------------------------------------------- /tools/vf-component-library/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /tools/vf-sass-compilation/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /tools/vf-component-initialization/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /components/_previews/_preview--fullhtml.njk: -------------------------------------------------------------------------------- 1 | {{ yield | safe }} 2 | -------------------------------------------------------------------------------- /components/vf-sass-config/mixins/_helpers.scss: -------------------------------------------------------------------------------- 1 | // Nothing, yet 2 | -------------------------------------------------------------------------------- /tools/vf-extensions-react/vf-extensions-react.njk: -------------------------------------------------------------------------------- 1 | {# No template #} -------------------------------------------------------------------------------- /components/vf-boilerplate-page/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | -------------------------------------------------------------------------------- /components/vf-sass-config/vf-sass-config.njk: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/vf-sass-starter/vf-sass-starter.njk: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/vf-badge/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-body/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-boilerplate-page/vf-boilerplate-page.js: -------------------------------------------------------------------------------- 1 | // vf-boilerplate-page 2 | -------------------------------------------------------------------------------- /components/vf-box/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-card/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-embed/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-flag/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-grid/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-hero/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-inlay/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-intro/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-lede/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-lede/vf-lede.njk: -------------------------------------------------------------------------------- 1 |

{{ vf_lede_text | safe }}

2 | -------------------------------------------------------------------------------- /components/vf-link/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-list/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-logo/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-no-js/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-stack/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-table/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-tabs/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-tags/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-text/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-tree/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-video/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/embl-grid/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/embl-logo/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-banner/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-blockquote/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-bookmark/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-button/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-cluster/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-collapse/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-content/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-deprecated/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-deprecated/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Initial stable release 4 | -------------------------------------------------------------------------------- /components/vf-details/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-discussion/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-divider/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-explainer/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-favicon/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-figure/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-footer/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__item/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-grid-page/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-header/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-heading/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-link-list/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-mega-menu/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-navigation/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-pagination/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-profile/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-progress-indicator/vf-progress-indicator.js: -------------------------------------------------------------------------------- 1 | // vf-progress-indicator 2 | -------------------------------------------------------------------------------- /components/vf-search/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-show-more/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-sidebar/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-summary/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/ebi-header-footer/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/embl-notifications/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-activity-group/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-activity-list/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-back-to-top/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-banner-elixir/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-breadcrumbs/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-card-container/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-code-example/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-design-tokens/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-dropdown/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__fieldset/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__helper/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__input/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__item/vf-form__item.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /components/vf-form__label/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__legend/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__radio/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__select/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-form__textarea/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-global-header/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-navigation/vf-navigation--additional.scss: -------------------------------------------------------------------------------- 1 | // this variant has been removed 2 | -------------------------------------------------------------------------------- /components/vf-news-container/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-page-header/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-polyfill-js/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-sass-config/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-sass-starter/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-section-header/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-smooth-scroll/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-social-links/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-summary-container/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Initial stable release 4 | -------------------------------------------------------------------------------- /components/vf-u-fullbleed/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-utility-classes/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-video-container/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-video-teaser/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_includes/vf-core-components: -------------------------------------------------------------------------------- 1 | ../../../../../components -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | See https://github.com/visual-framework/vf-core/releases 4 | -------------------------------------------------------------------------------- /components/ebi-vf1-integration/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | .css -------------------------------------------------------------------------------- /components/embl-breadcrumbs-lookup/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/embl-conditional-edit/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/embl-content-hub-loader/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-analytics-google/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-boilerplate-page/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-componenet-rollup/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/vf-font-plex-mono.njk: -------------------------------------------------------------------------------- 1 |
{{ text }}
-------------------------------------------------------------------------------- /components/vf-font-plex-sans/vf-font-plex-sans.njk: -------------------------------------------------------------------------------- 1 |
{{ text }}
-------------------------------------------------------------------------------- /components/vf-form__checkbox/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-location-nearest/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/_vf-no-wrap.scss: -------------------------------------------------------------------------------- 1 | .vf-no-wrap { 2 | white-space: nowrap; 3 | } 4 | -------------------------------------------------------------------------------- /components/vf-search-client-side/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-summary-container/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /tools/vf-extensions/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /components/embl-content-meta-properties/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-article-meta-information/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /components/vf-progress-indicator/.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /tools/vf-component-generator/templates/_.npmignore: -------------------------------------------------------------------------------- 1 | bin 2 | .github 3 | .travis.yml 4 | node_modules 5 | -------------------------------------------------------------------------------- /README/intro_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/README/intro_image.jpg -------------------------------------------------------------------------------- /components/vf-article-meta-information/vf-article-meta-information.js: -------------------------------------------------------------------------------- 1 | // vf-article-meta-information 2 | -------------------------------------------------------------------------------- /components/vf-tags/vf-tags.js: -------------------------------------------------------------------------------- 1 | // vf-tags 2 | 3 | // Don't need JS? Then feel free to delete this file. 4 | -------------------------------------------------------------------------------- /components/embl-content-meta-properties/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 (2019-12-17) 2 | 3 | * Initial stable release 4 | -------------------------------------------------------------------------------- /components/vf-collapse/vf-collapse.njk: -------------------------------------------------------------------------------- 1 |
2 | /* vf-collapse template file */ 3 |
4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # CONTRIBUTING 2 | 3 | See https://github.com/visual-framework/vf-core/tree/develop/docs/contributing 4 | -------------------------------------------------------------------------------- /components/vf-box/vf-box.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | $vf-box-outer-spacing: map-get($vf-spacing-map, vf-spacing--600) !default; 3 | -------------------------------------------------------------------------------- /components/vf-explainer/vf-explainer.njk: -------------------------------------------------------------------------------- 1 |
2 | /* vf-explainer template file */ 3 |
4 | -------------------------------------------------------------------------------- /tools/vf-frctl-extensions/REAMDE.md: -------------------------------------------------------------------------------- 1 | This folder has Nunjucks extensions useful when manipulating Fractal-specific data. 2 | -------------------------------------------------------------------------------- /components/vf-deprecated/vf-deprecated.njk: -------------------------------------------------------------------------------- 1 |
2 | {# vf-deprecated template file #} 3 |
4 | -------------------------------------------------------------------------------- /tools/vf-extensions/index.js: -------------------------------------------------------------------------------- 1 | // Do not do anything by default 2 | module.exports = function() { 3 | return true; 4 | }; 5 | -------------------------------------------------------------------------------- /components/ebi-header-footer/ebi-header-footer.njk: -------------------------------------------------------------------------------- 1 | There is no default. Use the variant templates to load the portions you need. 2 | -------------------------------------------------------------------------------- /components/embl-notifications/embl-notifications.njk: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/set-layer.scss: -------------------------------------------------------------------------------- 1 | @function set-layer($layer) { 2 | @return map-get($vf-zindex-map, $layer); 3 | } 4 | -------------------------------------------------------------------------------- /components/vf-favicon/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/favicon.ico -------------------------------------------------------------------------------- /components/vf-form__item/vf-form__item.config.yml: -------------------------------------------------------------------------------- 1 | title: Item 2 | label: Item 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | -------------------------------------------------------------------------------- /components/vf-navigation/vf-navigation.variables.scss: -------------------------------------------------------------------------------- 1 | // vf-breadcrumbs 2 | 3 | $vf-navigation__item-gap: calc(var(--page-grid-gap) / 2); 4 | -------------------------------------------------------------------------------- /components/vf-no-js/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.1 2 | 3 | * Classify as a utility component 4 | 5 | ### 1.0.0 6 | 7 | * Initial stable release 8 | -------------------------------------------------------------------------------- /components/vf-no-js/vf-no-js.config.yml: -------------------------------------------------------------------------------- 1 | title: No JS detection 2 | label: No JS 3 | status: live 4 | context: 5 | component-type: utility 6 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/_theme.scss: -------------------------------------------------------------------------------- 1 | @function theme($color-name) { 2 | @return map-get($vf-themes-map, $color-name); 3 | } 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/elements.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": "node_modules/@visual-framework/vf-button/vf-button.njk" 3 | } 4 | -------------------------------------------------------------------------------- /components/embl-favicon/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/favicon.ico -------------------------------------------------------------------------------- /components/vf-card/assets/vf-card-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-card/assets/vf-card-example.png -------------------------------------------------------------------------------- /components/vf-favicon/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/favicon-16x16.png -------------------------------------------------------------------------------- /components/vf-favicon/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/favicon-32x32.png -------------------------------------------------------------------------------- /components/vf-figure/assets/figure-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-figure/assets/figure-example.png -------------------------------------------------------------------------------- /components/vf-figure/assets/training-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-figure/assets/training-cover.png -------------------------------------------------------------------------------- /components/vf-form__select/vf-form__select.config.yml: -------------------------------------------------------------------------------- 1 | title: Select 2 | label: Select 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | -------------------------------------------------------------------------------- /components/vf-hero/vf-hero.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-hero.angular.component'; 2 | export * from './lib/vf-hero.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-tabs/vf-tabs.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-tabs.angular.component'; 2 | export * from './lib/vf-tabs.angular.module'; 3 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_includes/images/README.md: -------------------------------------------------------------------------------- 1 | Images placed here will be automatically processed and sent to the dist directory. 2 | -------------------------------------------------------------------------------- /components/embl-favicon/assets/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/favicon-16x16.png -------------------------------------------------------------------------------- /components/embl-favicon/assets/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/favicon-32x32.png -------------------------------------------------------------------------------- /components/embl-favicon/assets/favicon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/favicon-48x48.png -------------------------------------------------------------------------------- /components/embl-favicon/assets/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/mstile-150x150.png -------------------------------------------------------------------------------- /components/vf-badge/vf-badge.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-badge.angular.component'; 2 | export * from './lib/vf-badge.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-favicon/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /components/vf-favicon/assets/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/mstile-150x150.png -------------------------------------------------------------------------------- /components/embl-favicon/assets/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/apple-touch-icon.png -------------------------------------------------------------------------------- /components/embl-favicon/embl-favicon.config.yml: -------------------------------------------------------------------------------- 1 | title: EMBL Favicon 2 | label: EMBL Favicon 3 | status: live 4 | context: 5 | component-type: embl-element 6 | -------------------------------------------------------------------------------- /components/vf-banner/vf-banner.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-banner.angular.component'; 2 | export * from './lib/vf-banner.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-body/vf-body.config.yml: -------------------------------------------------------------------------------- 1 | title: Body 2 | label: Body 3 | preview: '@preview--nogrid' 4 | status: live 5 | context: 6 | component-type: layout 7 | -------------------------------------------------------------------------------- /components/vf-button/vf-button.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-button.angular.component'; 2 | export * from './lib/vf-button.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-sass-starter/vf-sass-starter.config.yml: -------------------------------------------------------------------------------- 1 | title: Sass Starter 2 | label: Sass Starter 3 | status: live 4 | context: 5 | component-type: utility 6 | -------------------------------------------------------------------------------- /components/vf-video-teaser/assets/video-teaser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-video-teaser/assets/video-teaser.png -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/images/.stub: -------------------------------------------------------------------------------- 1 | // Add any images to be used here 2 | // and use them like 3 | // src="{{ '/images/test-image.png' | url }}" 4 | -------------------------------------------------------------------------------- /components/vf-code-example/vf-code-example.config.yml: -------------------------------------------------------------------------------- 1 | title: Code Example 2 | label: Code Example 3 | status: live 4 | 5 | context: 6 | component-type: block 7 | -------------------------------------------------------------------------------- /components/vf-content/vf-content.config.yml: -------------------------------------------------------------------------------- 1 | title: Content 2 | label: Content 3 | status: live 4 | preview: '@preview' 5 | context: 6 | component-type: container 7 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.1 2 | 3 | * Removes .no-js from the screen-reader utility 4 | 5 | ### 1.0.0 6 | 7 | * Initial stable release 8 | -------------------------------------------------------------------------------- /components/vf-favicon/assets/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-favicon/assets/android-chrome-192x192.png -------------------------------------------------------------------------------- /components/vf-summary/assets/vf-summary--profile-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-summary/assets/vf-summary--profile-img.png -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/serverInfo.js: -------------------------------------------------------------------------------- 1 | // https://www.11ty.io/docs/data-js/ 2 | module.exports = { 3 | environment: process.env.ELEVENTY_ENV 4 | }; 5 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_includes/layouts/boilerplate.njk: -------------------------------------------------------------------------------- 1 | {# A completely un-templated template for use by boilerplate patterns #} 2 | {{- content | safe -}} 3 | -------------------------------------------------------------------------------- /components/embl-favicon/assets/android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/embl-favicon/assets/android-chrome-144x144.png -------------------------------------------------------------------------------- /components/vf-blockquote/vf-blockquote.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-blockquote.angular.component'; 2 | export * from './lib/vf-blockquote.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-summary/assets/vf-summary--news-has-image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-summary/assets/vf-summary--news-has-image.jpg -------------------------------------------------------------------------------- /components/vf-back-to-top/vf-back-to-top.angular/public-api.d.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/vf-back-to-top.angular.component'; 2 | export * from './lib/vf-back-to-top.angular.module'; 3 | -------------------------------------------------------------------------------- /components/vf-badge/vf-badge.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-componenet-rollup/vf-componenet-rollup.njk: -------------------------------------------------------------------------------- 1 | 3 | -------------------------------------------------------------------------------- /components/vf-hero/vf-hero.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-polyfill-js/vf-polyfill-js.njk: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/vf-tabs/vf-tabs.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-banner/vf-banner.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-button/vf-button.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/_set-spacing.scss: -------------------------------------------------------------------------------- 1 | @function space($spacing-value) { 2 | $value: "vf-spacing--" + $spacing-value; 3 | @return map-get($vf-spacing-map, $value); 4 | } 5 | -------------------------------------------------------------------------------- /components/vf-blockquote/vf-blockquote.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-boilerplate-page/vf-boilerplate-page.config.yml: -------------------------------------------------------------------------------- 1 | title: VF Boilerplate page 2 | label: VF Boilerplate 3 | preview: '@preview--fullhtml' 4 | context: 5 | component-type: boilerplate 6 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | components 2 | bin 3 | .github 4 | .travis.yml 5 | CHANGELOG.md 6 | CONTRIBUTING.md 7 | public 8 | build 9 | .max-age 10 | .gitlab-ci.yml 11 | temp 12 | backstop_data 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /components/embl-content-hub-loader/embl-content-hub-loader.config.yml: -------------------------------------------------------------------------------- 1 | title: EMBL ContentHub Loader component 2 | label: EMBL ContentHub Loader 3 | status: live 4 | context: 5 | component-type: utility 6 | -------------------------------------------------------------------------------- /components/vf-back-to-top/vf-back-to-top.angular/index.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generated bundle index. Do not edit. 3 | */ 4 | /// 5 | export * from './public-api'; 6 | -------------------------------------------------------------------------------- /components/vf-inlay/vf-inlay.config.yml: -------------------------------------------------------------------------------- 1 | title: Inlay 2 | label: Inlay (Deprecated) 3 | status: deprecated 4 | preview: '@preview--nogrid' 5 | hidden: true 6 | context: 7 | component-type: deprecated 8 | -------------------------------------------------------------------------------- /components/vf-video/vf-video.config.yml: -------------------------------------------------------------------------------- 1 | title: Video 2 | label: Video 3 | status: live 4 | 5 | context: 6 | component-type: block 7 | 8 | video_href: https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0 9 | -------------------------------------------------------------------------------- /components/vf-video/vf-video.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | -------------------------------------------------------------------------------- /.husky/_/husky.sh: -------------------------------------------------------------------------------- 1 | echo "husky - DEPRECATED 2 | 3 | Please remove the following two lines from $0: 4 | 5 | #!/usr/bin/env sh 6 | . \"\$(dirname -- \"\$0\")/_/husky.sh\" 7 | 8 | They WILL FAIL in v10.0.0 9 | " -------------------------------------------------------------------------------- /.husky/common.sh: -------------------------------------------------------------------------------- 1 | command_exists () { 2 | command -v "$1" >/dev/null 2>&1 3 | } 4 | 5 | # Windows 10, Git Bash and Yarn workaround 6 | if command_exists winpty && test -t 1; then 7 | exec < /dev/tty 8 | fi 9 | -------------------------------------------------------------------------------- /components/vf-chatbot-dialog/vf-chatbot-dialog.config.yml: -------------------------------------------------------------------------------- 1 | title: Chatbot Dialog 2 | label: Chatbot Dialog 3 | status: beta 4 | preview: '@preview' 5 | hidden: true 6 | context: 7 | component-type: element 8 | -------------------------------------------------------------------------------- /components/vf-chatbot-prompt/vf-chatbot-prompt.config.yml: -------------------------------------------------------------------------------- 1 | title: Chatbot Prompt 2 | label: Chatbot Prompt 3 | status: beta 4 | preview: '@preview' 5 | hidden: true 6 | context: 7 | component-type: element 8 | -------------------------------------------------------------------------------- /components/vf-componenet-rollup/vf-componenet-rollup.config.yml: -------------------------------------------------------------------------------- 1 | title: Component Rollup 2 | label: Component Rollup 3 | preview: '@preview--elements' 4 | status: live 5 | context: 6 | component-type: utility 7 | -------------------------------------------------------------------------------- /components/vf-grid-page/vf-grid-page.config.yml: -------------------------------------------------------------------------------- 1 | title: Page Grid 2 | label: Page Grid 3 | preview: '@preview--nogrid' 4 | status: deprecated 5 | context: 6 | component-type: deprecated 7 | hidden: true 8 | -------------------------------------------------------------------------------- /components/vf-header/vf-header.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | {% render '@vf-global-header' %} 4 | 5 | {% render '@vf-masthead' %} 6 | {% render '@vf-navigation--main' %} 7 | 8 |
9 | -------------------------------------------------------------------------------- /components/vf-polyfill-js/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Updated polyfill URL - [Tracking issue](https://github.com/visual-framework/vf-wp/issues/1399) 4 | 5 | ### 1.0.0-alpha.1 6 | 7 | * Initial release 8 | -------------------------------------------------------------------------------- /components/vf-chatbot-action-prompt/index.scss: -------------------------------------------------------------------------------- 1 | // vf-chatbot-action-prompt 2 | 3 | @import 'package.variables.scss'; 4 | @import 'vf-chatbot-action-prompt.variables.scss'; 5 | @import 'vf-chatbot-action-prompt.scss'; -------------------------------------------------------------------------------- /components/vf-chatbot-fab/vf-chatbot-fab.config.yml: -------------------------------------------------------------------------------- 1 | title: Chatbot Floating Action Button 2 | label: Chatbot FAB 3 | status: beta 4 | preview: '@preview' 5 | hidden: true 6 | context: 7 | component-type: element 8 | -------------------------------------------------------------------------------- /components/vf-chatbot-sources/vf-chatbot-sources.config.yml: -------------------------------------------------------------------------------- 1 | title: Chatbot Sources 2 | label: Chatbot Sources 3 | status: beta 4 | preview: '@preview' 5 | hidden: true 6 | context: 7 | component-type: element 8 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/vf-functions.scss: -------------------------------------------------------------------------------- 1 | @import 'map-deep-get'; 2 | @import 'string-replace'; 3 | @import 'set-color'; 4 | @import 'set-spacing'; 5 | @import 'set-layer'; 6 | @import 'theme'; 7 | 8 | -------------------------------------------------------------------------------- /.percy.yml: -------------------------------------------------------------------------------- 1 | version: 1 2 | snapshot: 3 | # widths: [375, 800, 1330] 4 | widths: [375, 1330] 5 | static-snapshots: 6 | base-url: 7 | snapshot-files: '**/*.html' 8 | ignore-files: '**/embl-boilerplate-page/*.html' 9 | -------------------------------------------------------------------------------- /components/vf-grid/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-variables'; 4 | @import 'vf-functions'; 5 | @import 'vf-mixins'; 6 | 7 | // component specific styles 8 | 9 | @import 'vf-grid.scss'; 10 | -------------------------------------------------------------------------------- /components/vf-header/vf-header.config.yml: -------------------------------------------------------------------------------- 1 | title: Header 2 | label: Header 3 | status: deprecated 4 | component-type: deprecated 5 | hidden: true 6 | preview: '@preview--nogrid' 7 | context: 8 | component-type: container 9 | -------------------------------------------------------------------------------- /components/vf-page-header/vf-page-header.njk: -------------------------------------------------------------------------------- 1 |
2 |

{{ heading }}

3 | {{ subheading }} 4 |
5 | -------------------------------------------------------------------------------- /components/vf-body/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-variables'; 4 | @import 'vf-functions'; 5 | @import 'vf-mixins'; 6 | 7 | // component specific styles 8 | 9 | @import 'vf-grid-page.scss'; 10 | -------------------------------------------------------------------------------- /components/vf-video-container/vf-video-container.config.yml: -------------------------------------------------------------------------------- 1 | title: Video Container 2 | label: Video Container 3 | status: live 4 | 5 | preview: '@preview' 6 | context: 7 | component-type: container 8 | section-title: Video 9 | -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input--disabled.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /components/vf-grid-page/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-variables'; 4 | @import 'vf-functions'; 5 | @import 'vf-mixins'; 6 | 7 | // component specific styles 8 | 9 | @import 'vf-grid-page.scss'; 10 | -------------------------------------------------------------------------------- /components/vf-no-js/vf-no-js.njk: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | getTokenFile(text) { 5 | 6 | return "components." + path.basename(__filename) + ".properties"; 7 | } 8 | }; 9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/colors.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-colors.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/spacing.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-spacing.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/theming.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-themes.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-extensions-react/vf-extensions-react.config.yml: -------------------------------------------------------------------------------- 1 | title: "Extensions: React" 2 | label: "Extensions: React" 3 | status: live 4 | context: 5 | component-type: utility 6 | variants: 7 | - name: default 8 | hidden: false 9 | -------------------------------------------------------------------------------- /components/vf-chatbot-dialog/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.1 4 | 5 | * Added : Initial version for modal chatbot variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Bold.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Text.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Text.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Thin.woff -------------------------------------------------------------------------------- /components/vf-footer/vf-footer.config.yml: -------------------------------------------------------------------------------- 1 | title: Footer 2 | label: Footer 3 | preview: '@preview--nogrid' 4 | status: live 5 | context: 6 | exampleMultiColumns: "false" 7 | component-type: block 8 | footer__url: 'JavaScript:Void(0);' 9 | -------------------------------------------------------------------------------- /components/vf-news-container/vf-news-container.config.yml: -------------------------------------------------------------------------------- 1 | title: News Container 2 | label: News Container 3 | status: live 4 | 5 | preview: '@preview' 6 | context: 7 | component-type: container 8 | section-title: Latest Press Releases 9 | -------------------------------------------------------------------------------- /components/vf-page-header/vf-page-header.config.yml: -------------------------------------------------------------------------------- 1 | title: Page Header 2 | label: Page Header 3 | status: live 4 | 5 | context: 6 | component-type: block 7 | 8 | heading: Strategy & Communications 9 | subheading: Blog 10 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/themeText.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-color__text.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/uiColors.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-ui-colors.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-config/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bin 3 | .github 4 | .travis.yml 5 | CHANGELOG.md 6 | CONTRIBUTING.md 7 | public 8 | build 9 | .max-age 10 | .gitlab-ci.yml 11 | temp 12 | backstop_data 13 | yarn.lock 14 | node_modules 15 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/assets/IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-mono/assets/IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Regular.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Italic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Italic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Light.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Medium.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Bold.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Light.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Text.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Text.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Thin.woff2 -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/breakpoints.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-breakpoints.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/themeBrand.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-color__brand.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/typographySans.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-font--sans.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/assets/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-mono/assets/IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Italic.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Medium.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-Regular.woff2 -------------------------------------------------------------------------------- /components/vf-sass-utilities/_vf-et-al.scss: -------------------------------------------------------------------------------- 1 | .vf-et-al { 2 | position: relative; 3 | 4 | &::after { 5 | color: inherit; 6 | content: 'et al.'; 7 | font: inherit; 8 | position: relative; 9 | right: 0; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/vf-u-fullbleed/vf-u-fullbleed.config.yml: -------------------------------------------------------------------------------- 1 | title: Full Bleed 2 | label: Full Bleed 3 | status: live 4 | context: 5 | component-type: utility 6 | 7 | variants: 8 | - name: default 9 | title: Example 10 | hidden: false 11 | -------------------------------------------------------------------------------- /components/vf-video-container/vf-video-container.njk: -------------------------------------------------------------------------------- 1 |
2 | {% render '@vf-section-header'%} 3 | {% render '@vf-video' %} 4 | {% render '@vf-video-teaser'%} 5 |
6 | -------------------------------------------------------------------------------- /tools/vf-component-generator/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bin 3 | .github 4 | .travis.yml 5 | CHANGELOG.md 6 | CONTRIBUTING.md 7 | public 8 | build 9 | .max-age 10 | .gitlab-ci.yml 11 | temp 12 | backstop_data 13 | yarn.lock 14 | node_modules 15 | -------------------------------------------------------------------------------- /tools/vf-component-library/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bin 3 | .github 4 | .travis.yml 5 | CHANGELOG.md 6 | CONTRIBUTING.md 7 | public 8 | build 9 | .max-age 10 | .gitlab-ci.yml 11 | temp 12 | backstop_data 13 | yarn.lock 14 | node_modules 15 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/interactive.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-color__interactive.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/neutral_colours.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-color__neutral.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/themeButtons.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-color__buttons.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/tokens/typographyMono.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const pkg = require(path.join(process.cwd(), "../../components/vf-design-tokens/dist/json/vf-font--monospace.ios.json")); 3 | module.exports = pkg; 4 | -------------------------------------------------------------------------------- /tools/vf-core/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | components 3 | bin 4 | .github 5 | .travis.yml 6 | CHANGELOG.md 7 | CONTRIBUTING.md 8 | public 9 | build 10 | .max-age 11 | .gitlab-ci.yml 12 | temp 13 | backstop_data 14 | yarn.lock 15 | node_modules 16 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-BoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-BoldItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLight.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLight.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-LightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-LightItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-MediumItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-MediumItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-TextItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-TextItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ThinItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ThinItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-BoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-BoldItalic.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ExtraLight.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ExtraLight.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-SemiBold.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-TextItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-TextItalic.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ThinItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ThinItalic.woff2 -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /tools/vf-component-initialization/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bin 3 | .github 4 | .travis.yml 5 | CHANGELOG.md 6 | CONTRIBUTING.md 7 | public 8 | build 9 | .max-age 10 | .gitlab-ci.yml 11 | temp 12 | backstop_data 13 | yarn.lock 14 | node_modules 15 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBoldItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-LightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-LightItalic.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-MediumItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-MediumItalic.woff2 -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input--search.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmClient": "yarn", 3 | "packages": [ 4 | "components/**/**", 5 | "tools/*" 6 | ], 7 | "command": { 8 | "version": { 9 | "allowBranch": "develop" 10 | } 11 | }, 12 | "version": "independent" 13 | } 14 | -------------------------------------------------------------------------------- /tools/vf-extensions/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | components 3 | bin 4 | .github 5 | .travis.yml 6 | CHANGELOG.md 7 | CONTRIBUTING.md 8 | public 9 | build 10 | .max-age 11 | .gitlab-ci.yml 12 | temp 13 | backstop_data 14 | yarn.lock 15 | node_modules 16 | -------------------------------------------------------------------------------- /tools/vf-sass-compilation/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | # We commit `dist` 3 | # So we don't have to npm install and gulp for ci to get 1 css file. 4 | # Depending if we stick with this or use 11ty as a component/pattern library, we'll need revisit. 5 | #dist 6 | -------------------------------------------------------------------------------- /components/embl-grid/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // component specific styles 9 | 10 | @import 'embl-grid.scss'; 11 | -------------------------------------------------------------------------------- /components/vf-explainer/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 0.0.3 2 | 3 | * Deprecated `vf-explainer` component. `vf-details` component needs to be used instead. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1920) 4 | 5 | ### 0.0.2 6 | 7 | * initial version 8 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLightItalic.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-ExtraLightItalic.woff -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-SemiBoldItalic.woff2 -------------------------------------------------------------------------------- /components/vf-pagination/vf-pagination--full.scss: -------------------------------------------------------------------------------- 1 | html:not(.vf-disable-deprecated) { 2 | .vf-pagination__item--pages-per { 3 | @warn 'The variant of vf-pagination has been deprecated'; 4 | &:hover { 5 | background: unset; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /tools/vf-frctl-extensions/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | components 3 | bin 4 | .github 5 | .travis.yml 6 | CHANGELOG.md 7 | CONTRIBUTING.md 8 | public 9 | build 10 | .max-age 11 | .gitlab-ci.yml 12 | temp 13 | backstop_data 14 | yarn.lock 15 | node_modules 16 | -------------------------------------------------------------------------------- /tools/vf-sass-compilation/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | components 3 | bin 4 | .github 5 | .travis.yml 6 | CHANGELOG.md 7 | CONTRIBUTING.md 8 | public 9 | build 10 | .max-age 11 | .gitlab-ci.yml 12 | temp 13 | backstop_data 14 | yarn.lock 15 | node_modules 16 | -------------------------------------------------------------------------------- /components/embl-breadcrumbs-lookup/assets/embl-breadcrumbs-lookup-ghost.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/embl-logo/embl-logo.njk: -------------------------------------------------------------------------------- 1 | 2 | {{ logo_text}} 3 | 4 | {% if deprecated_text %}{% endif %} 5 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/vf-font-plex-mono.config.yml: -------------------------------------------------------------------------------- 1 | title: Plex Mono Font 2 | label: Plex Mono Font 3 | status: live 4 | context: 5 | component-type: utility 6 | variants: 7 | - name: default 8 | context: 9 | text: I'm vf-font-plex-mono. 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ExtraLightItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/visual-framework/vf-core/HEAD/components/vf-font-plex-sans/assets/IBM-Plex-Sans/fonts/complete/woff2/IBMPlexSans-ExtraLightItalic.woff2 -------------------------------------------------------------------------------- /components/vf-font-plex-sans/vf-font-plex-sans.config.yml: -------------------------------------------------------------------------------- 1 | title: Plex Sans Font 2 | label: Plex Sans Font 3 | status: live 4 | context: 5 | component-type: utility 6 | variants: 7 | - name: default 8 | context: 9 | text: I'm vf-font-plex-sans. 10 | -------------------------------------------------------------------------------- /components/vf-lede/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.2 2 | 3 | * Changes for build errors [Tracking issue](https://github.com/visual-framework/vf-core/issues/2052) 4 | 5 | ### 1.0.1 6 | 7 | * Fixes typo in Yaml 8 | 9 | ### 1.0.0 10 | 11 | * Initial stable release 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | *.css.map 3 | node_modules/ 4 | *.log 5 | .DS_Store 6 | build 7 | public 8 | components/**/*.css 9 | *.tgz 10 | backstop_data/html_report/ 11 | bitmaps_test/ 12 | temp 13 | package.variables.scss 14 | *.precompiled.js 15 | *.code-workspace -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_includes/layouts/page.njk: -------------------------------------------------------------------------------- 1 | --- 2 | layout: layouts/base.njk 3 | pageClass: page 4 | templateEngineOverride: njk 5 | --- 6 | 7 |
8 |
9 | {{ content | safe }} 10 |
11 |
12 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/design-tokens/colours.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Brand colours 3 | date: 2021-06-22 12:24:50 4 | templateEngineOverride: njk, md 5 | layout: layouts/post.njk 6 | --- 7 | 8 | This has been moved, [see the theme colours](/design-tokens/theming/). 9 | -------------------------------------------------------------------------------- /components/vf-design-tokens/src/typographic-scales/vf-font--monospace.yml: -------------------------------------------------------------------------------- 1 | props: 2 | 3 | - name: text-body--1 4 | value: 5 | fontSize: 14px 6 | fontWeight: 400 7 | lineHeight: 1.57 8 | 9 | global: 10 | type: monospace 11 | category: fonts 12 | -------------------------------------------------------------------------------- /components/vf-form__helper/vf-form__helper.njk: -------------------------------------------------------------------------------- 1 | {% if context %} 2 | {% set helper_text = context.helper_text %} 3 | {% set error = context.error %} 4 | {% endif %} 5 | 6 |

{{ helper_text }}

7 | -------------------------------------------------------------------------------- /components/vf-sass-config/mixins/_vf-utility-mixins.scss: -------------------------------------------------------------------------------- 1 | // Rollup of all utility mixins. 2 | 3 | @import '_utility--color.scss'; 4 | @import '_utility--slide.scss'; 5 | @import '_utility--spacing.scss'; 6 | @import '_utility--grid-gap.scss'; 7 | @import '_utility--typography.scss'; 8 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/design-tokens/breakpoints.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Breakpoints 3 | date: 2018-10-19 12:24:50 4 | templateEngineOverride: md 5 | layout: layouts/base.njk 6 | --- 7 | 8 | This has been moved, [see the spacing and sizing tokens](/design-tokens/spacing/). 9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/design-tokens/neutral-colors.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Neutral colours 3 | date: 2021-06-22 12:24:50 4 | templateEngineOverride: njk, md 5 | layout: layouts/post.njk 6 | --- 7 | 8 | This has been moved, [see the theme colours](/design-tokens/theming/). 9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/developing/guidelines/user-base.njk: -------------------------------------------------------------------------------- 1 | --- 2 | is_index: true 3 | title: User base and needs 4 | date: 2019-04-09 12:24:50 5 | layout: layouts/post.njk 6 | order: 10 7 | --- 8 | 9 | [This page has moved]({{ '/guidance/user-base' | url }}) 10 | -------------------------------------------------------------------------------- /components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.njk: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/vf-form/vf-form.config.yml: -------------------------------------------------------------------------------- 1 | title: Form 2 | label: Form 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | 8 | variants: 9 | - name: default 10 | context: 11 | form_action: "#" 12 | form_method: get 13 | form_button_text: Submit 14 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/map-deep-get.scss: -------------------------------------------------------------------------------- 1 | // functions to get relevant font informtation from sass maps --- --- --- --- 2 | 3 | @function map-deep-get($map, $keys...) { 4 | @each $key in $keys { 5 | $map: map-get($map, $key); 6 | } 7 | @return $map; 8 | } 9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/developing/guidelines/css.njk: -------------------------------------------------------------------------------- 1 | --- 2 | is_index: true 3 | title: Sass and CSS guidelines 4 | date: 2019-04-09 12:24:50 5 | layout: layouts/post.njk 6 | order: 10 7 | --- 8 | 9 | [This page has moved]({{ '/guidance/css-and-sass' | url }}) 10 | 11 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/developing/guidelines/javascript.njk: -------------------------------------------------------------------------------- 1 | --- 2 | is_index: true 3 | title: JavaScript guidelines 4 | date: 2019-04-09 12:24:50 5 | layout: layouts/post.njk 6 | order: 10 7 | --- 8 | 9 | 10 | [This page has moved]({{ '/guidance/javascript' | url }}) 11 | -------------------------------------------------------------------------------- /tools/vf-core/docs/getting-started/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Getting started 3 | label: none 4 | context: 5 | lede: None yet 6 | intro: If you're new to the Visual Framework, here are some links to look at first. 7 | order: 100 8 | isIndex: true 9 | --- 10 | 11 | 12 | -------------------------------------------------------------------------------- /components/vf-chatbot-action-prompt/vf-chatbot-action-prompt.variables.scss: -------------------------------------------------------------------------------- 1 | // vf-chatbot-action-prompt variables 2 | 3 | // Override variables above this line 4 | // -- 5 | 6 | // -- 7 | // Default component variables 8 | // -- 9 | 10 | // -- 11 | // Custom component variables 12 | // -- -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input--filter.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | -------------------------------------------------------------------------------- /components/vf-badge/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-badge.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-link/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-link.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-list/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-list.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-logo/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-logo.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-tabs/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-tabs.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-text/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-text.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-video/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-video.scss'; 12 | -------------------------------------------------------------------------------- /components/embl-logo/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'embl-logo.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-layout.variables.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-layout.yml 5 | 6 | $vf-layout--comfortable: 80em; 7 | $vf-layout--cozy: 75em; 8 | $vf-layout--compact: 62.5em; 9 | -------------------------------------------------------------------------------- /components/vf-divider/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-divider.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-figure/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-figure.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-footer/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-footer.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-heading/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-heading.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-no-js/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | // @import 'vf-no-js.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-sass-config/index.scss: -------------------------------------------------------------------------------- 1 | @import 'variables/vf-variables.scss'; 2 | @import 'variables/vf-global-variables.scss'; 3 | @import 'functions/vf-functions.scss'; 4 | @import 'mixins/vf-mixins.scss'; 5 | @import 'mixins/vf-utility-mixins.scss'; 6 | @import 'variables/vf-global-custom-properties.scss'; 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "EditorConfig.EditorConfig", 4 | "HookyQR.beautify", 5 | "streetsidesoftware.code-spell-checker", 6 | "dbaeumer.vscode-eslint", 7 | "ronnidc.nunjucks", 8 | "ecmel.vscode-html-css" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /components/vf-blockquote/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-blockquote.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/assets/scss/ibm-plex.scss: -------------------------------------------------------------------------------- 1 | 2 | $vf-font-plex-mono-prefix: '..' !default; 3 | 4 | @import 'mono/index'; 5 | // @import 'sans/index'; 6 | // @import 'sans-condensed/index'; 7 | // @import 'sans-hebrew/index'; 8 | // @import 'sans-thai/index'; 9 | // @import 'serif/index'; 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/ibm-plex.scss: -------------------------------------------------------------------------------- 1 | 2 | $vf-font-plex-sans-prefix: '..' !default; 3 | 4 | // @import 'mono/index'; 5 | @import 'sans/index'; 6 | // @import 'sans-condensed/index'; 7 | // @import 'sans-hebrew/index'; 8 | // @import 'sans-thai/index'; 9 | // @import 'serif/index'; 10 | -------------------------------------------------------------------------------- /components/vf-form__item/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__item.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-chatbot-action-prompt/vf-chatbot-action-prompt.config.yml: -------------------------------------------------------------------------------- 1 | title: Chatbot Action Prompt 2 | label: Chatbot Action Prompt 3 | status: beta 4 | preview: '@preview' 5 | hidden: true 6 | context: 7 | component-type: element 8 | action_text: "Contact Us" 9 | action_url: "JavaScript:Void(0);" 10 | -------------------------------------------------------------------------------- /components/vf-code-example/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-code-example.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__helper/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__helper.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__input/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__input.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__label/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__label.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__radio/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__radio.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-smooth-scroll/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170). 4 | 5 | ### 1.0.0-alpha.2 6 | 7 | * Updated documentation 8 | 9 | ### 1.0.0-alpha.1 10 | 11 | * Introduce CSS-based smooth scroll component. 12 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_includes/vf-core-components.readme.md: -------------------------------------------------------------------------------- 1 | # Why is there a vf-core-components symlink? 2 | 3 | This 11ty project is a bit unusual in how we don't npm install vf components, rather they're already present, so we need to the symlink to make them available to the 11ty templating system. 4 | -------------------------------------------------------------------------------- /.husky/pre-push: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | . "$(dirname "$0")/common.sh" 4 | 5 | echo "[Husky Prepush]" 6 | # Pre-push disabled until errors resolved 7 | # https://github.com/visual-framework/vf-core/pull/1373#issuecomment-789915125 8 | # cd tools/vf-core 9 | # yarn run gulp vf-prepush-test 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-font-plex-mono.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-font-plex-sans.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__textarea/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__textarea.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-form__textarea/vf-form__textarea.config.yml: -------------------------------------------------------------------------------- 1 | title: Textarea 2 | label: Textarea 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | text_area_rows: 5 8 | text_area_name: text-area 9 | text_label: 10 | form__label: Write Some More details 11 | form__label_for: text-area 12 | -------------------------------------------------------------------------------- /components/vf-grid/vf-grid--auto.njk: -------------------------------------------------------------------------------- 1 |
2 | {% render '@vf-box--normal-primary' %} 3 | {% render '@vf-box--normal-primary' %} 4 | {% render '@vf-box--normal-primary' %} 5 | {% render '@vf-box--normal-primary' %} 6 |
7 | -------------------------------------------------------------------------------- /components/vf-grid/vf-grid--col-2.njk: -------------------------------------------------------------------------------- 1 |
2 | {% render '@vf-box--normal-primary' %} 3 | {% render '@vf-box--normal-primary' %} 4 | {% render '@vf-box--normal-primary' %} 5 | {% render '@vf-box--normal-primary' %} 6 |
7 | -------------------------------------------------------------------------------- /components/vf-hero/vf-hero.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-hero Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-lede/vf-lede.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-lede Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-utility-classes/vf-u-screen-reader.scss: -------------------------------------------------------------------------------- 1 | // Some things should only be show to screen readers 2 | .vf-u-sr-only { 3 | border: 0; 4 | clip: rect(0, 0, 0, 0); 5 | height: 1px; 6 | overflow: hidden; 7 | padding: 0; 8 | position: absolute; 9 | white-space: nowrap; 10 | width: 1px; 11 | } 12 | -------------------------------------------------------------------------------- /components/vf-global-header/vf-global-header.njk: -------------------------------------------------------------------------------- 1 | {% if context %} 2 | {% set global_logo = context.global_logo %} 3 | {% endif %} 4 | 5 | 6 |
7 | 8 | {% render '@vf-logo', { 'context': global_logo } %} 9 | 10 | {% render '@vf-navigation--global' %} 11 | 12 |
13 | -------------------------------------------------------------------------------- /components/vf-masthead/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-grid@^0.0.37": 6 | version "0.0.37" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-grid/-/vf-grid-0.0.37.tgz#672edf335aa597513683d94b10c62aebdd23b7af" 8 | -------------------------------------------------------------------------------- /components/vf-search/vf-search.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-search Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-table/vf-table.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-table Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/developing/guidelines/governance.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Governance of the Visual Framework 3 | date: 2019-04-09 12:24:50 4 | layout: layouts/section.njk 5 | templateEngineOverride: njk, md 6 | --- 7 | 8 | [This has been superseded by the consultation process]({{ '/about/consultation/' | url }}). 9 | -------------------------------------------------------------------------------- /components/embl-breadcrumbs-lookup/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'embl-breadcrumbs-lookup.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-collapse/vf-collapse.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-collapse Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-dropdown/vf-dropdown.jsx: -------------------------------------------------------------------------------- 1 | // vf-dropdown for React 2 | // See vf-extensions-react for usage guidance 3 | 4 | import React, { useEffect, useState } from "react"; 5 | import "./vf-dropdown.scss"; 6 | 7 | export function VFDropdown({}) { 8 | return
To Be Implemented
; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-favicon/assets/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #00aba9 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/vf-navigation/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-list@^0.0.36": 6 | version "0.0.36" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-list/-/vf-list-0.0.36.tgz#d760583d886b80e3dace309d8e46a41506927202" 8 | -------------------------------------------------------------------------------- /components/vf-sidebar/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170). 4 | 5 | ### 1.0.0-alpha.2 6 | 7 | * updates examples to use image. 8 | 9 | ### 1.0.0-alpha.1 10 | 11 | * adds initial implementation of a two item sidebar layout. 12 | -------------------------------------------------------------------------------- /components/embl-favicon/assets/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #ffffff 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/vf-body/vf-body.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 |

This is for example purposes only. Please use the vf-body class on the body element only.

4 |
5 |
6 | -------------------------------------------------------------------------------- /components/vf-box/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-box.variables.scss'; 12 | @import 'vf-box.scss'; 13 | -------------------------------------------------------------------------------- /components/vf-button/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | @import 'vf-utility-mixins'; 9 | 10 | // component specific styles 11 | 12 | @import 'vf-button.scss'; 13 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/maps/vf-color__brand.map.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__brand.yml 5 | 6 | $vf-color__brand-map: ( 7 | 'vf-color__brand': (#18974c), 8 | 'vf-color__brand--dark': (#0a5032), 9 | ); 10 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-border-radius.variables.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-border-radius.yml 5 | 6 | $vf-radius--xs: 4px; 7 | $vf-radius--sm: 8px; 8 | $vf-radius--md: 16px; 9 | $vf-radius--pill: 500px; 10 | -------------------------------------------------------------------------------- /components/vf-explainer/vf-explainer.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-explainer Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-link-list/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-heading@^0.0.36": 6 | version "0.0.36" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-heading/-/vf-heading-0.0.36.tgz#8edff885062437cb344cf624eee1f4b8ef8f4da5" 8 | -------------------------------------------------------------------------------- /components/vf-tags/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170). 4 | 5 | ### 1.0.0-alpha.1 6 | 7 | * Creates a prototype MVP vf-tags component that can be easily improved in the future. 8 | * https://github.com/visual-framework/vf-core/issues/875 9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/blocks.json: -------------------------------------------------------------------------------- 1 | { 2 | "section_header": "vf-core-components/vf-section-header/vf-section-header.njk", 3 | "links_list": "vf-core-components/vf-link-list/vf-link-list.njk", 4 | "box": "vf-core-components/vf-box/vf-box.njk", 5 | "badge": "vf-core-components/vf-badge/vf-badge.njk" 6 | } 7 | -------------------------------------------------------------------------------- /components/embl-content-meta-properties/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'embl-content-meta-properties.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-article-meta-information/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-article-meta-information.scss'; 12 | -------------------------------------------------------------------------------- /components/vf-deprecated/vf-deprecated.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-deprecated Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-discussion/vf-discussion.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-discussion Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-page-header/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-heading@^0.0.36": 6 | version "0.0.36" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-heading/-/vf-heading-0.0.36.tgz#8edff885062437cb344cf624eee1f4b8ef8f4da5" 8 | -------------------------------------------------------------------------------- /components/vf-pagination/vf-pagination.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-pagination Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-polyfill-js/vf-polyfill-js.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-polyfill-js Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-section-header/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-heading@^0.0.36": 6 | version "0.0.36" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-heading/-/vf-heading-0.0.36.tgz#8edff885062437cb344cf624eee1f4b8ef8f4da5" 8 | -------------------------------------------------------------------------------- /components/vf-u-fullbleed/vf-u-fullbleed.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-ui-fullbleed Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-chatbot/vf-chatbot.njk: -------------------------------------------------------------------------------- 1 | {% if config.type == "modal" %} 2 |
3 | {% render '@vf-chatbot-fab' %} 4 | {% render '@vf-chatbot-modal', { config: config } %} 5 |
6 | {% elif config.type == "standalone" %} 7 | {% render '@vf-chatbot-standalone', { config: config } %} 8 | {% endif %} -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/custom-properties/vf-color__brand.custom-properties.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__brand.yml 5 | 6 | :root { 7 | --vf-color__brand: #18974c; 8 | --vf-color__brand--dark: #0a5032; 9 | } 10 | -------------------------------------------------------------------------------- /components/ebi-header-footer/ebi-header-footer.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // ebi-header-footer Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-card-container/vf-card-container.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-card-container Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/json/vf-font--monospace.ios.json: -------------------------------------------------------------------------------- 1 | { 2 | "properties": [ 3 | { 4 | "type": "monospace", 5 | "category": "fonts", 6 | "name": "textBody1", 7 | "value": { 8 | "fontSize": "14px", 9 | "fontWeight": 400, 10 | "lineHeight": 1.57 11 | } 12 | } 13 | ] 14 | } -------------------------------------------------------------------------------- /components/vf-design-tokens/src/variables/vf-font-families.yml: -------------------------------------------------------------------------------- 1 | props: 2 | - name: vf-font-family--monospace 3 | value: "'IBM Plex Mono', Monaco, Consolas, 'Lucida Console', monospace" 4 | - name: vf-font-family--sans-serif 5 | value: "'IBM Plex Sans', Helvetica, Arial, sans-serif" 6 | global: 7 | type: number 8 | category: font-family 9 | -------------------------------------------------------------------------------- /components/vf-design-tokens/src/variables/vf-layout.yml: -------------------------------------------------------------------------------- 1 | global: 2 | category: radius 3 | 4 | props: 5 | - name: vf-layout--comfortable 6 | value: 80em 7 | type: number 8 | 9 | - name: vf-layout--cozy 10 | value: 75em 11 | type: number 12 | 13 | - name: vf-layout--compact 14 | value: 62.5em 15 | type: number 16 | -------------------------------------------------------------------------------- /components/vf-form__select/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form/vf-form.scss'; 12 | @import 'vf-form__select.scss'; 13 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/vf-sass-utilities.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-sass-utilities Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/components/button.js: -------------------------------------------------------------------------------- 1 | // Disabled until https://github.com/visual-framework/vf-core/pull/1365 is ready. 2 | // const path = require('path'); 3 | // const pkg = require(path.join(process.cwd(), 'node_modules/@visual-framework/vf-design-tokens/dist/components/vf-button.ios.json')); 4 | // module.exports = pkg; 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in 2 | # this file, please see the EditorConfig documentation: 3 | # http://editorconfig.org/ 4 | 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 2 10 | indent_style = space 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | end_of_line = lf 14 | -------------------------------------------------------------------------------- /components/ebi-vf1-integration/ebi-vf1-integration.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // ebi-vf1-integration Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/embl-notifications/embl-notifications.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // embl-notifications Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-analytics-google/vf-analytics-google.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-analytics-google Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-links.variables.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-links.yml 5 | 6 | $vf-link--color: #3b6fb6; 7 | $vf-link--hover-color: #193f90; 8 | $vf-link--visited-color: #563D82; 9 | $vf-link--decoration: underline; 10 | -------------------------------------------------------------------------------- /components/vf-profile/assets/vf-icon--avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/vf-summary/assets/vf-icon--avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/embl-conditional-edit/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | @import 'embl-conditional-edit.scss'; 11 | 12 | // component variant styles 13 | -------------------------------------------------------------------------------- /components/vf-collapse/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 0.0.3 2 | 3 | * Deprecated `vf-collapse` component. `vf-details` component needs to be used instead. [Tracking issue](https://github.com/visual-framework/vf-core/issues/1911) 4 | * Changelog correction [Tracking issue](https://github.com/visual-framework/vf-core/issues/2035) 5 | 6 | ### 0.0.2 7 | 8 | * initial version 9 | -------------------------------------------------------------------------------- /components/vf-page-header/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // other components being used 9 | 10 | @import '../vf-heading/vf-heading.scss'; 11 | 12 | // component specific styles 13 | 14 | @import 'vf-page-header.scss'; 15 | -------------------------------------------------------------------------------- /components/vf-search-client-side/vf-search-client-side.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-search-client-side Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-utility-classes/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | @import 'vf-utility-mixins'; 9 | 10 | 11 | // component specific styles 12 | 13 | @import 'vf-utility-classes.scss'; 14 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/_data/containers.json: -------------------------------------------------------------------------------- 1 | { 2 | "card_container": "vf-core-components/vf-card-container/vf-card-container.njk", 3 | "summary_container": "vf-core-components/vf-summary-container/vf-summary-container.njk", 4 | "hero": "vf-core-components/vf-hero/vf-hero.njk", 5 | "intro": "vf-core-components/vf-intro/vf-intro.njk" 6 | } 7 | -------------------------------------------------------------------------------- /components/vf-activity-list/vf-activity-list.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 |

{{ date }}

4 | 5 |
    6 | 7 | {% for item in list %} 8 | 9 |
  • 10 | {{ item }} 11 |
    • 12 | 13 | {% endfor %} 14 | 15 |
16 |
17 | -------------------------------------------------------------------------------- /components/vf-banner-elixir/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.0 2 | 3 | * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170). 4 | 5 | ### 1.0.0-alpha.2 6 | 7 | * removes redundant link in the Elixir logo 8 | ### 1.0.0-alpha.1 9 | 10 | * Initial version 11 | * https://github.com/visual-framework/vf-core/issues/1572 12 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-font--monospace.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | // Source: vf-font--monospace.yml 4 | $vf-fonts--monospace: ( 5 | 6 | 'text-body--1': ( 7 | 'font-size': 14px, 8 | 'font-weight': 400, 9 | 'line-height': 1.57 10 | ), 11 | ); 12 | -------------------------------------------------------------------------------- /components/vf-form__legend/vf-form__legend.config.yml: -------------------------------------------------------------------------------- 1 | title: Legend 2 | label: Legend 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | 8 | variants: 9 | - name: default 10 | context: 11 | legend__text: This is a legend 12 | - name: requird 13 | context: 14 | legend__text: This is a legend 15 | required: true 16 | -------------------------------------------------------------------------------- /components/embl-content-hub-loader/embl-content-hub-loader.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // embl-content-hub-loader Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | -------------------------------------------------------------------------------- /components/vf-activity-group/vf-activity-group.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 |

{{ heading }}

4 | 5 | {% render '@vf-activity-list', activity_list__1 %} 6 | {% render '@vf-activity-list', activity_list__2 %} 7 | {% render '@vf-activity-list', activity_list__3 %} 8 | 9 |
10 | -------------------------------------------------------------------------------- /components/vf-chatbot-fab/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.3 4 | 5 | * Added : Changes for chatbot modal variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) 7 | 8 | ### 1.0.0-beta.2 9 | 10 | * Updated package.json with correct settings 11 | 12 | ### 1.0.0-beta.1 13 | 14 | * Initial version -------------------------------------------------------------------------------- /components/vf-design-tokens/src/spacing.palette.alias.yml: -------------------------------------------------------------------------------- 1 | aliases: 2 | vf-spacing--0: 0 3 | vf-spacing--50: .125rem 4 | vf-spacing--100: .25rem 5 | vf-spacing--200: .5rem 6 | vf-spacing--400: 1rem 7 | vf-spacing--500: 1.25rem 8 | vf-spacing--600: 1.5rem 9 | vf-spacing--800: 2rem 10 | vf-spacing--1200: 3rem 11 | vf-spacing--1600: 4rem 12 | 13 | -------------------------------------------------------------------------------- /components/vf-form__helper/vf-form__helper.config.yml: -------------------------------------------------------------------------------- 1 | title: Helper 2 | label: Helper 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | 8 | variants: 9 | - name: default 10 | context: 11 | helper_text: Form helper text 12 | - name: error 13 | context: 14 | helper_text: You have done something wrong. 15 | error: true 16 | -------------------------------------------------------------------------------- /components/vf-grid-page/vf-grid-page.njk: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 | 16 | -------------------------------------------------------------------------------- /components/vf-section-header/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // other components being used 9 | 10 | @import '../vf-heading/vf-heading.scss'; 11 | 12 | // component specific styles 13 | 14 | @import 'vf-section-header.scss'; 15 | -------------------------------------------------------------------------------- /components/vf-chatbot-prompt/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.3 4 | 5 | * Added : Changes for chatbot modal variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) 7 | 8 | ### 1.0.0-beta.2 9 | 10 | * Updated package.json with correct settings 11 | 12 | ### 1.0.0-beta.1 13 | 14 | * Initial version -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/custom-properties/vf-color__interactive.custom-properties.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__interactive.yml 5 | 6 | :root { 7 | --vf-color__interactive: #3b6fb6; 8 | --vf-color__interactive--background: #d1e3f6; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/maps/vf-color__interactive.map.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__interactive.yml 5 | 6 | $vf-color__interactive-map: ( 7 | 'vf-color__interactive': (#3b6fb6), 8 | 'vf-color__interactive--background': (#d1e3f6), 9 | ); 10 | -------------------------------------------------------------------------------- /components/vf-form__label/vf-form__label.config.yml: -------------------------------------------------------------------------------- 1 | title: Label 2 | label: Label 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | 8 | variants: 9 | - name: default 10 | context: 11 | form__label: Form Label 12 | - name: Required 13 | label: Required 14 | context: 15 | form__label: Form Label 16 | required: true 17 | -------------------------------------------------------------------------------- /components/vf-video-container/vf-video-container.scss: -------------------------------------------------------------------------------- 1 | // vf-video-container 2 | 3 | @import 'package.variables.scss'; 4 | // Debug information from component's `package.json`: 5 | // --- 6 | /*! 7 | * Component: #{map-get($componentInfo, 'name')} 8 | * Version: #{map-get($componentInfo, 'version')} 9 | * Location: #{map-get($componentInfo, 'location')} 10 | */ 11 | -------------------------------------------------------------------------------- /components/embl-content-hub-loader/embl-content-hub-loader.njk: -------------------------------------------------------------------------------- 1 |
2 |

Below we do a sample import from the ContentHub:

3 | 4 | 5 |
6 | -------------------------------------------------------------------------------- /components/vf-chatbot-action-prompt/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.3 4 | 5 | * Added : Changes for chatbot modal variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) 7 | 8 | ### 1.0.0-beta.2 9 | 10 | * Updated package.json with correct settings 11 | 12 | ### 1.0.0-beta.1 13 | 14 | * Initial version -------------------------------------------------------------------------------- /components/vf-chatbot-modal/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.3 4 | 5 | * Added : Initial code for chatbot modal variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) 7 | 8 | ### 1.0.0-beta.2 9 | 10 | * Updated package.json with correct settings 11 | 12 | ### 1.0.0-beta.1 13 | 14 | * Initial version -------------------------------------------------------------------------------- /components/vf-inlay/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-inlay.variables.scss'; 12 | @import 'vf-inlay.scss'; 13 | 14 | // component variant styles 15 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-breakpoints.variables.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-breakpoints.yml 5 | 6 | $vf-breakpoint--xs: 360px; 7 | $vf-breakpoint--sm: 600px; 8 | $vf-breakpoint--md: 768px; 9 | $vf-breakpoint--lg: 1024px; 10 | $vf-breakpoint--xl: 1280px; 11 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/_vf-screen-reader.scss: -------------------------------------------------------------------------------- 1 | html:not(.vf-disable-deprecated) { 2 | // Some things should only be show to screen readers 3 | .vf-sr-only { 4 | position: absolute; 5 | width: 1px; 6 | height: 1px; 7 | padding: 0; 8 | overflow: hidden; 9 | clip: rect(0, 0, 0, 0); 10 | white-space: nowrap; 11 | border: 0; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/vf-intro/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // other components being used 9 | 10 | @import '../vf-text/vf-text.scss'; 11 | @import '../vf-heading/vf-heading.scss'; 12 | 13 | // component specific styles 14 | 15 | @import 'vf-intro.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-sass-config/functions/string-replace.scss: -------------------------------------------------------------------------------- 1 | // str-replace function 2 | // -------------------- 3 | 4 | // Slice off the first amount($number) of characters from the $name value passed. 5 | // Primarily used to replace the start of variables for the utility class generation. 6 | 7 | @function str-replace($name, $number) { 8 | @return str-slice($name, $number); 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-utility-classes/vf-u-text.scss: -------------------------------------------------------------------------------- 1 | .vf-u-text--nowrap { 2 | white-space: nowrap; 3 | } 4 | 5 | .vf-u-text--break { 6 | word-break: break-all; 7 | } 8 | 9 | .vf-u-text--et-al { 10 | position: relative; 11 | 12 | &::after { 13 | color: inherit; 14 | content: 'et al.'; 15 | font: inherit; 16 | position: relative; 17 | right: 0; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/vf-global-header/vf-global-header.config.yml: -------------------------------------------------------------------------------- 1 | title: Global Header 2 | label: Global Header 3 | preview: '@preview--nogrid' 4 | status: live 5 | 6 | context: 7 | exampleMultiColumns: "false" 8 | component-type: block 9 | global_logo: 10 | logo_href: / 11 | image: ../../assets/vf-logo/assets/logo.svg 12 | logo_text: Visual Framework for Life Science websites 13 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/vf-font-families.variables.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-font-families.yml 5 | 6 | $vf-font-family--monospace: 'IBM Plex Mono', Monaco, Consolas, 'Lucida Console', monospace; 7 | $vf-font-family--sans-serif: 'IBM Plex Sans', Helvetica, Arial, sans-serif; 8 | -------------------------------------------------------------------------------- /components/vf-design-tokens/src/variables/vf-border-radius.yml: -------------------------------------------------------------------------------- 1 | global: 2 | category: radius 3 | 4 | props: 5 | - name: vf-radius--xs 6 | value: 4px 7 | type: number 8 | - name: vf-radius--sm 9 | value: 8px 10 | type: number 11 | - name: vf-radius--md 12 | value: 16px 13 | type: number 14 | - name: vf-radius--pill 15 | value: 500px 16 | type: number 17 | -------------------------------------------------------------------------------- /components/vf-link-list/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // other components being used 9 | 10 | @import '../vf-heading/vf-heading.scss'; 11 | @import '../vf-badge/vf-badge.scss'; 12 | 13 | // component specific styles 14 | 15 | @import 'vf-link-list.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-no-js/vf-no-js.scss: -------------------------------------------------------------------------------- 1 | // vf-no-js 2 | 3 | // "This page was intentionally left blank" 4 | 5 | @import 'package.variables.scss'; 6 | // Debug information from component's `package.json`: 7 | // --- 8 | /*! 9 | * Component: #{map-get($componentInfo, 'name')} 10 | * Version: #{map-get($componentInfo, 'version')} 11 | * Location: #{map-get($componentInfo, 'location')} 12 | */ 13 | -------------------------------------------------------------------------------- /tools/vf-extensions/filters/markdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Process a string as markdown 3 | * 4 | * @param {String} text 5 | * @example {{ "[Some markdown as a link](#) | markdown" }} 6 | */ 7 | 8 | const md = require('markdown-it')({ 9 | // https://github.com/markdown-it/markdown-it 10 | html: true 11 | }); 12 | 13 | module.exports = function(text) { 14 | return md.render(text); 15 | }; 16 | -------------------------------------------------------------------------------- /components/embl-content-meta-properties/embl-content-meta-properties.scss: -------------------------------------------------------------------------------- 1 | // embl-content-meta-properties 2 | 3 | @import 'package.variables.scss'; 4 | // Debug information from component's `package.json`: 5 | // --- 6 | /*! 7 | * Component: #{map-get($componentInfo, 'name')} 8 | * Version: #{map-get($componentInfo, 'version')} 9 | * Location: #{map-get($componentInfo, 'location')} 10 | */ 11 | 12 | -------------------------------------------------------------------------------- /components/vf-divider/vf-divider.scss: -------------------------------------------------------------------------------- 1 | // vf-divider 2 | 3 | @import 'package.variables.scss'; 4 | // Debug information from component's `package.json`: 5 | // --- 6 | /*! 7 | * Component: #{map-get($componentInfo, 'name')} 8 | * Version: #{map-get($componentInfo, 'version')} 9 | * Location: #{map-get($componentInfo, 'location')} 10 | */ 11 | 12 | .vf-divider { 13 | @include divider; 14 | } 15 | -------------------------------------------------------------------------------- /components/vf-grid/vf-grid--col-3.njk: -------------------------------------------------------------------------------- 1 |
2 | {% render '@vf-box--normal-primary' %} 3 | {% render '@vf-box--normal-primary' %} 4 | {% render '@vf-box--normal-primary' %} 5 | {% render '@vf-box--normal-primary' %} 6 | {% render '@vf-box--normal-primary' %} 7 | {% render '@vf-box--normal-primary' %} 8 |
9 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/sitemap.njk: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: sitemap.xml 3 | --- 4 | 5 | 6 | {%- for page in collections.all %} 7 | {%- if page.data.layout %} 8 | 9 | {{ site.rootUrl }}{{ page.url }} 10 | 11 | {%- endif %} 12 | {%- endfor %} 13 | 14 | -------------------------------------------------------------------------------- /components/embl-favicon/assets/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "EMBL.org", 3 | "short_name": "EMBL", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-144x144.png", 7 | "sizes": "144x144", 8 | "type": "image/png" 9 | } 10 | ], 11 | "theme_color": "#18974c", 12 | "background_color": "#a8a99e", 13 | "display": "standalone" 14 | } 15 | -------------------------------------------------------------------------------- /components/vf-divider/vf-divider.njk: -------------------------------------------------------------------------------- 1 | {% if context %} 2 | {% set id = context.id %} 3 | {% set override_class = context.override_class %} 4 | {% endif %} 5 | 6 |
11 | -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input.config.yml: -------------------------------------------------------------------------------- 1 | title: Input 2 | label: Input 3 | status: live 4 | 5 | context: 6 | component-type: form 7 | 8 | variants: 9 | - name: search 10 | context: 11 | search_placeholder: Search all of EMBL.org 12 | - name: filter 13 | context: 14 | search_placeholder: Search this book 15 | - name: invalid 16 | context: 17 | invalid: true 18 | -------------------------------------------------------------------------------- /components/vf-grid-page/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 3.0.0 2 | 3 | * Deprecated for `vf-body` component 4 | 5 | ### 2.0.0 6 | 7 | * removes the CSS grid that generated a central column for content, now it's working across all browsers with less code 8 | * this makes vf-u-grid-reset redundant 9 | * you might need to add vf-u-fullbleed to certain containers 10 | 11 | ### 1.0.0 12 | 13 | * Initial stable release 14 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/developing/guidelines/versioning.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Versioning 3 | subtitle: The Visual Framework `vf-core` and its components have self-contained versions. 4 | date: 2019-04-09 12:24:50 5 | order: 10 6 | tags: 7 | - documentation 8 | layout: layouts/post.njk 9 | --- 10 | 11 | [This page has moved]({{ '/guidance/versioning-and-component-interoperability' | url }}) 12 | -------------------------------------------------------------------------------- /tools/vf-extensions/utils/minify-html.js: -------------------------------------------------------------------------------- 1 | const htmlmin = require("html-minifier"); 2 | 3 | module.exports = function(content, outputPath) { 4 | if( outputPath.endsWith(".html") ) { 5 | let minified = htmlmin.minify(content, { 6 | useShortDoctype: true, 7 | removeComments: true, 8 | collapseWhitespace: true 9 | }); 10 | return minified; 11 | } 12 | return content; 13 | } 14 | -------------------------------------------------------------------------------- /components/vf-card/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-card.variables.scss'; 12 | @import 'vf-card.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-card--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-chatbot-selector/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ### 1.0.0-beta.3 4 | 5 | * Added : Changes for chatbot modal variant 6 | * Added : React support [Tracking issue](https://github.com/visual-framework/vf-core/issues/2314) 7 | 8 | ### 1.0.0-beta.2 9 | 10 | * Updated package.json with correct settings 11 | 12 | ### 1.0.0-beta.1 13 | 14 | * Initial version 15 | * Accessibility compliance improvements -------------------------------------------------------------------------------- /components/vf-chatbot-sources/vf-chatbot-sources.njk: -------------------------------------------------------------------------------- 1 |
2 |

Sources

3 | 10 |
11 | -------------------------------------------------------------------------------- /components/vf-chatbot/assets/vf-chatbot--icon-minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/vf-embed/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-embed.variables.scss'; 12 | @import 'vf-embed.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-embed--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-flag/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-flag.variables.scss'; 12 | @import 'vf-flag.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-flag--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-hero/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-hero.variables.scss'; 12 | @import 'vf-hero.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-hero--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-lede/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-lede.variables.scss'; 12 | @import 'vf-lede.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-lede--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-location-nearest/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.3 2 | 3 | * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170). 4 | 5 | ### 1.0.2 6 | 7 | * Remove unneeded `console.log`. 8 | 9 | ### 1.0.1 10 | 11 | * changes any `set-` style functions to cleaner version 12 | 13 | ### 1.0.0 14 | 15 | * JS linting 16 | 17 | ### 1.0.0-alpha.1 18 | 19 | * Initial version 20 | -------------------------------------------------------------------------------- /components/vf-sass-config/mixins/_button.scss: -------------------------------------------------------------------------------- 1 | // Reusable styling for button elements 2 | // @include vf-button(); 3 | 4 | @mixin vf-button() { 5 | /* stylelint-disable */ 6 | -webkit-appearance: none; 7 | appearance: none; 8 | /* stylelint-enable */ 9 | border: 0; 10 | cursor: pointer; 11 | display: inline-block; 12 | margin: 0; 13 | padding: 16px 24px; 14 | text-decoration: none; 15 | } 16 | -------------------------------------------------------------------------------- /components/vf-stack/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-stack.variables.scss'; 12 | @import 'vf-stack.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-stack--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-table/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-table.variables.scss'; 12 | @import 'vf-table.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-table--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-tags/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-tags.variables.scss'; 12 | @import 'vf-tags.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-tags--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-tree/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-tree.variables.scss'; 12 | @import 'vf-tree.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-tree--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/embl-content-hub-loader/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'embl-content-hub-loader.variables.scss'; 12 | @import 'embl-content-hub-loader.scss'; 13 | 14 | // component variant styles 15 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/custom-properties/vf-color__background.custom-properties.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__background.yml 5 | 6 | :root { 7 | --vf-color__background--primary: #000000; 8 | --vf-color__background--secondary: #000000; 9 | --vf-color__background--tertiary: #000000; 10 | } 11 | -------------------------------------------------------------------------------- /components/vf-font-plex-mono/assets/scss/mono/regular/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Mono'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('IBM Plex Mono'), 6 | local('IBMPlexMono'), 7 | url('#{$vf-font-plex-mono-prefix}/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/regular/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('IBM Plex Sans'), 6 | local('IBMPlexSans'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-inlay/vf-inlay.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-inlay Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | $vf-inlay__spacing--bottom--narrow: 36px; 10 | $vf-inlay__spacing--bottom: 100px; 11 | -------------------------------------------------------------------------------- /components/vf-search/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-search.variables.scss'; 12 | @import 'vf-search.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-search--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-summary-container/vf-summary-container.scss: -------------------------------------------------------------------------------- 1 | // vf-summary 2 | 3 | @import 'package.variables.scss'; 4 | // Debug information from component's `package.json`: 5 | // --- 6 | /*! 7 | * Component: #{map-get($componentInfo, 'name')} 8 | * Version: #{map-get($componentInfo, 'version')} 9 | * Location: #{map-get($componentInfo, 'location')} 10 | */ 11 | 12 | // "This page was intentionally left blank" 13 | -------------------------------------------------------------------------------- /tools/vf-frctl-extensions/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 2.0.0 2 | 3 | * Invoke marked with `renderMarkdown.parse` for compatibility with version 4. 4 | 5 | ### 1.0.1 6 | 7 | * Updates highlightjs syntax of codeblock tag 8 | * https://github.com/visual-framework/vf-core/pull/1435 9 | * https://github.com/highlightjs/highlight.js/issues/2277 10 | 11 | ### 1.0.0 12 | 13 | - Initial release to be used with vf-core 2.2.0 14 | -------------------------------------------------------------------------------- /components/vf-body/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.2.0 2 | 3 | * removes `box-sizing: border-box;` 4 | * adds a little more to the documentation. 5 | 6 | ### 1.1.0 7 | 8 | * Makes the max-width a factor of 16px. 9 | * adds box-sizing so that the padding doesn't effect the max-width. 10 | * includes a fix for when a `vf-body` is (for some reason) nested inside another `vf-body` 11 | ### 1.0.0 12 | 13 | * Initial stable release 14 | -------------------------------------------------------------------------------- /components/vf-breadcrumbs/vf-breadcrumbs.variables.scss: -------------------------------------------------------------------------------- 1 | // vf-breadcrumbs 2 | 3 | $vf-breadcrumbs__item-text--color: ui-color(black); 4 | $vf-breadcrumbs__item-chevron--color: color(grey); 5 | $vf-breadcrumbs__item-related-text--color: color(grey); 6 | $vf-breadcrumbs__item-related-link--color: color(blue); 7 | $vf-breadcrumbs__item-related-link--color--hover: color(grey); 8 | 9 | $vf-breadcrumbs__margin--top: 1rem; 10 | -------------------------------------------------------------------------------- /components/vf-card/vf-card.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-card Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | $vf-card--topic-bg-color: color(yellow); 10 | $vf-card--navigation-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-cluster/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-cluster.variables.scss'; 12 | @import 'vf-cluster.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-cluster--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/maps/vf-color__background.map.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: maps/vf-color__background.yml 5 | 6 | $vf-color__background-map: ( 7 | 'vf-color__background--primary': (#000000), 8 | 'vf-color__background--secondary': (#000000), 9 | 'vf-color__background--tertiary': (#000000), 10 | ); 11 | -------------------------------------------------------------------------------- /components/vf-details/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-details.variables.scss'; 12 | @import 'vf-details.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-details--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/bold/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 700; 5 | src: local('IBM Plex Sans Bold'), 6 | local('IBMPlexSans-Bold'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Bold-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/text/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 450; 5 | src: local('IBM Plex Sans Text'), 6 | local('IBMPlexSans-Text'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Text-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/thin/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 100; 5 | src: local('IBM Plex Sans Thin'), 6 | local('IBMPlexSans-Thin'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Thin-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-link/vf-link.njk: -------------------------------------------------------------------------------- 1 | {% spaceless %} 2 | 3 | 14 | 15 | {{- html | safe if html else text -}} 16 | 17 | 18 | {% endspaceless %} 19 | -------------------------------------------------------------------------------- /components/vf-profile/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-profile.variables.scss'; 12 | @import 'vf-profile.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-profile--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-sass-config/variables/vf-global-custom-properties.scss: -------------------------------------------------------------------------------- 1 | // Native CSS properties, currently limited to document spacing. 2 | :root { 3 | --vf-body-width: #{$vf-layout--comfortable}; 4 | 5 | --page-grid-gap: #{space(400)}; 6 | 7 | --embl-grid-module--prime: 16rem; 8 | --embl-grid-spacing-normaliser: 0px; 9 | 10 | @media (min-width: 75em) { 11 | --page-grid-gap: #{space(800)}; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/vf-sidebar/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-sidebar.variables.scss'; 12 | @import 'vf-sidebar.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-sidebar--variant.scss'; 16 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ], 5 | "automerge": true, 6 | "major": { 7 | "automerge": false 8 | }, 9 | "schedule": [ 10 | "before 10am every monday" 11 | ], 12 | "timezone": "Europe/Berlin", 13 | "packageRules": [{ 14 | "sourceUrlPrefixes": ["https://github.com/visual-framework/vf-core"], 15 | "groupName": "Visual Framework core components" 16 | }] 17 | } 18 | -------------------------------------------------------------------------------- /components/vf-bookmark/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-bookmark.variables.scss'; 12 | @import 'vf-bookmark.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-bookmark--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-collapse/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-collapse.variables.scss'; 12 | @import 'vf-collapse.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-collapse--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-dropdown/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-dropdown.variables.scss'; 12 | @import 'vf-dropdown.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-dropdown--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-favicon/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.0.3 2 | 3 | * Point favicon urls to 2.5.0 stable release. 4 | 5 | ### 1.0.2 6 | 7 | * missing a link to favicon.ico 8 | * adds better defaults to the site.webmanifest 9 | * https://github.com/visual-framework/vf-core/pull/838 10 | 11 | ### 1.0.1 12 | 13 | * Fixes default path of favicons 14 | * Improves docs 15 | 16 | ### 1.0.0 (2019-12-17) 17 | 18 | * Initial stable release 19 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/light/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 300; 5 | src: local('IBM Plex Sans Light'), 6 | local('IBMPlexSans-Light'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-masthead/vf-masthead.js: -------------------------------------------------------------------------------- 1 | // vf-masthead 2 | 3 | /** 4 | * This was a function for making background color of banner from image file name. 5 | */ 6 | function vfMastheadSetStyle() { 7 | console.warn("vfMasthead","This component has been deprecated, you should remove it from your VF scripts.js rollup. https://github.com/visual-framework/vf-core/pull/1406/"); 8 | } 9 | 10 | export { vfMastheadSetStyle }; 11 | -------------------------------------------------------------------------------- /components/vf-pagination/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-pagination.variables.scss'; 12 | @import 'vf-pagination.scss'; 13 | 14 | // component variant styles 15 | @import 'vf-pagination--full.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-content/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@visual-framework/vf-figure@^1.3.0": 6 | version "1.3.0" 7 | resolved "https://registry.yarnpkg.com/@visual-framework/vf-figure/-/vf-figure-1.3.0.tgz#6d60b9ee33e9e681e13752082800fb0450e8945f" 8 | integrity sha512-SIS/FOhMn+cPZHqF7dNJPqhE8BNNU5pR8ZZsdWXsRC1zQDGWAaz0HyuD8Xtp8MOp+4JFP2DrrGpURc3V07uYLA== 9 | -------------------------------------------------------------------------------- /components/vf-deprecated/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-deprecated.variables.scss'; 12 | @import 'vf-deprecated.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-deprecated--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-discussion/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-discussion.variables.scss'; 12 | @import 'vf-discussion.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-discussion--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-explainer/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-explainer.variables.scss'; 12 | @import 'vf-explainer.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-explainer--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/bold/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 700; 5 | src: local('IBM Plex Sans Bold'), 6 | local('IBMPlexSans-Bold'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Bold-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 400; 5 | src: local('IBM Plex Sans Italic'), 6 | local('IBMPlexSans-Italic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/medium/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 500; 5 | src: local('IBM Plex Sans Medium'), 6 | local('IBMPlexSans-Medium'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Medium-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/regular/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local('IBM Plex Sans'), 6 | local('IBMPlexSans'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Regular-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/text/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 450; 5 | src: local('IBM Plex Sans Text'), 6 | local('IBMPlexSans-Text'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Text-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/thin/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 100; 5 | src: local('IBM Plex Sans Thin'), 6 | local('IBMPlexSans-Thin'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Thin-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-grid/vf-grid.njk: -------------------------------------------------------------------------------- 1 | {% if context %} 2 | {% set vf_grid__columns = context.vf_grid__columns %} 3 | {% set modifier = context.modifier %} 4 | {% endif %} 5 | 6 |
10 | 11 | {% block vf_grid__content %} 12 | {% endblock %} 13 | 14 |
15 | -------------------------------------------------------------------------------- /components/vf-mega-menu/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-mega-menu.variables.scss'; 12 | @import 'vf-mega-menu.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-mega-menu--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-show-more/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-show-more.variables.scss'; 12 | @import 'vf-show-more.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-show-more--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-text/vf-text.njk: -------------------------------------------------------------------------------- 1 | {% spaceless %} 2 | 3 |

13 | 14 | {{- html | safe if html else text -}} 15 | 16 |

17 | 18 | {% endspaceless %} 19 | -------------------------------------------------------------------------------- /components/vf-back-to-top/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-back-to-top.variables.scss'; 12 | @import 'vf-back-to-top.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-back-to-top--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-design-tokens/dist/sass/maps/vf-breakpoints.map.scss: -------------------------------------------------------------------------------- 1 | // This file has been dynamically generated from design tokens 2 | // Please do NOT edit directly. 3 | 4 | // Source: variables/vf-breakpoints.yml 5 | 6 | $vf-breakpoints-map: ( 7 | 'vf-breakpoint--xs': (360px), 8 | 'vf-breakpoint--sm': (600px), 9 | 'vf-breakpoint--md': (768px), 10 | 'vf-breakpoint--lg': (1024px), 11 | 'vf-breakpoint--xl': (1280px), 12 | ); 13 | -------------------------------------------------------------------------------- /components/vf-divider/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 2.0.1 2 | 3 | * Minor README.md update to correct usage of `vf-stack`. 4 | 5 | ### 2.0.0 6 | 7 | * removes the `grid-column: 1 / -1;` rule 8 | * moves the margin into the `@mixin` available in `vf-sass-config` 9 | * adds `--vf-divider--margin-block-end` custom property to allow the overriding the block end margin as needed 10 | 11 | ### 1.0.0 (2019-12-17) 12 | 13 | * Initial stable release 14 | -------------------------------------------------------------------------------- /components/vf-embed/vf-embed.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-embed Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-embed--example-bg-color: color(yellow); 10 | // $vf-embed--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/light/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 300; 5 | src: local('IBM Plex Sans Light'), 6 | local('IBMPlexSans-Light'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Light-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/semibold/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 600; 5 | src: local('IBM Plex Sans SemiBold'), 6 | local('IBMPlexSans-SemiBold'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-page-header/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ### 1.1.2 2 | 3 | * changes any `set-` style functions to cleaner version 4 | 5 | ### 1.1.1 6 | 7 | * Resolve issue of missing import in index.scss 8 | * https://github.com/visual-framework/vf-core/pull/1306 9 | 10 | ### 1.1.0 11 | 12 | * updates spacing design tokens 13 | * requires `v2.0.0` of the `vf-design-tokens` package or newer 14 | 15 | ### 1.0.0 16 | 17 | * Initial stable release 18 | -------------------------------------------------------------------------------- /components/vf-polyfill-js/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-polyfill-js.variables.scss'; 12 | @import 'vf-polyfill-js.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-polyfill-js--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-stack/vf-stack.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-stack Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-stack--example-bg-color: color(yellow); 10 | // $vf-stack--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-u-fullbleed/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-u-fullbleed.variables.scss'; 12 | @import 'vf-u-fullbleed.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-fullbleed--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 400; 5 | src: local('IBM Plex Sans Italic'), 6 | local('IBMPlexSans-Italic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Italic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/medium/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 500; 5 | src: local('IBM Plex Sans Medium'), 6 | local('IBMPlexSans-Medium'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-Medium-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-form__input/vf-form__input--password.njk: -------------------------------------------------------------------------------- 1 |
2 | 3 | 8 |
9 | -------------------------------------------------------------------------------- /components/vf-form__legend/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__legend.variables.scss'; 12 | @import 'vf-form__legend.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-form__legend--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-social-links/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-social-links.variables.scss'; 12 | @import 'vf-social-links.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-social-links--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-video-teaser/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // other components being used 10 | 11 | @import '../vf-heading/vf-heading.scss'; 12 | @import '../vf-link/vf-link.scss'; 13 | 14 | // component specific styles 15 | 16 | @import 'vf-video-teaser.scss'; 17 | -------------------------------------------------------------------------------- /components/vf-activity-list/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // other components being used 10 | 11 | @import '../vf-list/vf-list.scss'; 12 | @import '../vf-blockquote/vf-blockquote.scss'; 13 | 14 | // component specific styles 15 | 16 | @import 'vf-activity-list.scss'; 17 | -------------------------------------------------------------------------------- /components/vf-banner-elixir/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-banner-elixir.variables.scss'; 12 | @import 'vf-banner-elixir.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-banner-elixir--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-cluster/vf-cluster.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-cluster Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-cluster--example-bg-color: color(yellow); 10 | // $vf-cluster--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-details/vf-details.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-details Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-details--example-bg-color: color(yellow); 10 | // $vf-details--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/bold/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 700; 5 | src: local('IBM Plex Sans Bold Italic'), 6 | local('IBMPlexSans-BoldItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-BoldItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/extralight/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 200; 5 | src: local('IBM Plex Sans ExtraLight'), 6 | local('IBMPlexSans-ExtraLight'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-ExtraLight-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/text/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 450; 5 | src: local('IBM Plex Sans Text Italic'), 6 | local('IBMPlexSans-TextItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-TextItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/thin/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 100; 5 | src: local('IBM Plex Sans Thin Italic'), 6 | local('IBMPlexSans-ThinItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-ThinItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-global-header/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // other components being used 10 | 11 | @import '../vf-logo/vf-logo.scss'; 12 | @import '../vf-navigation/vf-navigation.scss'; 13 | 14 | // component specific styles 15 | 16 | @import 'vf-global-header.scss'; 17 | -------------------------------------------------------------------------------- /components/vf-profile/vf-profile.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-profile Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-profile--example-bg-color: color(yellow); 10 | // $vf-profile--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-smooth-scroll/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-smooth-scroll.variables.scss'; 12 | @import 'vf-smooth-scroll.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-smooth-scroll--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/ebi-header-footer/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'ebi-header-footer.variables.scss'; 12 | @import 'ebi-header-footer.scss'; 13 | 14 | // component variant styles 15 | // @import 'ebi-header-footer--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/embl-notifications/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'embl-notifications.variables.scss'; 12 | @import 'embl-notifications.scss'; 13 | 14 | // component variant styles 15 | // @import 'embl-notifications--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-card-container/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-card-container.variables.scss'; 12 | @import 'vf-card-container.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-card-container--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/light/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 300; 5 | src: local('IBM Plex Sans Light Italic'), 6 | local('IBMPlexSans-LightItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/semibold/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 600; 5 | src: local('IBM Plex Sans SemiBold'), 6 | local('IBMPlexSans-SemiBold'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBold-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-form__fieldset/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-form__fieldset.variables.scss'; 12 | @import 'vf-form__fieldset.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-form__fieldset--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-sass-config/mixins/_vf-mixins.scss: -------------------------------------------------------------------------------- 1 | // Rollup of all mixins 2 | 3 | @import 'helpers.scss'; 4 | @import 'button.scss'; 5 | @import 'blockquote.scss'; 6 | @import 'divider.scss'; 7 | @import 'links.scss'; 8 | @import 'lists.scss'; 9 | @import 'figure.scss'; 10 | @import 'margin.scss'; 11 | @import 'padding.scss'; 12 | @import 'text-color.scss'; 13 | @import 'typography.scss'; 14 | @import 'theme.scss'; 15 | @import 'vf-disabled.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-sass-utilities/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-sass-utilities.variables.scss'; 12 | @import 'vf-sass-utilities.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-sass-utilities--variant.scss'; 16 | -------------------------------------------------------------------------------- /tools/vf-extensions/filters/path.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Catch references to the "path" filter which is not part of 11ty and 4 | * results in obtuse error codes. 5 | * 6 | * @param {String} text 7 | */ 8 | 9 | module.exports = function(text) { 10 | let result = 'Could not render path for ' + text + ' -- the "path" filter is not supported by 11ty, instead use "| url"'; 11 | console.warn(result); 12 | return '#'; 13 | } 14 | -------------------------------------------------------------------------------- /tools/vf-extensions/fractal/docs/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Component documentation 3 | order: 100 4 | isIndex: true 5 | --- 6 | 7 | This is an index of all the Visual Framework components available to this 11ty installation. 8 | 9 | --- 10 | 11 | If you'd like to add any component-specific documentation, you can do so here. 12 | 13 | For tips and documentation on how to do so, [see the Fractal guide](https://fractal.build/guide/documentation/). 14 | -------------------------------------------------------------------------------- /components/vf-activity-group/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | @import 'vf-global-variables'; 4 | @import 'vf-variables'; 5 | @import 'vf-functions'; 6 | @import 'vf-mixins'; 7 | 8 | // other components being used 9 | 10 | @import '../vf-grid/vf-grid.scss'; 11 | @import '../vf-heading/vf-heading.scss'; 12 | @import '../vf-activity-list/vf-activity-list.scss'; 13 | 14 | // component specific styles 15 | 16 | @import 'vf-activity-group.scss'; 17 | -------------------------------------------------------------------------------- /components/vf-analytics-google/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-analytics-google.variables.scss'; 12 | @import 'vf-analytics-google.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-analytics-google--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-divider/vf-divider.config.yml: -------------------------------------------------------------------------------- 1 | title: Divider 2 | label: Divider 3 | status: live 4 | preview: '@preview--body' 5 | context: 6 | exampleMultiColumns: "false" 7 | component-type: element 8 | variants: 9 | - name: default 10 | - name: fullbleed 11 | context: 12 | override_class: vf-u-fullbleed 13 | - name: fullbleed custom 14 | context: 15 | override_class: vf-u-fullbleed 16 | context_margin__inline: 3rem 17 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/extralight/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: normal; 4 | font-weight: 200; 5 | src: local('IBM Plex Sans ExtraLight'), 6 | local('IBMPlexSans-ExtraLight'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-ExtraLight-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/medium/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 500; 5 | src: local('IBM Plex Sans Medium Italic'), 6 | local('IBMPlexSans-MediumItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-MediumItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-location-nearest/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-location-nearest.variables.scss'; 12 | @import 'vf-location-nearest.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-location-nearest--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-show-more/vf-show-more.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-show-more Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-show-more--example-bg-color: color(yellow); 10 | // $vf-show-more--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-flag/vf-flag.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-flag Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-flag--example-bg-color: set-color(vf-color--yellow); 10 | // $vf-flag--example2-bg-color: set-ui-color(vf-ui-color--grey); 11 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/bold/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 700; 5 | src: local('IBM Plex Sans Bold Italic'), 6 | local('IBMPlexSans-BoldItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-BoldItalic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/light/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 300; 5 | src: local('IBM Plex Sans Light Italic'), 6 | local('IBMPlexSans-LightItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-LightItalic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/text/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 450; 5 | src: local('IBM Plex Sans Text Italic'), 6 | local('IBMPlexSans-TextItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-TextItalic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/thin/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 100; 5 | src: local('IBM Plex Sans Thin Italic'), 6 | local('IBMPlexSans-ThinItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-ThinItalic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-show-more/vf-show-more.config.yml: -------------------------------------------------------------------------------- 1 | # The title shown on the component page 2 | title: Show more 3 | # Label shown on index pages 4 | label: Show more 5 | status: live 6 | # The template used from /components/_previews 7 | # 8 | # Per-variant options 9 | variants: 10 | - name: default 11 | label: Default 12 | context: 13 | showmore_content: Something small enough to escape casual notice. 14 | context: 15 | component-type: utility 16 | -------------------------------------------------------------------------------- /components/vf-tags/vf-tags.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-tags Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-tags--example-bg-color: set-color(vf-color--yellow); 10 | // $vf-tags--example2-bg-color: set-ui-color(vf-ui-color--grey); 11 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/medium/italic/_greek.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 500; 5 | src: local('IBM Plex Sans Medium Italic'), 6 | local('IBMPlexSans-MediumItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-MediumItalic-Greek.woff2') format('woff2'); 8 | unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/semibold/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 600; 5 | src: local('IBM Plex Sans SemiBold Italic'), 6 | local('IBMPlexSans-SemiBoldItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-SemiBoldItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-form__checkbox/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // other components being used 10 | 11 | @import '../vf-form__item/vf-form__item.scss'; 12 | @import '../vf-form__label/vf-form__label.scss'; 13 | 14 | // component specific styles 15 | 16 | @import 'vf-form__checkbox.scss'; 17 | -------------------------------------------------------------------------------- /components/vf-progress-indicator/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-progress-indicator.variables.scss'; 12 | @import 'vf-progress-indicator.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-progress-indicator--variant.scss'; 16 | -------------------------------------------------------------------------------- /components/vf-search-client-side/index.scss: -------------------------------------------------------------------------------- 1 | // setup files required 2 | 3 | // sass-lint:disable clean-import-paths 4 | @import 'vf-global-variables'; 5 | @import 'vf-variables'; 6 | @import 'vf-functions'; 7 | @import 'vf-mixins'; 8 | 9 | // component specific styles 10 | 11 | @import 'vf-search-client-side.variables.scss'; 12 | @import 'vf-search-client-side.scss'; 13 | 14 | // component variant styles 15 | // @import 'vf-search-client-side--variant.scss'; 16 | -------------------------------------------------------------------------------- /tools/vf-component-library/src/site/demos/index.njk: -------------------------------------------------------------------------------- 1 | --- 2 | title: Example integrations 3 | date: 2019-04-09 12:24:50 4 | tags: posts 5 | layout: layouts/base.njk 6 | templateEngineOverride: njk, md 7 | --- 8 | 9 | Sample integrations of the VF with other Frameworks: 10 | 11 | - ["Pure" VF 2.0]({{'integration-pure' | url}}) 12 | - [Bootstrap]({{'integration-bootstrap' | url}}) 13 | - [VF 2.0 + VF 1.x]({{'integration-vf1' | url}}) 14 | - React (coming soonish) 15 | -------------------------------------------------------------------------------- /components/vf-font-plex-sans/assets/scss/sans/extralight/italic/_latin3.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'IBM Plex Sans'; 3 | font-style: italic; 4 | font-weight: 200; 5 | src: local('IBM Plex Sans ExtraLight Italic'), 6 | local('IBMPlexSans-ExtraLightItalic'), 7 | url('#{$vf-font-plex-sans-prefix}/IBM-Plex-Sans/fonts/split/woff2/IBMPlexSans-ExtraLightItalic-Latin3.woff2') format('woff2'); 8 | unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 9 | } 10 | -------------------------------------------------------------------------------- /components/vf-form__legend/vf-form__legend.variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // vf-form__legend Sass variables file. 3 | // ------------------------------------------------------------ 4 | 5 | // ------------------------------------------------------------ 6 | // Default component variables 7 | // ------------------------------------------------------------ 8 | 9 | // $vf-form__legend--example-bg-color: color(yellow); 10 | // $vf-form__legend--example2-bg-color: ui-color(grey); 11 | -------------------------------------------------------------------------------- /components/vf-link/vf-link.config.yml: -------------------------------------------------------------------------------- 1 | title: Link 2 | label: Link 3 | status: live 4 | collated: true 5 | preview: '@preview--nogrid' 6 | context: 7 | component-type: element 8 | link_href: "JavaScript:Void(0);" 9 | buttonType: default 10 | variants: 11 | - name: default 12 | hidden: false 13 | context: 14 | link_href: "JavaScript:Void(0);" 15 | text: "A default link" 16 | - name: example 17 | context: 18 | isExample: true 19 | 20 | --------------------------------------------------------------------------------