@rileybathurst/paddle 1.3.4 → 1.3.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.3.4",
+  "version": "1.3.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/Select.stories.tsx

@@ -0,0 +1,18 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './Select';
+
+const meta = {
+  component: Select,
+  title: 'Atoms/Select',
+  args: {},
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/Select.tsx

@@ -0,0 +1,23 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+export const Select = () => {
+
+  return (
+    <select
+      className="comparesheet_select"
+      name={faker.commerce.productName()}
+      aria-label="Select a product"
+    >
+      {Array.from({ length: faker.number.int({ min: 1, max: 10 }) }).map(() => (
+        <option
+          key={faker.string.uuid()}
+          value={faker.commerce.productName()}
+        >
+          {faker.commerce.productName()}
+        </option>
+      ))}
+    </select>
+  );
+};

package/src/paddle-pricing-chart.tsx

@@ -10,9 +10,7 @@ const LineBreaker = ({ text }: { text: string; }) => {
   // console.log(newStr);
 
   return (
-    <h4>
-      <SVG src={newStr} />
-    </h4>
+    <h4 dangerouslySetInnerHTML={{ __html: newStr }} />
   );
 }
 
@@ -30,7 +28,6 @@ export const PaddlePricingChart = ({ rentalRates, rentalAddons, book, peek_base,
 
           {rentalRates.nodes.map((rate) => (
             <div key={rate.id} className="row">
-              {/* <h4>{rate.item}</h4> */}
               <LineBreaker text={rate.item} />
               <p>{rate.oneHour}</p>
               <p>{rate.threeHour}</p>

package/src/styles/typography.css

@@ -198,20 +198,35 @@ hgroup {
   line-height: 1.5;
 }
 
+/*------------------------------------*/
+
 select {
   font-size: var(--vinson);
   font-family: var(--body_font);
   margin-block-end: 0;
-  /* A reset of styles, including removing the default dropdown arrow */
-  appearance: none;
-  /* Additional resets for further consistency */
-  background-color: transparent;
-  border: none;
-  padding: 0 var(--vinson) 0 0;
   margin: 0;
-  width: 100%;
   cursor: inherit;
   line-height: inherit;
+  padding: var(--kosciuszko);
+  border: 1px solid var(--neutral-100);
+  background-color: var(--neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--neutral-700);
+    background-color: var(--neutral-600);
+    color: var(--neutral-200);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .tahoe-city select {
+    border-color: var(--sand-200);
+    background-color: var(--sand-100);
+  }
+}
+
+.comparesheet_select {
+  width: 100%;
 }
 
 /*------------------*/
@@ -238,4 +253,4 @@ select {
     color: hsl(var(--sand__base), var(--dark));
   }
 }
- */
+ */