fix: vqa fixes

washingtonpost · Feb 28, 2022 · 2a7b7f0 · 2a7b7f0
1 parent 3cbb7a8
commit 2a7b7f0
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 6 deletions.
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
@@ -4,6 +4,7 @@ import {
   styled,
   AlertBanner,
   Checkbox,
+  Container,
 } from "@washingtonpost/wpds-ui-kit";
 import Chart from "@washingtonpost/wpds-assets/asset/chart";
 
@@ -47,6 +48,20 @@ function HomePage() {
       </p>
 
       <Stack>
+        <h2>Container</h2>
+        <Container
+          maxWidth="lg"
+          css={{
+            width: "100%",
+            border: "1px dashed #94538c",
+            background: "rgb(148, 83, 140, 0.2)",
+            height: "$500",
+            color: "$primary",
+          }}
+        >
+          Extra lg
+        </Container>
+
         <h2>Icon with Asset</h2>
         <Icon label="Chart">
           <Chart />

diff --git a/ui/button/src/Button.tsx b/ui/button/src/Button.tsx
@@ -17,6 +17,12 @@ export const Button = styled("button", {
   lineHeight: "$100",
   gap: "$050",
 
+  "&:disabled": {
+    color: "$onDisabled",
+    backgroundColor: "$colors$disabled",
+    borderColor: "$colors$onDisabled",
+  },
+
   variants: {
     variant: {
       primary: {

diff --git a/ui/button/src/play.stories.tsx b/ui/button/src/play.stories.tsx
@@ -275,6 +275,33 @@ const Template: ComponentStory<typeof Component> = ({ children, ...args }) => (
         </Component>
       </Stack>
     </Column>
+    <Column>
+      <Stack>
+        <Component
+          {...args}
+          disabled
+          size="075"
+          style="outline"
+          variant="cta"
+          icon="right"
+        >
+          {children}
+        </Component>
+
+        <Component
+          {...args}
+          disabled
+          icon="center"
+          size="075"
+          style="outline"
+          variant="secondary"
+        >
+          <Icon size="16" label="Icon label">
+            <Asset fill="currentColor" />
+          </Icon>
+        </Component>
+      </Stack>
+    </Column>
   </>
 );
 

diff --git a/ui/checkbox/src/Checkbox.tsx b/ui/checkbox/src/Checkbox.tsx
@@ -25,16 +25,20 @@ const StyledCheckbox = styled(PrimitiveCheckbox.Root, {
     outlineOffset: "2px",
   },
 
-  "&:disabled": {
-    $$variantColor: "$colors$disabled",
-    borderColor: "$colors$subtle",
-  },
-
   "&[aria-checked='true']": {
     backgroundColor: "$$variantColor",
     borderColor: "$$borderColor",
   },
 
+  "&[aria-checked='false']": {
+    backgroundColor: "transparent",
+  },
+
+  "&:disabled": {
+    backgroundColor: "$colors$disabled",
+    borderColor: "$colors$onDisabled",
+  },
+
   "&[aria-checked='mixed']": {
     backgroundColor: "$$variantColor",
     borderColor: "$$borderColor",

diff --git a/ui/container/src/Container.tsx b/ui/container/src/Container.tsx
@@ -7,6 +7,7 @@ export const Container = Theme.styled("div", {
   alignItems: "center",
   justifyContent: "center",
   margin: "0 auto",
+  width: "100%",
 
   $$xl: "1440px",
   $$lg: "1024px",

diff --git a/ui/container/src/play.stories.tsx b/ui/container/src/play.stories.tsx
@@ -42,7 +42,6 @@ Container.decorators = [
         rowGap: "$100",
         "& > *": {
           border: "1px dashed #94538c",
-          width: "100%",
           background: "rgb(148, 83, 140, 0.2)",
           height: "$500",
           color: "$primary",