@conduction/components 2.2.27 → 2.2.29

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -0,0 +1,235 @@
+:root {
+  --conduction-primary-top-nav-color: #4a4a4a;
+  --conduction-primary-top-nav-background-color: #ffffff;
+  --conduction-primary-top-nav-toggle-icon-size: 24px;
+  --conduction-primary-top-nav-mobile-logo-padding: 18px;
+
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+  /* --conduction-primary-top-nav-item-border-radius: var(--skeleton-size-2x); */
+
+  /* --conduction-primary-top-nav-current-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-current-color: #4376fc; */
+  /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */
+  /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */
+
+  /* --conduction-primary-top-nav-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */
+
+  /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */
+  /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */
+  /* --conduction-primary-top-nav-dropdown-border-width: 1px; */
+  /* --conduction-primary-top-nav-dropdown-border-style: solid; */
+  /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */
+  /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */
+  /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */
+}
+
+.container {
+  width: 100%;
+}
+
+.menuToggleContainer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.menuToggleContainer > .menuToggle {
+  all: unset;
+  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
+  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
+  color: var(--conduction-primary-top-nav-color);
+}
+
+.menuToggleContainer > .menuToggle:hover {
+  cursor: pointer;
+}
+
+.primary {
+  display: none;
+}
+
+.primary.isOpen {
+  display: block;
+}
+
+.menuToggleContainer {
+  width: 100%;
+}
+
+.primary {
+  font-weight: 500;
+  width: 100%;
+  background-color: var(--conduction-primary-top-nav-background-color);
+}
+
+.primary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  padding-inline-start: unset;
+  align-items: center;
+  max-height: 80vh;
+  overflow-y: scroll;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  position: relative;
+  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
+  padding-block-start: var(--conduction-primary-top-nav-item-padding);
+  padding-block-end: var(--conduction-primary-top-nav-item-padding);
+  border-radius: var(--conduction-primary-top-nav-item-border-radius);
+}
+
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-hover-background-color);
+  box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-current-background-color);
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+
+.current:hover {
+  box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+}
+.current:hover > .currentLink {
+  color: var(--conduction-primary-top-nav-hover-color) !important;
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
+}
+
+.mobileLink {
+  margin-block-end: var(--skeleton-size-md);
+}
+.primary .link {
+  text-decoration: none;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: wrap;
+}
+
+.primary .link:not(.currentLink) {
+  display: block;
+  color: var(--conduction-primary-top-nav-color);
+}
+
+.primary .li:hover .link {
+  color: var(--conduction-primary-top-nav-hover-color);
+}
+
+.link > * {
+  margin-inline-end: 8px;
+}
+
+.dropdown {
+  left: 0;
+  top: 100%;
+  padding: 0;
+  width: 100%;
+  display: none;
+  list-style-type: none;
+  background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color));
+}
+
+.dropdown.isOpen {
+  display: block;
+}
+
+.li.current {
+  box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow);
+}
+
+.primary .dropdown .li .link {
+  color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color));
+}
+
+.primary .dropdown .li:hover .link {
+  color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color));
+}
+
+.dropdown .li:hover {
+  background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color));
+  box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow));
+}
+
+.dropdown > li {
+  padding-inline-start: var(--skeleton-size-md);
+}
+
+.toggleIcon {
+  margin-inline-start: var(--skeleton-size-xs);
+  transition: transform 100ms ease-in-out;
+}
+
+.toggleIcon.isOpen {
+  transform: rotate(90deg);
+  transition: transform 100ms ease-in-out;
+}
+
+.label {
+  overflow: hidden;
+  max-width: 37ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label > :not(:last-child) {
+  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
+}
+
+.li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
+@media only screen and (min-width: 992px) {
+  .container {
+    width: fit-content;
+  }
+
+  .primary {
+    display: block;
+    width: fit-content;
+  }
+
+  .ul {
+    display: flex;
+    overflow-y: unset;
+  }
+
+  .dropdown {
+    position: absolute;
+    display: none;
+    border-width: var(--conduction-primary-top-nav-dropdown-border-width);
+    border-style: var(--conduction-primary-top-nav-dropdown-border-style);
+    border-color: var(--conduction-primary-top-nav-dropdown-border-color);
+    border-top: none;
+  }
+
+  .menuToggleContainer {
+    display: none;
+  }
+
+  .mobileLink {
+    margin-block-end: unset;
+  }
+
+  .li.current {
+    box-shadow: var(--conduction-primary-top-nav-current-box-shadow);
+  }
+}

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -0,0 +1,80 @@
+:root {
+  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
+  --conduction-secondary-top-nav-background-color: #ffffff;
+  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
+  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
+
+  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
+
+  /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-current-background-color: #ffffff;
+  --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black;
+
+  --conduction-secondary-top-nav-hover-color: #4376fc;
+  --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */
+}
+
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-end: var(--conduction-secondary-top-nav-item-padding);
+}
+
+.li:hover {
+  background-color: var(--conduction-secondary-top-nav-hover-background-color);
+}
+
+.current {
+  background-color: var(--conduction-secondary-top-nav-current-background-color);
+  box-shadow: var(--conduction-secondary-top-nav-current-box-shadow);
+}
+
+.currentLink {
+  color: var(--conduction-primary-top-nav-current-color) !important;
+}
+
+.secondary {
+  font-weight: var(--conduction-secondary-top-nav-font-weight);
+  width: fit-content;
+  font-size: var(--conduction-secondary-top-nav-font-size);
+  background-color: var(--conduction-secondary-top-nav-background-color);
+}
+
+.secondary .li:hover .link {
+  color: var(--conduction-secondary-top-nav-hover-color);
+  display: block;
+}
+.secondary .link {
+  color: var(--conduction-secondary-top-nav-color);
+  display: block;
+}
+
+.label {
+  overflow: hidden;
+  max-width: 37ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label > :not(:last-child) {
+  margin-inline-end: var(--conduction-secondary-top-nav-item-icon-margin);
+}
+
+.link > * {
+  margin-inline-end: 8px;
+}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.27",
+  "version": "2.2.29",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
     "clean": "rimraf lib/",
-    "build": "tsc",
+    "build": "npm-run-all build:**",
+    "build:tsc": "tsc",
+    "build:copyCSS": "copyfiles -u 1 src/**/*.css lib/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -39,6 +41,7 @@
     "@types/react": "^18.2.38",
     "@types/react-datepicker": "^4.19.3",
     "@types/react-dom": "^18.2.16",
+    "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "tsc-hooks": "^1.1.2",
     "typescript": "^5.3.2"

package/tsconfig.json

@@ -15,7 +15,15 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "hooks": ["copy-files"],
-  "include": ["src", "src/**/*.css"],
-  "exclude": ["node_modules", "**/__tests__/*", "lib/**/*"]
+  "hooks": [
+    "copy-files"
+  ],
+  "include": [
+    "src",
+    "src/**/*.css"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/__tests__/*"
+  ]
 }