Skip to content

Commit c292b60

Browse files
nkrantznkrantz
committed
chore: mockup feb 20
1 parent 2911561 commit c292b60

File tree

14 files changed

+57
-45
lines changed

14 files changed

+57
-45
lines changed

‎packages/paste-core/components/button/__tests__/button.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -371,7 +371,7 @@ describe("Button", () => {
371371

372372
expect(button).not.toHaveStyleRule("text-align", "left");
373373
expect(button).toHaveStyleRule("color", "colorText");
374-
expect(button).toHaveStyleRule("background-color", "colorBackgroundBody");
374+
expect(button).toHaveStyleRule("background-color", "colorBackgroundWeak");
375375
expect(button).toHaveStyleRule("box-shadow", "shadowBorderWeak");
376376

377377
expect(getByText("Secondary")).toHaveStyleRule("justify-content", "center");

‎packages/paste-core/components/sidebar/src/SidebarBody.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const SidebarBody = React.forwardRef<HTMLDivElement, SidebarBodyProps>(
2626
maxHeight="100%"
2727
overflow="hidden"
2828
flexGrow={1}
29+
flexShrink={0}
2930
>
3031
{children}
3132
</Box>

‎packages/paste-core/components/sidebar/src/navigation/SidebarNavigationItem.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,11 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
101101
alignItems="center"
102102
>
103103
{icon && (
104-
<Box as="span" color={selected ? "colorTextInverse" : "colorTextIconInverse"}>
104+
<Box
105+
as="span"
106+
color={selected ? "colorTextInverse" : "colorTextIconInverse"}
107+
_hover={{ color: "colorTextInverse" }}
108+
>
105109
{icon}
106110
</Box>
107111
)}
@@ -114,6 +118,7 @@ const SidebarNavigationItem = React.forwardRef<HTMLAnchorElement, SidebarNavigat
114118
columnGap="space20"
115119
transition="all 120ms ease"
116120
flexGrow={1}
121+
flexShrink={0}
117122
float={visible ? "none" : "left"}
118123
opacity={visible ? 1 : 0}
119124
whiteSpace={visible ? "normal" : "nowrap"}

‎packages/paste-core/components/sidebar/src/navigation/styles.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,4 +85,7 @@ export const sidebarNavigationItemSelectedStyles: BoxProps = {
8585
...sidebarNavigationLabelSelectedStyles,
8686
backgroundColor: "colorBackgroundStrong",
8787
color: "colorTextInverse",
88+
_hover: {
89+
backgroundColor: "colorBackgroundWeak",
90+
},
8891
};

‎packages/paste-core/components/table/__tests__/index.spec.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,6 @@ describe("Table", () => {
4949
</Table>,
5050
);
5151
const renderedTable = screen.getByTestId("mockStripedTable").querySelector("tr:nth-of-type(even)");
52-
expect(renderedTable).toHaveStyleRule("background-color", "colorBackgroundRowStriped", {
53-
target: ":nth-of-type(even)",
54-
});
5552
});
5653
it("should render auto tableLayout style", (): void => {
5754
render(

‎packages/paste-core/components/table/src/TBody.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ const TBody = React.forwardRef<HTMLTableSectionElement, TBodyProps>(
2727
ref={ref}
2828
element={element}
2929
color="colorText"
30-
borderBottomLeftRadius="borderRadius30"
31-
borderBottomRightRadius="borderRadius30"
30+
backgroundColor="transparent"
3231
>
3332
{children}
3433
</Box>

‎packages/paste-core/components/table/src/THead.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ const getStickyStyles = ({ stickyHeader }: { stickyHeader: THeadProps["stickyHea
1616

1717
const StyledTHead = styled.thead<THeadProps>(
1818
css({
19-
backgroundColor: "colorBackgroundWeak",
2019
color: "colorTextWeak",
2120
borderTopLeftRadius: "borderRadius30",
2221
borderTopRightRadius: "borderRadius30",
@@ -32,11 +31,8 @@ const THead = React.forwardRef<HTMLTableSectionElement, THeadProps>(
3231
{...safelySpreadBoxProps(props)}
3332
ref={ref}
3433
as={StyledTHead as any}
35-
// backgroundColor="colorBackgroundWeakest"
3634
element={element}
3735
top={top}
38-
borderTopLeftRadius="borderRadius30"
39-
borderTopRightRadius="borderRadius30"
4036
{...getStickyStyles({ stickyHeader })}
4137
/>
4238
);

‎packages/paste-core/components/table/src/Table.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
3232
whiteSpace={noWrap ? "nowrap" : null}
3333
boxShadow={isActionable ? "shadowFocus" : null}
3434
borderRadius="borderRadius30"
35+
backgroundColor="transparent"
3536
>
3637
<Box
3738
{...safelySpreadBoxProps(props)}
3839
ref={ref}
40+
backgroundColor="colorBackgroundWeakest"
3941
as="table"
4042
borderCollapse="separate"
4143
borderColor="colorBorderWeaker"

‎packages/paste-core/components/table/src/Tr.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import { Box, safelySpreadBoxProps } from "@twilio-paste/box";
22
import * as React from "react";
33

4-
import { TableContext } from "./TableContext";
54
import type { TrProps } from "./types";
65

76
const Tr = React.forwardRef<HTMLTableRowElement, TrProps>(
87
({ element = "TR", verticalAlign = "middle", ...props }, ref) => {
9-
const { striped } = React.useContext(TableContext);
108
return (
119
<Box
1210
{...safelySpreadBoxProps(props)}
1311
ref={ref}
1412
as="tr"
1513
element={element}
1614
verticalAlign={verticalAlign}
17-
backgroundColor="colorBackgroundWeak"
18-
// _even={{ backgroundColor: striped ? "colorBackgroundRowStriped" : "colorBackgroundWeakest" }}
1915
_last={{ borderWidth: "borderWidth0" }}
2016
/>
2117
);

‎packages/paste-core/primitives/box/type-docs.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -727,7 +727,7 @@
727727
"description": "Responsive prop for the CSS `background-attachment` property"
728728
},
729729
"backgroundColor": {
730-
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
730+
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
731731
"defaultValue": null,
732732
"required": false,
733733
"externalProp": false,
@@ -958,7 +958,7 @@
958958
"description": "Responsive prop for the CSS `bottom` property"
959959
},
960960
"boxShadow": {
961-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
961+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
962962
"defaultValue": null,
963963
"required": false,
964964
"externalProp": false,
@@ -2759,6 +2759,13 @@
27592759
"externalProp": false,
27602760
"description": "Responsive style prop for the CSS `text-transform` property. Avoid using this prop if possible, as it can have implications for screen readers and internationalization."
27612761
},
2762+
"textUnderlineOffset": {
2763+
"type": "| ListStyleType\n | (ListStyleType | null | undefined)[]\n | {\n [x: string]: ListStyleType | undefined\n [x: number]: ListStyleType | undefined\n }",
2764+
"defaultValue": null,
2765+
"required": false,
2766+
"externalProp": false,
2767+
"description": "Responsive style prop for the CSS `text-underline-offset` property"
2768+
},
27622769
"title": {
27632770
"type": "string",
27642771
"defaultValue": null,

‎packages/paste-core/primitives/sibling-box/type-docs.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -829,7 +829,7 @@
829829
"description": "Responsive prop for the CSS `background-attachment` property"
830830
},
831831
"backgroundColor": {
832-
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
832+
"type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
833833
"defaultValue": null,
834834
"required": false,
835835
"externalProp": false,
@@ -1060,7 +1060,7 @@
10601060
"description": "Responsive prop for the CSS `bottom` property"
10611061
},
10621062
"boxShadow": {
1063-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
1063+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
10641064
"defaultValue": null,
10651065
"required": false,
10661066
"externalProp": false,
@@ -2861,6 +2861,13 @@
28612861
"externalProp": false,
28622862
"description": "Responsive style prop for the CSS `text-transform` property. Avoid using this prop if possible, as it can have implications for screen readers and internationalization."
28632863
},
2864+
"textUnderlineOffset": {
2865+
"type": "| ListStyleType\n | (ListStyleType | null | undefined)[]\n | {\n [x: string]: ListStyleType | undefined\n [x: number]: ListStyleType | undefined\n }",
2866+
"defaultValue": null,
2867+
"required": false,
2868+
"externalProp": false,
2869+
"description": "Responsive style prop for the CSS `text-underline-offset` property"
2870+
},
28642871
"title": {
28652872
"type": "string",
28662873
"defaultValue": null,

‎packages/paste-core/primitives/text/type-docs.json

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@
531531
"description": "Responsive prop for the CSS `bottom` property"
532532
},
533533
"boxShadow": {
534-
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
534+
"type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
535535
"defaultValue": null,
536536
"required": false,
537537
"externalProp": false,
@@ -2059,6 +2059,13 @@
20592059
"externalProp": false,
20602060
"description": "Responsive style prop for the CSS `text-transform` property. Avoid using this prop if possible, as it can have implications for screen readers and internationalization."
20612061
},
2062+
"textUnderlineOffset": {
2063+
"type": "| ListStyleType\n | (ListStyleType | null | undefined)[]\n | {\n [x: string]: ListStyleType | undefined\n [x: number]: ListStyleType | undefined\n }",
2064+
"defaultValue": null,
2065+
"required": false,
2066+
"externalProp": false,
2067+
"description": "Responsive style prop for the CSS `text-underline-offset` property"
2068+
},
20622069
"title": {
20632070
"type": "string",
20642071
"defaultValue": null,

‎packages/paste-design-tokens/tokens/themes/rebrand/global/background-color.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,5 @@ props:
2929
value: "{!palette-gray-100-transparent-70}"
3030
color-background-weak:
3131
value: "{!palette-gray-95}"
32+
color-background-primary:
33+
value: "{!palette-gray-60}"

‎packages/paste-theme/stories/rebrandMockup.stories.tsx

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,43 @@
22
/* eslint-disable react/jsx-max-depth */
33
// eslint-disable-next-line eslint-comments/disable-enable-pair
44
/* eslint-disable import/no-extraneous-dependencies */
5-
import { AIChatLog, AIChatMessage, AIChatMessageAuthor, AIChatMessageBody } from "@twilio-paste/ai-chat-log";
6-
import { Alert } from "@twilio-paste/alert";
7-
import type { AlertProps } from "@twilio-paste/alert";
85
import { Anchor } from "@twilio-paste/anchor";
9-
import { Avatar, type AvatarProps } from "@twilio-paste/avatar";
6+
import { Avatar } from "@twilio-paste/avatar";
107
import { Box } from "@twilio-paste/box";
118
import { Button } from "@twilio-paste/button";
12-
import type { ButtonProps } from "@twilio-paste/button";
139
import { ButtonGroup } from "@twilio-paste/button-group";
1410
import { Callout, CalloutHeading, CalloutText } from "@twilio-paste/callout";
15-
import type { CalloutProps } from "@twilio-paste/callout";
1611
import { Card } from "@twilio-paste/card";
1712
import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer";
1813
import { DetailText } from "@twilio-paste/detail-text";
19-
import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
20-
import type { DisclosureHeadingProps } from "@twilio-paste/disclosure";
2114
import { DisplayHeading } from "@twilio-paste/display-heading";
2215
import { FormPill, FormPillGroup, useFormPillState } from "@twilio-paste/form-pill-group";
2316
import { Heading } from "@twilio-paste/heading";
2417
import { AuthenticationIcon } from "@twilio-paste/icons/esm/AuthenticationIcon";
18+
import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
2519
import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon";
2620
import { LogoTwilioIcon } from "@twilio-paste/icons/esm/LogoTwilioIcon";
2721
import { NewIcon } from "@twilio-paste/icons/esm/NewIcon";
2822
import { ProductHomeIcon } from "@twilio-paste/icons/esm/ProductHomeIcon";
2923
import { ProductJourneysIcon } from "@twilio-paste/icons/esm/ProductJourneysIcon";
3024
import { TokenIcon } from "@twilio-paste/icons/esm/TokenIcon";
31-
import { Input } from "@twilio-paste/input";
3225
import { Paragraph } from "@twilio-paste/paragraph";
3326
import { RadioButton, RadioButtonGroup } from "@twilio-paste/radio-button-group";
34-
import { Option, Select } from "@twilio-paste/select";
3527
import {
3628
Sidebar,
3729
SidebarBody,
38-
SidebarCollapseButton,
39-
SidebarFooter,
4030
SidebarHeader,
4131
SidebarHeaderIconButton,
4232
SidebarHeaderLabel,
4333
SidebarNavigation,
4434
SidebarNavigationItem,
4535
SidebarPushContentWrapper,
4636
} from "@twilio-paste/sidebar";
47-
import { Stack } from "@twilio-paste/stack";
37+
import { TBody, THead, Table, Td, Th, Tr } from "@twilio-paste/table";
4838
import { Text } from "@twilio-paste/text";
49-
import { TextArea } from "@twilio-paste/textarea";
5039
import { useUID } from "@twilio-paste/uid-library";
5140
import * as React from "react";
5241

53-
import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon";
54-
import { TBody, THead, Table, Td, Th, Tr } from "@twilio-paste/table";
5542
import { AssistantImg } from "../public/images/Assistant";
5643
import { AvatarImg } from "../public/images/Avatar";
5744
import { BlueImg } from "../public/images/Blue";
@@ -73,9 +60,12 @@ const ContentCard = ({ number, text }: { number: string; text: string }): JSX.El
7360
<InformationIcon decorative={false} title="Information" size="sizeIcon20" />
7461
</Button>
7562
</Box>
76-
<Heading variant="heading10" as="span">
77-
{number}
78-
</Heading>
63+
64+
<Box marginBottom="space30">
65+
<Heading variant="heading10" as="span" marginBottom="space0">
66+
{number}
67+
</Heading>
68+
</Box>
7969
<Paragraph marginBottom="space0">{text}</Paragraph>
8070
<Box alignSelf="end">
8171
<Anchor href="#">View all</Anchor>
@@ -85,7 +75,7 @@ const ContentCard = ({ number, text }: { number: string; text: string }): JSX.El
8575
);
8676

8777
export const RebrandMockup = (): React.ReactNode => {
88-
const [pushSidebarCollapsed, setPushSidebarCollapsed] = React.useState(true);
78+
const [pushSidebarCollapsed] = React.useState(true);
8979
const sidebarNavigationSkipLinkID = useUID();
9080
const topbarSkipLinkID = useUID();
9181
const mainContentSkipLinkID = useUID();
@@ -217,12 +207,12 @@ export const RebrandMockup = (): React.ReactNode => {
217207
<BlueImg />
218208
</Box>
219209
<Box width="100%" display="flex" justifyContent="center">
220-
<RadioButtonGroup attached name="foo" aria-label="choose view" legend="">
221-
<RadioButton size={9} value="country" checked>
210+
<ButtonGroup attached>
211+
<Button variant="secondary" pressed>
222212
Orchestration assistant
223-
</RadioButton>
224-
<RadioButton value="channel">Control panel</RadioButton>
225-
</RadioButtonGroup>
213+
</Button>
214+
<Button variant="secondary">Control panel</Button>
215+
</ButtonGroup>
226216
</Box>
227217
<Box
228218
flexGrow={1}

0 commit comments

Comments
 (0)