fix: updates placeholder assets & styles (#1947)

* fix: add new image assets * style: adjust page heading image bg color * fix: add new image assets for storybook * fix: convert unsplash images to placeholders * fix: convert unsplash images to small placeholder * fix: hello linter my old friend * fix: update image in empty state
Kajabi · Aug 21, 2024 · e9baea4 · e9baea4
1 parent 1cf74e1
commit e9baea4
Show file tree

Hide file tree

Showing 17 changed files with 36 additions and 24 deletions.
diff --git a/docs/app/assets/images/card-placeholder-lg.png b/docs/app/assets/images/card-placeholder-lg.png
diff --git a/docs/app/assets/images/card-placeholder-sm.png b/docs/app/assets/images/card-placeholder-sm.png
diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -20,7 +20,7 @@
 
 <h3>With Graphic</h3>
 <%= sage_component SageEmptyState, {
-  graphic: image_tag("empty-state-sm.svg", alt: ""),
+  graphic: image_tag("card-placeholder-lg.png", alt: ""),
   title: "Title for state, with graphic instead of icon",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
 } do %>

diff --git a/docs/app/views/examples/components/list/_preview.html.erb b/docs/app/views/examples/components/list/_preview.html.erb
@@ -124,7 +124,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper
       css_classes: SageClassnames::REVEAL_CONTAINER,
     } do %>
       <%= sage_component SageCardRow, { grid_template: "ete" } do %>
-        <img src="https://source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="64" alt="" />
+        <img src="/assets/card-placeholder-lg.png" width="64" alt="" />
         <%= sage_component SageCardBlock, {} do %>
           <h4><%= item[:name] %></h4>
           <p>Item <%= item[:id] %> specs</p>
@@ -161,7 +161,7 @@ Note that this example also implements the [Reveal utility class](#{pages_helper
       more_actions: { items: dropdown_items(item[:id]) },
     } do %>
       <%= sage_component SageCardRow, { grid_template: "ete" } do %>
