@phillips/seldon 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/.eslintrc.cjs +16 -0
  2. package/.github/CODEOWNERS +37 -0
  3. package/.github/CODE_OF_CONDUCT.md +91 -0
  4. package/.github/ISSUE_TEMPLATE/bug-report.md +41 -0
  5. package/.github/PULL_REQUEST_TEMPLATE.MD +28 -0
  6. package/.github/workflows/build.yml +26 -0
  7. package/.github/workflows/publish.yml +45 -0
  8. package/.storybook/assets/LogoBlack.svg +16 -0
  9. package/.storybook/main.ts +19 -0
  10. package/.storybook/manager-head.html +58 -0
  11. package/.storybook/manager.ts +6 -0
  12. package/.storybook/preview.ts +23 -0
  13. package/.storybook/seldonTheme.ts +43 -0
  14. package/custom.d.ts +12 -0
  15. package/index.html +13 -0
  16. package/package.json +2 -8
  17. package/public/vite.svg +1 -0
  18. package/src/App.css +42 -0
  19. package/src/App.tsx +35 -0
  20. package/src/README.md +43 -0
  21. package/src/assets/react.svg +1 -0
  22. package/src/components/Button/Button.stories.tsx +28 -0
  23. package/src/components/Button/Button.tsx +57 -0
  24. package/src/components/Button/_button.scss +39 -0
  25. package/src/components/Header/Header.stories.ts +26 -0
  26. package/src/components/Header/Header.tsx +56 -0
  27. package/src/components/Header/_header.scss +32 -0
  28. package/src/design/Welcome.mdx +68 -0
  29. package/src/design/assets/code-brackets.svg +1 -0
  30. package/src/design/assets/colors.svg +1 -0
  31. package/src/design/assets/comments.svg +1 -0
  32. package/src/design/assets/direction.svg +1 -0
  33. package/src/design/assets/flow.svg +1 -0
  34. package/src/design/assets/plugin.svg +1 -0
  35. package/src/design/assets/repo.svg +1 -0
  36. package/src/design/assets/stackalt.svg +1 -0
  37. package/src/design/colors-tokens/ColorCard.tsx +84 -0
  38. package/src/design/colors-tokens/_color-card.scss +84 -0
  39. package/src/design/colors-tokens/color-tokens.mdx +231 -0
  40. package/src/index.css +69 -0
  41. package/src/index.ts +3 -0
  42. package/src/main.tsx +10 -0
  43. package/src/pages/Page.stories.ts +29 -0
  44. package/src/pages/Page.tsx +74 -0
  45. package/src/pages/_page.scss +69 -0
  46. package/src/story-styles.scss +1 -0
  47. package/src/styles.scss +5 -0
  48. package/src/utils/_reset.scss +29 -0
  49. package/src/utils/_typography.scss +22 -0
  50. package/src/utils/_vars.scss +35 -0
  51. package/src/utils/index.ts +1 -0
  52. package/src/vite-env.d.ts +1 -0
  53. package/tsconfig.json +27 -0
  54. package/tsconfig.node.json +11 -0
  55. package/vite.config.ts +58 -0
