@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.
- package/.eslintrc.cjs +16 -0
- package/.github/CODEOWNERS +37 -0
- package/.github/CODE_OF_CONDUCT.md +91 -0
- package/.github/ISSUE_TEMPLATE/bug-report.md +41 -0
- package/.github/PULL_REQUEST_TEMPLATE.MD +28 -0
- package/.github/workflows/build.yml +26 -0
- package/.github/workflows/publish.yml +45 -0
- package/.storybook/assets/LogoBlack.svg +16 -0
- package/.storybook/main.ts +19 -0
- package/.storybook/manager-head.html +58 -0
- package/.storybook/manager.ts +6 -0
- package/.storybook/preview.ts +23 -0
- package/.storybook/seldonTheme.ts +43 -0
- package/custom.d.ts +12 -0
- package/index.html +13 -0
- package/package.json +2 -8
- package/public/vite.svg +1 -0
- package/src/App.css +42 -0
- package/src/App.tsx +35 -0
- package/src/README.md +43 -0
- package/src/assets/react.svg +1 -0
- package/src/components/Button/Button.stories.tsx +28 -0
- package/src/components/Button/Button.tsx +57 -0
- package/src/components/Button/_button.scss +39 -0
- package/src/components/Header/Header.stories.ts +26 -0
- package/src/components/Header/Header.tsx +56 -0
- package/src/components/Header/_header.scss +32 -0
- package/src/design/Welcome.mdx +68 -0
- package/src/design/assets/code-brackets.svg +1 -0
- package/src/design/assets/colors.svg +1 -0
- package/src/design/assets/comments.svg +1 -0
- package/src/design/assets/direction.svg +1 -0
- package/src/design/assets/flow.svg +1 -0
- package/src/design/assets/plugin.svg +1 -0
- package/src/design/assets/repo.svg +1 -0
- package/src/design/assets/stackalt.svg +1 -0
- package/src/design/colors-tokens/ColorCard.tsx +84 -0
- package/src/design/colors-tokens/_color-card.scss +84 -0
- package/src/design/colors-tokens/color-tokens.mdx +231 -0
- package/src/index.css +69 -0
- package/src/index.ts +3 -0
- package/src/main.tsx +10 -0
- package/src/pages/Page.stories.ts +29 -0
- package/src/pages/Page.tsx +74 -0
- package/src/pages/_page.scss +69 -0
- package/src/story-styles.scss +1 -0
- package/src/styles.scss +5 -0
- package/src/utils/_reset.scss +29 -0
- package/src/utils/_typography.scss +22 -0
- package/src/utils/_vars.scss +35 -0
- package/src/utils/index.ts +1 -0
- package/src/vite-env.d.ts +1 -0
- package/tsconfig.json +27 -0
- package/tsconfig.node.json +11 -0
- 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,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
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.
|
|
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
|
}
|
package/public/vite.svg
ADDED
|
@@ -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>
|