-        <img src="https://source.unsplash.com/random/240x160?v=<%= item[:id] %>" width="120" height="64" alt=""  />
+        <img src="/assets/card-placeholder-lg.png" width="120" height="64" alt=""  />
         <%= sage_component SageCardBlock, {} do %>
           <%= sage_component SageLink, {
             spacer: { bottom: "2xs" },

diff --git a/docs/app/views/examples/components/media_tile/_preview.html.erb b/docs/app/views/examples/components/media_tile/_preview.html.erb
@@ -32,7 +32,7 @@ panels = [
     caption: %(
       <p>Vivamus dictum rutrum dui, nec placerat ante</p>
     ),
-    media: %(<img src="//source.unsplash.com/Ssj4uWXcvS4/600x400?1" alt="Image of Product Abra" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Abra" />),
     title: "Product Abra",
   },
   {
@@ -44,7 +44,7 @@ panels = [
     caption: %(
       <p>Suspendisse eu tellus quis arcu sagittis semper</p>
     ),
-    media: %(<img src="//source.unsplash.com/gkJCCn1hZDk/600x400?2" alt="Image of Product Cadabra" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Cadabra" />),
     title: "Product Cadabra",
   },
   {
@@ -56,7 +56,7 @@ panels = [
     caption: %(
       <p>Maecenas vitae leo eu tellus efficitur viverra sit amet ut tortor vestibulum</p>
     ),
-    media: %(<img src="//source.unsplash.com/3lqEqS1s7mw/600x400?3" alt="Image of Product Jimminycricket" />),
+    media: %(<img src="/assets/card-placeholder-lg.png" alt="Image of Product Jimminycricket" />),
     title: "Product Jimminycricket",
   },
 ]
@@ -155,7 +155,7 @@ NOTE: the examples below omit `media` but this can safely be used as well with t
   title_tag: "h2",
 } do %>
   <%= content_for :sage_media_tile_media do %>
-    <img src="//source.unsplash.com/Ssj4uWXcvS4/600x400?1" alt="MEDIA Image of Product Abra" />
+    <img src="/assets/card-placeholder-lg.png" alt="MEDIA Image of Product Abra" />
   <% end %>
   <%= content_for :sage_media_tile_actions_custom do %>
     <%= sage_component SageBadge, { value: "CUSTOM Draft", color: "draft" } %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
@@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px);
   grid-area: image;
   overflow: hidden;
   min-height: $-page-heading-image-height-min;
-  background: sage-color(grey, 300);
+  background: sage-color(grey, 30);
   border-radius: sage-border(radius);
   border: sage-border();
 

diff --git a/packages/sage-react/lib/Card/Card.story.jsx b/packages/sage-react/lib/Card/Card.story.jsx
@@ -8,6 +8,8 @@ import { Link } from '../Link';
 import { Card } from './Card';
 import { Frame } from '../Frame';
 
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
 export default {
   title: 'Sage/Card',
   component: Card,
@@ -122,7 +124,7 @@ Default.args = {
       </Card.Row>
       <Card.Title>Figure (with side bleed)</Card.Title>
       <Card.Figure bleed={Card.Figure.BLEED_OPTIONS.SIDES}>
-        <img src="//source.unsplash.com/800x500" alt="" />
+        <img src={placeholderImg} alt="" />
       </Card.Figure>
       <Card.Title>Divider</Card.Title>
       <Card.Divider fullBleed={true} />

diff --git a/packages/sage-react/lib/Choice/Choice.story.jsx b/packages/sage-react/lib/Choice/Choice.story.jsx
@@ -3,6 +3,7 @@ import { selectArgs } from '../story-support/helpers';
 import { SageTokens } from '../configs';
 import { Avatar } from '../Avatar';
 import { Choice } from './Choice';
+import placeholderImg from '../../public/CardPlaceholderSmall.png';
 
 // Default Sandbox
 export default {
@@ -113,7 +114,7 @@ export const WiredIcon = () => {
 export const Graphic = () => (
   <div style={{ maxWidth: '100%', display: 'flex' }}>
     <Choice
-      graphic="https://sage.kajabi.com/assets/card-placeholder-sm-2e328163eacc10ed2c294b9059c802257b4e80881a81f5a47a47f38d1a481f2e.png"
+      graphic={placeholderImg}
       href="https://example.com"
       subtext="Description of Option 1"
       text="Option 1"
@@ -138,7 +139,7 @@ export const Arrow = () => (
 export const LinkText = () => (
   <div style={{ maxWidth: '100%', display: 'flex' }}>
     <Choice
-      graphic="https://sage.kajabi.com/assets/card-placeholder-sm-2e328163eacc10ed2c294b9059c802257b4e80881a81f5a47a47f38d1a481f2e.png"
+      graphic={placeholderImg}
       href="https://example.com"
       linkText="Sign In"
       text="Option 1"

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.mdx b/packages/sage-react/lib/EmptyState/EmptyState.story.mdx
@@ -3,6 +3,8 @@ import { Button } from '../Button';
 import { SageTokens } from '../configs';
 import { EmptyState } from './EmptyState';
 
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
 <Meta title="Sage/EmptyState" component={EmptyState} />
 
 # Empty State
@@ -79,7 +81,7 @@ The Empty State component has two sizes: default and `compact`. The default size
           <Button subtle={true} color={Button.COLORS.SECONDARY}>Link</Button>
         </>
       )}
-      graphic={(<img src="https://unsplash.it/2000/1100" alt="" />)}
+      graphic={(<img src={placeholderImg} alt="" />)}
       title="Create your first Email Campaign"
       titleTag="h1"
       text={(<p>
@@ -89,4 +91,4 @@ The Empty State component has two sizes: default and `compact`. The default size
     </p>)}
     />
   </Story>
-</Canvas>
+</Canvas>
diff --git a/packages/sage-react/lib/Frame/Frame.story.jsx b/packages/sage-react/lib/Frame/Frame.story.jsx
@@ -4,6 +4,8 @@ import { SageClassnames, SageTokens } from '../configs';
 import { Button, Label, Property } from '..';
 import { Frame } from './Frame';
 
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
+
 export default {
   title: 'Sage/Frame',
   component: Frame,
@@ -91,7 +93,7 @@ export const NestingFrames = () => (
     align={Frame.ALIGNMENTS.CENTER_LEFT}
   >
     <Frame width="160px">
-      <img src="//source.unsplash.com/240x160" alt="" style={{ maxWidth: '100%' }} />
+      <img src={placeholderImg} alt="" style={{ maxWidth: '100%' }} />
     </Frame>
     <Frame width="flex" gap={Frame.GAPS.XS}>
       <Frame gap={Frame.GAPS.NONE}>
@@ -195,7 +197,7 @@ export const CustomBlock = () => (
       </Button.Group>
     </Frame>
     <Frame width="104px">
-      <img src="//source.unsplash.com/random/104x104" alt="" />
+      <img src={placeholderImg} alt="" style={{ maxWidth: '100%' }} />
     </Frame>
   </Frame>
 );

diff --git a/packages/sage-react/lib/List/List.story.jsx b/packages/sage-react/lib/List/List.story.jsx
@@ -9,6 +9,7 @@ import { OptionsDropdown } from '../Dropdown';
 import { Property } from '../Property';
 import { List } from './List';
 import { ListItem } from './ListItem';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
 import {
   sampleItems,
   sampleItemRenderer,
@@ -81,7 +82,7 @@ export const otherActionItems = () => (
       >
         <Card.Row gridTemplate={SageTokens.GRID_TEMPLATES.ETE}>
           <img
-            src="https://source.unsplash.com/random/240x160"
+            src={placeholderImg}
             width="120"
             height="64"
             alt=""

diff --git a/packages/sage-react/lib/MediaTile/MediaTile.story.jsx b/packages/sage-react/lib/MediaTile/MediaTile.story.jsx
@@ -4,6 +4,7 @@ import { selectArgs } from '../story-support/helpers';
 import { Button } from '../Button';
 import { Badge } from '../Badge';
 import { MediaTile } from './MediaTile';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
 
 export default {
   title: 'Sage/Media Tile',
@@ -53,7 +54,7 @@ export default {
     ),
     footer: null,
     media: (
-      <img src="//source.unsplash.com/random/800x600" alt="" />
+      <img src={placeholderImg} alt="" />
     ),
     tileLink: {
       href: '//example.com',

diff --git a/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx b/packages/sage-react/lib/MediaTile/MediaTiles.story.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { selectArgs } from '../story-support/helpers';
 import { MediaTiles } from './MediaTiles';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
 
 const actionsDropdownItems = [
   {
@@ -55,7 +56,7 @@ export default {
         children: commonChildren,
         footer: null,
         media: (
-          <img src="//source.unsplash.com/random/800x600?1" alt="" />
+          <img src={placeholderImg} alt="" />
         ),
         tileLink: commonTileLink,
       },
@@ -66,7 +67,7 @@ export default {
         children: commonChildren,
         footer: null,
         media: (
-          <img src="//source.unsplash.com/random/800x600?2" alt="" />
+          <img src={placeholderImg} alt="" />
         ),
         tileLink: commonTileLink,
       },
@@ -77,7 +78,7 @@ export default {
         children: commonChildren,
         footer: null,
         media: (
-          <img src="//source.unsplash.com/random/800x600?3" alt="" />
+          <img src={placeholderImg} alt="" />
         ),
         tileLink: commonTileLink,
       },
@@ -88,7 +89,7 @@ export default {
         children: commonChildren,
         footer: null,
         media: (
-          <img src="//source.unsplash.com/random/800x600?4" alt="" />
+          <img src={placeholderImg} alt="" />
         ),
         tileLink: commonTileLink,
       },

diff --git a/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx b/packages/sage-react/lib/NextBestAction/NextBestAction.story.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { selectArgs } from '../story-support/helpers';
 import { NextBestAction } from './NextBestAction';
 import { Button } from '../Button';
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
 
 export default {
   title: 'Sage/Next Best Action',
@@ -34,7 +35,7 @@ export default {
     ),
     dismissable: true,
     graphic: {
-      element: (<img src="//source.unsplash.com/random/272x272" alt="" />)
+      element: (<img src={placeholderImg} alt="" />)
     },
     // eslint-disable-next-line no-console
     onClickDismiss: () => { console.log('Add your own dismiss functionality here!'); },

diff --git a/packages/sage-react/lib/Panel/Panel.story.mdx b/packages/sage-react/lib/Panel/Panel.story.mdx
@@ -5,6 +5,7 @@ import { Icon } from "../Icon";
 import { OptionsDropdown } from "../Dropdown";
 import { Panel } from "./Panel";
 import { SageClassnames, SageTokens } from "../configs";
+import placeholderImg from '../../public/CardPlaceholderLarge.png';
 
 <Meta
   title='Sage/Panel'
@@ -372,15 +373,15 @@ A panel figure contains an image that occupies a substantive space in the panel.
   mdxSource={`
     <Panel>
       <Panel.Figure>
-        <img src='https://source.unsplash.com/random/800x600' alt='' />
+        <img src={placeholderImg} alt='' />
       </Panel.Figure>
     </Panel>
   `}
 >
   <Story name='Figure'>
     <Panel>
       <Panel.Figure>
-        <img src='https://source.unsplash.com/random/800x600' alt='' />
+        <img src={placeholderImg} alt='' />
       </Panel.Figure>
     </Panel>
   </Story>

diff --git a/packages/sage-react/public/CardPlaceholderLarge.png b/packages/sage-react/public/CardPlaceholderLarge.png
diff --git a/packages/sage-react/public/CardPlaceholderSmall.png b/packages/sage-react/public/CardPlaceholderSmall.png