diff --git a/src/editor/lib/blocks/index.js b/src/editor/lib/blocks/index.js
index b6b2cee..dee04bc 100644
--- a/src/editor/lib/blocks/index.js
+++ b/src/editor/lib/blocks/index.js
@@ -6,6 +6,7 @@ import career from "./ucd-theme-career";
import careers from "./ucd-theme-careers";
import categoryFilter from "./ucd-theme-category-filter";
import contactList from "./ucd-theme-contact-list";
+import factoid from "./ucd-theme-factoid";
import faq from "./ucd-theme-faq";
import faqItem from "./ucd-theme-faq-item";
import featuredArticle from "./ucd-theme-featured-article";
@@ -65,6 +66,7 @@ export default [
careers,
categoryFilter,
contactList,
+ factoid,
faq,
faqItem,
featuredArticle,
diff --git a/src/editor/lib/blocks/ucd-theme-factoid/edit.js b/src/editor/lib/blocks/ucd-theme-factoid/edit.js
new file mode 100644
index 0000000..96f1c3b
--- /dev/null
+++ b/src/editor/lib/blocks/ucd-theme-factoid/edit.js
@@ -0,0 +1,141 @@
+import { html, UCDIcons } from "../../utils";
+import { ToolbarColorPicker, ToolbarLinkPicker, IconPicker } from "../../block-components";
+import { useBlockProps, BlockControls } from '@wordpress/block-editor';
+import { useRef, useEffect, createRef } from "@wordpress/element";
+import { ToolbarButton } from "@wordpress/components";
+
+import classnames from 'classnames';
+
+
+export default ( props ) => {
+ const { attributes, setAttributes } = props;
+ const blockProps = useBlockProps();
+ const iconPickerRef = createRef();
+
+
+ const onIconClick = () => {
+ if ( iconPickerRef.current ) {
+ iconPickerRef.current.openModal();
+ }
+ }
+
+ // set up icon picker
+ const onIconSelect = (icon) => {
+ setAttributes({icon: `${icon.iconSet}:${icon.icon}`})
+ }
+
+ // set up link picker
+ const onHrefChange = (value) => {
+ let attrs = {
+ href: value.url,
+ newTab: value.opensInNewTab ? true : false,
+ postId: 0,
+ taxId: 0
+ }
+ if ( value.kind == 'post-type' ){
+ attrs.postId = value.id;
+ }
+ else if ( value.kind == 'taxonomy' ) {
+ attrs.taxId = value.id
+ }
+ setAttributes(attrs);
+ }
+ const hrefContent = (() => {
+ let value = {opensInNewTab: attributes.newTab, url: ""};
+ if ( attributes.href ) {
+ value.url = attributes.href;
+ }
+ return value;
+ })();
+
+ // set up color picker
+ const onColorChange = (value) => {
+ setAttributes( {brandColor: value ? value.slug : "" } );
+ }
+
+ const classes = classnames({
+ 'factoid': true,
+ [`category-brand--${attributes.brandColor}`]: attributes.brandColor,
+ 'factoid--brackets': attributes.brackets
+ })
+
+ return html`
+
+ <${BlockControls} group="block">
+ <${ToolbarLinkPicker} onChange=${onHrefChange} value=${hrefContent} />
+ <${ToolbarColorPicker}
+ onChange=${onColorChange}
+ value=${attributes.brandColor}
+ ucdBlock="priority-link"
+ />
+ <${ToolbarButton}
+ icon=${UCDIcons.renderPublic("fa-right-to-bracket")}
+ onClick=${ () => {setAttributes({'brackets': !attributes.brackets})}}
+ isPressed=${attributes.brackets}
+ label="Toggle 'Brackets' Modifier"
+ />
+ ${BlockControls}>
+ <${IconPicker}
+ ref=${iconPickerRef}
+ onChange=${onIconSelect}
+ selectedIcon=${attributes.icon}
+ >${IconPicker}>
+
+
+
+
+
+
+ `
+}
diff --git a/src/editor/lib/blocks/ucd-theme-factoid/index.js b/src/editor/lib/blocks/ucd-theme-factoid/index.js
new file mode 100644
index 0000000..5da7bc2
--- /dev/null
+++ b/src/editor/lib/blocks/ucd-theme-factoid/index.js
@@ -0,0 +1,57 @@
+import { UCDIcons } from "../../utils";
+import Edit from './edit';
+
+const name = 'ucd-theme/factoid';
+const settings = {
+ api_version: 2,
+ title: "Factoid",
+ description: "Highlight a fact or statistic with an icon and color.",
+ icon: UCDIcons.renderPublic('fa-percent'),
+ category: 'ucd-links',
+ keywords: [ 'link', 'icon', 'color' ],
+ supports: {
+ "html": false,
+ "customClassName": false
+ },
+ attributes: {
+ bigText: {
+ type: 'string',
+ default: ''
+ },
+ smallText: {
+ type: 'string',
+ default: ''
+ },
+ href: {
+ type: 'string',
+ default: ''
+ },
+ postId: {
+ type: 'number',
+ default: 0
+ },
+ taxId: {
+ type: 'number',
+ default: 0
+ },
+ newTab: {
+ type: "boolean",
+ default: false
+ },
+ icon: {
+ type: 'string',
+ default: 'ucd-public:fa-percent'
+ },
+ brandColor: {
+ type: "string",
+ default: ""
+ },
+ brackets: {
+ type: "boolean",
+ default: false
+ }
+ },
+ edit: Edit
+};
+
+export default { name, settings };
diff --git a/src/editor/lib/blocks/ucd-theme-photo-card/edit.js b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js
index 6365c27..ac4f44f 100644
--- a/src/editor/lib/blocks/ucd-theme-photo-card/edit.js
+++ b/src/editor/lib/blocks/ucd-theme-photo-card/edit.js
@@ -130,7 +130,7 @@ export default ( props ) => {
<${ToolbarColorPicker}
onChange=${onColorChange}
value=${attributes.brandColor}
- ucdBlock="tile-link"
+ ucdBlock="photo-card"
/>
<${ToolbarSectionDisplay}
sections=${cardSections}
diff --git a/src/public/scss/temp.scss b/src/public/scss/temp.scss
index 7dc075a..b06820c 100644
--- a/src/public/scss/temp.scss
+++ b/src/public/scss/temp.scss
@@ -424,4 +424,18 @@ hr.y2 {
transition: all .3s ease-in-out;
}
+// factoid
+.factoid__icon {
+
+ display: flex;
+ justify-content: center;
+
+ ucdlib-icon {
+ width: 2em;
+ height: 2em;
+ min-width: 2em;
+ min-height: 2em;
+ }
+}
+
diff --git a/theme/includes/classes/block-transformations.php b/theme/includes/classes/block-transformations.php
index 702ae24..373ae79 100644
--- a/theme/includes/classes/block-transformations.php
+++ b/theme/includes/classes/block-transformations.php
@@ -70,6 +70,13 @@ public static function getPosts($attrs=array()){
return $attrs;
}
+ public static function setDefaultFactoidIcon($attrs){
+ if ( !array_key_exists('icon', $attrs) ) {
+ $attrs['icon'] = 'ucd-public:fa-percent';
+ }
+ return $attrs;
+ }
+
/**
* If page is in primary nav, returns its children
* If page is part of hierarchy, return its children
diff --git a/theme/includes/classes/blocks.php b/theme/includes/classes/blocks.php
index 22675ea..4655cc8 100644
--- a/theme/includes/classes/blocks.php
+++ b/theme/includes/classes/blocks.php
@@ -67,6 +67,11 @@ function __construct($editor_script_slug, $settings=array()) {
"twig" => "@ucd/blocks/contact-list.twig",
"transform" => array("formatContactList")
),
+ "ucd-theme/factoid" => array(
+ "twig" => "@ucd/blocks/factoid.twig",
+ "hasBrandColors" => true,
+ "transform" => array("getPermalink", "setDefaultFactoidIcon")
+ ),
"ucd-theme/faq" => array(
"twig" => "@ucd/blocks/faq.twig",
"transform" => array("addSpacing")
diff --git a/theme/includes/classes/customizer.php b/theme/includes/classes/customizer.php
index d105bc6..154fda0 100644
--- a/theme/includes/classes/customizer.php
+++ b/theme/includes/classes/customizer.php
@@ -346,7 +346,9 @@ public function colors($wp_customize){
array("slug" => "heading-with-icon", "label" => "Heading With Icon Palette"),
array("slug" => "separator", "label" => "Separator Palette"),
array("slug" => "object-box", "label" => "Object Box Border Palette"),
- array("slug" => "tile-link", "label" => "Tile Link Palette")
+ array("slug" => "tile-link", "label" => "Tile Link Palette"),
+ ['slug' => 'factoid', 'label' => 'Factoid Palette'],
+ ['slug' => 'photo-card', 'label' => 'Photo Card Palette']
);
$blocks_with_colors = apply_filters( 'ucd-theme/customizer/block-colors', $blocks_with_colors );
foreach ($blocks_with_colors as $block) {
diff --git a/views/blocks/factoid.twig b/views/blocks/factoid.twig
new file mode 100644
index 0000000..5a2bfae
--- /dev/null
+++ b/views/blocks/factoid.twig
@@ -0,0 +1,5 @@
+{% from getUcdMacro('links') import factoid %}
+{% if attributes.permalink %}
+ {% set attributes = attributes|merge({'href': attributes.permalink}) %}
+{% endif %}
+{{ factoid(attributes) }}
diff --git a/views/macros/links.twig b/views/macros/links.twig
index 9e2580a..7e1ca2c 100644
--- a/views/macros/links.twig
+++ b/views/macros/links.twig
@@ -268,6 +268,47 @@ kwargs:
{% endmacro %}
+{#
+http://webstyleguide.ucdavis.edu/?p=molecules-factoid-brackets
+kwargs:
+ href {String}: link
+ icon {String}: icon parameter of a ucdlib-icon element
+ bigText {String}: Text to display below icon
+ smallText {String}: Text to display below bigText
+ brandColor {String} - UCD alt color slug
+ newTab {Boolean} - If link opens in new tab
+ brackets {Boolean} - If true, the icon will be displayed in brackets
+#}
+{% macro factoid( kwargs={} ) %}
+ {% set classes = ['factoid'] %}
+ {% if kwargs.brandColor %}
+ {% set classes = classes|merge(['category-brand--' ~ kwargs.brandColor]) %}
+ {% endif %}
+ {% if kwargs.brackets %}
+ {% set classes = classes|merge(['factoid--brackets']) %}
+ {% endif %}
+ {% set classes = classes|join(' ') %}
+
+ {% set target = kwargs.newTab ? "target='_blank'" : "" %}
+ {% set icon = kwargs.icon ? kwargs.icon : 'ucd-public:fa-percent' %}
+
+
+{% endmacro %}
+
{#
http://dev.webstyleguide.ucdavis.edu/redesign/?p=molecules-focal-link-icon
kwargs: