diff --git a/components/02-molecules/event-card/event-card.component.yml b/components/02-molecules/event-card/event-card.component.yml
index df0b17d102bee8bee4fc7385c03e9eb824002d95..17fb587b334d0c16d46bd7010fc2c83f75ab2bdc 100644
--- a/components/02-molecules/event-card/event-card.component.yml
+++ b/components/02-molecules/event-card/event-card.component.yml
@@ -2,7 +2,7 @@
name: Event card
-status: experimental
+status: obsolete
group: Molecules
diff --git a/components/03-organisms/campaign/campaign.component.yml b/components/03-organisms/campaign/campaign.component.yml
index f69168437b5ec158112aaf4c7179f3e6de4da093..8637271121b70a8dbc1851b3481e6fbfbbf0ced6 100644
--- a/components/03-organisms/campaign/campaign.component.yml
+++ b/components/03-organisms/campaign/campaign.component.yml
@@ -2,7 +2,7 @@
name: Campaign
-status: experimental
+status: obsolete
group: Organisms
diff --git a/components/03-organisms/campaign2/campaign2.component.yml b/components/03-organisms/campaign2/campaign2.component.yml
index 60cac91741c721ead8a426f9a6a1abfed8ff7fc5..3662cf5d07e0cea829a717acd93de07d7dc87f23 100644
--- a/components/03-organisms/campaign2/campaign2.component.yml
+++ b/components/03-organisms/campaign2/campaign2.component.yml
@@ -2,7 +2,7 @@
name: Testing title with image
-status: experimental
+status: obsolete
group: Organisms
diff --git a/starshot_demo/assets/starshot/starshot_background_1.png b/starshot_demo/assets/starshot/background_1.png
similarity index 100%
rename from starshot_demo/assets/starshot/starshot_background_1.png
rename to starshot_demo/assets/starshot/background_1.png
diff --git a/starshot_demo/components/00-base/old-starshot-one-col/README.md b/starshot_demo/components/00-base/starshot-container/README.md
similarity index 72%
rename from starshot_demo/components/00-base/old-starshot-one-col/README.md
rename to starshot_demo/components/00-base/starshot-container/README.md
index 73bc8dc7ed12e6d43313c39221123d30a38aae18..deac429b937ffcf2d66d2dce0597d37d025b0694 100644
--- a/starshot_demo/components/00-base/old-starshot-one-col/README.md
+++ b/starshot_demo/components/00-base/starshot-container/README.md
@@ -1,7 +1,6 @@
+# Starshot Container
-# Starshot one col
-
-This is the starshot one col component.
+This is the Starshot Container component.
## Usage
diff --git a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.component.yml b/starshot_demo/components/00-base/starshot-container/starshot-container.component.yml
similarity index 58%
rename from starshot_demo/components/00-base/old-starshot-container/old-starshot-container.component.yml
rename to starshot_demo/components/00-base/starshot-container/starshot-container.component.yml
index 9e324b054c9c959a028fa27e4f5edadc6c22c05f..6c2c8e047846cc3f96b3d9698c2e5cbe636b47d9 100644
--- a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.component.yml
+++ b/starshot_demo/components/00-base/starshot-container/starshot-container.component.yml
@@ -1,8 +1,8 @@
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
-name: Old Starshot Container
+name: Starshot Container
-status: obsolete
+status: experimental
group: Base
@@ -11,19 +11,17 @@ props:
type: object
properties:
- content:
- type: string
- title: Content
- description: Inner content HTML.
- examples:
- - '<strong>sample html content</strong>'
background_url:
type: string
- title: Background url
- description: Background URL.
+ title: The background image URL.
+ enum:
+ - '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/background_1.png'
+ - '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/background_2.png'
+ default: '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/background_2.png'
examples:
- - '/assets/starshot/starshot_background_1.png'
+ - '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/background_2.png'
+ - '/themes/contrib/demo_design_system/starshot_demo/assets/starshot/background_1.png'
constrain:
type: boolean
@@ -61,3 +59,12 @@ props:
description: Additional classes.
examples:
- 'custom-class'
+
+slots:
+
+ content:
+ type: string
+ title: Content
+ description: Content slot.
+ #examples:
+ # - '<strong>sample html content</strong>'
diff --git a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.scss b/starshot_demo/components/00-base/starshot-container/starshot-container.scss
similarity index 81%
rename from starshot_demo/components/00-base/old-starshot-container/old-starshot-container.scss
rename to starshot_demo/components/00-base/starshot-container/starshot-container.scss
index 3df7d7008d8fde1325eade657a3de3ea4dba904a..51b94f31ad3d0604604c7caa39c8d5f24c39125a 100644
--- a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.scss
+++ b/starshot_demo/components/00-base/starshot-container/starshot-container.scss
@@ -2,7 +2,7 @@
// Starshot container component.
//
-.ct-old-starshot-container {
+.ct-starshot-container {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
diff --git a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.stories.js b/starshot_demo/components/00-base/starshot-container/starshot-container.stories.js
similarity index 86%
rename from starshot_demo/components/00-base/old-starshot-container/old-starshot-container.stories.js
rename to starshot_demo/components/00-base/starshot-container/starshot-container.stories.js
index 556fcea412d026f01fb40a6fbc34891d2dc1aa26..8c507d3528df83c9e0575e9a44e9aa3f3244acf7 100644
--- a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.stories.js
+++ b/starshot_demo/components/00-base/starshot-container/starshot-container.stories.js
@@ -1,15 +1,15 @@
// phpcs:ignoreFile
import { knobText, knobBoolean, knobRadios, shouldRender, slotKnobs, randomText } from '../../00-base/storybook/storybook.utils';
-import CivicThemeStarshotContainer from './old-starshot-container.twig';
+import CivicThemeStarshotContainer from './starshot-container.twig';
export default {
- title: 'Base/Starshot Layout/Old Starshot Container',
+ title: 'Base/Starshot Layout/Starshot Container',
parameters: {
layout: 'fullscreen',
},
};
-export const OldStarshotContainer = (parentKnobs = {}) => {
+export const StarshotContainer = (parentKnobs = {}) => {
const props = {
content: knobText('Content', randomText(10), parentKnobs.content, parentKnobs.knobTab),
background_url: knobText('Background URL', 'assets/starshot/starshot_background_1.png', parentKnobs.background_url, parentKnobs.knobTab),
diff --git a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.twig b/starshot_demo/components/00-base/starshot-container/starshot-container.twig
similarity index 96%
rename from starshot_demo/components/00-base/old-starshot-container/old-starshot-container.twig
rename to starshot_demo/components/00-base/starshot-container/starshot-container.twig
index 802fb68d3473e9a915a5bc421e3befd063da7acd..bd6f51ede803231f56f35e8fab1cc6566c657e31 100644
--- a/starshot_demo/components/00-base/old-starshot-container/old-starshot-container.twig
+++ b/starshot_demo/components/00-base/starshot-container/starshot-container.twig
@@ -21,7 +21,7 @@
{% set modifier_class = '%s %s %s'|format(vertical_spacing_class, vertical_spacing_inner_class, modifier_class|default('')) %}
<div
- class="ct-old-starshot-container {{ modifier_class -}}"
+ class="ct-starshot-container {{ modifier_class -}}"
{% if attributes is not empty %}{{- attributes|raw -}}{% endif %}
{% if background_url is not empty %}style="background-image: url('{{- background_url|raw -}}')"{% endif %}
>
diff --git a/starshot_demo/components/00-base/starshot-four-col/README.md b/starshot_demo/components/00-base/starshot-four-col/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..14e3ca7ed9bac1dd7e58a8eebac9345d7ff71090
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-four-col/README.md
@@ -0,0 +1,8 @@
+# Starshot Four Column
+
+This is the Starshot Four Column component.
+
+## Usage
+
+This component can be used within Experience Builder and other page builders
+that support SDC. It can also be added to other components and theme templates.
diff --git a/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.component.yml b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..ed9dbc30aaa5ce24cc4f6a047d19d4cfad405189
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.component.yml
@@ -0,0 +1,38 @@
+'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
+
+name: Starshot Four Column
+
+status: experimental
+
+group: Base
+
+props:
+
+ type: object
+ properties: {}
+
+slots:
+
+ column_one:
+ title: Column one
+ description: First column slot.
+ #examples:
+ # - '<p>column_one</p>'
+
+ column_two:
+ title: Column two
+ description: Second column slot.
+ #examples:
+ # - '<p>column_two</p>'
+
+ column_three:
+ title: Column three
+ description: Third column slot.
+ #examples:
+ # - '<p>column_three</p>'
+
+ column_four:
+ title: Column four
+ description: Fourth column slot.
+ #examples:
+ # - '<p>column_four</p>'
diff --git a/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.js b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..1b15987b1d36e20b72aa7ae5583809e549c0b755
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.js
@@ -0,0 +1,23 @@
+// phpcs:ignoreFile
+import { knobBoolean, shouldRender } from '../../00-base/storybook/storybook.utils';
+import CivicThemeStarshotFourColStory from './starshot-four-col.stories.twig';
+
+export default {
+ title: 'Base/Starshot Layout/Starshot Four Col',
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export const StarshotFourCol = (parentKnobs = {}) => {
+ const props = {
+ show_column_one: knobBoolean('Show column one', true, parentKnobs.show_column_one, parentKnobs.knobTab),
+ show_column_two: knobBoolean('Show column two', true, parentKnobs.show_column_two, parentKnobs.knobTab),
+ show_column_three: knobBoolean('Show column three', true, parentKnobs.show_column_three, parentKnobs.knobTab),
+ show_column_four: knobBoolean('Show column four', true, parentKnobs.show_column_four, parentKnobs.knobTab),
+ };
+
+ return shouldRender(parentKnobs) ? CivicThemeStarshotFourColStory({
+ ...props,
+ }) : props;
+};
diff --git a/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.twig b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.twig
new file mode 100644
index 0000000000000000000000000000000000000000..02070007bd1bde5f9d27685064a766baa20863be
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.stories.twig
@@ -0,0 +1,25 @@
+{% embed '@base/starshot-four-col/starshot-four-col.twig' %}
+ {% if show_column_one %}
+ {% block column_one %}
+ <div class="story-placeholder">Column 1</div>
+ {% endblock %}
+ {% endif %}
+
+ {% if show_column_two %}
+ {% block column_two %}
+ <div class="story-placeholder">Column 2</div>
+ {% endblock %}
+ {% endif %}
+
+ {% if show_column_three %}
+ {% block column_three %}
+ <div class="story-placeholder">Column 3</div>
+ {% endblock %}
+ {% endif %}
+
+ {% if show_column_four %}
+ {% block column_four %}
+ <div class="story-placeholder">Column 4</div>
+ {% endblock %}
+ {% endif %}
+{% endembed %}
diff --git a/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.twig b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..3bdbbe7c3d8e9a535bafaed4785de63246080ae7
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-four-col/starshot-four-col.twig
@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Starshot Four Column component.
+ *
+ * Variables:
+ * - column_one: [string] First column slot.
+ * - column_two: [string] Second column slot.
+ * - column_three: [string] Third column slot.
+ * - column_four: [string] Fourth column slot.
+ */
+#}
+
+{% set column_one %}
+ {% block column_one %}
+ {% endblock %}
+{% endset %}
+
+{% set column_two %}
+ {% block column_two %}
+ {% endblock %}
+{% endset %}
+
+{% set column_three %}
+ {% block column_three %}
+ {% endblock %}
+{% endset %}
+
+{% set column_four %}
+ {% block column_four %}
+ {% endblock %}
+{% endset %}
+
+{% include '@base/grid/grid.twig' with {
+ items: [column_one, column_two, column_three, column_four],
+ column_class: 'col-xxs-12 col-l-3',
+ row_class: 'row--equal-heights-content row--vertically-spaced',
+} only %}
diff --git a/starshot_demo/components/00-base/old-starshot-container/README.md b/starshot_demo/components/00-base/starshot-one-col/README.md
similarity index 72%
rename from starshot_demo/components/00-base/old-starshot-container/README.md
rename to starshot_demo/components/00-base/starshot-one-col/README.md
index 4d5bcc594665c190c74347bd11ad59e3f2927990..a96e8a064606735024b4d4bda1169ce003c7b201 100644
--- a/starshot_demo/components/00-base/old-starshot-container/README.md
+++ b/starshot_demo/components/00-base/starshot-one-col/README.md
@@ -1,7 +1,6 @@
+# Starshot One Column
-# Starshot container
-
-This is the starshot container component.
+This is the Starshot One Column component.
## Usage
diff --git a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.component.yml b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.component.yml
similarity index 77%
rename from starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.component.yml
rename to starshot_demo/components/00-base/starshot-one-col/starshot-one-col.component.yml
index 33087c1446ec018801176c59fce84546311fdded..5b0607f90d6f8c2a99b79d9ce9e4b45db61b38e2 100644
--- a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.component.yml
+++ b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.component.yml
@@ -1,6 +1,6 @@
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
-name: Old Starshot One Column
+name: Starshot One Column
status: experimental
@@ -16,5 +16,5 @@ slots:
column_one:
title: Column one
description: First column slot.
- #examples:
- #- '<p>column_one</p>'
+ #examples:
+ # - '<p>column_one</p>'
diff --git a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.js b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.js
similarity index 67%
rename from starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.js
rename to starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.js
index 3b935a15b058b6bec18d0f96010b4cd1d6bc680e..55ed6f21c21d55b3b192bb78bb74eadb270597cb 100644
--- a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.js
+++ b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.js
@@ -1,15 +1,15 @@
// phpcs:ignoreFile
import { knobBoolean, shouldRender } from '../../00-base/storybook/storybook.utils';
-import CivicThemeStarshotOneColStory from './old-starshot-one-col.stories.twig';
+import CivicThemeStarshotOneColStory from './starshot-one-col.stories.twig';
export default {
- title: 'Base/Starshot Layout/Old Starshot One Col',
+ title: 'Base/Starshot Layout/Starshot One Col',
parameters: {
layout: 'fullscreen',
},
};
-export const OldStarshotOneCol = (parentKnobs = {}) => {
+export const StarshotOneCol = (parentKnobs = {}) => {
const props = {
show_column_one: knobBoolean('With column one', true, parentKnobs.show_column_one, parentKnobs.knobTab),
};
diff --git a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.twig b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.twig
similarity index 69%
rename from starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.twig
rename to starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.twig
index 901c76c5b080a7f44120de59fc5484946bb9eddb..901c1b87c6e391a4eed4927f370222a86976418f 100644
--- a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.stories.twig
+++ b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.stories.twig
@@ -1,4 +1,4 @@
-{% embed '@base/old-starshot-one-col/old-starshot-one-col.twig' %}
+{% embed '@base/starshot-one-col/starshot-one-col.twig' %}
{% if show_column_one %}
{% block column_one %}
<div class="story-placeholder">Column 1</div>
diff --git a/starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.twig b/starshot_demo/components/00-base/starshot-one-col/starshot-one-col.twig
similarity index 100%
rename from starshot_demo/components/00-base/old-starshot-one-col/old-starshot-one-col.twig
rename to starshot_demo/components/00-base/starshot-one-col/starshot-one-col.twig
diff --git a/starshot_demo/components/00-base/starshot-three-col/README.md b/starshot_demo/components/00-base/starshot-three-col/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..7cc9dddbda095dd5d6731a8fb75d35069a16a0f5
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-three-col/README.md
@@ -0,0 +1,8 @@
+# Starshot Three Column
+
+This is the Starshot Three Column component.
+
+## Usage
+
+This component can be used within Experience Builder and other page builders
+that support SDC. It can also be added to other components and theme templates.
diff --git a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.component.yml b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.component.yml
similarity index 70%
rename from starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.component.yml
rename to starshot_demo/components/00-base/starshot-three-col/starshot-three-col.component.yml
index 147b29691dfb614b5263430701850806f5071aaf..9ec1363e201baca24d21f8616ad0f9924907400f 100644
--- a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.component.yml
+++ b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.component.yml
@@ -1,6 +1,6 @@
'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
-name: Old Starshot Three Column
+name: Starshot Three Column
status: experimental
@@ -16,17 +16,17 @@ slots:
column_one:
title: Column one
description: First column slot.
- #examples:
- #- '<p>column_one</p>'
+ #examples:
+ # - '<p>column_one</p>'
column_two:
title: Column two
description: Second column slot.
- #examples:
- #- '<p>column_two</p>'
+ #examples:
+ # - '<p>column_two</p>'
column_three:
title: Column three
description: Third column slot.
- #examples:
- #- '<p>column_three</p>'
+ #examples:
+ # - '<p>column_three</p>'
diff --git a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.js b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.js
similarity index 75%
rename from starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.js
rename to starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.js
index 7f71800e68cd8a04188be8f4d04e8a9468968cc5..e9b491864b2453a2f9013416f559a57f090ff0be 100644
--- a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.js
+++ b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.js
@@ -1,15 +1,15 @@
// phpcs:ignoreFile
import { knobBoolean, shouldRender } from '../../00-base/storybook/storybook.utils';
-import CivicThemeStarshotThreeColStory from './old-starshot-three-col.stories.twig';
+import CivicThemeStarshotThreeColStory from './starshot-three-col.stories.twig';
export default {
- title: 'Base/Starshot Layout/Old Starshot Three Col',
+ title: 'Base/Starshot Layout/Starshot Three Col',
parameters: {
layout: 'fullscreen',
},
};
-export const OldStarshotThreeCol = (parentKnobs = {}) => {
+export const StarshotThreeCol = (parentKnobs = {}) => {
const props = {
show_column_one: knobBoolean('Show column one', true, parentKnobs.show_column_one, parentKnobs.knobTab),
show_column_two: knobBoolean('Show column two', true, parentKnobs.show_column_two, parentKnobs.knobTab),
diff --git a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.twig b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.twig
similarity index 86%
rename from starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.twig
rename to starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.twig
index 9ec1b18520368392582f2d9223a35a7e660f1de8..1f1dbfb948b8d87ff6094e3a10e794e2a35a37f5 100644
--- a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.stories.twig
+++ b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.stories.twig
@@ -1,4 +1,4 @@
-{% embed '@base/old-starshot-three-col/old-starshot-three-col.twig' %}
+{% embed '@base/starshot-three-col/starshot-three-col.twig' %}
{% if show_column_one %}
{% block column_one %}
<div class="story-placeholder">Column 1</div>
diff --git a/starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.twig b/starshot_demo/components/00-base/starshot-three-col/starshot-three-col.twig
similarity index 100%
rename from starshot_demo/components/00-base/old-starshot-three-col/old-starshot-three-col.twig
rename to starshot_demo/components/00-base/starshot-three-col/starshot-three-col.twig
diff --git a/starshot_demo/components/00-base/old-starshot-three-col/README.md b/starshot_demo/components/00-base/starshot-two-col/README.md
similarity index 72%
rename from starshot_demo/components/00-base/old-starshot-three-col/README.md
rename to starshot_demo/components/00-base/starshot-two-col/README.md
index 5a46a69ac9695d3ffe735cc8384f0606fa783f04..96893fc464b8f996198056ef0941deee3e294de0 100644
--- a/starshot_demo/components/00-base/old-starshot-three-col/README.md
+++ b/starshot_demo/components/00-base/starshot-two-col/README.md
@@ -1,7 +1,6 @@
+# Starshot Two Column
-# Starshot three col
-
-This is the starshot three col component.
+This is the Starshot Two Column component.
## Usage
diff --git a/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.component.yml b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1c2cf7c8a30be6acb1103f78edbb1d5ae5e78ddf
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.component.yml
@@ -0,0 +1,26 @@
+'$schema': 'https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json'
+
+name: Starshot Two Column
+
+status: experimental
+
+group: Base
+
+props:
+
+ type: object
+ properties: {}
+
+slots:
+
+ column_one:
+ title: Column one
+ description: First column slot.
+ #examples:
+ # - '<p>column_one</p>'
+
+ column_two:
+ title: Column two
+ description: Second column slot.
+ #examples:
+ # - '<p>column_two</p>'
diff --git a/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.js b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.js
new file mode 100644
index 0000000000000000000000000000000000000000..dd6c0d0a5d6c3d5f8c679038a00c370b43937f84
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.js
@@ -0,0 +1,21 @@
+// phpcs:ignoreFile
+import { knobBoolean, shouldRender } from '../../00-base/storybook/storybook.utils';
+import CivicThemeStarshotTwoColStory from './starshot-two-col.stories.twig';
+
+export default {
+ title: 'Base/Starshot Layout/Starshot Two Col',
+ parameters: {
+ layout: 'fullscreen',
+ },
+};
+
+export const StarshotTwoCol = (parentKnobs = {}) => {
+ const props = {
+ show_column_one: knobBoolean('Show column one', true, parentKnobs.show_column_one, parentKnobs.knobTab),
+ show_column_two: knobBoolean('Show column two', true, parentKnobs.show_column_two, parentKnobs.knobTab),
+ };
+
+ return shouldRender(parentKnobs) ? CivicThemeStarshotTwoColStory({
+ ...props,
+ }) : props;
+};
diff --git a/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.twig b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.twig
new file mode 100644
index 0000000000000000000000000000000000000000..112e17c83fc29f383b042d1a560dcc924b3fda92
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.stories.twig
@@ -0,0 +1,13 @@
+{% embed '@base/starshot-two-col/starshot-two-col.twig' %}
+ {% if show_column_one %}
+ {% block column_one %}
+ <div class="story-placeholder">Column 1</div>
+ {% endblock %}
+ {% endif %}
+
+ {% if show_column_two %}
+ {% block column_two %}
+ <div class="story-placeholder">Column 2</div>
+ {% endblock %}
+ {% endif %}
+{% endembed %}
diff --git a/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.twig b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ce37a3c0be922e0da3b558c466b0c09ce2d9f611
--- /dev/null
+++ b/starshot_demo/components/00-base/starshot-two-col/starshot-two-col.twig
@@ -0,0 +1,26 @@
+{#
+/**
+ * @file
+ * Starshot Two Column component.
+ *
+ * Variables:
+ * - column_one: [string] First column slot.
+ * - column_two: [string] Second column slot.
+ */
+#}
+
+{% set column_one %}
+ {% block column_one %}
+ {% endblock %}
+{% endset %}
+
+{% set column_two %}
+ {% block column_two %}
+ {% endblock %}
+{% endset %}
+
+{% include '@base/grid/grid.twig' with {
+ items: [column_one, column_two],
+ column_class: 'col-xxs-12 col-l-6',
+ row_class: 'row--equal-heights-content row--vertically-spaced',
+} only %}
diff --git a/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.component.yml b/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.component.yml
index 6e1af50efd26c8cf9cb281fe85d657100fa11e52..f6108f8af3ef132d4c67694f4ce3932f2d321181 100644
--- a/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.component.yml
+++ b/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.component.yml
@@ -47,3 +47,18 @@ props:
- 'With no vendor lock-in and low-code/no-code options available, marketers can independently drive your digital strategy and publishing workflows.'
- 'A fully composable, API-first platform that allows you to design around your vision and your user needs. A global network of open source contributors continuously develops and innovates on core features.'
- 'The most accessible, secure open-source DXP available. It adheres to industry standard privacy and security standards and checks all the boxes for your IT team.'
+
+ #background:
+ #type: string
+ #title: Background
+ #description: Color for the background.
+ #default: none
+ #enum:
+ #- 'background-1'
+ #- 'background-2'
+ #- 'background-3'
+ #- 'background-4'
+ #- 'background-5'
+ #- 'background-6'
+ #examples:
+ #- 'background-2'
diff --git a/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.twig b/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.twig
index 25100361bdebe9a3abe1b7ef1123cf0f2af1c789..7fc006ba79c8985b44512459b7611dc47af51172 100644
--- a/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.twig
+++ b/starshot_demo/components/02-molecules/starshot-icon-card/starshot-icon-card.twig
@@ -12,6 +12,8 @@
*/
#}
+{% set background = background|default('none') %}
+
<div class="starshot-icon-card">
{% if image %}
<img class="starshot-icon-card__image" src="{{ image.src }}" alt="{{ image.alt }}" />
diff --git a/starshot_demo/components/04-templates/old-starshot/old-starshot.stories.twig b/starshot_demo/components/04-templates/old-starshot/old-starshot.stories.twig
index 3df327abf5d35b4f9201ae49fba766beb21d119a..a0ecf8249295395c84f7ea7bee2d0420b5a8cf75 100644
--- a/starshot_demo/components/04-templates/old-starshot/old-starshot.stories.twig
+++ b/starshot_demo/components/04-templates/old-starshot/old-starshot.stories.twig
@@ -15,7 +15,7 @@
{% endif %}
{% if show_icons %}
- {% embed '@base/old-starshot-container/old-starshot-container.twig' with {constrain: true} %}
+ {% embed '@base/starshot-container/starshot-container.twig' with {constrain: true} %}
{% block content %}
{% include '@atoms/old-starshot-heading/old-starshot-heading.twig' with {
theme: theme,
@@ -24,7 +24,7 @@
align: 'center',
content: 'Build Outside The Box',
} only %}
- {% embed '@base/old-starshot-three-col/old-starshot-three-col.twig' %}
+ {% embed '@base/starshot-three-col/starshot-three-col.twig' %}
{% block column_one %}
{% include '@molecules/old-starshot-card/old-starshot-card.twig' with {
theme: theme,
@@ -95,9 +95,9 @@
{% endif %}
{% if show_nav_cards %}
- {% embed '@base/old-starshot-container/old-starshot-container.twig' with {constrain: true, background_url: 'assets/starshot/starshot_background_1.png'} %}
+ {% embed '@base/starshot-container/starshot-container.twig' with {constrain: true, background_url: 'assets/starshot/background_1.png'} %}
{% block content %}
- {% embed '@base/old-starshot-one-col/old-starshot-one-col.twig' %}
+ {% embed '@base/starshot-one-col/starshot-one-col.twig' %}
{% block column_one %}
{% include '@molecules/old-starshot-card/old-starshot-card.twig' with {
theme: theme,
@@ -109,7 +109,7 @@
} only %}
{% endblock %}
{% endembed %}
- {% embed '@base/old-starshot-three-col/old-starshot-three-col.twig' %}
+ {% embed '@base/starshot-three-col/starshot-three-col.twig' %}
{% block column_one %}
{% include '@molecules/old-starshot-card/old-starshot-card.twig' with {
theme: theme,
@@ -143,7 +143,7 @@
{% endif %}
{% if show_resources %}
- {% embed '@base/old-starshot-container/old-starshot-container.twig' with {constrain: true} %}
+ {% embed '@base/starshot-container/starshot-container.twig' with {constrain: true} %}
{% block content %}
{% include '@atoms/old-starshot-heading/old-starshot-heading.twig' with {
theme: theme,
@@ -157,7 +157,7 @@
color: 'body-2',
content: 'Learn about Drupal\'s technical benefits and upgrading',
} only %}
- {% embed '@base/old-starshot-three-col/old-starshot-three-col.twig' %}
+ {% embed '@base/starshot-three-col/starshot-three-col.twig' %}
{% block column_one %}
{% include '@molecules/old-starshot-card/old-starshot-card.twig' with {
title: 'Demo 1',
@@ -183,7 +183,7 @@
} only %}
{% endblock %}
{% endembed %}
- {% embed '@base/old-starshot-three-col/old-starshot-three-col.twig' %}
+ {% embed '@base/starshot-three-col/starshot-three-col.twig' %}
{% block column_one %}
{% include '@molecules/old-starshot-card/old-starshot-card.twig' with {
title: 'Demo 4',