diff --git a/src/components/blog/BlogCards/index.js b/src/components/blog/BlogCards/index.js
index dafeb54d1..9980c51c1 100644
--- a/src/components/blog/BlogCards/index.js
+++ b/src/components/blog/BlogCards/index.js
@@ -12,10 +12,15 @@ export default function BlogCards({
const data = await getBlogPosts(filterCallback.join(','));
console.log(data.topics)
const resultset = []
- for (const topic of data.topics) {
+ if (data.topics) {
+ for (const topic of data.topics) {
resultset.push(await getPostList(topic))
+ }
+ setCardData(resultset);
+ } else {
+ setCardData(undefined);
}
- setCardData(resultset);
+
};
React.useEffect(() => {
@@ -45,7 +50,7 @@ export default function BlogCards({
);
} else {
- return
;
+ return No Blog Post Found with the Given Search Criteria
;
}
}
diff --git a/src/components/blog/BlogCards/styles.module.css b/src/components/blog/BlogCards/styles.module.css
index 2011eee81..2adba3773 100644
--- a/src/components/blog/BlogCards/styles.module.css
+++ b/src/components/blog/BlogCards/styles.module.css
@@ -17,3 +17,11 @@
.space {
height: 200px;
}
+
+.noFound {
+ font-size: 28px;
+ font-weight: 500;
+ color: var(--dev-secondary-text);
+ padding: 8px;
+ margin: 50px;
+}
diff --git a/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css
index 847f4ead7..7be4bbadc 100644
--- a/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css
+++ b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css
@@ -4,7 +4,9 @@
font-weight: 500;
color: var(--dev-secondary-text);
padding: 8px;
- margin: 5px;
+ margin-right: 5px;
+ margin-top: 5px;
+ margin-bottom: 5px;
border-style: solid;
border-width: 1px;
border-color: var(--dev-text-color-normal);
@@ -17,7 +19,9 @@
background-color: var(--dev-secondary-text);
color: var(--dev-card-background);
padding: 8px;
- margin: 5px;
+ margin-right: 5px;
+ margin-bottom: 5px;
+ margin-top: 5px;
border-style: solid;
border-width: 1px;
border-color: var(--dev-text-color-normal);
diff --git a/src/components/blog/BlogSidebar/index.js b/src/components/blog/BlogSidebar/index.js
index baf4f5412..1d56b1468 100644
--- a/src/components/blog/BlogSidebar/index.js
+++ b/src/components/blog/BlogSidebar/index.js
@@ -11,7 +11,7 @@ export default function BlogSidebar({
}) {
const [tagProductData, setTagProductData] = React.useState();
const [tagTechnologyData, setTagTechnologyData] = React.useState();
- const [filteredProduct, setFilteredProduct] = React.useState();
+ const [filterTags, setFilterTags] = React.useState(true);
const getTagData = async () => {
const data = await getTags();
@@ -34,15 +34,16 @@ export default function BlogSidebar({
setTagTechnologyData(tagTechnologyResultset)
};
+ function toggleSeeAll() {
+ filterTags ? setFilterTags(false) : setFilterTags(true)
+ }
+
+
React.useEffect(() => {
getTagData();
}, []);
- function setFilters(e, f) {
- e.currentTarget.classList.toggle('selected');
- console.log(e)
- filterCallback(f)
- }
+ const filterText = filterTags ? 'See All Tags' : 'See Less Tags'
if (tagProductData && tagTechnologyData) {
return (
@@ -51,10 +52,20 @@ export default function BlogSidebar({
{tagProductData.map(function(a, index){
return
- // return
setFilters(e, a)} className={styles.tag}>{a}
})}
+ Posts by Identity Governance
+
+ {tagTechnologyData.map(function(a, index){
+ return
10 && filterTags ? styles.hidden : ''} >
+ })}
+
+ toggleSeeAll()}>
+ {filterText}
+ {/*
})
*/}
+
+
);
} else {
return ;
diff --git a/src/components/blog/BlogSidebar/styles.module.css b/src/components/blog/BlogSidebar/styles.module.css
index 1c9bcd27b..8560b833d 100644
--- a/src/components/blog/BlogSidebar/styles.module.css
+++ b/src/components/blog/BlogSidebar/styles.module.css
@@ -1,34 +1,52 @@
.sidebar {
- width: 300px;
+ width: 400px;
height: 100%;
- margin: 50px;
+ margin-left: 50px;
}
.tagHeader {
+ margin-top: 10px;
font-size: 22px;
font-weight: 700;
}
.tagContainer {
display: flex;
+ flex-wrap: wrap;
}
-.tag {
- font-size: 16px;
- font-weight: 500;
+
+.hidden {
+ display: none;
+}
+
+.seeAll {
+ margin-top: 5px;
+ margin-bottom: 10px;
color: var(--dev-secondary-text);
- padding: 8px;
- margin: 5px;
border-style: solid;
border-width: 1px;
- border-color: var(--dev-text-color-normal);
+ width: 100%;
transition: background-color 500ms;
+ text-align: center;
+
}
-.tag:hover {
+.seeAll:hover {
cursor: pointer;
background-color: var(--dev-text-color-normal);
color: var(--dev-card-background);
}
+.caretDown {
+ margin-left: 5px;
+ height: 26px;
+ width: 26px;
+ top: 6px;
+ position: relative;
+}
+
+.caretDown:hover {
+
+}
\ No newline at end of file
diff --git a/static/blog/caret-down-thin.svg b/static/blog/caret-down-thin.svg
new file mode 100644
index 000000000..b97785a6a
--- /dev/null
+++ b/static/blog/caret-down-thin.svg
@@ -0,0 +1 @@
+
\ No newline at end of file