refactor: renames scope prop to size

Kajabi · Jul 31, 2024 · 5eaf22f · 5eaf22f
1 parent 7d9ce28
commit 5eaf22f
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 18 deletions.
diff --git a/docs/app/views/examples/components/empty_state/_preview.html.erb b/docs/app/views/examples/components/empty_state/_preview.html.erb
@@ -13,7 +13,7 @@
   icon: "bold",
   title: "Title for state, compact variety",
   text: "Text to appear below. Lorem ipsum dolor sit amet consectituor.",
-  scope: "compact",
+  size: "compact",
 } do %>
   <p>Other stuff such as buttons...</p>
 <% end %>

diff --git a/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb b/docs/lib/sage_rails/app/sage_components/sage_empty_state.rb
@@ -3,7 +3,7 @@ class SageEmptyState < SageComponent
     center_vertical: [:optional, NilClass, TrueClass],
     graphic: [:optional, NilClass, String],
     icon: [:optional, NilClass, String],
-    scope: [:optional, NilClass, Set.new(["compact", nil])],
+    size: [:optional, NilClass, Set.new(["compact", nil])],
     text: [:optional, NilClass, String],
     title: [:optional, NilClass, String],
     title_tag: [:optional, NilClass, Set.new(["h1", "h2", "h3", "h4", "h5", "h6"])],

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_empty_state.html.erb
@@ -1,5 +1,5 @@
 <%
-variant = component.scope.present? ? component.scope : false
+variant = component.size.present? ? component.size : false
 title_tag = variant == "compact" ? "h2" : "h1"
 if component.title_tag.present?
   title_tag = component.title_tag

diff --git a/packages/sage-assets/lib/stylesheets/components/_empty_state.scss b/packages/sage-assets/lib/stylesheets/components/_empty_state.scss
@@ -14,12 +14,12 @@ $-empty-state-icon-compact-size: rem(56px);
 .sage-empty-state {
   @include sage-grid-panel();
 
+  gap: sage-spacing(sm);
   margin-inline-start: auto;
   margin-inline-end: auto;
   max-width: sage-container(md);
   text-align: center;
   justify-items: center;
-  gap: sage-spacing(sm);
 }
 
 .sage-empty-state--center {

diff --git a/packages/sage-assets/lib/stylesheets/components/_icon_card.scss b/packages/sage-assets/lib/stylesheets/components/_icon_card.scss
@@ -30,9 +30,6 @@
   }
 }
 
-.sage-icon-card--gradient {
-  background-image: linear-gradient(180deg, var(--color-gradient-top) 0%, var(--color-gradient-bottom) 100%)
-}
 .sage-icon-card--round {
   border-radius: sage-border(radius-round);
 }
diff --git a/packages/sage-react/lib/EmptyState/EmptyState.jsx b/packages/sage-react/lib/EmptyState/EmptyState.jsx
@@ -4,15 +4,15 @@ import classnames from 'classnames';
 import { SageTokens } from '../configs';
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { EMPTY_STATE_SCOPES } from './configs';
+import { EMPTY_STATE_SIZES } from './configs';
 
 export const EmptyState = ({
   actions,
   centerVertical,
   children,
   graphic,
   icon,
-  scope,
+  size,
   text,
   title,
   titleTag,
@@ -23,7 +23,7 @@ export const EmptyState = ({
     'sage-empty-state',
     {
       'sage-empty-state--center': centerVertical,
-      [`sage-empty-state--${scope}`]: scope,
+      [`sage-empty-state--${size}`]: size,
     },
   );
 
@@ -84,15 +84,15 @@ export const EmptyState = ({
   );
 };
 
-EmptyState.SCOPES = EMPTY_STATE_SCOPES;
+EmptyState.SIZES = EMPTY_STATE_SIZES;
 
 EmptyState.defaultProps = {
   actions: null,
   centerVertical: false,
   children: null,
   graphic: null,
   icon: null,
-  scope: EmptyState.SCOPES.DEFAULT,
+  size: EmptyState.SIZES.DEFAULT,
   text: null,
   title: null,
   titleTag: 'h2',
@@ -105,7 +105,7 @@ EmptyState.propTypes = {
   children: PropTypes.node,
   graphic: PropTypes.node,
   icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
-  scope: PropTypes.oneOf(Object.values(EmptyState.SCOPES)),
+  size: PropTypes.oneOf(Object.values(EmptyState.SIZES)),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),

diff --git a/packages/sage-react/lib/EmptyState/EmptyState.story.jsx b/packages/sage-react/lib/EmptyState/EmptyState.story.jsx
@@ -18,7 +18,7 @@ export default {
   argTypes: {
     ...selectArgs({
       icon: SageTokens.ICONS,
-      scope: EmptyState.SCOPES
+      size: EmptyState.SIZES
     })
   },
   args: {
@@ -35,11 +35,11 @@ const Template = (args) => <EmptyState {...args} />;
 
 export const Default = Template.bind({});
 
-export const CompactScope = Template.bind({});
-CompactScope.args = {
+export const Compactsize = Template.bind({});
+Compactsize.args = {
   icon: null,
   graphic: (<img src="//source.unsplash.com/random/530x500" alt="" />),
-  scope: EmptyState.SCOPES.PAGE,
+  size: EmptyState.SIZES.PAGE,
   text: (
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.

diff --git a/packages/sage-react/lib/EmptyState/configs.js b/packages/sage-react/lib/EmptyState/configs.js
@@ -1,4 +1,4 @@
-export const EMPTY_STATE_SCOPES = {
+export const EMPTY_STATE_SIZES = {
   DEFAULT: null,
   COMPACT: 'compact',
 };