feat: add pine icons to sage

Kajabi · May 17, 2024 · 8c417e0 · 8c417e0
1 parent 9fbb17f
commit 8c417e0
Show file tree

Hide file tree

Showing 8 changed files with 1,212 additions and 757 deletions.
diff --git a/docs/app/views/application/_app_head_content.html.erb b/docs/app/views/application/_app_head_content.html.erb
@@ -16,3 +16,5 @@
 <link href="/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
 <link href="/favicon.ico" rel="icon" type="image/x-icon">
 <%= csrf_meta_tags %>
+<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core/dist/pine-core/pine-core.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core/dist/pine-core/index.esm.js"></script>
diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb
@@ -12,6 +12,7 @@
   <%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %>
   <%= sage_component SageIcon, { icon: "preview-on", label: "Preview", color: "sage-300" } %>
   <%= sage_component SageIcon, { icon: "trash", label: "Delete", color: "red-300" } %>
+  <pds-icon icon="trash" color="#006699"></pds-icon>
 </div>
 
 <%= sage_component SageDivider, {} %>

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb
@@ -16,6 +16,7 @@
     <%= "sage-btn--#{component.style}" if component.style %>
     <%= "sage-btn--align-end" if (component.align == "end") %>
     <%= "sage-btn--icon-#{component.icon[:style]}-#{component.icon[:name]}" if component.icon %>
+
     <%= component.generated_css_classes %>
   "
   <% if component.spinner_on_submit.present? %>

diff --git a/package.json b/package.json
@@ -71,5 +71,8 @@
     "watch:assets": "cd packages/sage-assets && yarn build:watch",
     "watch:react": "cd packages/sage-react && yarn build:watch",
     "watch:system": "cd packages/sage-system && yarn build:watch"
+  },
+  "dependencies": {
+    "@pine-ds/icons": "^4.2.0"
   }
 }
diff --git a/packages/sage-react/.storybook/manager-head.html b/packages/sage-react/.storybook/manager-head.html
@@ -9,3 +9,6 @@
   type="image/png"
   href="favicon.ico"
 />
+
+<script type="module" src="http://localhost:7200/build/pds-icons.esm.js"></script>
+<script nomodule src="http://localhost:7200/build/index.esm.js"></script>
diff --git a/packages/sage-react/lib/Icon/Icon.jsx b/packages/sage-react/lib/Icon/Icon.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { downSmall } from '@pine-ds/icons/icons';
 import { SageTokens } from '../configs';
 import { ICON_ADJACENT_TYPES, ICON_CARD_COLORS, ICON_SIZES } from './configs';
 
@@ -46,8 +47,18 @@ export const Icon = ({
     attributes.role = 'img';
   }
 
+  // const sizeMapping = {
+  //   [ICON_SIZES.XS]: 'small',
+  //   [ICON_SIZES.SM]: 'normal',
+  //   [ICON_SIZES.MD]: 'medium',
+  //   [ICON_SIZES.LG]: 'large',
+  //   [ICON_SIZES.XL]: 'large',
+  // };
+
   const renderIcon = () => (
-    <i className={classNames} {...attributes} {...rest} />
+    <i>
+      <pds-icon name={downSmall} />
+    </i>
   );
 
   const setBackgroundDimensions = () => {

diff --git a/packages/sage-react/package.json b/packages/sage-react/package.json
@@ -84,6 +84,7 @@
   },
   "dependencies": {
     "@kajabi/sage-assets": "^1.14.5",
+    "@pine-ds/icons": "^4.2.0",
     "classnames": "^2.2.6",
     "debounce": "^1.2.0",
     "focus-trap": "^6.2.2",

diff --git a/yarn.lock b/yarn.lock