@phillips/seldon 1.1.1 → 1.1.3

package/src/design/colors-tokens/color-tokens.mdx

@@ -0,0 +1,231 @@
+import { Meta } from '@storybook/blocks';
+import Code from '../assets/code-brackets.svg';
+import Colors from '../assets/colors.svg';
+import Comments from '../assets/comments.svg';
+import Direction from '../assets/direction.svg';
+import Flow from '../assets/flow.svg';
+import Plugin from '../assets/plugin.svg';
+import Repo from '../assets/repo.svg';
+import StackAlt from '../assets/stackalt.svg';
+import ColorCard from './ColorCard';
+
+<Meta title="Design/Color Tokens" />
+
+<style>
+  {`
+    #colors-gradients-and-transparencies- {
+      display: flex;
+      margin-bottom: 2.5rem;
+    }
+
+    #colors-gradients-and-transparencies- img {
+      margin-left: 1rem;
+    }
+
+    h2 {
+      margin: 0;
+    }
+
+    .color__h2 {
+      font-size: 1rem;
+      color: #4a90e2;
+      display: inline-block;
+      letter-spacing: 0.275rem;
+      line-height: 1.5;
+      text-transform: uppercase;
+    }
+
+    .color__h3 {
+      font-size: 1rem;
+      line-height: 1.5;
+      margin: 0;
+      margin-bottom: 0.5rem;
+    }
+
+    .color__p p{
+      margin-bottom: 2rem;
+    }
+
+    .color__list {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: 1fr;
+      grid-column-gap: 0.75rem;
+      grid-row-gap: 0.75rem;
+      margin-bottom: 4rem;
+    }
+
+    .phillips-color-card {
+
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+<main className="sb-unstyled">
+# Colors, Gradients, and Transparencies <img src={Colors} alt="colors" />
+
+## <span className="color__h2">Primary Color Palette</span>
+
+<h3 className="color__h3">Black ﹡ White</h3>
+<span className="color__p">
+  We utilize black and white as our primary palette as the PHILLIPS brand relies
+  heavily on the gallery presentation - i.e. allowing the Art to stand out. It
+  tends to skew to 75% white, 25% black. Pure black is used on Fills, logo, and
+  wordmarks for a more luxurious depth; our Primary Black value is used on
+  Titles/Headers and Button elements. White is predominantly use to offer
+  breathable and clean-presenting negative spacing.
+</span>
+
+<div className="color__list">
+  <ColorCard
+    label="Pure Black"
+    hex="#000000"
+    usage="BG Fills, Logo, Wordmarks"
+  />
+  <ColorCard
+    label="Primary Black"
+    hex="#323232"
+    usage="Headers, Buttons' Fill & Stroke"
+  />
+  <ColorCard
+    label="Pure White"
+    hex="#ffffff"
+    usage="Negative Space, Text on Dark BG"
+  />
+</div>
+
+## <span className="color__h2">Secondary Color Palette</span>
+
+<h3 className="color__h3">Dark Grays</h3>
+<span className="color__p">
+  In order to create depth and add levels of heirarchy, we utilize Soft Black
+  and Dark Gray for body blocks or varying importances.
+</span>
+
+<div className="color__list">
+  <ColorCard label="Soft Black" hex="#545454" usage="body/Text Blocks" />
+  <ColorCard label="Dark Gray" hex="#75716f" usage="Labels & Badges" />
+</div>
+
+## <span className="color__h2">Utilitarian Color Palette</span>
+
+<h3 className="color__h3">Keylines ﹡ Med & Lite Grays</h3>
+<span className="color__p">
+  These are used for utilitarian purposes - keylines, disabled states, inactive
+  states, BG fills for Banners, Sections, and Cards
+</span>
+
+<div className="color__list">
+  <ColorCard
+    label="Keyline Gray"
+    hex="#949494"
+    usage="All keylines, strokes, and HRs"
+  />
+  <ColorCard
+    label="Medium Gray"
+    hex="#c3bebb"
+    usage="Disabled/Inactive Buttons"
+  />
+  <ColorCard label="Light Gray" hex="#eceae7" usage="BG fills" />
+  <ColorCard label="Off White" hex="#f4f2f1" usage="BG fills" />
+</div>
+
+## <span className="color__h2">Notification Color Palette</span>
+
+<h3 className="color__h3">Cyan ﹡ Reds ﹡ Magenta ﹡ Green</h3>
+<span className="color__p">
+  We utiilize black and white as our primary palette as the PHILLIPS brand
+  relies heavily on the gallery presentation - i.e. allowing the Art to stand
+  out. It tends to skew to 75% white, 25% black. Pure black is used on Fills,
+  logo, and wordmarks for a more luxurious depth; our Primary Black value is
+  used on Titles/Headers and Button elements. White is predominantly use to
+  offer breathable and clean-presenting negative spacing.
+</span>
+
+<div className="color__list">
+
+  <ColorCard
+    label="Error Red"
+    hex="#ff0000"
+    usage="Error Messaging"
+  />
+  <ColorCard
+    label="Post-Sale Magenta"
+    hex="#ff0086"
+    usage="Sold Price, Concluded Labels"
+  />
+  <ColorCard
+    label="Color Widget Blue"
+    hex="#4a90e2"
+    usage="'Bid is with you'"
+  />
+  <ColorCard
+    label="Clock Widget Green"
+    hex="#6a9c53"
+    usage="'Live'"
+  />
+  <ColorCard
+    label="Clock Widget Maroon"
+    hex="#6b0000"
+    usage="'Countdown"
+  />
+  <ColorCard
+    label="Clock Widget Red"
+    hex="#b00000"
+    usage="'Closing' 'You've Been Outbid'"
+  />
+</div>
+
+## <span className="color__h2">CTA and Hover</span>
+
+<h3 className="color__h3">Cyan ﹡ Gradients</h3>
+<span className="color__p">
+  The Cyan value is used not only for our CTA interactions, but also in select
+  cases of hover, such as our Tab Buttons. All CTA's, Links, and tertiary style
+  buttons employ the cyan for hover state. The hover gradient is used on all
+  enclosed buttons. i.e. Primary & Secondary, Standard, Micro & Simple Icons.
+</span>
+
+<div className="color__list">
+
+  <ColorCard
+    label="CTA Blue"
+    hex="#4a90e2"
+    usage="CTAs, Hyperlinks, Tabs Hover-State"
+  />
+  <ColorCard
+    label="Hover Gradient Fill"
+    hex="linear-gradient(#000000, #8f8989)"
+    usage="Sold Price, Concluded Labels"
+  />
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Click on the pallet tiles to copy the token
+</div>
+</main>

package/src/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.ts

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

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/src/pages/Page.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import Page from './Page';
+
+const meta = {
+  title: 'Pages/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};

package/src/pages/Page.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import Header from '../components/Header/Header';
+
+type User = {
+  name: string;
+};
+
+const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
+
+export default Page;

package/src/pages/_page.scss

@@ -0,0 +1,69 @@
+.storybook-page {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 48px 20px;
+  margin: 0 auto;
+  max-width: 600px;
+  color: #333;
+}
+
+.storybook-page h2 {
+  font-weight: 700;
+  font-size: 32px;
+  line-height: 1;
+  margin: 0 0 4px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.storybook-page p {
+  margin: 1em 0;
+}
+
+.storybook-page a {
+  text-decoration: none;
+  color: #1ea7fd;
+}
+
+.storybook-page ul {
+  padding-left: 30px;
+  margin: 1em 0;
+}
+
+.storybook-page li {
+  margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+  display: inline-block;
+  border-radius: 1em;
+  font-size: 11px;
+  line-height: 12px;
+  font-weight: 700;
+  background: #e7fdd8;
+  color: #66bf3c;
+  padding: 4px 12px;
+  margin-right: 10px;
+  vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+  font-size: 13px;
+  line-height: 20px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  margin-right: 4px;
+  vertical-align: top;
+  margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+  fill: #1ea7fd;
+}

package/src/story-styles.scss

@@ -0,0 +1 @@
+@use 'design/colors-tokens/color-card';

package/src/styles.scss

@@ -0,0 +1,5 @@
+@use 'utils/vars';
+@use 'utils/typography';
+@use 'src/components/Button/button';
+@use 'src/components/Header/header';
+@use 'src/pages/page';

package/src/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/src/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/src/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/src/utils/index.ts

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

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "allowSyntheticDefaultImports": true,
+
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "custom.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+  },
+  "include": ["vite.config.ts","package.json"]
+}

package/vite.config.ts

@@ -0,0 +1,58 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import react from '@vitejs/plugin-react'
+import copy from 'rollup-plugin-copy';
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import * as packageJson from './package.json'
+
+const plugins = [
+  react(),
+  dts(),
+]
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: plugins,
+  build: {
+    minify: true,
+    reportCompressedSize: true,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: ['src/index.ts'],
+      name: 'seldon',
+      formats: ['es'],
+    },
+    outDir: 'dist',
+    rollupOptions: {
+      input: 'src/index.ts',
+      output: [
+        {
+          dir: 'dist',
+          preserveModulesRoot: 'src',
+          chunkFileNames: '[name].js',
+          entryFileNames: '[name].js'
+        }
+      ],
+      preserveModules: true,
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: [...Object.keys(packageJson.peerDependencies)],
+      plugins: [
+        copy({
+          flatten: false,
+          targets: [
+            // Sass entrypoint
+            { src: 'src/styles.scss', dest: ['dist/scss', 'public/scss'] },
+
+            // Sass components
+            {
+              src: ['src/components/**/*.scss', 'src/pages/**/*.scss'],
+              dest: ['dist/scss', 'public/scss'],
+            },
+          ],
+        }),
+        peerDepsExternal()
+      ],
+    },
+  },
+})