package/.eslintrc.cjs ADDED
@@ -0,0 +1,16 @@
1
+ module.exports = {
2
+ env: {
3
+ browser: true,
4
+ es2020: true
5
+ },
6
+ extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
7
+ parser: '@typescript-eslint/parser',
8
+ parserOptions: {
9
+ ecmaVersion: 'latest',
10
+ sourceType: 'module'
11
+ },
12
+ plugins: ['react-refresh'],
13
+ rules: {
14
+ 'react-refresh/only-export-components': 'warn'
15
+ }
16
+ };
@@ -0,0 +1,37 @@
1
+ # This CODEOWNERS file defines individuals or teams that are responsible
2
+ # for code in this repository.
3
+
4
+ #####
5
+ # Code owners are automatically requested for review when someone
6
+ # opens a pull request that modifies code that they own. This repository
7
+ # has enabled the `required reviews` setting, and therefore all PR's require
8
+ # approval from a code owner before the author can merge a pull request.
9
+ # Further documentation: https://help.github.com/articles/about-codeowners/
10
+
11
+ #####
12
+ # These owners are the default owners for everything in the repo.
13
+ # Unless a later match takes precedence, the users below will be
14
+ # requested for review when someone opens a pull request.
15
+
16
+ #####
17
+ # These users own any files in the following directory at the root of
18
+ # the repository and any of its subdirectories.
19
+
20
+ * @davidicus @Sisawat @adietrich3074
21
+
22
+ #####
23
+ # Admin should be notified of changes to build/test/deploy
24
+
25
+ # Core dependencies
26
+ /package-lock.json @davidicus
27
+ /package.json @davidicus
28
+
29
+ # Configuration files
30
+ tsconfig.node.json @davidicus
31
+ vite.config.ts @davidicus
32
+ tsconfig.json @davidicus
33
+ /.nvmrc @davidicus
34
+
35
+ # Deploy configuration
36
+ **/.storybook/ @davidicus
37
+ /.github/ @davidicus
@@ -0,0 +1,91 @@
1
+ # Seldon Code of Conduct
2
+
3
+ ## TL;DR
4
+
5
+ - **Be respectful & understanding.** Not all of us will agree all the time, but
6
+ disagreement is no excuse for poor behavior or poor manners. It is important
7
+ that we resolve disagreements and differing views constructively.
8
+
9
+ * **Be welcoming.** We strive to be a community that welcomes and supports
10
+ people of all backgrounds and identities.
11
+
12
+ ## Our Pledge
13
+
14
+ In the interest of fostering an open and welcoming environment, we as
15
+ contributors and maintainers pledge to making participation in our project and
16
+ our community a harassment-free experience for everyone, regardless of age, body
17
+ size, disability, ethnicity, sex characteristics, gender identity and
18
+ expression, level of experience, education, socio-economic status, nationality,
19
+ personal appearance, race, religion, or sexual identity and orientation.
20
+
21
+ ## Our Standards
22
+
23
+ Examples of behavior that contributes to creating a positive environment
24
+ include:
25
+
26
+ - Using welcoming and inclusive language
27
+ - Being respectful of differing viewpoints and experiences
28
+ - Gracefully accepting constructive criticism
29
+ - Focusing on what is best for the community
30
+ - Showing empathy towards other community members
31
+
32
+ Examples of unacceptable behavior by participants include:
33
+
34
+ - The use of sexualized language or imagery and unwelcome sexual attention or
35
+ advances
36
+ - Trolling, insulting/derogatory comments, and personal or political attacks
37
+ - Degrading, demeaning or disrespectful comments
38
+ - Public or private harassment
39
+ - Publishing others' private information, such as a physical or electronic
40
+ address, without explicit permission
41
+ - Other conduct which could reasonably be considered inappropriate in a
42
+ professional setting
43
+
44
+ ## Our Responsibilities
45
+
46
+ Project maintainers are responsible for clarifying the standards of acceptable
47
+ behavior and are expected to take appropriate and fair corrective action in
48
+ response to any instances of unacceptable behavior.
49
+
50
+ Project maintainers have the right and responsibility to remove, edit, or reject
51
+ comments, commits, code, wiki edits, issues, and other contributions that are
52
+ not aligned to this Code of Conduct, or to ban temporarily or permanently any
53
+ contributor for other behaviors that they deem inappropriate, threatening,
54
+ offensive, or harmful.
55
+
56
+ ## Scope
57
+
58
+ This Code of Conduct applies within all project spaces, including _but not
59
+ limited to_ GitHub, e-mail and Slack. It also applies when an individual is
60
+ representing the project or its community in public spaces. Examples of
61
+ representing a project or community include using an official project e-mail
62
+ address, posting via an official social media account, or acting as an appointed
63
+ representative at an online or offline event. Representation of a project may be
64
+ further defined and clarified by project maintainers.
65
+
66
+ ## Enforcement
67
+
68
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be
69
+ reported by contacting maintainers at dconner@phillips.com. All complaints will be reviewed and investigated and will
70
+ result in a response that is deemed necessary and appropriate to the
71
+ circumstances. The project team is obligated to maintain confidentiality with
72
+ regard to the reporter of an incident. Further details of specific enforcement
73
+ policies may be posted separately.
74
+
75
+ Project maintainers who do not follow or enforce the Code of Conduct in good
76
+ faith may face temporary or permanent repercussions as determined by other
77
+ members of the project's leadership.
78
+
79
+ ## Attribution
80
+
81
+ This Code of Conduct is adapted from
82
+ [Contributor Covenant](https://www.contributor-covenant.org), version 1.4,
83
+ available
84
+ [here](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html).
85
+ For answers to common questions about this code of conduct, see the Contributor
86
+ Covenant [FAQ](https://www.contributor-covenant.org/faq).
87
+
88
+ <hr>
89
+
90
+ If you have suggestions to improve this Code of Conduct, please submit an issue
91
+ or PR.
@@ -0,0 +1,41 @@
1
+ ---
2
+ name: "Bug report \U0001F41B"
3
+ about: Create a report to help us improve
4
+ title: '[ComponentName] bug_title'
5
+ labels: 'bug'
6
+ assignees: ''
7
+ ---
8
+
9
+ ### Describe the bug
10
+
11
+ A clear and concise description of what the bug is.
12
+
13
+ ### To Reproduce
14
+
15
+ Steps to reproduce the behavior:
16
+
17
+ 1. Go to '...'
18
+ 2. Click on '....'
19
+ 3. Scroll down to '....'
20
+ 4. See error
21
+
22
+ ### Expected behavior
23
+
24
+ A clear and concise description of what you expected to happen.
25
+
26
+ ### Environment/versions:
27
+
28
+ - OS: [e.g. MacOS, Windows]
29
+ - Browser: [e.g. chrome, safari]
30
+ - `@phillips/seldon` version: [e.g. `v2.60.0`]
31
+
32
+ ### Additional context
33
+
34
+ If applicable, add screenshots to help explain your problem.
35
+
36
+ Add any other context about the problem here.
37
+
38
+ ### Specific timeline issues / requests
39
+
40
+ Do you want this work within a specific time period? Is it related to an
41
+ upcoming release?
@@ -0,0 +1,28 @@
1
+ Closes #
2
+
3
+ **Summary**
4
+
5
+ - summary_here
6
+
7
+ **Change List (describe the changes made to the files)**
8
+
9
+ - items_here
10
+
11
+ **Acceptance Test (how to verify the PR)**
12
+
13
+ - tests here
14
+
15
+ **Regression Test (how to make sure this PR doesn't break old functionality)**
16
+
17
+ - tests here
18
+
19
+ <!-- For reviewers: do not remove -->
20
+
21
+ **Things to look for during review**
22
+
23
+ - [ ] Make sure all references to `phillips` class prefix is using the prefix variable
24
+ - [ ] All major areas have a `data-testid` attribute.
25
+ - [ ] All strings should be translatable.
26
+ - [ ] Unit test should be written and should have a coverage of 90% or higher in all areas.
27
+ - [ ] Changes or new components should either write new or update existing documentation.
28
+ - [ ] PR should link and close out an existing issue
@@ -0,0 +1,26 @@
1
+ name: Build and test
2
+
3
+ on: [push, pull_request]
4
+
5
+ concurrency:
6
+ group: ${{ github.workflow }}-${{ github.ref }}
7
+ cancel-in-progress: true
8
+
9
+ jobs:
10
+ build:
11
+ runs-on: ubuntu-latest
12
+
13
+ steps:
14
+ - name: Checkout code
15
+ uses: actions/checkout@v3
16
+
17
+ - name: Setup Node.js
18
+ uses: actions/setup-node@v3
19
+ with:
20
+ node-version: '18.x'
21
+ cache: 'npm'
22
+
23
+ - name: Install dependencies
24
+ run: npm ci
25
+
26
+ - run: npm run build
@@ -0,0 +1,45 @@
1
+ name: Release
2
+ on:
3
+ push:
4
+ branches:
5
+ - main
6
+
7
+ permissions:
8
+ contents: read # for checkout
9
+
10
+ jobs:
11
+ release:
12
+ name: Release
13
+ runs-on: ubuntu-latest
14
+ permissions:
15
+ contents: write # to be able to publish a GitHub release
16
+ issues: write # to be able to comment on released issues
17
+ pull-requests: write # to be able to comment on released pull requests
18
+ id-token: write # to enable use of OIDC for npm provenance
19
+ steps:
20
+ - name: Checkout
21
+ uses: actions/checkout@v3
22
+ with:
23
+ fetch-depth: 0
24
+ persist-credentials: false
25
+
26
+ - name: Setup Node.js
27
+ uses: actions/setup-node@v3
28
+ with:
29
+ node-version: '18.x'
30
+ cache: 'npm'
31
+
32
+ - name: Install dependencies
33
+ run: npm ci
34
+
35
+ - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
36
+ run: npm audit signatures
37
+
38
+ - name: Build
39
+ run: npm run build
40
+
41
+ - name: publish
42
+ env:
43
+ GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
44
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
45
+ run: npx semantic-release
@@ -0,0 +1,16 @@
1
+ <svg version="1.1" id="Layer_1"
2
+ xmlns="http://www.w3.org/2000/svg"
3
+ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="700px" height="88px" viewBox="0 0 700 88" enable-background="new 0 0 700 88" xml:space="preserve">
4
+ <path d="M45.248,45.622H18.582V20.507h26.666c10.025,0,15.606,4.651,15.606,12.506C60.854,40.868,55.48,45.622,45.248,45.622z
5
+ M46.591,9.344H7.006v70.903h11.576V56.785h28.01c16.537,0,26.045-9.923,26.045-23.772C72.637,19.267,63.335,9.344,46.591,9.344z
6
+ M568.436,45.622h-26.665V20.507h26.665c10.026,0,15.607,4.651,15.607,12.506C584.043,40.868,578.668,45.622,568.436,45.622z
7
+ M569.779,9.344h-39.585v70.903h11.576V56.785h28.009c16.537,0,26.046-9.923,26.046-23.772
8
+ C595.825,19.267,586.523,9.344,569.779,9.344z M389.113,9.344h-11.576v70.903h58.707V69.084h-47.131V9.344z M630.729,62.725
9
+ l-3.905,10.449c9.096,5.169,24.607,8.52,35.562,8.52c20.258,0,32.971-7.958,32.971-21.911c0-16.434-15.606-19.328-32.557-20.981
10
+ c-10.854-1.034-22.223-1.86-22.223-9.716c0-6.098,5.479-10.025,20.052-10.025c8.682,0,18.707,1.964,27.079,5.479l3.617-10.543
11
+ c-9.302-4.03-20.567-6.098-30.49-6.098c-20.464,0-32.04,8.062-32.04,21.188c0,16.537,15.813,19.432,32.558,20.981
12
+ c10.853,1.033,22.118,1.964,22.118,9.716c0,6.305-5.685,10.749-20.981,10.749C653.085,70.531,640.093,67.718,630.729,62.725z
13
+ M470.455,80.247h11.575V9.344h-11.575V80.247z M119.25,9.344h-11.369v70.903h11.266V54.614h46.406v25.633h11.37V9.344h-11.37
14
+ v34.418h-46.406L119.25,9.344z M224.984,80.247h11.576V9.344h-11.576V80.247z M296.196,9.344H284.62v70.903h58.707V69.084h-47.13
15
+ V9.344z"/>
16
+ </svg>
@@ -0,0 +1,19 @@
1
+ import type { StorybookConfig } from "@storybook/react-vite";
2
+ const config: StorybookConfig = {
3
+ stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
4
+ addons: [
5
+ "@storybook/addon-links",
6
+ "@storybook/addon-essentials",
7
+ "@storybook/addon-interactions",
8
+ "@storybook/addon-styling",
9
+ ],
10
+ framework: {
11
+ name: "@storybook/react-vite",
12
+ options: {},
13
+ },
14
+ docs: {
15
+ autodocs: "tag",
16
+ defaultName: "Overview"
17
+ },
18
+ };
19
+ export default config;
@@ -0,0 +1,58 @@
1
+
2
+ <style>
3
+
4
+ /********************************
5
+ ** Side Panel
6
+ *********************************
7
+
8
+ /* Phillips logo */
9
+ .sidebar-header div:nth-child(2) {
10
+ margin-right: 0;
11
+ }
12
+
13
+ /* Search input */
14
+ #storybook-explorer-searchfield {
15
+ border-radius: 0;
16
+ }
17
+
18
+ .sidebar-subheading {
19
+ padding-bottom: 0.65rem;
20
+ padding-top: 0.65rem;
21
+ }
22
+
23
+ /* Story directory top level title */
24
+ .sidebar-subheading button {
25
+ /* color: #4A90e2; */
26
+ color: #545454;
27
+ font-size: 0.75rem;
28
+ }
29
+
30
+ .sidebar-item.sidebar-item {
31
+ padding-bottom: 0.65rem;
32
+ padding-top: 0.65rem;
33
+ }
34
+
35
+ .sidebar-item.sidebar-item:focus,
36
+ .sidebar-item.sidebar-item:hover {
37
+ background: rgb(0 0 0 / 7%)
38
+ }
39
+
40
+ /* Side panel document icon */
41
+ [data-nodetype="document"] svg {
42
+ /* color: #4A90e2; */
43
+ color: #000000;
44
+ }
45
+
46
+ /* Side panel story icon */
47
+ [data-nodetype="story"] svg {
48
+ /* color: #ff0086; */
49
+ color: #000000;
50
+ }
51
+
52
+ .sidebar-item .css-y62rhu {
53
+ /* color: #4A90e2; */
54
+ color: #000000;
55
+ }
56
+
57
+
58
+ </style>
@@ -0,0 +1,6 @@
1
+ import { addons } from '@storybook/manager-api';
2
+ import seldon from './seldonTheme';
3
+
4
+ addons.setConfig({
5
+ theme: seldon,
6
+ });
@@ -0,0 +1,23 @@
1
+ import type { Preview } from "@storybook/react";
2
+ import '../src/styles.scss';
3
+ import '../src/story-styles.scss';
4
+
5
+
6
+ const preview: Preview = {
7
+ parameters: {
8
+ actions: { argTypesRegex: "^on[A-Z].*" },
9
+ controls: {
10
+ matchers: {
11
+ color: /(background|color)$/i,
12
+ date: /Date$/,
13
+ },
14
+ },
15
+ options: {
16
+ storySort: {
17
+ order: ['Welcome', 'Design', 'Components', 'Pages'],
18
+ },
19
+ },
20
+ },
21
+ };
22
+
23
+ export default preview;
@@ -0,0 +1,43 @@
1
+ import { create } from '@storybook/theming/create';
2
+ // @ts-ignore
3
+ import Logo from './assets/LogoBlack.svg';
4
+
5
+ export default create({
6
+ base: 'light',
7
+ // Typography
8
+ fontBase: '"Open Sans", sans-serif',
9
+ fontCode: 'monospace',
10
+
11
+ brandTitle: 'Easel by Phillips',
12
+ brandUrl: 'https://phillips.com',
13
+ brandImage: Logo,
14
+ brandTarget: '_self',
15
+
16
+ //
17
+ colorPrimary: '#4A90e2',
18
+ // colorSecondary: '#ff0086',
19
+ colorSecondary: '#000000',
20
+
21
+ // UI
22
+ // appBg: 'rgb(244 242 241 / 12%)',
23
+ appBg: '#ffffff',
24
+ appContentBg: '#ffffff',
25
+ appBorderColor: '#585C6D',
26
+ appBorderRadius: 4,
27
+
28
+ // Text colors
29
+ textColor: '#000000',
30
+ textInverseColor: '#ffffff',
31
+
32
+ // Toolbar default and active colors
33
+ barTextColor: '#9E9E9E',
34
+ barSelectedColor: '#000000',
35
+ // barSelectedColor: '#585C6D',
36
+ barBg: '#ffffff',
37
+
38
+ // Form colors
39
+ inputBg: '#ffffff',
40
+ inputBorder: '#000000',
41
+ inputTextColor: '#000000',
42
+ inputBorderRadius: 0,
43
+ });
package/custom.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ declare module '*.svg' {
2
+ import * as React from 'react';
3
+
4
+ export const ReactComponent: React.FunctionComponent<React.SVGProps<
5
+ SVGSVGElement
6
+ > & { title?: string }>;
7
+
8
+ const src: string;
9
+ export default src;
10
+ }
11
+
12
+ declare module '*.svg';
package/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Vite + React + TS</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phillips/seldon",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "type": "module",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -9,11 +9,6 @@
9
9
  "import": "./dist/index.js"
10
10
  }
11
11
  },
