({
display: "flex",
flexWrap: "wrap",
- marginLeft: `calc(${theme.spaces[2]} * -1)`,
- marginRight: `calc(${theme.spaces[2]} * -1)`,
+ marginLeft: `calc(${theme.spaces?.[2]} * -1)`,
+ marginRight: `calc(${theme.spaces?.[2]} * -1)`,
width: "100%",
})}
{...props}
diff --git a/src/components/SchemeProvider.tsx b/src/components/SchemeProvider.tsx
index 8b0a8a7..bc24f36 100644
--- a/src/components/SchemeProvider.tsx
+++ b/src/components/SchemeProvider.tsx
@@ -7,8 +7,9 @@ type ColorScheme = "dark" | "light" | "gray";
type SchemeProviderProps = ColorSetProps & BoxProps;
-interface Props extends SchemeProviderProps {
+export interface Props extends SchemeProviderProps {
scheme?: ColorScheme;
+ children?: React.ReactNode;
}
const schemeSet = variant({
@@ -19,12 +20,16 @@ const schemeSet = variant({
const SchemeProvider: React.FC
= styled(Box)(schemeSet);
-const schemeProviderDefaultProps: Props = {
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
scheme: "dark",
};
-SchemeProvider.defaultProps = schemeProviderDefaultProps;
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const SchemeProviderWithDefaults: React.FC = (props) => {
+ return ;
+};
-SchemeProvider.displayName = "SchemeProvider";
+SchemeProviderWithDefaults.displayName = "SchemeProvider";
-export default SchemeProvider;
+export default SchemeProviderWithDefaults;
diff --git a/src/components/Section.tsx b/src/components/Section.tsx
index a792236..24bb073 100644
--- a/src/components/Section.tsx
+++ b/src/components/Section.tsx
@@ -2,14 +2,24 @@ import * as React from "react";
import styled from "../lib/styled";
import Box, { BoxProps } from "./Box";
-const Section: React.FC = styled(Box)();
+export interface Props extends BoxProps {
+ children?: React.ReactNode;
+ scheme?: string;
+}
-Section.defaultProps = {
- ...Box.defaultProps,
+const Section: React.FC = styled(Box)();
+
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
as: "section",
marginBottom: 5,
};
-Section.displayName = "Section";
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const SectionWithDefaults: React.FC = (props) => {
+ return ;
+};
+
+SectionWithDefaults.displayName = "Section";
-export default Section;
+export default SectionWithDefaults;
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
index ab23fef..9782a12 100644
--- a/src/components/Text.tsx
+++ b/src/components/Text.tsx
@@ -32,21 +32,25 @@ export type TextProps = TextSetProps &
React.AnchorHTMLAttributes &
React.HTMLAttributes;
-interface Props extends TextProps {}
+export interface Props extends TextProps {}
const getLineHeights = (size: any, theme: Theme) => {
+ if (!theme?.lineHeights) {
+ return 1.4; // fallback line height
+ }
+
const getValue = (fs: any) => {
switch (fs) {
case 5:
- return theme.lineHeights[3];
+ return theme.lineHeights[3] || 1.1;
case 4:
- return theme.lineHeights[2];
+ return theme.lineHeights[2] || 1.2;
case 3:
- return theme.lineHeights[1];
+ return theme.lineHeights[1] || 1.3;
case 0:
- return theme.lineHeights[1];
+ return theme.lineHeights[1] || 1.3;
default:
- return theme.lineHeights[0];
+ return theme.lineHeights[0] || 1.4;
}
};
@@ -58,22 +62,30 @@ const getLineHeights = (size: any, theme: Theme) => {
};
const getMarginBottom = (size: any, theme: Theme) => {
+ if (!theme?.spaces) {
+ return "0px"; // fallback margin
+ }
+
if (isArray(size)) {
- return [theme.spaces[size[0]], theme.spaces[size[1]]];
+ return [theme.spaces[size[0]] || "0px", theme.spaces[size[1]] || "0px"];
}
- return theme.spaces[size];
+ return theme.spaces[size] || "0px";
};
const getTracking = (size: any, theme: Theme) => {
+ if (!theme?.letterSpacing) {
+ return "0em"; // fallback letter spacing
+ }
+
const getValue = (fs: any) => {
switch (fs) {
case 5:
- return theme.letterSpacing[1];
+ return theme.letterSpacing[1] || "-0.025em";
case 4:
- return theme.letterSpacing[2];
+ return theme.letterSpacing[2] || "-0.015em";
default:
- return theme.letterSpacing[0];
+ return theme.letterSpacing[0] || "0em";
}
};
@@ -81,12 +93,17 @@ const getTracking = (size: any, theme: Theme) => {
};
const Text: React.FC = styled(polymorph("p"))(
- (props) =>
- mq({
+ (props) => {
+ if (!props.theme) {
+ return {}; // return empty styles if theme is undefined
+ }
+
+ return mq({
lineHeight: getLineHeights(props.fontSize, props.theme),
marginBottom: getMarginBottom(props.fontSize, props.theme),
letterSpacing: getTracking(props.fontSize, props.theme),
- }),
+ });
+ },
layoutSet,
opacity,
spaceSet,
@@ -96,13 +113,19 @@ const Text: React.FC = styled(polymorph("p"))(
cursorSet,
);
-Text.defaultProps = {
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
color: "inherit",
fontSize: 1,
fontFamily: "main",
textDecoration: "none",
};
-Text.displayName = "Text";
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const TextWithDefaults: React.FC = (props) => {
+ return ;
+};
+
+TextWithDefaults.displayName = "Text";
-export default Text;
+export default TextWithDefaults;
diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
index 8b78a1a..73f4be7 100644
--- a/src/components/TextInput.tsx
+++ b/src/components/TextInput.tsx
@@ -8,17 +8,18 @@ type TextInputProps = SpaceSetProps &
FontSizeProps &
React.HTMLProps;
-interface Props extends TextInputProps {
+export interface Props extends TextInputProps {
label?: string;
name?: string;
required?: boolean;
type?: string;
+ children?: React.ReactNode;
}
const StyledTextInput: React.FC = styled.input(
spaceSet,
fontSize,
- props => ({
+ (props) => ({
background: "none",
border: "none",
borderBottom: `1px solid ${props.theme.colors.dark}30`,
@@ -26,7 +27,7 @@ const StyledTextInput: React.FC = styled.input(
}),
);
-export const TextInput: React.FC = props => {
+export const TextInput: React.FC = (props) => {
const [focus, setFocus] = React.useState(false);
const handleBlur = (e: React.ChangeEvent) => {
@@ -72,13 +73,19 @@ export const TextInput: React.FC = props => {
);
};
-TextInput.defaultProps = {
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
paddingY: 1,
fontSize: 2,
label: "label",
type: "text",
};
-TextInput.displayName = "TextInput";
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const TextInputWithDefaults: React.FC = (props) => {
+ return ;
+};
+
+TextInputWithDefaults.displayName = "TextInput";
-export default TextInput;
+export default TextInputWithDefaults;
diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx
index 81ac7e9..5b5a0f7 100644
--- a/src/components/TextLink.tsx
+++ b/src/components/TextLink.tsx
@@ -3,15 +3,15 @@ import styled from "../lib/styled";
import Text, { TextProps } from "./Text";
import { rgbaify } from "../lib/utils";
-export type TextLinkProps = TextProps &
- React.AnchorHTMLAttributes;
+type TextLinkProps = TextProps & React.AnchorHTMLAttributes;
-interface Props extends TextLinkProps {
+export interface Props extends TextLinkProps {
scheme?: "dark" | "light";
underline?: boolean;
+ children?: React.ReactNode;
}
-const TextLink: React.FC = styled(Text)(props =>
+const TextLink: React.FC = styled(Text)((props) =>
props.underline
? {
boxShadow:
@@ -45,15 +45,25 @@ const TextLink: React.FC = styled(Text)(props =>
},
);
-TextLink.defaultProps = {
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
as: "a",
opacity: 0,
cursor: "pointer",
scheme: "light",
underline: false,
- ...Text.defaultProps,
+ // Text component defaults
+ color: "inherit",
+ fontSize: 1,
+ fontFamily: "main",
+ textDecoration: "none",
};
-TextLink.displayName = "TextLink";
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const TextLinkWithDefaults: React.FC = (props) => {
+ return ;
+};
+
+TextLinkWithDefaults.displayName = "TextLink";
-export default TextLink;
+export default TextLinkWithDefaults;
diff --git a/src/components/ThemeDecorator.tsx b/src/components/ThemeDecorator.tsx
index 997719e..31de2ea 100644
--- a/src/components/ThemeDecorator.tsx
+++ b/src/components/ThemeDecorator.tsx
@@ -1,5 +1,5 @@
import * as React from "react";
-import { ThemeProvider } from "emotion-theming";
+import { ThemeProvider } from "@emotion/react";
import Reset from "./Reset";
import t from "../lib/theme";
import { Theme } from "../types/global";
diff --git a/src/components/Wrap.tsx b/src/components/Wrap.tsx
index acbaa35..fba4d30 100644
--- a/src/components/Wrap.tsx
+++ b/src/components/Wrap.tsx
@@ -4,10 +4,16 @@ import Box, { BoxProps } from "./Box";
const Wrap: React.FC = styled(Box)();
-Wrap.defaultProps = {
+// Fallback default props for React 19 compatibility
+const defaultProps: Partial = {
gridColumn: ["1/-1", "3 / span 8"],
};
-Wrap.displayName = "Wrap";
+// Apply default props manually since React 19 deprecated defaultProps for function components
+const WrapWithDefaults: React.FC = (props) => {
+ return ;
+};
+
+WrapWithDefaults.displayName = "Wrap";
-export default Wrap;
+export default WrapWithDefaults;
diff --git a/src/index.ts b/src/index.ts
index 704ad03..ae3dc16 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
export { default as BaseTheme } from "./lib/theme";
-export { Theme as MojoTheme } from "./types/global";
+
export { zStack } from "./lib/theme";
export { default as Button } from "./components/Button";
export { default as Text } from "./components/Text";
diff --git a/src/lib/styled.tsx b/src/lib/styled.tsx
index 684eb54..2aba146 100644
--- a/src/lib/styled.tsx
+++ b/src/lib/styled.tsx
@@ -1,7 +1,6 @@
/**
- * Exporting our own styled function wrapper allows us to have type save theme props
+ * Exporting our own styled function wrapper allows us to have type safe theme props
*/
-import styled, { CreateStyled } from "@emotion/styled";
-import { Theme } from "../types/global";
+import styled from "@emotion/styled";
-export default styled as CreateStyled;
+export default styled;
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index bca7152..a7d7e79 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -1,3 +1,48 @@
+// Module augmentation for Emotion's theme
+import '@emotion/react';
+
+declare module '@emotion/react' {
+ export interface Theme {
+ spaces: string[];
+ colors: {
+ mojogreen: string;
+ meangreen: string;
+ white: string;
+ dark: string;
+ gray: string;
+ mediumGray: string;
+ darkGray: string;
+ yellow: string;
+ aaMojogreen: string;
+ darkgreen: string;
+ };
+ schemes: {
+ dark: {
+ backgroundColor: string;
+ color: string;
+ };
+ light: {
+ backgroundColor: string;
+ color: string;
+ };
+ gray: {
+ backgroundColor: string;
+ color: string;
+ };
+ };
+ fontFamilies: { main: string; regular: string; display: string; mono: string };
+ maxWidths: string[];
+ widths: string[];
+ fontSizes: string[];
+ lineHeights: number[];
+ letterSpacing: string[];
+ opacities: number[];
+ breakpoints: number[];
+ easings: { easeOut: string; easeInOut: string };
+ zIndices: number[];
+ }
+}
+
export type Theme = {
spaces: string[];
colors: {
diff --git a/stories/autogrid.stories.tsx b/stories/autogrid.stories.tsx
index 33fd0cb..e74242d 100644
--- a/stories/autogrid.stories.tsx
+++ b/stories/autogrid.stories.tsx
@@ -1,6 +1,4 @@
-/** @jsx jsx */
-import { css, jsx } from "@emotion/core";
-import { storiesOf } from "@storybook/react";
+import { css } from "@emotion/react";
import AutoGrid from "../src/components/AutoGrid";
const styles = css({
@@ -9,17 +7,26 @@ const styles = css({
width: "100%",
});
-storiesOf("AutoGrid", module).add("Grid", () => (
-
-
-
-
-
-
-
-
-
-
-
-
-));
+const meta = {
+ title: "AutoGrid",
+ component: AutoGrid,
+};
+
+export default meta;
+
+export const Grid = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};
diff --git a/stories/column.stories.tsx b/stories/column.stories.tsx
index e3fe204..c781c99 100644
--- a/stories/column.stories.tsx
+++ b/stories/column.stories.tsx
@@ -1,54 +1,52 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Wrap from "../src/components/Wrap";
import Row from "../src/components/Row";
import Column from "../src/components/Column";
import Text from "../src/components/Text";
-storiesOf("Column", module).add("Two Column", () => (
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We are
- able to identify issues quickly and adjust in real-time to ensure we
- are tracking well against expectations and constantly delivering
- value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project. This
- allows the team to focus solely on clients’ goals, internalizing a
- product vision, and taking pride and ownership in their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business, your
- customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business, your
- customers, and what you want to achieve.
-
-
-
-
-));
+const meta = {
+ title: "Column",
+ component: Column,
+};
+
+export default meta;
+
+export const TwoColumn = {
+ render: () => (
+
+
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over. We
+ are able to identify issues quickly and adjust in real-time to
+ ensure we are tracking well against expectations and constantly
+ delivering value.
+
+
+
+
+ Team Strength
+
+
+ Designers and engineers are assigned to one, full-time project. This
+ allows the team to focus solely on clients' goals, internalizing a
+ product vision, and taking pride and ownership in their work.
+
+
+
+
+
+
+ User-Centered Design
+
+
+ Our designs are built on a deep understanding of your business, your
+ customers, and what you want to achieve.
+
+
+
+
+ ),
+};
diff --git a/stories/flex.stories.tsx b/stories/flex.stories.tsx
index 3ffd1f0..fa8e83a 100644
--- a/stories/flex.stories.tsx
+++ b/stories/flex.stories.tsx
@@ -1,27 +1,34 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Flex from "../src/components/Flex";
import Text from "../src/components/Text";
-storiesOf("Flex", module).add("Row", () => (
-
-
- Box
-
-
- Box
+const meta = {
+ title: "Flex",
+ component: Flex,
+};
+
+export default meta;
+
+export const Row = {
+ render: () => (
+
+
+ Box
+
+
+ Box
+
-
-));
+ ),
+};
diff --git a/stories/grid.stories.tsx b/stories/grid.stories.tsx
index 21c97d6..4b5c036 100644
--- a/stories/grid.stories.tsx
+++ b/stories/grid.stories.tsx
@@ -1,14 +1,21 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Grid from "../src/components/Grid";
import Box from "../src/components/Box";
-storiesOf("Grid", module).add("Two Column Grid", () => (
-
- Box
- Box
- Box
- Box
- Box
-
-));
+const meta = {
+ title: "Grid",
+ component: Grid,
+};
+
+export default meta;
+
+export const TwoColumnGrid = {
+ render: () => (
+
+ Box
+ Box
+ Box
+ Box
+ Box
+
+ ),
+};
diff --git a/stories/image.stories.tsx b/stories/image.stories.tsx
index af91ced..0c98e81 100644
--- a/stories/image.stories.tsx
+++ b/stories/image.stories.tsx
@@ -1,11 +1,18 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Image from "../src/components/Image";
-storiesOf("Image", module).add("Image", () => (
-
-));
+const meta = {
+ title: "Image",
+ component: Image,
+};
+
+export default meta;
+
+export const Default = {
+ render: () => (
+
+ ),
+};
diff --git a/stories/index.stories.tsx b/stories/index.stories.tsx
index c5b28d0..f75f9ad 100644
--- a/stories/index.stories.tsx
+++ b/stories/index.stories.tsx
@@ -1,10 +1,18 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Button from "../src/components/Button";
-storiesOf("Button", module).add("with text", () => (
- <>
-
-
-
-));
+
+const meta = {
+ title: "Button",
+ component: Button,
+};
+
+export default meta;
+
+export const WithText = {
+ render: () => (
+ <>
+
+
+
+ ),
+};
diff --git a/stories/listitem.stories.tsx b/stories/listitem.stories.tsx
index 2982e52..1a28dd2 100644
--- a/stories/listitem.stories.tsx
+++ b/stories/listitem.stories.tsx
@@ -1,13 +1,20 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Box from "../src/components/Box";
import ListItem from "../src/components/ListItem";
-storiesOf("List Item", module).add("Bulleted Item", () => (
-
- This is a list item
- This is a list item
- This is a list item
- This is a list item
-
-));
+const meta = {
+ title: "List Item",
+ component: ListItem,
+};
+
+export default meta;
+
+export const BulletedItem = {
+ render: () => (
+
+ This is a list item
+ This is a list item
+ This is a list item
+ This is a list item
+
+ ),
+};
diff --git a/stories/schemeprovider.stories.tsx b/stories/schemeprovider.stories.tsx
index efce98f..b993d57 100644
--- a/stories/schemeprovider.stories.tsx
+++ b/stories/schemeprovider.stories.tsx
@@ -1,177 +1,155 @@
/** @jsx jsx */
import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Wrap from "../src/components/Wrap";
-import { jsx } from "@emotion/core";
import Row from "../src/components/Row";
import Column from "../src/components/Column";
import SchemeProvider from "../src/components/SchemeProvider";
import Text from "../src/components/Text";
-storiesOf("SchemeProvider", module).add("Schemes", () => (
-
-
-
-
-
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We
- are able to identify issues quickly and adjust in real-time to
- ensure we are tracking well against expectations and constantly
- delivering value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project.
- This allows the team to focus solely on clients’ goals,
- internalizing a product vision, and taking pride and ownership in
- their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
-
-
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We
- are able to identify issues quickly and adjust in real-time to
- ensure we are tracking well against expectations and constantly
- delivering value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project.
- This allows the team to focus solely on clients’ goals,
- internalizing a product vision, and taking pride and ownership in
- their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
-
-
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We
- are able to identify issues quickly and adjust in real-time to
- ensure we are tracking well against expectations and constantly
- delivering value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project.
- This allows the team to focus solely on clients’ goals,
- internalizing a product vision, and taking pride and ownership in
- their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
-
-
-));
+const meta = {
+ title: "SchemeProvider",
+ component: SchemeProvider,
+};
+
+export default meta;
+
+export const Schemes = {
+ render: () => (
+
+
+
+
+
+
+
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over.
+ We are able to identify issues quickly and adjust in real-time
+ to ensure we are tracking well against expectations and
+ constantly delivering value.
+
+
+
+
+ Team Strength
+
+
+ Designers and engineers are assigned to one, full-time project.
+ This allows the team to focus solely on clients' goals,
+ internalizing a product vision, and taking pride and ownership
+ in their work.
+
+
+
+
+
+
+ User-Centered Design
+
+
+ Our designs are built on a deep understanding of your business,
+ your customers, and what you want to achieve.
+
+
+
+
+ Innovation
+
+
+ We use innovative technologies and creative approaches to create
+ solutions that resonate.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over.
+ We are able to identify issues quickly and adjust in real-time
+ to ensure we are tracking well against expectations and
+ constantly delivering value.
+
+
+
+
+ Team Strength
+
+
+ Designers and engineers are assigned to one, full-time project.
+ This allows the team to focus solely on clients' goals,
+ internalizing a product vision, and taking pride and ownership
+ in their work.
+
+
+
+
+
+
+ User-Centered Design
+
+
+ Our designs are built on a deep understanding of your business,
+ your customers, and what you want to achieve.
+
+
+
+
+ Innovation
+
+
+ We use innovative technologies and creative approaches to create
+ solutions that resonate.
+
+
+
+
+
+
+ ),
+};
diff --git a/stories/section.stories.tsx b/stories/section.stories.tsx
index 654b21b..f264a89 100644
--- a/stories/section.stories.tsx
+++ b/stories/section.stories.tsx
@@ -1,114 +1,122 @@
import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Section from "../src/components/Section";
import Wrap from "../src/components/Wrap";
import Row from "../src/components/Row";
import Column from "../src/components/Column";
import Text from "../src/components/Text";
-storiesOf("Section", module).add("Sections", () => (
-
-
-
-
- The principles that guide us.
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We
- are able to identify issues quickly and adjust in real-time to
- ensure we are tracking well against expectations and constantly
- delivering value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project.
- This allows the team to focus solely on clients’ goals,
- internalizing a product vision, and taking pride and ownership in
- their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
-
-
-
-
- The principles that guide us.
-
-
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We
- are able to identify issues quickly and adjust in real-time to
- ensure we are tracking well against expectations and constantly
- delivering value.
-
-
-
-
- Team Strength
-
-
- Designers and engineers are assigned to one, full-time project.
- This allows the team to focus solely on clients’ goals,
- internalizing a product vision, and taking pride and ownership in
- their work.
-
-
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
- User-Centered Design
-
-
- Our designs are built on a deep understanding of your business,
- your customers, and what you want to achieve.
-
-
-
-
-
-
-));
+const meta = {
+ title: "Section",
+ component: Section,
+};
+
+export default meta;
+
+export const Sections = {
+ render: () => (
+
+
+
+
+ The principles that guide us.
+
+
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over.
+ We are able to identify issues quickly and adjust in real-time
+ to ensure we are tracking well against expectations and
+ constantly delivering value.
+
+
+
+
+ Team Strength
+
+
+ Designers and engineers are assigned to one, full-time project.
+ This allows the team to focus solely on clients' goals,
+ internalizing a product vision, and taking pride and ownership
+ in their work.
+
+
+
+
+
+
+ User-Centered Design
+
+
+ Our designs are built on a deep understanding of your business,
+ your customers, and what you want to achieve.
+
+
+
+
+ Innovation
+
+
+ We use innovative technologies and creative approaches to create
+ solutions that resonate.
+
+
+
+
+
+
+
+
+ The principles that guide us.
+
+
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over.
+ We are able to identify issues quickly and adjust in real-time
+ to ensure we are tracking well against expectations and
+ constantly delivering value.
+
+
+
+
+ Team Strength
+
+
+ Designers and engineers are assigned to one, full-time project.
+ This allows the team to focus solely on clients' goals,
+ internalizing a product vision, and taking pride and ownership
+ in their work.
+
+
+
+
+
+
+ User-Centered Design
+
+
+ Our designs are built on a deep understanding of your business,
+ your customers, and what you want to achieve.
+
+
+
+
+ Innovation
+
+
+ We use innovative technologies and creative approaches to create
+ solutions that resonate.
+
+
+
+
+
+
+ ),
+};
diff --git a/stories/text.stories.tsx b/stories/text.stories.tsx
index f3d0ffd..3fe2b66 100644
--- a/stories/text.stories.tsx
+++ b/stories/text.stories.tsx
@@ -1,32 +1,40 @@
import * as React from "react";
-import { storiesOf } from "@storybook/react";
import Text from "../src/components/Text";
-storiesOf("Text", module).add("All Type", () => (
-
-
- We’re builders.
-
-
- The principles that guide us.
-
-
- Our engineers work alongside focused product strategists and exceptional
- experience designers to transform complex business problems into elegant,
- scalable solutions.
-
-
- Agility
-
-
- We’ve successfully built complex systems a hundred times over. We are able
- to identify issues quickly and adjust in real-time to ensure we are
- tracking well against expectations and constantly delivering value.
-
-
- We’ve successfully built complex systems a hundred times over. We are able
- to identify issues quickly and adjust in real-time to ensure we are
- tracking well against expectations and constantly delivering value.
-
-
-));
+const meta = {
+ title: "Text",
+ component: Text,
+};
+
+export default meta;
+
+export const AllType = {
+ render: () => (
+
+
+ We're builders.
+
+
+ The principles that guide us.
+
+
+ Our engineers work alongside focused product strategists and exceptional
+ experience designers to transform complex business problems into
+ elegant, scalable solutions.
+
+
+ Agility
+
+
+ We've successfully built complex systems a hundred times over. We are
+ able to identify issues quickly and adjust in real-time to ensure we are
+ tracking well against expectations and constantly delivering value.
+
+
+ We've successfully built complex systems a hundred times over. We are
+ able to identify issues quickly and adjust in real-time to ensure we are
+ tracking well against expectations and constantly delivering value.
+
+
+ ),
+};
diff --git a/stories/textinput.stories.tsx b/stories/textinput.stories.tsx
index 173ac6d..849f5cd 100644
--- a/stories/textinput.stories.tsx
+++ b/stories/textinput.stories.tsx
@@ -1,14 +1,21 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import TextInput from "../src/components/TextInput";
import Box from "../src/components/Box";
-storiesOf("TextInput", module).add("Text Input", () => {
- return (
-
-
-
-
-
- );
-});
+const meta = {
+ title: "TextInput",
+ component: TextInput,
+};
+
+export default meta;
+
+export const Default = {
+ render: () => {
+ return (
+
+
+
+
+
+ );
+ },
+};
diff --git a/stories/textlink.stories.tsx b/stories/textlink.stories.tsx
index a80a5d0..3f45166 100644
--- a/stories/textlink.stories.tsx
+++ b/stories/textlink.stories.tsx
@@ -1,21 +1,28 @@
-import * as React from "react";
-import { storiesOf } from "@storybook/react";
import TextLink from "../src/components/TextLink";
import SchemeProvider from "../src/components/SchemeProvider";
-storiesOf("Text Link", module).add("Link", () => (
-
-
Need an NDA?
-
-
- Need an
-
NDA?
-
-
-
+const meta = {
+ title: "Text Link",
+ component: TextLink,
+};
+
+export default meta;
+
+export const Link = {
+ render: () => (
+
+ Need an NDA?
+
+
Need an
NDA?
-
-
-));
+
+
+ Need an
+
NDA?
+
+
+