@phillips/seldon 1.2.1 → 1.3.0

package/README.md

@@ -16,6 +16,36 @@ yarn add @phillips/seldon
 
 ## What's included
 
+```
+@phillips/seldon/
+├── components
+│   └── HeroBanner
+│       └── HeroBanner.d.ts
+│       └── HeroBanner.js
+│   └── ...
+├── Pages
+│   └── HomePage
+│       └── HomePage.d.ts
+│       └── HomePage.js
+│   └── ...
+├── scss
+│   └── components
+│       └── HeroBanner
+│           └── _HeroBanner.scss
+│       └── ...
+│   └── Pages
+│       └── HomePage
+│           └── _HomePage.scss
+│       └── ...
+│   └── _reset.scss
+│   └── _typography_.scss
+│   └── _vars.scss
+│   └── styles.scss (sass entrypoint)
+├── utils
+├── index.d.ts
+├── index.js
+```
+
 ### 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.
@@ -32,14 +62,12 @@ If you wish to only import specific component styles you can find them in their
 
 ### Components
 
-Each component can be imported in your project by referencing the component name inside the `components` directory.
+Each component can be imported in your project by referencing the named exports from main index file.
 
 ```js
-import Button from '@phillips/seldon/dist/components/Button/Button';
+import { Button } from '@phillips/seldon';
 ```
 
-You can also use named exports for multiple component imports from main index file.
+### Contributing Guidelines
 
-```js
-import { Button } from '@phillips/seldon';
-```
+Before you start contributing to this project please check out our guidelines found [here](/src/docs/CONTRIBUTING.md)

package/dist/components/Button/Button.js

@@ -1,19 +1,20 @@
 import { jsx as a } from "react/jsx-runtime";
 import m from "../../node_modules/classnames/index.js";
-import { px as t } from "../../utils/index.js";
+import { px as o } from "../../utils/index.js";
 const c = ({
   primary: n = !1,
   size: e = "medium",
   backgroundColor: s,
   label: r,
-  id: o,
+  id: t,
   ...u
 }) => /* @__PURE__ */ a(
   "button",
   {
-    "data-testid": o ? `button-${o}` : "button",
+    "data-testid": t ? `button-${t}` : "button",
+    id: t,
     type: "button",
-    className: m(`${t}-button`, `${t}-button--${e}`, { [`${t}-button--secondary`]: !n }),
+    className: m(`${o}-button`, `${o}-button--${e}`, { [`${o}-button--secondary`]: !n }),
     style: { backgroundColor: s },
     ...u,
     children: r

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

@@ -3,9 +3,9 @@ type User = {
 };
 interface HeaderProps {
     user?: User;
-    onLogin: () => void;
-    onLogout: () => void;
-    onCreateAccount: () => void;
+    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/components/HeroBanner/HeroBanner.d.ts

@@ -24,7 +24,7 @@ interface HeroBannerProps {
     */
     background?: string;
     /**
-    * Unique id for component
+    * Unique id for component testing
     */
     id?: string;
 }

package/dist/components/HeroBanner/HeroBanner.js

@@ -1,32 +1,33 @@
-import { jsxs as e, jsx as n } from "react/jsx-runtime";
-import { px as p } from "../../utils/index.js";
-const s = `${p}-hero-banner`, m = ({
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { px as d } from "../../utils/index.js";
+const a = `${d}-hero-banner`, t = ({
   prehead: l,
   date: r,
-  headerText: a,
+  headerText: o,
   subHeadText: c,
   association: h,
-  background: i,
-  id: o
-}) => /* @__PURE__ */ e(
+  background: p,
+  id: e
+}) => /* @__PURE__ */ s(
   "header",
   {
-    "data-testid": o ? `hero-banner-${o}` : "hero-banner",
-    className: s,
-    style: { "--background": i },
+    "data-testid": e ? `hero-banner-${e}` : "hero-banner",
+    id: e,
+    className: a,
+    style: { "--background": p },
     children: [
-      l || r ? /* @__PURE__ */ e("p", { className: `${s}__pre-head`, children: [
+      l || r ? /* @__PURE__ */ s("p", { className: `${a}__pre-head`, children: [
         l ? /* @__PURE__ */ n("span", { children: l }) : null,
         r ? /* @__PURE__ */ n("span", { children: r }) : null
       ] }) : null,
-      a ? /* @__PURE__ */ e("h1", { className: `${s}__heading`, children: [
-        a,
+      /* @__PURE__ */ s("h1", { className: `${a}__heading`, children: [
+        o,
         c ? /* @__PURE__ */ n("span", { children: c }) : null
-      ] }) : null,
+      ] }),
       h ? /* @__PURE__ */ n("p", { children: h }) : null
     ]
   }
 );
 export {
-  m as default
+  t as default
 };

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -13,6 +13,25 @@
     padding: 1rem;
     width: 100%;
 
+    @media (max-width: 28.8125rem) {
+        flex-direction: column;
+        align-items: center;
+        gap: 1.875rem;
+        align-self: stretch;
+        padding: 1.875rem 0.9375rem;
+        background: $pure-black;
+
+        &::before{
+            content: '';
+            background: var(--background);
+            width: 100%;
+            height: 12rem;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+        }
+    }
+
     h1,
     h1 span,
     p {
@@ -39,6 +58,12 @@
         @media (min-width: 28.8125rem) {
             font-size: 0.875rem;
         }
+
+        @media (max-width: 28.8125rem) { 
+            flex-direction: column;
+            gap: 1rem;
+            align-items: center;
+        }
     }
 
     & .#{$px}-hero-banner__heading {
@@ -54,6 +79,10 @@
             font-size: 2.375rem;
         }
 
+        @media (max-width: 28.8125rem) { 
+            margin: 0;
+        }
+
         span {
             font-size: 1.625rem;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -21,13 +21,14 @@
   ],
   "scripts": {
     "dev": "vite",
+    "test": "jest",
+    "start": "storybook dev -p 6006",
     "build": "npm run clean && tsc && vite build",
     "build:storybook": "storybook build",
+    "preview": "npx http-server storybook-static",
     "clean": "rimraf './dist'",
     "clean:stories": "rimraf './storybook-static'",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "start": "storybook dev -p 6006",
-    "preview": "npx http-server storybook-static",
     "prepare": "husky install"
   },
   "dependencies": {
@@ -47,7 +48,11 @@
     "@storybook/react": "^7.0.22",
     "@storybook/react-vite": "^7.0.22",
     "@storybook/testing-library": "^0.0.14-next.2",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/color": "^3.0.3",
+    "@types/jest": "^29.5.3",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
@@ -60,6 +65,8 @@
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
     "prop-types": "^15.8.1",
     "rimraf": "^5.0.1",
     "rollup-plugin-copy": "^3.4.0",
@@ -67,6 +74,8 @@
     "sass": "^1.63.4",
     "semantic-release": "^21.0.5",
     "storybook": "^7.0.22",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",
     "vite-plugin-dts": "^2.3.0"