@phillips/seldon 1.1.5 → 1.1.7

package/README.md

@@ -0,0 +1,43 @@
+# Easel Design System 🎨 by Phillips Auction House
+
+Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.
+
+## Installation
+
+```
+# With NPM
+npm install @phillips/seldon
+
+# With yarn
+yarn add @phillips/seldon
+```
+
+## What's included
+
+### Styling
+
+The project contains a `scss` folder. Here you will find the main export of our sass styles. This will include all the styles bundled with this package, including resets and typography styles.
+
+```scss
+@use '@phillips/seldon/scss/styles';
+```
+
+If you wish to only import specific component styles you can find them in their respective directories inside the `scss` folder.
+
+```scss
+@use '@phillips/seldon/scss/components/Button/button';
+```
+
+### Components
+
+Each component can be imported in your project by referencing the component name inside the `components` directory.
+
+```js
+import Button from '@phillips/seldon/components/Button/Button';
+```
+
+You can also use named exports for multiple component imports from main index file.
+
+```js
+import { Button } from '@phillips/seldon';
+```

package/dist/scss/utils/_reset.scss

@@ -0,0 +1,29 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+#root {
+  isolation: isolate;
+}

package/dist/scss/utils/_typography.scss

@@ -0,0 +1,22 @@
+@use './vars' as *;
+
+body {
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 16px;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-overflow-scrolling: touch;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  color: $primary-black;
+}
+
+p {
+  color: $soft-black;
+}

package/dist/scss/utils/_vars.scss

@@ -0,0 +1,35 @@
+
+// prefix
+$px: phillips;
+
+
+// Primary color palette
+$pure-black: #000000;
+$primary-black: #323232;
+$pure-white: #ffffff;
+
+// Secondary color palette
+$soft-black: #545454;
+$dark-gray: #75715f;
+
+// Utilititarian color palette
+$keyline-gray: #949494;
+$medium-gray: #c3bebb;
+$light-gray: #eceae7;
+$off-white: #f4f2f1;
+
+// Notification color palette
+$error-red: #ff0000;
+$post-sale-magenta: #ff0085;
+$clock-widget-blue: #4a90e2;
+$clock-widget-green: #6a9c53;
+$clock-widget-maroon: #6b0000;
+$clock-widget-red: #b00000;
+
+// Articker color palette
+$articker-red: #fc1e2b;
+$articker-orange: #ff8201;
+$articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+
+
+$text-color: $pure-black;

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.js",
+        "default": "./dist/index.d.ts"
+      }
+    },
+    "./dist/": {
+      "import": "./dist/"
     }
   },
   "files": [
-    "dist/**"
+    "dist/**",
+    "!dist/src"
   ],
   "scripts": {
     "dev": "vite",

package/dist/src/components/Button/Button.d.ts

@@ -1,31 +0,0 @@
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: React.ReactElement | string;
-    /**
-    * Unique id for component
-    */
-    id?: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-declare const Button: ({ primary, size, backgroundColor, label, id, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/src/components/Header/Header.d.ts

@@ -1,11 +0,0 @@
-type User = {
-    name: string;
-};
-interface HeaderProps {
-    user?: User;
-    onLogin: () => void;
-    onLogout: () => void;
-    onCreateAccount: () => void;
-}
-declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default Header;

package/dist/src/index.d.ts

@@ -1,3 +0,0 @@
-export { default as Button } from './components/Button/Button';
-export { default as Header } from './components/Header/Header';
-export { default as Page } from './pages/Page';

package/dist/src/pages/Page.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Page: React.FC;
-export default Page;

package/dist/src/utils/index.d.ts

@@ -1 +0,0 @@
-export declare const px = "phillips";