-`;
diff --git a/compound/02-molecules/pull-quote/pull-quote.twig b/compound/02-molecules/pull-quote/pull-quote.twig
deleted file mode 100644
index 7704b4c..0000000
--- a/compound/02-molecules/pull-quote/pull-quote.twig
+++ /dev/null
@@ -1,37 +0,0 @@
-{#
- # Available Props:
- # - pull_quote__style: bar-left, bar-right, or quote-left
- #
- # Available Variables:
- # - pull_quote__quote (required)
- # - pull_quote__attribution
- # - pull_quote__aria_label
- #}
-
-{% set pull_quote__base_class = 'pull-quote' %}
-{% set pull_quote__style = pull_quote__style|default('bar-left') %}
-{% set pull_quote__aria_label = pull_quote__aria_label|default('Pullquote Element by Lorem Ipsum') %}
-{# If pull_quote__attributes is not defined, set it to an empty object by default #}
-{% set pull_quote__attributes = pull_quote__attributes|default({}) %}
-
-{% set pull_quote__attributes = pull_quote__attributes|merge({
- 'data-component-width': 'content',
- 'data-pull-quote-style': pull_quote__style,
- 'aria-label': pull_quote__aria_label,
- class: bem(pull_quote__base_class, pull_quote__modifiers, pull_quote__blockname),
-}) %}
-
-
diff --git a/compound/02-molecules/pull-quote/pull-quote.yml b/compound/02-molecules/pull-quote/pull-quote.yml
deleted file mode 100644
index 72cac1d..0000000
--- a/compound/02-molecules/pull-quote/pull-quote.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-pull_quote__quote:
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
-pull_quote__attribution: Lorem Ipsum
diff --git a/compound/02-molecules/status/_status.scss b/compound/02-molecules/status/_status.scss
deleted file mode 100644
index f3a084b..0000000
--- a/compound/02-molecules/status/_status.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.status__list {
- @include list-reset;
-
- margin-bottom: $space;
-}
-
-.status {
- display: block;
- margin-bottom: $space-one-half;
- padding: $space-one-half;
- text-align: center;
-
- &--warning {
- color: clr(text);
- background-color: clr(warning);
- }
-
- &--error {
- color: clr(text);
- background-color: clr(error);
- }
-
- &--status {
- color: clr(text);
- background-color: clr(message);
- }
-}
diff --git a/compound/02-molecules/status/status.stories.js b/compound/02-molecules/status/status.stories.js
deleted file mode 100644
index 5dd7bc9..0000000
--- a/compound/02-molecules/status/status.stories.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import status from './status.twig';
-
-import statusData from './status.yml';
-
-/**
- * Storybook Definition.
- */
-export default { title: 'Molecules/Status' };
-
-export const statusExamples = () => status(statusData);
diff --git a/compound/02-molecules/status/status.twig b/compound/02-molecules/status/status.twig
deleted file mode 100644
index 5572f84..0000000
--- a/compound/02-molecules/status/status.twig
+++ /dev/null
@@ -1,42 +0,0 @@
-{#
-/**
- * @file
- * Theme override for status messages.
- *
- * Displays status, error, and warning messages, grouped by type.
- *
- * An invisible heading identifies the messages for assistive technology.
- * Sighted users see a colored box. See http://www.w3.org/TR/WCAG-TECHS/H69.html
- * for info.
- *
- * Add an ARIA label to the contentinfo area so that assistive technology
- * user agents will better describe this landmark.
- *
- * Available variables:
- * - message_list: List of messages to be displayed, grouped by type.
- * - status_headings: List of all status types.
- * - display: (optional) May have a value of 'status' or 'error' when only
- * displaying messages of that specific type.
- * - attributes: HTML attributes for the element, including:
- * - class: HTML classes.
- */
-#}
-{% set status__base_class = 'status' %}
-{% for type, messages in message_list %}
-
- {% if type == 'error' %}
-
- {% endif %}
- {% if type %}
-
{{ type }}
- {% endif %}
-
- {% for message in messages %}
-
{{ message }}
- {% endfor %}
-
- {% if type == 'error' %}
-
- {% endif %}
-
-{% endfor %}
diff --git a/compound/02-molecules/status/status.yml b/compound/02-molecules/status/status.yml
deleted file mode 100644
index 580ca34..0000000
--- a/compound/02-molecules/status/status.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-presentational: TRUE
-attributes: ''
-message_list:
- status:
- message: 'This is a status message'
- warning:
- message: 'This is a warning message'
- error:
- message: 'This is an error message'
diff --git a/compound/02-molecules/tabs/_tab.scss b/compound/02-molecules/tabs/_tab.scss
deleted file mode 100644
index f040061..0000000
--- a/compound/02-molecules/tabs/_tab.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.tabs__link,
-.tabs__link--local-tasks {
- background-color: clr(muted);
- border: 1px solid clr(highlight-high);
- border-bottom: none;
- color: clr(text);
- display: block;
- font-size: 1.1rem;
- font-weight: 600;
- padding: 1em 2.4em;
- text-align: center;
- text-decoration: none;
- transition: color 0.3s;
-
- @include large {
- border-bottom: 1px solid clr(highlight-high);
- border-left: none;
- display: inline-block;
- font-size: 1rem;
- padding: 0.6em 1.7em;
- position: relative;
- top: 1px;
- width: auto;
- }
-
- &:hover {
- background-color: clr(highlight-high);
- color: clr(accent);
- }
-
- &.is-active {
- background-color: clr(text);
- border: 1px solid clr(text);
- color: clr(text-inverse);
-
- @include large {
- background-color: clr(background);
- border: 1px solid clr(highlight-high);
- border-bottom: 1px solid clr(highlight-high);
- border-left: none;
- color: clr(text);
- }
- }
-}
diff --git a/compound/02-molecules/tabs/_tab.twig b/compound/02-molecules/tabs/_tab.twig
deleted file mode 100644
index b21adc9..0000000
--- a/compound/02-molecules/tabs/_tab.twig
+++ /dev/null
@@ -1,38 +0,0 @@
-{#
-/**
- * @file
- * Theme override for a local task link.
- *
- * Available variables:
- * - attributes: HTML attributes for the wrapper element.
- * - is_active: Whether the task item is an active tab.
- * - link: A rendered link element.
- *
- * Note: This template renders the content for each task item in
- * menu-local-tasks.html.twig.
- *
- * @see template_preprocess_menu_local_task()
- */
-#}
-{%
- set link_classes = [
- is_active ? 'is-active' : '',
- 'tabs__link--local-tasks'
- ]
-%}
-
-{# if Storybook atoms example, add ul wrapper #}
-{% if example %}
-
-{% endif %}
diff --git a/compound/02-molecules/tabs/_tabs.scss b/compound/02-molecules/tabs/_tabs.scss
deleted file mode 100644
index 29cf443..0000000
--- a/compound/02-molecules/tabs/_tabs.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/* Tab Navigation */
-.tabs__nav {
- @include list-reset;
-
- border-bottom: 1px solid clr(highlight-high);
-
- @include large {
- border-left: 1px solid clr(highlight-high);
- display: flex;
- }
-}
-
-/* Tab Content (hidden only in full #tabs js version) */
-.tabs__tab {
- display: none;
-
- &.is-active {
- display: block;
- }
-}
-
-.tabs__content {
- padding: 1.5rem;
-}
-
-/* No-js fallback */
-.tabs.no-js {
- .tabs__tab.is-active {
- display: block;
- }
-}
-
-/* Drupal Local Tasks variant */
-.tabs__nav--local-tasks {
- margin: 1em 0 0.5em;
- padding: 0;
-}
-
-.tabs__link--local-tasks {
- padding: 0.3em 1.5em;
-}
diff --git a/compound/02-molecules/tabs/tabs.js b/compound/02-molecules/tabs/tabs.js
deleted file mode 100644
index 62ed273..0000000
--- a/compound/02-molecules/tabs/tabs.js
+++ /dev/null
@@ -1,59 +0,0 @@
-Drupal.behaviors.tabs = {
- attach(context) {
- const el = context.querySelectorAll('.tabs');
- const tabNavigationLinks = context.querySelectorAll('.tabs__link');
- const tabContentContainers = context.querySelectorAll('.tabs__tab');
- let activeIndex = 0;
-
- /**
- * goToTab
- *
- * @description Goes to a specific tab based on index. Returns nothing.
- * @param {number} index The index of the tab to go to
- */
- function goToTab(index) {
- if (
- index !== activeIndex &&
- index >= 0 &&
- index <= tabNavigationLinks.length
- ) {
- tabNavigationLinks[Number(activeIndex)].classList.remove('is-active');
- tabNavigationLinks[Number(index)].classList.add('is-active');
- tabContentContainers[Number(activeIndex)].classList.remove('is-active');
- tabContentContainers[Number(index)].classList.add('is-active');
- activeIndex = index;
- }
- }
-
- /**
- * handleClick
- *
- * @description Handles click event listeners on each of the links in the
- * tab navigation. Returns nothing.
- * @param {HTMLElement} link The link to listen for events on
- * @param {number} index The index of that link
- */
- function handleClick(link, index) {
- link.addEventListener('click', (e) => {
- e.preventDefault();
- goToTab(index);
- });
- }
-
- /**
- * init
- *
- * @description Initializes the component by removing the no-js class from
- * the component, and attaching event listeners to each of the nav items.
- * Returns nothing.
- */
- for (let e = 0; e < el.length; e += 1) {
- el[Number(e)].classList.remove('no-js');
- }
-
- for (let i = 0; i < tabNavigationLinks.length; i += 1) {
- const link = tabNavigationLinks[Number(i)];
- handleClick(link, i);
- }
- },
-};
diff --git a/compound/02-molecules/tabs/tabs.stories.js b/compound/02-molecules/tabs/tabs.stories.js
deleted file mode 100644
index c9f2731..0000000
--- a/compound/02-molecules/tabs/tabs.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import tabs from './tabs.twig';
-
-import tabData from './tabs.yml';
-
-import './tabs';
-
-/**
- * Storybook Definition.
- */
-export default { title: 'Molecules/Tabs' };
-
-export const JSTabs = () => tabs(tabData);
diff --git a/compound/02-molecules/tabs/tabs.twig b/compound/02-molecules/tabs/tabs.twig
deleted file mode 100644
index 9ca21c8..0000000
--- a/compound/02-molecules/tabs/tabs.twig
+++ /dev/null
@@ -1,45 +0,0 @@
-{#
-/**
- * @file
- * Theme override to display primary and secondary local tasks.
- *
- * Available variables:
- * - primary: HTML list items representing primary tasks.
- * - secondary: HTML list items representing primary tasks.
- *
- * Each item in these variables (primary and secondary) can be individually
- * themed in menu-local-task.html.twig.
- */
-#}
-
-{# Drupal Specific #}
-{% if primary %}
-
{{ 'Primary tabs'|t }}
-
{{ primary }}
-{% endif %}
-{% if secondary %}
-
{{ 'Secondary tabs'|t }}
-
{{ secondary }}
-{% endif %}
-
-{# Component Library Specific (javascript version) #}
-{% if not primary %}
-{{ attach_library('emulsify/tabs') }}
-
-
- {% for key, tab in tabs %}
- {% include "@molecules/tabs/_tab.twig" with {
- tab_link: "#tab-" ~ key,
- tab_text: tab.tab_text,
- } %}
- {% endfor %}
-
- {% for key, tab in tabs %}
-
-
-
{{ tab.tab_content }}
-
-
- {% endfor %}
-
-{% endif %}
diff --git a/compound/02-molecules/tabs/tabs.yml b/compound/02-molecules/tabs/tabs.yml
deleted file mode 100644
index 0cbfab7..0000000
--- a/compound/02-molecules/tabs/tabs.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-tabs:
- - tab_text: 'Tab 1'
- tab_content: 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
- - tab_text: 'Tab 2'
- tab_content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
- - tab_text: 'Tab 3'
- tab_content: 'Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'
diff --git a/compound/03-organisms/grid/_grid-examples.twig b/compound/03-organisms/grid/_grid-examples.twig
deleted file mode 100644
index e17b319..0000000
--- a/compound/03-organisms/grid/_grid-examples.twig
+++ /dev/null
@@ -1,25 +0,0 @@
-{# Since the card and cta components aren't required, we can't expect them to be here by default #}
-
-{# {% if item_type == 'card' %}
- {% include "@molecules/card/card.twig" with {
- card__extra_classes: ['grid__item'],
- card__blockname: item.card__blockname,
- card__modifiers: item.card__modifiers,
- card__image__src: item.card__image__src,
- card__image__alt: item.card__image__alt,
- card__heading: item.card__heading,
- card__subheading: item.card__subheading,
- card__body: item.card__body,
- card__link__url: item.card__link__url,
- card__link__text: item.card__link__text,
- card__image__output_image_tag: item.card__image__output_image_tag,
- } %}
-{% elseif item_type == 'cta' %}
- {% include "@molecules/cta/cta.twig" with {
- cta__extra_classes: ['grid__item'],
- cta__heading: item.cta__heading,
- cta__button_text: item.cta__button_text,
- } %}
-{% else %} #}
-
-{# {% endif %} #}
diff --git a/compound/03-organisms/grid/_grid-item.scss b/compound/03-organisms/grid/_grid-item.scss
deleted file mode 100644
index 47e6265..0000000
--- a/compound/03-organisms/grid/_grid-item.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@mixin grid-item {
- flex: 1 1 100%;
- margin-bottom: $space-double;
-
- @include large {
- margin: 0 $space-double 0 0;
- flex-basis: 30%;
- }
-
- &:last-child {
- margin-right: 0;
- }
-}
-
-.grid__item {
- @include grid-item;
-
- /* This is just for the component library example */
- &--example {
- background-color: clr(highlight-high);
- padding: $space-quadruple;
- }
-}
diff --git a/compound/03-organisms/grid/_grid.scss b/compound/03-organisms/grid/_grid.scss
deleted file mode 100644
index ac2e8e9..0000000
--- a/compound/03-organisms/grid/_grid.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-@mixin grid {
- display: flex;
- flex-wrap: wrap;
-}
-
-.grid {
- @include grid;
-
- &--card {
- @include space-stack-page;
- }
-}
diff --git a/compound/03-organisms/grid/grid-cards.yml b/compound/03-organisms/grid/grid-cards.yml
deleted file mode 100644
index f33417c..0000000
--- a/compound/03-organisms/grid/grid-cards.yml
+++ /dev/null
@@ -1,24 +0,0 @@
-grid_label: 'Card Grid'
-grid_type: 'card'
-item_type: 'card'
-items:
- - card__image__src: 'https://placeimg.com/480/300/people'
- card__image__alt: 'People'
- card__image__output_image_tag: true
- card__heading: 'Super Awesome Card'
- card__link__url: '#'
- card__link__text: 'Click here'
- card__subheading: 'Person of Interest'
- card__body: 'Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Pellentesque in ipsum id orci porta dapibus. Nulla quis lorem ut libero malesuada feugiat. Nulla quis lorem ut libero malesuada feugiat.'
- - card__image__src: 'https://placeimg.com/480/300/nature'
- card__image__alt: 'Nature'
- card__image__output_image_tag: true
- card__heading: 'Card Number Two'
- card__subheading: 'Some pretty sweet nature'
- card__body: 'Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat. Vivamus magna justo.'
- - card__image__src: 'https://placeimg.com/480/300/animals'
- card__image__alt: 'Animals'
- card__image__output_image_tag: true
- card__heading: 'The Last Card Heading'
- card__subheading: 'Awesome animals'
- card__body: 'Tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Proin eget tortor risus. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.. Nulla quis lorem ut libero malesuada feugiat.'
diff --git a/compound/03-organisms/grid/grid-ctas.yml b/compound/03-organisms/grid/grid-ctas.yml
deleted file mode 100644
index 8efaa47..0000000
--- a/compound/03-organisms/grid/grid-ctas.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-grid_label: 'CTA Grid'
-item_type: 'cta'
-items:
- - cta__heading: 'This is an awesome CTA'
- cta__button_text: 'Click me!'
- - cta__heading: 'This is an even better CTA!!'
- cta__button_text: 'No, click me!'
- - cta__heading: 'This is a boring CTA'
- cta__button_text: 'Click me, I guess...'
diff --git a/compound/03-organisms/grid/grid.twig b/compound/03-organisms/grid/grid.twig
deleted file mode 100644
index d2d5485..0000000
--- a/compound/03-organisms/grid/grid.twig
+++ /dev/null
@@ -1,27 +0,0 @@
-{% set grid_base_class = grid_base_class|default('grid') %}
-
-{% if not grid_modifiers %}
- {% set grid_modifiers = [] %}
-{% endif %}
-
-{% if page_layout_modifier %}
- {% set grid_modifiers = grid_modifiers|merge([page_layout_modifier]) %}
-{% endif %}
-
-{% if grid_type %}
- {% set grid_modifiers = grid_modifiers|merge([grid_type]) %}
-{% endif %}
-
-{% if grid_label %}
- {% include "@atoms/text/headings/_heading.twig" with {
- "heading_level": 2,
- "heading": grid_label,
- } %}
-{% endif %}
-
- {% block grid_content %}
- {% for item in items %}
- {% include "@organisms/grid/_grid-examples.twig" %}
- {% endfor %}
- {% endblock %}
-
`;
diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig
new file mode 100644
index 0000000..3da9053
--- /dev/null
+++ b/src/components/announcement/announcement.twig
@@ -0,0 +1,47 @@
+{#
+/**
+ * Available Variables:
+ * - announcement__title: The title of the announcement.
+ * - announcement__content: The main content of the announcement.
+ * - announcement__button_text: The text displayed on the announcement button.
+ * - announcement__button_url: The URL that the announcement button links to.
+ * - announcement__icon: (Optional) The URL of the icon image for the announcement.
+ * - announcement__modifiers: An array of modifier classes to apply to the announcement container.
+ * - additional_attributes: Additional HTML attributes for the announcement container.
+ */
+#}
+
+{% set announcement__base_class = 'announcement' %}
+{% set additional_attributes = additional_attributes|default() %}
+{% set announcement__variant = announcement__variant|default('default') %}
+
+
+ {# Render the icon if provided #}
+ {% if announcement__icon %}
+ {% include "@components/image/responsive-image.twig" with {
+ image_alt: 'icon',
+ output_image_tag: true,
+ image_src: announcement__icon,
+ responsive_image_blockname: announcement__base_class,
+ } %}
+ {% endif %}
+ {# Render the main content #}
+
+ {% include "@components/text/headings/heading.twig" with {
+ heading__level: announcement__heading__level|default('4'),
+ heading: announcement__title,
+ } %}
+
{{ announcement__content }}
+
+ {# Render the action button #}
+ {% if announcement__button_text and announcement__button_url %}
+
diff --git a/src/components/audio-player/audio-player.component.yml b/src/components/audio-player/audio-player.component.yml
new file mode 100644
index 0000000..286ee1b
--- /dev/null
+++ b/src/components/audio-player/audio-player.component.yml
@@ -0,0 +1,18 @@
+# ball audio file by marini24 under CC 3.0
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Audio Player
+group: Components/Media
+status: stable
+props:
+ type: object
+ required:
+ - audio_content
+ properties:
+ audio_content:
+ type: array
+ title: Audio player content
+ description: The content of the audio players.
+ data:
+ - '../../media/ball.ogg'
+ - '../../media/ball.mp3'
diff --git a/src/components/audio-player/_audio-player.scss b/src/components/audio-player/audio-player.scss
similarity index 100%
rename from src/components/audio-player/_audio-player.scss
rename to src/components/audio-player/audio-player.scss
diff --git a/src/components/audio-player/audio-player.stories.js b/src/components/audio-player/audio-player.stories.js
index 77f5d36..245ce77 100644
--- a/src/components/audio-player/audio-player.stories.js
+++ b/src/components/audio-player/audio-player.stories.js
@@ -1,12 +1,14 @@
import template from './audio-player.twig';
-import audioData from './audio-player.yml';
-import figma from '../../../.storybook/configma.json';
+import { props } from './audio-player.component.yml';
+import figma from '../../../config/configma.json';
+
+const audioData = props.properties.audio_content.data;
export default {
title: 'Components/Media/Audio Player',
};
-export const AudioPlayer = () => template(audioData);
+export const AudioPlayer = () => template({ audio_content: audioData });
AudioPlayer.parameters = {
design: {
diff --git a/src/components/audio-player/audio-player.yml b/src/components/audio-player/audio-player.yml
deleted file mode 100644
index 9b065be..0000000
--- a/src/components/audio-player/audio-player.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-# ball audio file by marini24 under CC 3.0
-audio_content:
- - 'static/media/src/media/ball.mp3'
- - 'static/media/src/media/ball.ogg'
diff --git a/src/components/blockquote/blockquote.component.yml b/src/components/blockquote/blockquote.component.yml
new file mode 100644
index 0000000..d641f19
--- /dev/null
+++ b/src/components/blockquote/blockquote.component.yml
@@ -0,0 +1,21 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Blockquote
+group: Components
+status: stable
+props:
+ type: object
+ required:
+ - block_quote__quote
+ - block_quote__attribution
+ properties:
+ block_quote__quote:
+ type: string
+ title: Quote
+ description: The quote/content of the blockquote item.
+ data:
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.
+ block_quote__attribution:
+ type: string
+ title: Attribution
+ description: The attribution of the blockquote item.
+ data: 'Lorem Ipsum'
diff --git a/src/components/blockquote/_blockquote.scss b/src/components/blockquote/blockquote.scss
similarity index 100%
rename from src/components/blockquote/_blockquote.scss
rename to src/components/blockquote/blockquote.scss
diff --git a/src/components/blockquote/blockquote.stories.js b/src/components/blockquote/blockquote.stories.js
index 92a0fc7..6b4434c 100644
--- a/src/components/blockquote/blockquote.stories.js
+++ b/src/components/blockquote/blockquote.stories.js
@@ -1,6 +1,8 @@
import blockquoteTwig from './blockquote.twig';
-import blockquoteData from './blockquote.yml';
+import { props } from './blockquote.component.yml';
+
+const blockquoteData = props.properties;
/**
* Storybook Definition.
@@ -11,12 +13,12 @@ export default {
quote: {
name: 'Quote',
type: 'string',
- defaultValue: blockquoteData.block_quote__quote,
+ defaultValue: blockquoteData.block_quote__quote.data,
},
attribution: {
name: 'Attribution',
type: 'string',
- defaultValue: blockquoteData.block_quote__attribution,
+ defaultValue: blockquoteData.block_quote__attribution.data,
},
style: {
name: 'Style',
@@ -27,25 +29,25 @@ export default {
ariaLabel: {
name: 'aria-label attribute',
type: 'string',
- defaultValue: blockquoteData.block_quote__aria_label,
+ defaultValue: 'Block Quote default value with bar graphic to the left',
},
},
};
export const blockquote = ({ style, quote, attribution, ariaLabel }) => `
${blockquoteTwig({
- block_quote__quote: blockquoteData.block_quote__quote,
- block_quote__attribution: blockquoteData.block_quote__attribution,
+ block_quote__quote: blockquoteData.block_quote__quote.data,
+ block_quote__attribution: blockquoteData.block_quote__attribution.data,
block_quote__aria_label: 'Block Quote with bar graphic to the left',
})}
${blockquoteTwig({
- block_quote__quote: blockquoteData.block_quote__quote,
+ block_quote__quote: blockquoteData.block_quote__quote.data,
block_quote__style: 'bar-right',
block_quote__aria_label: 'Block Quote with bar graphic to the right',
})}
${blockquoteTwig({
- block_quote__quote: blockquoteData.block_quote__quote,
- block_quote__attribution: blockquoteData.block_quote__attribution,
+ block_quote__quote: blockquoteData.block_quote__quote.data,
+ block_quote__attribution: blockquoteData.block_quote__attribution.data,
block_quote__style: 'quote-left',
block_quote__aria_label: 'Block Quote with quote icon to the left',
})}
diff --git a/src/components/blockquote/blockquote.yml b/src/components/blockquote/blockquote.yml
deleted file mode 100644
index d7f60ee..0000000
--- a/src/components/blockquote/blockquote.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-block_quote__quote:
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available.