willba-component-library 0.1.13 → 0.1.15

package/src/themes/Default.css

@@ -1,43 +1,43 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
-
-.will-root * {
-  font-family: 'Montserrat', sans-serif;
-}
-
-.will-root {
-  
-  box-sizing: border-box;
-  font-size: 14px;
-  
-  color: #1E1E1E;
-
-  /* Pallete */
-  --will-primary: #374269;
-  --will-secondary: #374269;
-  --will-grey: #ABA7AF;
-  --will-white: #fff;
-  --will-onahau: #CDEEFF;
-  --will-text: #5A5959;
-
-  /* Confines */
-  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
-
-  /* Breakpoints */
-
-  --will-lg: 1140px;
-  --will-md: 960px;
-  --will-sm: 600px;
-  --will-xl: 1280px;
-  --will-xs: 0px;
-}
-
-/* Typography */
-
-.will-root h1, h2, h3, h4, h5, h6 {
- font-weight: 700;
-} 
-
-.will-root p, h1, h2, h3, h4, h5, h6, span {
-  margin: 0;
-  padding: 0;
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+
+.will-root * {
+  font-family: 'Montserrat', sans-serif;
+}
+
+.will-root {
+  
+  box-sizing: border-box;
+  font-size: 14px;
+  
+  color: #1E1E1E;
+
+  /* Pallete */
+  --will-primary: #374269;
+  --will-secondary: #374269;
+  --will-grey: #ABA7AF;
+  --will-white: #fff;
+  --will-onahau: #CDEEFF;
+  --will-text: #5A5959;
+
+  /* Confines */
+  --will-box-shadow: 0px 6px 11px 0px #a7a4a480;
+
+  /* Breakpoints */
+
+  --will-lg: 1140px;
+  --will-md: 960px;
+  --will-sm: 600px;
+  --will-xl: 1280px;
+  --will-xs: 0px;
+}
+
+/* Typography */
+
+.will-root h1, h2, h3, h4, h5, h6 {
+ font-weight: 700;
+} 
+
+.will-root p, h1, h2, h3, h4, h5, h6, span {
+  margin: 0;
+  padding: 0;
 }

package/src/themes/useTheme.tsx

@@ -1,24 +1,24 @@
-import { CSSProperties } from 'react'
-
-export interface Palette {
-  primary: string
-  secondary: string
-}
-
-export interface ThemeProps {
-  palette?: Palette
-}
-
-interface CustomPaletteTypes extends CSSProperties {
-  '--will-primary'?: string
-  '--will-secondary'?: string
-}
-
-export default function useTheme({ palette }: ThemeProps) {
-  const themePalette: CustomPaletteTypes = {
-    '--will-primary': palette?.primary,
-    '--will-secondary': palette?.secondary,
-  }
-
-  return themePalette
-}
+import { CSSProperties } from 'react'
+
+export interface Palette {
+  primary: string
+  secondary: string
+}
+
+export interface ThemeProps {
+  palette?: Palette
+}
+
+interface CustomPaletteTypes extends CSSProperties {
+  '--will-primary'?: string
+  '--will-secondary'?: string
+}
+
+export default function useTheme({ palette }: ThemeProps) {
+  const themePalette: CustomPaletteTypes = {
+    '--will-primary': palette?.primary,
+    '--will-secondary': palette?.secondary,
+  }
+
+  return themePalette
+}

package/stories/Button.stories.ts

@@ -1,50 +1,50 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/stories/Button.tsx

@@ -1,48 +1,48 @@
-import React from 'react';
-import './button.css';
-
-interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
-  primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};