12
- "files": [
13
- "dist",
14
- "dist/**/*",
15
- "README.md"
16
- ],
17
12
  "scripts": {
18
13
  "dev": "vite",
19
14
  "clean": "rimraf './dist'rimraf",
@@ -78,8 +73,7 @@
78
73
  {
79
74
  "assets": [
80
75
  "package.json",
81
- "CHANGELOG.md",
82
- "README.md"
76
+ "CHANGELOG.md"
83
77
  ],
84
78
  "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
85
79
  }
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
package/src/App.css ADDED
@@ -0,0 +1,42 @@
1
+ #root {
2
+ max-width: 1280px;
3
+ margin: 0 auto;
4
+ padding: 2rem;
5
+ text-align: center;
6
+ }
7
+
8
+ .logo {
9
+ height: 6em;
10
+ padding: 1.5em;
11
+ will-change: filter;
12
+ transition: filter 300ms;
13
+ }
14
+ .logo:hover {
15
+ filter: drop-shadow(0 0 2em #646cffaa);
16
+ }
17
+ .logo.react:hover {
18
+ filter: drop-shadow(0 0 2em #61dafbaa);
19
+ }
20
+
21
+ @keyframes logo-spin {
22
+ from {
23
+ transform: rotate(0deg);
24
+ }
25
+ to {
26
+ transform: rotate(360deg);
27
+ }
28
+ }
29
+
30
+ @media (prefers-reduced-motion: no-preference) {
31
+ a:nth-of-type(2) .logo {
32
+ animation: logo-spin infinite 20s linear;
33
+ }
34
+ }
35
+
36
+ .card {
37
+ padding: 2em;
38
+ }
39
+
40
+ .read-the-docs {
41
+ color: #888;
42
+ }
package/src/App.tsx ADDED
@@ -0,0 +1,35 @@
1
+ import { useState } from 'react'
2
+ import reactLogo from './assets/react.svg'
3
+ import viteLogo from '/vite.svg'
4
+ import './App.css'
5
+
6
+ function App() {
7
+ const [count, setCount] = useState(0)
8
+
9
+ return (
10
+ <>
11
+ <div>
12
+ <a href="https://vitejs.dev" target="_blank">
13
+ <img src={viteLogo} className="logo" alt="Vite logo" />
14
+ </a>
15
+ <a href="https://react.dev" target="_blank">
16
+ <img src={reactLogo} className="logo react" alt="React logo" />
17
+ </a>
18
+ </div>
19
+ <h1>Vite + React</h1>
20
+ <div className="card">
21
+ <button onClick={() => setCount((count) => count + 1)}>
22
+ count is {count}
23
+ </button>
24
+ <p>
25
+ Edit <code>src/App.tsx</code> and save to test HMR
26
+ </p>
27
+ </div>
28
+ <p className="read-the-docs">
29
+ Click on the Vite and React logos to learn more
30
+ </p>
31
+ </>
32
+ )
33
+ }
34
+
35
+ export default App
package/src/README.md ADDED
@@ -0,0 +1,43 @@
1
+ # Easel Design System 🎨 by Phillips Auction House
2
+
3
+ Seldon is the source for design guidelines, component documentation, and resources for building apps with the Phillips.com Design System.
4
+
5
+ ## Installation
6
+
7
+ ```
8
+ # With NPM
9
+ npm install @phillips/seldon
10
+
11
+ # With yarn
12
+ yarn add @phillips/seldon
13
+ ```
14
+
15
+ ## What's included
16
+
17
+ ### Styling
18
+
19
+ 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.
20
+
21
+ ```scss
22
+ @use '@phillips/seldon/scss/styles';
23
+ ```
24
+
25
+ If you wish to only import specific component styles you can find them in their respective directories inside the `scss` folder.
26
+
27
+ ```scss
28
+ @use '@phillips/seldon/scss/components/Button/button';
29
+ ```
30
+
31
+ ### Components
32
+
33
+ Each component can be imported in your project by referencing the component name inside the `components` directory.
34
+
35
+ ```js
36
+ import Button from '@phillips/seldon/components/Button/Button';
37
+ ```
38
+
39
+ You can also use named exports for multiple component imports from main index file.
40
+
41
+ ```js
42
+ import { Button } from '@phillips/seldon';
43
+ ```
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>