job listing

grucloud · Dec 3, 2024 · 1f6e549 · 1f6e549
1 parent cd04c9e
commit 1f6e549
Show file tree

Hide file tree

Showing 33 changed files with 718 additions and 2 deletions.
diff --git a/bau-ui/badge/badge.js b/bau-ui/badge/badge.js
@@ -7,7 +7,6 @@ export default function (context, options = {}) {
   const className = css`
     position: relative;
     & span {
-      display: block;
       position: absolute;
       display: flex;
       align-items: center;

diff --git a/bau-ui/chip/chip.js b/bau-ui/chip/chip.js
@@ -14,7 +14,6 @@ export default function (context, options = {}) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    vertical-align: middle;
     &.clickable {
       cursor: pointer;
     }

diff --git a/bau-ui/examples/bau-storybook/src/pages/chip/chip-example-custom.ts b/bau-ui/examples/bau-storybook/src/pages/chip/chip-example-custom.ts
@@ -0,0 +1,29 @@
+import chip from "@grucloud/bau-ui/chip";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section } = bau.tags;
+
+  const Chip = chip(context, {
+    class: css`
+      &.chip {
+        font-weight: 700;
+        font-size: 0.7rem;
+        border-radius: 0.8rem;
+        padding-inline: 0.5rem;
+        padding-block: 0.2rem;
+        text-transform: uppercase;
+      }
+    `,
+    variant: "solid",
+    color: "primary",
+  });
+
+  return () => {
+    return section(
+      //
+      Chip("My Custom Chip")
+    );
+  };
+};
diff --git a/bau-ui/examples/bau-storybook/src/pages/chip/chip.examples.ts b/bau-ui/examples/bau-storybook/src/pages/chip/chip.examples.ts
@@ -8,6 +8,10 @@ import chipDefault from "./chip-example-default.ts";
 // @ts-ignore
 import codeExampleDefault from "./chip-example-default.ts?raw";
 
+import chipCustom from "./chip-example-custom.ts";
+// @ts-ignore
+import codeExampleCustom from "./chip-example-custom.ts?raw";
+
 export const chipSpec = {
   title: "Chip",
   package: "chip",
@@ -23,6 +27,12 @@ export const chipSpec = {
       code: codeExampleDefault,
       createComponent: chipDefault,
     },
+    {
+      title: "Custom",
+      description: "A custom chip.",
+      code: codeExampleCustom,
+      createComponent: chipCustom,
+    },
   ],
   gridItem: chipGridItem,
 };

diff --git a/examples/README.md b/examples/README.md
@@ -17,6 +17,7 @@ Below is a list of projects implemented using _Bau_.
 | Faq Accordion | [live](https://grucloud.github.io/bau/frontendmentor/faq-accordion/) | [code](./faq-accordion) |
 | Interactive Rating Component | [live](https://grucloud.github.io/bau/frontendmentor/interactive-rating-component/) | [code](./interactive-rating-component) |
 | IP Address Tracker | [live](https://grucloud.github.io/bau/frontendmentor/ip-address-tracker/) | [code](./ip-address-tracker) |
+| Job Listing With Filtering | [live](https://grucloud.github.io/bau/frontendmentor/job-listings-with-filtering/) | [code](./job-listings-with-filtering) |
 | Launch Countdown Timer | [live](https://grucloud.github.io/bau/frontendmentor/launch-countdown-timer/) | [code](./launch-countdown-timer) |
 | Mortgage Repayment Calculator | [live](https://grucloud.github.io/bau/frontendmentor/mortgage-repayment-calculator/) | [code](./mortgage-repayment-calculator) |
 | Multi Step Form | [live](https://grucloud.github.io/bau/frontendmentor/multi-step-form/) | [code](./multi-step-form) |

diff --git a/examples/job-listings-with-filtering/.gitignore b/examples/job-listings-with-filtering/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/job-listings-with-filtering/.npmrc b/examples/job-listings-with-filtering/.npmrc
@@ -0,0 +1,2 @@
+save-exact = true
+package-lock = false
diff --git a/examples/job-listings-with-filtering/README.md b/examples/job-listings-with-filtering/README.md
@@ -0,0 +1,23 @@
+# Frontend Mentor Job Listings With Filtering
+
+Here is the implementation in [Bau.js](https://github.com/grucloud/bau) of the [Frontend Mentor Job Listings With Filtering code challenge](https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt)
+
+## Workflow
+
+Install the dependencies:
+
+```sh
+npm install
+```
+
+Start a development server:
+
+```sh
+npm run dev
+```
+
+Build a production version:
+
+```sh
+npm run build
+```
diff --git a/examples/job-listings-with-filtering/index.html b/examples/job-listings-with-filtering/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/png"
+      href="./assets/images/favicon-32x32.png"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Job Listings With Filtering | FrontendMentor</title>
+    <style id="bau-css"></style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/job-listings-with-filtering/package.json b/examples/job-listings-with-filtering/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "frontendmentor-job-listings-with-filtering",
+  "homepage": "https://grucloud.github.io/bau/frontendmentor/job-listings-with-filtering/",
+  "private": true,
+  "version": "0.95.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "deploy": "gh-pages -d ../../dist"
+  },
+  "devDependencies": {
+    "gh-pages": "6.1.1",
+    "typescript": "^5.0.2",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@grucloud/bau": "^0.95.0",
+    "@grucloud/bau-css": "^0.95.0",
+    "@grucloud/bau-ui": "^0.95.0"
+  }
+}
diff --git a/examples/job-listings-with-filtering/public/assets/images/account.svg b/examples/job-listings-with-filtering/public/assets/images/account.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/bg-header-desktop.svg b/examples/job-listings-with-filtering/public/assets/images/bg-header-desktop.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/bg-header-mobile.svg b/examples/job-listings-with-filtering/public/assets/images/bg-header-mobile.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/eyecam-co.svg b/examples/job-listings-with-filtering/public/assets/images/eyecam-co.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/faceit.svg b/examples/job-listings-with-filtering/public/assets/images/faceit.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/favicon-32x32.png b/examples/job-listings-with-filtering/public/assets/images/favicon-32x32.png
diff --git a/examples/job-listings-with-filtering/public/assets/images/icon-remove.svg b/examples/job-listings-with-filtering/public/assets/images/icon-remove.svg
diff --git a/examples/job-listings-with-filtering/public/assets/images/insure.svg b/examples/job-listings-with-filtering/public/assets/images/insure.svg