{inlineLabelMarkup}
{prefixMarkup}
- {selectedOption.label}
+
+ {selectedOption.label}
+
diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss b/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss
new file mode 100644
index 00000000..43f7fb57
--- /dev/null
+++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss
@@ -0,0 +1,19 @@
+@import '../../../styles/common';
+
+.SelectorCard {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ padding: var(--space-3, 12px);
+ max-width: 480px;
+ width: 100%;
+ border-radius: var(--border-radius-05, 2px);
+ background: var(--surface-default, #fff);
+ box-shadow: var(--shadow-element-card);
+}
+
+.PillWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+}
diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx
new file mode 100644
index 00000000..54d189c6
--- /dev/null
+++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx
@@ -0,0 +1,54 @@
+import { Pill } from '../Pill';
+import { SelectorCard } from './SelectorCard';
+import { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Selector Card is a component that displays a title, a selected value, and a button.
+ */
+const meta = {
+ component: SelectorCard,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ title: 'SelectorCard',
+ selected:
+ 'Person Days Generated as a share of Cumulative Projection of Person Days',
+ buttonText: 'Switch Indicator',
+ onClick: () => {},
+ },
+};
+
+export const Pills: Story = {
+ args: {
+ title: 'SelectorCard',
+ selected: (
+ <>
+ {
+ console.log(e);
+ }}
+ returnValue="1"
+ >
+ Person Days Generated as a share of Cumulative Projection of Person
+ Days
+
+ {}} returnValue="2">
+ Person Days Generated as a share of Cumulative Projection of Person
+ Days
+
+ {}} returnValue="3">
+ Person Days Generated as a share of Cumulative Projection of Person
+ Days
+
+
+ ),
+ buttonText: 'Edit Indicators',
+ onClick: () => {},
+ },
+};
diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx
new file mode 100644
index 00000000..caceeedb
--- /dev/null
+++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx
@@ -0,0 +1,13 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { SelectorCard } from "./SelectorCard";
+
+describe("SelectorCard Tests", () => {
+ beforeEach(() => {
+ render(Component);
+ });
+
+ test("should show Component text all the time", () => {
+ expect(screen.getByText(/Component/i)).toBeInTheDocument();
+ });
+});
diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx
new file mode 100644
index 00000000..b0095c84
--- /dev/null
+++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx
@@ -0,0 +1,42 @@
+import { cn } from '../../utils';
+import { Button } from '../Button';
+import { Divider } from '../Divider';
+import { Text } from '../Text';
+import styles from './SelectorCard.module.scss';
+import React, { forwardRef } from 'react';
+
+type Props = {
+ title: string;
+ selected: string | React.ReactNode;
+ buttonText: string;
+ onClick: () => void;
+};
+
+const SelectorCard = forwardRef((props: Props, ref: any) => {
+ const { title, selected, buttonText, onClick } = props;
+ const themeClass = cn(styles.SelectorCard);
+
+ let content;
+ if (typeof selected === 'string') {
+ content = (
+
+ {selected}
+
+ );
+ } else {
+ content =
{selected}
;
+ }
+
+ return (
+
+ {title}
+ {content}
+
+
+
+ );
+});
+
+export { SelectorCard };
diff --git a/packages/opub-ui/src/components/SelectorCard/index.ts b/packages/opub-ui/src/components/SelectorCard/index.ts
new file mode 100644
index 00000000..7e0fda19
--- /dev/null
+++ b/packages/opub-ui/src/components/SelectorCard/index.ts
@@ -0,0 +1 @@
+export { SelectorCard } from "./SelectorCard";
diff --git a/packages/opub-ui/src/components/Tabs/Tabs.module.scss b/packages/opub-ui/src/components/Tabs/Tabs.module.scss
index 35c373b0..03626f08 100644
--- a/packages/opub-ui/src/components/Tabs/Tabs.module.scss
+++ b/packages/opub-ui/src/components/Tabs/Tabs.module.scss
@@ -31,6 +31,12 @@ $item-min-width: 50px;
cursor: pointer;
box-shadow: var(--shadow-inset-basic);
+ @media #{$breakpoints-md-down} {
+ padding-block: var(--space-2);
+ padding-inline-start: var(--space-5);
+ padding-inline-end: var(--space-6);
+ }
+
&::before {
content: '';
position: absolute;
@@ -64,7 +70,7 @@ $item-min-width: 50px;
}
&[data-state='active'] {
- background: var(--surface-highlight-subdued, #fbfaff);
+ background: var(--surface-highlight-default, #fbfaff);
.Title {
color: var(--text-highlight);
diff --git a/packages/opub-ui/src/components/Text/Text.module.scss b/packages/opub-ui/src/components/Text/Text.module.scss
index f7b93283..96bbe3f4 100644
--- a/packages/opub-ui/src/components/Text/Text.module.scss
+++ b/packages/opub-ui/src/components/Text/Text.module.scss
@@ -36,14 +36,14 @@
text-align: justify;
}
-.default {
- color: var(--text-default);
-}
-
.inherit {
color: inherit;
}
+.default {
+ color: var(--text-default);
+}
+
.disabled {
color: var(--text-disabled);
}
@@ -64,10 +64,22 @@
color: var(--text-subdued);
}
-.text-inverse {
+.highlight {
+ color: var(--text-highlight);
+}
+
+.interactive {
+ color: var(--text-interactive);
+}
+
+.onBgDefault {
color: var(--text-onbg-default);
}
+.onBgDisabled {
+ color: var(--text-onbg-disabled);
+}
+
.regular {
font-weight: 400;
}
diff --git a/packages/opub-ui/src/components/Text/Text.stories.tsx b/packages/opub-ui/src/components/Text/Text.stories.tsx
index a3c1fadf..9ebcd904 100644
--- a/packages/opub-ui/src/components/Text/Text.stories.tsx
+++ b/packages/opub-ui/src/components/Text/Text.stories.tsx
@@ -40,6 +40,9 @@ export const Variants = () => (
Text with HeadingXs variant
+
+ Text with headingSmSpaced variant
+
Text with BodyLg variant
@@ -91,30 +94,53 @@ export const WithFontWeight = () => (
);
export const WithColor = () => (
-
+
+
+ Default Text is used to communicate the majority of information on the
+
- Use to de-emphasize a piece of text that is less important to merchants
- than other nearby text. May also be used to indicate when normal content
- is absent, for example, “No supplier listed”. Don’t use only for aesthetic
- effect.
+ Subdued Text is used to create a hierarchy of information on the page.
+
+
+ Disabled Text is used to indicate that a field is disabled and cannot be
+ interacted with.
- Use in combination with a symbol showing an increasing value to indicate
- an upward trend.
+ Use to indicate that something was successful.
- Use to denote something that needs attention, or that merchants need to
- take action on.
+ Use to indicate that something needs attention.
- Use in combination with a symbol showing a decreasing value to indicate a
- downward trend.
-
-
-
+ Use to indicate that something has failed.
+
+
+ Highlight Text is used to highlight important information on the page.
+
+
+ Interactive Text is used to indicate that something can be interacted
+ with.
+
+
+
Use in situations where background is dark.
+
+
+ This is the disabled version for dark background
+
+
);
diff --git a/packages/opub-ui/src/components/index.ts b/packages/opub-ui/src/components/index.ts
index 8e904238..af201bc9 100644
--- a/packages/opub-ui/src/components/index.ts
+++ b/packages/opub-ui/src/components/index.ts
@@ -58,5 +58,7 @@ export { TextField } from './TextField';
export { Thumbnail } from './Thumbnail';
export { Toast, Toaster, useToast } from './Toast';
export { Tooltip } from './Tooltip';
-export { SearchInput } from "./SearchInput";
-export { Tray } from "./Tray";
+export { SearchInput } from './SearchInput';
+export { Tray } from './Tray';
+export { SelectorCard } from './SelectorCard';
+export { Pill } from './Pill';
diff --git a/packages/opub-ui/src/types/pill.ts b/packages/opub-ui/src/types/pill.ts
index 453030a9..8d9b9365 100644
--- a/packages/opub-ui/src/types/pill.ts
+++ b/packages/opub-ui/src/types/pill.ts
@@ -1,4 +1,4 @@
-interface NonMutuallyExclusiveProps {
+export type PillProps = {
/** Content to display in the tag */
children?: React.ReactNode;
/** Disables the tag */
@@ -11,10 +11,6 @@ interface NonMutuallyExclusiveProps {
variant?: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
/** Value that is returned on click of remove button */
returnValue?: string;
-}
-
-export type PillProps = NonMutuallyExclusiveProps &
- (
- | { onClick?(): void; onRemove?: undefined; url?: undefined }
- | { onClick?: undefined; onRemove?(value: string): void; url?: string }
- );
+ /** Truncate text to one line */
+ truncate?: boolean;
+};
diff --git a/packages/opub-ui/src/types/text.ts b/packages/opub-ui/src/types/text.ts
index 914c4a83..a3ac9b76 100644
--- a/packages/opub-ui/src/types/text.ts
+++ b/packages/opub-ui/src/types/text.ts
@@ -30,13 +30,17 @@ type Alignment = 'start' | 'center' | 'end' | 'justify';
type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
type Color =
- | 'success'
- | 'critical'
- | 'warning'
+ | 'default'
+ | 'medium'
| 'subdued'
- | 'text-inverse'
| 'disabled'
- | 'default'
+ | 'critical'
+ | 'warning'
+ | 'success'
+ | 'highlight'
+ | 'interactive'
+ | 'onBgDefault'
+ | 'onBgDisabled'
| 'inherit';
export const VariantFontWeightMapping: { [V in Variant]: FontWeight } = {